:root {
  color-scheme: light dark;
  --paper: #fafaf8; --ink: #1e262d; --muted: #6b7580; --rule: #d9dde1; --field: #ffffff;
  --accent: #35597a; --accent-ink: #ffffff; --accent-soft: #e6edf4;
  --ok: #2e6b4f; --err: #a3392e; --wait: #8a6d1f;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #15191c; --ink: #e4e7ea; --muted: #97a1ab; --rule: #2c3339; --field: #1c2126;
  --accent: #8fb3d3; --accent-ink: #0f1a24; --accent-soft: #1f2c38;
  --ok: #7fcaa2; --err: #ee8f83; --wait: #d8b45a;
} }
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--ink); background: var(--paper);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 4px; }
h2 { font-size: 1.05rem; font-weight: 600; margin: 0 0 14px; }
.lead { color: var(--muted); margin: 0 0 28px; max-width: 52ch; }

.field { margin: 0 0 14px; }
.field label { display: block; font-size: .88rem; color: var(--muted); margin-bottom: 5px; }
.field label b { color: var(--ink); font-weight: 600; }
input[type=text], input[type=email], input[type=date], input[type=password], textarea {
  width: 100%; padding: 9px 11px; border: 1px solid var(--rule); border-radius: 6px;
  background: var(--field); color: var(--ink); font: inherit; }
input:focus, textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.help { font-size: .84rem; color: var(--muted); margin: 4px 0 0; }
.help.warn { color: var(--wait); }

button { font: inherit; cursor: pointer; border-radius: 6px; }
.primary { background: var(--accent); color: var(--accent-ink); border: 0; padding: 12px 20px; font-weight: 600; width: 100%; }
.primary:disabled { opacity: .5; cursor: default; }
.link { background: none; border: 0; color: var(--muted); padding: 4px 0; font-size: .86rem; text-decoration: underline; }
.link:hover { color: var(--err); }
.notice { margin-top: 12px; font-size: .92rem; }
.notice.err { color: var(--err); }
.notice.ok { color: var(--ok); }
.banner { background: var(--err); color: #fff; padding: 10px 12px; border-radius: 6px; margin-bottom: 20px; font-size: .92rem; }
.log { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; color: var(--muted); white-space: pre-wrap; margin-top: 8px; }
.empty { color: var(--muted); }