/* Sign-in pages */
.auth-body { background: var(--app-bg); min-height: 100vh; }
.auth-shell { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
.auth-brand { position: relative; overflow: hidden; color: #fff;
    background: radial-gradient(120% 90% at 0% 0%, #1b485e 0%, #0F1E36 55%, #0a1526 100%); }
.auth-brand::after { content: ''; position: absolute; inset: auto -20% -35% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(13,115,119,.35), transparent 65%); }
.auth-brand-inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(2rem, 5vw, 5rem); max-width: 640px; }
.auth-brand .brand-mark { width: 38px; height: 38px; display: inline-grid; place-items: center; border-radius: 10px;
    background: var(--app-teal); color: var(--app-gold); font-size: 1.1rem; }
.auth-hero { font-size: clamp(1.6rem, 2.8vw, 2.4rem); font-weight: 700; line-height: 1.2; letter-spacing: -.015em; margin-bottom: .9rem; color: #fff; }
.auth-hero-sub { color: rgba(255,255,255,.72); font-size: 1.02rem; max-width: 30rem; margin-bottom: 2.5rem; }
.auth-chart { width: 100%; max-width: 360px; height: auto; margin-bottom: 2.5rem; }
.auth-note { color: rgba(255,255,255,.6); font-size: .85rem; margin: 0; }

.auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.auth-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: 0 18px 50px rgba(15, 30, 54, .08); }
.auth-card .brand-mark { width: 32px; height: 32px; display: inline-grid; place-items: center; border-radius: 9px; background: var(--app-teal); color: var(--app-gold); }
.auth-domain { background: #f1f5f9; color: #475569; font-weight: 600; }
.auth-code { text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 1.9rem; font-weight: 700;
    letter-spacing: .55em; padding-left: 1.1em; color: var(--app-navy); }
.auth-code::placeholder { color: #cbd5e1; letter-spacing: .4em; }
.auth-steps { display: grid; gap: .45rem; font-size: .85rem; color: #64748b; }
.auth-steps span { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; margin-right: .55rem; border-radius: 50%;
    background: var(--bs-primary-bg-subtle); color: var(--app-teal-dark); font-weight: 700; font-size: .75rem; }
.auth-foot { color: #94a3b8; margin: 1.25rem 0 0; }

@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-brand { display: none; }
    .auth-main { justify-content: flex-start; padding-top: 3rem; }
}

/* Password fields */
.pw-group .pw-toggle { border-color: var(--bs-border-color); color: #64748b; background: #fff; }
.pw-group .pw-toggle:hover, .pw-group .pw-toggle:focus { color: var(--app-teal); background: #f8fafc; }
.pw-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.pw-meter span { height: 5px; border-radius: 3px; background: #e2e8f0; transition: background .2s; }
.pw-meter span.on.s1 { background: #dc2626; }
.pw-meter span.on.s2 { background: #f59e0b; }
.pw-meter span.on.s3 { background: #14b8a6; }
.pw-meter span.on.s4 { background: #0D7377; }
.pw-rules li { color: #64748b; margin-bottom: .15rem; }
.pw-rules li i { margin-right: .35rem; }
.pw-rules li.ok { color: #15803d; }
.caps-warn[hidden] { display: none !important; }
.caps-warn { margin-top: -.25rem; }