/* A brighter look: whiter surfaces, softer lines, a little depth, and the accent color carried through the sidebar,
   headers and highlights. Shared by the prototype and the staff app (prototype/theme.css is a copy). */
:root[data-theme="light"]{
  --bg:#f4f7fb; --surface:#ffffff; --sunk:#eef2f8; --line:#dfe5ee; --fg:#142033; --muted:#566377;
  --warn:#a15c00; --warn-soft:#fff3dc; --bad:#c0262d; --bad-soft:#fde8e8; --ok:#167a3a; --ok-soft:#e3f6e9;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#0d131b; --surface:#151d28; --sunk:#111823; --line:#26313f; --fg:#e6edf5; --muted:#95a3b5; color-scheme:dark;
}
body{background:var(--bg)}
.panel,.signin-card{box-shadow:0 1px 2px rgba(16,24,40,.04),0 6px 20px rgba(16,24,40,.05)}
:root[data-theme="dark"] .panel{box-shadow:none}
/* The sidebar picks up the accent at the top, fading to the page */
aside.side{background:linear-gradient(180deg,var(--accent-soft) 0,var(--surface) 240px)}
.side-brand b{color:var(--accent);font-size:17px}
.nav button[aria-current=page],.nav a[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
.nav button[aria-current=page] .count{background:var(--accent-ink);color:var(--accent)}
header.top h1{letter-spacing:-.015em}
button.primary,a.btnlike.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button.primary:hover{filter:brightness(1.06)}
.tile{border-top:3px solid var(--accent-line,var(--line))}
.seg button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent)}
.colhead{background:var(--surface)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* The appearance picker */
.appearance{display:flex;flex-direction:column;gap:8px}
.appearance .seg{flex-wrap:wrap}
.appearance .seg button{font-size:12px;padding:5px 8px}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatch{width:26px;height:26px;border-radius:50%;padding:0;background:var(--sw);border:2px solid var(--surface);box-shadow:0 0 0 1px var(--line)}
.swatch[aria-checked=true]{box-shadow:0 0 0 2px var(--fg)}
.appearance-pop{position:absolute;bottom:56px;left:10px;right:10px;z-index:30;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;box-shadow:0 10px 30px rgba(16,24,40,.18)}
.side-foot{position:relative}