/* =========================================================================
   dexwatch — design system
   Light-mode-first fintech. Tokens drive every surface so the Tweaks panel
   can flip theme / accent / density / radius / font with attribute + var swaps.
   ========================================================================= */

/* ---- Fonts (loaded via <link> in HTML) ---- */

:root {
  /* font families — overridable by tweak */
  --font-ui: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* accent — overridable by tweak */
  --accent: #00c884;          /* mint, primary */
  --accent-2: #16b6cf;        /* cyan, secondary */
  --accent-ink: #00321f;      /* text on accent */

  /* radius scale — overridable by tweak (--radius-base) */
  --radius-base: 14px;
  --r-sm: calc(var(--radius-base) * 0.5);
  --r-md: var(--radius-base);
  --r-lg: calc(var(--radius-base) * 1.5);
  --r-pill: 999px;

  /* density — overridable by tweak (--density) sets row height + paddings */
  --density: 1;
  --row-h: calc(46px * var(--density));
  --pad-cell: calc(14px * var(--density));

  /* ---- light theme palette (default) ---- */
  --bg: #f6f8f7;
  --bg-elev: #ffffff;
  --bg-sunken: #eef1f0;
  --surface-hover: #f2f5f4;
  --ink: #0c1512;
  --ink-2: #3a4744;
  --ink-3: #6b7976;
  --ink-faint: #9aa6a3;
  --line: #e3e8e6;
  --line-strong: #d2d9d7;
  --up: #00a06a;
  --down: #e0556a;
  --warn: #d98a2b;
  --shadow-sm: 0 1px 2px rgba(12,21,18,.04), 0 1px 3px rgba(12,21,18,.06);
  --shadow-md: 0 4px 16px rgba(12,21,18,.06), 0 1px 3px rgba(12,21,18,.05);
  --shadow-lg: 0 18px 50px -12px rgba(12,21,18,.18), 0 6px 18px rgba(12,21,18,.08);
  --accent-wash: color-mix(in oklch, var(--accent) 12%, var(--bg-elev));
  --accent-line: color-mix(in oklch, var(--accent) 32%, var(--line));
}

html[data-theme="dark"] {
  --bg: #0a100e;
  --bg-elev: #121a17;
  --bg-sunken: #0c1411;
  --surface-hover: #18221e;
  --ink: #eaf2ef;
  --ink-2: #aebbb7;
  --ink-3: #7d8a86;
  --ink-faint: #5a6663;
  --line: #1f2a26;
  --line-strong: #2a3631;
  --up: #2ee29a;
  --down: #ff6b81;
  --warn: #f0a94b;
  --accent-ink: #00271a;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow-md: 0 6px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.6);
  --accent-wash: color-mix(in oklch, var(--accent) 16%, var(--bg-elev));
  --accent-line: color-mix(in oklch, var(--accent) 38%, var(--line));
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  transition: background .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }
img, svg { display: block; }
input { font: inherit; }
::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); }

/* numbers everywhere look tabular */
.num, td .num, .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* ---- layout primitives ---- */
.wrap { width: min(1240px, 100% - 48px); margin-inline: auto; }
.wrap-wide { width: min(1440px, 100% - 48px); margin-inline: auto; }
@media (max-width: 640px){ .wrap, .wrap-wide { width: min(1240px, 100% - 32px); } }

.row { display: flex; align-items: center; }
.row-g { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-faint); }

