/* ===========================================================================
   Wiki MasterZ — AutoPack
   Everything here is hand-built: no UI library, no component kit.

   A theme is not a palette swap. Each one redefines shape language (radius,
   border weight, shadow model), typography, motion curve, surface treatment
   and background. The JS layer additionally gives each theme its own
   synthesised sound palette. Four themes: nebula, terminal, paper, arcade.
   =========================================================================== */

/* ── tokens: nebula (default) ─────────────────────────────────────────── */
:root {
  --bg: #07090c;
  --bg-2: #0d1218;
  --surface: rgba(22, 28, 38, .72);
  --surface-solid: #161c26;
  --surface-2: rgba(255, 255, 255, .04);
  --line: rgba(160, 190, 230, .14);
  --line-strong: rgba(160, 190, 230, .28);
  --text: #eaf0fa;
  --dim: #8b98ad;
  --accent: #4dd6a1;
  --accent-2: #6aa9ff;
  --accent-ink: #04120c;
  --warn: #ff7a85;
  --gold: #ffd75e;

  --r-xl: 26px; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-pill: 999px;
  --bw: 1px;
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, .9);
  --glow: 0 0 30px -6px var(--accent);
  --blur: blur(18px);

  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --tt: none;            /* text-transform for headings */
  --ls: -.02em;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.5, 0, .75, 0);
  --dur: 420ms;
  --dur-fast: 200ms;

  --rarity-c: #b8f2d5; --rarity-pc: #b1cff2; --rarity-r: #c6a7f2;
  --rarity-sr: #ed6fa3; --rarity-ur: #fa9931; --rarity-l: #ffe144;
}

/* ── terminal: brutally flat, monospace, CRT ──────────────────────────── */
[data-theme="terminal"] {
  --bg: #04070a;
  --bg-2: #04070a;
  --surface: rgba(10, 20, 16, .82);
  --surface-solid: #071009;
  --surface-2: rgba(0, 255, 140, .05);
  --line: rgba(0, 255, 140, .28);
  --line-strong: rgba(0, 255, 140, .55);
  --text: #b8ffd9;
  --dim: #4e8f6d;
  --accent: #00ff8c;
  --accent-2: #00cfff;
  --accent-ink: #001a0d;
  --warn: #ff4d5e;
  --gold: #ffe14a;

  --r-xl: 0px; --r-lg: 0px; --r-md: 0px; --r-sm: 0px; --r-pill: 0px;
  --bw: 1px;
  --shadow: none;
  --glow: 0 0 12px -2px var(--accent);
  --blur: none;

  --font-display: "JetBrains Mono", ui-monospace, monospace;
  --font-body: "JetBrains Mono", ui-monospace, monospace;
  --tt: uppercase;
  --ls: .06em;

  --ease: steps(6, end);
  --ease-in: steps(4, end);
  --dur: 180ms;
  --dur-fast: 90ms;
}

/* ── paper: light, editorial, print ───────────────────────────────────── */
[data-theme="paper"] {
  --bg: #f4f1ea;
  --bg-2: #ece8df;
  --surface: rgba(255, 253, 249, .9);
  --surface-solid: #fffdf9;
  --surface-2: rgba(30, 26, 20, .035);
  --line: rgba(40, 34, 26, .16);
  --line-strong: rgba(40, 34, 26, .34);
  --text: #1d1a15;
  --dim: #6f675b;
  --accent: #1f6f4a;
  --accent-2: #8a5a2b;
  --accent-ink: #ffffff;
  --warn: #a8321f;
  --gold: #9a7415;

  --r-xl: 3px; --r-lg: 3px; --r-md: 2px; --r-sm: 2px; --r-pill: 2px;
  --bw: 1px;
  --shadow: 0 1px 2px rgba(40, 34, 26, .10);
  --glow: none;
  --blur: none;

  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --tt: none;
  --ls: -.01em;

  --ease: cubic-bezier(.33, 1, .68, 1);
  --ease-in: cubic-bezier(.32, 0, .67, 0);
  --dur: 300ms;
  --dur-fast: 160ms;

  --rarity-c: #4b8f6d; --rarity-pc: #3d6f9e; --rarity-r: #6b4fa0;
  --rarity-sr: #b03f6a; --rarity-ur: #b4631a; --rarity-l: #9a7415;
}

