:root {
    --bg: #f3f6fc;
    --surface: #ffffff;
    --surface-alt: #e9effb;
    --border: #d3ddf0;
    --ink: #0e1a36;
    --ink-secondary: #44526f;
    --ink-muted: #7a87a3;
    --accent: #1550e0;
    --accent-soft: #1550e01f;
    --accent-soft-strong: #1550e03d;
    --good: #1e9e5a;
    --warn: #e0243a;
    --warn-soft: #e0243a14;
    --warn-border: #e0243a55;
    --shadow: 0 1px 2px rgba(14, 26, 54, 0.05), 0 10px 28px -14px rgba(21, 80, 224, 0.28);
    --brand-red: #e0243a;
    --mast-bg: #1550e0;
    --mast-ink: #ffffff;
    --mast-muted: #cfdcff;
    --mast-line: #ffffff40;
    --mast-accent: #ffffff;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0a1020;
      --surface: #111a2e;
      --surface-alt: #19243d;
      --border: #2a3858;
      --ink: #eef2fc;
      --ink-secondary: #aab6cf;
      --ink-muted: #7180a0;
      --accent: #6ea4ff;
      --accent-soft: #6ea4ff26;
      --accent-soft-strong: #6ea4ff45;
      --good: #5fd08f;
      --warn: #ff6676;
      --warn-soft: #ff667626;
      --warn-border: #ff667655;
      --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --mast-bg: #1648c8;
    --mast-ink: #ffffff;
    --mast-muted: #cfdcff;
    --mast-line: #ffffff40;
    --mast-accent: #ffffff;
    }
  }

  :root[data-theme="dark"] {
    --bg: #0a1020;
    --surface: #111a2e;
    --surface-alt: #19243d;
    --border: #2a3858;
    --ink: #eef2fc;
    --ink-secondary: #aab6cf;
    --ink-muted: #7180a0;
    --accent: #6ea4ff;
    --accent-soft: #6ea4ff26;
    --accent-soft-strong: #6ea4ff45;
    --good: #5fd08f;
    --warn: #ff6676;
    --warn-soft: #ff667626;
    --warn-border: #ff667655;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --mast-bg: #1648c8;
    --mast-ink: #ffffff;
    --mast-muted: #cfdcff;
    --mast-line: #ffffff40;
    --mast-accent: #ffffff;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--ink);
    font-family: "IBM Plex Sans", system-ui, sans-serif;
    padding: 32px max(20px, env(safe-area-inset-right, 0px)) 32px max(20px, env(safe-area-inset-left, 0px));
    display: flex;
    justify-content: center;
  }

  .page { width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 20px; }
  .page.wide { max-width: 640px; }

  .masthead {
    background: var(--mast-bg);
    color: var(--mast-ink);
    border-radius: 20px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: var(--shadow);
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .brand .badge {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: var(--brand-red);
    color: #ffffff;
  }
  h1 {
    font-family: "Fraunces", Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 7vw, 2.3rem);
    line-height: 1.05;
    margin: 0;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }
  h2 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 1.15rem; margin: 0 0 4px; }
  .lede { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--mast-muted); }
  .lede a { color: var(--mast-ink); }

  .card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .sub { margin: 0; font-size: 0.85rem; color: var(--ink-secondary); line-height: 1.5; }
  .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
  .field label {
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }
  input {
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 11px 12px;
    width: 100%;
  }
  input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .btn {
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    color: #ffffff;
    background: var(--mast-bg);
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
  }
  .btn:disabled { opacity: 0.6; cursor: default; }
  .btn.ghost {
    color: var(--warn);
    background: transparent;
    border: 1px solid var(--warn-border);
    font-weight: 500;
    font-size: 0.8rem;
    padding: 6px 12px;
  }
  .msg { margin: 0; font-size: 0.85rem; min-height: 1.3em; color: var(--good); }
  .msg.error { color: var(--warn); }

  .users { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .users li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
  }
  .users li:first-child { border-top: 0; }
  .users .name { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 500; overflow-wrap: anywhere; min-width: 0; }
  .users .date { display: block; font-family: "IBM Plex Sans", system-ui, sans-serif; font-size: 0.75rem; color: var(--ink-muted); }

  footer { font-size: 0.75rem; color: var(--ink-muted); text-align: center; line-height: 1.6; }