/* ==========================================================================
   densityConverter — themes (term / soft / topo)
   Each theme reskins the SAME DOM: fonts, brand chrome, drop zone,
   support cards, footer, h1, eyebrow, etc. Switch via ?theme=… or buttons.
   ========================================================================== */

@import url('./fonts/fonts.css');

* { box-sizing: border-box; }
html, body { margin: 0; }

/* ============================================================
   PALETTES + base body
   ============================================================ */

body[data-theme="term"] {
  --void:#0a0d0f; --panel:#141a1d; --panel2:#1c2429; --line:#26323a; --line2:#33424b;
  --ink:#d6e2e8; --dim:#7a8a93; --acc:#f0a830; --acc2:#c98217;
  --good:#5dd39e; --bad:#ff6b6b; --info:#7cd9e6;
  --bg:var(--void); --fg:var(--ink); --card:var(--panel); --card2:var(--panel2);
  font: 400 16px/1.5 'IBM Plex Sans', system-ui, sans-serif;
  color: var(--fg); background: var(--bg);
  position: relative; min-height: 100vh; color-scheme: dark;
}
body[data-theme="term"]::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: repeating-linear-gradient(0deg, transparent 0, transparent 2px, #ffffff04 2px, #ffffff04 3px);
}

body[data-theme="soft"] {
  --paper:#f4ecdf; --paper2:#ebe1d0; --line:#d4c5a8; --line2:#bfae8a;
  --ink:#1a1612; --dim:#8a7d65; --muted:#5a4a35;
  --acc:#a44e2c; --acc2:#c47e1e;
  --good:#5a7a3f; --bad:#a44e2c; --info:#c47e1e;
  --bg:var(--paper); --fg:var(--ink); --card:var(--paper2); --card2:var(--paper);
  font: 400 16px/1.55 'Inter', system-ui, sans-serif;
  color: var(--fg); background: var(--bg);
  position: relative; min-height: 100vh; color-scheme: light;
}
body[data-theme="soft"]::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5;
  background-image:
    radial-gradient(circle at 20% 30%, #d4c5a830 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, #d4c5a830 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, #d4c5a830 1px, transparent 1px);
  background-size: 80px 80px, 120px 120px, 100px 100px;
}

body[data-theme="topo"] {
  --void:#0d1820; --panel:#14242e; --panel2:#1a2e3a; --line:#1f3a48; --line2:#2a4a5a;
  --ink:#e8eef2; --dim:#7e96a3;
  --acc:#4dd0c8; --acc2:#b8e060;
  --good:#b8e060; --bad:#ff7eb6; --info:#ffb547;
  --bg:var(--void); --fg:var(--ink); --card:var(--panel); --card2:var(--panel2);
  font: 400 16px/1.55 'Inter', system-ui, sans-serif;
  color: var(--fg); background: var(--bg);
  position: relative; min-height: 100vh; color-scheme: dark;
}
body[data-theme="topo"]::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background-image:
    radial-gradient(ellipse 60% 40% at 25% 30%, transparent 38%, #4dd0c815 39%, transparent 40%, transparent 48%, #4dd0c812 49%, transparent 50%, transparent 58%, #4dd0c810 59%, transparent 60%, transparent 68%, #4dd0c80c 69%, transparent 70%),
    radial-gradient(ellipse 50% 35% at 75% 70%, transparent 38%, #ffb54712 39%, transparent 40%, transparent 50%, #ffb5470e 51%, transparent 52%, transparent 62%, #ffb5470a 63%, transparent 64%);
}
body[data-theme="topo"]::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: linear-gradient(0deg, #1f3a4828 1px, transparent 1px), linear-gradient(90deg, #1f3a4828 1px, transparent 1px);
  background-size: 32px 32px; opacity: .5;
}

/* ============================================================
   LAYOUT
   ============================================================ */

main {
  position: relative; z-index: 1;
  max-width: 860px; margin: 0 auto;
}
body[data-theme="term"] main { padding: 28px 36px 60px; }
body[data-theme="soft"] main { padding: 56px 64px 72px; max-width: 820px; }
body[data-theme="topo"] main { padding: 36px 44px 60px; max-width: 920px; }
@media (max-width: 720px) {
  body[data-theme="term"] main, body[data-theme="topo"] main { padding: 20px 18px 40px; }
  body[data-theme="soft"] main { padding: 28px 22px 40px; }
}

a { color: var(--acc); text-decoration: none; }
body[data-theme="term"] a:hover, body[data-theme="topo"] a:hover { text-decoration: underline; text-underline-offset: 3px; }
body[data-theme="soft"] a { border-bottom: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); padding-bottom: 1px; }
body[data-theme="soft"] a:hover { border-bottom-color: var(--acc); }

code, .mono { font-family: 'JetBrains Mono', monospace; }
body[data-theme="term"] code { color: var(--acc); background: var(--panel2); padding: 1px 6px; border-radius: 3px; font-size: .92em; }
body[data-theme="soft"] code { background: var(--paper2); color: var(--ink); padding: 1px 5px; border-radius: 3px; font-size: .9em; }
body[data-theme="topo"] code { color: var(--info); background: var(--panel); padding: 1px 6px; border-radius: 3px; font-size: .92em; font-family: 'IBM Plex Mono', monospace; }
body[data-theme="topo"] .mono { font-family: 'IBM Plex Mono', monospace; }

/* ============================================================
   .bar (top header) — fully different per theme
   ============================================================ */

.bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* TERM: status-bar shell with colored led */
body[data-theme="term"] .bar {
  padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; margin-bottom: 26px;
}
body[data-theme="term"] .bar .dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--good);
  box-shadow: 0 0 8px var(--good); flex-shrink: 0;
}
body[data-theme="term"] .bar .acc { color: var(--acc); font-weight: 500; }
body[data-theme="term"] .bar .sep { color: var(--line2); }
body[data-theme="term"] .bar .dim { color: var(--dim); }
body[data-theme="term"] .bar .grow { flex: 1; }

/* SOFT: brand block with mark, no status dot, no separator */
body[data-theme="soft"] .bar {
  margin-bottom: 40px; padding: 0; background: transparent; border: 0;
  align-items: flex-start; gap: 14px;
}
body[data-theme="soft"] .bar .dot {
  /* re-purposed as the brand mark */
  width: 44px; height: 44px; border-radius: 8px;
  background: var(--ink); position: relative; flex-shrink: 0;
  box-shadow: none;
}
body[data-theme="soft"] .bar .dot::before {
  content: 'd'; position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 800 22px 'Fraunces', serif; color: var(--paper);
}
body[data-theme="soft"] .bar .dot::after {
  content:''; position: absolute; inset: 3px;
  border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
  border-radius: 5px;
}
body[data-theme="soft"] .bar .acc {
  color: var(--ink); font: 600 18px 'Fraunces', serif;
  margin-right: 4px;
}
body[data-theme="soft"] .bar .sep { display: none; }
body[data-theme="soft"] .bar .dim {
  font: 500 11px 'JetBrains Mono'; letter-spacing: .12em;
  text-transform: uppercase; color: var(--dim);
  align-self: center;
}
body[data-theme="soft"] .bar .grow { flex: 1; }
/* In SOFT, hide the system-status dim (second one) — keeps it cleaner */
body[data-theme="soft"] .bar > .dim.mono { display: none; }

/* TOPO: clean compact bar with rounded brand pill */
body[data-theme="topo"] .bar {
  margin-bottom: 32px; padding: 8px 14px; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px;
  font: 500 13px 'IBM Plex Mono', monospace;
}
body[data-theme="topo"] .bar .dot {
  width: 24px; height: 24px; border-radius: 6px;
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  position: relative; flex-shrink: 0; box-shadow: none;
}
body[data-theme="topo"] .bar .dot::before {
  content:''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, transparent 30%, #08161a40 31%, transparent 33%, transparent 50%, #08161a40 51%, transparent 53%);
  border-radius: 6px;
}
body[data-theme="topo"] .bar .acc { color: var(--ink); font: 600 14px 'Space Grotesk'; letter-spacing: -.01em; }
body[data-theme="topo"] .bar .sep { color: var(--dim); margin: 0 2px; }
body[data-theme="topo"] .bar .dim { color: var(--dim); font-size: 12px; }
body[data-theme="topo"] .bar .grow { flex: 1; }

/* ============================================================
   LANG + THEME switchers
   ============================================================ */

.langs, .themes { display: flex; flex-shrink: 0; }

body[data-theme="term"] .langs, body[data-theme="term"] .themes {
  border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
}
body[data-theme="term"] .langs button, body[data-theme="term"] .themes button {
  background: transparent; border: 0; color: var(--dim); cursor: pointer;
  padding: 5px 10px; font: 500 11px 'JetBrains Mono'; letter-spacing: .08em;
  display: flex; align-items: center; gap: 5px;
}
body[data-theme="term"] .langs button.active { background: var(--acc); color: var(--bg); font-weight: 700; }
body[data-theme="term"] .themes button.active { background: var(--card2); color: var(--ink); }

body[data-theme="soft"] .langs, body[data-theme="soft"] .themes { gap: 4px; }
body[data-theme="soft"] .langs button, body[data-theme="soft"] .themes button {
  background: transparent; border: 1px solid var(--line); color: var(--dim);
  padding: 6px 11px; font: 500 12px 'Inter'; letter-spacing: .08em; cursor: pointer;
  border-radius: 4px; display: flex; align-items: center; gap: 5px;
}
body[data-theme="soft"] .langs button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
body[data-theme="soft"] .themes button.active { background: var(--card2); border-color: var(--ink); color: var(--ink); }