/* ---- type scale ---- */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance; }
.display { font-size: clamp(38px, 5.4vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }

/* =========================================================================
   Components
   ========================================================================= */

/* ---- top nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--bg) 78%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-link {
  padding: 8px 12px; border-radius: var(--r-sm);
  color: var(--ink-2); font-weight: 600; font-size: 14.5px;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--surface-hover); color: var(--ink); }
.nav-link.active { color: var(--ink); background: var(--accent-wash); }
.nav-link .wl-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 2px;
  border-radius: var(--r-pill); font-family: var(--font-mono);
  font-size: 10.5px; font-weight: 600; line-height: 1;
  background: var(--accent); color: var(--accent-ink); vertical-align: 1px;
}
.nav-actions { display: flex; align-items: center; gap: 10px; }

/* ---- logo wordmark ---- */
.logo { display: inline-flex; align-items: center; gap: 9px; }
.logo-mark { width: 26px; height: 26px; flex: none; }
.logo-text { font-weight: 800; font-size: 19px; letter-spacing: -0.04em; }
.logo-text b { color: var(--accent); font-weight: 800; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; border-radius: var(--r-sm);
  font-weight: 650; font-size: 14.5px; white-space: nowrap;
  transition: transform .08s ease, background .15s, border-color .15s, box-shadow .15s;
  border: 1px solid transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { box-shadow: 0 4px 14px color-mix(in oklch, var(--accent) 40%, transparent); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: var(--bg-elev); }
.btn-ghost:hover { background: var(--surface-hover); border-color: var(--ink-faint); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.icon-btn {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: var(--ink-2); transition: background .15s, color .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--ink); }

/* ---- badges / chips ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; line-height: 1;
  background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line);
}
.badge-type { background: var(--accent-wash); color: color-mix(in oklch, var(--accent) 70%, var(--ink)); border-color: var(--accent-line); }
.chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 10px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line);
}
.chip-chain { font-family: var(--font-mono); font-size: 11px; letter-spacing: -0.01em; }

/* ---- exchange monogram badge (logo placeholder) ---- */
.mono-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 30%; font-weight: 800; color: #07110d;
  font-family: var(--font-ui); letter-spacing: -0.03em;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.mono-badge.sz-40 { width: 40px; height: 40px; font-size: 16px; }
.mono-badge.sz-34 { width: 34px; height: 34px; font-size: 14px; }
.mono-badge.sz-32 { width: 32px; height: 32px; font-size: 13px; }
.mono-badge.sz-22 { width: 22px; height: 22px; font-size: 10px; }
.mono-badge.sz-56 { width: 56px; height: 56px; font-size: 22px; border-radius: 26%; }

/* ---- card ---- */
.card {
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 20px; }

/* ---- delta values ---- */
.delta { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.delta.up { color: var(--up); }
.delta.down { color: var(--down); }
.delta.flat { color: var(--ink-faint); }
.delta::before { content: ""; }
.delta.up::before { content: "▲ "; font-size: 8px; }
.delta.down::before { content: "▼ "; font-size: 8px; }

/* ---- labels (highlight tags) ---- */
.lblrow { display: flex; flex-wrap: wrap; gap: 6px; }
.lbl {
  display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill); font-size: 11px; font-weight: 650; line-height: 1;
  letter-spacing: -0.005em; white-space: nowrap; border: 1px solid transparent;
}
.lbl-hot { background: var(--accent-wash); color: color-mix(in oklch, var(--accent) 72%, var(--ink)); border-color: var(--accent-line); }
.lbl-new { background: color-mix(in oklch, var(--accent-2) 14%, var(--bg-elev)); color: color-mix(in oklch, var(--accent-2) 72%, var(--ink)); border-color: color-mix(in oklch, var(--accent-2) 32%, var(--line)); }
.lbl-neutral { background: var(--bg-sunken); color: var(--ink-2); border-color: var(--line); }
.lbl-xs { height: 18px; padding: 0 7px; font-size: 10px; margin-left: 6px; vertical-align: 1px; }

/* ---- dexwatch score / star rating ---- */
.stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1.5px; white-space: nowrap; }
.stars-b { color: var(--line-strong); }
.stars-f { position: absolute; left: 0; top: 0; overflow: hidden; color: var(--warn); white-space: nowrap; }
.rk-score { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.rk-score-n { font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.rk-score-d { color: var(--ink-faint); font-size: 10px; }
.rk-score-n.tier-hi { color: var(--up); }
.rk-score-n.tier-mid { color: var(--ink); }
.rk-score-n.tier-low { color: var(--warn); }
.rk-score-n.tier-warn { color: var(--down); }

/* ---- live data status pill ---- */
.data-status {
  display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px;
  border-radius: var(--r-pill); font-size: 12px; font-weight: 600;
  background: var(--bg-sunken); color: var(--ink-2); border: 1px solid var(--line);
}
.data-status .ds-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.data-status[data-state="live"] { background: color-mix(in oklch, var(--up) 12%, var(--bg-elev)); color: var(--up); border-color: color-mix(in oklch, var(--up) 30%, var(--line)); }
.data-status[data-state="live"] .ds-dot { background: var(--up); box-shadow: 0 0 0 0 color-mix(in oklch, var(--up) 60%, transparent); animation: ds-pulse 1.8s infinite; }
.data-status[data-state="loading"] .ds-dot { background: var(--warn); animation: ds-blink 1s infinite; }
@keyframes ds-pulse { 0%{ box-shadow: 0 0 0 0 color-mix(in oklch, var(--up) 55%, transparent);} 70%{ box-shadow: 0 0 0 6px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} }
@keyframes ds-blink { 50%{ opacity: .3; } }

/* ---- sparkline ---- */
.spark { width: 92px; height: 30px; }
.spark path.line { fill: none; stroke-width: 1.6; }
.spark path.area { stroke: none; opacity: .14; }

/* =========================================================================
   Ranking table
   ========================================================================= */
.tablecard { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  position: sticky; top: 64px; z-index: 5;
  background: color-mix(in oklch, var(--bg-elev) 88%, transparent);
  backdrop-filter: blur(8px);
  text-align: right; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 12px var(--pad-cell); border-bottom: 1px solid var(--line);
  white-space: nowrap; user-select: none; cursor: pointer;
}
.tbl thead th.left { text-align: left; }
.tbl thead th.sortable:hover { color: var(--ink); }
.tbl thead th .sort-ind { opacity: 0; margin-left: 4px; font-size: 9px; }
.tbl thead th.sorted .sort-ind { opacity: 1; color: var(--accent); }
.tbl tbody td {
  height: var(--row-h); padding: 0 var(--pad-cell);
  border-bottom: 1px solid var(--line);
  text-align: right; font-size: 14px; white-space: nowrap;
}
.tbl tbody td.left { text-align: left; }
.tbl tbody tr { transition: background .12s; cursor: pointer; }
.tbl tbody tr:hover { background: var(--surface-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.rank-num { font-family: var(--font-mono); color: var(--ink-faint); font-size: 13px; width: 22px; }
.cell-name { display: flex; align-items: center; gap: 12px; }
.cell-name .nm { font-weight: 700; letter-spacing: -0.01em; }
.cell-name .tk { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
td .val { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.star { color: var(--ink-faint); transition: color .15s, transform .1s; }
.star:hover { color: var(--warn); transform: scale(1.15); }
.star.on { color: var(--warn); }

/* density toggle affects font on compact */
html[data-compact="1"] .tbl tbody td { font-size: 13px; }
html[data-compact="1"] { --row-h: calc(38px); --pad-cell: 11px; }

/* ---- segmented control ---- */
.seg { display: inline-flex; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
.seg button {
  height: 30px; padding: 0 13px; border-radius: calc(var(--r-sm) - 3px);
  font-size: 13px; font-weight: 600; color: var(--ink-3); white-space: nowrap;
  transition: background .15s, color .15s;
}
.seg button:hover { color: var(--ink); }
.seg button.on { background: var(--bg-elev); color: var(--ink); box-shadow: var(--shadow-sm); }

/* ---- search ---- */
.search-wrap { position: relative; }
.search {
  width: 100%; height: 56px; padding: 0 18px 0 50px;
  border-radius: var(--r-md); border: 1px solid var(--line-strong);
  background: var(--bg-elev); color: var(--ink); font-size: 16px; font-weight: 500;
  box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
}
.search::placeholder { color: var(--ink-faint); }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 16%, transparent); }
.search-ic { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-lg); overflow: hidden; display: none;
}
.search-results.open { display: block; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.sr-item:hover, .sr-item.hl { background: var(--surface-hover); }
.sr-item .nm { font-weight: 650; }
.sr-item .meta { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); }

/* ---- stat tiles ---- */
.stat-tile { padding: 16px 18px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--bg-elev); }
.stat-tile .lbl { font-size: 12px; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.stat-tile .big { font-family: var(--font-mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }

/* ---- pro / con ---- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px){ .proscons { grid-template-columns: 1fr; } }
.pc-list { display: flex; flex-direction: column; gap: 10px; }
.pc-item { display: flex; gap: 10px; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; }
.pc-item .ic { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; font-size: 11px; font-weight: 800; }
.pc-pro .ic { background: color-mix(in oklch, var(--up) 18%, var(--bg-elev)); color: var(--up); }
.pc-con .ic { background: color-mix(in oklch, var(--down) 16%, var(--bg-elev)); color: var(--down); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); margin-top: 80px; padding: 40px 0 56px; color: var(--ink-3); }
.footer a:hover { color: var(--ink); }

/* ---- misc ---- */
.divider { height: 1px; background: var(--line); border: none; }
.kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: var(--bg-sunken); color: var(--ink-3); }
[hidden] { display: none !important; }

/* ---- global command search ---- */
.nav-search-btn {
  display: inline-flex; align-items: center; gap: 9px;
  height: 40px; padding: 0 10px 0 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--bg-elev);
  color: var(--ink-3); font-weight: 600; font-size: 13.5px;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-search-btn:hover { background: var(--surface-hover); color: var(--ink); border-color: var(--ink-faint); }
.nav-search-btn svg { width: 16px; height: 16px; flex: none; }
.nav-search-btn .nsb-label { margin-right: 2px; }
.nav-search-btn .nsb-kbd {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--line);
  background: var(--bg-sunken); color: var(--ink-faint); line-height: 1.2;
}
@media (max-width: 1040px){
  .nav-search-btn { width: 40px; padding: 0; justify-content: center; gap: 0; }
  .nav-search-btn .nsb-label, .nav-search-btn .nsb-kbd { display: none; }
}

/* ---- "More" nav dropdown ---- */
.nav-more { position: relative; display: inline-flex; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: none; border: none; font-family: inherit; line-height: inherit;
}
.nav-more-chev { width: 14px; height: 14px; transition: transform .18s; opacity: .8; }
.nav-more.open .nav-more-chev { transform: rotate(180deg); }
.nav-more-panel {
  position: absolute; top: calc(100% + 12px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 216px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg, 0 14px 38px rgba(0,0,0,.16));
  padding: 7px; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transition: opacity .15s, visibility .15s, transform .15s; z-index: 70;
}
.nav-more::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.nav-more.open .nav-more-panel, .nav-more:hover .nav-more-panel {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.nav-more-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: background .13s, color .13s;
}
.nav-more-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-more-item.active { color: var(--accent); }
.nav-more-item .mi { width: 17px; height: 17px; flex: none; color: var(--ink-faint); }
.nav-more-item:hover .mi, .nav-more-item.active .mi { color: var(--accent); }
.nav-more-item .wl-count { margin-left: 4px; }

.cmdk-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 13vh 16px 16px;
  background: color-mix(in oklch, var(--ink) 34%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .16s ease;
}
.cmdk-overlay.open { opacity: 1; }
.cmdk {
  width: min(620px, 100%);
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column; max-height: 74vh;
  transform: translateY(-10px) scale(.985); transition: transform .18s ease;
}
.cmdk-overlay.open .cmdk { transform: none; }
.cmdk-input-row { display: flex; align-items: center; gap: 13px; padding: 15px 16px 15px 18px; border-bottom: 1px solid var(--line); }
.cmdk-search-ic { display: inline-flex; color: var(--ink-faint); flex: none; }
.cmdk-search-ic svg { width: 20px; height: 20px; }
.cmdk-input { flex: 1; border: none; background: none; outline: none; font-size: 17px; font-weight: 500; color: var(--ink); min-width: 0; }
.cmdk-input::placeholder { color: var(--ink-faint); }
.cmdk-esc {
  flex: none; font-family: var(--font-mono); font-size: 11px; color: var(--ink-3);
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg-sunken);
}
.cmdk-esc:hover { color: var(--ink); border-color: var(--ink-faint); }
.cmdk-results { overflow-y: auto; padding: 8px; scrollbar-width: thin; }
.cmdk-group-h {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 12px 12px 6px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 13px; padding: 9px 11px;
  border-radius: var(--r-sm); cursor: pointer; color: var(--ink);
}
.cmdk-item.hl { background: var(--accent-wash); }
.cmdk-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; }
.cmdk-ic.mono-badge { font-size: 14px; border-radius: 11px; }
.cmdk-ic-ac { background: var(--accent-wash); color: color-mix(in oklch, var(--accent) 72%, var(--ink)); border: 1px solid var(--accent-line); }
.cmdk-ic-ac svg { width: 18px; height: 18px; }
.cmdk-ic-pg { background: var(--bg-sunken); color: var(--ink-3); border: 1px solid var(--line); }
.cmdk-ic-pg svg { width: 17px; height: 17px; }
.cmdk-ic-gl { background: var(--bg-sunken); color: color-mix(in oklch, var(--accent) 55%, var(--ink-2)); border: 1px solid var(--line); }
.cmdk-ic-gl svg { width: 17px; height: 17px; }
.cmdk-tt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cmdk-tt .t { font-weight: 650; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-tt .s { font-size: 12px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-meta { margin-left: auto; flex: none; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); padding-left: 8px; }
.cmdk-go { flex: none; color: var(--ink-faint); opacity: 0; transition: opacity .12s, transform .12s; transform: translateX(-3px); }
.cmdk-go svg { width: 16px; height: 16px; }
.cmdk-item.hl .cmdk-go { opacity: 1; transform: none; }
.cmdk-empty { padding: 38px 24px; text-align: center; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; }
.cmdk-foot { display: flex; align-items: center; gap: 16px; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-faint); }
.cmdk-foot > span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-foot-r { margin-left: auto; }
.cmdk-fk { font-family: var(--font-mono); font-size: 11px; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--line); background: var(--bg-sunken); color: var(--ink-3); line-height: 1.3; }
@media (max-width: 560px){ .cmdk-foot > span:not(.cmdk-foot-r):not(:first-child) { display: none; } .cmdk-overlay { padding-top: 8vh; } }

/* ---- back to top ---- */
.to-top {
  position: fixed; right: 22px; bottom: 22px; z-index: 120;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--bg-elev); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md); color: var(--ink-2);
  display: grid; place-items: center;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .22s ease, transform .22s ease, background .15s, color .15s, border-color .15s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--ink); background: var(--surface-hover); border-color: var(--ink-faint); transform: translateY(-2px); }
