.auth-shell { min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(ellipse at top, #233e63, #0f1d32 70%); }
.auth-card { width: min(100%, 470px); background: #fff; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 20px; box-shadow: 0 20px 70px #0003; color: #172b45; }
.auth-brand { display: flex; gap: .85rem; align-items: center; margin-bottom: 2rem; }
.auth-monogram { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; background: #18365b; color: #fff; font-weight: 800; flex-shrink: 0; }
.auth-brand strong, .auth-brand div > span { display: block; }
.auth-brand strong { font-size: 1.1rem; }
.auth-brand div > span { font-size: .75rem; color: #5b6b80; margin-top: .25rem; }
.auth-card h1 { font-size: 1.7rem; letter-spacing: -.035em; margin-bottom: .6rem; }
.auth-intro { color: #52647b; font-size: .9rem; line-height: 1.6; margin-bottom: 1.5rem; overflow-wrap: anywhere; }
.auth-form { display: grid; gap: 1.1rem; }
.auth-field { display: grid; gap: .4rem; }
.auth-field label { font-weight: 650; font-size: .85rem; }
.auth-field input { width: 100%; min-height: 46px; padding: .65rem .8rem; border: 1px solid #bbc8d8; border-radius: 9px; background: #fafdff; color: #142b47; }
.auth-field input:focus { outline: 3px solid #b9d8ff; border-color: #2764ae; }
.auth-password { position: relative; }
.auth-password input { padding-right: 3.4rem; }
.auth-password input::-ms-reveal { display: none; }
.password-toggle { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 0 8px 8px 0; background: transparent; color: #526b89; cursor: pointer; }
.password-toggle:hover { background: #e7eff9; color: #2059a1; }
.password-toggle:focus-visible { outline: 3px solid #6da6ec; outline-offset: -3px; }
.password-toggle svg { width: 21px; height: 21px; pointer-events: none; }
.password-toggle[aria-pressed="false"] .eye-slash { display: none; }
.auth-field small, .auth-resend small { color: #52647b; font-size: .75rem; }
.auth-code { font-size: 1.35rem; letter-spacing: .25em; font-variant-numeric: tabular-nums; }
.auth-submit, .auth-secondary { min-height: 46px; padding: .7rem 1.1rem; border-radius: 9px; font-weight: 650; cursor: pointer; }
.auth-submit { color: #fff; background: #2059a1; border: 1px solid #2059a1; margin-top: .25rem; }
.auth-submit:hover { background: #164781; }
.auth-secondary { color: #214975; background: #eef4fc; border: 1px solid #b9cadf; }
.auth-submit:focus-visible, .auth-secondary:focus-visible, .auth-links a:focus-visible { outline: 3px solid #6da6ec; outline-offset: 3px; }
.auth-resend { display: grid; gap: .45rem; margin-top: 1rem; }
.auth-links { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; font-size: .85rem; }
.auth-links a { color: #2059a1; text-decoration: none; font-weight: 600; }
.auth-links a:hover { text-decoration: underline; }
.auth-alert { padding: .8rem 1rem; margin: 0 0 1rem; border-radius: 9px; border: 1px solid #e8ce8e; background: #fff8e7; color: #705014; font-size: .85rem; overflow-wrap: anywhere; }
.auth-error { background: #fff0ef; border-color: #f0b3b0; color: #952f29; }
.auth-success { background: #eaf8f0; border-color: #a5d9be; color: #216442; }
.account-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.account-controls form { margin: 0; }
.account-controls .header-badge { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-controls a, .account-controls button { display: inline-flex; align-items: center; min-height: 36px; padding: .45rem .7rem; color: #214975; background: #f0f5fc; border: 1px solid #c7d5e7; border-radius: 8px; font-size: .78rem; font-weight: 600; text-decoration: none; }
.account-controls a:hover, .account-controls button:hover { background: #e1ebf8; }