/* 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%, #0E3F73 0%, #061E3B 55%, #04152B 100%); }
.auth-brand::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--thn-grad-brand); z-index: 2; }
.auth-brand::after { content: ''; position: absolute; inset: auto -20% -35% auto; width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(242,99,44,.28), rgba(56,176,208,.12) 45%, transparent 68%); }
.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-logo-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.auth-logo-chip { background: #fff; border-radius: 12px; padding: .5rem .8rem; display: inline-flex; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.auth-logo-chip img { height: 30px; width: auto; display: block; }
.auth-brand-name { color: #fff; font-weight: 600; font-size: 1.1rem; letter-spacing: -.005em; }
.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(6, 30, 59, .08); position: relative; overflow: hidden; }
.auth-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--thn-grad-brand); }
.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(--thn-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(--thn-blue-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(--thn-blue); 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: #38B0D0; }
.pw-meter span.on.s4 { background: #1878B8; }
.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; }