/* bSTOCK RADAR — design system lifted from stonksonchain.lol's actual shipped
 * CSS: Sora for display, JetBrains Mono for every number, near-black moss-green
 * ground, one chartreuse accent reserved for the thing that matters. Value is
 * carried by bar length, not type size. */

:root {
  --page: #030705;
  --panel: #050d07;
  --card-hi: #0c1911;
  --card: #0a1810;
  --edge: #142619;
  --edge-hi: #22402c;
  --rule: #1c3322;
  --ink: #eef5ee;
  --ink-2: #c6d4c8;
  --ink-dim: #7d947f;
  --ink-faint: #55695c;
  --accent: #b9f73e;
  --accent-dim: rgba(185, 247, 62, 0.10);
  --accent-line: rgba(185, 247, 62, 0.40);
  --down: #ff6b6b;
  --down-dim: rgba(255, 107, 107, 0.10);
  --pad-flap: #9ad46a;
  --pad-fourmeme: #d9a0f0;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
  --sans: "Sora", -apple-system, system-ui, sans-serif;
  --gutter: clamp(18px, 3.4vw, 40px);
}

* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }
html { color-scheme: dark; scroll-behavior: smooth; }
body {
  background: var(--page);
  background-image: radial-gradient(1000px 420px at 50% -160px, rgba(185, 247, 62, 0.06), transparent 70%);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100vh;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }
