:root {
  --paper: #f4f6f8; --surface: #fff; --ink: #141a21; --ink-3: #8b96a3;
  --line: #d6dde5; --accent: #1d4e89; --due: #a03028;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #0e1216; --surface: #161c23; --ink: #e7ecf1; --ink-3: #6c7784;
          --line: #28313a; --accent: #7fb0ea; --due: #e8897e; }
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: var(--paper);
  color: var(--ink); font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; }
main { background: var(--surface); border: 1px solid var(--line); border-radius: 6px;
  padding: 34px 30px; width: min(92vw, 400px); display: flex; flex-direction: column; gap: 14px; }
h1 { margin: 0; font-size: 20px; font-weight: 640; letter-spacing: -.02em; }
.sub { margin: 0; color: var(--ink-3); font-size: 13px; line-height: 1.5; }
button { font-family: var(--mono); font-size: 13px; padding: 11px 14px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--surface); font-weight: 600; }
button:disabled { opacity: .5; cursor: default; }
input { font-family: var(--mono); font-size: 13px; padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink); width: 100%; }
details { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
summary { cursor: pointer; font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
#msg { margin: 0; font-family: var(--mono); font-size: 12px; min-height: 1.2em; }
#msg.bad { color: var(--due); }