/* ============================================================
   Kurenai OS — main.css · Build 5.0 "The Atelier"
   A lamplit, painterly study room: warm parchment ground, sepia
   ink, dusk-iris / brass / sage accents, watercolour washes.
   Violet Evergarden · Witch Hat Atelier · Frieren — as a mood,
   not a skin.

   TOKEN ARCHITECTURE
   Canonical tokens (every theme block overrides these on :root):
     --bg0 (page ground) · --bg1 (paper panel) · --panel (raised)
     --text · --text2 · --muted
     --accent · --accent2 · --accent3
     --good · --warning · --danger · --radius
   Everything else — lines, wells, washes, glass, legacy names —
   is DERIVED from those via color-mix, so the 23 shop themes
   restyle the whole app by overriding only the canonical set.
   ============================================================ */

:root {
  /* — the Atelier Dawn palette (default) — */
  --bg0: #EFE7D6;
  --bg1: #F8F3E6;
  --panel: #FDFAF1;
  --text: #332C20;
  --text2: #5E5442;
  --muted: #97896D;
  --accent: #5D6BA8;   /* dusk iris — the ink of the house       */
  --accent2: #A97F2F;  /* brass — gold leaf, currency, warmth     */
  --accent3: #7D9B76;  /* sage — the quiet green of the fields    */
  --good: #6F9A5E;
  --warning: #C0912F;
  --danger: #B5573F;   /* fired clay, not crimson                 */
  --radius: 12px;

  /* — derived: lines, surfaces, washes (recompute under themes) — */
  --line: color-mix(in srgb, var(--text) 16%, transparent);
  --line2: color-mix(in srgb, var(--text) 9%, transparent);
  --well: color-mix(in srgb, var(--text) 5%, var(--bg1));
  --wash-accent: color-mix(in srgb, var(--accent) 9%, var(--bg1));
  --wash-brass: color-mix(in srgb, var(--accent2) 10%, var(--bg1));
  --wash-sage: color-mix(in srgb, var(--accent3) 11%, var(--bg1));
  --wash-danger: color-mix(in srgb, var(--danger) 9%, var(--bg1));
  --glass-fill: color-mix(in srgb, var(--accent) 8%, transparent);
  --glass-edge: color-mix(in srgb, var(--accent) 26%, transparent);
  --shadow-sm: 0 1px 2px rgba(46, 36, 18, 0.05), 0 4px 14px rgba(46, 36, 18, 0.05);
  --shadow-md: 0 2px 4px rgba(46, 36, 18, 0.06), 0 12px 32px rgba(46, 36, 18, 0.08);
  --shadow-lg: 0 4px 10px rgba(46, 36, 18, 0.08), 0 24px 60px rgba(46, 36, 18, 0.14);

  /* — the code slab: fixed dark ink on every theme, light or dark — */
  --code-bg: #292317;
  --code-ink: #EFE9DA;

  /* — type — */
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Alegreya Sans", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --jp: "Shippori Mincho", "Hiragino Mincho ProN", serif;

  /* — shared geometry: the Kurenai design-system foundation —
     Spacing follows a 4px cadence. Page chrome and wide content use the
     layout tokens below; prose can still opt into --content-readable.
     Core media-query tiers (custom properties cannot drive @media rules):
       1240px workspace · 1080px compact rail · 860px compact · 560px small.
     Component-specific 1100/1000/900/760/700px queries remain where content,
     rather than the app shell, determines the collapse point. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --section-gap: var(--space-6);
  --section-gap-lg: var(--space-7);
  --grid-gap: var(--space-4);
  --layout-gap: var(--space-6);
  --form-gap: var(--space-3);

  --topbar-h: 58px;
  --content-wide: 1440px;
  --content-readable: 74ch;
  --page-pad-inline: 30px;
  --page-pad-start: 26px;
  --page-pad-end: 70px;
  --rail-w: 196px;
  --rail-w-compact: 62px;
  --tree-w: 292px;
  --tree-w-compact: 46px;
  --sidebar-context-w: 300px;
  --sidebar-inspector-w: 272px;
  --sidebar-filter-w: 210px;

  --control-h: 36px;
  --control-h-sm: 32px;
  --control-h-xs: 28px;
  --icon-btn-size: 32px;
  --icon-btn-size-sm: 28px;
  --icon-btn-size-xs: 24px;
  --type-page-title: clamp(1.75rem, 1.45rem + .8vw, 2.125rem);
  --type-hero-title: clamp(1.5rem, 1.25rem + .65vw, 1.875rem);
  --type-section-title: 1.25rem;
  --type-card-title: 1rem;
  --type-label: .6875rem;

  --radius-control: clamp(3px, var(--radius), 10px);
  --radius-card: var(--radius);
  --radius-hero: clamp(6px, calc(var(--radius) + 6px), 30px);
  --radius-pill: 999px;
  --surface-card: var(--bg1);
  --surface-elevated: var(--panel);
  --surface-border: var(--line2);
  --card-pad: var(--space-5);
  --hero-min-h: 240px;
  --hero-pad-block: 26px;
  --hero-pad-inline: 30px;
  --stat-min-w: 108px;
  --modal-max: 860px;
  --modal-gutter: 6vw;
  --modal-pad-block: var(--space-5);
  --modal-pad-inline: 22px;

  /* — the three subject hues (fixed meanings; retuned, never swapped) — */
  --c-compsci: #3D8E76;
  --c-maths: #4C6DB3;
  --c-it: #8A63A8;

  /* — legacy aliases: JS and older markup still speak these names — */
  --kurenai: var(--accent);
  --gold: var(--accent2);
  --bad: var(--danger);
  --ok: var(--good);
  --paused: var(--warning);
  --faint: var(--muted);
  --mute: var(--muted);
  --raise: var(--panel);
  --card: var(--bg1);
}

/* ============================================================
   Base
   ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(1100px 500px at 12% -8%, color-mix(in srgb, var(--accent2) 7%, transparent), transparent 60%),
    radial-gradient(900px 520px at 88% -6%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 55%),
    radial-gradient(1200px 700px at 50% 115%, color-mix(in srgb, var(--accent3) 8%, transparent), transparent 60%),
    var(--bg0);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
a { color: var(--accent); text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }
button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
input, select, textarea {
  font-family: inherit;
  font-size: 14.5px;
  color: var(--text);
  max-width: 100%;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), select, textarea) {
  min-height: var(--control-h);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 7px var(--space-3);
  transition: border-color .15s, box-shadow .15s;
}
:where(input[type="checkbox"], input[type="radio"]) { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 60%, transparent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 550; letter-spacing: -0.01em; }
strong, b { font-weight: 700; }
small { font-size: 12.5px; }

/* scrollbars — quiet, ink-wash */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 18%, transparent); border-radius: 6px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--text) 30%, transparent); background-clip: content-box; border: 3px solid transparent; }
::-webkit-scrollbar-track { background: transparent; }

/* ============================================================
   Ambient flora — drifting petals, barely there
   ============================================================ */
.bg-flora { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.petal {
  position: absolute;
  width: 14px; height: 10px;
  border-radius: 60% 40% 55% 45% / 55% 60% 40% 45%;
  background: color-mix(in srgb, var(--accent2) 26%, transparent);
  opacity: 0;
  animation: petal-drift 26s linear infinite;
}
.petal.p1 { left: 8%;  animation-delay: 0s;   background: color-mix(in srgb, var(--accent) 22%, transparent); }
.petal.p2 { left: 26%; animation-delay: 6s;   width: 10px; height: 8px; }
.petal.p3 { left: 47%; animation-delay: 12s;  background: color-mix(in srgb, var(--accent3) 26%, transparent); }
.petal.p4 { left: 63%; animation-delay: 3s;   width: 9px; height: 7px; }
.petal.p5 { left: 78%; animation-delay: 16s;  background: color-mix(in srgb, var(--accent) 20%, transparent); }
.petal.p6 { left: 91%; animation-delay: 9s;   width: 12px; height: 9px; }
@keyframes petal-drift {
  0%   { transform: translateY(-4vh) rotate(0deg)   translateX(0);    opacity: 0; }
  8%   { opacity: .5; }
  50%  { transform: translateY(52vh) rotate(200deg) translateX(4vw);  opacity: .35; }
  92%  { opacity: .15; }
  100% { transform: translateY(108vh) rotate(390deg) translateX(-2vw); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .petal { animation: none; opacity: 0; }
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* ============================================================
   App frame
   ============================================================ */
#app { position: relative; z-index: 1; height: 100vh; display: flex; flex-direction: column; }

/* ---------- topbar: the desk's brass rail ---------- */
#topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 20px;
  height: var(--topbar-h);
  flex: none;
  background: color-mix(in srgb, var(--bg1) 72%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line2);
}
.topbar-left, .topbar-right { flex: 1 1 0; display: flex; align-items: center; gap: 14px; min-width: 0; }
.topbar-right { justify-content: flex-end; }
.brand { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; border-radius: 10px; padding: 4px 8px; margin-left: -8px; transition: background .15s; }
.brand:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
.brand .kanji {
  font-family: var(--jp);
  font-size: 20px;
  color: var(--bg1);
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), color-mix(in srgb, var(--accent) 78%, #000));
  width: 32px; height: 32px;
  border-radius: 50% 46% 50% 48%;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,.28);
}
.brand .name { font-family: var(--serif); font-size: 21px; font-weight: 600; letter-spacing: .01em; }
.brand .sub { font-size: 12px; color: var(--muted); font-style: italic; letter-spacing: .04em; }

.nav-arrows { display: flex; gap: 4px; }
.nav-back {
  width: var(--icon-btn-size); height: var(--icon-btn-size);
  border-radius: 50%;
  border: 1px solid var(--line2);
  color: var(--text2);
  font-size: 16px;
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.nav-back:hover:not(:disabled) { background: var(--wash-accent); color: var(--text); }
.nav-back:disabled { opacity: .3; cursor: default; }

/* search */
#searchbox { position: relative; flex: 0 1 480px; max-width: 480px; }
#searchbox .glyph { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 15px; pointer-events: none; }
#search {
  width: 100%;
  padding: 7px 12px 7px 34px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 4%, var(--bg1));
  border-color: transparent;
}
#search:focus { background: var(--panel); }
#search-results {
  display: none;
  position: absolute;
  top: calc(100% + 8px); left: 0; right: 0;
  max-height: 62vh; overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 60;
}
#search-results.open { display: block; }
.sr-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 8px; }
.sr-item:hover, .sr-item.sel { background: var(--wash-accent); }
.sr-item .sr-ref { font-family: var(--mono); font-size: 11.5px; color: var(--accent); margin-right: 8px; }
.sr-item .sr-sub { color: var(--muted); font-size: 12px; margin-left: 8px; }
.sr-item .sr-snip { display: block; color: var(--text2); font-size: 12.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-empty { padding: 12px; color: var(--muted); font-size: 13.5px; }
.sr-fc { font-size: 11px; color: var(--accent2); margin-left: 8px; letter-spacing: .05em; }

/* save indicator */
.save-wrap { display: flex; align-items: center; gap: 7px; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
#save-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent3) 22%, transparent); transition: transform .2s; }
#save-dot.pulse { animation: save-pulse .8s ease; }
@keyframes save-pulse { 30% { transform: scale(1.7); background: var(--accent2); } }

/* ============================================================
   Columns: rail · tree · stage
   ============================================================ */
#cols { display: flex; flex: 1; min-height: 0; }

/* ---------- rail: five doors ---------- */
#rail {
  width: var(--rail-w);
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 12px 14px;
  position: relative;
  border-right: 1px solid var(--line2);
  transition: width .22s ease;
}
.rail-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--text2);
  font-size: 15px;
  font-weight: 500;
  position: relative;
  transition: background .15s, color .15s;
}
.rail-item .glyph {
  font-family: var(--jp);
  font-size: 16px;
  width: 30px; height: 30px;
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: var(--muted);
  border: 1px solid transparent;
  transition: all .18s;
}
.rail-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.rail-item.active { color: var(--text); }
.rail-item.active .glyph {
  color: var(--bg1);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--accent) 80%, #000));
  box-shadow: var(--shadow-sm);
}
.rail-item.active::after {
  content: "";
  position: absolute;
  left: -12px; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.rail-item .pc {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
}
.rail-item .pc:empty { display: none; }
.rail-item .pc.hot { color: var(--bg1); background: var(--accent2); font-weight: 600; }

.rail-foot {
  margin-top: auto;
  padding: 12px 10px 2px;
  border-top: 1px solid var(--line2);
  font-size: 11px;
  color: var(--muted);
  display: flex; flex-direction: column; gap: 3px;
}
.rail-brand { font-family: var(--serif); font-size: 12.5px; color: var(--text2); }
.rail-brand .k { font-family: var(--jp); color: var(--accent); }

#rail-toggle {
  position: absolute;
  top: 16px; right: -11px;
  width: var(--icon-btn-size-xs); height: var(--icon-btn-size-xs);
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  z-index: 5;
  box-shadow: var(--shadow-sm);
}
#rail-toggle:hover { color: var(--text); }
#cols.rail-closed #rail { width: var(--rail-w-compact); padding-left: 10px; padding-right: 10px; }
#cols.rail-closed .rail-item { padding: 8px 5px; justify-content: center; }
#cols.rail-closed .rail-item .lbl,
#cols.rail-closed .rail-item .pc,
#cols.rail-closed .rail-foot { display: none; }
#cols.rail-closed .rail-item.active::after { left: -10px; }

/* ---------- the stage: subnav + main ---------- */
#stage { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#subnav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: none;
  flex-wrap: wrap;
  padding: 10px max(var(--page-pad-inline), calc((100% - var(--content-wide)) / 2)) 0;
}
#subnav.hidden { display: none; }
.subnav-item {
  display: inline-flex;
  align-items: center;
  min-height: var(--control-h);
  padding: 6px 13px 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text2);
  border-radius: var(--radius-control) var(--radius-control) 0 0;
  position: relative;
  transition: color .15s, background .15s;
}
.subnav-item:hover { color: var(--text); background: color-mix(in srgb, var(--text) 4%, transparent); }
.subnav-item.active { color: var(--text); font-weight: 700; }
.subnav-item.active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
}
.subnav-item .pc { font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-left: 7px; }
.subnav-item .pc:empty { display: none; }
.subnav-sep { width: 1px; height: 18px; background: var(--line); margin: 0 10px; }

#main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--page-pad-start)
    max(var(--page-pad-inline), calc((100% - var(--content-wide)) / 2))
    var(--page-pad-end);
}

/* ---------- tree: the spec spine ---------- */
#tree {
  width: var(--tree-w);
  flex: none;
  overflow-y: auto;
  padding: 18px 14px 40px;
  border-right: 1px solid var(--line2);
  background: color-mix(in srgb, var(--bg1) 55%, transparent);
}
#tree.hidden { display: none; }
#cols.tree-closed #tree { width: var(--tree-w-compact); padding: 12px 7px; overflow: hidden; }
.tree-reopen { display: none; }
#cols.tree-closed #tree > .tree-subject-h,
#cols.tree-closed #tree > .sec { display: none; }
#cols.tree-closed #tree > .tree-reopen { display: flex; }
.tree-reopen {
  flex-direction: column; align-items: center; gap: 10px;
  width: 32px; padding: 10px 0;
  border-radius: 9px;
  color: var(--muted);
  transition: color .15s, background .15s;
}
.tree-reopen:hover { color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.tree-reopen .tr-arr { font-size: 13px; }
.tree-reopen .tr-lbl { writing-mode: vertical-rl; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.tree-subject-h { display: flex; flex-direction: row; align-items: flex-start; gap: 8px; padding: 2px 4px 10px 8px; }
.tree-subject-h .tsh-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tree-collapse {
  flex: none;
  width: var(--icon-btn-size-sm); height: var(--icon-btn-size-sm);
  border: 1px solid var(--line2);
  border-radius: 7px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px; line-height: 1;
  margin-top: 3px;
}
.tree-collapse:hover { color: var(--text); border-color: var(--line); }
.tree-progress { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; margin: 7px 0 2px; }
.tree-progress i { display: block; height: 100%; border-radius: 999px; background: var(--accent, var(--kurenai)); }
.sec-head .pc { margin-left: auto; min-width: 42px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-align: right; flex: none; }
.sec-head .arr { width: 12px; margin-left: 0; text-align: center; }
.tree-subject-h .t { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.tree-subject-h .b { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sec { margin-bottom: 2px; }
.sec-head {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  text-align: left;
  padding: 8px 8px;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text2);
}
.sec-head:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.sec-head .ref { font-family: var(--mono); font-size: 10.5px; color: var(--accent); flex: none; }
.sec-head .sec-title { min-width: 0; flex: 1 1 auto; }
.sec-head .arr { font-size: 9px; color: var(--muted); transition: transform .18s; flex: none; }
.sec.open > .sec-head .arr { transform: rotate(90deg); }
.sec-kids { display: none; padding-left: 6px; }
.sec.open > .sec-kids { display: block; }
.grp-h {
  display: flex; align-items: center; gap: 6px;
  width: 100%;
  text-align: left;
  padding: 6px 8px 4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.grp-h .grp-arr { font-size: 9px; transition: transform .15s; }
.grp-h.closed .grp-arr { transform: rotate(-90deg); }
.grp-kids { padding-left: 8px; }
.leaf {
  display: flex; align-items: center; gap: 9px;
  width: 100%;
  text-align: left;
  padding: 6px 8px 6px 6px;
  border-radius: 8px;
  position: relative;
}
.leaf:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.leaf.active { background: var(--wash-accent); }
.leaf .spine {
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: linear-gradient(to top, var(--accent, var(--line)) calc(var(--p, 0) * 1%), var(--line2) 0);
}
.leaf .body { min-width: 0; display: flex; flex-direction: column; gap: 0; }
.leaf .lref { font-family: var(--mono); font-size: 10px; color: var(--muted); display: flex; gap: 7px; align-items: baseline; }
.leaf .lref .deep { color: var(--accent2); font-size: 9.5px; letter-spacing: .03em; }
.leaf .lt { font-size: 12.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.leaf.active .lt { color: var(--text); font-weight: 500; }
.leaf .st { margin-left: auto; flex: none; font-size: 11px; }
.st-none { color: var(--line); }
.st-started { color: var(--accent2); }
.st-paused { color: var(--warning); }
.st-done { color: var(--good); }

/* ============================================================
   Shared primitives
   ============================================================ */
.card,
.card-normal,
.inspector-panel,
.stat-tile,
.colcard,
.intel-card,
.subj-card,
.stat-card,
.sec-card,
.practice-card,
.res-table,
.study-inspector,
.med-filter-rail,
.qz-card,
.lab-panel,
.bento-card,
.shop-card,
.seal-card,
.todo-panel,
.dl-widget,
.data-card,
.cs-chart,
.med-card,
.med-strip-card,
.mx-air-card,
.mk-card,
.wl-budget,
.wl-row,
.n-worked,
.qz-result,
.trk-row,
.rag-panel,
.att-row,
.fx-setup-main,
.fx-deal,
.tasks-col {
  background: var(--surface-card);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}
.card-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
}
.hero-card,
.home-id,
.vault-hero,
.season-hero,
.ap-head,
.wl-hero {
  min-height: var(--hero-min-h);
  border-radius: var(--radius-hero);
  overflow: hidden;
}
.page-frame { width: 100%; max-width: var(--content-wide); margin-inline: auto; }
.readable { max-width: var(--content-readable); }
.page-stack, .section-stack { display: flex; flex-direction: column; gap: var(--section-gap); }
.content-grid { display: grid; gap: var(--grid-gap); }
.page-title { margin: 0; font-family: var(--serif); font-size: var(--type-page-title); line-height: 1.12; }
.section-heading { margin: 0; font-family: var(--serif); font-size: var(--type-section-title); line-height: 1.2; }
.sub { color: var(--muted); font-size: 13px; }
.hidden { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--control-h-sm);
  max-width: 100%;
  padding: 7px 15px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 500;
  transition: all .15s;
  box-shadow: 0 1px 2px rgba(46,36,18,.04);
}
.btn:hover:not(:disabled) { color: var(--text); border-color: color-mix(in srgb, var(--text) 30%, transparent); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.secondary { background: var(--panel); color: var(--text2); }
.btn.primary {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 94%, #fff), color-mix(in srgb, var(--accent) 84%, #000));
  border-color: transparent;
  color: #FCFAF4;
}
.btn.primary:hover:not(:disabled) { color: #fff; filter: brightness(1.05); }
.btn.gold {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent2) 92%, #fff), color-mix(in srgb, var(--accent2) 82%, #000));
  border-color: transparent;
  color: #FCFAF4;
}
.btn.gold:hover:not(:disabled) { color: #fff; filter: brightness(1.05); }
.btn.jade {
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent3) 92%, #fff), color-mix(in srgb, var(--accent3) 80%, #000));
  border-color: transparent;
  color: #FCFAF4;
}
.btn.jade:hover:not(:disabled) { color: #fff; filter: brightness(1.05); }
.btn.ghost { background: transparent; border-color: color-mix(in srgb, currentColor 25%, transparent); }
.btn.subtle { background: transparent; border-color: transparent; box-shadow: none; color: var(--muted); }
.btn.subtle:hover:not(:disabled) { color: var(--text); background: var(--well); border-color: transparent; box-shadow: none; }
.btn.danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); background: var(--wash-danger); }
.btn.danger:hover:not(:disabled) { border-color: var(--danger); }
.icon-btn, .mini-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--icon-btn-size-sm); height: var(--icon-btn-size-sm);
  padding: 0 6px;
  border-radius: var(--radius-control);
  border: 1px solid var(--line2);
  color: var(--muted);
  font-size: 12px;
  transition: all .15s;
}
.icon-btn { width: var(--icon-btn-size); height: var(--icon-btn-size); padding: 0; }
.icon-btn.circle { border-radius: 50%; }
.icon-btn:hover, .mini-btn:hover { color: var(--text); border-color: var(--line); background: var(--panel); }
.mini-btn.danger:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.status-sel { padding: 6px 10px; border-radius: 8px; font-size: 13.5px; }
.todo-in { font-size: 14px; }
.xbtn { min-width: var(--icon-btn-size-sm); min-height: var(--icon-btn-size-sm); color: var(--muted); font-size: 13px; padding: 2px 6px; border-radius: var(--radius-control); }
.xbtn:hover { color: var(--danger); }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  color: var(--text2);
  background: var(--well);
  font-size: var(--type-label);
  line-height: 1.4;
}
.count-pill,
.rail-item .pc,
.subnav-item .pc,
.study-tab .tab-n,
.study-tab .wl-tabcount,
.rem-subcount {
  font-family: var(--mono);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
}

.form-grid, .modal-form, .cal-form, .med-form { display: grid; gap: var(--form-gap); }
.form-field, .cal-field, .med-field, .wl-modal .wl-field {
  display: flex; flex-direction: column; gap: var(--space-1); min-width: 0;
}
.form-field > label, .form-label, .med-field .k, .wl-modal .wl-field > .k {
  font-size: var(--type-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.form-field input, .form-field select, .form-field textarea,
.med-field input, .med-field select, .med-field textarea { width: 100%; }

/* toast */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translate(-50%, 16px);
  background: color-mix(in srgb, var(--text) 94%, #000);
  color: var(--bg1);
  font-size: 13.5px;
  padding: 10px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
  z-index: 200;
  max-width: min(620px, 90vw);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--danger); color: #FFF6F0; }

/* modal base */
.modal-ov {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--text) 32%, transparent);
  backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 4vh calc(var(--modal-gutter) / 2);
  z-index: 120;
  animation: ov-in .18s ease;
}
@keyframes ov-in { from { opacity: 0; } }
.modal {
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-lg);
  max-width: min(var(--modal-max), calc(100vw - var(--modal-gutter)));
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--modal-pad-block) var(--modal-pad-inline);
  width: 100%;
  animation: modal-in .22s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal-h { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.modal-h b { font-family: var(--serif); font-size: 18px; font-weight: 600; }
.modal-sm { --modal-max: 420px; }
.modal-md { --modal-max: 660px; }
.modal-lg { --modal-max: 860px; }
.modal-xl { --modal-max: 980px; }

/* generic charts */
.cs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--grid-gap); margin-top: var(--section-gap); align-items: start; }
.cs-chart { padding: 14px 16px; }
.cs-chart-h { display: flex; flex-direction: column; gap: 1px; margin-bottom: 10px; }
.cs-chart-h b { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.cs-chart svg { display: block; width: 100%; height: auto; }

/* ============================================================
   Main pane · page furniture
   ============================================================ */
#main > * { animation: view-in .4s cubic-bezier(.2,.7,.3,1) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(8px); } }

.crumbs { font-size: 12px; color: var(--muted); margin-bottom: 14px; letter-spacing: .02em; }
.crumbs b { color: var(--text2); font-weight: 500; }

.page-h { display: flex; align-items: flex-start; gap: 18px; margin-bottom: var(--space-3); }
.seal {
  flex: none;
  font-family: var(--mono);
  font-size: 13px; font-weight: 600;
  color: var(--accent, var(--kurenai));
  border: 1.5px solid color-mix(in srgb, var(--accent, var(--kurenai)) 45%, transparent);
  border-radius: 50% 47% 50% 46%;
  min-width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px;
  background: color-mix(in srgb, var(--accent, var(--kurenai)) 7%, transparent);
  transform: rotate(-2deg);
}
.page-h h1 { font-size: var(--type-page-title); margin: 2px 0 0; line-height: 1.12; }
.page-h .pap { font-size: 12px; color: var(--muted); display: block; margin-top: 5px; letter-spacing: .04em; }

.ctl-row {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin: 16px 0 20px;
  padding: 11px 16px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--bg1) 72%, transparent);
}
.ctl-row label.chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text2); cursor: pointer; }
.ctl-row label.chk:hover { color: var(--text); }
.ctl-row input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; }
.ctl-sep { width: 1px; align-self: stretch; background: var(--line2); margin: 0 4px; }

