.login-page {
    --login-ink: #102a43;
    --login-muted: #627d98;
    --login-border: #dfe8f0;
    --login-canvas: #eef4f8;
    --login-teal: #0e7490;
    --login-teal-deep: #0b5870;
    --login-green: #2a8f75;
}
.login-page {
    min-height: 100vh;
    margin: 0;
    padding: 1.5rem;
    color: var(--login-ink);
    background:
        radial-gradient(circle at 14% 18%, rgba(14,116,144,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(16,42,67,.13), transparent 31%),
        linear-gradient(135deg, #102a43 0%, #0e7490 100%);
}
.login-page::before {
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    opacity: .28 !important;
}
.login-page .login-container { max-width: 470px; }
.login-page .login-card {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 26px 60px rgba(7,27,45,.28), 0 2px 0 rgba(255,255,255,.18) inset;
    animation: none;
}
.login-page .login-card:hover { transform: translateY(-2px); }
.login-page .login-header {
    padding: 2rem 2rem 1.7rem;
    text-align: left;
    background: linear-gradient(132deg, #102a43 0%, #0e7490 100%);
}
.login-page .login-header::before { content: ''; right: -2rem; bottom: -3.8rem; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; opacity: 1; transform: none; }
.login-page .login-header::after { content: ''; position: absolute; right: 2rem; bottom: 1.5rem; width: 82px; height: 82px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; }
.login-page .login-logo {
    width: 62px;
    height: 62px;
    margin: 0 0 1.15rem;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.27);
    border-radius: 15px;
    background: rgba(255,255,255,.12);
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.login-page .login-logo:hover { transform: none; background: rgba(255,255,255,.16); }
.login-page .login-logo i { font-size: 2rem; }
.login-page .login-eyebrow {
    position: relative;
    z-index: 1;
    margin: 0 0 .4rem;
    color: rgba(255,255,255,.72);
    font-size: .6rem;
    font-weight: 750;
    letter-spacing: .16em;
    text-transform: uppercase;
}
.login-page .login-header h3 {
    position: relative;
    z-index: 1;
    max-width: 330px;
    font-size: 1.42rem;
    font-weight: 780;
    letter-spacing: -.035em;
    line-height: 1.2;
}
.login-page .login-header p { position: relative; z-index: 1; margin-top: .45rem; color: rgba(255,255,255,.9); font-size: .78rem; font-weight: 600; }
.login-page .hospital-info { position: relative; z-index: 1; max-width: 340px; margin-top: .55rem; color: rgba(255,255,255,.68); font-size: .62rem; }
.login-page .login-body { padding: 1.65rem 2rem 1.35rem; }
.login-page .form-group { margin-bottom: 1rem; }
.login-page .form-group label {
    margin-bottom: .42rem;
    color: var(--login-ink);
    font-size: .64rem;
    font-weight: 780;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.login-page .form-group label i { color: var(--login-teal); }
.login-page .input-group-custom { min-height: 42px; }
.login-page .form-control-custom {
    min-height: 42px;
    padding: .65rem 2.85rem .65rem 2.65rem;
    border: 1px solid var(--login-border);
    border-radius: 9px;
    color: var(--login-ink);
    background: #f9fbfd;
    box-shadow: none;
    font-size: .78rem;
    font-weight: 600;
}
.login-page .form-control-custom:focus { border-color: var(--login-teal); background: #fff; box-shadow: 0 0 0 3px rgba(14,116,144,.12); }
.login-page .form-control-custom::placeholder { color: #8aa0b2; font-size: .72rem; }
.login-page .form-control-custom.error { border-color: #c45858; box-shadow: 0 0 0 3px rgba(196,88,88,.11); }
.login-page .input-icon { left: .95rem; color: var(--login-teal); font-size: .9rem; }
.login-page .input-icon.error-icon { color: #c45858; }
.login-page .password-toggle { right: .55rem; width: 30px; height: 30px; color: #7890a2; }
.login-page .password-toggle:hover { color: var(--login-teal); background: #eaf7f8 !important; }
.login-page .password-toggle:focus { box-shadow: 0 0 0 2px rgba(14,116,144,.2) !important; }
.login-page .password-toggle i { font-size: .88rem; }
.login-page .btn-login {
    min-height: 43px;
    margin-top: .65rem;
    padding: .68rem 1rem;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(105deg, var(--login-teal-deep) 0%, var(--login-teal) 100%);
    box-shadow: 0 8px 16px rgba(14,116,144,.19);
    font-size: .72rem;
    font-weight: 780;
    letter-spacing: .07em;
    text-transform: uppercase;
}
.login-page .btn-login:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 11px 21px rgba(14,116,144,.25); filter: none; }
.login-page .btn-login:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(14,116,144,.25); }
.login-page .btn-login .btn-spinner { width: 17px; height: 17px; border-width: 2px; }
.login-page .alert-danger-custom {
    margin-bottom: 1rem;
    padding: .72rem .8rem;
    border: 1px solid #f1caca;
    border-left: 3px solid #c45858;
    border-radius: 9px;
    color: #a84444;
    background: #fff7f7;
    font-size: .68rem;
    line-height: 1.35;
}
.login-page .alert-danger-custom i { color: #c45858; }
.login-page .login-access-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: 1rem !important;
    color: var(--login-muted) !important;
    font-size: .59rem !important;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.login-page .login-access-note i { color: var(--login-green); }
.login-page .login-footer {
    padding: 1rem 1.4rem .9rem;
    border-top: 1px solid var(--login-border);
    background: #f7fafc;
    text-align: left;
}
.login-page .login-footer-main { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.login-page .login-footer-identity, .login-page .login-footer-credit { display: flex; gap: .55rem; }
.login-page .login-footer-identity { align-items: center; }
.login-page .login-footer-credit { flex-direction: column; align-items: flex-end; gap: .08rem; text-align: right; }
.login-page .login-footer-mark { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; color: #fff; background: var(--login-teal); font-size: .68rem; }
.login-page .login-footer-system { color: var(--login-ink); font-size: .61rem; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.login-page .login-footer-company, .login-page .login-footer-credit span { color: var(--login-muted); font-size: .54rem; line-height: 1.35; }
.login-page .login-footer-credit-label { color: var(--login-teal) !important; font-size: .5rem !important; font-weight: 780; letter-spacing: .08em; text-transform: uppercase; }
.login-page .login-footer-credit strong { color: var(--login-ink); font-size: .58rem; font-weight: 750; }
.login-page .login-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .8rem; padding-top: .65rem; border-top: 1px solid #e6eef4; }
.login-page .login-footer-bottom small { color: var(--login-muted); font-size: .51rem; }
.login-page .login-footer .security-badge { display: inline-flex; align-items: center; gap: .25rem; margin: 0; padding: .27rem .48rem; border: 1px solid #cfe8df; border-radius: 999px; color: var(--login-green); background: #eef9f4; font-size: .5rem; font-weight: 750; white-space: nowrap; }
.login-page .login-footer .security-badge i { margin: 0; }
@media (max-width: 550px) {
    .login-page { padding: .8rem; }
    .login-page .login-header { padding: 1.5rem 1.35rem 1.35rem; }
    .login-page .login-body { padding: 1.35rem 1.35rem 1.1rem; }
    .login-page .login-header h3 { font-size: 1.2rem; }
    .login-page .login-footer { padding: .9rem 1rem .8rem; }
    .login-page .login-footer-main { flex-direction: column; gap: .75rem; }
    .login-page .login-footer-credit { align-items: flex-start; text-align: left; }
    .login-page .login-footer-bottom { align-items: flex-start; flex-direction: column; gap: .5rem; }
}
@media (max-width: 400px) {
    .login-page .login-header { padding: 1.25rem 1.05rem 1.15rem; }
    .login-page .login-body { padding: 1.1rem 1.05rem .95rem; }
    .login-page .login-logo { width: 54px; height: 54px; margin-bottom: .9rem; }
    .login-page .login-logo i { font-size: 1.7rem; }
    .login-page .login-header h3 { font-size: 1.08rem; }
}