.to-top svg { width: 20px; height: 20px; }
@media (max-width: 640px){ .to-top { right: 14px; bottom: 14px; width: 42px; height: 42px; } }

/* ---- appearance / tweaks popover ---- */
.set-host { position: relative; }
.set-pop {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 280px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  padding: 14px; transform-origin: top right;
  opacity: 0; transform: translateY(-6px) scale(.98); transition: opacity .16s ease, transform .16s ease;
}
.set-pop.open { opacity: 1; transform: translateY(0) scale(1); }
.set-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.set-body { display: flex; flex-direction: column; gap: 14px; }
.set-group { display: flex; flex-direction: column; gap: 7px; }
.set-lbl { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.set-seg { width: 100%; }
.set-seg button { flex: 1; padding: 0 6px; }
.swatch-row { display: flex; gap: 8px; }
.swatch {
  width: 34px; height: 34px; border-radius: var(--r-sm); border: 1px solid var(--line);
  display: grid; place-items: center; transition: border-color .15s, transform .08s; background: var(--bg-sunken);
}
.swatch span { width: 18px; height: 18px; border-radius: 50%; display: block; }
.swatch:hover { transform: translateY(-1px); }
.swatch.on { border-color: var(--sw); box-shadow: 0 0 0 2px color-mix(in oklch, var(--sw) 35%, transparent); }

/* ---- mobile nav ---- */
.nav-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--bg-elev); color: var(--ink); cursor: pointer; }
.nav-toggle:hover { background: var(--surface-hover); }
.nav-toggle svg { width: 20px; height: 20px; }
@media (max-width: 860px){
  .nav-toggle { display: inline-flex; }
  .nav-actions .btn { display: none; }
  .nav-search { display: none; }
  .nav-links {
    position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md); padding: 10px 16px 14px; display: none; z-index: 60;
  }
  .nav.nav-open .nav-links { display: flex; }
  .nav-links .nav-link { padding: 12px; font-size: 16px; border-radius: var(--r-sm); }
  /* "More" dropdown flattens into the mobile menu as a labelled group */
  .nav-more { display: block; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 8px; }
  .nav-more-btn { display: none; }
  .nav-more-panel {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; padding: 0; background: transparent; min-width: 0; gap: 2px;
  }
  .nav-more-item { padding: 12px; font-size: 16px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){ *, *::before, *::after { transition: none !important; animation: none !important; } }