/* spec split */
.split { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--grid-gap); align-items: start; }
.colcard { overflow: hidden; }
.colcard .ch {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line2);
  color: var(--muted);
  display: flex; align-items: center; gap: 9px;
}
.colcard .ch::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent, var(--kurenai)); opacity: .7; }
.colcard .cb { padding: 16px 20px 18px; }
.speccontent { font-size: 15px; line-height: 1.7; color: var(--text2); }
.speccontent p { margin: 0 0 11px; }
.speccontent ul { margin: 5px 0 13px; padding-left: 22px; }
.speccontent li { margin: 4px 0; }
.guide { font-size: 13.5px; color: var(--text2); }
.guide p { margin: 0 0 10px; }
.guide ul { margin: 5px 0 11px; padding-left: 20px; }
.spec-h { font-weight: 700; color: var(--text); margin: 14px 0 6px; }
.spec-sub { color: var(--muted); font-size: 12.5px; }
.note-area {
  width: 100%; min-height: 110px; resize: vertical;
  font-family: var(--sans); font-size: 14.5px; line-height: 1.6;
}

/* intel cards — examiner wisdom in the margins */
.intel { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--grid-gap); margin: 18px 0 4px; }
.intel-card { overflow: hidden; }
.intel-card .ih { padding: 9px 15px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--line2); }
.intel-card .ib { padding: 12px 15px; font-size: 13.5px; color: var(--text2); }
.intel-card .ib ul { margin: 0; padding-left: 18px; }
.intel-card .ib li { margin: 5px 0; }
.intel-defs .ih { color: var(--accent2); background: var(--wash-brass); }
.intel-tips .ih { color: var(--accent); background: var(--wash-accent); }
.intel-pit .ih { color: var(--danger); background: var(--wash-danger); }
.intel-card dt { font-weight: 700; color: var(--text); margin-top: 8px; }
.intel-card dd { margin: 1px 0 0; }

/* prev / next */
.pn-row { display: flex; justify-content: space-between; gap: 14px; margin-top: 34px; }
.pn {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  max-width: 46%;
  text-align: left;
  padding: 12px 18px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--bg1);
  color: var(--text2);
  font-size: 13.5px;
  transition: all .15s;
  box-shadow: var(--shadow-sm);
}
.pn:hover { color: var(--text); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.pn .d { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pn-row .pn:last-child { align-items: flex-end; text-align: right; }

/* ============================================================
   Home — the desk at dawn
   ============================================================ */
.home-hero { margin: 2px 0 var(--section-gap); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--grid-gap); flex-wrap: wrap; }
.home-hero h1 { font-size: var(--type-page-title); margin: 0; font-weight: 550; }
.hh-kicker { display: block; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.hh-focus { padding: 10px 22px; font-size: 14.5px; }
.hh-focus.live { background: linear-gradient(150deg, color-mix(in srgb, var(--accent2) 92%, #fff), color-mix(in srgb, var(--accent2) 82%, #000)); }
.kanji-inline { font-family: var(--jp); color: var(--accent); margin-right: 6px; }
.kanji-big { font-family: var(--jp); font-size: 60px; color: var(--accent); line-height: 1; margin-bottom: 8px; }

/* the profile band — who you are today */
.home-id {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border: 1px solid var(--surface-border);
  padding: var(--hero-pad-block) var(--hero-pad-inline);
  margin-bottom: var(--section-gap);
  box-shadow: var(--shadow-md);
  position: relative;
  background:
    radial-gradient(520px 220px at 4% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%),
    radial-gradient(460px 240px at 98% 100%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--bg1);
  background-size: cover; background-position: center;
}
.hi-main { display: flex; align-items: center; gap: 20px; min-width: 300px; }
.hi-txt { display: flex; flex-direction: column; gap: 1px; }
.hi-txt .rank { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent2); font-weight: 700; }
.hi-txt h2 { margin: 0; font-size: 25px; font-weight: 600; }
.hi-state { font-size: 12.5px; color: var(--muted); }
.hi-state b { color: var(--accent); font-weight: 600; }
.hi-txt .lvl-row { margin-top: 8px; }
.hi-txt .lvl-bar { width: 190px; }
.hi-week { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.hi-week .week-dots { display: inline-flex; gap: 5px; margin: 0; }
.hi-stats { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hi-stats .home-ring { flex: none; margin-right: 10px; }
.hstat { min-width: 96px; text-align: center; padding: 4px 14px; border-left: 1px solid var(--line2); }
.hstat.click { cursor: pointer; border-radius: 10px; }
.hstat.click:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.hstat .v { font-family: var(--serif); font-size: 24px; font-weight: 600; color: var(--text); }
.hstat .k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }
.home-rag { margin-top: 18px; }
.path-card .todo-panel { height: 100%; }
.home-side { display: flex; flex-direction: column; gap: 16px; }

/* focus CTA (legacy hook, off the home page now) */
.focus-cta {
  display: flex; align-items: center; gap: 16px;
  width: 100%;
  text-align: left;
  margin: 0 0 18px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent3) 40%, transparent);
  background: linear-gradient(120deg, var(--wash-sage), color-mix(in srgb, var(--accent3) 4%, var(--bg1)) 65%);
  box-shadow: var(--shadow-sm);
  transition: all .18s;
}
.focus-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent3) 65%, transparent); }
.focus-cta .k {
  font-family: var(--jp); font-size: 20px;
  color: var(--bg1);
  width: 40px; height: 40px; flex: none;
  border-radius: 50% 46% 50% 48%;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent3) 90%, #fff), color-mix(in srgb, var(--accent3) 78%, #000));
}
.focus-cta .t { display: flex; flex-direction: column; gap: 1px; }
.focus-cta .t b { font-family: var(--serif); font-size: 16.5px; font-weight: 600; }
.focus-cta .t span { font-size: 12.5px; color: var(--text2); }
.focus-cta .go { margin-left: auto; font-size: 20px; color: var(--accent3); transition: transform .18s; }
.focus-cta:hover .go { transform: translateX(4px); }
.focus-cta.live { border-color: var(--accent2); background: linear-gradient(120deg, var(--wash-brass), var(--bg1) 70%); }
.focus-cta.live .k { background: linear-gradient(150deg, color-mix(in srgb, var(--accent2) 90%, #fff), color-mix(in srgb, var(--accent2) 78%, #000)); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); } }

.home-today { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--grid-gap); margin-bottom: var(--section-gap); align-items: stretch; }
.home-today .todo-panel, .home-side .dl-widget { height: 100%; }
.home-side { height: 100%; }
@media (max-width: 1100px) { .home-today { grid-template-columns: 1fr; } }

.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--grid-gap); }
.subj-card {
  padding: 20px;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.subj-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 42px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent, var(--kurenai)) 10%, transparent), transparent);
  pointer-events: none;
}
.subj-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent, var(--kurenai)) 35%, var(--line2)); }
.subj-card h3 { margin: 0 0 2px; font-size: 18px; font-weight: 600; }
.subj-card .b { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.subj-card .m { margin-top: 12px; font-size: 12.5px; color: var(--text2); }
.subj-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.mini-ring { flex: none; }

.subj-track {
  position: relative; height: 6px; margin-top: 15px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  overflow: hidden;
}
.subj-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, var(--kurenai)) 65%, transparent), var(--accent, var(--kurenai)));
  transition: width .6s cubic-bezier(.2,.7,.3,1);
}

.continue {
  display: inline-flex; gap: 10px; align-items: center;
  background: var(--panel);
  border: 1px solid var(--line2);
  border-left: 3px solid var(--accent, var(--kurenai));
  border-radius: 10px;
  color: var(--text);
  padding: 10px 16px;
  font-size: 13.5px;
  transition: transform .15s, box-shadow .15s;
}
.continue:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); }
.continue.mini { margin-top: 14px; padding: 9px 13px; font-size: 12.5px; width: 100%; gap: 2px; flex-direction: column; align-items: flex-start; }
.continue .d { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; }
.continue.mini b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

.soon-row { margin-top: 16px; }
.soon-card { opacity: .62; cursor: default; }
.soon-card:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line2); }
.soon-tag {
  position: absolute; top: 14px; right: 16px;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent2);
  border: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
}
.soon-tag.live { color: var(--accent3); border-color: color-mix(in srgb, var(--accent3) 50%, transparent); background: color-mix(in srgb, var(--accent3) 10%, transparent); }
.soon-card h3 { font-size: 14.5px; padding-right: 96px; }

.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--grid-gap); flex-wrap: wrap; margin-bottom: var(--section-gap); }
.dash-head h1 { font-size: var(--type-page-title); margin: 0 0 2px; line-height: 1.1; }
.dh-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent, var(--kurenai)); font-weight: 700; margin-bottom: 6px; }
.dh-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent, var(--kurenai)); }
.dash-head .board { font-size: 14px; color: var(--muted); margin-right: 12px; letter-spacing: 0; text-transform: none; }
.dash-head .papers { font-size: 12.5px; color: var(--text2); }
.dh-sub { margin-top: 2px; }
.dh-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding-bottom: 6px; }

/* stat strip (subject + matrix) */
.stat-strip { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 4px 0 var(--section-gap); }
.stat-card, .stat-tile {
  flex: 1; min-width: var(--stat-min-w);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.stat-card.click { cursor: pointer; transition: transform .15s, box-shadow .15s; }
.stat-card.click:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.stat-card .v, .stat-tile .v { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.stat-card .k, .stat-tile .k { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-top: 1px; }

/* section ledger — full-width accordion rows */
.sec-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.sec-card { padding: 0; overflow: hidden; transition: border-color .15s; }
.sec-card:hover { border-color: var(--line); }
.sec-card-h { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 12px 18px; }
.sec-card-h .ref { font-family: var(--mono); font-size: 11px; color: var(--accent, var(--kurenai)); flex: none; min-width: 34px; }
.sec-card-h .ttl { font-weight: 600; font-size: 14.5px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sec-card-h .sec-bar { flex: 1; max-width: 220px; margin-left: auto; }
.sec-card-h .pc { font-family: var(--mono); font-size: 11.5px; color: var(--muted); flex: none; min-width: 46px; text-align: right; }
.sec-card-h .arr { flex: none; font-size: 10px; color: var(--muted); transition: transform .18s; }
.sec-card.open .sec-card-h .arr { transform: rotate(180deg); }
.sec-card.low .bar-fill { background: var(--danger); }
.sec-card.mid .bar-fill { background: var(--warning); }
.sec-card.high .bar-fill { background: var(--good); }
.sec-sub { padding: 4px 18px 14px 66px; display: grid; gap: 8px; border-top: 1px dashed var(--line2); }
.bar-row.dim { color: var(--muted); font-size: 12px; grid-template-columns: 1fr; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row .nm { color: var(--text2); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-row .nm:hover { color: var(--text); }
.bar-row .pc { font-family: var(--mono); font-size: 10.5px; color: var(--muted); text-align: right; }
.bar-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent, var(--kurenai)); transition: width .5s cubic-bezier(.2,.7,.3,1); }

/* the desk band: board summary + one column per paper, one panel */
.subject-units {
  display: flex; align-items: stretch;
  border: 1px solid var(--line2);
  border-left: 4px solid var(--accent, var(--kurenai));
  border-radius: var(--radius-card);
  background: var(--bg1);
  box-shadow: var(--shadow-sm);
  margin: 0 0 var(--section-gap);
  overflow-x: auto;
}
.unit-lead { display: flex; align-items: center; gap: 14px; padding: 16px 22px; min-width: 250px; }
.ul-glyph {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: #FCFAF4;
  width: 46px; height: 46px; flex: none;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent, var(--kurenai)) 92%, #fff), color-mix(in srgb, var(--accent, var(--kurenai)) 78%, #000));
}
.ul-txt { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.ul-txt strong { font-family: var(--serif); font-size: 17px; font-weight: 600; }
.ul-txt > span { font-size: 12px; color: var(--text2); }
.ul-txt small { font-size: 11px; color: var(--muted); }
.unit-stat {
  flex: 1; min-width: 160px;
  padding: 16px 20px;
  border-left: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 4px; justify-content: center;
}
.unit-stat > span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.unit-stat strong { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.unit-stat small { font-size: 11.5px; color: var(--text2); }

/* subject workspace: sections left, context right */
.subject-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-context-w); gap: var(--layout-gap); align-items: start; }
.subject-main { min-width: 0; }
.subject-side { display: flex; flex-direction: column; gap: 14px; }
.subject-side .continue { width: 100%; flex-direction: column; align-items: flex-start; gap: 2px; }
.side-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
.side-stats .stat-card { padding: 9px 10px; }
.side-stats .stat-card .v { font-size: 17px; }
@media (max-width: 1240px) { .subject-grid { grid-template-columns: 1fr; } }

/* practice zone */
.practice-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--grid-gap); }
.practice-card {
  text-align: left;
  padding: 15px 17px;
  display: flex; flex-direction: column; gap: 4px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.practice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent, var(--kurenai)) 30%, var(--line2)); }
.practice-card b { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.practice-card span { font-size: 12.5px; color: var(--text2); }
.practice-card.gated { opacity: .68; }
.practice-lock { font-size: 11.5px !important; color: var(--warning) !important; margin-top: 4px; }

/* resource table */
.res-table { display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.res-row { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line2); }
.res-row:last-of-type { border-bottom: none; }
.res-name { font-weight: 600; color: var(--text); text-decoration: none; flex: none; max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-name:hover { color: var(--accent); }
.res-ref { font-family: var(--mono); font-size: 11px; color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 999px; padding: 1px 9px; flex: none; }
.res-ref.dim { color: var(--muted); border-color: var(--line2); cursor: default; }
.res-url { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-add { display: flex; gap: 8px; padding: 10px 16px; background: var(--well); flex-wrap: wrap; }
.res-add input { flex: 1; min-width: 140px; }
.res-add .res-refin { flex: 0 1 150px; }
.res-table .sub { padding: 10px 16px 0; }

/* compare modal */
.cmp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.cmp-col { min-width: 0; }
.cmp-vs { font-family: var(--serif); font-style: italic; color: var(--muted); }

/* ============================================================
   Study tabs + the study workspace
   ============================================================ */
.tabs-primary, .tabs-secondary, .study-tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs-primary::-webkit-scrollbar, .tabs-secondary::-webkit-scrollbar,
.study-tabs::-webkit-scrollbar { display: none; }
.tabs-primary {
  display: flex; align-items: center; gap: var(--space-1);
  border-bottom: 1px solid var(--line2);
}
.tabs-secondary, .study-tabs {
  display: inline-flex; gap: 3px;
  margin: 10px 0 0;
  padding: var(--space-1);
  border: 1px solid var(--line2);
  border-radius: calc(var(--radius-control) + 4px);
  background: var(--well);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}
.tabs-primary > .tab,
.tabs-secondary > .tab,
.study-tab {
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--control-h);
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  position: relative;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  transition: color .15s, background .15s, box-shadow .15s;
}
.tabs-primary > .tab:hover,
.tabs-secondary > .tab:hover,
.study-tab:hover { color: var(--text2); background: color-mix(in srgb, var(--text) 4%, transparent); }
.tabs-primary > .tab.active {
  color: var(--text);
  font-weight: 600;
}
.tabs-primary > .tab.active::after {
  content: "";
  position: absolute;
  left: var(--space-3); right: var(--space-3); bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}
.tabs-secondary > .tab.active,
.study-tab.active {
  color: var(--accent, var(--kurenai));
  font-weight: 600;
  background: var(--bg1);
  border-color: var(--line2);
  box-shadow: var(--shadow-sm);
}
.study-tab.active::after { content: none; }
.study-panel { padding-top: var(--section-gap); }

/* Review is a shared Study workspace. Its switcher sits in the page header,
   matching the Collection workspaces while retaining the selected surface. */
.review-workspace { padding-top: 0; }
.cardstats-scope-tabs + .stat-strip { margin-top: var(--section-gap); }

/* filter pills variant (vault status rows reuse .study-tabs) */
.med-pills {
  display: flex; gap: 7px; flex-wrap: wrap;
  margin: var(--space-3) 0 2px;
  padding: 0; border: none; background: none; box-shadow: none;
}
.med-pills .study-tab {
  border: 1px solid var(--line2);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  font-size: 13px;
  background: var(--bg1);
  min-height: var(--control-h-sm);
  box-shadow: none;
}
.med-pills .study-tab:hover { border-color: var(--line); }
.med-pills .study-tab.active { background: var(--text); color: var(--bg1); border-color: var(--text); font-weight: 600; }
.med-pills .study-tab.active::after { content: none; }

/* the workspace grid + inspector */
.study-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-inspector-w); gap: var(--layout-gap); align-items: start; }
.study-grid.insp-closed { grid-template-columns: minmax(0, 1fr) 34px; }
.study-grid > * { min-width: 0; }
.study-inspector {
  position: sticky; top: 10px;
  overflow: hidden;
  min-width: 0;
}
.insp-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line2); }
.insp-head b { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; white-space: nowrap; }
.insp-toggle {
  margin-left: auto; flex: none;
  width: var(--icon-btn-size-sm); height: var(--icon-btn-size-sm);
  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--radius-control);
  color: var(--muted);
  font-size: 12px; line-height: 1;
}
.insp-toggle:hover { color: var(--text); border-color: var(--line); }
.insp-closed .study-inspector { background: none; border-color: transparent; box-shadow: none; }
.insp-closed .insp-head { border-bottom-color: transparent; padding: 0; }
.insp-closed .insp-head b, .insp-closed .insp-body { display: none; }
.insp-sec { padding: 14px 14px 16px; }
.insp-sec + .insp-sec { border-top: 1px solid var(--line2); }
.insp-sec h5 { margin: 0 0 10px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.insp-mastery { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.insp-mastery strong { font-family: var(--serif); font-size: 28px; font-weight: 600; }
.insp-mastery span { font-size: 11px; color: var(--good); }
.insp-track { height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; margin-top: 8px; }
.insp-track i { display: block; height: 100%; border-radius: 999px; background: var(--accent, var(--kurenai)); }
.insp-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.insp-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text2); font-size: 12.5px; }
.insp-list strong { color: var(--text); font-family: var(--mono); font-size: 11.5px; font-weight: 500; }
@media (max-width: 1240px) {
  .study-grid, .study-grid.insp-closed { grid-template-columns: minmax(0, 1fr); }
  .study-inspector { position: static; }
  .insp-closed .study-inspector { border-color: var(--line2); background: var(--bg1); box-shadow: var(--shadow-sm); }
  .insp-closed .insp-head { border-bottom-color: transparent; padding: 10px 12px; }
  .insp-closed .insp-head b { display: block; }
}

/* notes sub-pager */
.note-pager { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--line2); }
.note-page-tab {
  border: 1px solid var(--line2);
  background: var(--bg1);
  color: var(--text2);
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  transition: all .15s;
}
.note-page-tab:hover { color: var(--text); border-color: var(--line); }
.note-page-tab.active { color: var(--bg1); background: var(--text); border-color: var(--text); }
.note-pager-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: var(--content-readable); margin: 26px 0 4px; padding-top: 16px; border-top: 1px solid var(--line2); }
.note-pager-count { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }

/* ============================================================
   Notes article — set like a book page
   ============================================================ */
.notes-article {
  max-width: var(--content-readable);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 415;
  line-height: 1.75;
  color: var(--text);
  font-optical-sizing: auto;
}
.notes-article p { margin: 0 0 14px; color: color-mix(in srgb, var(--text) 88%, var(--bg1)); }
.notes-article ul, .notes-article ol { margin: 7px 0 15px; padding-left: 26px; color: color-mix(in srgb, var(--text) 88%, var(--bg1)); }
.notes-article li { margin: 6px 0; }
.notes-article li::marker { color: var(--accent, var(--kurenai)); }
.notes-article strong { font-weight: 650; color: var(--text); }
.notes-article code, .qz-card code, .fc-face code {
  font-family: var(--mono);
  font-size: .82em;
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-radius: 5px;
  padding: 1px 6px;
  color: color-mix(in srgb, var(--accent) 75%, var(--text));
}
.n-h {
  font-family: var(--serif);
  font-size: var(--type-section-title);
  font-weight: 600;
  margin: var(--section-gap-lg) 0 var(--space-3);
  display: flex; align-items: baseline; gap: 10px;
}
.n-h::before { content: "✦"; font-size: 11px; color: var(--accent2); transform: translateY(-2px); }
.notes-article .n-h:first-child, h3.n-h:first-child { margin-top: 0; }

/* key-value ledger */
.n-kv { margin: 5px 0 16px; position: relative; }
.n-kv dt { font-weight: 650; color: var(--text); margin-top: 10px; }
.n-kv dd { margin: 1px 0 0 0; }

/* tables */
.n-tablewrap { overflow-x: auto; margin: 10px 0 18px; position: relative; }
.n-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-family: var(--sans); }
.n-table th {
  text-align: left; padding: 8px 13px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1.5px solid var(--line);
  font-weight: 700;
}
.n-table td { padding: 8px 13px; border-bottom: 1px solid var(--line2); color: var(--text2); vertical-align: top; }
.n-table tr:last-child td { border-bottom: none; }
.n-table tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }

/* code figures */
.n-code { margin: 14px 0 20px; position: relative; font-family: var(--sans); }
.n-code pre {
  margin: 0;
  background: var(--code-bg);
  border-radius: 12px;
  padding: 36px 18px 16px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255,255,255,.06);
}
.n-code pre::-webkit-scrollbar { height: 8px; }
.n-code pre::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
.n-lang { position: absolute; top: 10px; left: 16px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,252,240,.45); pointer-events: none; }
.n-copy {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  background: rgba(255,252,240,.1);
  border: 1px solid rgba(255,252,240,.28);
  color: rgba(255,252,240,.75);
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px;
  opacity: 0;
  transition: opacity .15s;
}
.n-code:hover .n-copy, .n-call:hover > .n-copy, .n-tablewrap:hover > .n-copy,
.n-kv:hover > .n-copy, .n-steps:hover > .n-copy, .n-copy:focus-visible { opacity: 1; }
.n-copy.copied { color: #fff; opacity: 1; }
.n-call > .n-copy, .n-tablewrap > .n-copy, .n-kv > .n-copy, .n-steps > .n-copy {
  background: var(--panel); border-color: var(--line2); color: var(--muted);
}
.n-call > .n-copy.copied, .n-tablewrap > .n-copy.copied, .n-kv > .n-copy.copied, .n-steps > .n-copy.copied { color: var(--good); }
.n-code code { background: none; border: none; padding: 0; color: var(--code-ink); font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.n-code .k { color: #9FB4E8; } .n-code .t { color: #8CC7A6; }
.n-code .s { color: #D9BB7B; } .n-code .c { color: #8B8474; font-style: italic; }
.n-code figcaption { font-size: 12px; color: var(--muted); margin-top: 8px; padding-left: 4px; }

/* steps — a quiet left-ruled walkthrough: .sh heading, .sm working, .sn note */
.n-steps { margin: 12px 0 22px; position: relative; padding-left: 22px; }
.n-steps::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 30%, transparent); }
.n-steps .step { position: relative; padding: 7px 0 9px; }
.n-steps .step::before {
  content: ""; position: absolute; left: -21px; top: 15px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--bg1); border: 2px solid var(--accent);
}
.n-steps .step .sh { font-weight: 650; font-size: 15px; margin-bottom: 2px; }
.n-steps .step .sm { color: color-mix(in srgb, var(--text) 88%, var(--bg1)); white-space: pre-wrap; }
.n-steps .step .sn { font-size: 13.5px; color: var(--muted); font-style: italic; margin-top: 3px; }

/* ---- callouts: prose asides, not boxes ----
   The default treatment is a quiet ruled aside — a hairline rule and a
   small-caps side label. Only the genuinely interruptive kinds (warn,
   miscon, memorise) earn a tinted wash. Plain reading stays plain. */
.n-call { margin: 18px 0; position: relative; border-left: 2px solid var(--line); padding: 2px 0 2px 18px; }
.n-call-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--muted);
  margin-bottom: 4px;
}
.n-call-i { font-size: 12px; }
.n-call-b { font-size: 15.5px; }
.n-call-b p:last-child, .n-call-b ul:last-child { margin-bottom: 0; }

