:root {
  --bg:#0f1115; --panel:#171a21; --panel-2:#1e222b; --line:#2a2f3a;
  --ink:#e8e6e1; --ink-soft:#9aa0ad; --ink-faint:#6b7280;
  --accent:#6fa8dc; --gold:#d8ae57; --green:#6bbf7b; --red:#e0707f;
  color-scheme: dark;
}
:root {
  --amber:#e0a857;
  /* What reads on top of a filled button, and what a tinted pill sits on.
     Both flip with the theme, so nothing has to be hard-coded below. */
  --on-accent:#0f1115;
  --pill-green-bg:#16241a; --pill-green-line:#25402c;
  --pill-amber-bg:#241d12; --pill-amber-line:#3d3220;
  --pill-red-bg:#241419;   --pill-red-line:#40252c;
  --warn:#e0b07a; --danger:#e08a8a; --danger-line:#5a2a2a;
}

/* The book has had light and dark from the start; the panel used to be dark
   whatever you chose. Both now read the same stored preference, so crossing
   between them does not flip the lights. */
:root[data-theme="light"] {
  --bg:#f4f1ea; --panel:#fffdf8; --panel-2:#efebe1; --line:#ddd6c8;
  --ink:#231f1a; --ink-soft:#5d564c; --ink-faint:#8b8378;
  --accent:#2f5d8a; --gold:#9a7420; --green:#2f7a41; --red:#a6384a;
  --amber:#8a6420;
  --on-accent:#ffffff;
  --pill-green-bg:#e6f0e7; --pill-green-line:#b9d4be;
  --pill-amber-bg:#f6eedd; --pill-amber-line:#dfcda2;
  --pill-red-bg:#f7e4e7;   --pill-red-line:#e2bcc3;
  --warn:#8a5a12; --danger:#a6384a; --danger-line:#e2bcc3;
  color-scheme: light;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
h1,h2,h3 { font-family:"Iowan Old Style",Palatino,Georgia,serif; margin:0 0 .4em; line-height:1.15; }
a { color:var(--accent); }
.wrap { max-width:1100px; margin:0 auto; padding:1.4rem 1.2rem 4rem; }

.bar { display:flex; align-items:center; gap:1rem; padding:.7rem 1.2rem;
  border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:20; }
.bar .brand { font-family:"Iowan Old Style",Georgia,serif; font-weight:600; }
.bar .who { margin-left:auto; color:var(--ink-soft); font-size:.86rem; }
.tabs { display:flex; gap:.2rem; }
.tabs button { background:none; border:0; color:var(--ink-soft); cursor:pointer;
  padding:.45rem .8rem; border-radius:8px; font-size:.9rem; }
.tabs button:hover { background:#ffffff0d; color:var(--ink); }
.tabs button.on { background:var(--panel-2); color:var(--ink); }

.card { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:1rem 1.1rem; margin-bottom:1rem; }
.row { display:flex; align-items:center; gap:.7rem; }
.grow { flex:1; min-width:0; }
.muted { color:var(--ink-soft); }
.tiny { font-size:.8rem; }
.btn { background:var(--panel-2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:.45rem .8rem; cursor:pointer; font-size:.88rem; }
.btn:hover { border-color:var(--accent); }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600; }
.btn.good { background:var(--green); border-color:var(--green); color:var(--on-accent); font-weight:600; }
.btn.bad { color:var(--red); border-color:var(--pill-red-line); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.pill { font-size:.72rem; padding:.15rem .5rem; border-radius:99px; border:1px solid var(--line); color:var(--ink-soft); }
.pill.green { color:var(--green); border-color:var(--pill-green-line); background:var(--pill-green-bg); }
.pill.amber { color:var(--amber); border-color:var(--pill-amber-line); background:var(--pill-amber-bg); }
.pill.red { color:var(--red); border-color:var(--pill-red-line); background:var(--pill-red-bg); }
input, textarea, select { width:100%; background:var(--panel-2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:.5rem .6rem; font:inherit; }
label.f { display:block; margin-bottom:.7rem; }
label.f > span { display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.25rem; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
th { text-align:left; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); padding:.5rem .6rem; border-bottom:1px solid var(--line); }
td { padding:.55rem .6rem; border-bottom:1px solid var(--line); vertical-align:top; }
tr:last-child td { border-bottom:0; }
.empty { text-align:center; padding:3rem 1rem; color:var(--ink-faint);
  border:1.5px dashed var(--line); border-radius:12px; }

.signin { min-height:100vh; display:grid; place-items:center; padding:1rem; }
.signin .box { width:min(400px,92vw); background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:2rem 1.8rem; text-align:center; }
.crest { width:56px;height:56px;border-radius:50%;margin:0 auto 1rem;display:grid;place-items:center;
  border:2px solid var(--gold); color:var(--gold); font-family:Georgia,serif; font-size:1.2rem; }
.err { background:#241419; border:1px solid #40252c; color:var(--red);
  border-radius:8px; padding:.55rem .7rem; font-size:.85rem; margin:.6rem 0; text-align:left; }
.google { display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.7rem; font-size:.95rem; }