/* ── arcade: neon, thick edges, hard offset shadows ───────────────────── */
[data-theme="arcade"] {
  --bg: #120726;
  --bg-2: #1b0a38;
  --surface: rgba(38, 14, 74, .82);
  --surface-solid: #260e4a;
  --surface-2: rgba(255, 255, 255, .06);
  --line: #ff3fb4;
  --line-strong: #ff3fb4;
  --text: #f6e9ff;
  --dim: #a98fd0;
  --accent: #00f0ff;
  --accent-2: #ff3fb4;
  --accent-ink: #10022a;
  --warn: #ff4d6d;
  --gold: #ffd400;

  --r-xl: 8px; --r-lg: 6px; --r-md: 4px; --r-sm: 3px; --r-pill: 4px;
  --bw: 2px;
  --shadow: 5px 5px 0 rgba(255, 63, 180, .55);
  --glow: 0 0 22px -4px var(--accent);
  --blur: none;

  --font-display: "Orbitron", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --tt: uppercase;
  --ls: .04em;

  --ease: cubic-bezier(.34, 1.56, .64, 1);   /* overshoot */
  --ease-in: cubic-bezier(.36, 0, .66, -.56);
  --dur: 400ms;
  --dur-fast: 180ms;
}

/* ── base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* CRT overlay, terminal only */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
  transition: opacity var(--dur) var(--ease);
}
[data-theme="terminal"] body::after, body[data-theme="terminal"]::after { opacity: .5; }

#app {
  position: relative; z-index: 1;
  height: 100%; display: flex; flex-direction: column;
  max-width: 620px; margin: 0 auto;
}

h1, h2, h3 {
  margin: 0; font-family: var(--font-display);
  letter-spacing: var(--ls); text-transform: var(--tt);
}

/* ── top bar ──────────────────────────────────────────────────────────── */
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px 10px; flex: none;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand .mark { width: 30px; height: 30px; flex: none; }
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 15px;
  letter-spacing: var(--ls); text-transform: var(--tt); white-space: nowrap; }
.brand .sub { font-size: 11px; color: var(--dim); }

