/* StatusRadar — auth screens. Stripe-style, dual theme, scoped .auth.
   Self-contained tokens so the /dashboard/verify page renders correctly even
   when public-theme.css is not loaded (it inherits data-theme from the layout).
   Fonts are loaded via a <link> in the layout head, not @import. */

:root,
[data-theme="light"]{
  --font-display:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-body:'Hanken Grotesk',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  color-scheme:light;

  --bg:#ffffff;
  --bg-tint:#f6f9fc;
  --bg-sunken:#eef3f8;
  --panel:#ffffff;

  --text:#0a2540;
  --text-secondary:#425466;
  --text-faint:#687385;
  --on-accent:#ffffff;

  --border:#e3e8ee;
  --border-strong:#cfd7e0;

  --accent:#635bff;
  --accent-hover:#5249e6;
  --accent-active:#463dd6;
  --link:#4b43d6;
  --accent-btn:var(--accent);
  --accent-btn-hover:var(--accent-hover);
  --accent-btn-active:var(--accent-active);

  --down:#c4322b; --down-bg:#fdeceb; --down-border:#f6c7c4;

  --grad-1:#635bff; --grad-2:#4f8bff; --grad-3:#37c2c9; --grad-4:#a855f7;
  --angle-grad:linear-gradient(101deg,var(--grad-1) 0%,var(--grad-2) 34%,var(--grad-3) 66%,var(--grad-4) 100%);

  --shadow-lg:0 24px 48px -16px rgba(10,37,64,.14),0 8px 16px -8px rgba(10,37,64,.08);
  --shadow-accent:0 6px 16px -4px rgba(99,91,255,.32);
  --focus-ring:0 0 0 3px rgba(99,91,255,.30);
  --r-sm:10px; --r-lg:16px;
}

[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1124;
  --bg-tint:#0d1730;
  --bg-sunken:#070d1d;
  --panel:#111c38;

  --text:#eaf0fb;
  --text-secondary:#aab6cf;
  --text-faint:#7c89a6;
  --on-accent:#ffffff;

  --border:#233156;
  --border-strong:#324374;

  --accent:#7c75ff;
  --accent-hover:#8e88ff;
  --accent-active:#6a62f5;
  --link:#9a94ff;
  --accent-btn:#5b54e0;
  --accent-btn-hover:#4f48cf;
  --accent-btn-active:#4640bb;

  --down:#ff6b63; --down-bg:#2c1513; --down-border:#4a201d;

  --shadow-lg:0 28px 56px -16px rgba(0,0,0,.6);
  --shadow-accent:0 8px 22px -6px rgba(124,117,255,.45);
  --focus-ring:0 0 0 3px rgba(124,117,255,.42);
}

/* ===== layout ===== */
.auth{
  min-height:calc(100vh - 64px);
  display:flex; align-items:center; justify-content:center;
  padding:64px 24px 72px;
  background:var(--bg-tint); color:var(--text);
  font-family:var(--font-body); -webkit-font-smoothing:antialiased;
}

.auth-panel{
  position:relative; overflow:hidden; width:100%; max-width:420px;
  background:var(--panel); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:40px 36px; box-shadow:var(--shadow-lg);
}
.auth-panel::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--angle-grad); }

.auth-eyebrow{
  display:block; font-family:var(--font-mono); font-size:.72rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;
}
.auth-title{ font-family:var(--font-display); font-weight:600; font-size:1.75rem; letter-spacing:-.015em; line-height:1.15; color:var(--text); margin:0 0 10px; }
.auth-note{ color:var(--text-secondary); font-size:.9375rem; line-height:1.55; margin:0 0 26px; }

.auth-alert{
  border:1px solid var(--down-border); background:var(--down-bg); color:var(--down);
  font-size:13px; line-height:1.45; border-radius:var(--r-sm); padding:11px 13px; margin-bottom:20px;
}
.auth-alert div{ padding:1px 0; }

.auth-field{ margin-bottom:18px; }
.auth-field label{ display:block; font-family:var(--font-display); font-weight:600; font-size:13px; color:var(--text); margin-bottom:7px; }
.auth-field input{
  width:100%; background:var(--bg); color:var(--text);
  border:1px solid var(--border-strong); border-radius:var(--r-sm);
  font-family:var(--font-body); font-size:16px; line-height:1.3; padding:11px 13px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.auth-field input::placeholder{ color:var(--text-faint); }
.auth-field input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus-ring); }
.auth-field input:disabled{ color:var(--text-faint); background:var(--bg-sunken); cursor:not-allowed; }
/* keep autofilled fields on-theme (Chrome forces its own fill otherwise) */
.auth-field input:-webkit-autofill,
.auth-field input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--text);
  -webkit-box-shadow:inset 0 0 0 1000px var(--bg);
  box-shadow:inset 0 0 0 1000px var(--bg);
  caret-color:var(--text);
  transition:background-color 9999s ease-out 0s;
}
.auth-field input:-webkit-autofill:focus{
  -webkit-box-shadow:inset 0 0 0 1000px var(--bg),var(--focus-ring);
  box-shadow:inset 0 0 0 1000px var(--bg),var(--focus-ring);
}

.auth-hint{ font-family:var(--font-mono); font-size:11px; color:var(--text-faint); margin-top:7px; }
.auth-hint a{ color:var(--link); }

.auth-check{
  display:flex; gap:9px; align-items:flex-start; font-size:13px; color:var(--text-secondary);
  line-height:1.45; margin:4px 0 22px; cursor:pointer;
}
.auth-check input{ margin-top:2px; accent-color:var(--accent); }
.auth-check a{ color:var(--link); text-decoration:none; }
.auth-check a:hover{ text-decoration:underline; }

.auth-btn{
  width:100%; justify-content:center; display:inline-flex; align-items:center; gap:8px;
  background:var(--accent-btn); color:var(--on-accent); border:1px solid var(--accent-btn); border-radius:var(--r-sm);
  font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:-.005em;
  padding:12px 20px; margin-top:12px; cursor:pointer; box-shadow:var(--shadow-accent);
  transition:background-color .15s ease, transform .12s ease;
}
.auth-btn:hover{ background:var(--accent-btn-hover); border-color:var(--accent-btn-hover); transform:translateY(-1px); }
.auth-btn:active{ background:var(--accent-btn-active); transform:translateY(0); }
.auth-btn:focus-visible{ outline:2px solid transparent; outline-offset:2px; box-shadow:var(--focus-ring); }
.auth-foot a:focus-visible,.auth-forgot:focus-visible,.auth-hint a:focus-visible,.auth-check a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

.auth-forgot{
  display:block; text-align:center; font-family:var(--font-mono); font-size:12px;
  color:var(--text-faint); text-decoration:none; margin-top:16px;
}
.auth-forgot:hover{ color:var(--text-secondary); }

.auth-sep{
  display:flex; align-items:center; gap:14px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.14em; color:var(--text-faint); margin:26px 0 16px;
}
.auth-sep::before,.auth-sep::after{ content:""; flex:1; height:1px; background:var(--border); }

.auth-foot{ text-align:center; font-size:13.5px; color:var(--text-secondary); line-height:1.6; }
.auth-foot a{ color:var(--link); text-decoration:none; font-weight:600; }
.auth-foot a:hover{ text-decoration:underline; }

@media (prefers-reduced-motion: reduce){
  .auth *,.auth *::before,.auth *::after{ transition:none !important; animation:none !important; }
}
@media (max-width:480px){
  .auth{ padding:48px 18px 56px; }
  .auth-panel{ padding:34px 24px 30px; }
}