/* Page shell: center everything */
    .shell{
        min-height:100vh;
        display:flex;
        justify-content:center;   /* horizontal center */
        align-items:center;       /* vertical center */
        padding:2rem;
        background: var(--shell-bg, #f6f8fb);
        text-align:center;        /* optional: center text too */
    }

    .login-card{
        width:100%;
        max-width:440px;
        margin:auto;              /* fallback centering */
        background:#fff;
        border-radius:16px;
        box-shadow: 0 10px 30px rgba(0,0,0,.08);
        padding:1.75rem 1.5rem;
    }

/* Tidy inner bits (optional polish) */
.login-card .brand-top{
    display:flex; align-items:center; justify-content:center;
    margin-bottom:.5rem;
}
.login-card .brand-top img{ max-width: 220px; height:auto; }

.login-card .title{ margin:.25rem 0 .25rem; font-size:1.5rem; }
.login-card .sub{ color:#6c757d; margin:0 0 1rem; }

.login-card .field{ margin-bottom:1rem; }
.login-card .label{ font-weight:600; margin-bottom:.25rem; display:block; }
.login-card .control{
    position:relative;
    display:flex; align-items:center;
    border:1px solid #dee2e6; border-radius:.6rem; padding:.4rem .75rem;
    background:#fff;
}
.login-card .control i{ opacity:.6; margin-right:.5rem; }
.login-card .control input{
    border:0; outline:0; width:100%; background:transparent;
    padding:.35rem 0;
}
.login-card .control:focus-within{ border-color:#1d4dbf; box-shadow:0 0 0 .2rem rgba(29,77,191,.08); }

.login-card .toggle{
    position:absolute; right:.4rem; top:50%; transform:translateY(-50%);
    background:transparent; border:0; padding:.25rem .35rem; color:#6c757d;
}

.login-card .alert{
    background:#fde8ea; color:#b02a37; border:1px solid #f5c2c7;
    padding:.5rem .75rem; border-radius:.5rem; margin-bottom:1rem; font-size:.95rem;
}
.login-card .alert.ok{
    background:#e8f6ef; color:#0f5132; border-color:#badbcc;
}

.login-card .btn-link{ color:#1d4dbf; text-decoration:none; }
.login-card .btn-link:hover{ text-decoration:underline; }

.login-card .btn.btn-primary{
    width:100%; margin-top:1rem;
    background:#1d4dbf; border-color:#1d4dbf;
    padding:.65rem 1rem; border-radius:.6rem; font-weight:600;
}

.login-card .footer{
    margin-top:1.25rem; text-align:center; color:#8b97a7; font-size:.9rem;
}

/* Nice dark-mode defaults if user prefers */
@media (prefers-color-scheme: dark){
    .shell{ --shell-bg: #0b0f16; }
    .login-card{ background:#121826; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
    .login-card .sub, .login-card .footer{ color:#9aa6b2; }
    .login-card .control{ border-color:#2a3342; background:#0f1522; }
    .login-card .control:focus-within{ border-color:#5b8cff; box-shadow:0 0 0 .2rem rgba(91,140,255,.15); }
    .login-card .btn.btn-primary{ background:#5b8cff; border-color:#5b8cff; }
}