/* Sign-in shares the learning dashboard's typography, palette and branding. */
.auth-download { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; margin-top: 20px; padding: 14px 18px; border: 1px solid #86edda40; border-radius: 10px; background: #86edda08; color: #c9eee6; text-decoration: none; }
.auth-download > span:first-child { font-size: 26px; color: #86edda; }
.auth-download strong { display: block; font-size: 13px; }
.auth-download small { display: block; margin-top: 5px; color: #9db6c9; font-size: 10px; }
.auth-download:hover { background: #86edda14; border-color: #86edda80; }
.auth-back-form { margin-bottom: 22px; }
.auth-back { display: inline-flex; align-items: center; min-height: 44px; border: 1px solid #8ba7c233; border-radius: 9px; padding: 10px 14px; background: #ffffff04; color: #d2dfef; text-decoration: none; font: 600 13px 'Segoe UI', sans-serif; cursor: pointer; }
.auth-back:hover { border-color: #86edda70; color: #86edda; background: #86edda08; }
.auth-stepper { list-style: none; display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; padding: 0; color: #9aadc5; font-size: 11px; }
.auth-stepper .complete { color: #86edda; }.auth-stepper [aria-current] { color: #f2cf85; }
.signup-page .auth-layout { grid-template-columns: minmax(0, 1fr) 480px; align-items: start; }
.signup-page .auth-intro { position: sticky; top: 40px; padding-top: 36px; }
.signup-page .auth-card > .auth-back { margin-bottom: 24px; }
.auth-benefits { list-style: none; padding: 0; margin: 36px 0; display: grid; gap: 28px; }
.auth-benefits li { display: flex; align-items: baseline; gap: 18px; }
.auth-benefits li > span { color: #6d9fa8; font: 14px Consolas, monospace; }
.auth-benefits h3 { color: #dce7f5; font-size: 16px; margin-bottom: 8px; }
.auth-benefits p { color: #9aacc4; font-size: 13px; line-height: 1.8; max-width: 320px; }
.auth-welcome-note { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid #86edda20; background: #86edda05; border-radius: 12px; max-width: 390px; }
.auth-welcome-note > span { color: #86edda; font: 22px Consolas, monospace; }
.auth-welcome-note p { color: #a9bcd0; font-size: 13px; line-height: 1.8; }
.auth-group { border: 0; padding: 0; margin: 0 0 12px; min-width: 0; }
.auth-group legend { width: 100%; border-bottom: 1px solid #ffffff0e; padding: 0 0 12px; margin-bottom: 20px; color: #6d9fa8; font-size: 11px; letter-spacing: 1px; }
.auth-group legend span { color: #d4dfed; font-size: 12px; letter-spacing: 0; margin-left: 10px; font-weight: 650; }
.auth-field select { width: 100%; min-height: 48px; border: 1px solid #7995b238; border-radius: 9px; padding: 12px; background: #0b1625; color: #dbe5f2; font: 16px 'Segoe UI', sans-serif; }
.auth-field [aria-invalid="true"] { border-color: #ed9696; }
.auth-field .auth-field-error, .auth-field-error { display: block; color: #ffc3c3; font-size: 12px; line-height: 1.7; margin: 8px 0; }
.auth-password-rules { list-style: none; padding: 0; margin: 10px 0 0; color: #95a8c1; font-size: 11px; line-height: 1.9; }
.auth-password-rules li::before { content: '○'; margin-right: 7px; }
.auth-password-rules [data-met="true"] { color: #86edda; }.auth-password-rules [data-met="true"]::before { content: '✓'; }
#password-match[data-match="false"] { color: #f0b89e; } #password-match[data-match="true"] { color: #86edda; }
.auth-optional, .auth-terms { border: 1px solid #ffffff15; border-radius: 10px; margin-bottom: 18px; padding: 14px 16px; }
.auth-optional summary, .auth-terms summary { color: #c1d2e7; font-size: 12px; cursor: pointer; line-height: 1.8; }
.auth-optional summary span { color: #88a0bd; font-size: 10px; margin-left: 8px; }
.auth-optional .auth-field { margin: 18px 0 0; }.auth-field input[type="file"] { font-size: 12px; padding: 10px; }
.auth-field input::file-selector-button { border: 0; border-radius: 5px; padding: 8px 10px; margin-right: 8px; background: #263950; color: #e3edf9; cursor: pointer; }
.auth-terms > div { max-height: 300px; overflow-y: auto; margin-top: 16px; padding-right: 8px; color: #a8bbd2; font-size: 12px; line-height: 1.8; }
.auth-terms h3 { font-size: 13px; color: #dce7f5; margin: 18px 0 8px; }.auth-terms ul { padding-left: 18px; }
.auth-agreement { align-items: flex-start; line-height: 1.8; }.auth-agreement input { margin-top: 3px; flex-shrink: 0; }
.auth-primary { text-decoration: none; }
.auth-field select:focus-visible, .auth-page summary:focus-visible { outline: 2px solid #86edda; outline-offset: 3px; }
@media (max-width: 1000px) { .signup-page .auth-layout { grid-template-columns: minmax(0, 1fr) 440px; gap: 32px; } }
@media (max-width: 800px) { .signup-page .auth-layout { grid-template-columns: minmax(0, 480px); justify-content: center; }.signup-page .auth-intro { display: none; } }
.auth-page { color-scheme: dark; }
.auth-page [hidden] { display: none !important; }
.auth-shell { width: min(1120px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 20px; }
.auth-page .dashboard-header { padding-bottom: 24px; }
.auth-header-link { color: #96a8bf; font-size: 12px; text-decoration: none; }
.auth-header-link strong { color: #dce7f5; font-weight: 600; margin-left: 8px; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: clamp(32px, 6vw, 88px); padding: 54px 0; min-height: calc(100vh - 160px); }
.auth-intro h2 { color: #eef3ff; font-size: clamp(32px, 4vw, 48px); font-weight: 750; letter-spacing: -1.6px; line-height: 1.14; margin: 18px 0; }
.auth-intro h2 > span { color: #86edda; }
.auth-intro-copy { color: #a2b1c6; font-size: 15px; line-height: 1.85; max-width: 440px; }
.auth-code { background: #0a1422; border: 1px solid #738db433; border-radius: 14px; overflow: hidden; margin-top: 28px; box-shadow: 0 16px 40px #00000015; }
.auth-code-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid #ffffff0d; color: #94a7bf; font: 11px Consolas, monospace; }
.auth-code-title > :first-child { color: #63848e; letter-spacing: 3px; }
.auth-code pre { margin: 0; padding: 22px; white-space: pre-wrap; color: #c9d8ec; font: 13px/1.9 Consolas, monospace; }
.auth-code-output { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-top: 1px solid #ffffff09; background: #73d3b908; font: 12px Consolas, monospace; color: #b4c7d7; }
.auth-code-output > :first-child { color: #86edda; }
.auth-output-label { margin-left: auto; font: 8px 'Segoe UI', sans-serif; color: #799ca5; letter-spacing: 1.5px; }
.auth-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.auth-paths > div { display: flex; align-items: center; gap: 12px; }
.auth-path-icon { display: grid; place-items: center; flex-shrink: 0; width: 35px; height: 35px; border: 1px solid #86edda25; background: #86edda07; border-radius: 9px; color: #86edda; font: 16px Consolas, monospace; }
.auth-path-icon.gold { color: #f2cf85; border-color: #f2cf8525; background: #f2cf8507; font-size: 24px; }
.auth-paths h3 { color: #dfe7f4; font-size: 12px; margin-bottom: 5px; }
.auth-paths p { color: #8fa1b9; font-size: 11px; line-height: 1.6; }
.auth-card { padding: 32px; background: linear-gradient(155deg, #162536, #111b2c 55%); border: 1px solid #7b9fbb2a; border-radius: 20px; box-shadow: 0 24px 64px #00000020; min-width: 0; }
.auth-card-symbol { display: grid; place-items: center; width: 42px; height: 42px; color: #86edda; background: #86edda0c; border: 1px solid #86edda25; border-radius: 12px; margin-bottom: 24px; font-size: 23px; }
.auth-card h1 { color: #f4f6fc; font-size: 27px; line-height: 1.25; letter-spacing: -.8px; margin-bottom: 12px; }
.auth-card-heading > p:last-child { color: #a2b1c6; font-size: 13px; line-height: 1.8; margin-bottom: 24px; }
.auth-field { margin-bottom: 20px; }
.auth-field label { display: block; color: #d0dcec; font-size: 12px; font-weight: 600; margin-bottom: 9px; }
.auth-field input { width: 100%; min-height: 48px; background: #0b1625; color: #edf3ff; border: 1px solid #7995b238; border-radius: 9px; padding: 12px 14px; font: 16px 'Segoe UI', sans-serif; transition: border-color .15s; }
.auth-field input::placeholder { color: #758aa5; font-size: 14px; }
.auth-field input:focus { border-color: #86edda; outline: 2px solid #86edda35; outline-offset: 2px; }
.auth-field input:-webkit-autofill { -webkit-text-fill-color: #edf3ff; -webkit-box-shadow: 0 0 0 1000px #0b1625 inset; caret-color: #edf3ff; }
.auth-field small { display: block; color: #9bacc2; font-size: 11px; line-height: 1.7; margin-top: 9px; }
.auth-password { position: relative; }
.auth-password input { padding-right: 70px; }
.auth-password button { position: absolute; right: 4px; top: 4px; min-height: 40px; padding: 0 12px; background: transparent; border: 0; color: #a4d7d0; font-size: 12px; cursor: pointer; border-radius: 6px; }
.auth-field .caps-lock { color: #f2cf85; }
.auth-remember { display: flex; align-items: center; gap: 9px; margin: 3px 0 22px; min-height: 28px; cursor: pointer; color: #a9b9ce; font-size: 12px; }
.auth-remember input { accent-color: #86edda; width: 16px; height: 16px; margin: 0; }
.auth-primary, .auth-secondary { width: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; min-height: 48px; border-radius: 9px; font-size: 14px; font-weight: 700; cursor: pointer; }
.auth-primary { background: #86edda; color: #0a302e; border: 1px solid #86edda; }
.auth-primary:hover { background: #b6ffed; }
.auth-secondary { color: #d3dfef; background: #ffffff03; border: 1px solid #7995b23d; }
.auth-secondary:hover { background: #ffffff08; border-color: #7995b26d; }
.auth-form button:disabled { opacity: .65; cursor: wait; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: #8196b1; font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ''; height: 1px; background: #ffffff0d; flex: 1; }
.auth-guest-note { font-size: 11px; color: #90a4bd; text-align: center; line-height: 1.7; margin-top: 11px; }
.auth-signup { padding-top: 23px; margin-top: 23px; border-top: 1px solid #ffffff0d; text-align: center; font-size: 12px; line-height: 1.9; color: #9aadc5; }
.auth-signup a { color: #86edda; font-weight: 600; text-underline-offset: 3px; }
.auth-message { padding: 12px 14px; border: 1px solid; border-radius: 9px; margin-bottom: 20px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.auth-error { color: #ffd1d1; background: #ef77770c; border-color: #ef777733; }
.auth-success { color: #a9eedb; background: #86edda08; border-color: #86edda33; }
.auth-cancel { text-align: center; margin-top: 22px; }
.auth-cancel button { border: 0; background: transparent; color: #b7c8dd; font-size: 13px; cursor: pointer; min-height: 44px; }
#admin-code { font: 24px Consolas, monospace; letter-spacing: 8px; text-align: center; }
.auth-footer { border-top: 1px solid #ffffff0d; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: #8296b0; font-size: 11px; line-height: 1.7; }
.auth-footer a { color: #b0c2d7; text-decoration: none; padding: 6px 0; }.auth-footer a span { color: #7d93af; margin: 0 8px; font-size: 10px; }
@media (max-width: 900px) { .auth-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; }.auth-card { padding: 26px; }.auth-paths { grid-template-columns: 1fr; }.auth-header-link { font-size: 11px; } }
@media (max-width: 720px) { .auth-layout { grid-template-columns: minmax(0, 440px); justify-content: center; padding: 22px 0 28px; min-height: 0; gap: 0; }.auth-intro { display: none; }.auth-shell { width: min(100% - 28px, 520px); padding: max(14px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom)); }.auth-header-link { display: none; }.auth-card { padding: 26px; }.auth-footer { align-items: flex-start; flex-direction: column; gap: 8px; }.auth-page .dashboard-header { justify-content: flex-start; padding-bottom: 16px; }.auth-page .brand { text-decoration: none; line-height: 1.15; }.auth-page .brand-mark { width: 38px; height: 38px; border-radius: 10px; font-size: 21px; }.auth-card h1 { font-size: clamp(24px, 7vw, 28px); } }
@media (max-width: 479px) { .auth-shell { width: 100%; padding-left: 14px; padding-right: 14px; }.auth-layout { padding-top: 14px; }.auth-card { padding: 24px 20px; border-radius: 16px; }.auth-card-heading > p:last-child { margin-bottom: 20px; }.auth-field { margin-bottom: 17px; }.auth-remember { align-items: flex-start; line-height: 1.5; margin-bottom: 19px; }.auth-primary, .auth-secondary { min-height: 52px; }.auth-divider { margin: 19px 0; }.auth-signup { padding-top: 19px; margin-top: 19px; }.auth-download { min-height: 58px; }.auth-footer { padding-bottom: 4px; } }
@media (max-width: 360px) { .auth-shell { padding-left: 10px; padding-right: 10px; }.auth-card { padding: 22px 17px; }.auth-page .brand { gap: 8px; letter-spacing: 1px; }.auth-page .brand small { letter-spacing: .8px; } }