button { font: inherit; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.site-header, main, .site-footer { width: min(1440px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

/* ── header ──────────────────────────────────────────────── */
.site-header { display: flex; align-items: center; padding-block: 20px 18px; gap: 16px; }
.brand { font-weight: 800; font-size: 19px; letter-spacing: -0.02em; white-space: nowrap; }
.brand-sub { font-family: var(--mono); font-weight: 500; font-size: 9px; letter-spacing: 0.3em; color: var(--ink-dim); margin-left: 8px; vertical-align: 2px; }
.tabs { display: flex; gap: 4px; font-family: var(--mono); font-size: 12px; margin-left: 22px; }
.tab { color: var(--ink-dim); padding: 5px 13px; border: 1px solid transparent; border-radius: 999px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--accent); background: var(--accent-dim); border-color: var(--accent-line); }
.header-meta { display: flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin-left: auto; }
.chain-pill { color: var(--ink-dim); border: 1px solid var(--edge); border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.chain-pill::before { content: "●"; color: var(--accent); margin-right: 6px; font-size: 8px; vertical-align: 1px; }
.chain-pill.bad::before { color: var(--down); }

/* ── hero ────────────────────────────────────────────────── */
.hero { padding-block: 26px 22px; }
.hero h1 { font-size: clamp(32px, 5.4vw, 54px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }
.hero-sub { color: var(--ink-dim); font-size: 14px; margin-top: 12px; max-width: 66ch; }

/* ── rails ───────────────────────────────────────────────── */
.rail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rail-title { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.16em; color: var(--accent); }
.rail-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

.complex { padding-block: 18px 4px; }
.complex-list { list-style: none; padding: 0 0 4px; margin: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; }
.complex-list li {
  flex: 0 0 auto; min-width: 148px;
  display: flex; flex-direction: column; gap: 5px;
  background: linear-gradient(180deg, var(--card-hi), var(--card) 60%);
  border: 1px solid var(--edge); border-radius: 12px; padding: 11px 14px 12px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.complex-list li:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.cx-sym { font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--accent); letter-spacing: 0.05em; }
.cx-vol { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.cx-meta { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.skeleton-cx, .skeleton-lane { color: var(--ink-faint); font-family: var(--mono); font-size: 11px; padding: 10px 14px; }

/* ── hottest complexes (bar variant of the SNAPSHOT card) ───── */
.hcx-list li { min-width: 168px; }
.hcx-bar { height: 3px; border-radius: 2px; background: var(--edge); overflow: hidden; margin-top: 1px; }
.hcx-bar-fill { height: 100%; background: var(--accent); border-radius: 2px; }

/* ── crown changes ───────────────────────────────────────── */
.crown-strip { padding-block: 18px 4px; }
.crown-list { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; padding-bottom: 4px; }
.crown-pill { flex: 0 0 auto; border-color: var(--accent-line); background: var(--accent-dim); cursor: default; }
.crown-pill a, .crown-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 13px; }
.crown-txt { font-family: var(--sans); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.crown-txt b { color: var(--accent); font-family: var(--mono); }
.crown-age { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }

/* ── board (per-anchor hero + runners-up cards) ─────────────── */
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.stock-card {
  background: linear-gradient(180deg, var(--card-hi), var(--card) 60%);
  border: 1px solid var(--edge); border-radius: 12px; padding: 14px 16px 12px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.stock-card:hover { border-color: var(--edge-hi); transform: translateY(-2px); }
.sc-head { display: flex; align-items: baseline; gap: 8px; }
.sc-sym { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.03em; }
.sc-name { font-family: var(--sans); font-size: 11px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-hero { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sc-hero-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.sc-hero-sym { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--accent); }
.sc-hero-pct { font-family: var(--mono); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 5px; }
.sc-hero-pct.up { color: var(--accent); background: var(--accent-dim); }
.sc-hero-pct.down { color: var(--down); background: var(--down-dim); }
.sc-hero-val { font-family: var(--mono); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sc-bar { height: 4px; border-radius: 3px; background: var(--edge); overflow: hidden; }
.sc-bar-fill { height: 100%; background: var(--accent); border-radius: 3px; }
.sc-sub { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--edge); padding-top: 8px; }
.sc-sub li a { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }
.sc-sub li a:hover { color: var(--accent); }
.sc-sub li a span:last-child { color: var(--ink-2); }

/* ── open lanes ──────────────────────────────────────────── */
.lanes { padding-block: 22px 8px; }
.lane-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.lane {
  display: inline-flex; max-width: 100%;
  font-family: var(--mono); font-size: 14px; color: var(--ink-dim);
  border: 1px solid var(--edge); border-radius: 10px; background: rgba(255,255,255,.015);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.lane.clickable { cursor: pointer; }
.lane:hover { border-color: var(--accent-line); transform: translateY(-1px); background: var(--accent-dim); }
.lane a { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 15px; color: inherit; max-width: 100%; }
.lane a:hover { color: inherit; }
.lane:hover b { color: var(--accent); }
.lane b { color: var(--ink); font-weight: 700; }
.lane span { font-family: var(--sans); font-size: 12.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.lane .pad-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; opacity: 0.85; }
.pad-dot.pad-flap { background: var(--pad-flap); }
.pad-dot.pad-fourmeme { background: var(--pad-fourmeme); }
.pad-dot.pad-both { background: linear-gradient(135deg, var(--pad-flap), var(--pad-fourmeme)); }

.not-yet { margin-top: 16px; border-top: 1px dashed var(--edge); padding-top: 12px; }
.not-yet summary { cursor: pointer; font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.not-yet summary::marker { color: var(--ink-faint); }
.muted-strip { margin-top: 10px; }
.muted-strip .lane { opacity: 0.55; }

/* ── board section shared head ───────────────────────────── */
.board-section { padding-block: 26px 8px; }
.board-section .rail-head { align-items: center; margin-bottom: 14px; }

.anchor-filter-pill {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px;
  color: var(--accent); background: var(--accent-dim); border: 1px solid var(--accent-line);
  border-radius: 999px; padding: 5px 6px 5px 10px;
}
.anchor-filter-pill b { font-weight: 700; }
.anchor-filter-pill .pad-dot { margin: 0; }
.anchor-filter-pill button {
  cursor: pointer; background: transparent; border: none; color: var(--accent); font-size: 15px;
  line-height: 1; width: 18px; height: 18px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; transition: background 0.15s ease;
}
.anchor-filter-pill button:hover { background: rgba(255,255,255,.1); }
.search-box { margin-left: auto; }
.search-box input {
  background: rgba(255,255,255,.02); border: 1px solid var(--edge); border-radius: 8px;
  color: var(--ink); font-family: var(--mono); font-size: 12px; padding: 7px 12px; width: 220px;
}
.search-box input::placeholder { color: var(--ink-faint); }
.search-box input:focus { outline: none; border-color: var(--edge-hi); }

/* ── leaderboard: detail-list pattern ────────────────────── */
.detail-list {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: 40px minmax(180px, 1.4fr) 110px 100px 130px 88px 260px 64px;
  font-variant-numeric: tabular-nums; align-items: stretch;
}
.detail-list li { display: contents; }
.detail-list li > * { display: flex; align-items: center; padding: 11px 8px; border-bottom: 1px solid var(--edge); min-width: 0; }
.dl-head { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-faint); padding: 10px 8px 8px; border-bottom: 1px solid var(--edge-hi); cursor: pointer; user-select: none; transition: color 0.15s ease; }
.dl-head:hover { color: var(--ink); }
.dl-head.accent { color: var(--accent); }
.dl-head.accent:hover { color: var(--accent); }
.dl-head.right { justify-content: flex-end; }
.dl-head.center { justify-content: center; cursor: default; }
.dl-head.center:hover { color: var(--ink-faint); }
.dl-head.sorted-asc, .dl-head.sorted-desc { color: var(--ink); }
.dl-head.sorted-asc::after { content: " ↑"; color: var(--accent); }
.dl-head.sorted-desc::after { content: " ↓"; color: var(--accent); }

.dl-body-row.clickable { cursor: pointer; }
.detail-list .dl-body-row:hover > * { background: var(--accent-dim); }
.detail-list .dl-body-row > .d-sym a { position: relative; z-index: 1; }
.detail-list .dl-body-row > .d-pair a { position: relative; z-index: 1; }
.d-rank { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.d-name { gap: 10px; flex-direction: column; align-items: flex-start !important; gap: 1px; }
.d-sym { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.d-fullname { font-family: var(--sans); font-size: 10.5px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.d-pair { font-family: var(--mono); font-size: 12px; }
.d-pair .pad-dot { margin-right: 6px; }
.d-price { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); justify-content: flex-end; }
.d-mcap { font-family: var(--mono); font-size: 13px; font-weight: 700; justify-content: flex-end; }

/* View-scope control. Sits directly above the table it filters so the count it
   withholds is read in the same glance as the list it produced. */
.floor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--edge);
  background: rgba(255, 255, 255, 0.015);
}
.floor-bar .fb-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-right: 2px;
}
.floor-bar .fb-note {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-left: auto;
}
.floor-bar .fb-note b { color: var(--ink); }
.floor-bar .fb-warn {
  color: #e0a33e;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
/* "we cannot value this", not "this is worth nothing" — deliberately reads as an
   absence rather than as a number so it can't be mistaken for a $0 valuation. */
.nopx {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px dashed var(--edge);
  border-radius: 4px;
  padding: 2px 5px;
  cursor: help;
  white-space: nowrap;
}
.d-tiers { justify-content: flex-end; gap: 12px; font-family: var(--mono); font-size: 11.5px; }
.htier { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 40px; }
.htier .htier-val { font-weight: 700; }
.htier .htier-label { color: var(--ink-faint); font-size: 8.5px; letter-spacing: 0.04em; }
.htier.t50 .htier-val { color: var(--ink-2); }
.htier.t100 .htier-val { color: var(--accent); }
.htier.t200 .htier-val { color: var(--pad-fourmeme); }
/* Marks a coin whose holder counts are still being backfilled from chain, so a
   low number reads as "counting" rather than "unpopular". */
.sync-badge {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em;
  color: #f0b429; border: 1px solid rgba(240, 180, 41, 0.35);
  background: rgba(240, 180, 41, 0.08);
  border-radius: 4px; padding: 1px 5px; margin-left: 8px; white-space: nowrap;
  align-self: center; animation: syncPulse 2.4s ease-in-out infinite;
}
@keyframes syncPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
/* Not a transient state, so it doesn't pulse: this coin's history simply starts
   at its bStock pool and always will. */
.sync-badge.partial {
  color: var(--ink-faint); border-color: var(--edge);
  background: rgba(255, 255, 255, 0.03); animation: none;
}
.ca-inline {
  font-family: var(--mono); font-size: 10px; color: var(--ink-faint); cursor: pointer;
  border: 1px solid var(--edge); border-radius: 5px; padding: 1px 6px; margin-left: 8px;
}
.ca-inline:hover { color: var(--accent); border-color: var(--accent-line); }

.d-gmgn { justify-content: center !important; }
.gmgn-icon { image-rendering: pixelated; border-radius: 3px; display: block; flex: 0 0 auto; }
.gmgn-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 26px; border-radius: 7px; border: 1px solid var(--edge);
  background: rgba(255,255,255,.02); cursor: pointer; text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.gmgn-btn:hover { border-color: var(--accent-line); background: var(--accent-dim); transform: translateY(-1px); }
.gmgn-all-btn {
  margin-left: 10px; cursor: pointer; background: transparent; color: var(--ink-dim);
  border: 1px solid var(--edge); border-radius: 999px; padding: 6px 14px 6px 10px;
  font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 7px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.gmgn-all-btn:hover { color: var(--accent); border-color: var(--accent-line); background: var(--accent-dim); }
.gmgn-all-btn:active { opacity: 0.8; }
/* .rail-head is a flex row with its own 10px gap, so a second margin-left on each
   sibling would double the spacing and push the group onto its own line early. */
.gmgn-all-btn + .gmgn-all-btn { margin-left: 0; padding-right: 12px; }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono);
  font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  border-radius: 4px; padding: 2px 6px; border: 1px solid var(--edge); color: var(--ink-faint);
}
.badge.flap { color: var(--pad-flap); border-color: rgba(154, 212, 106, 0.3); }
.badge.fourmeme { color: var(--pad-fourmeme); border-color: rgba(217, 160, 240, 0.3); }
.launch-empty { padding: 28px 4px; color: var(--ink-faint); font-family: var(--mono); font-size: 12px; text-align: center; }

/* ── overlap ─────────────────────────────────────────────── */
.vs-controls { display: flex; gap: 10px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
select {
  background: var(--card); color: var(--ink); border: 1px solid var(--edge); border-radius: 8px;
  padding: 9px 12px; font-size: 13px; font-family: var(--sans); min-width: 240px;
}
select:focus { outline: none; border-color: var(--edge-hi); }
.go-btn {
  cursor: pointer; background: var(--accent); color: var(--panel); border: none; border-radius: 999px;
  padding: 9px 20px; font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  transition: opacity 0.15s ease;
}
.go-btn:hover { opacity: 0.85; }
.go-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.swap-btn {
  cursor: pointer; background: transparent; border: 1px solid var(--edge); color: var(--ink-dim);
  border-radius: 8px; padding: 9px 12px; font-family: var(--mono);
}
.swap-btn:hover { border-color: var(--edge-hi); color: var(--ink); }
.err-text { color: var(--down); font-family: var(--mono); font-size: 12px; }

.overlap-result { display: none; grid-template-columns: 1.1fr 1fr; gap: 16px; }

.vs-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--card-hi), var(--card) 55%);
  border: 1px solid var(--edge); border-radius: 16px; padding: 18px 20px 15px;
}
.vs-card .ticker-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.vs-card .ticker-symbol { font-weight: 800; font-size: 17px; }
.vs-card .ticker-name { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
.vs-card .coin-fdv {
  font-family: var(--mono); font-weight: 800; font-size: 40px; letter-spacing: -0.02em;
  background: none; color: var(--accent); font-variant-numeric: tabular-nums;
}
.common-sub { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); margin: 4px 0 12px; }
.vs-card .runners { list-style: none; margin: auto 0 0; padding: 10px 0 0; border-top: 1px solid var(--edge); display: flex; gap: 14px; flex-wrap: wrap; }

.tiers-panel {
  background: var(--card); border: 1px solid var(--edge); border-radius: 16px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 14px; justify-content: center;
}
.tier-bar-row { display: grid; grid-template-columns: 44px 1fr 46px; align-items: center; gap: 10px; }
.tier-tag { font-family: var(--mono); font-size: 11px; color: var(--ink-dim); }
.tier-num { font-family: var(--mono); font-weight: 700; text-align: right; color: var(--ink); }
.cv-bar { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); }
.cv-bar > i { display: block; height: 4px; border-radius: 2px; background: var(--accent); width: 0%; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.detail-formula { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); margin: 6px 0 4px; }
.price-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); padding-top: 6px; border-top: 1px solid var(--edge); }
.price-row .n { color: var(--ink); font-weight: 700; }

/* ── footer ──────────────────────────────────────────────── */
.site-footer {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--edge); padding-block: 24px 30px; margin-top: 20px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
}

/* ── toast ───────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(10px);
  background: var(--card-hi); border: 1px solid var(--edge-hi); color: var(--ink);
  padding: 9px 16px; border-radius: 8px; font-size: 12px; font-family: var(--mono);
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .detail-list { grid-template-columns: 32px minmax(140px, 1fr) 90px 90px 160px; }
  .detail-list li > .d-price, .detail-list li > .dl-head:nth-child(4) { display: none; }
  .detail-list li > .d-gmgn, .detail-list li > .dl-head:last-child { display: none; }
  /* Targeted by data-key rather than position: the nth-child rules above already
     shift every time a column is added, and this one must not. */
  .detail-list li > .d-hold, .dl-head[data-key="median_hold_days"] { display: none; }
  .overlap-result { grid-template-columns: 1fr; }
  .gmgn-all-btn { margin-left: 0; }
}
@media (max-width: 720px) {
  .site-header { flex-wrap: wrap; }
  .tabs { margin-left: 0; order: 3; width: 100%; }
  .board-section .rail-head { flex-direction: column; align-items: flex-start; }
  .search-box { margin-left: 0; }
  .search-box input { width: 100%; }
  .detail-list { grid-template-columns: 28px minmax(120px, 1fr) 80px 140px; }
  .d-tiers { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .complex-list li:hover, .lane:hover { transform: none; }
}

/* ── lane launch counts ──────────────────────────────────── */
/* Traded count, not the raw registration count: the "...7777" vanity farms
   dominate `launch_count`, so showing the total would overstate activity. */
.lane-count {
  font-family: var(--mono) !important; font-size: 11px !important; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--edge-hi);
  color: var(--ink-faint) !important; max-width: none !important;
}
.lane-count.live { color: var(--accent) !important; border-color: var(--accent); background: var(--accent-dim); }
.lane-count.pending { opacity: 0.7; font-style: italic; }

/* ── ON THE CURVE table (6 cols; the leaderboard's grid is 7) ─ */
#curveTable { grid-template-columns: 40px minmax(150px, 1.1fr) minmax(300px, 1fr) 160px 64px 64px; }
.curve-toggle { display: flex; gap: 4px; margin-left: auto; }
.curve-pill {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 5px; cursor: pointer;
  background: transparent; border: 1px solid var(--edge-hi); color: var(--ink-faint);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.curve-pill:hover { color: var(--ink); }
.curve-pill.active { color: var(--accent); border-color: var(--accent); background: var(--accent-dim); }
.d-ca {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint);
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.d-ca:hover { color: var(--accent); }
.d-num { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); }
.d-num.right { justify-content: flex-end; gap: 8px; }
.curve-bar {
  display: inline-block; width: 70px; height: 5px; border-radius: 3px;
  background: var(--edge-hi); overflow: hidden; flex: 0 0 auto;
}
.curve-bar > i { display: block; height: 100%; background: var(--accent); }
.curve-row .d-num b { color: var(--ink); }
.curve-tag {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.06em;
  margin-left: 6px; padding: 1px 4px; border-radius: 3px;
  border: 1px solid var(--edge-hi); color: var(--ink-faint);
}
/* Drops the contract column (5 visible cells, 5 tracks — keep these in step,
   since `display: contents` means a mismatch silently shifts every column). */
@media (max-width: 900px) {
  #curveTable { grid-template-columns: 32px minmax(110px, 1fr) 140px 56px 64px; }
  #curveTable li > .d-ca { display: none; }
}

/* ── hold time: leaderboard cell + per-wallet panel ───────── */
/* The cell is its own click target (opens the panel) while the rest of the row
   goes to the overlap tool, hence the separate hover treatment. */
.d-hold { justify-content: flex-end; font-family: var(--mono); font-size: 12px; }
.d-hold.clickable { cursor: pointer; }
.d-hold .hold-val {
  padding: 2px 6px; border-radius: 5px; border: 1px solid var(--edge-hi);
  color: var(--ink-dim); transition: color 0.15s ease, border-color 0.15s ease;
}
.d-hold:hover .hold-val { color: var(--accent); border-color: var(--accent); }

#holdTable { grid-template-columns: 40px minmax(220px, 1.2fr) 110px 88px 88px 80px; }
#holdTable .d-num { justify-content: flex-end; }
#holdTable .d-num.muted { color: var(--ink-faint); }
.d-wallet { font-family: var(--mono); font-size: 11.5px; }
.d-wallet a { color: var(--ink-dim); text-decoration: none; }
.d-wallet a:hover { color: var(--accent); }
/* Marks a wallet whose current position started later than its first-ever buy,
   i.e. it round-tripped — the reason HELD and FIRST IN are separate columns. */
.round-trip { color: #e0a33e !important; }

.hold-new { color: #f0616d; }
.hold-mid { color: #e0a33e; }
.hold-old { color: #4ec9a5; }

.hold-stats {
  display: flex; flex-wrap: wrap; align-items: center; gap: 28px;
  padding: 14px 8px 18px; border-bottom: 1px solid var(--edge);
}
.hs-kpis { display: flex; gap: 26px; }
.hs-kpi { display: flex; flex-direction: column; gap: 2px; }
.hs-val { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--ink); }
.hs-lab { font-family: var(--mono); font-size: 9px; letter-spacing: 0.09em; color: var(--ink-faint); }
.hs-dist { flex: 1 1 260px; min-width: 240px; }
.hs-bar {
  display: flex; height: 8px; border-radius: 4px; overflow: hidden;
  background: var(--edge-hi); margin-bottom: 8px;
}
.hs-seg { display: block; height: 100%; }
.hs-seg.hold-new { background: #f0616d; }
.hs-seg.hold-mid { background: #e0a33e; }
.hs-seg.hold-old { background: #4ec9a5; }
.hs-seg.hold-vet { background: #4a8ef0; }
.hs-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-family: var(--mono); font-size: 9.5px; color: var(--ink-faint);
}
.hs-legend i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.hs-legend i.hold-new { background: #f0616d; }
.hs-legend i.hold-mid { background: #e0a33e; }
.hs-legend i.hold-old { background: #4ec9a5; }
.hs-legend i.hold-vet { background: #4a8ef0; }

/* 5 visible cells, 5 tracks — see the curve table note above. */
@media (max-width: 900px) {
  #holdTable { grid-template-columns: 32px minmax(140px, 1fr) 90px 74px 70px; }
  #holdTable li > *:nth-child(5) { display: none; }
}