.iconbtn {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: var(--r-md); border: var(--bw) solid var(--line);
  background: var(--surface-2); color: var(--text); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.iconbtn:active { transform: scale(.9); }
.iconbtn.off { color: var(--dim); }

/* ── screens ──────────────────────────────────────────────────────────── */
#screens { flex: 1; position: relative; min-height: 0; }
/* Visibility is class-driven, never transitioned: a stalled or interrupted
   transition must not leave an old screen sitting on top of the live one. The
   fade-out lives entirely in `.leaving`, which JS removes on a timer, so the
   hidden state is reached deterministically even if animation never runs. */
.screen {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 18px 28px; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(14px) scale(.985);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.screen.on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
.screen.leaving {
  visibility: visible; opacity: 0; pointer-events: none;
  transform: translateY(-10px) scale(.99);
}

/* ── panel ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface); border: var(--bw) solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  padding: 18px; margin-bottom: 14px;
}
[data-theme="terminal"] .panel::before {
  content: "┌─"attr(data-tag)"─"; display: block; font-size: 10px; color: var(--accent);
  letter-spacing: .12em; margin: -6px 0 10px; opacity: .8;
}
.label {
  font: 600 10.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 12px;
}

/* ── reactor (hero gauge) ─────────────────────────────────────────────── */
.reactor { display: grid; place-items: center; padding: 6px 0 2px; position: relative; }
.reactor svg { display: block; overflow: visible; }
.reactor .core {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
  pointer-events: none;
}
.reactor .count {
  font-family: var(--font-display); font-weight: 800; font-size: 46px; line-height: 1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
[data-theme="terminal"] .reactor .count, [data-theme="arcade"] .reactor .count { letter-spacing: 0; }
.reactor .of { font-size: 12px; color: var(--dim); margin-top: 4px; letter-spacing: .1em; }

.statusline { text-align: center; margin-top: 10px; }
.statusline .big { font-family: var(--font-display); font-size: 17px; font-weight: 700;
  text-transform: var(--tt); letter-spacing: var(--ls); }
.statusline .sm { font-size: 13px; color: var(--dim); margin-top: 3px; }
.statusline .xs { font-size: 11.5px; color: var(--dim); opacity: .8; margin-top: 4px; }
.countdown { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  padding: 6px 13px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  border: var(--bw) solid transparent; letter-spacing: .02em;
}
.pill.live { background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.pill.idle { background: var(--surface-2); color: var(--dim); border-color: var(--line); }
.pill.bad { background: color-mix(in srgb, var(--warn) 14%, transparent);
  color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.live i { animation: beat 1.8s var(--ease) infinite; }
@keyframes beat { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.72); } }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 20px; border: var(--bw) solid transparent;
  border-radius: var(--r-md); font: 700 14px var(--font-body);
  letter-spacing: var(--ls); text-transform: var(--tt);
  background: var(--accent); color: var(--accent-ink); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), filter var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  overflow: hidden; user-select: none;
}
[data-theme="arcade"] .btn { box-shadow: 4px 4px 0 var(--accent-2); }
[data-theme="arcade"] .btn:active { box-shadow: 1px 1px 0 var(--accent-2); transform: translate(3px, 3px); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--text); border-color: var(--line-strong); }
[data-theme="arcade"] .btn.ghost { box-shadow: 4px 4px 0 rgba(255, 63, 180, .3); }
.btn.danger { background: transparent; color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
[data-theme="arcade"] .btn.danger { box-shadow: 4px 4px 0 rgba(255, 77, 109, .35); }
.btn.wide { width: 100%; }
.btn.sm { padding: 9px 14px; font-size: 12.5px; }

/* press ripple, drawn not imported */
.btn .rip {
  position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0);
  background: currentColor; opacity: .28; pointer-events: none;
  animation: rip 560ms var(--ease) forwards;
}
@keyframes rip { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } }

.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }

/* ── stat tiles ───────────────────────────────────────────────────────── */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--surface-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-md); padding: 14px;
}
.tile .n { font-family: var(--font-display); font-size: 28px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tile .k { font-size: 10.5px; color: var(--dim); text-transform: uppercase;
  letter-spacing: .12em; margin-top: 6px; font-weight: 600; }

/* rarity meters */
.meter { display: grid; gap: 9px; }
.meter-row { display: grid; grid-template-columns: 92px 1fr auto; gap: 10px; align-items: center; }
.meter-row .nm { font-size: 12px; color: var(--dim); }
.meter-row .track { height: 8px; border-radius: var(--r-pill); background: var(--surface-2);
  border: var(--bw) solid var(--line); overflow: hidden; }
.meter-row .fill { height: 100%; width: 0; border-radius: var(--r-pill);
  transition: width 900ms var(--ease); }
.meter-row .v { font: 700 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── cards ────────────────────────────────────────────────────────────── */
.cardlist { display: grid; gap: 8px; }
.cardrow {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px;
  background: var(--surface-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-md); border-left-width: 3px; position: relative; overflow: hidden;
  animation: slidein 460ms var(--ease) both;
}
@keyframes slidein { from { opacity: 0; transform: translateX(-10px); } }
.cardrow .thumb { width: 40px; height: 40px; flex: none; border-radius: var(--r-sm);
  object-fit: cover; background: var(--surface-solid); display: grid; place-items: center;
  color: var(--dim); font-size: 15px; }
.cardrow .body { min-width: 0; flex: 1; }
.cardrow .t { font-size: 13.5px; font-weight: 600; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.cardrow .t a { color: inherit; text-decoration: none; }
.cardrow .t a:active { color: var(--accent); }
.cardrow .m { font-size: 11px; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cardrow .dupe { font: 700 11px var(--font-mono); color: var(--dim); flex: none;
  padding: 3px 7px; border-radius: var(--r-sm); background: var(--surface-solid); }

.tag {
  display: inline-block; padding: 1px 7px; margin-right: 7px; border-radius: var(--r-sm);
  font: 800 9.5px var(--font-body); letter-spacing: .08em; color: #0b0b0b; vertical-align: 1px;
}
/* legendary sheen sweeps across the row */
.cardrow.legend::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%,
    color-mix(in srgb, var(--gold) 45%, transparent) 50%, transparent 65%);
  transform: translateX(-120%); animation: sheen 2.8s var(--ease) infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

/* ── chart ────────────────────────────────────────────────────────────── */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; }
.col { flex: 1 1 0; min-width: 22px; max-width: 46px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 5px; height: 100%; }
.col .v { font: 700 10px var(--font-mono); }
.col .bar { width: 100%; border-radius: var(--r-sm) var(--r-sm) 0 0; min-height: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 25%, transparent));
  transform-origin: bottom; animation: grow 700ms var(--ease) both; }
