body {
background: linear-gradient(135deg, #f5f7fa 0%, #e6eafb 100%);
min-height: 100vh;
font-family: 'Inter', Arial, sans-serif;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.login-container {
background: #fff;
border-radius: 20px;
box-shadow: 0 8px 36px #0033a018, 0 1.5px 3px #0001;
padding: 44px 32px 36px 32px;
max-width: 410px;
width: 97vw;
margin: 50px auto;
overflow: hidden;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
min-height: 450px;
}
.login-logo {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 10px;
}
.login-logo .material-icons {
font-size: 2.7rem;
color: #4c67e6;
background: linear-gradient(135deg,#e3eaff 65%,#fff 100%);
border-radius: 50%;
padding: 14px;
box-shadow: 0 2px 8px #4c67e611;
}
.login-title {
font-size: 1.35em;
font-weight: 800;
color: #1a237e;
letter-spacing: .02em;
}
.login-title span {
color: #4c67e6;
}
.login-subtitle {
text-align: center;
font-size: 1.06em;
color: #384969;
opacity: 0.80;
margin-bottom: 24px;
margin-top: 4px;
font-weight: 500;
}
.form-label {
font-weight: 600;
color: #1a237e !important;
font-size: 1.08em;
margin-bottom: 4px;
display: block;
text-align: left;
letter-spacing: 0.01em;
}
.form-control {
background: #f7f8fc !important;
border-radius: 0.7rem;
border: 1.5px solid #e3eaf6;
font-size: 1.09em;
margin-bottom: 16px;
padding: 13px 15px;
color: #222d4c;
outline: none;
width: 100%;
box-sizing: border-box;
transition: border .18s, background .18s;
}
.form-control:focus {
border-color: #4c67e6;
background: #e3eaff !important;
color: #1a237e;
}
.form-control.is-invalid {
border-color: #ff5252 !important;
background: #fff0f1 !important;
color: #af2323 !important;
}
.btn-login {
background: linear-gradient(90deg,#4c67e6 90%,#85b6ff 100%);
color: #fff;
font-weight: 700;
font-size: 1.07em;
border-radius: 0.7rem;
padding: 13px 0;
width: 100%;
letter-spacing: .02em;
box-shadow: 0 2px 12px #4f8cff22;
border: none;
margin-top: 8px;
margin-bottom: 0;
transition: background .16s;
text-transform: uppercase;
cursor: pointer;
outline: none;
}
.btn-login:active, .btn-login:focus, .btn-login:hover {
background: linear-gradient(90deg,#2963d7 90%,#4c67e6 100%);
color: #fff;
}
.login-footer {
text-align: center;
color: #7c91b9;
font-size: .98em;
margin-top: 18px;
opacity: .75;
}
.alert {
width: 100%;
margin-bottom: 14px;
border-radius: 0.7em;
font-size: 1em;
padding: 11px 16px;
text-align: left;
box-sizing: border-box;
}
.alert-danger {
background: #fff0f1;
color: #af2323;
border: 1.5px solid #ff5252;
font-weight: 600;
}
@media (max-width: 600px) {
.login-container { padding: 12vw 2vw 7vw; max-width: 99vw; border-radius: 0; }
.login-title { font-size: 1.09em;}
.login-logo .material-icons { font-size: 2em; padding:10px;}
}