: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; }

/* the bookplate, sized by whatever box it is dropped into */
.crest { overflow: hidden; background: none; padding: 0; }
.crest-mark { display: block; width: 100%; height: 100%; }

/* Reveal the password you are typing. Not decoration: on a phone keyboard a
   long password typed blind is the usual reason somebody ends up resetting one
   they actually knew. Sits under the field it belongs to, never inside it, so
   it cannot be mistaken for part of the value. */
.pw-show {
  display: flex; align-items: center; gap: .45rem;
  margin: -.4rem 0 .9rem; cursor: pointer;
  font-size: .82rem; color: var(--muted, #8b8b8b);
  user-select: none;
}
.pw-show input { width: auto; margin: 0; cursor: pointer; }
.pw-show span { line-height: 1; }