.login-page {
    margin: 0;
    min-height: 100vh;
    background: radial-gradient(ellipse at 15% 15%, #dce7f1 0, transparent 50%), radial-gradient(ellipse at 90% 90%, #e1eaf2 0, transparent 45%), #f3f6fb;
    color: #253b59;
}
.login-page #auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 24px 20px;
    background: transparent;
}
.login-page #auth .container { max-width: 460px; padding: 0; }
.login-page #auth .row { margin: 0; }
.login-page #auth .col-md-5 { width: 100%; padding: 0; }
.login-page .card {
    margin: 0;
    padding: 0 !important;
    border: 1px solid #e4ebf5;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(7, 55, 99, .12), 0 3px 14px rgba(7, 55, 99, .16);
}
.login-page .card-body { padding: 28px 32px 22px; }
.login-page .text-center.mb-5 { margin-bottom: 6px !important; }
.login-logo {
    width: 220px;
    max-width: 100%;
    height: 140px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 20px;
    box-shadow: 0 10px 35px rgba(7, 55, 99, .08);
}
.login-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.login-page h1 { font-size: 24px; font-weight: 700; color: #22354d; margin: 0 0 6px; }
.login-subtitle { color: #073763; font-size: 12px; font-weight: 600; letter-spacing: 2px; margin: 0; }
.login-page .form-group { margin-bottom: 18px; }
.login-page label { font-size: 15px; font-weight: 600; margin-bottom: 8px; color: #354a65; text-transform: none; }
.login-page .form-control, .login-page .form-select {
    height: 48px;
    border: 1px solid #dbe4f1;
    border-radius: 13px;
    background-color: #f8faff;
    color: #253b59;
    font-size: 15px;
    box-shadow: none;
}
.login-page .has-icon-left .form-control { padding-left: 50px; }
.login-page #password { padding-right: 90px; }
.login-page .form-control::placeholder { color: #94a2b6; text-transform: none; }
.login-page .form-control:focus, .login-page .form-select:focus { background-color: #fff; border-color: #073763; box-shadow: 0 0 0 4px rgba(7, 55, 99, .12); }
.login-page .has-icon-left .form-control-icon { top: 0; transform: none; height: 48px; padding: 0 16px; display: flex; align-items: center; color: #073763; pointer-events: none; }
.login-page .form-control-icon svg { width: 20px; height: 20px; }
.login-page fieldset.form-group { margin: 0; }
.password-toggle { position: absolute; right: 16px; top: 0; height: 48px; border: 0; background: transparent; color: #073763; font-size: 14px; font-weight: 600; padding: 0 5px; }
.password-toggle:focus-visible { outline: 2px solid #073763; outline-offset: -6px; border-radius: 10px; }
.login-page .login-submit { width: 100%; height: 48px; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; border: 0; border-radius: 13px; background: linear-gradient(110deg, #073763, #145589); font-size: 15px; font-weight: 600; box-shadow: 0 8px 22px rgba(7, 55, 99, .2); }
.login-page .login-submit:hover { background: linear-gradient(110deg, #052b4e, #0b477c); }
.login-submit span:last-child { font-size: 25px; font-weight: 400; }
.login-footer { border-top: 1px solid #e6edf6; margin-top: 22px; padding-top: 18px; text-align: center; font-size: 14px; color: #8999ae; }
@media (max-width: 575px) {
    .login-page #auth { padding: 24px 16px; }
    .login-page .card { border-radius: 24px; }
    .login-page .card-body { padding: 24px 22px 20px; }
    .login-logo { width: 200px; height: 125px; margin-bottom: 16px; }
    .login-page .form-control, .login-page .form-select { font-size: 16px; }
}

.login-page .form-group.has-icon-left .form-control:focus ~ .form-control-icon svg { color: #073763; }