body{
font-family:'Poppins',sans-serif;
background:linear-gradient(135deg,#f5f7fa,#e4e8f0);
min-height:100vh;
}

.app-container{
max-width:1200px;
margin:auto;
padding:40px 15px;
}

.app-header{
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
border-left:5px solid #4e48e0;
}

.app-title{
font-weight:700;
color:#4e48e0;
}

.btn-add{
background:#4e48e0;
color:white;
border:none;
border-radius:30px;
padding:10px 20px;
}

.btn-add:hover{
background:#3a36db;
color:white;
}

.reminder-card{
background:white;
border-radius:16px;
box-shadow:0 10px 20px rgba(0,0,0,0.08);
padding:20px;
height:100%;
transition:0.3s;
}

.reminder-card:hover{
transform:translateY(-6px);
}

.reminder-title{
font-weight:600;
font-size:18px;
}

.reminder-desc{
margin-top:10px;
color:#555;
}

.reminder-date{
font-size:14px;
margin-top:15px;
}

.badge-info{
background:#4facfe;
}

.badge-warning{
background:#ffc107;
}

.badge-danger{
background:#dc3545;
}
.card-reminder{
border:none;
overflow:hidden;
}

.bg-info-custom{
background:linear-gradient(135deg,#eaf5ff,#d8edff);
}

.bg-warning-custom{
background:linear-gradient(135deg,#fff8df,#ffefbd);
}

.bg-danger-custom{
background:linear-gradient(135deg,#ffe6e9,#ffd5db);
}

.info-section{
margin-top:12px;
}

.deleted-item{
background:#fff;
}

.header-copy{
min-width:0;
}

.header-actions{
justify-content:flex-end;
}

@media (max-width: 767.98px){
.app-container{
padding:24px 12px;
}

.app-header{
padding:18px;
}

.app-title{
font-size:1.35rem;
}

.header-copy,
.header-actions{
width:100%;
}

.header-actions{
justify-content:stretch;
}

.header-actions .btn{
flex:1 1 calc(50% - 0.5rem);
display:flex;
justify-content:center;
align-items:center;
gap:0.35rem;
min-height:42px;
padding-inline:10px;
}
}

@media (max-width: 420px){
.header-actions .btn{
flex:1 1 100%;
}
}

.login-page{
margin:0;
font-family:'Poppins',sans-serif;
background:
radial-gradient(circle at 8% 10%, rgba(108, 92, 231, 0.25), transparent 40%),
radial-gradient(circle at 85% 20%, rgba(0, 206, 201, 0.2), transparent 40%),
linear-gradient(145deg, #f4f6ff 0%, #e8ecff 45%, #f7fbff 100%);
min-height:100vh;
}

.login-wrapper{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
}

.login-shell{
width:min(920px, 100%);
display:grid;
grid-template-columns:1fr 420px;
gap:26px;
align-items:stretch;
}

.login-branding,
.login-card{
background:rgba(255,255,255,0.9);
border:1px solid rgba(255,255,255,0.8);
backdrop-filter:blur(12px);
box-shadow:0 18px 45px rgba(44, 55, 120, 0.15);
border-radius:24px;
}

.login-branding{
padding:42px;
display:flex;
flex-direction:column;
justify-content:center;
}

.brand-pill{
align-self:flex-start;
padding:8px 14px;
border-radius:999px;
background:rgba(78, 72, 224, 0.12);
color:#4e48e0;
font-size:0.82rem;
font-weight:600;
margin-bottom:20px;
}

.login-headline{
font-size:2rem;
font-weight:700;
line-height:1.2;
margin-bottom:12px;
color:#26204f;
}

.login-subtitle{
color:#4f5682;
margin:0;
font-size:1rem;
}

.login-card{
padding:34px;
}

.login-title{
font-size:1.55rem;
font-weight:700;
margin-bottom:8px;
color:#201b4f;
}

.login-help{
color:#646d97;
font-size:0.95rem;
margin-bottom:20px;
}

.login-form-group{
margin-bottom:14px;
}

.login-input{
height:48px;
border-radius:12px;
border:1px solid #d5d9f0;
padding-inline:14px;
}

.login-input:focus{
border-color:#615bf0;
box-shadow:0 0 0 0.2rem rgba(97, 91, 240, 0.18);
}

.login-button{
margin-top:8px;
height:48px;
border:none;
border-radius:12px;
font-weight:600;
color:#fff;
background:linear-gradient(90deg, #4e48e0, #6853f4);
box-shadow:0 10px 20px rgba(78, 72, 224, 0.3);
}

.login-button:hover{
background:linear-gradient(90deg, #3f39cf, #5b45e8);
color:#fff;
}

.login-links{
margin-top:18px;
font-size:0.93rem;
color:#676d8f;
display:flex;
justify-content:center;
gap:10px;
flex-wrap:wrap;
}

.login-links a{
color:#4e48e0;
text-decoration:none;
font-weight:500;
}

.login-links a:hover{
text-decoration:underline;
}

@media (max-width: 900px){
.login-shell{
grid-template-columns:1fr;
max-width:500px;
}

.login-branding{
padding:30px;
}

.login-card{
padding:28px;
}

.login-headline{
font-size:1.7rem;
}
}

@media (max-width: 460px){
.login-wrapper{
padding:14px;
}

.login-branding,
.login-card{
border-radius:18px;
}

.login-branding,
.login-card{
padding:22px;
}

.login-title{
font-size:1.35rem;
}
}