:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #080c16;
  color: #f5f7fb;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: radial-gradient(circle at 50% 0, #172949 0, #080c16 48%); }
button, input { font: inherit; }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 18px; }
.login-card { width: min(440px, 100%); padding: 30px; border: 1px solid rgba(155,177,218,.18); border-radius: 22px; background: rgba(16,24,40,.94); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.brand > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg,#64a6ff,#2763d9); box-shadow: 0 8px 24px rgba(57,137,255,.28); font-weight: 800; }
.brand strong { letter-spacing: -.01em; }
.eyebrow { color: #64a6ff; font-size: 10px; font-weight: 800; letter-spacing: .18em; margin-bottom: 11px; }
h1 { margin: 0; font-size: 36px; letter-spacing: -.04em; }
p { color: #98a5bc; line-height: 1.5; margin: 10px 0 23px; }
form { display: grid; gap: 15px; }
label { display: grid; gap: 7px; }
label span, .manual-key span { color: #bcc6d7; font-size: 12px; font-weight: 650; }
input { width: 100%; border: 1px solid rgba(155,177,218,.2); background: #0a101c; color: white; border-radius: 11px; padding: 12px 13px; outline: none; }
input:focus { border-color: #3989ff; box-shadow: 0 0 0 3px rgba(57,137,255,.14); }
button { border: 0; border-radius: 11px; padding: 12px 15px; color: white; background: #3989ff; font-weight: 700; cursor: pointer; }
button:hover { background: #64a6ff; }
button:disabled { opacity: .5; cursor: wait; }
.secondary, .back-button { background: #182237; }
.back-button { width: auto; padding: 7px 10px; margin: -8px 0 22px; color: #aebbd0; font-size: 12px; }
.enrollment { padding: 15px; margin-bottom: 16px; border: 1px solid rgba(57,137,255,.25); border-radius: 14px; background: rgba(57,137,255,.07); text-align: center; }
.enrollment p { margin: 0 0 13px; font-size: 13px; text-align: left; }
#qr-code { width: 210px; max-width: 80%; padding: 9px; background: white; border-radius: 12px; }
.manual-key { display: grid; gap: 5px; margin-top: 12px; }
.manual-key code { color: #dce6f7; font-size: 12px; overflow-wrap: anywhere; }
.recovery-codes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; border-radius: 12px; background: #0a101c; }
.recovery-codes code { padding: 7px; color: #8fc0ff; text-align: center; }
.recovery-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.error { margin-top: 16px; padding: 11px 13px; color: #ffd8dc; background: rgba(255,111,125,.12); border: 1px solid rgba(255,111,125,.3); border-radius: 10px; font-size: 13px; }
.security-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(155,177,218,.13); color: #728099; text-align: center; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.hidden { display: none !important; }
@media (max-width: 480px) { .login-card { padding: 23px 19px; } .recovery-codes { grid-template-columns: 1fr; } }