:root {
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#FBFCFE; --ink:#0F1622; --ink-2:#5A6472; --ink-3:#97A0AE;
  --line:#E2E6EC; --line-2:#EDEFF3; --accent:#2249E4; --accent-ink:#1B3AC0; --accent-wash:rgba(34,73,228,0.08);
  --up:#0E8F5D; --down:#C33B34;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "SF Mono", "Consolas", "Roboto Mono", monospace;
  --wrap: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0A0E16; --surface:#111827; --surface-2:#0E1420; --ink:#EAEEF6; --ink-2:#9BA5B4; --ink-3:#67717F;
    --line:#212A3B; --line-2:#19202E; --accent:#5C7CFF; --accent-ink:#8AA0FF; --accent-wash:rgba(92,124,255,0.13);
    --up:#2CC489; --down:#F06A60;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  min-height: 100vh; -webkit-font-smoothing: antialiased; display: flex; flex-direction: column;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { width: min(var(--wrap), calc(100% - 2.6rem)); margin: 0 auto; }

.topbar { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(14px); }
.topbar-inner { display: flex; align-items: center; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand svg { width: 22px; height: 22px; display: block; }
.brand b { font-weight: 700; font-size: 1.02rem; letter-spacing: -0.02em; }

.authwrap { flex: 1; display: grid; place-items: center; padding: clamp(1.5rem, 6vw, 4rem) 1rem; }
.card {
  width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: clamp(1.6rem, 4vw, 2.2rem); box-shadow: 0 24px 50px -34px rgba(15,22,34,.4);
}
.card h1 { margin: 0; font-size: 1.5rem; letter-spacing: -0.03em; }
.card .sub { margin: .4rem 0 1.4rem; color: var(--ink-2); font-size: .95rem; }

form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
input {
  font: inherit; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: .62rem .75rem; width: 100%;
}
input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; width: 100%;
  padding: .72rem 1.25rem; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer;
  border: 1px solid transparent; transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #000); }
.btn.ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn:disabled { opacity: .6; cursor: default; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.msg { margin: 0; padding: .6rem .75rem; border-radius: 8px; font-size: .86rem; line-height: 1.45; }
.msg.err { background: color-mix(in srgb, var(--down) 12%, transparent); color: var(--down); border: 1px solid color-mix(in srgb, var(--down) 30%, transparent); }
.msg.ok  { background: color-mix(in srgb, var(--up) 12%, transparent);  color: var(--up);  border: 1px solid color-mix(in srgb, var(--up) 30%, transparent); }

.alt { margin: 1rem 0 0; font-size: .9rem; color: var(--ink-2); text-align: center; }
.resend { margin: 1rem 0 0; font-size: .88rem; color: var(--ink-2); }
.eyebrow { font-family: var(--mono); font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink); margin: 0 0 .6rem; }

.done { text-align: center; }
.done .big { font-size: 2.2rem; line-height: 1; margin-bottom: .8rem; }

/* dashboard */
.dash { flex: 1; padding: clamp(2rem, 7vw, 4.5rem) 0; }
.dash h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; margin: 0; }
.dash .sub { color: var(--ink-2); margin: .8rem 0 0; max-width: 52ch; }
.account { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-top: 2rem;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 1.1rem 1.3rem; }
.account .who { font-family: var(--mono); font-size: .9rem; }
.account .who span { color: var(--ink-3); }
.account .btn { width: auto; }
.panel { margin-top: 1.4rem; border: 1px dashed var(--line); border-radius: 12px; padding: 1.6rem; color: var(--ink-2); }