:root[data-theme="light"] {
  --auth-page:#f5f7fa; --auth-page-top:#e8eef7; --auth-card:#fffffffa; --auth-line:#d6dce4;
  --auth-text:#263449; --auth-muted:#64748b; --auth-field:#fff; --auth-field-line:#b9c3d0;
  --auth-button:#315f91; --auth-button-hover:#244d78; --auth-button-text:#fff; --auth-kicker:#6d4ec7;
  --auth-error-bg:#fff0f1; --auth-error-line:#c94b52; --auth-error-text:#8d2930;
  --auth-challenge-text:#604c83; --auth-shadow:0 18px 40px #1d2b3a24;
}
:root[data-theme="dark"] {
  --auth-page:#09090b; --auth-page-top:#18181b; --auth-card:#18181bf5; --auth-line:#3f3f46;
  --auth-text:#f4f4f5; --auth-muted:#a1a1aa; --auth-field:#111113; --auth-field-line:#52525b;
  --auth-button:#3f3f46; --auth-button-hover:#52525b; --auth-button-text:#fff; --auth-kicker:#c4b5fd;
  --auth-error-bg:#450a0a; --auth-error-line:#b91c1c; --auth-error-text:#fecaca;
  --auth-challenge-text:#ddd6fe; --auth-shadow:0 18px 40px #0007;
}
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; background:linear-gradient(180deg,var(--auth-page-top) 0%,var(--auth-page) 100%); color:var(--auth-text); font-family:Arial,sans-serif; }
.auth-theme-action { position:fixed; z-index:2; top:20px; right:20px; }
.auth-shell { max-width:1100px; min-height:100vh; margin:0 auto; padding:32px 20px 60px; }
.auth-card { max-width:520px; margin:80px auto 0; padding:30px; border:1px solid var(--auth-line); border-radius:20px; background:var(--auth-card); box-shadow:var(--auth-shadow); }
.auth-mark { display:grid; place-items:center; width:40px; height:40px; margin-bottom:20px; border-radius:11px; background:linear-gradient(135deg,#3b82f6,#7c3aed); color:#fff; font-weight:800; }
.auth-kicker { margin:0 0 8px; color:var(--auth-kicker); font-size:.83rem; font-weight:800; letter-spacing:.11em; text-transform:uppercase; }
h1 { margin:0 0 9px; font-size:2rem; letter-spacing:-.03em; }
.auth-intro { margin:0 0 26px; color:var(--auth-muted); line-height:1.5; }
.auth-form { display:grid; gap:10px; }
label { font-weight:700; }
input,button { min-height:45px; border-radius:12px; font:inherit; }
input:not([type="hidden"]) { width:100%; margin-bottom:9px; padding:10px 12px; border:1px solid var(--auth-field-line); background:var(--auth-field); color:var(--auth-text); }
input:focus-visible,button:focus-visible { outline:2px solid var(--theme-focus); outline-offset:2px; }
button { padding:10px 16px; border:1px solid var(--auth-field-line); background:var(--auth-button); color:var(--auth-button-text); cursor:pointer; font-weight:700; }
button:hover { background:var(--auth-button-hover); }
.auth-theme-action .app-theme-switch { padding:0; }
.auth-error { padding:12px 14px; border:1px solid var(--auth-error-line); border-radius:12px; background:var(--auth-error-bg); color:var(--auth-error-text); line-height:1.4; }
.challenge-code { margin:23px 0; padding:18px; border:2px solid var(--theme-focus); border-radius:15px; text-align:center; color:var(--auth-challenge-text); font-size:clamp(2rem,8vw,3.2rem); font-weight:800; letter-spacing:.08em; }
.auth-status { min-height:24px; color:var(--auth-muted); }
.cancel-form { margin-top:10px; }
.cancel-form button { width:100%; background:transparent; color:var(--auth-text); }
@media(max-width:620px) { .auth-theme-action { top:12px; right:12px; } .auth-card { margin-top:50px; padding:24px; } }