* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: var(--text-body) / 1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  display: grid;
  place-items: start center;
  padding: var(--gap-24) var(--gap-16) var(--gap-48);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  margin-top: 8vh;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: var(--gap-32) var(--gap-24);
}
.brand { display: flex; align-items: center; gap: var(--gap-8); font-size: var(--text-heading); font-weight: 700; margin-bottom: var(--gap-24); }
.brand img { width: 32px; height: 32px; }
h1 { font-size: var(--text-amount); line-height: 1.2; margin: 0 0 var(--gap-8); }
p { margin: 0 0 var(--gap-16); color: var(--muted); }
label { display: block; font-size: var(--text-small); color: var(--muted); margin-bottom: var(--gap-6); }
input[type="email"], input[type="text"] {
  width: 100%;
  min-height: 48px;
  padding: var(--gap-12) var(--gap-16);
  font-size: var(--text-label);
  color: var(--ink);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
}
input.code { letter-spacing: 0.4em; font-size: var(--text-amount); text-align: center; font-variant-numeric: tabular-nums; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.consent { display: flex; gap: var(--gap-12); align-items: flex-start; margin: var(--gap-16) 0; color: var(--ink); font-size: var(--text-small); }
.consent input { width: 24px; height: 24px; flex: 0 0 24px; margin: 0; accent-color: var(--accent); }
.consent span { padding-top: 2px; }
a { color: var(--accent); }
button {
  width: 100%;
  min-height: 48px;
  margin-top: var(--gap-16);
  border: 0;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: var(--text-label);
  font-weight: 600;
  cursor: pointer;
  background: var(--accent);
  color: var(--accent-ink);
}
button.secondary { background: var(--accent-soft); color: var(--accent); }
button:disabled { opacity: 0.55; cursor: default; }
.error { color: var(--danger); min-height: 1.5em; margin: var(--gap-12) 0 0; }
.note { font-size: var(--text-small); margin-top: var(--gap-16); }
.doc { max-width: 760px; margin-top: var(--gap-24); }
.doc h1 { font-size: var(--text-amount); }
.doc h2 { font-size: var(--text-heading); margin: var(--gap-32) 0 var(--gap-8); }
.doc p, .doc li { color: var(--ink); }
.draft { background: var(--warning-soft); color: var(--ink); border-radius: var(--radius-control); padding: var(--gap-12) var(--gap-16); margin-bottom: var(--gap-24); }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) { button { transition: filter 0.15s; } button:hover:not(:disabled) { filter: brightness(1.05); } }