.n-call-def { border-left-color: color-mix(in srgb, var(--accent2) 65%, transparent); }
.n-call-def .n-call-h { color: var(--accent2); }
.n-call-tip { border-left-color: color-mix(in srgb, var(--accent3) 70%, transparent); }
.n-call-tip .n-call-h { color: var(--accent3); }
.n-call-info { border-left-color: color-mix(in srgb, var(--accent) 55%, transparent); }
.n-call-info .n-call-h { color: var(--accent); }
.n-call-mnemonic { border-left-color: color-mix(in srgb, var(--c-it) 55%, transparent); }
.n-call-mnemonic .n-call-h { color: var(--c-it); }
.n-call-formula {
  border-left: none;
  padding: 14px 20px;
  background: var(--wash-accent);
  border-radius: 10px;
}
.n-call-formula .n-call-h { color: var(--accent); }
.n-call-formula .n-call-b { font-size: 15.5px; }

/* the interruptive three — these DO break the flow, deliberately */
.n-call-warn, .n-call-miscon {
  border-left: none;
  padding: 13px 18px;
  background: var(--wash-danger);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
}
.n-call-warn .n-call-h, .n-call-miscon .n-call-h { color: var(--danger); }
.n-call-memorise {
  border-left: none;
  padding: 13px 18px;
  background: var(--wash-brass);
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, transparent);
}
.n-call-memorise .n-call-h { color: var(--accent2); }

/* diagram launch */
.n-diagram {
  display: flex; align-items: center; gap: 13px;
  width: 100%; text-align: left;
  background: var(--bg1);
  border: 1px dashed color-mix(in srgb, var(--accent2) 50%, transparent);
  border-radius: 10px;
  color: var(--text);
  padding: 13px 17px;
  margin: 13px 0 17px;
  font-size: 13.5px;
  font-family: var(--sans);
  transition: all .15s;
}
.n-diagram:hover { background: var(--wash-brass); border-color: var(--accent2); }
.n-diagram .nd-i { color: var(--accent2); font-size: 19px; }
.n-diagram .nd-t { display: block; color: var(--muted); font-size: 12px; }

/* inline figures */
.n-fig { margin: 14px 0 20px; text-align: center; }
.n-fig svg { max-width: 100%; height: auto; }
.n-fig figcaption { font-size: 12.5px; color: var(--muted); margin-top: 6px; font-style: italic; }

/* callout first-mount slide-in */
@keyframes callout-in { from { transform: translateX(-14px); opacity: 0; } }
.first-mount .n-call { animation: callout-in .32s cubic-bezier(.2,.7,.3,1) both; }
.first-mount .n-call:nth-of-type(2) { animation-delay: .05s; }
.first-mount .n-call:nth-of-type(3) { animation-delay: .1s; }
.first-mount .n-call:nth-of-type(4) { animation-delay: .15s; }

/* worked-example card (nw-*) */
.n-worked { margin: 16px 0 22px; overflow: hidden; font-family: var(--sans); }
.nw-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--line2); }
.nw-tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; border-radius: 999px; padding: 2px 10px; }
.nw-tag.example { color: var(--accent); background: var(--wash-accent); }
.nw-tag.variation { color: var(--accent3); background: var(--wash-sage); }
.nw-tag.exam { color: var(--accent2); background: var(--wash-brass); }
.nw-tag.check { color: var(--good); background: color-mix(in srgb, var(--good) 10%, transparent); }
.nw-title { font-weight: 600; font-size: 14.5px; }
.nw-body { padding: 14px 18px 16px; }
.nw-steps { display: grid; gap: 0; }
.nw-step { display: flex; gap: 13px; padding: 7px 0; }
.nw-num {
  flex: none;
  font-family: var(--mono); font-size: 10.5px;
  color: var(--muted);
  width: 24px; height: 24px;
  border: 1px solid var(--line2);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.nw-m { font-size: 14.5px; }
.nw-n { font-size: 12.5px; color: var(--muted); font-style: italic; }
.nw-result {
  margin-top: 12px;
  padding: 11px 15px;
  border-radius: 10px;
  background: var(--wash-sage);
  border: 1px solid color-mix(in srgb, var(--accent3) 30%, transparent);
  display: flex; gap: 10px; align-items: baseline;
}
.nw-rlabel { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--accent3); }
.nw-rval { font-weight: 600; }
.nw-sh { font-weight: 650; font-size: 13px; color: var(--text2); margin: 10px 0 2px; }

/* ============================================================
   Flashcards
   ============================================================ */
.fc-wrap { max-width: 660px; margin: 0 auto; }
.fc-meter { display: flex; gap: 4px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.fc-pip { width: 20px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text) 10%, transparent); transition: background .2s; }
.fc-pip.cur { background: var(--accent2); }
.fc-pip.done { background: var(--accent3); }
.fc-card { position: relative; width: 100%; min-height: 250px; border: none; background: none; perspective: 1300px; cursor: pointer; padding: 0; display: block; }
.fc-face {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 30px 34px;
  border-radius: 18px;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .55s cubic-bezier(.3,.8,.3,1);
  font-size: 17.5px; line-height: 1.6; text-align: center;
  color: var(--text);
  font-family: var(--serif);
  box-shadow: var(--shadow-md);
}
.fc-front { background: var(--panel); border: 1px solid var(--line2); transform: rotateY(0); }
.fc-back {
  background: linear-gradient(165deg, var(--wash-accent), var(--bg1));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  transform: rotateY(180deg);
}
.fc-card.flipped .fc-front { transform: rotateY(-180deg); }
.fc-card.flipped .fc-back { transform: rotateY(0); }
.fc-kind { font-family: var(--sans); letter-spacing: .18em; text-transform: uppercase; font-size: 10px; color: var(--muted); font-weight: 700; }
.fc-hint { font-family: var(--sans); font-size: 11px; color: var(--muted); }
.fc-rate { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.fc-life { text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--muted); margin-top: 14px; }
.fc-r { min-width: 86px; justify-content: center; }
.fc-r-hint { display: block; font-size: 9.5px; color: var(--muted); letter-spacing: .04em; }
.empty-state, .med-empty, .due-clear {
  min-height: 160px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  padding: var(--section-gap-lg) var(--space-5);
  text-align: center;
  color: var(--muted);
  background: color-mix(in srgb, var(--surface-card) 78%, transparent);
  border: 1px dashed var(--line);
  border-radius: var(--radius-card);
}
.empty-state.compact { min-height: 0; padding: var(--space-5); }
.fc-empty { color: var(--muted); text-align: center; padding: 26px 10px; font-size: 14px; max-width: 58ch; margin-inline: auto; }
.med-empty .fc-empty, .due-clear .fc-empty { padding: 0; margin-block: 0; }
.fc-badges { display: flex; gap: 6px; }
.fc-due { font-family: var(--mono); font-size: 10px; color: var(--accent2); }
.fc-curr, .fc-custom { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 1px 8px; }
.fc-curr { color: var(--accent); background: var(--wash-accent); }
.fc-custom { color: var(--accent3); background: var(--wash-sage); }
.fc-modebar { display: flex; gap: 8px; align-items: center; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }
.fc-mode { border: 1px solid var(--line2); border-radius: 999px; padding: 5px 14px; font-size: 12.5px; color: var(--text2); background: var(--bg1); }
.fc-mode.active { background: var(--text); color: var(--bg1); border-color: var(--text); }
.fc-metrics { display: flex; gap: 14px; justify-content: center; font-family: var(--mono); font-size: 11px; color: var(--muted); margin-top: 12px; flex-wrap: wrap; }
.fc-info { margin-top: 18px; }
.fc-info-h { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.fc-form { display: grid; gap: 10px; margin-top: 12px; }
.fc-form-h { font-weight: 600; font-family: var(--serif); }
.fc-form-q, .fc-form-a { width: 100%; min-height: 64px; resize: vertical; }
.fc-manage { margin-top: 20px; }
.fc-manage-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.fc-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--bg1); margin-bottom: 8px; }
.fc-row-q { font-weight: 600; font-size: 13.5px; }
.fc-row-a { font-size: 13px; color: var(--text2); }
.fc-row-top { display: flex; gap: 8px; align-items: baseline; }
.fc-row-detail { flex: 1; min-width: 0; }
.fc-topic { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

/* ============================================================
   Quiz + exam
   ============================================================ */
.qz-head { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11.5px; color: var(--muted); margin-bottom: 14px; }
.qz-best { color: var(--text2); }
.qz-card { padding: 18px 20px; margin-bottom: var(--space-4); }
.qz-q { font-size: 15px; margin-bottom: 14px; line-height: 1.6; }
.qz-q b { color: var(--accent, var(--kurenai)); }
.qz-marks { font-family: var(--mono); color: var(--accent2); font-size: 12px; }
.qz-opts { display: grid; gap: 9px; }
.qz-opt {
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line2);
  color: var(--text2);
  border-radius: 10px;
  padding: 10px 15px;
  font-size: 14px;
  transition: all .15s;
}
.qz-opt:hover:not(:disabled) { border-color: var(--accent2); color: var(--text); transform: translateX(3px); }
.qz-opt:disabled { cursor: default; opacity: .75; }
.qz-opt.right { border-color: var(--good); color: color-mix(in srgb, var(--good) 75%, var(--text)); opacity: 1; background: color-mix(in srgb, var(--good) 8%, var(--bg1)); }
.qz-opt.wrong { border-color: var(--danger); color: var(--danger); opacity: 1; background: var(--wash-danger); }
.qz-why { margin-top: 12px; font-size: 13.5px; padding: 11px 14px; border-radius: 10px; line-height: 1.6; animation: pop-in .24s ease both; }
.qz-why.ok { background: color-mix(in srgb, var(--good) 9%, var(--bg1)); color: color-mix(in srgb, var(--good) 60%, var(--text)); }
.qz-why.no { background: var(--wash-danger); color: color-mix(in srgb, var(--danger) 70%, var(--text)); }
@keyframes pop-in { from { opacity: 0; transform: translateY(5px); } }
.qz-result { font-size: 16px; padding: 16px 20px; }
.qz-result b { color: var(--accent2); font-family: var(--serif); font-size: 20px; }
.qz-ms { margin-top: 14px; font-size: 13.5px; background: var(--wash-brass); border: 1px solid color-mix(in srgb, var(--accent2) 28%, transparent); border-radius: 10px; padding: 12px 16px; animation: pop-in .24s ease both; }
.qz-ms b { color: var(--accent2); }
.qz-ms ul { margin: 7px 0 2px; padding-left: 20px; }
.qz-ms li { margin: 5px 0; }
.answerline { width: 100%; min-height: 90px; resize: vertical; margin: 8px 0; }

/* ============================================================
   Labs shared
   ============================================================ */
.lab-wrap { max-width: 1080px; }
.lab-h h1 { font-size: var(--type-page-title); margin: 0 0 5px; }
.lab-h .sub { color: var(--muted); font-size: 13.5px; max-width: var(--content-readable); }
.lab-h .specref, .specref { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.lab-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 18px; }
.lab-tab {
  background: var(--bg1);
  border: 1px solid var(--line2);
  color: var(--text2);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 13px;
  transition: all .15s;
}
.lab-tab:hover { color: var(--text); border-color: var(--line); }
.lab-tab.active { background: var(--text); color: var(--bg1); border-color: var(--text); }
.lab-panel { padding: var(--card-pad); }
.lab-controls { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin-bottom: 16px; }
.lab-controls input[type=number], .lab-controls input[type=text], .lab-controls select { width: 114px; font-size: 13px; }
.lab-controls label { font-size: 12px; color: var(--text2); display: flex; flex-direction: column; gap: 4px; }
canvas.labcanvas { width: 100%; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); display: block; }
.cat-pills { display: flex; gap: 9px; margin: 16px 0 12px; flex-wrap: wrap; }
.cat-pill { border: 1px solid var(--line2); color: var(--text2); border-radius: 999px; padding: 7px 18px; font-size: 13px; font-weight: 600; background: var(--bg1); }
.cat-pill:hover { color: var(--text); border-color: var(--line); }
.cat-pill.active { border-color: var(--accent); color: var(--accent); background: var(--wash-accent); }
.sim-launch {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%; text-align: left;
  padding: 15px 18px;
  border: 1px solid var(--line2);
  border-radius: var(--radius);
  background: var(--bg1);
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  transition: all .15s;
}
.sim-launch:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.sim-launch b { font-family: var(--serif); font-size: 15px; }
.sim-launch span { font-size: 12.5px; color: var(--text2); }
.sim-msg { font-size: 13px; color: var(--muted); margin: 8px 0; }

/* ============================================================
   The Behavioural Governor
   ============================================================ */
/* ---- topbar HUD ---- */
#hud { display: flex; align-items: center; margin-left: auto; }
#searchbox { margin-left: 0; }
.hud {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 999px;
  padding: 4px 14px 4px 5px;
  box-shadow: var(--shadow-sm);
  transition: border-color .15s, transform .15s;
}
.hud:hover { transform: translateY(-1px); border-color: var(--line); }
.hud-strained { border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.hud-critical { border-color: color-mix(in srgb, var(--danger) 65%, transparent); }
.hud-col { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.hud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.hud-lv { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text2); letter-spacing: .06em; }
.hud-gold { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--accent2); }
.hud-bars { display: flex; flex-direction: column; gap: 3px; }
.hud-bar { display: block; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.hud-bar > span { display: block; height: 100%; border-radius: 4px; transition: width .5s cubic-bezier(.2,.7,.3,1); }
.hud-hp > span { background: linear-gradient(90deg, color-mix(in srgb, var(--danger) 70%, var(--accent2)), var(--accent3)); }
.hud-critical .hud-hp > span { background: var(--danger); animation: hud-pulse 1.6s ease-in-out infinite; }
.hud-xp > span { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 65%, transparent), var(--accent)); }
.hud-gold > span, .hud-bar.hud-gold > span { background: linear-gradient(90deg, color-mix(in srgb, var(--accent2) 60%, transparent), var(--accent2)); }
.hud-bar.big { height: 9px; border-radius: 6px; }
@keyframes hud-pulse { 50% { opacity: .45; } }

/* avatar chip */
.gov-avatar { position: relative; display: inline-flex; flex: none; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--line); background: var(--panel); }
.gov-avatar img, .gov-avatar svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.gov-avatar.frame-gold { border: 2px solid var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 22%, transparent); }
.gov-avatar.frame-crimson { border: 2px solid var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
.gov-avatar.frame-jade { border: 2px solid var(--accent3); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent3) 25%, transparent); }

/* banners + lock panels */
.gov-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border-radius: var(--radius);
  padding: 12px 18px; margin: 0 0 18px;
  background: var(--bg1);
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-sm);
  font-size: 13.5px; color: var(--text2);
}
.gov-banner.warn { border-color: color-mix(in srgb, var(--warning) 45%, transparent); background: var(--wash-brass); }
.gov-banner.warn b { color: var(--warning); }
.gov-banner.bad { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--wash-danger); }
.gov-banner.bad b { color: var(--danger); }
.gov-lock { text-align: center; padding: 46px 26px; background: var(--bg1); border: 1px dashed var(--line); border-radius: 16px; }
.gov-lock-glyph { font-family: var(--jp); font-size: 54px; line-height: 1; color: color-mix(in srgb, var(--accent) 55%, transparent); margin-bottom: 14px; }
.gov-lock h2 { font-size: 21px; margin: 0 0 8px; }
.gov-lock .sub { max-width: 560px; margin: 0 auto; font-size: 13.5px; }

/* ---- the bento ---- */
.bento { display: grid; gap: var(--grid-gap); grid-template-columns: repeat(12, 1fr); }
.bento-card { padding: var(--card-pad) 22px; position: relative; min-width: 0; }
.bento-card h4 { margin: 0 0 14px; display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.bento-card h4 .end { margin-left: auto; font-family: var(--mono); font-size: 9.5px; letter-spacing: .06em; color: var(--muted); text-transform: none; font-weight: 400; }
.b-id { grid-column: span 7; display: flex; align-items: center;
  border-color: color-mix(in srgb, var(--accent) 26%, transparent);
  background:
    radial-gradient(480px 200px at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%),
    radial-gradient(300px 180px at 100% 100%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 70%),
    var(--bg1);
}
.b-vitals { grid-column: span 5; }
.b-edicts { grid-column: span 5; }
.b-streak { grid-column: span 3; display: flex; flex-direction: column; }
.b-exams  { grid-column: span 4; }
.b-heat   { grid-column: span 8; }
.b-ledger { grid-column: span 4; }
.b-wide   { grid-column: 1 / -1; }
@media (max-width: 1240px) {
  .b-id { grid-column: span 12; } .b-vitals, .b-edicts { grid-column: span 6; }
  .b-streak { grid-column: span 4; } .b-exams { grid-column: span 8; }
  .b-heat, .b-ledger { grid-column: span 12; }
}
@media (max-width: 760px) { .bento > * { grid-column: 1 / -1 !important; } }

/* identity */
.id-wrap { display: flex; align-items: center; gap: 20px; flex: 1; }
.id-txt { min-width: 0; flex: 1; }
.id-txt .rank { font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--accent2); margin-bottom: 4px; font-weight: 700; }
.id-txt h2 { margin: 0 0 2px; font-size: 26px; font-weight: 600; }
.id-txt .title-line { font-size: 12.5px; color: var(--muted); letter-spacing: .04em; margin-bottom: 12px; }
.id-txt .title-line b { color: var(--accent); font-weight: 600; }
.lvl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lvl-badge {
  font-family: var(--serif); font-weight: 700; font-size: 14px;
  border: 1px solid color-mix(in srgb, var(--accent2) 45%, transparent);
  background: var(--wash-brass);
  padding: 2px 12px; border-radius: 999px; white-space: nowrap;
}
.lvl-badge i { font-style: normal; font-size: 9px; color: var(--accent2); letter-spacing: .16em; margin-right: 5px; }
.lvl-bar { flex: 1; max-width: 240px; }
.to-next { font-family: var(--mono); font-size: 10px; color: var(--muted); white-space: nowrap; }

/* vitals */
.vital { margin-bottom: 16px; }
.vital:last-child { margin-bottom: 0; }
.vital .vt { display: flex; align-items: baseline; gap: 9px; margin-bottom: 7px; }
.vital .vt b { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); font-weight: 700; }
.vital .vt .val { margin-left: auto; font-family: var(--mono); font-size: 12px; }
.vital .hint { font-size: 11px; color: var(--muted); margin-top: 6px; letter-spacing: .02em; }
.vital .hint.warn { color: var(--danger); }

/* streak */
.streak-big { text-align: center; padding: 6px 0 2px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.streak-big b { font-family: var(--serif); font-size: 44px; font-weight: 600; line-height: 1.1; display: block; }
.streak-big small { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.week-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.week-dots i { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); }
.week-dots i.on { background: var(--accent2); }
.week-dots i.today { border: 1.5px solid var(--accent2); background: transparent; }
.streak-best { text-align: center; font-family: var(--mono); font-size: 10px; color: var(--muted); margin-top: 10px; letter-spacing: .05em; }

/* heatmap + ledger */
.heat-wrap { display: flex; gap: 18px; align-items: flex-start; }
.heat-svg { flex: 1; min-width: 0; overflow-x: auto; }
.heat-svg svg { display: block; }
.heat-side { width: 150px; flex: none; }
.heat-side .hnum { font-family: var(--serif); font-size: 29px; font-weight: 600; line-height: 1.15; }
.heat-side .hlbl { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.heat-side .hrow { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text2); padding: 4px 0; border-top: 1px solid var(--line2); }
.heat-side .hrow b { font-weight: 600; font-variant-numeric: tabular-nums; }
.ledger { display: flex; flex-direction: column; }
.led-row { display: flex; align-items: center; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--line2); }
.led-row:last-child { border-bottom: none; }
.led-row .sig { font-family: var(--mono); font-size: 10.5px; font-weight: 500; width: 52px; flex: none; }
.sig.plus-xp { color: var(--accent); } .sig.plus-g { color: var(--accent2); }
.sig.minus { color: var(--danger); } .sig.log { color: var(--accent3); }
.led-row .lt { flex: 1; font-size: 12.5px; color: var(--text2); line-height: 1.45; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led-row .when { font-size: 9.5px; font-family: var(--mono); color: var(--muted); white-space: nowrap; }
.b-edicts .todo-panel { background: none; border: none; box-shadow: none; padding: 0; }

/* status chrome */
.gov-status.gov-strained { --gov-edge: var(--warning); }
.gov-status.gov-critical { --gov-edge: var(--danger); }
.gov-rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 16px; }
.gov-rule { background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--text2); }
.gov-rule b { display: block; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text); margin-bottom: 4px; }
.gov-recovery { margin-top: 2px; border: 1px solid var(--line2); border-radius: var(--radius); padding: 16px 18px; background: var(--bg1); }
.gov-recovery.urgent { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: var(--wash-danger); }
.gov-rec-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  padding: 10px 14px; margin-top: 8px; font-size: 13.5px; color: var(--text2);
  transition: border-color .15s;
}
.gov-rec-item:hover { border-color: var(--line); }
.gov-rec-item.done { opacity: .55; }
.gov-rec-item.done .gov-rec-check { color: var(--good); }
.gov-rec-check { font-size: 15px; color: var(--muted); }
.gov-rec-n { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); }

/* shop */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--grid-gap); margin-top: 4px; }
.shop-card { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.shop-card.owned { border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.shop-card.suspended { opacity: .55; }
.shop-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.shop-card-h b { font-family: var(--serif); font-weight: 600; }
.shop-card .sub { margin: 0; font-size: 12.5px; flex: 1; }
.shop-price { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent2); white-space: nowrap; }
.shop-sw { display: flex; gap: 6px; margin: 2px 0; }
.shop-sw-dot { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line); flex: none; }
.shop-owned { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--good); font-weight: 700; }
.shop-note { font-size: 11.5px; color: var(--muted); margin: 0; }