[data-theme="arcade"] .col .bar { border: var(--bw) solid var(--accent); }
@keyframes grow { from { transform: scaleY(0); } }
.col .d { font-size: 9.5px; color: var(--dim); white-space: nowrap; }

/* ── run group ────────────────────────────────────────────────────────── */
.run { border-top: var(--bw) solid var(--line); padding: 14px 0 4px; }
.run:first-child { border-top: 0; padding-top: 2px; }
.runhead { display: flex; gap: 10px; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; }
.runhead .when { font: 500 12px var(--font-mono); color: var(--dim); }
.runhead .what { font-size: 13px; font-weight: 700; }

/* ── switch (hand-built) ──────────────────────────────────────────────── */
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 0; border-bottom: var(--bw) solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .rl { min-width: 0; }
.row .rt { font-size: 14px; font-weight: 600; }
.row .rd { font-size: 11.5px; color: var(--dim); margin-top: 3px; line-height: 1.45; }

.sw { position: relative; width: 50px; height: 30px; flex: none; cursor: pointer; }
.sw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sw .track {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  background: var(--surface-2); border: var(--bw) solid var(--line);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.sw .knob {
  position: absolute; top: 50%; left: 3px; width: 22px; height: 22px;
  margin-top: -11px; border-radius: var(--r-pill); background: var(--dim);
  transition: transform var(--dur) var(--ease), background var(--dur-fast) var(--ease);
}
.sw input:checked ~ .track { background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent); }
.sw input:checked ~ .knob { transform: translateX(20px); background: var(--accent); }
.sw input:disabled ~ .track, .sw input:disabled ~ .knob { opacity: .4; }
[data-theme="terminal"] .sw .knob { border-radius: 0; }
[data-theme="arcade"] .sw .knob { border-radius: 2px; }

/* ── chips ────────────────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 7px 13px; border-radius: var(--r-pill); border: var(--bw) solid var(--line);
  background: transparent; color: var(--dim); cursor: pointer;
  font: 600 12px var(--font-body); letter-spacing: .02em;
  transition: transform var(--dur-fast) var(--ease);
}
.chip:active { transform: scale(.93); }
.chip.on { color: var(--accent-ink); }

/* ── segmented ────────────────────────────────────────────────────────── */
.seg { display: grid; grid-auto-flow: column; gap: 0; border: var(--bw) solid var(--line);
  border-radius: var(--r-md); overflow: hidden; }
