.auth-shell { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); }
.auth-story { position: relative; display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem,6vw,6rem); background: #193578; color: #fff; overflow: hidden; }
.auth-story::after { content: ''; position: absolute; bottom: -12rem; right: -12rem; width: 30rem; height: 30rem; border: 1px solid #9ab9ff66; border-radius: 50%; pointer-events: none; }
.auth-story-mark { position: absolute; top: 2rem; left: clamp(2rem,6vw,6rem); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #9ab9ff; border-radius: 12px; font-weight: 750; }
.auth-story-kicker { color: #c3d3ff; font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.auth-story-title { font-size: clamp(2.5rem,4.5vw,4rem); line-height: 1.07; letter-spacing: -.05em; font-weight: 700; }
.auth-story-copy { max-width: 32ch; color: #dce6ff; }
.auth-story-rule { width: 3rem; height: 2px; background: #b0c5ff; }
.auth-story-foot { position: absolute; bottom: 1.5rem; font-size: .9rem; }
.auth-card { width: min(100% - 3rem, 29rem); align-self: center; justify-self: center; padding: 2.5rem 0; }
.auth-shell > .auth-card:only-child { grid-column: 1 / -1; }
.auth-card > .brand { margin-bottom: 2rem; }
.auth-card h1 { font-size: clamp(1.9rem,3vw,2.3rem); }
.auth-card form > button[type=submit] { width: 100%; }
.auth-card > button.secondary { width: 100%; margin-top: .75rem; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; }
.help { margin: .7rem 0 0; }
.help a { display: inline-flex; min-height: 44px; align-items: center; }
#auth-context { font-size: .94rem; border-left: 3px solid var(--action); }
#session-choice { padding: 1rem; margin-bottom: 1.25rem; border: 1px solid var(--line); border-radius: 12px; }
#session-choice p { margin-bottom: .7rem; }
.auth-card .theme-control { margin-top: 2rem; }
#mfa-fields { margin-top: 0; }
#mfa-fields legend { font-size: 1.1rem; }
@media (max-width: 800px) { .auth-shell { grid-template-columns: 1fr; } .auth-story { display: none; } .auth-card { padding: 2rem 0; } }
@media (max-width: 440px) { .auth-card { width: calc(100% - 2rem); align-self: start; } .auth-links { display: grid; } }

#credential-fields { display: grid; gap: .55rem; }