/* seals + avatar */
.seal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--grid-gap); }
.seal-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 10px;
  transition: transform .15s, border-color .15s;
}
.seal-card:hover { transform: translateY(-2px); border-color: var(--line); }
.seal-card svg { width: 64px; height: 64px; }
.seal-card.active { border-color: var(--accent2); background: var(--wash-brass); }
.seal-card.locked { opacity: .4; filter: grayscale(.7); }
.seal-name { font-family: var(--serif); font-size: 13.5px; font-weight: 600; }
.seal-lv { font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.avatar-preview { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.gov-log td, .gov-log th { font-size: 12.5px; }

/* SM-2 rating buttons */
.fc-rate { flex-wrap: wrap; }
.fc-r { display: flex; flex-direction: column; gap: 1px; min-width: 92px; padding: 8px 16px; align-items: center; }
.fc-r b { font-size: 13.5px; }
.fc-r-again { border-color: color-mix(in srgb, var(--danger) 40%, transparent); color: var(--danger); }
.fc-r-again:hover { background: var(--wash-danger); border-color: var(--danger); }
.fc-r-hard { border-color: color-mix(in srgb, var(--warning) 50%, transparent); color: var(--warning); }
.fc-r-hard:hover { background: var(--wash-brass); border-color: var(--warning); }
.fc-r-good { border-color: color-mix(in srgb, var(--good) 50%, transparent); color: var(--good); }
.fc-r-good:hover { background: color-mix(in srgb, var(--good) 10%, transparent); border-color: var(--good); }
.fc-r-easy { border-color: color-mix(in srgb, var(--accent) 50%, transparent); color: var(--accent); }
.fc-r-easy:hover { background: var(--wash-accent); border-color: var(--accent); }
.fc-badges { position: absolute; top: 14px; right: 16px; }

/* due view */
.due-clear { padding-block: 54px; }
.due-clear-glyph { font-family: var(--jp); font-size: 58px; color: var(--accent3); margin-bottom: 12px; }
.due-clear h2 { margin: 0 0 6px; }

/* streak chips */
.streak-chip {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px;
}
.streak-chip .fl { font-family: var(--jp); font-size: 12px; }
.streak-chip.lit { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 45%, transparent); background: var(--wash-brass); }

/* daily to-do — Fable edicts: reward-labelled, dividers, sealed footer */
.todo-panel { padding: 18px var(--card-pad); }
.todo-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.todo-h b { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.todo-count { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.todo-list { display: flex; flex-direction: column; }
.todo-item { display: flex; align-items: center; gap: 13px; padding: 11px 2px; border-bottom: 1px solid var(--line2); }
.todo-item:last-child { border-bottom: none; }
.todo-item.done .todo-label { text-decoration: line-through; color: var(--muted); }
.todo-tick {
  appearance: none; -webkit-appearance: none;
  width: 22px; height: 22px; flex: none; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 7px;
  background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.todo-tick:checked { background: var(--accent3); border-color: var(--accent3); }
.todo-tick:checked::after { content: "✓"; color: #FCFAF4; font-size: 13px; font-weight: 700; }
.todo-label { flex: 1; font-size: 15px; color: var(--text); }
.todo-item.done .todo-label { color: var(--muted); }
.todo-reward { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.todo-item.done .todo-reward { color: var(--muted); }
.todo-tag { font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line2); border-radius: 999px; padding: 2px 8px; }
.todo-foot {
  margin: 12px 0 0; padding: 11px 14px;
  border: 1px dashed color-mix(in srgb, var(--accent2) 40%, transparent);
  border-radius: 10px; text-align: center;
  font-size: 12.5px; color: var(--text2);
  background: var(--wash-brass);
}
.todo-add { display: flex; gap: 8px; margin-top: 12px; }
.todo-in { flex: 1; }

/* deadline countdown widget */
.dl-widget { padding: 18px; }
.sec-grid + .dl-widget, .stat-strip + .dl-widget { margin-top: 18px; }
.dl-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.dl-h b { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.dl-item { display: flex; align-items: center; gap: 14px; padding: 9px 10px; border-radius: 10px; border: 1px solid transparent; }
.dl-item:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.dl-days { display: flex; flex-direction: column; align-items: center; min-width: 52px; border-radius: 10px; padding: 6px 8px; border: 1px solid var(--line2); background: var(--panel); }
.dl-days b { font-family: var(--serif); font-size: 20px; line-height: 1.1; }
.dl-days span { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.dl-item.hot .dl-days { border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: var(--wash-danger); }
.dl-item.hot .dl-days b { color: var(--danger); }
.dl-item.warm .dl-days { border-color: color-mix(in srgb, var(--accent2) 50%, transparent); background: var(--wash-brass); }
.dl-item.warm .dl-days b { color: var(--accent2); }
.dl-item.cool .dl-days b { color: var(--text2); }
.dl-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dl-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-meta { font-family: var(--mono); font-size: 10px; color: var(--muted); }

/* calendar */
.cal-head { margin-bottom: 8px; }
.cal-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cal-title { font-family: var(--serif); font-size: 20px; margin: 0 6px; min-width: 170px; text-align: center; }
.cal-thresh { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.cal-dow { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-cell {
  min-height: 92px; border-radius: 10px; padding: 6px 7px; cursor: pointer;
  background: var(--bg1); border: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.cal-grid.week .cal-cell { min-height: 190px; }
.cal-cell:hover { border-color: var(--line); box-shadow: var(--shadow-sm); }
.cal-cell.other { opacity: .45; }
.cal-cell.today { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent) inset; }
.cal-daynum { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.cal-cell.today .cal-daynum { color: var(--accent); font-weight: 700; }
.cal-ev {
  display: block; width: 100%; text-align: left; font-size: 10.5px; line-height: 1.35;
  border-radius: 6px; padding: 3px 7px; border: 1px solid var(--line2);
  background: var(--panel); color: var(--text2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev.t-exam { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: var(--wash-danger); }
.cal-ev.t-deadline { border-color: color-mix(in srgb, var(--accent2) 50%, transparent); color: var(--accent2); background: var(--wash-brass); }
.cal-ev.t-study { border-color: color-mix(in srgb, var(--good) 45%, transparent); color: var(--good); background: color-mix(in srgb, var(--good) 8%, var(--bg1)); }
.cal-ev.t-lesson { border-color: color-mix(in srgb, var(--c-maths) 45%, transparent); color: var(--c-maths); background: color-mix(in srgb, var(--c-maths) 8%, var(--bg1)); }
.cal-ev.t-personal { border-color: color-mix(in srgb, var(--c-it) 45%, transparent); color: var(--c-it); background: color-mix(in srgb, var(--c-it) 8%, var(--bg1)); }
.cal-legend { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 18px; }
.cal-key { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--muted); }
.cal-key.t-exam { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.cal-key.t-deadline { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 50%, transparent); }
.cal-key.t-study { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.cal-key.t-lesson { color: var(--c-maths); border-color: color-mix(in srgb, var(--c-maths) 45%, transparent); }
.cal-key.t-personal { color: var(--c-it); border-color: color-mix(in srgb, var(--c-it) 45%, transparent); }
.cal-modal { --modal-max: 560px; }
.cal-form { grid-template-columns: 1fr 1fr; margin-top: 14px; }
.cal-field { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.cal-field:first-child { grid-column: 1 / -1; }
.cal-in { font-size: 13.5px; letter-spacing: normal; text-transform: none; font-weight: 400; font-family: var(--sans); }

/* ============================================================
   Lab internals — sims, binary, trace, OOP
   ============================================================ */
.logic-live { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin: 6px 0 18px; }
.logic-switches { display: flex; gap: 11px; flex-wrap: wrap; }
.logic-sw {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  color: var(--text2); padding: 9px 17px; font-family: var(--mono); font-size: 12px; min-width: 58px;
  transition: all .15s;
}
.logic-sw b { font-size: 19px; color: var(--muted); transition: color .15s; }
.logic-sw.on { border-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--panel)); }
.logic-sw.on b { color: var(--good); }
.logic-lamp { font-family: var(--mono); font-size: 16px; padding: 13px 24px; border-radius: var(--radius); border: 1px solid var(--line2); color: var(--muted); transition: all .2s; }
.logic-lamp.on { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 9%, var(--bg1)); }
.logic-tt { max-width: 400px; }
.logic-tt td, .logic-tt th { text-align: center; font-family: var(--mono); }
.logic-tt tr.live td { background: var(--wash-brass) !important; color: var(--accent2); }
.logic-tt .q1 { color: var(--good); font-weight: 700; }
.logic-tt .q0 { color: var(--muted); }
.rx-hit { background: color-mix(in srgb, var(--accent2) 30%, transparent); border-radius: 3px; padding: 0 1px; }

.fsm-tape { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.fsm-cell { width: 36px; height: 40px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 16px; border: 1px solid var(--line2); border-radius: 8px; color: var(--text2); transition: all .2s; }
.fsm-cell.cur { border-color: var(--accent2); color: var(--accent2); background: var(--wash-brass); transform: translateY(-2px); }
.fsm-cell.done { color: var(--muted); background: var(--well); }
.fn-eq { font-family: var(--mono); font-size: 16px; margin: 4px 0 12px; }
.fn-desc { margin-top: 12px; font-size: 13.5px; color: var(--text2); line-height: 1.7; background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; padding: 13px 16px; }

/* binary register */
.bit-row { display: flex; gap: 6px; margin: 4px 0; }
.bit-row.weights, .bit-row.carry { margin-bottom: 0; }
.bw { width: 44px; text-align: center; font-family: var(--mono); font-size: 9.5px; color: var(--muted); }
.cbit { color: var(--accent2); font-size: 12px; font-weight: 700; height: 14px; }
.bit {
  width: 44px; height: 44px; font-family: var(--mono); font-size: 18px; font-weight: 700;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; color: var(--muted);
  transition: transform .2s, border-color .2s, color .2s;
}
.bit.on { color: var(--good); border-color: var(--good); background: color-mix(in srgb, var(--good) 7%, var(--panel)); }
.bit.flip { transform: rotateX(180deg); }
.bit.live { border-color: var(--accent2); color: var(--accent2); }
.bit:disabled { cursor: default; }
.bit-row.result .bit { background: var(--well); }
.bin-lbl { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin-top: 10px; }
.bin-read { margin-top: 14px; }
.bin-read dd { font-family: var(--mono); }
.cpu-desc { margin-top: 12px; font-family: var(--mono); font-size: 12px; color: var(--accent2); background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; padding: 11px 15px; min-height: 40px; }
.trig-read { margin-top: 12px; font-family: var(--mono); font-size: 13px; background: var(--bg1); border: 1px solid var(--line2); border-radius: 10px; padding: 12px 16px; line-height: 1.8; }

/* recursion visualiser */
.rec-wrap { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 18px; align-items: start; }
.rec-h { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; font-weight: 700; }
.rec-stack { display: flex; flex-direction: column; gap: 6px; min-height: 220px; background: var(--well); border: 1px solid var(--line2); border-radius: var(--radius); padding: 12px; }
.rec-frame { background: var(--panel); border: 1px solid var(--line2); border-left: 3px solid var(--c-maths); border-radius: 8px; padding: 9px 13px; font-family: var(--mono); font-size: 12px; animation: callout-in .25s ease both; }
.rec-frame b { display: block; }
.rec-frame .ra { color: var(--muted); font-size: 10px; display: block; }
.rec-frame .pr { color: var(--accent2); font-size: 11px; display: block; margin-top: 2px; }
.rec-frame.base { border-left-color: var(--good); }
.rec-frame.base b { color: var(--good); }
.rec-frame.returning { opacity: .35; transition: opacity .2s; }
.rec-info { color: var(--text2); font-size: 13px; line-height: 1.7; background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--radius); padding: 13px 16px; }
.rec-result { font-family: var(--mono); color: var(--good); font-size: 12.5px; margin-top: 10px; }

/* trace lab */
.trace-flex { display: flex; gap: 16px; align-items: stretch; }
.trace-flex .trace-canvas { flex: 1; min-width: 0; }
.trace-table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 12px; margin-top: 16px; }
.trace-table th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 11px; border-bottom: 1px solid var(--line); text-transform: uppercase; font-size: 10px; letter-spacing: .1em; }
.trace-table td { padding: 6px 11px; border-bottom: 1px solid var(--line2); color: var(--text2); }
.trace-table tr:last-child td { color: var(--text); }
.code-panel {
  flex: none; width: 340px; margin: 0;
  background: var(--code-bg);
  border-radius: var(--radius); padding: 14px 0;
  font-family: var(--mono); font-size: 11.5px; line-height: 1.85; color: #EFE9DA;
  overflow-x: auto; align-self: flex-start; max-height: 100%;
  box-shadow: var(--shadow-md);
}
.code-panel .code-line { display: block; padding: 0 15px; border-left: 3px solid transparent; white-space: pre; transition: background .2s, border-color .2s; }
.code-panel .code-line.hl { border-left-color: #D9BB7B; background: rgba(255,255,255,.07); }
.code-panel .k { color: #9FB4E8; } .code-panel .t { color: #8CC7A6; }
.code-panel .s { color: #D9BB7B; } .code-panel .c { color: #8B8474; font-style: italic; }

/* OOP sandbox */
#oop-stage-wrap { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
#oop-stage {
  position: relative; min-height: 560px;
  border: 1px solid var(--line2); border-radius: var(--radius); overflow: hidden;
  background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 1.6px) 0 0/26px 26px, var(--bg1);
}
#oop-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cls-card { position: absolute; width: 232px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-md); user-select: none; }
.cls-card.basing { outline: 2px dashed var(--accent2); }
.cls-card .cls-h { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: var(--well); border-bottom: 1px solid var(--line2); border-radius: 10px 10px 0 0; cursor: grab; }
.cls-card .cls-h:active { cursor: grabbing; }
.cls-card .cls-h input { flex: 1; min-height: 0; background: none; border: none; font-family: var(--mono); font-size: 13px; font-weight: 700; min-width: 0; padding: 0; }
.cls-card .abst { font-size: 9px; font-family: var(--mono); color: var(--accent2); cursor: pointer; display: flex; align-items: center; gap: 3px; }
.cls-body { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.member { display: grid; grid-template-columns: 18px 56px 1fr 16px; gap: 4px; align-items: center; }
.member select, .member input { min-height: var(--control-h-xs); font-size: 11px; font-family: var(--mono); padding: 4px 5px; min-width: 0; border-radius: 5px; }
.member .acc { text-align: center; }
.mem-h { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 3px; font-weight: 700; }
.cls-foot { display: flex; gap: 5px; padding: 7px 9px 9px; flex-wrap: wrap; }
#oop-code { background: var(--code-bg); border-radius: var(--radius); padding: 16px 18px; overflow: auto; max-height: 640px; box-shadow: var(--shadow-md); }
#oop-code pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; color: #EFE9DA; white-space: pre; }
.cs-kw { color: #9FB4E8; } .cs-ty { color: #8CC7A6; } .cs-cm { color: #8B8474; font-style: italic; } .cs-cl { color: #D9BB7B; }
.cs-topics { display: flex; gap: 8px; flex-wrap: wrap; }

/* ============================================================
   Focus Timer — the quiet hour
   ============================================================ */
body.focus-mode #topbar { display: none; }
body.focus-mode:not(.fx-minimised) #rail,
body.focus-mode:not(.fx-minimised) #tree,
body.focus-mode:not(.fx-minimised) #subnav { display: none; }
body.fx-minimised #cols { padding-top: var(--topbar-h); }
body.focus-mode .bg-flora { opacity: .6; }

.fx-stage {
  position: fixed; inset: 0; z-index: 70;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center; padding: 30px;
  background:
    radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(700px 500px at 50% 115%, color-mix(in srgb, var(--accent2) 8%, transparent), transparent 60%),
    var(--bg0);
}
.fx-stage.fx-break {
  background:
    radial-gradient(900px 600px at 50% -10%, color-mix(in srgb, var(--accent3) 14%, transparent), transparent 60%),
    var(--bg0);
}
body.fx-minimised .fx-stage { display: none; }
.fx-kanji { font-family: var(--jp); font-size: 70px; line-height: 1; color: color-mix(in srgb, var(--accent) 70%, transparent); margin-bottom: 4px; }
.fx-stage.fx-break .fx-kanji { color: var(--accent3); }
.fx-stage.fx-paused .fx-kanji { color: var(--accent2); }
.fx-phase { font-size: 12px; letter-spacing: .5em; text-indent: .5em; color: var(--accent); text-transform: uppercase; font-weight: 700; }
.fx-stage.fx-break .fx-phase { color: var(--accent3); }
.fx-stage.fx-paused .fx-phase { color: var(--accent2); }
.fx-clock {
  font-family: var(--serif);
  font-weight: 550; font-size: clamp(76px, 16vw, 152px);
  line-height: 1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.fx-track { width: min(430px, 74vw); height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; }
.fx-fill { display: block; height: 100%; border-radius: 5px; width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 60%, transparent), var(--accent)); transition: width 1s linear; }
.fx-stage.fx-break .fx-fill { background: var(--accent3); }
.fx-stage.fx-paused .fx-fill { background: var(--accent2); }
.fx-topic { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--text2); max-width: 640px; }
.fx-meta { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fx-stats { display: flex; gap: 18px; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.fx-big { padding: 11px 24px; font-size: 14px; }
.fx-open-topic { color: var(--accent); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.fx-note { font-size: 11.5px; color: var(--muted); max-width: 460px; margin: 6px 0 0; }

.fx-dock {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 69; display: none; align-items: center; gap: 12px;
  padding: 8px 16px; border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
  max-width: min(92vw, 760px);
}
body.fx-minimised .fx-dock { display: flex; }
.fx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: hud-pulse 2s ease-in-out infinite; }
.fx-dock.fx-break .fx-dot { background: var(--accent3); }
.fx-dock.fx-paused .fx-dot { background: var(--accent2); animation: none; }
.fx-dock-clock { font-family: var(--mono); font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.fx-dock-phase { font-size: 9px; letter-spacing: .3em; color: var(--muted); text-transform: uppercase; font-weight: 700; }
.fx-dock-topic { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.fx-dock-ctl { display: flex; gap: 6px; margin-left: 6px; }

.fx-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.fx-mode-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 18px;
  background: var(--bg1); border: 1px solid var(--line2); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); color: var(--text2);
  transition: transform .15s, border-color .15s;
}
.fx-mode-card:hover { transform: translateY(-2px); border-color: var(--line); }
.fx-mode-card.active { border-color: var(--accent); background: var(--wash-accent); }
.fx-mode-card b { font-family: var(--serif); font-size: 15.5px; color: var(--text); }
.fx-mode-card span { font-size: 12.5px; color: var(--muted); }
.fx-custom { display: flex; gap: 14px; margin-bottom: 14px; }
.fx-num { width: 110px; }
.fx-link-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.fx-start { padding: 12px 26px; font-size: 14.5px; }
@media (max-width: 860px) { .fx-dock-topic { display: none; } .fx-custom { flex-direction: column; } }

/* ============================================================
   Tracking completion — tracker, RAG, card stats, attachments, help
   ============================================================ */
.trk-ctl { display: flex; gap: 10px; align-items: center; margin: 4px 0 16px; flex-wrap: wrap; }
.trk-row { margin-top: 10px; overflow: hidden; }
.trk-row.reviewed { opacity: .75; }
.trk-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; }
.trk-head:hover { background: color-mix(in srgb, var(--text) 3%, transparent); }
.trk-date { font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.trk-topic { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.trk-topic b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trk-sub { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.trk-score { font-family: var(--mono); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.trk-score.good { color: var(--good); }
.trk-score.mid { color: var(--warning); }
.trk-score.low { color: var(--danger); }
.trk-grade { font-family: var(--serif); font-weight: 700; min-width: 26px; text-align: center; color: var(--text2); }
.trk-rev { display: flex; align-items: center; }
.trk-detail { padding: 4px 16px 14px; border-top: 1px solid var(--line2); }
.trk-block { display: flex; gap: 12px; font-size: 13px; color: var(--text2); padding: 6px 0; }
.trk-block b { flex: 0 0 110px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.trk-marks { display: flex; align-items: center; gap: 6px; }
.trk-slash { color: var(--muted); }
.trk-longfields { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 860px) { .trk-longfields { grid-template-columns: 1fr; } }

/* RAG */
.rag-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; flex: none; }
.rag-r { background: var(--danger); }
.rag-a { background: var(--warning); }
.rag-g { background: var(--good); }
.rag-picker { display: inline-flex; align-items: center; gap: 7px; }
.rag-picker-l { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.rag-pick { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); background: transparent; padding: 0; opacity: .45; transition: all .15s; }
.rag-pick:hover { opacity: .8; transform: scale(1.1); }
.rag-pick.rag-r { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 25%, transparent); }
.rag-pick.rag-a { border-color: var(--warning); background: color-mix(in srgb, var(--warning) 25%, transparent); }
.rag-pick.rag-g { border-color: var(--good); background: color-mix(in srgb, var(--good) 25%, transparent); }
.rag-pick.on { opacity: 1; }
.rag-pick.on.rag-r { background: var(--danger); }
.rag-pick.on.rag-a { background: var(--warning); }
.rag-pick.on.rag-g { background: var(--good); }
.rag-auto { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.rag-why { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.rag-disagree { color: var(--warning); }
.rag-panel { padding: 18px; margin: 0 0 18px; }
.rag-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; border-radius: 10px; padding: 8px 10px; color: var(--text2); transition: all .15s; }
.rag-item:hover { background: color-mix(in srgb, var(--text) 3%, transparent); border-color: var(--line2); }
.rag-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rag-item-t b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rag-go { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.cs-topics td b { font-family: var(--mono); font-weight: 600; }

/* attachments */
.att-lead { margin-top: 0; }
.att-row { padding: 12px 14px; margin-top: 10px; }
.att-head { display: flex; align-items: center; gap: 10px; }
.att-ico { font-size: 16px; }
.att-name { flex: 1; font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-size { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.att-viewer { margin-top: 10px; }
.att-viewer img { max-width: 100%; max-height: 480px; border-radius: 10px; border: 1px solid var(--line2); }
.att-viewer iframe { width: 100%; height: 520px; border: 1px solid var(--line2); border-radius: 10px; background: #fff; }
.att-note { margin-top: 10px; min-height: 44px; width: 100%; }
.att-unavail { padding: 20px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
.att-wrap { margin-top: 8px; }
.att-list { margin-top: 6px; }

/* help */
.help-wrap { display: grid; grid-template-columns: 220px minmax(0, 760px) minmax(210px, 1fr); grid-template-areas: "nav search ." "nav content aside"; gap: 24px 32px; align-items: start; }
.help-nav { grid-area: nav; position: sticky; top: 10px; display: flex; flex-direction: column; gap: 3px; padding-top: 4px; }
.help-nav-item { text-align: left; padding: 10px 13px; border-radius: 9px; font-size: 14px; color: var(--text2); font-weight: 500; transition: background .15s, color .15s; }
.help-nav-item:hover { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); }
.help-nav-item.active { background: var(--wash-accent); color: var(--accent); font-weight: 600; }
.help-search-shell { grid-area: search; min-width: 0; }
.help-search { width: 100%; min-width: 0; border-radius: 999px; }
.help-content { grid-area: content; min-width: 0; max-width: 760px; }
.help-block { scroll-margin-top: 16px; margin-bottom: 34px; }
.help-block-h { font-family: var(--serif); font-size: 24px; line-height: 1.2; font-weight: 600; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); }
.help-row { scroll-margin-top: 16px; border-bottom: 1px solid var(--line2); }
.help-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 15px 5px; }
.help-row-head:hover .help-row-t { color: var(--accent); }
.help-row-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius-control); }
.help-row-t { font-size: 17px; font-weight: 600; }
.help-row-arr { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--well); font-size: 10px; color: var(--muted); transition: transform .18s, color .18s, background .18s; flex: none; }
.help-row.open .help-row-arr { transform: rotate(180deg); color: var(--accent); }
.help-row-body { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.help-row.open .help-row-body { max-height: 2400px; }
.help-row-body p { margin: 0 0 15px; font-size: 16px; line-height: 1.72; color: var(--text2); max-width: 66ch; }
.help-row-tools { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 0 18px; }
.help-related { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 10px; border: 1px solid var(--line2); border-radius: 999px; color: var(--text2); background: var(--surface-elevated); font-size: 12px; font-weight: 600; }
.help-related:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line2)); }
.help-aside { grid-area: aside; position: sticky; top: 10px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.help-aside-card { padding: 16px; border: 1px solid var(--line2); border-radius: var(--radius-card); background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, var(--surface-card)), var(--surface-card)); box-shadow: var(--shadow-sm); }
.help-aside-card b { display: block; margin: 5px 0 8px; font-family: var(--serif); font-size: 18px; }
.help-aside-card p { margin: 0; color: var(--text2); font-size: 13.5px; line-height: 1.6; }
.help-aside-kicker { color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.help-aside-shortcuts { display: flex; flex-direction: column; gap: 9px; }
.help-aside-shortcuts > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text2); font-size: 12px; }
.help-aside-shortcuts kbd { padding: 2px 6px; border: 1px solid var(--line2); border-radius: 5px; background: var(--well); color: var(--text); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
@media (max-width: 1180px) { .help-wrap { grid-template-columns: 200px minmax(0, 760px); grid-template-areas: "nav search" "nav content"; } .help-aside { display: none; } }
@media (max-width: 820px) { .help-wrap { grid-template-columns: 1fr; grid-template-areas: "search" "content"; gap: 18px; } .help-nav { display: none; } .help-content { max-width: none; } .help-block-h { font-size: 22px; } }
@media (max-width: 560px) { .help-row-t { font-size: 16px; } .help-row-body p { font-size: 15px; line-height: 1.65; } }

/* ============================================================
   Focus setup page + Tasks & Habits
   ============================================================ */
.fx-setup { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 1000px) { .fx-setup { grid-template-columns: 1fr; } }
.fx-setup-main { padding: 22px 24px; }
.fx-setup-side { display: flex; flex-direction: column; gap: 14px; }
.fx-mode-k {
  font-family: var(--jp); font-size: 19px; flex: none;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 11px;
  color: var(--accent);
  background: var(--wash-accent);
}
.fx-mode-card { flex-direction: row; align-items: center; gap: 13px; }
.fx-mode-card.active .fx-mode-k {
  color: #FCFAF4;
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 92%, #fff), color-mix(in srgb, var(--accent) 78%, #000));
}
.fx-mode-t { display: flex; flex-direction: column; gap: 2px; }
.fx-deal { padding: 16px 18px; }
.fx-deal h4 { margin: 0 0 12px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.fx-start { margin-top: 6px; }

/* the stage, dressed */
.fx-stage::before {
  content: "集";
  position: absolute;
  right: -4%; bottom: -12%;
  font-family: var(--jp);
  font-size: min(58vh, 540px);
  line-height: 1;
  color: color-mix(in srgb, var(--accent) 5%, transparent);
  pointer-events: none;
}
.fx-stage.fx-break::before { content: "息"; color: color-mix(in srgb, var(--accent3) 7%, transparent); }
.fx-stage.fx-reading::before { content: "読"; color: color-mix(in srgb, var(--accent2) 6%, transparent); }
.fx-clock { position: relative; }
.fx-clock::after {
  content: ""; display: block;
  width: 64px; height: 3px; border-radius: 3px;
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, var(--accent2), transparent);
}
.fx-stats span { border: 1px solid var(--line2); border-radius: 999px; padding: 4px 12px; background: color-mix(in srgb, var(--bg1) 70%, transparent); }

/* tasks & habits */
.tasks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--layout-gap); align-items: start; }
@media (max-width: 1000px) { .tasks-grid { grid-template-columns: 1fr; } }
.tasks-col { padding: 18px 20px; }
.tasks-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 18px; }
.tasks-h .tk {
  font-family: var(--jp); font-size: 15px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px;
  color: var(--accent);
  background: var(--wash-accent);
}
.rem-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rem-item { border: 1px solid var(--line2); border-radius: 11px; background: var(--panel); overflow: hidden; }
.rem-item.done { opacity: .62; }
.rem-item.done .todo-label { text-decoration: line-through; color: var(--muted); }
.rem-main { display: flex; align-items: center; gap: 10px; padding: 9px 12px; }
.rem-main .todo-label { flex: 1; font-size: 14px; }
.rem-subcount { font-family: var(--mono); font-size: 10.5px; color: var(--muted); background: var(--well); border-radius: 999px; padding: 1px 8px; }
.rem-subs { padding: 2px 12px 10px 38px; display: flex; flex-direction: column; gap: 4px; border-top: 1px dashed var(--line2); }
.rem-sub { display: flex; align-items: center; gap: 9px; padding: 3px 0; font-size: 13.5px; }
.rem-sub.done .todo-label { text-decoration: line-through; color: var(--muted); }
.rem-sub .todo-label { flex: 1; }
.rem-sub-add { margin-top: 4px; }
.rem-sub-add input { width: 100%; min-height: var(--control-h-sm); font-size: 13px; padding: 5px 10px; }
.habit-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.habit-row {
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--line2);
  border-radius: 11px;
  background: var(--panel);
  padding: 9px 12px;
  transition: border-color .15s, background .15s;
}
.habit-row.kept { border-color: color-mix(in srgb, var(--accent3) 45%, transparent); background: color-mix(in srgb, var(--accent3) 6%, var(--panel)); }
.habit-tick {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  color: var(--muted);
  font-size: 15px;
  transition: all .18s;
}
.habit-tick:hover { border-color: var(--accent3); color: var(--accent3); transform: scale(1.06); }
.habit-tick.on { background: var(--accent3); border-color: var(--accent3); color: #FCFAF4; }
.habit-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.habit-name { font-weight: 600; font-size: 14px; }
.habit-main .week-dots { justify-content: flex-start; margin: 0; gap: 4px; }
.habit-streak { font-size: 11px; color: var(--muted); white-space: nowrap; }
.habit-streak b { font-family: var(--serif); font-size: 17px; }
.habit-streak.lit { color: var(--accent2); }

/* numbered path on the home to-do */
.path-card .todo-panel { display: flex; flex-direction: column; }
.path-card .todo-item { counter-increment: path; padding: 9px 10px; }
.path-card .todo-panel { counter-reset: path; }
.path-card .todo-item::before {
  content: counter(path, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--line2);
  border-radius: 7px;
  padding: 2px 5px;
  flex: none;
}
.path-card .todo-item.done::before { color: var(--accent3); border-color: color-mix(in srgb, var(--accent3) 45%, transparent); }

/* ============================================================
   Governor extras: banner identity, ledger day heads
   ============================================================ */
.b-id { min-height: 190px; border-radius: 16px; }
.b-id.has-banner { border-color: color-mix(in srgb, var(--text) 22%, transparent); background-size: cover; background-position: center; }
.b-id.banner-dark { color: #F4EFE2; }
.b-id.banner-dark .id-txt h2, .b-id.banner-dark .title-line, .b-id.banner-dark .id-substats { color: #F4EFE2; }
.b-id.banner-dark .title-line b { color: #FFDFA1; }
.b-id.banner-dark .rank { color: #EFC77E; }
.b-id.banner-dark .to-next { color: rgba(244,239,226,.75); }
.b-id.banner-dark .lvl-badge { background: rgba(0,0,0,.25); border-color: rgba(255,255,255,.3); color: #F4EFE2; }
.id-substats { display: flex; gap: 18px; margin-top: 12px; font-size: 12px; color: var(--text2); flex-wrap: wrap; }
.id-substats b { font-family: var(--serif); font-size: 15px; margin-right: 3px; }
.id-banner-ctl { position: absolute; top: 12px; right: 14px; display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
.b-id:hover .id-banner-ctl, .id-banner-ctl:focus-within { opacity: 1; }
.b-id.banner-dark .id-banner-ctl .mini-btn { background: rgba(0,0,0,.35); border-color: rgba(255,255,255,.3); color: #F4EFE2; }
.led-day { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 16px 2px 4px; }
.gov-log.ledger .led-row { padding: 8px 2px; }

/* ============================================================
   Stats: the band and the modal
   ============================================================ */
.stat-band {
  display: flex; align-items: stretch; flex-wrap: wrap;
  border: 1px solid var(--line2);
  border-radius: var(--radius-card);
  background: var(--panel);
  margin: 2px 0 16px;
  overflow: hidden;
}
.stat-cell { flex: 1; min-width: var(--stat-min-w); display: flex; flex-direction: column; gap: 0; padding: var(--space-3) var(--space-4); border-left: 1px solid var(--line2); }
.stat-cell:first-child { border-left: none; }
.stat-cell b { font-family: var(--serif); font-size: 21px; font-weight: 600; }
.stat-cell span { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stats-modal { --modal-max: 980px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--grid-gap); }
.donut-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.donut-wrap svg { width: 150px; height: 150px; flex: none; }
.legend { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; }
.legend span { display: flex; align-items: center; }

/* ============================================================
   Backup & Restore
   ============================================================ */
.data-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--layout-gap); align-items: start; }
@media (max-width: 1000px) { .data-grid { grid-template-columns: 1fr; } }
.data-card { padding: var(--card-pad) var(--space-6); }
.data-card h3 { margin: 0 0 var(--space-4); font-size: var(--type-section-title); }
.data-action { display: flex; align-items: flex-start; gap: var(--space-4); padding: 10px 0; border-top: 1px solid var(--line2); flex-wrap: wrap; }
.data-action:first-of-type { border-top: none; }
.data-action .btn { flex: 0 0 280px; min-width: min(280px, 100%); white-space: nowrap; }
.data-action p { margin: 0; flex: 1 1 260px; min-width: 0; }
.data-list { margin: 0 0 12px; padding-left: 20px; color: var(--text2); font-size: 14px; }
.data-list li { margin: 7px 0; }
.data-list li::marker { color: var(--accent2); }

/* attachments */
.att-text { max-height: 420px; overflow: auto; background: var(--well); border-radius: 10px; padding: 14px 16px; font-family: var(--mono); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; }
.att-nopreview { flex-basis: 100%; margin: 4px 0 0 26px; }

/* ============================================================
   Calendar — the month, set like a print calendar
   ============================================================ */
.cal-nav .cal-title { font-size: 24px; font-weight: 550; text-align: left; min-width: 210px; }
.cal-grid { gap: 0; border: 1px solid var(--line2); border-radius: 14px; overflow: hidden; background: var(--line2); }
.cal-grid { row-gap: 1px; column-gap: 1px; }
.cal-dow { background: var(--bg1); padding: 8px 0 6px; font-weight: 700; }
.cal-cell { border: none; border-radius: 0; min-height: 104px; background: var(--bg1); }
.cal-cell:hover { background: var(--wash-accent); box-shadow: none; }
.cal-cell.other { opacity: 1; background: color-mix(in srgb, var(--bg0) 60%, var(--bg1)); }
.cal-cell.other .cal-daynum { opacity: .4; }
.cal-cell.today { box-shadow: none; border: none; }
.cal-daynum { align-self: flex-end; font-size: 12px; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.cal-cell.today .cal-daynum { background: var(--accent); color: #FCFAF4; font-weight: 700; }
.cal-ev { border: none; border-left: 3px solid var(--line); border-radius: 4px; padding: 2px 7px; background: var(--well); }
.cal-ev.t-exam { border-left-color: var(--danger); }
.cal-ev.t-deadline { border-left-color: var(--accent2); }
.cal-ev.t-study { border-left-color: var(--good); }
.cal-ev.t-lesson { border-left-color: var(--c-maths); }
.cal-ev.t-personal { border-left-color: var(--c-it); }

/* ============================================================
   蒐 The Collection — vault surfaces
   ============================================================ */
/* ---- the spotlight hero (Sol's banner treatment) ---- */
.vh-holder { margin: 2px 0 var(--section-gap); }
.vault-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line2);
  box-shadow: var(--shadow-md);
  background-size: cover;
  background-position: center 30%;
}
.vault-hero.has-banner { color: #F6F1E6; }
.vault-hero.vh-painted {
  background:
    radial-gradient(130% 170% at 100% 0%, color-mix(in srgb, var(--vh-accent, var(--accent)) 26%, transparent), transparent 55%),
    radial-gradient(100% 140% at 0% 100%, color-mix(in srgb, var(--vh-accent, var(--accent)) 12%, transparent), transparent 60%),
    var(--bg1);
}
.vh-body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: var(--hero-pad-block) var(--hero-pad-inline);
  max-width: 640px;
  min-width: 0;
}
.vh-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; }
.vault-hero.has-banner .vh-kicker { color: rgba(246,241,230,.8); }
.vault-hero.vh-painted .vh-kicker { color: var(--muted); }
.vh-kicker .vh-mod { letter-spacing: .18em; opacity: .75; }
.vh-title { margin: 0; font-size: var(--type-hero-title); font-weight: 580; line-height: 1.12; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.vh-line { margin: 0; font-size: 14.5px; }
.vault-hero.has-banner .vh-line { color: rgba(246,241,230,.85); }
.vault-hero.vh-painted .vh-line { color: var(--text2); }
.vh-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.vh-chip {
  font-family: var(--mono); font-size: 10.5px;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid;
}
.vault-hero.has-banner .vh-chip { color: rgba(246,241,230,.92); border-color: rgba(246,241,230,.35); background: rgba(16,14,10,.35); }
.vault-hero.vh-painted .vh-chip { color: var(--text2); border-color: var(--line); background: var(--panel); }
.vh-track { height: 5px; max-width: 340px; border-radius: 999px; overflow: hidden; margin-top: 4px; background: rgba(127,127,127,.28); }
.vault-hero.vh-painted .vh-track { background: color-mix(in srgb, var(--text) 10%, transparent); }
.vh-track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent2), color-mix(in srgb, var(--accent2) 60%, #fff)); }
.vh-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.vault-hero.has-banner .btn.ghost { color: #F6F1E6; border-color: rgba(246,241,230,.4); background: rgba(16,14,10,.25); }
.vault-hero.has-banner .btn.ghost:hover { border-color: rgba(246,241,230,.8); color: #fff; }
.vh-cover {
  flex: none;
  width: 150px;
  align-self: center;
  margin: 22px 34px 22px auto;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 14px 34px rgba(40,30,14,.3);
  transform: rotate(1.8deg);
  order: 2;
}
.vh-cover > img { width: 100%; height: 100%; display: block; }
.vh-ph {
  flex: none; order: 2;
  width: 150px; aspect-ratio: 2 / 3;
  align-self: center;
  margin: 22px 34px 22px auto;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--jp); font-size: 56px;
  color: color-mix(in srgb, var(--vh-accent, var(--accent)) 55%, var(--bg1));
  border-radius: 10px;
  background: color-mix(in srgb, var(--vh-accent, var(--accent)) 14%, var(--bg1));
  border: 1px solid color-mix(in srgb, var(--vh-accent, var(--accent)) 30%, transparent);
  transform: rotate(1.8deg);
}
@media (max-width: 860px) {
  .vh-cover, .vh-ph { display: none; }
}

/* ---- toolbar + count ---- */
.med-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.med-toolbar .med-search { flex: 1 1 200px; min-width: 150px; border-radius: 999px; }
.med-count { margin: 2px 0 14px; font-family: var(--mono); font-size: 11px; }

/* ---- the grid: overlay cards (AniList's own pattern) ---- */
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--grid-gap); }
.med-card {
  position: relative;
  display: flex; flex-direction: column;
  cursor: pointer;
  overflow: hidden;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s;
}
.med-card:hover, .med-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); outline: none; }
.med-cover { aspect-ratio: 2 / 3; background: var(--well); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.med-cover img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.med-card:hover .med-cover img { transform: scale(1.03); }
.med-cover-ph { font-family: var(--jp); font-size: 44px; color: var(--muted); opacity: .55; user-select: none; }
.med-fav {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; line-height: 1;
  background: rgba(20,16,10,.55); color: rgba(255,255,255,.75);
  backdrop-filter: blur(4px);
  transition: color .15s, transform .15s;
}
.med-fav:hover { transform: scale(1.15); color: #fff; }
.med-fav.on { color: #E8AFA0; }
.med-card-body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 30px 12px 12px;
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, transparent, rgba(18,14,8,.55) 30%, rgba(18,14,8,.92));
}
.med-title {
  font-size: 13px; font-weight: 600; line-height: 1.35; color: #FBF7EE;
  text-shadow: 0 1px 6px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.med-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.med-chip {
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  color: var(--chip, var(--muted));
  border: 1px solid color-mix(in srgb, var(--chip, #999) 50%, transparent);
  background: color-mix(in srgb, var(--chip, #999) 14%, transparent);
}
.med-card-body .med-chip { background: color-mix(in srgb, var(--chip, #999) 30%, rgba(18,14,8,.4)); color: #F5EFE2; border-color: color-mix(in srgb, var(--chip, #999) 60%, transparent); }
.med-prog { font-family: var(--mono); font-size: 10.5px; color: rgba(245,239,226,.85); }
.med-score { font-family: var(--mono); font-size: 10.5px; color: #EFC77E; }
.med-plus { align-self: flex-start; padding: 4px 11px; font-size: 12px; }
.med-track { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; height: 4px; background: rgba(18,14,8,.5); }
.med-track .bar-fill, .med-track > * { height: 100%; }
.med-sentinel { height: 2px; }
.med-empty { grid-column: 1 / -1; }

/* ---- list layout — a robust flex row (cover · main · side) ---- */
.med-list { display: flex; flex-direction: column; gap: 6px; }
.med-row {
  display: flex; align-items: center; gap: 13px;
  padding: 8px 14px 8px 10px; cursor: pointer;
  background: var(--bg1);
  border: 1px solid var(--line2);
  border-radius: 11px;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.med-row:hover, .med-row:focus-visible { border-color: var(--line); box-shadow: var(--shadow-sm); outline: none; }
.med-row-fav { flex: none; width: 12px; color: #C97B6B; font-size: 12px; text-align: center; }
.med-row-cover { flex: none; width: 34px; height: 48px; overflow: hidden; border-radius: 5px; background: var(--well); display: flex; align-items: center; justify-content: center; font-family: var(--jp); font-size: 16px; color: var(--muted); }
.med-row-cover > img { width: 100%; height: 100%; display: block; }
.med-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.med-row-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-row-genres { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.med-row-side { flex: none; display: flex; align-items: center; gap: 10px; }
.med-row-side .med-prog { min-width: 54px; text-align: right; }
.med-plus-gap { display: none; }
@media (max-width: 860px) { .med-row-genres { display: none; } .med-row-side .med-quick { display: none; } }

/* ---- inline quick-edit + push chips ---- */
.med-quickrow { margin-top: 2px; max-height: 0; opacity: 0; overflow: hidden; pointer-events: none; transition: max-height .2s, opacity .2s; }
.med-card:hover .med-quickrow, .med-card:focus-within .med-quickrow,
.med-row .med-quickrow { max-height: 40px; opacity: 1; pointer-events: auto; overflow: visible; }
.med-quick { display: inline-flex; align-items: center; gap: 5px; }
.med-qsel { min-height: var(--control-h-xs); font-size: 10.5px; padding: 3px 6px; max-width: 118px; }
.med-qscore { min-height: var(--control-h-xs); font-size: 10.5px; padding: 3px 4px; width: 52px; text-align: center; font-family: var(--mono); }
.med-row .med-qsel { max-width: 104px; }
.med-push-fail { --chip: var(--danger); cursor: pointer; border: none; font: inherit; font-weight: 700; }
.med-push-fail:hover { filter: brightness(1.15); }
.med-push-pending { --chip: var(--muted); opacity: .8; }
.an-airing { --chip: var(--good); font-weight: 700; white-space: nowrap; }

/* ---- editor modal: a proper form ---- */
.med-modal { --modal-max: 760px; }
.med-form { grid-template-columns: 1fr 1fr; column-gap: var(--grid-gap); padding: 4px 0 14px; }
.med-form > * { grid-column: 1 / -1; }
.med-form > .med-field { grid-column: auto; }
.med-form-row { display: flex; gap: 12px; flex-wrap: wrap; grid-column: 1 / -1; }
.med-form-row .med-field { flex: 1 1 130px; }
.med-field .k { letter-spacing: .12em; }
.med-num { max-width: 110px; }
.med-favwrap { display: flex; align-items: center; height: 34px; }
.med-favwrap input { width: 18px; height: 18px; accent-color: var(--danger); }
.med-modal-foot { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line2); }
.modal-h .sub { max-width: 420px; }

/* editor sub-sections (routes / chapters / quotes / physical vault) */
.vn-routes, .vn-cg, .vn-quotes, .vn-chapters, .bk-phys {
  grid-column: 1 / -1;
  border: 1px solid var(--line2); border-radius: 12px;
  background: var(--panel);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.vn-sec-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vn-sec-h b { font-family: var(--serif); font-size: 15px; font-weight: 600; }
.vn-route-row, .vn-ch-row { display: flex; align-items: center; gap: 8px; }
.vn-route-row.cleared .vn-route-name { color: var(--muted); text-decoration: line-through; }
.vn-ch-row.cleared .vn-route-name { color: var(--muted); }
.vn-route-done { display: flex; align-items: center; }
.vn-route-name { flex: 1; font-size: 13px; }
.vn-route-date { font-family: var(--mono); font-size: 10px; white-space: nowrap; color: var(--muted); }
.vn-route-del { color: var(--muted); }
.vn-route-add { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.vn-route-add .vn-route-name { flex: 1; }
.vn-ch-row .vn-route-name { flex: 1.2; min-width: 0; }
.vn-ch-status { flex: 0 0 auto; }
.vn-ch-note { flex: 1; min-width: 0; font-size: 12.5px; }
.vn-id { max-width: 110px; font-family: var(--mono); }
.vn-length { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.vn-cw { --chip: var(--warning); font-weight: 700; }
.vn-quote { border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); padding: 7px 11px; background: var(--wash-accent); border-radius: 0 8px 8px 0; display: flex; flex-direction: column; gap: 4px; }
.vn-quote-text { margin: 0; font-family: var(--serif); font-size: 13.5px; line-height: 1.55; font-style: italic; }
.vn-quote-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vn-quote-meta .sub { flex: 1; }
.vn-quote-add { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.vn-quote-in { font-family: var(--serif); }
.vn-stats, .bk-stats, .gm-stats, .an-stats { margin-top: 26px; }

/* ---- find-new modal + hero picker ---- */
.msch-modal { --modal-max: 660px; display: flex; flex-direction: column; gap: 10px; }
.msch-in { font-size: 14px; padding: 10px 14px; border-radius: 999px; }
.msch-note { min-height: 16px; margin: 0; }
.msch-results { display: flex; flex-direction: column; gap: 8px; max-height: 56vh; overflow-y: auto; padding-right: 4px; }
.msch-row { display: flex; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line2); border-radius: 10px; background: var(--panel); transition: border-color .15s; cursor: pointer; }
.msch-row:hover { border-color: var(--accent); }
.msch-row.msch-added { opacity: .55; }
.msch-cover { flex: 0 0 46px; width: 46px; height: 66px; overflow: hidden; object-fit: cover; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--well); }
.msch-cover > img { width: 100%; height: 100%; display: block; }
.msch-body { flex: 1; min-width: 0; }
.msch-title { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msch-act { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.msch-picker { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 260px; }
.msch-status { font-size: 10px; padding: 4px 8px; border-left: 3px solid var(--chip, var(--line)); }
.msch-add { font-size: 12px; }

/* ---- sync & import ---- */
.med-panel { margin-bottom: 16px; }
.med-panel h3 { margin-top: 0; }

/* ---- Sync & Import: one quiet integration system ---- */
.integration-intro { display: flex; align-items: center; gap: var(--space-3); max-width: 720px; margin: 0 0 var(--section-gap); }
.integration-intro p { margin: 0; }
.integration-rule { width: 34px; height: 1px; flex: none; background: var(--accent); }
.integration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--grid-gap); align-items: start; margin-bottom: var(--section-gap); }
.sync-card { padding: 0; overflow: hidden; }
.sync-head {
  display: flex; align-items: center; gap: 13px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel));
}
.sync-glyph {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-family: var(--jp, var(--serif)); font-size: 20px; line-height: 1;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 26%, transparent);
}
.sync-head-txt { flex: 1 1 auto; min-width: 0; }
.sync-title { margin: 0; font-size: 16px; line-height: 1.2; }
.sync-kicker { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; letter-spacing: .02em; }
.sync-pill {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  color: var(--pill); background: color-mix(in srgb, var(--pill) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--pill) 32%, transparent);
}
.sync-card > *:not(.sync-head) { margin-left: 18px; margin-right: 18px; }
.sync-card > *:not(.sync-head):last-child { margin-bottom: 16px; }
.integration-provider { min-width: 0; background: var(--surface-elevated); }
.integration-provider .sync-head { background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--surface-elevated)), var(--surface-elevated) 72%); }
.integration-vndb .sync-glyph { color: var(--c-it); background: color-mix(in srgb, var(--c-it) 12%, transparent); border-color: color-mix(in srgb, var(--c-it) 30%, transparent); }
.integration-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 14px 0 4px; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); }
.integration-facts > div { min-width: 0; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--line2) 72%, transparent); }
.integration-facts > div:nth-last-child(-n + 1) { border-bottom: none; }
.integration-facts dt { color: var(--muted); font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.integration-facts dd { min-width: 0; margin: 3px 0 0; overflow-wrap: anywhere; font-size: 12.5px; font-weight: 600; }
.integration-facts > div:nth-child(odd) { padding-right: var(--space-3); }
.integration-facts > div:nth-child(even) { padding-left: var(--space-3); border-left: 1px solid var(--line2); }
.sync-card .med-conn-ok, .sync-card .med-impmode, .sync-card .lab-controls { margin-top: 12px; }
.sync-info {
  margin: 12px 0 0; overflow: hidden;
}
.sync-info-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 4px 0; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 12px; color: var(--text2); text-align: left;
}
.sync-info-toggle:hover { color: var(--text); }
.sync-info-ico { color: var(--accent); }
.sync-info-caret { margin-left: auto; transition: transform .18s; color: var(--muted); }
.sync-info.open .sync-info-caret { transform: rotate(180deg); }
.sync-info-body {
  margin: 0; padding: 0 12px;
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .28s ease, opacity .2s, padding .2s;
}
.sync-info.open .sync-info-body { max-height: 400px; opacity: 1; padding: 5px 0 0; }

.med-conn-ok { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.med-sync-status { min-height: 1.4em; font-family: var(--mono); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.med-sync-status.is-error { padding: 8px 10px; border-left: 3px solid var(--danger); color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.med-enrich-track { margin: 10px 0; }
.med-impmode { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 10px 0 2px; }
.med-impmode-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.med-impmode-opt input { accent-color: var(--accent); }
.med-wlog { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.med-wlog-row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 3px 8px; padding: 8px 0; border-bottom: 1px solid var(--line2); }
.med-wlog-row:last-child { border-bottom: none; }
.med-wlog-row.bad { border-left: 3px solid var(--danger); }
.med-wlog-t { min-width: 0; font-size: 12.5px; overflow-wrap: anywhere; }
.med-wlog-row .sub { grid-column: 2; min-width: 0; overflow-wrap: anywhere; }
.sync-history { margin-top: 12px; border-top: 1px solid var(--line2); }
.sync-history > summary { padding: 10px 0; color: var(--text2); cursor: pointer; font-size: 12px; font-weight: 600; }
.sync-history > summary::marker { color: var(--accent); }
.sync-history .sub:last-child { margin-bottom: 0; }
@media (max-width: 840px) { .integration-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .integration-facts { grid-template-columns: 1fr; } .integration-facts > div:nth-child(even) { padding-left: 0; border-left: 0; } }

/* ---- matrix home ---- */
.med-streaks { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.med-rest.lit { border-color: color-mix(in srgb, var(--c-maths) 50%, transparent); color: var(--c-maths); background: color-mix(in srgb, var(--c-maths) 8%, var(--bg1)); }
.med-strip { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 14px; scrollbar-width: thin; }
.med-strip-card {
  position: relative; flex: 0 0 112px; cursor: pointer;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .15s, box-shadow .15s;
}
.med-strip-card:hover, .med-strip-card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-md); outline: none; }
.med-strip-cover { position: relative; display: block; width: 100%; aspect-ratio: 2 / 3; overflow: hidden; flex: none; }
.med-strip-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.med-strip-card .med-cover-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 30px; }
.med-strip-mod { position: absolute; top: 6px; left: 6px; font-family: var(--jp); font-size: 11px; background: rgba(20,16,10,.6); color: #EFC77E; border-radius: 6px; padding: 2px 6px; backdrop-filter: blur(3px); }
.med-strip-t { font-size: 11px; font-weight: 600; line-height: 1.3; padding: 7px 9px 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; }
.med-strip-p { font-family: var(--mono); font-size: 9.5px; color: var(--muted); padding: 0 9px 8px; }
.med-strip-track { display: block; height: 3px; background: var(--well); }
.med-strip-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.med-mods { margin-top: 18px; }
.med-mod-card { cursor: pointer; }
.med-home-card { position: relative; }

.collection-crumbs { margin-bottom: var(--space-2); }
.collection-workspace-tabs { margin-bottom: var(--section-gap); }

/* airing soon — cover cards */
.mx-airing .n-h { display: flex; align-items: center; gap: 10px; }
.mx-air-season { font-size: 10px; }
.mx-air-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin: 10px 0 var(--section-gap); }
.mx-air-card {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  cursor: pointer;
  transition: transform .15s, border-color .15s;
}
.mx-air-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--good) 45%, var(--line2)); }
.mx-air-cover { flex: none; width: 38px; height: 54px; overflow: hidden; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--well); }
.mx-air-cover > img { width: 100%; height: 100%; display: block; }
.mx-air-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-air-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mx-air-when { display: flex; align-items: baseline; gap: 2px; }
.mx-air-count { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--good); }

/* ---- the Shrine ---- */
.shrine-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; }
.shrine-card {
  position: relative; cursor: pointer;
  border-radius: 14px; overflow: hidden;
  background: var(--bg1);
  border: 1px solid color-mix(in srgb, var(--accent2) 30%, var(--line2));
  box-shadow: var(--shadow-sm);
  transition: transform .18s, box-shadow .18s;
}
.shrine-card:hover, .shrine-card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); outline: none; }
.shrine-card.top { border-color: var(--accent2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent2) 16%, transparent), var(--shadow-sm); }
.shrine-rank {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  min-width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-family: var(--serif); font-weight: 700; font-size: 12px;
  color: #FCFAF4; background: rgba(20,16,10,.55);
  backdrop-filter: blur(4px); padding: 0 6px;
}
.shrine-card.top .shrine-rank { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 60%, #fff)); color: #3A2E12; }
.shrine-body { padding: 10px 12px 12px; }
.shrine-card-btn {
  position: absolute; top: 8px; right: 8px; z-index: 3;
  border: none; cursor: pointer;
  font-family: var(--serif); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: 999px;
  color: #FCFAF4; background: rgba(20,16,10,.5);
  backdrop-filter: blur(4px);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .18s, transform .18s, background .18s;
}
.shrine-card:hover .shrine-card-btn, .shrine-card:focus-within .shrine-card-btn { opacity: 1; transform: none; }
.shrine-card-btn:hover { background: color-mix(in srgb, var(--accent2) 82%, #000); }

/* ---- Shrine collector card ---- */
.shrine-card-modal { --modal-max: 380px; }
.shrine-card-preview {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; padding: 6px 2px 12px;
}
.shrine-card-img {
  width: 100%; max-width: 320px; height: auto;
  border-radius: 16px;
  box-shadow: var(--shadow-md), 0 0 0 1px color-mix(in srgb, var(--accent2) 40%, transparent);
}
.shrine-card-actions { display: flex; flex-direction: column; gap: 10px; }
.shrine-card-actions .todo-in { width: 100%; }
.shrine-card-actions .lab-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.shrine-card-actions .lab-controls .btn { flex: 1 1 auto; }

/* ---- Books ---- */
.bk-author { font-size: 10.5px; color: rgba(245,239,226,.75); font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: -3px; }
.med-row .bk-author { color: var(--muted); }
.bk-fmt { --chip: var(--accent2); }
.bk-dnf { --chip: #9A8F7B; text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-owned-line { font-family: var(--mono); font-size: 10px; color: #EFC77E; }
.bk-dual { position: relative; height: 7px; background: rgba(18,14,8,.5); overflow: hidden; }
.bk-dual-own, .bk-dual-read { position: absolute; left: 0; display: block; }
.bk-dual-own { top: 0; height: 3px; background: linear-gradient(90deg, var(--accent2), #E8CF96); }
.bk-dual-read { bottom: 0; height: 3px; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
.bk-tabs { display: flex; gap: 8px; margin: 2px 0 12px; }
.bk-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 12px;
  border: 1px solid var(--line2); border-radius: 12px;
  background: var(--bg1);
  color: var(--text2); cursor: pointer; text-align: left;
  transition: all .15s;
}
.bk-tab:hover { border-color: var(--line); }
.bk-tab.active { color: var(--text); border-color: color-mix(in srgb, var(--accent2) 55%, transparent); background: var(--wash-brass); }
.bk-tab-k { font-family: var(--jp); font-size: 20px; color: var(--accent2); }
.bk-tab > span:last-child { display: flex; flex-direction: column; gap: 1px; }
.bk-tab b { font-size: 13.5px; }
.bk-tab-hint { font-size: 10.5px; color: var(--muted); }
.bk-stars { display: flex; align-items: center; gap: 2px; height: 34px; cursor: pointer; border-radius: 8px; padding: 0 4px; }
.bk-star { position: relative; font-size: 20px; line-height: 1; color: var(--line); transition: color .15s; user-select: none; }
.bk-star.full { color: var(--accent2); }
.bk-star.half { background: linear-gradient(90deg, var(--accent2) 50%, var(--line) 50%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.bk-stars-val { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-left: 6px; }
.bk-modal { --modal-max: 780px; }
.bk-grow { flex: 2 1 220px !important; }
.bk-dnf-row { align-items: flex-end; }
.bk-phys-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bk-vol-list { display: flex; flex-direction: column; gap: 5px; max-height: 220px; overflow-y: auto; padding-right: 4px; }
.bk-vol-row { display: grid; grid-template-columns: 64px minmax(90px, 1fr) minmax(120px, 1fr) 84px auto auto; gap: 6px; align-items: center; }
.bk-vol-n { font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text2); border-left: 3px solid var(--spine, var(--accent)); padding-left: 7px; }
.bk-vol-cond, .bk-vol-date, .bk-vol-price { font-size: 11px; }
.bk-vol-price { max-width: 84px; }
.bk-vol-del { color: var(--muted); }
.bk-vol-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bk-vol-add-sep { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.bk-vol-add .med-num { max-width: 70px; }
@media (max-width: 700px) { .bk-vol-row { grid-template-columns: 52px 1fr 1fr; } }
.bk-compare { border: 1px solid color-mix(in srgb, var(--accent2) 35%, var(--line2)); border-radius: 10px; padding: 10px 12px; margin-bottom: 4px; background: var(--wash-brass); grid-column: 1 / -1; }
.bk-compare-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bk-compare-none { margin: 0; }
.bk-compare-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.bk-compare-k { flex: 0 0 52px; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.bk-compare-track { flex: 1; height: 8px; border-radius: 4px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.bk-compare-fill { display: block; height: 100%; border-radius: 4px; transition: width .3s; }
.bk-compare-fill.own { background: linear-gradient(90deg, var(--accent2), #E4C98D); }
.bk-compare-fill.read { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #fff)); }
.bk-compare-v { flex: 0 0 auto; font-size: 11px; color: var(--muted); font-family: var(--mono); }
.bk-isbn-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.bk-isbn-in { flex: 1; font-family: var(--mono); }
.bk-scan { margin-top: 10px; border: 1px solid var(--line2); border-radius: 10px; overflow: hidden; background: #16130D; }
.bk-scan-video { display: block; width: 100%; max-height: 260px; object-fit: cover; }
.bk-scan-hint { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 11px; color: var(--muted); background: var(--well); }
.bk-scan-none { margin: 6px 0 0; }
.bk-src-chip { --chip: var(--accent2); margin-top: 4px; display: inline-block; }
.bk-lookup { display: flex; flex-direction: column; gap: 6px; }
.bk-rs-modal { --modal-max: 520px; }
.bk-rs-grow { flex: 1; min-width: 0; }
.bk-rs-book { max-width: 100%; }
.fx-stage.fx-reading .fx-kanji { color: var(--accent2); }
.bk-rank-row { display: flex; align-items: center; gap: 8px; border-radius: 8px; transition: background .15s; }
.bk-rank-row .med-row { flex: 1; min-width: 0; }
.bk-rank-row.dragging { opacity: .45; }
.bk-rank-row.dragover { background: var(--wash-brass); box-shadow: inset 0 2px 0 var(--accent2); }
.bk-rank-n { flex: 0 0 26px; text-align: right; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent2); }
.bk-rank-grip { flex: 0 0 auto; cursor: grab; color: var(--muted); font-size: 13px; padding: 0 2px; user-select: none; }
.bk-rank-ctl { display: inline-flex; gap: 3px; }
.bk-heat { margin-top: 14px; }
.bk-heat svg { max-width: 100%; height: auto; }

/* the physical bookshelf */
.bk-shelves { display: flex; flex-direction: column; gap: 26px; }
.bk-shelf-series { min-width: 0; }
.bk-shelf-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bk-shelf {
  position: relative; display: flex; align-items: flex-end; gap: 3px;
  overflow-x: auto; padding: 6px 10px 12px; min-height: 132px;
  background: linear-gradient(180deg, transparent 55%, rgba(94,72,40,.14));
  border-radius: 10px; border: 1px solid var(--line2);
}
.bk-shelf-board { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(180deg, #B08A5E, #8A6A44); border-top: 1px solid rgba(255,244,214,.5); border-radius: 0 0 10px 10px; }
.bk-spine {
  position: relative; flex: 0 0 26px; height: 116px; cursor: pointer;
  border-radius: 2px 2px 0 0; z-index: 1;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--spine) 68%, black) 0%, var(--spine) 18%,
    color-mix(in srgb, var(--spine) 82%, white) 50%, var(--spine) 82%,
    color-mix(in srgb, var(--spine) 60%, black) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.14), 2px 0 3px rgba(70,50,20,.3);
  display: flex; flex-direction: column; align-items: center; overflow: hidden;
  transition: transform .15s;
}
.bk-spine:hover { transform: translateY(-6px); }
.bk-spine-n { font-family: var(--mono); font-size: 8.5px; font-weight: 700; color: rgba(255,255,255,.92); background: rgba(0,0,0,.3); width: 100%; text-align: center; padding: 3px 0; }
.bk-spine-t { flex: 1; writing-mode: vertical-rl; font-size: 8.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.88); padding: 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-spine-img { flex: 0 0 auto; aspect-ratio: 2 / 3; padding: 0; background: var(--well); }
.bk-spine-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bk-spine-cond { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; }
.bk-spine-cond.worn { background: var(--warning); }
.bk-spine-cond.damaged { background: var(--danger); }
/* shelf skins */
.bk-shelves.shelf-walnut .bk-shelf { background: linear-gradient(180deg, rgba(96,64,38,.12) 40%, rgba(64,40,22,.35)); border-color: rgba(122,86,50,.4); }
.bk-shelves.shelf-walnut .bk-shelf-board { background: linear-gradient(180deg, #5d3d24, #3a2514); border-top-color: rgba(220,170,110,.5); }
.bk-shelves.shelf-lacquer .bk-shelf { background: linear-gradient(180deg, transparent 45%, rgba(20,16,10,.6)); border-color: color-mix(in srgb, var(--accent2) 40%, transparent); }
.bk-shelves.shelf-lacquer .bk-shelf-board { background: linear-gradient(180deg, #241E14, #14100A); border-top-color: var(--accent2); }
.bk-shelves.shelf-vermilion .bk-shelf { background: linear-gradient(180deg, rgba(176,64,50,.1) 40%, rgba(140,42,32,.3)); border-color: rgba(176,64,50,.45); }
.bk-shelves.shelf-vermilion .bk-shelf-board { background: linear-gradient(180deg, #96382C, #5E1F17); border-top-color: rgba(255,170,150,.5); }

/* Mangaka pages */
.mk-wall { display: flex; flex-direction: column; gap: 16px; }
.mk-card { padding: 14px 16px; }
.mk-h { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mk-mark { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 700; font-size: 17px; color: #fff; background: radial-gradient(circle at 30% 28%, color-mix(in srgb, var(--spine) 80%, white), var(--spine)); }
.mk-name { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.mk-works { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.mk-work { display: flex; gap: 9px; align-items: center; cursor: pointer; padding: 6px; border-radius: 9px; border: 1px solid transparent; transition: all .15s; }
.mk-work:hover, .mk-work:focus-visible { border-color: var(--line2); background: var(--panel); outline: none; }
.mk-work-cover { flex: 0 0 34px; width: 34px; height: 50px; overflow: hidden; border-radius: 4px; }
.mk-work-cover img { width: 100%; height: 100%; display: block; }
.mk-ph { flex: 0 0 34px; width: 34px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 4px; background: color-mix(in srgb, var(--spine, var(--accent)) 20%, var(--panel)); }
.mk-work-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-work-t { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- games ---- */
.gm-plat { --chip: var(--c-maths); }
.gm-tier { --chip: var(--accent2); }
.gm-prio { font-family: var(--mono); font-size: 10px; color: var(--muted); }
.gm-bulk-modal { --modal-max: 560px; }
.gm-bulk-in { width: 100%; min-height: 180px; font-family: var(--mono); font-size: 12.5px; }
.gm-steamlink { font-size: 12px; }
.gm-charts { margin-top: 14px; }
.gm-cover-note { font-size: 11px; color: var(--muted); }

/* ---- seasonal ---- */
.season-view { --season: var(--accent); --accent: var(--season); }
.season-view.s-winter { --season: #5F7FBF; }
.season-view.s-spring { --season: #6F9A5E; }
.season-view.s-summer { --season: #C0912F; }
.season-view.s-fall   { --season: #B5573F; }
.season-hero {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--hero-pad-block) var(--hero-pad-inline);
  margin-bottom: var(--section-gap);
  border: 1px solid color-mix(in srgb, var(--season) 35%, transparent);
  background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--season) 13%, transparent), transparent 55%), var(--bg1);
  box-shadow: var(--shadow-md);
}
.season-hero h1 { margin: 0 0 4px; font-size: var(--type-hero-title); }
.season-kanji { font-family: var(--jp); color: var(--season); }
.season-picker { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.season-picker .status-sel, .season-picker .todo-in { width: auto; }
.season-yr { max-width: 92px; }
.season-view .med-card { border-color: color-mix(in srgb, var(--season) 20%, var(--line2)); }

/* ---- connected profiles: banner as identity, sections as one reading surface ---- */
.ap-body { display: flex; flex-direction: column; gap: var(--section-gap); max-width: var(--content-wide); }
.ap-head { position: relative; border: 1px solid var(--line2); background: var(--well); background-size: cover; background-position: center; box-shadow: var(--shadow-md); }
.ap-head-scrim { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--hero-pad-block) var(--hero-pad-inline); min-height: var(--hero-min-h); background: linear-gradient(180deg, rgba(18,14,8,.22), rgba(18,14,8,.78)); }
.ap-avatar { width: 92px; height: 92px; flex: none; overflow: hidden; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255,251,240,.85); box-shadow: var(--shadow-lg); font-size: 36px; display: flex; align-items: center; justify-content: center; }
.ap-avatar-media > img { width: 100%; height: 100%; display: block; }
.ap-id { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0; }
.ap-id-top { display: flex; align-items: center; gap: 12px; }
.ap-name { font-family: var(--serif); font-size: var(--type-hero-title); color: #FBF7EC; text-shadow: 0 1px 10px rgba(0,0,0,.6); line-height: 1.05; }
.ap-since { color: rgba(251,247,236,.82); font-size: 13px; }
.ap-sitelink { color: rgba(251,247,236,.9); font-size: 12.5px; border: 1px solid rgba(251,247,236,.35); border-radius: 999px; padding: 3px 12px; text-decoration: none; background: rgba(18,14,8,.3); margin-top: 3px; }
.ap-sitelink:hover { border-color: rgba(251,247,236,.7); }
.ap-unread { font-weight: 700; color: #FBF7EC; }
.ap-headstats { display: flex; gap: 0; margin-left: auto; align-self: stretch; align-items: center; }
.ap-hstat { min-width: 70px; text-align: center; padding: 6px 11px; border-left: 1px solid rgba(251,247,236,.18); }
.ap-hstat:first-child { border-left: none; }
.ap-hstat b { display: block; font-family: var(--serif); font-size: 24px; color: #FBF7EC; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
.ap-hstat span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(251,247,236,.72); }
@media (max-width: 860px) { .ap-headstats { display: none; } .ap-avatar { width: 76px; height: 76px; } .ap-name { font-size: 23px; } }
.ap-sec { margin: 0; padding: 0 0 var(--section-gap); border-bottom: 1px solid var(--line2); }
.ap-sec:last-child { padding-bottom: 0; border-bottom: none; }
.ap-sec .vn-sec-h { margin-bottom: var(--space-3); }
.ap-actions { gap: var(--space-2); margin: 0; padding-bottom: var(--space-2); border-bottom: 1px solid var(--line2); }
.ap-actions .btn { min-height: 32px; }
.ap-fetched { margin-left: auto; color: var(--muted); font-family: var(--mono); font-size: 10.5px; white-space: nowrap; }
.ap-about-card { max-width: 780px; padding: var(--space-4) var(--space-5); background: linear-gradient(135deg, var(--surface-elevated), var(--surface-card)); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-card) var(--radius-card) 0; }
.ap-about { margin: 0; white-space: pre-wrap; font-size: 14px; line-height: 1.7; max-height: 260px; overflow-y: auto; }
.ap-analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); align-items: stretch; }
.ap-analytics-grid .cs-chart { display: flex; min-width: 0; min-height: 252px; flex-direction: column; }
.ap-analytics-grid .cs-chart > svg { margin-top: auto; }
.ap-analytics-grid .donut-wrap { flex: 1; align-items: center; }
.ap-state { display: flex; min-height: 180px; flex-direction: column; justify-content: center; gap: var(--space-2); padding: var(--space-5); border: 1px dashed var(--line); border-radius: var(--radius-card); text-align: center; }
.workspace-header-tabs,
.profile-workspace-tabs { flex: 0 1 auto; margin: 0; align-self: center; }
.dash-head .workspace-header-tabs,
.dash-head .profile-workspace-tabs { max-width: min(100%, 470px); }
@media (max-width: 1120px) { .ap-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .ap-analytics-grid { grid-template-columns: 1fr; } .ap-fetched { width: 100%; margin-left: 0; } .workspace-header-tabs, .profile-workspace-tabs { width: 100%; } }
.ap-favs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px; }
.ap-fav { flex: 0 0 92px; display: flex; flex-direction: column; gap: 5px; }
.ap-fav img, .ap-fav .med-cover-ph { width: 92px; height: 130px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line2); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.ap-fav-round img, .ap-fav-round .med-cover-ph { height: 92px; border-radius: 50%; }
.ap-fav-t { font-size: 10.5px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-studios { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-users { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.ap-user { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border: 1px solid var(--line2); border-radius: 999px; background: var(--panel); color: var(--text); text-decoration: none; font-size: 11.5px; }
.ap-user:hover { border-color: var(--accent); }
.ap-user img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.ap-row { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; border-radius: 8px; background: var(--well); margin-top: 5px; }
.ap-row-t { font-size: 12.5px; flex: 1; min-width: 0; }
.ap-act { align-items: center; }
.ap-act-img { width: 26px; height: 36px; object-fit: cover; border-radius: 4px; flex: 0 0 26px; }
.ap-tabs { margin-top: 14px; }
.ap-pane { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.ap-loading { padding: 10px 0; }
.vp-head { background: radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--c-it) 45%, transparent), transparent 60%), linear-gradient(135deg, #3A3040, #2A2432); }
.vp-avatar { display: inline-flex; align-items: center; justify-content: center; font-family: var(--jp); font-size: 52px; color: #E8DFF2; background: rgba(255,255,255,.1); border-radius: 16px; }
.vp-label-stats { margin-bottom: 0; }
.vp-label-stats .stat-card { min-width: 132px; border-top: 3px solid var(--label-color); background: color-mix(in srgb, var(--label-color) 10%, var(--surface-card)); }

/* ---- topic comparison: a study ledger, not two squeezed articles ---- */
.cmp-modal { --modal-max: 1320px; box-sizing: border-box; width: min(1320px, calc(100vw - 32px)); height: min(88vh, 980px); max-height: min(88vh, 980px); display: flex; flex-direction: column; overflow: hidden; }
.cmp-modal .modal-h { align-items: end; flex: 0 0 auto; }
.cmp-modal .modal-h > div:first-child { display: flex; flex-direction: column; gap: 3px; }
.cmp-selectors { display: grid; grid-template-columns: minmax(220px, 1fr) auto minmax(220px, 1fr); gap: 8px; flex: 1 1 600px; min-width: 0; }
.cmp-selectors .status-sel { min-width: 0; width: 100%; }
.cmp-sticky-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; flex: 0 0 auto; background: var(--surface-border); border: 1px solid var(--surface-border); border-radius: var(--radius-card); overflow: hidden; }
.cmp-topic { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: var(--space-4) var(--space-5); background: var(--surface-elevated); }
.cmp-topic b { font-family: var(--serif); font-size: 18px; line-height: 1.2; }
.cmp-code { color: var(--accent); font-family: var(--mono); font-size: 11px; font-weight: 700; }
.cmp-metrics { display: flex; flex-wrap: wrap; gap: 5px 12px; margin-top: 5px; color: var(--muted); font-size: 11px; }
.cmp-tabs { display: flex; flex: 0 0 auto; width: 100%; margin: var(--space-4) 0; overflow-x: auto; }
.cmp-tabs .study-tab { flex: 0 0 auto; }
.cmp-body { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: var(--space-3); overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding-right: 2px; }
.cmp-signals { display: flex; flex-wrap: wrap; gap: 8px; }
.cmp-signal { padding: 4px 9px; border-radius: 999px; background: var(--wash-accent); color: var(--text2); font-size: 11px; }
.cmp-row { flex: 0 0 auto; min-height: max-content; border: 1px solid var(--surface-border); border-radius: var(--radius-card); background: var(--surface-card); overflow: clip; }
.cmp-row > summary { padding: 11px var(--space-4); cursor: pointer; color: var(--text); font-family: var(--serif); font-size: 16px; }
.cmp-row-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--surface-border); }
.cmp-cell { min-width: 0; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--surface-border); }
.cmp-cell:first-child { border-left: 0; }
.cmp-cell-label { display: block; margin-bottom: var(--space-3); color: var(--accent); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cmp-cell p { max-width: 66ch; margin: 0 0 8px; line-height: 1.55; }
.cmp-cell .notes-article { max-width: 66ch; font-size: 13px; }
.cmp-term { display: grid; grid-template-columns: minmax(100px, .35fr) 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line2); font-size: 12px; }
.cmp-term.shared { margin-inline: -6px; padding-inline: 6px; background: color-mix(in srgb, var(--good) 10%, transparent); }
.cmp-question { display: flex; flex-direction: column; gap: 4px; padding: 9px 0; border-bottom: 1px solid var(--line2); font-size: 12px; }
.cmp-question b { color: var(--accent); font-family: var(--mono); font-size: 10px; text-transform: uppercase; }
.cmp-progress { display: flex; flex-direction: column; gap: 6px; }
.cmp-actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: 8px; padding-top: var(--space-4); }
.cmp-note-modal { width: min(580px, calc(100vw - 32px)); }
.cmp-note-modal .note-area { width: 100%; min-height: 180px; resize: vertical; }
@media (max-width: 1040px) { .cmp-modal .modal-h { align-items: stretch; } .cmp-selectors { flex-basis: 100%; order: 3; } .cmp-row-cells, .cmp-sticky-head { grid-template-columns: 1fr; } .cmp-cell { border-left: 0; border-top: 1px solid var(--surface-border); } .cmp-cell:first-child { border-top: 0; } }
@media (max-width: 560px) { .cmp-selectors { grid-template-columns: 1fr; } .cmp-selectors .btn { width: 100%; } }

/* ============================================================
   円 Budget Planner — allowance panel + hero + rows (Sol)
   ============================================================ */
.wl-top { display: grid; grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 410px); gap: var(--grid-gap); align-items: stretch; margin: 4px 0 var(--section-gap); }
@media (max-width: 1100px) { .wl-top { grid-template-columns: 1fr; } }
.wl-hero-wrap { min-width: 0; display: flex; }
.wl-hero-wrap .wl-hero { flex: 1; margin-bottom: 0; }
.wl-hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: clamp(390px, 40vw, 540px); padding: clamp(26px, 4vw, 52px);
  border: 1px solid color-mix(in srgb, var(--accent, var(--accent2)) 32%, var(--surface-border));
  background: radial-gradient(100% 120% at 100% 0%, color-mix(in srgb, var(--accent, var(--accent2)) 16%, transparent), transparent 60%), var(--surface-card);
  box-shadow: var(--shadow-md);
}
.wl-hero.has-banner { color: var(--text); }
.wl-hero-empty { min-height: clamp(300px, 33vw, 390px); align-items: center; }
.wl-hero-badge { position: absolute; top: var(--space-5); left: clamp(26px, 4vw, 52px); z-index: 1; font-size: var(--type-label); letter-spacing: .17em; text-transform: uppercase; font-weight: 700; color: var(--accent, var(--accent2)); }
.wl-hero-badge::after { content: ""; display: inline-block; width: 24px; height: 2px; margin-left: 8px; border-radius: 2px; vertical-align: middle; background: currentColor; }
.wl-hero-body { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-3); width: min(100%, 720px); min-width: 0; padding-top: 38px; }
.wl-hero-status { color: var(--accent, var(--accent2)); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wl-hero-tags, .wl-row-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wl-priority-pill { padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid color-mix(in srgb, var(--accent, var(--accent2)) 38%, transparent); background: color-mix(in srgb, var(--accent, var(--accent2)) 10%, transparent); color: var(--text2); font-size: 10.5px; font-weight: 700; }
.wl-hero-title { max-width: 22ch; margin: 0; font-family: var(--serif); font-size: clamp(31px, 4vw, 54px); line-height: 1.02; letter-spacing: -.025em; overflow-wrap: anywhere; }
.wl-hero-meta, .wl-hero-note { max-width: 62ch; margin: 0; color: var(--text2); font-size: 14px; line-height: 1.5; }
.wl-hero-note { padding: var(--space-3) var(--space-4); border-left: 2px solid color-mix(in srgb, var(--accent, var(--accent2)) 72%, transparent); background: color-mix(in srgb, var(--bg0) 20%, transparent); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.wl-hero-facts { display: flex; flex-wrap: wrap; gap: var(--space-4) clamp(20px, 3vw, 38px); margin: var(--space-2) 0 0; }
.wl-hero-facts div { min-width: min(120px, 100%); }
.wl-hero-facts dt, .wl-row-price .k, .wl-history-total .k { color: var(--muted); font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wl-hero-facts dd { margin: 3px 0 0; color: var(--text); font-family: var(--serif); font-size: 17px; font-weight: 600; }
.wl-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.wl-hero.has-banner .wl-hero-actions .btn:not(.primary) { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, transparent); background: color-mix(in srgb, var(--bg0) 26%, transparent); }
.wl-hero-ph { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--surface-border); border-radius: 50%; background: var(--well); color: var(--muted); font-family: var(--jp); font-size: 28px; }

.wl-budget { min-height: 100%; padding: clamp(18px, 2.1vw, 28px); margin: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.wl-sum-h { display: block; margin: 0 0 4px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.wl-budget-head, .wl-queue-head, .wl-history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.wl-budget-head h2, .wl-queue-head h2, .wl-history-head h2 { margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.16; }
.wl-budget-edit { flex: none; white-space: nowrap; }
.wl-allowance-main { display: grid; gap: 2px; padding: var(--space-4) 0 var(--space-3); border-bottom: 1px solid var(--line2); }
.wl-allowance-main .k { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.wl-allowance-main b { color: var(--accent); font-family: var(--serif); font-size: clamp(31px, 3.2vw, 42px); line-height: 1; }
.wl-allowance-main .sub { font-size: 12px; line-height: 1.45; }
.wl-ledger { display: flex; flex-direction: column; }
.wl-ledger-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid var(--line2); }
.wl-ledger-copy { min-width: 0; display: grid; gap: 2px; }
.wl-ledger-label { color: var(--text); font-size: 13px; font-weight: 650; }
.wl-ledger-detail { color: var(--muted); font-size: 11.5px; line-height: 1.35; }
.wl-ledger-line > b { color: var(--text); font-family: var(--serif); font-size: 19px; white-space: nowrap; }
.wl-ledger-line.is-actual > b { color: var(--accent2); }
.wl-ledger-line.wl-bn-rem > b { color: var(--good); }
.wl-ledger-line.wl-bn-rem.wl-over > b, .wl-over { color: var(--danger) !important; }
.wl-meter-block { display: grid; gap: 7px; margin-top: auto; padding-top: var(--space-2); }
.wl-meter-copy { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); color: var(--muted); font-size: 11px; }
.wl-meter-copy b { color: var(--text2); font-family: var(--mono); font-size: 10px; }
.wl-meter { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background: var(--well); }
.wl-meter-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), color-mix(in srgb, var(--good) 70%, var(--accent2))); transition: width .22s ease; }
.wl-meter-fill.over { background: linear-gradient(90deg, var(--warning), var(--danger)); }
.wl-selection-note { display: flex; gap: 8px; align-items: flex-start; padding: 10px 11px; border-radius: var(--radius-control); color: var(--muted); background: color-mix(in srgb, var(--well) 65%, transparent); font-size: 11.5px; line-height: 1.4; }
.wl-selection-note.has-selection { color: var(--text2); background: color-mix(in srgb, var(--accent2) 11%, var(--well)); }
.wl-selection-dot { width: 7px; height: 7px; margin-top: 5px; flex: none; border-radius: 50%; background: var(--muted); }
.has-selection .wl-selection-dot { background: var(--accent2); }
.wl-budget-definitions { color: var(--muted); font-size: 11.5px; }
.wl-budget-definitions summary { cursor: pointer; color: var(--text2); font-weight: 650; }
.wl-budget-definitions p { margin: 7px 0 0; line-height: 1.45; }
.wl-cur { width: 60px !important; text-align: center; }
.wl-currency-lock { max-width: 52ch; margin: 0; line-height: 1.45; }

.wl-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.wl-tabs { min-width: 0; flex-wrap: wrap; }
.wl-toolbar-tools { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.wl-search { width: min(250px, 23vw); min-width: 150px; border-radius: var(--radius-pill); }
.wl-sort { width: 142px; }
.wl-tabcount { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--well); color: var(--muted); font-family: var(--mono); font-size: 10px; }
.study-tab.active .wl-tabcount { background: color-mix(in srgb, var(--bg1) 25%, transparent); color: inherit; }
.wl-queue { padding: clamp(16px, 2vw, 24px); border: 1px solid var(--surface-border); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.wl-queue-count { padding: 4px 8px; border-radius: var(--radius-pill); background: var(--well); color: var(--muted); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.wl-queue-hint { margin: var(--space-3) 0 0; color: var(--muted); font-size: 11.5px; }
.wl-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.wl-row { display: grid; grid-template-columns: auto 42px minmax(0, 1fr) max-content auto; align-items: center; gap: var(--space-3); min-width: 0; padding: 11px 12px; border-left: 3px solid var(--accent, var(--line)); background: color-mix(in srgb, var(--well) 32%, transparent); box-shadow: none; }
.wl-row:hover { background: color-mix(in srgb, var(--well) 63%, transparent); }
.wl-row.draggable { cursor: grab; }
.wl-row.dragging { opacity: .5; }
.wl-row-lead { display: flex; align-items: center; justify-content: center; min-width: 18px; }
.wl-grip { color: var(--muted); font-size: 12px; letter-spacing: -2px; cursor: grab; }
.wl-check { width: 17px; height: 17px; accent-color: var(--accent2); cursor: pointer; }
.wl-cover { width: 42px; height: 58px; overflow: hidden; border: 1px solid var(--line2); border-radius: 6px; background: var(--well); }
.wl-cover > img { width: 100%; height: 100%; display: block; }
.wl-cover-ph { display: grid; place-items: center; color: var(--muted); font-family: var(--jp); font-size: 18px; }
.wl-row-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.wl-row-title { color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.28; overflow-wrap: anywhere; }
.wl-row-author { color: var(--muted); font-size: 12px; }
.wl-modtag { padding: 2px 7px; border: 1px solid color-mix(in srgb, var(--accent, var(--line)) 45%, transparent); border-radius: var(--radius-pill); color: var(--accent, var(--muted)); font-family: var(--mono); font-size: 9.5px; }
.wl-chip { padding: 2px 7px; border: 1px solid var(--line2); border-radius: var(--radius-pill); background: var(--well); color: var(--text2); font-size: 10.5px; line-height: 1.2; text-decoration: none; }
a.wl-chip.wl-retail:hover { color: var(--accent2); border-color: color-mix(in srgb, var(--accent2) 50%, transparent); }
.wl-chip.wl-linked { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 40%, transparent); cursor: pointer; }
.wl-chip.wl-rel { color: var(--accent2); }
.wl-handoff-error { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 42%, transparent); }
.wl-row-price { display: grid; gap: 2px; min-width: 76px; text-align: right; }
.wl-row-price b { color: var(--text); font-family: var(--serif); font-size: 18px; white-space: nowrap; }
.wl-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.wl-row-actions .mini-btn { white-space: nowrap; }
.wl-purchase { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.wl-queue-empty, .wl-history-empty { display: flex; align-items: center; gap: var(--space-4); min-height: 118px; padding: var(--space-4) 0 var(--space-2); }
.wl-queue-empty b, .wl-history-empty b { display: block; margin-bottom: 4px; color: var(--text); }
.wl-queue-empty p, .wl-history-empty p { max-width: 58ch; margin: 0; line-height: 1.45; }
.wl-empty-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--accent) 11%, var(--well)); color: var(--accent); font-family: var(--serif); font-size: 24px; }

.wl-history { display: grid; gap: var(--space-4); margin-top: var(--section-gap); padding: clamp(18px, 2.2vw, 28px); border: 1px solid var(--surface-border); border-radius: var(--radius-card); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.wl-history-total { display: grid; gap: 2px; text-align: right; }
.wl-history-total b { color: var(--accent2); font-family: var(--serif); font-size: 24px; }
.wl-history-charts { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.wl-history .cs-chart { min-width: 0; }
.wl-modal .wl-field { margin: 8px 0; }
.wl-collection-guidance { max-width: 66ch; margin: 8px 0 0; }
.wl-linkbox { display: flex; flex-direction: column; gap: 7px; }
.wl-linkresults { display: flex; flex-direction: column; gap: 4px; }
.wl-linkhit { display: flex; align-items: center; gap: 9px; padding: 5px 8px; border: 1px solid var(--line2); border-radius: 8px; background: var(--panel); cursor: pointer; text-align: left; }
.wl-linkhit:hover { border-color: var(--accent2); }
.wl-linkhit-cover, .wl-linkhit-ph { display: grid; place-items: center; width: 24px; height: 34px; overflow: hidden; border-radius: 3px; background: var(--well); color: var(--muted); font-family: var(--jp); font-size: 13px; }
.wl-linkhit-cover > img { width: 100%; height: 100%; display: block; }
.wl-linkhit-t { font-size: 13px; }
.wl-linkcur { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wl-onlist { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--accent2) 40%, transparent); border-radius: 10px; background: var(--wash-brass); grid-column: 1 / -1; }
.wl-onlist-h { color: var(--accent2); font-size: 12px; font-weight: 700; }
.wl-onlist-chip { background: var(--panel); color: var(--text2); }
@media (max-width: 1050px) {
  .wl-toolbar { grid-template-columns: 1fr auto; }
  .wl-tabs { grid-column: 1 / -1; }
  .wl-row { grid-template-columns: auto 42px minmax(0, 1fr) max-content; }
  .wl-row-actions { grid-column: 3 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .wl-hero { min-height: 340px; }
  .wl-hero-facts { gap: var(--space-3); }
  .wl-toolbar { grid-template-columns: 1fr; }
  .wl-toolbar-tools { width: 100%; }
  .wl-search { flex: 1; width: auto; }
  .wl-sort { flex: 0 1 142px; }
  .wl-row { grid-template-columns: auto 36px minmax(0, 1fr); gap: 9px; }
  .wl-cover { width: 36px; height: 50px; }
  .wl-row-price { grid-column: 3; justify-self: start; display: flex; align-items: baseline; gap: 7px; text-align: left; }
  .wl-row-actions { grid-column: 3; }
  .wl-budget-head, .wl-queue-head, .wl-history-head { align-items: stretch; flex-direction: column; }
  .wl-budget-edit { align-self: flex-start; }
  .wl-history-total { text-align: left; }
  .wl-history-charts { grid-template-columns: 1fr; }
}

/* ============================================================
   Lab overflow containment (sims/trace going off-screen)
   ============================================================ */
.lab-panel { overflow-x: auto; }
.lab-panel svg { max-width: 100%; height: auto; }
.trace-flex { flex-wrap: wrap; }
.trace-flex .code-panel { max-width: 100%; }
.rec-wrap, #oop-stage-wrap { min-width: 0; }
.fsm-tape, .bit-row { flex-wrap: wrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1240px) {
  :root {
    --page-pad-inline: 22px;
    --page-pad-start: 24px;
    --page-pad-end: 64px;
  }
}
@media (max-width: 1080px) {
  #rail { width: var(--rail-w-compact); padding-left: 10px; padding-right: 10px; }
  #rail .rail-item { padding: 8px 5px; justify-content: center; }
  #rail .rail-item .lbl, #rail .rail-item .pc, #rail .rail-foot { display: none; }
  #rail-toggle { display: none; }
  #searchbox { flex-basis: 360px; }
  .brand .sub, .save-wrap span:last-child { display: none; }
  .split { grid-template-columns: 1fr; }
  #oop-stage-wrap { grid-template-columns: 1fr; }
  .rec-wrap { grid-template-columns: 1fr; }
  .code-panel { width: 100%; }
}
@media (max-width: 860px) {
  :root {
    --page-pad-inline: 14px;
    --page-pad-start: 18px;
    --page-pad-end: 60px;
    --hero-min-h: 200px;
    --hero-pad-block: 20px;
    --hero-pad-inline: 20px;
    --type-page-title: 1.5rem;
    --type-hero-title: 1.4375rem;
    --modal-gutter: 28px;
  }
  #topbar { gap: 10px; padding: 0 12px; }
  .brand .name { display: none; }
  #tree { position: fixed; left: var(--rail-w-compact); top: var(--topbar-h); bottom: 0; width: min(86vw, 340px); z-index: 40; box-shadow: var(--shadow-lg); background: var(--bg1); }
  .cmp-grid { grid-template-columns: 1fr; }
  .cal-form, .med-form { grid-template-columns: 1fr; }
  .med-form > .med-field { grid-column: 1 / -1; }
  .fc-card { min-height: 290px; }
  .hi-stats { width: 100%; justify-content: space-between; }
}
@media (max-width: 560px) {
  :root {
    --hero-min-h: 180px;
    --hero-pad-block: 18px;
    --hero-pad-inline: 16px;
    --modal-gutter: 20px;
  }
  #searchbox { display: none; }
  .pn { max-width: 100%; }
  .pn-row { flex-direction: column; }
  .dh-actions { width: 100%; }
  .data-action .btn { flex-basis: 100%; width: 100%; }
}

/* ============================================================
   Theme variants — 23 gold-purchasable palettes over the
   Atelier Dawn default. Each block overrides ONLY the canonical
   tokens; every derived surface recomputes via color-mix.
   MUST target :root — derived tokens are computed there.
   ============================================================ */
/* Spectral Rose — Blue-black lacquer, wine red, cyan rim-light and ember orange. */
:root[data-theme="spectral-rose"] {
  --bg0: #07090F;
  --bg1: #111923;
  --panel: #21131B;
  --text: #FFF6F4;
  --text2: #FFF6F4;
  --muted: #7E899A;
  --accent: #D82D57;
  --accent2: #22D7E8;
  --accent3: #FF8A3D;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 18px;
}
/* Verdigris Duel — Charcoal, oxidised teal, fog white and restrained rust. */
:root[data-theme="verdigris-duel"] {
  --bg0: #080C10;
  --bg1: #101A20;
  --panel: #17272C;
  --text: #EEF5F2;
  --text2: #EEF5F2;
  --muted: #7E899A;
  --accent: #6F9E98;
  --accent2: #DDEBE7;
  --accent3: #A65E58;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 4px;
}
/* Sakura Skyline — Deep indigo city-night with periwinkle, electric blue and sakura pink. */
:root[data-theme="sakura-skyline"] {
  --bg0: #050824;
  --bg1: #0B1640;
  --panel: #12255A;
  --text: #F5F7FF;
  --text2: #F5F7FF;
  --muted: #7E899A;
  --accent: #9B8DFF;
  --accent2: #55C7FF;
  --accent3: #F052B7;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 20px;
}
/* Starfall Serenade — Midnight plum, smoky violet, coral horizon and cold starlight. */
:root[data-theme="starfall-serenade"] {
  --bg0: #08070E;
  --bg1: #15101B;
  --panel: #241A2A;
  --text: #FFF5EF;
  --text2: #FFF5EF;
  --muted: #7E899A;
  --accent: #E67F74;
  --accent2: #87AAFF;
  --accent3: #A66FD2;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 22px;
}
/* Feathered Dusk — Ink mauve, dusty rose, blue-grey and pale blush. */
:root[data-theme="feathered-dusk"] {
  --bg0: #0C0A12;
  --bg1: #17131D;
  --panel: #241C2A;
  --text: #F4EBF2;
  --text2: #F4EBF2;
  --muted: #7E899A;
  --accent: #B985A0;
  --accent2: #6F83AC;
  --accent3: #D9A8BC;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 28px;
}
/* Rosewater Abyss — Near-black marine blue, pearl aqua, coral petals and pale gold. */
:root[data-theme="rosewater-abyss"] {
  --bg0: #050A0D;
  --bg1: #0A151B;
  --panel: #10232B;
  --text: #F2FAFA;
  --text2: #F2FAFA;
  --muted: #7E899A;
  --accent: #EF8997;
  --accent2: #6EC5DE;
  --accent3: #D6B05C;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 24px;
}
/* Clinic Noir — Sterile slate, charcoal, pearl and faint blush reflections. */
:root[data-theme="clinic-noir"] {
  --bg0: #070C10;
  --bg1: #0D151B;
  --panel: #152129;
  --text: #F0F2F1;
  --text2: #F0F2F1;
  --muted: #7E899A;
  --accent: #DDE7E9;
  --accent2: #5DD7E8;
  --accent3: #E7A2B1;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 8px;
}
/* Azure Corset Noir — Midnight blue, icy porcelain, graphite lace and cardinal ribbon. */
:root[data-theme="azure-corset-noir"] {
  --bg0: #060B10;
  --bg1: #0D1820;
  --panel: #162631;
  --text: #F0F8FA;
  --text2: #F0F8FA;
  --muted: #7E899A;
  --accent: #79BAD3;
  --accent2: #DCEBF0;
  --accent3: #C83E53;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 3px;
}
/* Shattered Bloom — Blue-black, electric cyan, hot pink and ultraviolet. */
:root[data-theme="shattered-bloom"] {
  --bg0: #030609;
  --bg1: #07121C;
  --panel: #0E2434;
  --text: #F4FBFF;
  --text2: #F4FBFF;
  --muted: #7E899A;
  --accent: #FF2F84;
  --accent2: #3BE3FF;
  --accent3: #8B5CFF;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 2px;
}
/* Scarlet Garden Night — Dark sage, blackened porcelain, scarlet silk and muted stone. */
:root[data-theme="scarlet-garden-night"] {
  --bg0: #080B09;
  --bg1: #101613;
  --panel: #18221D;
  --text: #EDF1EC;
  --text2: #EDF1EC;
  --muted: #7E899A;
  --accent: #BF3B48;
  --accent2: #769383;
  --accent3: #C6D0C8;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 0px;
}
/* Midnight Lilies — Ink-black water, moon-white petals, slate and muted sage. */
:root[data-theme="midnight-lilies"] {
  --bg0: #05090D;
  --bg1: #0B1218;
  --panel: #131E26;
  --text: #EEEFEA;
  --text2: #EEEFEA;
  --muted: #7E899A;
  --accent: #D8DAD7;
  --accent2: #94B0A4;
  --accent3: #697E91;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 30px;
}
/* Gothic Camellia — Deep navy, magenta velvet, antique brass and smoky violet. */
:root[data-theme="gothic-camellia"] {
  --bg0: #0A0A14;
  --bg1: #131522;
  --panel: #211C31;
  --text: #FFF0F7;
  --text2: #FFF0F7;
  --muted: #7E899A;
  --accent: #D64087;
  --accent2: #B79753;
  --accent3: #7454AF;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 10px;
}
/* Rain Café — Deep teal glass, rain-blue neon, warm peach and coffee cream. */
:root[data-theme="rain-cafe"] {
  --bg0: #02131D;
  --bg1: #052536;
  --panel: #073B4D;
  --text: #F3E8E1;
  --text2: #F3E8E1;
  --muted: #7E899A;
  --accent: #42C6D0;
  --accent2: #E99A78;
  --accent3: #83A8FF;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 16px;
}
/* Porcelain Sky Night — Navy-black, powder blue, porcelain highlights and a clean red bow. */
:root[data-theme="porcelain-sky-night"] {
  --bg0: #050A12;
  --bg1: #0B1622;
  --panel: #122536;
  --text: #F2F9FB;
  --text2: #F2F9FB;
  --muted: #7E899A;
  --accent: #6BB5D1;
  --accent2: #C73B50;
  --accent3: #D9EAF0;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 18px;
}
/* Crimson Moth — Absolute black, blood-red wings, bone white and smoke brown. */
:root[data-theme="crimson-moth"] {
  --bg0: #020202;
  --bg1: #090706;
  --panel: #17100E;
  --text: #F7E8DB;
  --text2: #F7E8DB;
  --muted: #7E899A;
  --accent: #E53228;
  --accent2: #FF6650;
  --accent3: #80645A;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 7px;
}
/* Celestial Duality — Black void, ultramarine, ice-white, cyan and silver. */
:root[data-theme="celestial-duality"] {
  --bg0: #010102;
  --bg1: #080A14;
  --panel: #11162A;
  --text: #FAFCFF;
  --text2: #FAFCFF;
  --muted: #7E899A;
  --accent: #3348C9;
  --accent2: #52D9FF;
  --accent3: #C8D3FF;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 14px;
}
/* Jade Camellia — Forest black, jade leaf, olive gold, coral flower and parchment. */
:root[data-theme="jade-camellia"] {
  --bg0: #050A07;
  --bg1: #0B1510;
  --panel: #14251B;
  --text: #F0E8D5;
  --text2: #F0E8D5;
  --muted: #7E899A;
  --accent: #4D8D67;
  --accent2: #A6A15D;
  --accent3: #D16E67;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 26px;
}
/* Ember Wraith — Midnight navy, dark crimson, rose flame and ice-blue eyes. */
:root[data-theme="ember-wraith"] {
  --bg0: #040713;
  --bg1: #081528;
  --panel: #20101B;
  --text: #F8EAF0;
  --text2: #F8EAF0;
  --muted: #7E899A;
  --accent: #D9546E;
  --accent2: #FF8AA1;
  --accent3: #76DFFF;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 12px;
}
/* Solar Manuscript — Charcoal ink, saffron, engraved gold, lavender-grey and ivory. */
:root[data-theme="solar-manuscript"] {
  --bg0: #070706;
  --bg1: #12100B;
  --panel: #211A0D;
  --text: #F2E7D2;
  --text2: #F2E7D2;
  --muted: #7E899A;
  --accent: #F0B92C;
  --accent2: #B98936;
  --accent3: #AAA0C5;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 5px;
}
/* Violet Requiem — Midnight indigo, hydrangea violet, pale lilac, rose and white cloth. */
:root[data-theme="violet-requiem"] {
  --bg0: #050819;
  --bg1: #0D1532;
  --panel: #1C214A;
  --text: #F1EBF7;
  --text2: #F1EBF7;
  --muted: #7E899A;
  --accent: #A586C7;
  --accent2: #D0A6DA;
  --accent3: #B86D91;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 22px;
}
/* Rosarium — Black rose garden, oxblood, petal pink, ivory and antique brass. */
:root[data-theme="rosarium"] {
  --bg0: #080306;
  --bg1: #12070C;
  --panel: #24101A;
  --text: #FFF1F0;
  --text2: #FFF1F0;
  --muted: #7E899A;
  --accent: #D83D68;
  --accent2: #F19AB4;
  --accent3: #D1A95B;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 28px;
}
/* Lycoris Radiata — Sumi black, scarlet filaments, ember orange and pale bone. */
:root[data-theme="lycoris-radiata"] {
  --bg0: #020202;
  --bg1: #080605;
  --panel: #130B09;
  --text: #F1E8DD;
  --text2: #F1E8DD;
  --muted: #7E899A;
  --accent: #E32636;
  --accent2: #FF7448;
  --accent3: #D7C9BC;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 2px;
}
/* Azure Butterfly — Night-sky blue, luminous aqua, pearl, silver and soft lilac. */
:root[data-theme="azure-butterfly"] {
  --bg0: #030914;
  --bg1: #071728;
  --panel: #0E2B43;
  --text: #F2FAFF;
  --text2: #F2FAFF;
  --muted: #7E899A;
  --accent: #5DB9E7;
  --accent2: #92E4FF;
  --accent3: #B8A9F2;
  --good: #6ED7A5;
  --warning: #F2C46D;
  --danger: #F05D76;
  --radius: 34px;
}

/* ============================================================
   Flashcards — dressed as study cards, not plain panels
   ============================================================ */
.fc-wrap { max-width: 620px; }
.fc-card { min-height: 280px; }
.fc-face {
  padding: 34px 38px;
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
/* the front: warm parchment card with a hairline inner frame + corner mark */
.fc-front {
  background:
    radial-gradient(120% 90% at 50% -10%, color-mix(in srgb, var(--accent) 6%, var(--panel)), var(--panel) 70%);
  border: 1px solid var(--line2);
}
.fc-front::before, .fc-back::before {
  content: "";
  position: absolute; inset: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent);
  border-radius: 10px;
  pointer-events: none;
}
.fc-front::after {
  content: "問";
  position: absolute; right: 20px; bottom: 14px;
  font-family: var(--jp); font-size: 34px;
  color: color-mix(in srgb, var(--accent) 12%, transparent);
  pointer-events: none;
}
.fc-back::after {
  content: "答";
  position: absolute; right: 20px; bottom: 14px;
  font-family: var(--jp); font-size: 34px;
  color: color-mix(in srgb, var(--accent) 18%, transparent);
  pointer-events: none;
}
.fc-back {
  background:
    radial-gradient(120% 90% at 50% -10%, var(--wash-accent), var(--bg1) 72%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}
.fc-face > div { position: relative; z-index: 1; font-size: 18px; line-height: 1.6; }
.fc-kind {
  position: relative; z-index: 1;
  font-family: var(--sans);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  color: var(--accent);
  padding: 3px 12px;
  border-radius: 999px;
  background: var(--wash-accent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.fc-back .fc-kind { color: var(--accent2); background: var(--wash-brass); border-color: color-mix(in srgb, var(--accent2) 28%, transparent); }
.fc-hint { position: relative; z-index: 1; }
.fc-badges { top: 16px; right: 18px; }
.fc-pip { height: 5px; border-radius: 999px; }
.fc-pip.cur { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent2) 25%, transparent); }
/* rating buttons: bolder, with the SM-2 colour tell */
.fc-rate { gap: 8px; }
.fc-r { min-width: 92px; padding: 10px 16px; border-width: 1.5px; font-weight: 600; box-shadow: var(--shadow-sm); }
.fc-r:hover { transform: translateY(-2px); }

/* ============================================================
   Confirm modal + shared image-banner edges
   ============================================================ */
/* Non-destructive image crop contract (js/core/imagecrop.js). The same
   variables drive saved cards and the cropper preview; legacy images have
   no metadata and therefore resolve to centre / 1×. */
.crop-media {
  object-fit: cover;
  object-position: var(--crop-x, 50%) var(--crop-y, 50%);
  transform: scale(var(--crop-zoom, 1));
  transform-origin: var(--crop-x, 50%) var(--crop-y, 50%);
}
.med-card:hover .med-cover img.crop-media { transform: scale(calc(var(--crop-zoom, 1) + .03)); }
.image-crop-host { position: relative; overflow: hidden; isolation: isolate; }
.image-crop-bg {
  position: absolute; inset: 0; z-index: -1;
  display: block; overflow: hidden; pointer-events: none;
}
.image-crop-bg > .crop-media { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.image-crop-shade { position: absolute; inset: 0; }

/* Reusable cropper: aspect ratio comes from the destination surface rather
   than the current viewport. It remains a two-column tool until compact UI. */
.cropper-modal { --modal-max: 900px; }
.cropper-head { align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-2); }
.cropper-head h3 { margin: 1px 0 0; font-family: var(--serif); font-size: 22px; font-weight: 600; }
.modal-kicker { display: block; color: var(--accent); font-size: var(--type-label); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.cropper-intro { max-width: 68ch; margin: 0 0 var(--space-4); color: var(--text2); font-size: 13.5px; }
.cropper-source { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.cropper-file { display: none; }
.cropper-url { min-width: 0; flex: 1; }
.cropper-work { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(230px, .75fr); gap: var(--space-5); align-items: start; }
.cropper-canvas { min-width: 0; }
.cropper-preview {
  position: relative; width: 100%;
  overflow: hidden; touch-action: none; cursor: crosshair;
  border-radius: var(--radius-hero); border: 1px solid var(--line);
  background:
    linear-gradient(45deg, var(--well) 25%, transparent 25%, transparent 75%, var(--well) 75%),
    linear-gradient(45deg, var(--well) 25%, var(--panel) 25%, var(--panel) 75%, var(--well) 75%);
  background-position: 0 0, 10px 10px; background-size: 20px 20px;
}
.cropper-preview.is-circle { max-width: 420px; margin-inline: auto; border-radius: 50%; }
.cropper-preview > img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; user-select: none; }
.cropper-empty { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; color: var(--muted); text-align: center; }
/* Author display rules outrank the browser's default [hidden] rule in some
   engines; keep source/empty/focal layers mutually exclusive explicitly. */
.cropper-preview > [hidden] { display: none; }
.cropper-focus {
  position: absolute; z-index: 3; width: 24px; height: 24px;
  translate: -50% -50%; border: 1.5px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), 0 2px 10px rgba(0,0,0,.35);
  pointer-events: none;
}
.cropper-focus::before, .cropper-focus::after { content: ""; position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.cropper-focus::before { width: 1px; height: 32px; left: 10px; top: -5px; }
.cropper-focus::after { width: 32px; height: 1px; left: -5px; top: 10px; }
.cropper-status { min-height: 20px; margin: 7px 2px 0; color: var(--muted); font-size: 12px; }
.cropper-controls { display: flex; flex-direction: column; gap: var(--space-3); }
.cropper-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; color: var(--text2); font-size: 12px; }
.cropper-range > span { font-weight: 700; }
.cropper-range input { grid-column: 1 / -1; width: 100%; accent-color: var(--accent); }
.cropper-value { font-family: var(--mono); color: var(--accent); font-size: 11px; }
.cropper-small-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cropper-foot { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--line2); }
.image-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.image-position-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.image-position-row .btn { min-height: var(--control-h-sm); }
.image-position-note { font-size: 11.5px; }
@media (max-width: 700px) {
  .cropper-work { grid-template-columns: 1fr; }
  .cropper-source { align-items: stretch; flex-wrap: wrap; }
  .cropper-source .cropper-url { flex-basis: 100%; }
}

/* in-app confirm — replaces every native window.confirm */
.confirm-modal { --modal-max: 420px; text-align: center; padding: 26px 26px 20px; }
.confirm-glyph {
  width: 46px; height: 46px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 22px; font-weight: 700;
  color: var(--accent);
  background: var(--wash-accent);
}
.confirm-modal.danger .confirm-glyph { color: var(--danger); background: var(--wash-danger); }
.confirm-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.confirm-body { margin: 0 auto 18px; max-width: 34ch; color: var(--text2); font-size: 14px; line-height: 1.55; }
.confirm-foot { display: flex; gap: 10px; justify-content: center; }
.confirm-foot .btn { min-width: 110px; justify-content: center; }

/* count badges inside tabs (Flashcards 12, Exam Qs 5) */
.study-tab .tab-n, .study-tab .wl-tabcount {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  color: var(--muted);
  background: color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: var(--radius-pill); padding: 1px 7px; margin-left: 2px;
}
.study-tab.active .tab-n, .study-tab.active .wl-tabcount {
  color: var(--accent); background: var(--wash-accent);
}

/* ---- banner edge fix: no dark border on image banners; a soft inset ring
   instead of a hard 1px line that reads as bleed at the corners ---- */
.image-banner,
.vault-hero.has-banner,
.home-id.has-banner,
.ap-head.has-banner,
.wl-hero.has-banner { border: none; box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(255,255,255,.06); }
/* Governor Status is intentionally its own profile-banner composition. */
.b-id.has-banner { border: none; box-shadow: var(--shadow-sm), inset 0 0 0 1px rgba(255,255,255,.06); }

.wl-row-author { font-size: 11.5px; color: var(--muted); font-style: italic; }
.wl-notes-full textarea { min-height: 70px; }

/* ---- collection module cards: kanji watermark for character ---- */
.med-mod-card { position: relative; overflow: hidden; }
.med-mod-wm {
  position: absolute; right: -8px; bottom: -22px; z-index: 0;
  font-family: var(--jp); font-size: 108px; line-height: 1;
  color: color-mix(in srgb, var(--accent, var(--kurenai)) 12%, transparent);
  pointer-events: none;
}
.med-mod-card .subj-card-top, .med-mod-card .m { position: relative; z-index: 1; }
.med-mod-card h3 .kanji-inline { color: var(--accent, var(--kurenai)); }

/* ============================================================
   Governor v3 — session-log categories + Discord-style avatar
   ============================================================ */
.log-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--grid-gap); margin: 2px 0 var(--space-4); }
.log-cat {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line2); border-radius: 14px;
  background: var(--bg1); text-align: left;
  transition: border-color .15s, transform .15s;
}
.log-cat:hover { transform: translateY(-2px); border-color: var(--line); }
.log-cat.active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: var(--wash-accent); }
.log-cat-k { font-family: var(--jp); font-size: 22px; color: var(--accent); width: 40px; height: 40px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; background: var(--wash-accent); }
.log-cat b { font-family: var(--serif); font-size: 22px; font-weight: 600; display: block; line-height: 1; }
.log-cat-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.log-seg { margin-bottom: 14px; }
.gov-log.ledger { max-width: 760px; }
.gov-log.ledger .led-row { padding: 9px 4px; }
.gov-log .led-row .when { min-width: 72px; text-align: right; }

/* Discord-style avatar page */
.av-grid { display: grid; grid-template-columns: var(--sidebar-context-w) minmax(0, 1fr); gap: var(--layout-gap); align-items: start; }
@media (max-width: 900px) { .av-grid { grid-template-columns: 1fr; } }
.av-preview {
  position: sticky; top: 10px;
  border: 1px solid var(--line2); border-radius: 16px;
  background: var(--bg1); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.av-pv-banner {
  height: 96px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 40%, var(--bg1)), color-mix(in srgb, var(--accent2) 30%, var(--bg1)));
  background-size: cover; background-position: center;
}
.av-pv-body { padding: 0 20px 22px; margin-top: -46px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.av-pv-avatar { padding: 5px; background: var(--bg1); border-radius: 50%; box-shadow: var(--shadow-sm); }
.av-pv-avatar .gov-avatar { border-width: 0; }
.av-pv-name { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-top: 8px; }
.av-pv-rank { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent2); font-weight: 700; }
.av-pv-meta { font-size: 12.5px; color: var(--muted); margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line2); width: 100%; }
.av-controls { display: flex; flex-direction: column; gap: 22px; }
.av-sec h4 { margin: 0 0 12px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.seal-lv { font-size: 9px; }

/* ---- reminders: dates + categories (Apple-style) ---- */
.rem-label-wrap { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.rem-cat { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; color: var(--accent); background: var(--wash-accent); border-radius: 999px; padding: 1px 9px; }
.rem-date { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.rem-date.today { color: var(--accent2); font-weight: 600; }
.rem-date.overdue { color: var(--danger); font-weight: 600; }
.rem-add-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.rem-add-text { flex: 1 1 160px; }
.rem-add-cat { flex: 0 1 110px; }
.rem-add-date { flex: 0 1 150px; }

/* ============================================================
   標 Goals — manual + auto tracking, Active/Completed/Failed
   ============================================================ */
.goal-tabs { margin: 4px 0; }
.goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--grid-gap); margin-top: 4px; }
.goal-card { padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; position: relative; }
.goal-card.completed { border-color: color-mix(in srgb, var(--good) 45%, var(--line2)); }
.goal-card.failed { opacity: .82; }
.goal-card.failed::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-linear-gradient(135deg, transparent 0 11px, color-mix(in srgb, var(--danger) 5%, transparent) 11px 22px);
}
.goal-top { display: flex; align-items: center; gap: 8px; }
.goal-kind-chip {
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.goal-kind-chip.is-auto { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.goal-kind-chip.is-manual { color: var(--accent2); background: color-mix(in srgb, var(--accent2) 14%, transparent); }
.goal-metric { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.goal-deadline { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.goal-deadline.soon { color: var(--accent2); font-weight: 600; }
.goal-deadline.overdue { color: var(--danger); font-weight: 600; }
.goal-title { margin: 0; font-size: 15.5px; line-height: 1.25; }
.goal-detail { margin: 0; font-size: 12.5px; color: var(--text2); line-height: 1.45; }
.goal-prog { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.goal-bar { flex: 1; height: 8px; border-radius: 999px; background: var(--well); overflow: hidden; }
.goal-bar-fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width .3s; }
.goal-bar.done .goal-bar-fill { background: var(--good); }
.goal-bar.failed .goal-bar-fill { background: color-mix(in srgb, var(--danger) 70%, var(--muted)); }
.goal-count { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text); white-space: nowrap; }
.goal-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.goal-step { display: inline-flex; gap: 5px; }
.goal-empty { padding: 26px 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.goal-kind-pick { display: flex; gap: 18px; margin: 4px 0; }
.goal-auto-wrap { display: flex; flex-direction: column; gap: 10px; }
.goal-modal { --modal-max: 460px; }

/* ============================================================
   Vault filter rail (AniList-style) + custom lists (Build 3k)
   ============================================================ */
.med-layout { display: grid; grid-template-columns: var(--sidebar-filter-w) minmax(0, 1fr); gap: var(--layout-gap); align-items: start; }
@media (max-width: 900px) { .med-layout { grid-template-columns: 1fr; } .med-filter-rail { position: static !important; } }
.med-main { min-width: 0; }
.med-filter-rail {
  position: sticky; top: 12px;
  background: var(--panel);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 14px;
}
.fr-head { font-family: var(--serif); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.fr-group { display: flex; flex-direction: column; gap: 2px; }
.fr-title { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text2); padding: 2px 4px 5px; }
.fr-manage { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 13px; padding: 0 2px; border-radius: 6px; }
.fr-manage:hover { color: var(--accent); }
.fr-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; cursor: pointer; text-align: left;
  padding: 6px 8px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; color: var(--text2);
  transition: background .14s, color .14s;
}
.fr-row:hover { background: var(--well); color: var(--text); }
.fr-row.active { background: var(--wash-accent); color: var(--accent); font-weight: 600; }
.fr-row-lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr-row-n { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.fr-row.active .fr-row-n { color: var(--accent); }
.fr-listrow::before { content: "◈"; color: var(--accent2); font-size: 10px; margin-right: -2px; }
.fr-empty { font-size: 11.5px; color: var(--muted); padding: 2px 6px; margin: 0; }
.fr-new {
  margin-top: 4px; border: 1px dashed var(--line2); background: none; cursor: pointer;
  padding: 5px 8px; border-radius: 8px; font-size: 11.5px; color: var(--muted);
}
.fr-new:hover { border-color: var(--accent); color: var(--accent); }

/* custom-list chips in the editor */
.cl-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-chip {
  border: 1px solid var(--line2); background: var(--well); cursor: pointer;
  padding: 3px 10px; border-radius: 999px; font-size: 11.5px; color: var(--text2);
  transition: background .14s, color .14s, border-color .14s;
}
.cl-chip:hover { border-color: var(--accent); }
.cl-chip.on { background: var(--wash-accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--accent); font-weight: 600; }
.cl-chip-add { flex: 0 1 130px; min-width: 100px; min-height: var(--control-h-xs); font-size: 11.5px; padding: 3px 8px; }

/* manage-lists modal */
.cl-modal { --modal-max: 420px; }
.cl-manage { display: flex; flex-direction: column; gap: 8px; }
.cl-row { display: flex; align-items: center; gap: 7px; }
.cl-name { flex: 1; }

/* ============================================================
   Build 4a — cloud sync: topbar status chip + Archive account card
   ============================================================ */
.sync-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: none; border: 1px solid var(--line2);
  border-radius: var(--radius); padding: 3px 10px; cursor: pointer;
}
.sync-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.sync-chip.sync-synced { color: var(--good); }
.sync-chip.sync-synced::before { background: var(--good); }
.sync-chip.sync-syncing::before { background: var(--accent2); animation: syncPulse 1s ease-in-out infinite; }
.sync-chip.sync-pending { color: var(--warning); }
.sync-chip.sync-pending::before { background: var(--warning); }
.sync-chip.sync-attention { color: var(--warning); border-color: var(--warning); }
.sync-chip.sync-attention::before { background: var(--warning); }
.sync-chip.sync-error { color: var(--danger); border-color: var(--danger); }
.sync-chip.sync-error::before { background: var(--danger); }
.sync-chip.sync-offline::before,
.sync-chip.sync-signedOut::before { background: var(--muted); }
@keyframes syncPulse { 50% { opacity: .35; } }

.cloud-body { display: flex; flex-direction: column; gap: var(--space-4); }
.cloud-form { display: flex; flex-direction: column; gap: var(--space-3); max-width: 340px; }
.cloud-in { width: 100%; }
.cloud-btns { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.cloud-msg { min-height: 1.2em; margin: 0; }
.cloud-link { border: 1px solid var(--warning); border-radius: var(--radius); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }

/* ============================================================
   Build 4b — phone adaptation (≤700px). The desktop experience
   above is untouched; this tier re-homes the shell for touch:
   the rail becomes a bottom tab bar, the spec tree becomes a
   drawer, modals become bottom sheets, and iOS safe areas are
   respected throughout. Identity (glyphs, seals, tokens) rides
   the same variables as everywhere else.
   ============================================================ */
@media (max-width: 700px) {
  :root {
    --page-pad-inline: 12px;
    --page-pad-start: 14px;
    --page-pad-end: 40px;
  }
  #app { height: 100dvh; }

  /* --- topbar: safe-area aware, tighter --- */
  #topbar {
    gap: 8px;
    padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    height: calc(var(--topbar-h) + env(safe-area-inset-top));
  }
  #hud { min-width: 0; }

  /* --- the rail becomes a bottom tab bar --- */
  #rail {
    position: fixed;
    left: 0; right: 0; bottom: 0; top: auto;
    width: 100% !important;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    gap: 0;
    padding: 5px max(8px, env(safe-area-inset-right)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
    border-right: none;
    border-top: 1px solid var(--line2);
    background: color-mix(in srgb, var(--bg1) 94%, transparent);
    backdrop-filter: blur(10px);
    z-index: 60;
  }
  #rail .rail-item {
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    justify-content: center !important;
    gap: 2px;
    padding: 5px 2px !important;
    border-radius: 10px;
  }
  #rail .rail-item .glyph { width: 30px; height: 30px; font-size: 15px; }
  #rail .rail-item .lbl {
    display: block !important;
    font-size: 9.5px;
    letter-spacing: .02em;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #rail .rail-item .pc, #rail .rail-foot, #rail-toggle { display: none !important; }
  .rail-item.active::after {
    left: 20%; right: 20%; top: -6px; bottom: auto;
    width: auto; height: 3px;
    border-radius: 0 0 3px 3px;
  }
  /* content never hides behind the bar */
  #main { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.fx-minimised #cols { padding-bottom: 0; }

  /* --- the spec tree becomes a drawer ---
     Open: a fixed panel under the topbar (the ≤860 tier already floats
     it; here it pins to the left edge and gains a scrim). Closed: the
     existing .tree-reopen control renders as a floating "Spec spine"
     pill above the tab bar. The stored ui.treeClosed drives both — no
     new state. */
  #tree {
    left: 0;
    top: calc(var(--topbar-h) + env(safe-area-inset-top));
    width: min(88vw, 330px);
    padding-bottom: calc(90px + env(safe-area-inset-bottom));
  }
  #cols:not(.tree-closed) #tree:not(.hidden) {
    box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--text) 26%, transparent), var(--shadow-lg);
  }
  #cols.tree-closed #tree {
    position: fixed;
    width: auto;
    top: auto;
    bottom: calc(66px + env(safe-area-inset-bottom));
    left: 10px;
    padding: 0;
    border: none;
    background: none;
    overflow: visible;
    box-shadow: none;
  }
  #cols.tree-closed #tree > .tree-reopen {
    flex-direction: row;
    gap: 7px;
    padding: 9px 14px;
    border-radius: var(--radius-pill);
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    color: var(--text2);
    font-size: 12px;
  }
  #cols.tree-closed #tree .tr-lbl { writing-mode: horizontal-tb; }

  /* --- subnav scrolls sideways instead of wrapping the stage --- */
  #subnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #subnav::-webkit-scrollbar { display: none; }

  /* --- modals become bottom sheets --- */
  .modal-ov { align-items: flex-end; padding: 0; }
  .modal, .confirm-modal {
    width: 100%;
    max-width: 100% !important;
    max-height: calc(100dvh - var(--topbar-h) - env(safe-area-inset-top));
    border-radius: 18px 18px 0 0;
    border-left: none; border-right: none; border-bottom: none;
    padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    animation: sheet-in .24s cubic-bezier(.2,.9,.3,1);
  }
  .confirm-ov { align-items: flex-end; }

  /* --- forms and the mobile keyboard --- */
  input, select, textarea { font-size: 16px; }   /* stops iOS focus-zoom */

  /* --- multi-column desktop compositions stack --- */
  .data-grid, .study-grid, .cmp-grid, .gv-bento, .home-grid { grid-template-columns: 1fr !important; }
}
@keyframes sheet-in { from { opacity: .4; transform: translateY(40px); } }

/* --- touch ergonomics wherever the pointer is a finger --- */
@media (pointer: coarse) {
  .mini-btn { min-height: 34px; min-width: 34px; }
  .btn { min-height: 42px; }
  .study-tab { min-height: 40px; }
  .rail-item { -webkit-tap-highlight-color: transparent; }
  .qz-opt, .todo-check { min-height: 42px; }
}

/* Build 4b — phone topbar: the HUD keeps avatar + level + gold, drops the
   wide bar column; the sync chip stays one line and never collides. */
@media (max-width: 700px) {
  .sync-chip { font-size: 9px; letter-spacing: .08em; padding: 2px 7px; gap: 4px; }
  .hud-col { min-width: 0; }
  .hud-bars { display: none; }
  .nav-arrows .nav-fwd { display: none; }
}
.sync-chip { white-space: nowrap; flex: none; }