.seg button {
  padding: 11px 6px; background: transparent; border: 0; color: var(--dim); cursor: pointer;
  font: 600 12px var(--font-body); border-right: var(--bw) solid var(--line);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* ── stepper (quiet hours) ────────────────────────────────────────────── */
.time { display: flex; align-items: center; gap: 6px; }
.time .fld {
  font: 700 15px var(--font-mono); background: var(--surface-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-sm);
  padding: 8px 10px; color: var(--text); min-width: 62px; text-align: center;
}
.time .stack { display: grid; gap: 3px; }
.time .stack button {
  width: 24px; height: 15px; display: grid; place-items: center; cursor: pointer;
  background: var(--surface-2); border: var(--bw) solid var(--line);
  border-radius: var(--r-sm); color: var(--dim); font-size: 9px; padding: 0;
}
.time .stack button:active { background: var(--accent); color: var(--accent-ink); }

/* ── theme picker ─────────────────────────────────────────────────────── */
.themes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tcard {
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 0;
  cursor: pointer; overflow: hidden; background: transparent; text-align: left;
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tcard:active { transform: scale(.96); }
.tcard.on { border-color: var(--accent); }
.tcard .prev { height: 62px; position: relative; overflow: hidden; }
.tcard .nm { padding: 9px 11px; font: 700 12px var(--font-body); display: flex;
  align-items: center; justify-content: space-between; gap: 6px; }
.tcard .nm small { font-weight: 500; font-size: 10px; color: var(--dim); }

/* ── modal ────────────────────────────────────────────────────────────── */
#scrim {
  position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, .62);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
#scrim.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.sheet {
  position: absolute; left: 50%; bottom: 0; width: min(560px, 100%);
  transform: translate(-50%, 100%);
  background: var(--surface-solid); border: var(--bw) solid var(--line);
  border-bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 22px 20px 28px;
  transition: transform var(--dur) var(--ease);
}
#scrim.on .sheet { transform: translate(-50%, 0); }
.sheet h3 { font-size: 18px; margin-bottom: 6px; }
.sheet p { color: var(--dim); font-size: 13px; margin: 0 0 16px; line-height: 1.5; }
.grab { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong);
  margin: -8px auto 16px; }

/* ── toasts ───────────────────────────────────────────────────────────── */
#toasts { position: fixed; left: 0; right: 0; bottom: 92px; z-index: 50;
  display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast {
  background: var(--surface-solid); border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md); padding: 11px 16px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow); animation: pop 300ms var(--ease) both; max-width: 100%;
}
.toast.good { border-color: var(--accent); color: var(--accent); }
.toast.bad { border-color: var(--warn); color: var(--warn); }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.94); } }
.toast.out { animation: unpop 260ms var(--ease-in) forwards; }
@keyframes unpop { to { opacity: 0; transform: translateY(10px) scale(.96); } }

/* ── bottom nav ───────────────────────────────────────────────────────── */
#nav {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; padding: 8px 14px calc(10px + env(safe-area-inset-bottom));
  border-top: var(--bw) solid var(--line); background: var(--surface);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  position: relative;
}
#nav button {
  background: transparent; border: 0; cursor: pointer; color: var(--dim);
  display: grid; justify-items: center; gap: 4px; padding: 7px 0 5px;
  font: 600 10px var(--font-body); letter-spacing: .05em; text-transform: var(--tt);
  transition: color var(--dur-fast) var(--ease);
}
#nav button.on { color: var(--accent); }
#nav button svg { width: 22px; height: 22px; transition: transform var(--dur) var(--ease); }
#nav button.on svg { transform: translateY(-2px) scale(1.12); }
#navdot {
  position: absolute; top: 0; height: 2px; background: var(--accent);
  transition: transform var(--dur) var(--ease), width var(--dur) var(--ease);
  box-shadow: var(--glow);
}

/* ── login ────────────────────────────────────────────────────────────── */
#login { position: fixed; inset: 0; z-index: 30; display: none;
  overflow-y: auto; padding: 40px 20px; }
#login.on { display: block; }
#login .wrap { max-width: 460px; margin: 0 auto; }
.field { width: 100%; padding: 13px 14px; background: var(--surface-2);
  border: var(--bw) solid var(--line); border-radius: var(--r-md); color: var(--text);
  font: 400 15px var(--font-body); margin-bottom: 12px; }
.field:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.bmk {
  display: inline-block; padding: 12px 18px; border: 2px dashed var(--line-strong);
  border-radius: var(--r-md); color: var(--accent); text-decoration: none;
  font-weight: 700; font-size: 14px;
}

.muted { color: var(--dim); font-size: 12.5px; line-height: 1.55; }
.banner {
  padding: 12px 14px; border-radius: var(--r-md); font-size: 13px; line-height: 1.5;
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border: var(--bw) solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn); margin-top: 12px;
}
.hide { display: none !important; }

/* respect the OS preference without gutting the design */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
      transition-duration: .01ms !important; }
}