body[data-theme="topo"] .langs, body[data-theme="topo"] .themes {
  gap: 4px; padding: 3px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
body[data-theme="topo"] .langs button, body[data-theme="topo"] .themes button {
  background: transparent; border: 0; color: var(--dim); cursor: pointer;
  padding: 4px 10px; font: 500 12px 'IBM Plex Mono'; letter-spacing: .04em; border-radius: 5px;
  display: flex; align-items: center; gap: 5px;
}
body[data-theme="topo"] .langs button.active { background: var(--acc); color: var(--void); font-weight: 600; }
body[data-theme="topo"] .themes button.active { background: var(--panel2); color: var(--ink); }

.themes button .swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.themes button[data-th="term"] .swatch { background: #f0a830; }
.themes button[data-th="soft"] .swatch { background: #a44e2c; }
.themes button[data-th="topo"] .swatch { background: #4dd0c8; }

@media (max-width: 720px) {
  body[data-theme="topo"] .bar { gap: 6px; }
  .themes button { padding: 5px 7px !important; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero { margin-bottom: 22px; }

.prompt { margin: 0 0 10px; font: 500 12px 'JetBrains Mono', monospace; color: var(--dim); letter-spacing: .04em; }
body[data-theme="soft"] .prompt, body[data-theme="topo"] .prompt { display: none; }
.prompt .gt { color: var(--acc); }
.prompt .cmd { color: var(--info); }

h1.title { margin: 0 0 14px; line-height: 1.05; }

body[data-theme="term"] h1.title { font: 700 42px/1.05 'IBM Plex Sans'; color: var(--ink); letter-spacing: -.02em; }
body[data-theme="term"] h1.title .acc { color: var(--acc); }

body[data-theme="soft"] h1.title { font: 800 52px/.98 'Fraunces', serif; color: var(--ink); letter-spacing: -.025em; }
body[data-theme="soft"] h1.title .acc { color: var(--acc); font-style: italic; font-weight: 400; }
body[data-theme="soft"] h1.title .cur { display: none; }

body[data-theme="topo"] h1.title { font: 600 44px/1.05 'Space Grotesk'; color: var(--ink); letter-spacing: -.025em; }
body[data-theme="topo"] h1.title .acc { color: var(--acc); }
body[data-theme="topo"] h1.title .cur { display: none; }

h1.title .cur {
  display: inline-block; width: 11px; height: .9em; background: var(--acc); margin-left: 4px;
  vertical-align: -.06em; animation: blink 1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.sub { font-size: 16px; line-height: 1.55; margin: 0; max-width: 640px; }
body[data-theme="term"] .sub { color: #a3b3bd; }
body[data-theme="soft"] .sub { color: var(--muted); font-size: 17px; max-width: 580px; margin-bottom: 32px; }
body[data-theme="topo"] .sub { color: #b3c1cb; max-width: 600px; margin-bottom: 24px; font-size: 15px; }

/* ============================================================
   META STRIP
   ============================================================ */

.meta { margin-bottom: 22px; }

body[data-theme="term"] .meta, body[data-theme="topo"] .meta {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 8px; overflow: hidden;
  background: var(--card);
}
body[data-theme="term"] .meta-cell, body[data-theme="topo"] .meta-cell {
  padding: 12px 14px; border-right: 1px solid var(--line);
}
body[data-theme="term"] .meta-cell:last-child, body[data-theme="topo"] .meta-cell:last-child { border-right: 0; }

body[data-theme="soft"] .meta {
  display: flex; gap: 28px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  margin: 0 0 32px; font-size: 13px;
}
body[data-theme="soft"] .meta-cell { padding: 0; border: 0; }

.meta-cell .k {
  font: 500 10px 'JetBrains Mono'; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 4px; display: block;
}
.meta-cell .v { font: 500 13px 'IBM Plex Sans'; color: var(--ink); }
body[data-theme="soft"] .meta-cell .v { font: 500 14px 'Inter'; color: var(--ink); }
body[data-theme="topo"] .meta-cell .v { font: 500 13px 'Inter'; }

@media (max-width: 720px) {
  body[data-theme="term"] .meta, body[data-theme="topo"] .meta { grid-template-columns: repeat(2, 1fr); }
  body[data-theme="term"] .meta-cell:nth-child(2), body[data-theme="topo"] .meta-cell:nth-child(2) { border-right: 0; }
  body[data-theme="term"] .meta-cell:nth-child(1), body[data-theme="term"] .meta-cell:nth-child(2),
  body[data-theme="topo"] .meta-cell:nth-child(1), body[data-theme="topo"] .meta-cell:nth-child(2) { border-bottom: 1px solid var(--line); }
  body[data-theme="soft"] .meta { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   CALLOUT / WARN
   ============================================================ */

.warn { margin-bottom: 22px; }

body[data-theme="term"] .warn {
  border: 1px solid #5a2424; background: linear-gradient(180deg, #2a1414, #1a0e0e);
  border-radius: 6px; padding: 14px 18px;
  display: flex; gap: 14px; font-size: 14px; line-height: 1.5; align-items: flex-start;
}
body[data-theme="term"] .warn-tag {
  font: 700 10px 'JetBrains Mono'; letter-spacing: .15em; color: #ff9999;
  background: #3a1818; padding: 4px 8px; border-radius: 3px; height: fit-content;
  white-space: nowrap; flex-shrink: 0;
}
body[data-theme="term"] .warn p { margin: 0; color: #f0d8d8; }
body[data-theme="term"] .warn strong { color: #ffb8b8; }
body[data-theme="term"] .warn code { color: var(--acc); background: #2a1c14; padding: 1px 5px; border-radius: 2px; }

body[data-theme="soft"] .warn {
  background: #f8e8c8; border: 1px solid #d4a85a; border-left: 4px solid var(--acc2);
  padding: 18px 22px; border-radius: 4px;
  display: flex; gap: 14px; align-items: flex-start;
}
body[data-theme="soft"] .warn-tag {
  /* re-skin the tag as a circular icon */
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--acc2); color: var(--ink);
  display: grid; place-items: center; font: 800 16px/1 'Fraunces', serif;
  letter-spacing: 0; padding: 0;
  font-size: 0;
}
body[data-theme="soft"] .warn-tag::before { content: '!'; font-size: 18px; }
body[data-theme="soft"] .warn p { margin: 0; font-size: 14px; color: #5a4116; line-height: 1.5; }
body[data-theme="soft"] .warn strong { color: var(--ink); }
body[data-theme="soft"] .warn code { background: #f0e0a8; color: var(--ink); padding: 1px 5px; border-radius: 2px; font-size: .9em; }

body[data-theme="topo"] .warn {
  background: linear-gradient(180deg, #3a1818, #2a1414); border: 1px solid #5a2a2a;
  border-radius: 8px; padding: 14px 18px;
  display: flex; gap: 14px; align-items: flex-start;
}
body[data-theme="topo"] .warn-tag {
  width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%;
  background: var(--bad); color: #2a0a18;
  display: grid; place-items: center; font: 700 16px/1 'Space Grotesk';
  letter-spacing: 0; padding: 0; font-size: 0;
}
body[data-theme="topo"] .warn-tag::before { content: '!'; font-size: 18px; }
body[data-theme="topo"] .warn p { margin: 0; color: #f0d8d8; font-size: 14px; line-height: 1.5; }
body[data-theme="topo"] .warn strong { color: #ffd0d8; }
body[data-theme="topo"] .warn code { color: var(--acc); background: #2a1818; padding: 1px 5px; border-radius: 2px; }

/* warn variant: amber (post-download) */
body[data-theme="term"] .warn.warn-amber { border-color:#5a4524; background:linear-gradient(180deg,#2a2014,#1a160e); }
body[data-theme="term"] .warn.warn-amber .warn-tag { background:#3a2c14; color:#ffd590; }
body[data-theme="term"] .warn.warn-amber p { color: #f0e2c8; }
body[data-theme="term"] .warn.warn-amber strong { color: #ffe6b8; }
body[data-theme="term"] .warn.warn-amber code { background:#3a2c14; }
body[data-theme="soft"] .warn.warn-amber { background: #f0e0bc; border-color: #c08818; border-left-color: #c08818; }
body[data-theme="topo"] .warn.warn-amber { background: linear-gradient(180deg,#3a2a14,#2a1f10); border-color: #5a4424; }
body[data-theme="topo"] .warn.warn-amber .warn-tag { background: var(--info); color: #2a1a08; }
body[data-theme="topo"] .warn.warn-amber p { color: #f0e2c8; }
body[data-theme="topo"] .warn.warn-amber strong { color: #ffe0b8; }

/* ============================================================
   FRAME (the chrome around the drop zone — TERM only)
   ============================================================ */

.frame {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  margin-bottom: 18px; position: relative;
}
.frame-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid var(--line); font: 500 11px 'JetBrains Mono';
  letter-spacing: .08em; color: var(--dim); text-transform: uppercase;
}
.frame-head .lights { display: flex; gap: 6px; margin-right: 6px; }
.frame-head .lights span { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.frame-head .lights span:first-child { background: var(--bad); }
.frame-head .lights span:nth-child(2) { background: var(--info); }
.frame-head .lights span:last-child { background: var(--good); }
.frame-body { padding: 18px; }

/* SOFT + TOPO: flatten — no frame chrome around drop */
body[data-theme="soft"] .frame, body[data-theme="topo"] .frame {
  background: transparent; border: 0; border-radius: 0;
}
body[data-theme="soft"] .frame-head, body[data-theme="topo"] .frame-head { display: none; }
body[data-theme="soft"] .frame-body, body[data-theme="topo"] .frame-body { padding: 0; }

/* ============================================================
   DROP ZONE
   ============================================================ */

.drop {
  display: block; cursor: pointer; position: relative;
  margin: 0 0 16px; transition: all .15s;
}
.drop input { display: none; }

/* TERM */
body[data-theme="term"] .drop {
  border: 1px dashed #3a4a55; border-radius: 6px;
  background: linear-gradient(180deg, #0e1417, #141c20);
  padding: 36px 18px; text-align: center;
}
body[data-theme="term"] .drop:hover, body[data-theme="term"] .drop.hover {
  border-color: var(--acc); box-shadow: 0 0 0 3px #f0a83020;
}
body[data-theme="term"] .drop::before, body[data-theme="term"] .drop::after {
  content:''; position: absolute; width: 14px; height: 14px;
  border-color: var(--acc); border-style: solid;
}
body[data-theme="term"] .drop::before { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
body[data-theme="term"] .drop::after { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }
body[data-theme="term"] .drop-icon {
  font: 500 32px 'JetBrains Mono'; color: var(--acc); margin-bottom: 8px; line-height: 1;
}
body[data-theme="term"] .drop-icon::before { content: '[ + ]'; }
body[data-theme="term"] .drop-icon svg { display: none; }
body[data-theme="term"] .drop-prompt { font: 600 16px 'IBM Plex Sans'; color: var(--ink); margin-bottom: 4px; }
body[data-theme="term"] .drop-hint { font: 400 12px 'JetBrains Mono'; color: var(--dim); }

/* SOFT */
body[data-theme="soft"] .drop {
  background: var(--paper2); border: 2px dashed #b8a880; border-radius: 6px;
  padding: 56px 24px; text-align: center;
}
body[data-theme="soft"] .drop:hover, body[data-theme="soft"] .drop.hover {
  border-color: var(--acc); background: #f0e3c8;
}
body[data-theme="soft"] .drop::after {
  content: 'Drop zone';
  position: absolute; top: -1px; right: -1px; background: var(--ink); color: var(--paper);
  font: 500 10px 'JetBrains Mono'; letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 0 6px 0 6px;
}
body[data-theme="soft"] .drop-icon {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--ink); color: var(--acc2);
  display: grid; place-items: center; font-size: 0;
}
body[data-theme="soft"] .drop-icon svg { display: block; width: 24px; height: 24px; }
body[data-theme="soft"] .drop-prompt { font: 600 17px 'Inter'; color: var(--ink); margin-bottom: 6px; }
body[data-theme="soft"] .drop-hint { font: 400 13px 'JetBrains Mono'; color: var(--dim); }

/* TOPO */
body[data-theme="topo"] .drop {
  background: var(--card); border: 1px solid var(--line2); border-radius: 10px;
  padding: 36px 24px; text-align: center; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
body[data-theme="topo"] .drop::before {
  content:''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(0deg, #2a4a5a40 1px, transparent 1px), linear-gradient(90deg, #2a4a5a40 1px, transparent 1px);
  background-size: 16px 16px;
}
body[data-theme="topo"] .drop::after {
  content:''; position: absolute; top: 0; bottom: 0; right: 0; width: 8px;
  background: repeating-linear-gradient(0deg, var(--acc) 0 6px, transparent 6px 14px);
  opacity: .4;
}
body[data-theme="topo"] .drop:hover, body[data-theme="topo"] .drop.hover {
  border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc);
}
body[data-theme="topo"] .drop-icon {
  width: 48px; height: 48px; border-radius: 8px; background: var(--bg);
  border: 1px solid var(--acc); color: var(--acc);
  display: grid; place-items: center; flex-shrink: 0;
  position: relative; z-index: 1;
  margin: 0; font-size: 0;
}
body[data-theme="topo"] .drop-icon svg { display: block; width: 22px; height: 22px; }
body[data-theme="topo"] .drop-prompt { font: 600 16px 'Space Grotesk'; color: var(--ink); margin-bottom: 2px; position: relative; z-index: 1; text-align: left; }
body[data-theme="topo"] .drop-hint { font: 400 12px 'IBM Plex Mono'; color: var(--dim); position: relative; z-index: 1; text-align: left; }

.filename { margin-top: .75rem; font: 500 13px 'JetBrains Mono'; color: var(--info); word-break: break-all; }
body[data-theme="topo"] .filename { color: var(--acc); width: 100%; flex-basis: 100%; position: relative; z-index: 1; text-align: left; }
body[data-theme="soft"] .filename { color: var(--acc); }

/* ============================================================
   CTA + status
   ============================================================ */

.cta {
  display: inline-flex; align-items: center; gap: 10px;
  border: 0; cursor: pointer;
  padding: 12px 22px; border-radius: 4px;
  transition: all .15s; background: var(--acc);
}
body[data-theme="term"] .cta {
  color: #1a1206; font: 700 13px 'JetBrains Mono'; letter-spacing: .1em;
  text-transform: uppercase; box-shadow: 0 4px 0 var(--acc2);
}
body[data-theme="term"] .cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--acc2); }
body[data-theme="soft"] .cta {
  background: var(--ink); color: var(--paper); font: 600 15px 'Inter'; letter-spacing: .02em;
  padding: 14px 28px;
}
body[data-theme="soft"] .cta:hover:not(:disabled) { background: var(--acc); color: var(--paper); }
body[data-theme="topo"] .cta {
  background: var(--acc); color: #08161a; font: 600 14px 'Space Grotesk';
  padding: 12px 24px; border-radius: 8px;
}
body[data-theme="topo"] .cta:hover:not(:disabled) { background: var(--acc2); }
.cta:disabled { background: var(--line); color: var(--dim); cursor: not-allowed; box-shadow: none; transform: none; }
body[data-theme="soft"] .cta:disabled { background: #c8bfa8; color: #8a7d65; }

/* status line */
.status { margin-top: 14px; min-height: 1.5em; font-size: 14px; }
.status.ok { color: var(--good); }
.status.error { color: var(--bad); }
.spinner {
  display: inline-block; width: 1em; height: 1em; border: 2px solid var(--line);
  border-top-color: var(--acc); border-radius: 50%; animation: spin .8s linear infinite;
  vertical-align: -2px; margin-right: .5em;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   SUPPORT CARDS (.supgrid > .supcard)
   ============================================================ */

.supgrid { display: grid; gap: 14px; margin-top: 24px; }
body[data-theme="term"] .supgrid { grid-template-columns: 1fr 1fr; }
body[data-theme="soft"] .supgrid { grid-template-columns: 1fr; gap: 16px; margin-top: 0; }
body[data-theme="topo"] .supgrid { grid-template-columns: 1fr 1fr; }
@media (max-width: 720px) {
  body[data-theme="term"] .supgrid, body[data-theme="topo"] .supgrid { grid-template-columns: 1fr; }
}

.supcard { padding: 18px; }
body[data-theme="term"] .supcard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
body[data-theme="soft"] .supcard { background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 24px; }
body[data-theme="topo"] .supcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; }

.supcard h3 { margin: 0 0 4px; }
body[data-theme="term"] .supcard h3 { font: 700 12px 'JetBrains Mono'; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); }
/* SOFT: strip the leading "// " and use serif */
body[data-theme="soft"] .supcard h3 {
  font: 600 18px 'Fraunces', serif; color: var(--ink); display: block;
  font-feature-settings: "ss01";
}
body[data-theme="topo"] .supcard h3 { font: 600 15px 'Space Grotesk'; color: var(--ink); }

.supcard p { margin: 0 0 14px; font-size: 13px; color: var(--dim); line-height: 1.5; }
body[data-theme="soft"] .supcard p { color: #6a5a40; }

.suplinks { display: flex; gap: 6px; }
body[data-theme="term"] .suplinks { flex-direction: column; }
body[data-theme="soft"] .suplinks { flex-wrap: wrap; gap: 8px; }
body[data-theme="topo"] .suplinks { flex-wrap: wrap; gap: 6px; }

.suplinks a {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; border-bottom: 0;
}
body[data-theme="term"] .suplinks a {
  padding: 8px 12px; background: var(--card2); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font: 500 13px 'IBM Plex Sans';
}
body[data-theme="term"] .suplinks a:hover { border-color: var(--acc); background: #1a2226; text-decoration: none; }
body[data-theme="soft"] .suplinks a {
  padding: 9px 14px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  color: var(--ink); font: 500 13px 'Inter';
}
body[data-theme="soft"] .suplinks a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); border-bottom-color: var(--ink); }
body[data-theme="soft"] .suplinks a:hover svg { color: var(--paper); }
body[data-theme="topo"] .suplinks a {
  padding: 7px 12px; background: var(--card2); border: 1px solid var(--line2); border-radius: 6px;
  color: var(--ink); font: 500 12.5px 'Inter';
}
body[data-theme="topo"] .suplinks a:hover { border-color: var(--acc); color: var(--acc); }

.suplinks svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--acc); }
body[data-theme="topo"] .suplinks svg { width: 13px; height: 13px; }
.suplinks .arr { margin-left: auto; color: var(--dim); font-family: 'JetBrains Mono'; font-size: 12px; }
body[data-theme="soft"] .suplinks .arr, body[data-theme="topo"] .suplinks .arr { display: none; }
.suplinks img { width: 14px; height: 14px; flex-shrink: 0; }

/* ============================================================
   POST-DOWNLOAD INSTRUCTIONS
   ============================================================ */

.postwarn { display: none; }
.postwarn ol { margin: .5rem 0 0 1.25rem; padding: 0; }
.postwarn ol li { margin-bottom: 6px; line-height: 1.6; }

.copy-path {
  display: inline-flex; align-items: baseline; gap: 6px;
  cursor: pointer; user-select: none;
  border-radius: 3px; padding: 0 4px;
  transition: background .12s, outline-color .12s;
  outline: 1px solid transparent;
}
.copy-path:hover { outline-color: var(--acc); background: color-mix(in srgb, var(--acc) 10%, transparent); }
.copy-path:focus-visible { outline-color: var(--acc); outline-offset: 2px; }
.copy-path code { background: transparent; padding: 0; }
.copy-path .copy-ind {
  font-size: .85em; opacity: .55; transition: opacity .12s, transform .15s;
  filter: grayscale(.4);
}
.copy-path:hover .copy-ind { opacity: 1; filter: none; }
.copy-path.copied .copy-ind { filter: none; opacity: 1; transform: scale(1.15); }
.copy-path.copied { outline-color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.copy-hint {
  font-size: .82em; color: var(--dim); margin-left: 4px;
  font-family: 'JetBrains Mono', monospace;
}
body[data-theme="soft"] .copy-hint { font-family: 'Inter'; font-size: .85em; }

/* ============================================================
   FOOTER
   ============================================================ */

.foot { margin-top: 28px; flex-wrap: wrap; gap: 8px; display: flex; justify-content: space-between; }
body[data-theme="term"] .foot {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px;
  font: 400 11px 'JetBrains Mono'; color: var(--dim); background: var(--card);
}
body[data-theme="soft"] .foot {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line);
  font: 500 12px 'JetBrains Mono'; color: var(--dim); letter-spacing: .05em;
}
body[data-theme="topo"] .foot {
  margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line);
  font: 500 11px 'IBM Plex Mono'; color: var(--dim); letter-spacing: .05em;
}
.foot .acc { color: var(--acc); }

/* ============================================================
   FORM ROW (multi page)
   ============================================================ */

.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 720px) { .row3 { grid-template-columns: 1fr; } }
.field label {
  display: block; font: 500 11px 'JetBrains Mono'; letter-spacing: .1em; text-transform: uppercase;
  color: var(--dim); margin-bottom: 6px;
}
.select {
  width: 100%; padding: 10px 12px; font: 500 13px 'IBM Plex Sans'; color: var(--ink);
  background: var(--card2); border: 1px solid var(--line); border-radius: 4px;
  appearance: none; padding-right: 32px;
  background-repeat: no-repeat; background-position: right 12px center;
  cursor: pointer;
}
body[data-theme="term"] .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23f0a830' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}
body[data-theme="soft"] .select {
  background: var(--paper); border-color: var(--line); font-family: 'Inter';
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%238a7d65' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  font-size: 14px; padding: 10px 32px 10px 12px;
}
body[data-theme="topo"] .select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%234dd0c8' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  border-radius: 8px; font-family: 'Inter';
}
.select:focus { outline: 0; border-color: var(--acc); }
.select:disabled { opacity: .5; cursor: not-allowed; }

/* ============================================================
   KANBAN BOARDS (multi_dev: pick a map, set per-channel widths)
   ============================================================ */

.kanban {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 0 0 14px;
}
@media (max-width: 880px) { .kanban { grid-template-columns: 1fr; } }

.board {
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 12px; opacity: .55; transition: opacity .15s, border-color .15s, background .15s;
  cursor: pointer; position: relative;
  /* Allow grid track to shrink below the longest unbreakable word
     (densityMap_*.gdm) — without this, soft theme's narrower main
     gets blown out by the kanban. */
  min-width: 0;
}
body[data-theme="topo"] .board { border-radius: 10px; }
body[data-theme="soft"] .board { border-radius: 4px; }
.board:hover:not(.active) { opacity: .8; border-color: var(--line2); }
.board.active {
  opacity: 1; border-color: var(--acc);
  box-shadow: 0 0 0 1px var(--acc);
}
body[data-theme="term"] .board.active { background: linear-gradient(180deg, var(--card), var(--card2)); }
body[data-theme="soft"] .board.active { background: var(--card2); }
body[data-theme="topo"] .board.active { background: linear-gradient(180deg, var(--card), var(--panel2)); }

.board-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.board-head input[type="radio"] { accent-color: var(--acc); margin: 0; flex-shrink: 0; }
.board-head label { display: flex; align-items: baseline; gap: 8px; flex: 1; cursor: pointer; min-width: 0; }
.board-name {
  font: 600 14px 'JetBrains Mono'; color: var(--ink); letter-spacing: .04em;
  text-transform: uppercase;
}
body[data-theme="soft"] .board-name { font: 600 16px 'Fraunces', serif; letter-spacing: 0; text-transform: none; }
body[data-theme="topo"] .board-name { font: 600 14px 'Space Grotesk'; letter-spacing: -.005em; text-transform: none; }
.board-file {
  font: 400 11px 'JetBrains Mono'; color: var(--dim); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
body[data-theme="soft"] .board-file { font-size: 12px; }

.board-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.board-tbl th, .board-tbl td { padding: 6px 4px; text-align: left; vertical-align: middle; }
.board-tbl thead th {
  font: 500 10px 'JetBrains Mono'; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dim); border-bottom: 1px solid var(--line); padding-bottom: 6px;
}
.board-tbl tbody th {
  font: 500 12px 'JetBrains Mono'; color: var(--ink); white-space: nowrap;
}
body[data-theme="soft"] .board-tbl tbody th { font: 500 13px 'Inter'; }
body[data-theme="topo"] .board-tbl tbody th { font: 500 12px 'IBM Plex Mono'; }
.board-tbl .mirror { color: var(--dim); }
.board-tbl tfoot th, .board-tbl tfoot td {
  border-top: 1px solid var(--line); padding-top: 8px;
  font: 600 12px 'JetBrains Mono'; color: var(--ink);
}
.board-tbl tfoot td { color: var(--acc); }
.board-tbl tfoot td.warn { color: var(--bad); }

.board-tbl select {
  width: 100%; padding: 4px 22px 4px 8px;
  font: 500 12px 'JetBrains Mono'; color: var(--ink);
  background-color: var(--card2); border: 1px solid var(--line); border-radius: 4px;
  appearance: none; cursor: pointer;
  background-repeat: no-repeat; background-position: right 6px center;
}
body[data-theme="term"] .board-tbl select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%23f0a830' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
}
body[data-theme="soft"] .board-tbl select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%238a7d65' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  background-color: var(--paper);
}
body[data-theme="topo"] .board-tbl select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'><path d='M2 4l3 3 3-3' stroke='%234dd0c8' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>");
  border-radius: 6px;
}
.board-tbl select:focus { outline: 0; border-color: var(--acc); }
.board-tbl select:disabled {
  opacity: .65; cursor: not-allowed; background-image: none;
  padding-right: 8px;
}

.linkmark { color: var(--dim); margin-left: 4px; opacity: .7; font-size: .9em; }

.explain {
  padding: 14px 16px; font: 500 12px/1.7 'JetBrains Mono';
  white-space: pre; overflow-x: auto; margin: 8px 0 18px;
}
body[data-theme="term"] .explain { background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; }
body[data-theme="soft"] .explain { background: var(--ink); color: #d4c5a8; border-radius: 4px; padding: 16px 20px; }
body[data-theme="soft"] .explain .a { color: var(--acc2); }
body[data-theme="soft"] .explain .g { color: #9bb872; }
body[data-theme="soft"] .explain .c { color: #d4c5a8; }
body[data-theme="soft"] .explain .d { color: #8a7d65; }
body[data-theme="topo"] .explain { background: var(--bg); border: 1px solid var(--line); border-radius: 8px; font-family: 'IBM Plex Mono'; font-size: 12.5px; }
.explain .a { color: var(--acc); }
.explain .g { color: var(--good); }
.explain .c { color: var(--info); }
.explain .d { color: var(--dim); }

.dev-banner {
  padding: 8px 16px; font: 700 11px 'JetBrains Mono';
  letter-spacing: .15em; text-transform: uppercase; text-align: center;
  border-radius: 6px; margin: 0 0 18px;
}
body[data-theme="term"] .dev-banner {
  background: repeating-linear-gradient(45deg, var(--bad) 0 12px, color-mix(in srgb, var(--bad) 70%, var(--bg)) 12px 24px);
  color: var(--bg);
}
body[data-theme="term"] .dev-banner span { background: var(--bg); color: var(--bad); padding: 2px 8px; border-radius: 2px; margin-right: 8px; }
body[data-theme="soft"] .dev-banner {
  background: repeating-linear-gradient(45deg, var(--ink), var(--ink) 10px, #2a2118 10px, #2a2118 20px);
  color: var(--acc2); border-radius: 4px;
}
body[data-theme="soft"] .dev-banner span { background: var(--acc2); color: var(--ink); padding: 2px 8px; border-radius: 2px; margin-right: 8px; }
body[data-theme="topo"] .dev-banner {
  background: color-mix(in srgb, var(--bad) 20%, var(--card)); color: var(--bad);
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); border-radius: 8px;
}
body[data-theme="topo"] .dev-banner span { background: var(--bad); color: var(--void); padding: 2px 8px; border-radius: 2px; margin-right: 8px; }

/* ============================================================
   COMING-SOON PAGE
   ============================================================ */

.cs-wrap { min-height: 100vh; display: flex; flex-direction: column; max-width: 960px; margin: 0 auto; position: relative; z-index: 1; }
body[data-theme="term"] .cs-wrap { padding: 28px 36px; }
body[data-theme="soft"] .cs-wrap { padding: 56px 64px; }
body[data-theme="topo"] .cs-wrap { padding: 36px 44px; }
@media (max-width: 720px) { .cs-wrap { padding: 20px 18px !important; } }

.cs-mid { flex: 1; display: grid; gap: 36px; align-items: center; padding: 40px 0; }
body[data-theme="term"] .cs-mid { grid-template-columns: 1.1fr 1fr; }
body[data-theme="soft"] .cs-mid { grid-template-columns: 1fr; place-items: center; text-align: center; padding: 60px 0; }
body[data-theme="topo"] .cs-mid { grid-template-columns: 1.1fr 1fr; }
@media (max-width: 720px) {
  body[data-theme="term"] .cs-mid, body[data-theme="topo"] .cs-mid { grid-template-columns: 1fr; gap: 20px; padding: 24px 0; }
}

.cs-tag {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 24px;
  font: 600 10px 'JetBrains Mono'; letter-spacing: .25em; text-transform: uppercase;
}
body[data-theme="term"] .cs-tag {
  color: var(--acc); border: 1px solid #f0a83055; background: #f0a83010;
  padding: 6px 12px; border-radius: 999px;
}
body[data-theme="soft"] .cs-tag {
  color: var(--acc); border: 2px solid var(--acc); background: color-mix(in srgb, var(--paper) 70%, transparent);
  padding: 8px 14px; border-radius: 2px; transform: rotate(-2deg);
  font: 700 11px 'JetBrains Mono';
}
body[data-theme="topo"] .cs-tag {
  color: var(--info); border: 1px solid #ffb54744; background: #ffb54718;
  padding: 6px 14px; border-radius: 999px;
  font: 500 11px 'IBM Plex Mono';
}
.cs-tag .blink { width: 6px; height: 6px; background: currentColor; border-radius: 50%; animation: blink 1.4s ease-in-out infinite; }

.cs-h1 { margin: 0 0 16px; }
body[data-theme="term"] .cs-h1 {
  font: 800 76px/.9 'IBM Plex Sans'; letter-spacing: -.04em; color: var(--ink);
}
body[data-theme="term"] .cs-h1 .ghost { color: transparent; -webkit-text-stroke: 1.5px var(--acc); display: block; }
body[data-theme="soft"] .cs-h1 {
  font: 400 88px/.9 'Fraunces', serif; font-style: italic; letter-spacing: -.03em; color: var(--ink);
  margin-bottom: 8px;
}
body[data-theme="soft"] .cs-h1 .ghost { font-weight: 800; font-style: normal; display: block; color: var(--acc); -webkit-text-stroke: 0; }
body[data-theme="topo"] .cs-h1 {
  font: 600 88px/.9 'Space Grotesk'; letter-spacing: -.04em; color: var(--ink);
}
body[data-theme="topo"] .cs-h1 .ghost {
  background: linear-gradient(120deg, var(--acc) 0%, var(--acc2) 50%, var(--info) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 0; display: block;
}

.cs-tagline { font-size: 16px; line-height: 1.6; max-width: 460px; margin: 0 0 24px; }
body[data-theme="term"] .cs-tagline, body[data-theme="topo"] .cs-tagline { color: #a3b3bd; }
body[data-theme="soft"] .cs-tagline { color: var(--muted); font-size: 17px; max-width: 460px; margin: 24px auto 36px; }

.cs-back {
  display: inline-flex; align-items: center; gap: 10px; padding: 11px 20px;
  text-decoration: none;
}
body[data-theme="term"] .cs-back {
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  border-radius: 4px; font: 500 13px 'JetBrains Mono';
}
body[data-theme="term"] .cs-back:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }
body[data-theme="soft"] .cs-back {
  background: transparent; border: 1px solid var(--ink); color: var(--ink);
  font: 500 14px 'Inter'; border-radius: 4px; padding: 12px 22px;
}
body[data-theme="soft"] .cs-back:hover { background: var(--ink); color: var(--paper); }
body[data-theme="topo"] .cs-back {
  background: var(--card); border: 1px solid var(--line2); color: var(--ink);
  border-radius: 8px; font: 500 13px 'Space Grotesk';
}
body[data-theme="topo"] .cs-back:hover { border-color: var(--acc); color: var(--acc); text-decoration: none; }

.cs-road {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px;
  font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.7;
}
body[data-theme="topo"] .cs-road { border-radius: 10px; font-family: 'IBM Plex Mono'; }
body[data-theme="soft"] .cs-road {
  background: transparent; border: 0; padding: 0; font-family: 'Inter';
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 480px; margin: 0 auto 36px;
}
.cs-road h4 {
  margin: 0 0 12px; font: 700 10px 'JetBrains Mono'; letter-spacing: .15em;
  text-transform: uppercase; color: var(--dim);
}
body[data-theme="soft"] .cs-road h4 { display: none; }

.cs-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.cs-row:last-child { border: 0; }
body[data-theme="soft"] .cs-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  padding: 16px; gap: 12px;
}
body[data-theme="soft"] .cs-row:last-child { border: 1px solid var(--line); }

.cs-row .id { color: var(--dim); flex-shrink: 0; min-width: 18px; }
body[data-theme="soft"] .cs-row .id { font: 600 11px 'JetBrains Mono'; color: var(--dim); letter-spacing: .12em; }
.cs-row .name { color: var(--ink); flex: 1; font: 500 13px 'IBM Plex Sans'; }
body[data-theme="soft"] .cs-row .name { font: 600 14px 'Inter'; }
body[data-theme="topo"] .cs-row .name { font: 500 13px 'Inter'; }
.cs-row .stat {
  font-size: 10px; padding: 2px 8px; border-radius: 2px; letter-spacing: .1em;
  text-transform: uppercase; flex-shrink: 0;
}
.cs-row .stat.q { background: color-mix(in srgb, var(--acc) 15%, transparent); color: var(--acc); }
.cs-row .stat.r { background: color-mix(in srgb, var(--good) 15%, transparent); color: var(--good); }
body[data-theme="soft"] .cs-row .stat { display: none; }