@font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url('/fonts/inter-var.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/jbmono-500.woff2') format('woff2'); }
:root {
  --radius:0.5rem;
  --background:oklch(0.984 0.003 220); --foreground:oklch(0.24 0.024 250);
  --card:oklch(1 0 0); --card-foreground:oklch(0.24 0.024 250);
  --primary:oklch(0.55 0.108 213); --primary-foreground:oklch(0.99 0.005 220);
  --secondary:oklch(0.965 0.006 230); --secondary-foreground:oklch(0.32 0.026 250);
  --muted:oklch(0.965 0.006 230); --muted-foreground:oklch(0.55 0.02 250);
  --accent:oklch(0.955 0.018 210); --accent-foreground:oklch(0.4 0.07 213);
  --border:oklch(0.918 0.008 240); --input:oklch(0.918 0.008 240); --ring:oklch(0.55 0.108 213);
  --surface:oklch(0.972 0.004 230);
  --success:oklch(0.58 0.108 162); --success-soft:oklch(0.955 0.03 162);
  --warning:oklch(0.68 0.12 72); --warning-soft:oklch(0.965 0.04 82);
  --critical:oklch(0.578 0.18 22); --critical-soft:oklch(0.962 0.03 22);
  --live:oklch(0.6 0.13 250); --live-soft:oklch(0.958 0.025 250);
  --shadow-panel:0 1px 2px oklch(0.24 0.024 250 / 0.05), 0 8px 24px -12px oklch(0.24 0.024 250 / 0.12);
}
:root[data-theme="dark"] {
  --background:oklch(0.17 0.018 250); --foreground:oklch(0.955 0.006 240);
  --card:oklch(0.213 0.02 250); --card-foreground:oklch(0.955 0.006 240);
  --primary:oklch(0.72 0.11 205); --primary-foreground:oklch(0.17 0.018 250);
  --secondary:oklch(0.26 0.02 250); --secondary-foreground:oklch(0.955 0.006 240);
  --muted:oklch(0.26 0.02 250); --muted-foreground:oklch(0.68 0.018 250);
  --accent:oklch(0.28 0.03 210); --accent-foreground:oklch(0.85 0.08 205);
  --border:oklch(1 0 0 / 10%); --input:oklch(1 0 0 / 14%); --ring:oklch(0.72 0.11 205);
  --surface:oklch(0.2 0.019 250);
  --success:oklch(0.72 0.12 162); --success-soft:oklch(0.72 0.12 162 / 0.14);
  --warning:oklch(0.78 0.12 78); --warning-soft:oklch(0.78 0.12 78 / 0.14);
  --critical:oklch(0.68 0.16 22); --critical-soft:oklch(0.68 0.16 22 / 0.14);
  --live:oklch(0.72 0.12 250); --live-soft:oklch(0.72 0.12 250 / 0.16);
  --shadow-panel:0 1px 2px oklch(0 0 0 / 0.4);
}
* { box-sizing:border-box; border-color:var(--border); }
html, body { margin:0; }
body { background:var(--background); color:var(--foreground); font-family:'Inter', ui-sans-serif, system-ui, sans-serif; font-size:14px; line-height:1.5; font-feature-settings:"cv02","cv03","cv04","ss01"; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
button, input { font-family:inherit; color:inherit; }
.num { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.ic { display:inline-block; vertical-align:middle; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:color-mix(in oklab, var(--foreground) 16%, transparent); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
.logo-sq { display:grid; place-items:center; border-radius:8px; overflow:hidden; background:var(--primary); color:var(--primary-foreground); }
.logo-sq img { width:100%; height:100%; object-fit:cover; display:block; }
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:8px; border:1px solid var(--border); background:transparent; color:var(--muted-foreground); cursor:pointer; transition:background .12s, color .12s, border-color .12s; }
.theme-toggle:hover { background:var(--secondary); color:var(--foreground); }
.theme-toggle svg { width:17px; height:17px; }
.pw-wrap { position:relative; }
.field .pw-wrap input { padding-right:42px; }
.pw-toggle { position:absolute; top:50%; right:8px; transform:translateY(-50%); display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; color:var(--muted-foreground); background:transparent; cursor:pointer; transition:background .12s, color .12s; }
.pw-toggle:hover { color:var(--foreground); background:var(--secondary); }
.pw-toggle svg { width:16px; height:16px; }

/* signup: password confirmation */
.pw-hint { margin:6px 0 0; font-size:12px; color:var(--critical); }
.pw-wrap input.bad { border-color:var(--critical); }