:root {
  color-scheme: dark;
  --bg: oklch(18% 0.012 78);
  --surface: oklch(22% 0.012 78);
  --ink: oklch(91% 0.012 84);
  --muted: oklch(68% 0.014 80);
  --line: oklch(32% 0.014 78);
  --accent: oklch(70% 0.10 142);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; color: var(--ink); background: var(--bg); font: 16px/1.5 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif; }
.login-shell { min-height: 100svh; display: grid; place-items: center; padding: 24px; }
.login-panel { width: min(100%, 390px); }
.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 48px; font-weight: 720; }
.brand span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; color: var(--surface); background: var(--accent); font-size: 14px; }
h1 { margin: 0; font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
h1 + p { margin: 10px 0 28px; color: var(--muted); }
form { display: grid; gap: 10px; }
label { font-size: 14px; font-weight: 650; }
input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); font: inherit; }
input:focus-visible { outline: 3px solid oklch(72% 0.08 142 / .45); outline-offset: 2px; }
button { min-height: 46px; margin-top: 6px; border: 0; border-radius: 8px; color: var(--surface); background: var(--accent); font: 700 15px/1 ui-sans-serif, system-ui, sans-serif; cursor: pointer; }
button:hover { background: oklch(65% 0.10 142); }
button:focus-visible { outline: 3px solid oklch(72% 0.08 142 / .45); outline-offset: 2px; }
.error { margin: 0; color: oklch(76% 0.12 40); font-size: 14px; }
.privacy { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
@media (max-width: 480px) { .login-shell { align-items: start; padding-top: 52px; } .brand { margin-bottom: 42px; } }