/* Cryptoscan24 tracker and coin page styles. This was the inline <style> of
   app/index.php until 2026-10-29. Moved out so one cached copy serves every coin
   page instead of 110 KB travelling inside each HTML. index.php links it with
   ?v=<mtime>, so a deploy must give the file a new mtime (cp, not cp -p) or
   browsers keep the old copy until the day's cache runs out. */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #0A0D14;
  --bg2: #121724;
  --panel: #121724;
  --panel2: #121724;
  --border: #232B40;
  --border2: #D6DEE7;
  --text: #E9EEF8;
  --muted: #8E99B0;
  --green: #087E51;
  --green-dim: #087E51;
  --red: #D12A3D;
  --red-dim: #c23a52;
  --accent: #F0A500;
  /* the same amber is unreadable as type: 2.27:1 on the page ground.
     Fills keep the brand value, type uses this. */
  --accent-ink: #FFC84D;
  --accent2: #0E7C8A;
  --purple: #6D4AE0;
  --spike1: rgba(14, 21, 32, 0.10);
  --spike2: rgba(255, 93, 115, 0.14);
  --glow-green: 0 0 10px rgba(46, 230, 160, 0.5);
  --mono: "SF Mono", "JetBrains Mono", "Roboto Mono", ui-monospace, Menlo, monospace;
}

body {
  background:
    radial-gradient(1200px 600px at 12% -8%, rgba(77, 208, 225, 0.06), transparent 60%),
    radial-gradient(1000px 500px at 92% -5%, rgba(14, 21, 32, 0.05), transparent 55%),
    var(--bg);
  color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

.num, td.num, .price, .stat .v, .mktbar b { font-variant-numeric: tabular-nums; }

/* ---- market stats ticker ---- */
#mktBar {
  display: flex; align-items: center; gap: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96), rgba(244, 246, 249, 0.96));
  border-bottom: 1px solid var(--border);
  padding: 0 14px; height: 34px; min-height: 34px; flex: none;
  overflow-x: auto; white-space: nowrap;
  backdrop-filter: blur(8px);
}
#mktBar::-webkit-scrollbar { height: 0; }
.mkt-brand {
  display: flex; align-items: center; gap: 8px; padding-right: 16px;
  margin-right: 4px; border-right: 1px solid var(--border); height: 100%;
}
.mkt-logo { border-radius: 6px; vertical-align: middle;
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), #e8912f);
  display: grid; place-items: center; font-size: 13px;
  box-shadow: 0 0 12px rgba(14, 21, 32, 0.35);
}
.mkt-name { font-weight: 700; font-size: 12px; letter-spacing: 0.2px; }
.mkt-name span { color: var(--accent2); }
.mktbar {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 14px; height: 100%; font-size: 11.5px; color: var(--muted);
  border-right: 1px solid rgba(14, 21, 32, 0.6);
}
.mktbar b { color: var(--text); font-weight: 600; }
.mktbar .k { text-transform: uppercase; letter-spacing: 0.4px; font-size: 10px; }
.fng-pill {
  padding: 1px 8px; border-radius: 10px; font-weight: 700; font-size: 11px;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
header {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 8px 16px;
  background: linear-gradient(180deg, rgba(14, 21, 32, 0.55), rgba(14, 21, 32, 0.35));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px);
  flex-wrap: wrap;
}

h1 {
  font-size: 16px; font-weight: 700; letter-spacing: 0.2px;
  background: linear-gradient(90deg, #E9EEF8, #8E99B0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sub { font-size: 11px; color: var(--muted); }

.controls { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.controls label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--muted); }
.controls label.check { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 6px; cursor: pointer; }
.input-wrap {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 8px; color: var(--muted);
}
.input-wrap input {
  background: transparent; border: none; outline: none;
  color: var(--text); width: 60px; font-size: 13px;
}
.input-wrap select {
  background: transparent; border: none; outline: none;
  color: var(--text); font-size: 13px; cursor: pointer;
}
.input-wrap select option { background: var(--panel2); color: var(--text); }
#volAmt { width: 72px; }
.input-wrap #volTf { margin-left: 2px; font-weight: 600; color: var(--accent2); }
#applyBtn {
  background: linear-gradient(135deg, var(--accent), #e8912f); color: #16110a; border: none;
  border-radius: 7px; padding: 7px 20px; font-weight: 700;
  cursor: pointer; font-size: 12px; letter-spacing: 0.2px;
  box-shadow: 0 2px 12px rgba(14, 21, 32, 0.25);
}
#applyBtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
#applyBtn:active { transform: none; }

.status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.status-br { flex-basis: 100%; height: 0; }
@media (min-width: 1701px) { .status-br { display: none; } }   /* one row fits with room to spare */

/* Phones: the status row is the one thing that used to push the document wider
   than the screen, which made every page scroll sideways. Let it wrap, and let
   the tab group scroll inside itself rather than stretching its parent. */
@media (max-width: 820px) {
  .status { margin-left: 0; flex-wrap: wrap; row-gap: 6px; min-width: 0; }
  .tabs-row { flex-wrap: wrap; }
  .tabs-row > .tabs, .status > .tabs {
    max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* nothing on the page may extend the document itself */
  html, body { overflow-x: hidden; }
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.on { background: var(--green); box-shadow: var(--glow-green); animation: pulse 2s infinite; }
.dot.off { background: var(--red); }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* coin logo badge used in tables and lists */
.clogo {
  width: 18px; height: 18px; border-radius: 50%; vertical-align: middle;
  margin-right: 7px; background: var(--panel2); object-fit: cover;
  border: 1px solid var(--border); flex-shrink: 0;
}
.clogo.ph {
  display: inline-grid; place-items: center; font-size: 9px; font-weight: 700;
  color: var(--muted);
}

.banner {
  background: #3a2b12; color: #ffd27d; padding: 8px 16px;
  font-size: 12px; border-bottom: 1px solid #5a431c;
}
.hidden { display: none !important; }

#moversPanel { background: var(--panel); border-bottom: 1px solid var(--border); }
.movers-head { display: flex; align-items: center; gap: 14px; padding: 7px 16px; }
.movers-title { font-size: 12px; font-weight: 700; }
/* ---- segmented control ----------------------------------------------------
   One shared look for every mutually-exclusive filter group on the site: a
   recessed track with the selected item raised as a light pill. Applied to the
   Top Movers timeframes, the notification filters, the DEX source/timeframe
   switches and the chart tabs so they all read as the same control. */
.movers-tabs, .np-filters, .dx-tfs, .tabs {
  display: inline-flex; align-items: center; gap: 2px;
  background: rgba(14, 21, 32, .045);
  border: 1px solid var(--border);
  border-radius: 11px; padding: 3px;
}
.mtab, .nf, .dx-tf, .tab {
  background: transparent; border: 0; color: var(--muted);
  border-radius: 8px; padding: 5px 13px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; line-height: 1.35;
  white-space: nowrap; transition: color .12s ease, background .12s ease;
}
.mtab:hover, .nf:hover, .dx-tf:hover, .tab:hover {
  color: var(--text); background: rgba(14, 21, 32, .05);
}
.mtab.active, .nf.active, .dx-tf.active, .tab.active {
  background: #232B40; color: #E9EEF8; font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 21, 32, .45), 0 1px 0 rgba(14, 21, 32, .10) inset;
}
.mtab.active:hover, .nf.active:hover, .dx-tf.active:hover, .tab.active:hover {
  background: #2E3852; color: #E9EEF8;
}
.mtab-sep { width: 1px; height: 15px; background: var(--border2); margin: 0 3px; flex: none; }
@media (max-width: 700px) {
  .mtab, .nf, .dx-tf, .tab { padding: 5px 9px; font-size: 11px; }
}
.movers-info { font-size: 10px; color: var(--muted); margin-left: auto; }
#moversToggle {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 13px; padding: 2px 6px;
}
#moversToggle:hover { color: var(--text); }
/* The collapse control sat 28px past the right edge on a 375px screen, so on a
   phone it was the one button in the panel a finger could not reach. Pinned to
   the end of the row and given a real tap size. */
@media (max-width: 560px) {
  /* The row is nowrap and its children came to 412px in a 375px box, so the
     toggle was pushed off the end. The period tabs absorb the shortfall by
     scrolling inside themselves; everything else keeps its place. */
  .movers-head { gap: 6px; }
  .movers-tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .movers-tabs::-webkit-scrollbar { display: none; }
  #moversToggle { flex: 0 0 auto; padding: 6px 10px; font-size: 15px; }
  #moversInfo { display: none; }
}
.movers-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px;
  padding: 0 16px 10px;
}
/* Third column is the notification feed. Set as a class so closing the feed
   collapses the strip back to two columns instead of leaving a dead gap. */
.movers-body.with-notif {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(232px, 320px);
}
.movers-col h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; margin: 4px 0 6px; }
.mover-list { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
.mover-row {
  display: grid; grid-template-columns: 18px minmax(46px, 1.15fr) minmax(44px, 0.85fr) 66px 58px;
  gap: 6px; align-items: center; padding: 3px 7px;
  border-radius: 6px; cursor: pointer; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.mover-row:hover { background: var(--panel2); }
.mover-row .m-rank { color: var(--muted); font-size: 10px; }
.mover-row .m-sym { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mover-row .m-sym small { color: var(--muted); font-weight: 400; margin-left: 5px; }
.mover-row .m-px { color: var(--muted); text-align: right; font-family: var(--mono); }
.mover-row .m-vol { color: var(--accent2); text-align: right; font-size: 11px; font-family: var(--mono); }
.mover-row .m-chg { text-align: right; font-weight: 700; }
.mover-empty { color: var(--muted); font-size: 11px; padding: 4px 8px; }
@media (max-width: 800px) {
  /* Stacked, and the strip scrolls as one again — three independently
     scrolling boxes inside a panel this short is unusable on a phone.
     Everything here is prefixed with #moversPanel on purpose: the layout block
     further down sets min-height:0 on these same selectors, and without the
     extra specificity it wins on source order and collapses the columns to
     zero height. Display is left alone so #notifPanel.hidden still works. */
  #moversPanel .movers-body,
  #moversPanel .movers-body.with-notif { grid-template-columns: 1fr; overflow-y: auto; }
  #moversPanel .movers-col,
  #moversPanel #notifPanel { min-height: auto; overflow: visible; }
  #moversPanel .mover-list,
  #moversPanel #npBody { min-height: auto; overflow: visible; }
  #moversPanel .mover-list { min-height: 154px; }   /* 8 rows from the first layout, as on wide screens */
  /* "8 up / 6 down · … · live" wraps onto its own row on a phone and costs more
     height than this strip can spare; the columns already show the same thing. */
  #moversPanel .movers-info { display: none; }
  #notifPanel { border-left: none; padding-left: 0;
    border-top: 1px solid var(--border); padding-top: 8px; margin-top: 8px; }
}

main { flex: 1; display: flex; min-height: 0; }

/* The board is the product, and on a laptop the chrome above was eating the
   screen: header 301px + movers 238px + bars 101px left it the 180px floor,
   about five rows. The filters now collapse, and the board keeps a real share. */
.controls.collapsed { display: none; }
html[data-filters="0"] .controls { display: none; }   /* same state, before the script above runs */
.filters-toggle { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 6px 13px; font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; }
.filters-toggle:hover { color: var(--text); border-color: var(--accent-ink); }
.filters-toggle .chev { transition: transform .15s ease; }
.filters-toggle.open .chev { transform: rotate(180deg); }
main { min-height: 300px; }

/* body is height:100vh with overflow:hidden, so on a short viewport (a laptop
   with several browser toolbars, or landscape mobile) the fixed chrome above
   can add up to more than the screen and squeeze <main> — the coin table — to
   zero height, making the board vanish. Let the movers panel surrender space
   first and scroll inside itself, and keep a floor under the table so it is
   always at least a few rows tall. */
/* Let it surrender space, but never below its own header, and clip rather than
   bleed: with only min-height:0 it shrank to 1px on a short viewport while the
   48px header overflowed and painted straight over the coin table. */
/* capped so it cannot swallow the space the filters just gave back — it
   scrolls internally past this, and has its own collapse toggle */
#moversPanel { min-height: 132px; max-height: 32vh; display: flex; flex-direction: column; overflow: hidden; }
.movers-head { flex: none; }
.movers-body { min-height: 0; overflow: hidden; }
.movers-col { display: flex; flex-direction: column; min-height: 0; }
main { min-height: 180px; }

/* The strip's final size from the first layout. A column is 8 rows once the
   data is in (177px with the h4); the lists reserve that much, and on a wide
   screen the notification column scrolls inside the same height instead of
   stretching the row. Filling in after the first paint moved the board down
   by a hundred pixels (a layout shift of 0.1 on its own, 2026-10-28). */
.mover-list { min-height: 154px; }
@media (min-width: 801px) { #notifPanel { max-height: 177px; overflow-y: auto; } }

#burstBar {
  background: var(--panel); border-top: 1px solid var(--border);
  max-height: 150px; display: flex; flex-direction: column;
}
.burst-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 16px; font-size: 12px; border-bottom: 1px solid var(--border);
}
.burst-head input {
  width: 52px; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 5px; color: var(--text); padding: 2px 6px; font-size: 12px; outline: none;
}
.burst-list { overflow-y: auto; padding: 4px 10px 8px; }
.burst-row {
  display: grid; grid-template-columns: 52px minmax(70px, 1fr) 110px 90px 110px;
  gap: 10px; align-items: center; padding: 3px 8px;
  border-radius: 6px; cursor: pointer; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.burst-row:hover { background: var(--panel2); }
.burst-row .b-time { color: var(--muted); font-size: 10px; }
.burst-row .b-sym { font-weight: 700; }
.burst-row .b-amt { font-weight: 700; color: var(--accent-ink); text-align: right; }
.burst-row .b-px { color: var(--muted); text-align: right; }
.burst-row .b-chance { text-align: right; font-weight: 700; }

.fs-head {
  padding: 8px 16px; font-size: 12px; color: var(--muted);
  border-bottom: 1px solid var(--border); background: var(--panel);
}
.fs-row {
  display: grid; grid-template-columns: 64px minmax(80px, 1fr) 110px 110px 110px 40px;
  gap: 10px; align-items: center; padding: 8px 16px;
  border-bottom: 1px solid rgba(35,42,56,0.5); cursor: pointer;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.fs-row:hover { background: var(--panel2); }
.fs-ex {
  font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; text-align: center;
}
.fs-row .f-rate { font-weight: 800; }
.fs-row a { color: var(--muted); text-decoration: none; }
.fs-row a:hover { color: var(--accent-ink); }

.table-panel { flex: 1; overflow: auto; min-width: 0; }

table { width: 100%; border-collapse: collapse; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #131826, #0f131d);
  border-bottom: 1px solid var(--border2);
  padding: 9px 10px; text-align: left; font-size: 10.5px;
  color: var(--muted); font-weight: 700; cursor: pointer;
  white-space: nowrap; user-select: none; text-transform: uppercase; letter-spacing: 0.4px;
}
thead th:hover { color: var(--text); }
thead th.sorted { color: var(--accent-ink); }
th.num, td.num { text-align: right; }

tbody tr {
  border-bottom: 1px solid rgba(14, 21, 32, 0.5); cursor: pointer;
  transition: background 0.08s;
}
tbody tr:hover { background: var(--panel2); box-shadow: inset 3px 0 0 var(--accent2); }
tbody tr.selected { background: #182234; box-shadow: inset 3px 0 0 var(--accent); }
tbody tr.spike-warm { background: var(--spike1); }
tbody tr.spike-hot { background: var(--spike2); }
td { padding: 7px 10px; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.td-price, td.num { font-family: var(--mono); font-size: 12.5px; }

.sym { font-weight: 700; letter-spacing: 0.2px; }
.coin-cell { display: inline-flex; align-items: center; }
.coin-name { color: var(--muted); font-size: 11px; margin-left: 6px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--muted); }
.spike-badge {
  display: inline-block; padding: 1px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 700;
}
.spike-badge.hot { background: var(--red); color: #fff; box-shadow: 0 0 8px rgba(255,93,115,0.5); }
.spike-badge.warm { background: var(--accent); color: #1a1a1a; }
.loading-cell { text-align: center; color: var(--muted); padding: 40px !important; }
/* tall enough that the small print under the table starts below the fold, so
   the rows arriving do not push it 4,000px down in front of the reader */
tr.boot-row .loading-cell { height: 70vh; vertical-align: top; }

.mkt-seg { display: inline-flex; gap: 2px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.mkt-btn { background: transparent; border: 0; color: var(--muted); border-radius: 7px;
  padding: 5px 11px; font-size: 12px; font-weight: 700; cursor: pointer; }
.mkt-btn:hover { color: var(--text); }
.mkt-btn.on { background: #232B40; color: #E9EEF8; }
.fut-tag { display: inline-block; margin-left: 5px; font-size: 9px; font-weight: 800;
  letter-spacing: .04em; padding: 1px 5px; border-radius: 4px; vertical-align: middle;
  background: rgba(139,92,246,.16); color: #4C34A8; border: 1px solid rgba(139,92,246,.34); }
/* The coin panel is a board, not a column: chart on the left, the three
   reading sections down a right rail, Learning full width beneath both. */
.coin-grid {
  display: grid; flex: none;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  grid-template-areas:
    "chart news"
    "chart research"
    "chart ai"
    "written written"
    "learn learn";
  gap: 10px; padding: 10px 14px 14px;
}
.sec-chart    { grid-area: chart; display: flex; flex-direction: column; }
.sec-news     { grid-area: news; }
.sec-research { grid-area: research; }
.sec-ai       { grid-area: ai; }
.sec-learn    { grid-area: learn; }
/* the coin's own write-up: below the chart and the analysis panes, above
   Learning, which explains the tool rather than this coin */
#pair-seo     { grid-area: written; min-width: 0; }
/* min-width: 0 or a wide child would push its column past its share */
.coin-sec {
  min-width: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel2);
}
.pane-h {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 0; padding: 8px 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid var(--border);
  background: rgba(14, 21, 32, .02);
}
.sec-head .intervals { margin: 0; }
/* The chart is as tall as the rail it sits beside, so the rail must not grow
   without limit -- each section scrolls in its own box instead. Learning is
   exempt: it is full width, it is last, and its table is the whole section. */
.sec-news .pane, .sec-research .pane, .sec-ai .pane { max-height: 208px; overflow-y: auto; }

@media (max-width: 900px) {
  /* No room for two columns: one column, and nothing is height-capped. */
  .coin-grid {
    grid-template-columns: minmax(0, 1fr);
    /* `written` belongs in this template too. A grid item naming an area the
         template does not define lands in an implicit row after every named
         one, which put the coin write-up below Learning on narrow screens. */
      grid-template-areas: "chart" "news" "research" "ai" "written" "learn";
  }
  .sec-news .pane, .sec-research .pane, .sec-ai .pane { max-height: none; }
  .coin-grid #chart { min-height: 340px; }
}
/* Gainers/Losers are h2 now, for heading order — they are siblings of the
   other panels, not four levels under the page title. This keeps the size
   they had as h4. */
.mv-h { font-size: 13px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; }
.ai-noise { font-size: 12px; margin: 6px 0 2px; padding: 6px 10px; border-radius: 7px;
  background: rgba(14, 21, 32, .03); border: 1px solid var(--border); }
.ai-noise b { font-family: var(--mono); }
.ai-noise.pos { border-color: rgba(38,194,129,.35); }
.ai-noise.neg { border-color: rgba(240,97,109,.35); }
.spark-col { width: 110px; }
.spark { display: block; }

.tb {
  display: inline-block; font-size: 10px; padding: 1px 6px;
  border-radius: 8px; margin-right: 3px;
  background: var(--panel2); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.tb.up { color: var(--green); }
.tb.down { color: var(--red); }

.ai-badge {
  display: inline-block; font-size: 11px; font-weight: 700;
  padding: 1px 8px; border-radius: 9px; cursor: help;
  font-variant-numeric: tabular-nums;
}
.ai-badge.ai-up { background: rgba(38,194,129,0.18); color: var(--green); }
.ai-badge.ai-down { background: rgba(240,97,109,0.18); color: var(--red); }
.ai-badge.ai-flat { background: var(--panel2); color: var(--muted); }

.ai-score-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.ai-score { font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ai-label { font-size: 13px; font-weight: 700; padding: 3px 12px; border-radius: 12px; }
.ai-label.up { background: rgba(38,194,129,0.18); color: var(--green); }
.ai-label.down { background: rgba(240,97,109,0.18); color: var(--red); }
.ai-label.flat { background: var(--panel2); color: var(--muted); }
.ai-bar { flex: 1; height: 8px; background: var(--panel2); border-radius: 4px; position: relative; overflow: hidden; }
.ai-bar > div { position: absolute; top: 0; bottom: 0; }
.ai-list { list-style: none; }
.ai-list li {
  padding: 6px 10px; margin-bottom: 5px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.4;
}
.ai-pick {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  margin-bottom: 5px; border-radius: 7px; background: var(--panel2);
  border: 1px solid var(--border); font-size: 12px; cursor: pointer;
}
.ai-pick:hover { border-color: var(--accent-ink); }
.ai-pick .p-sym { font-weight: 700; min-width: 64px; }
.ai-pick .p-score { font-weight: 700; min-width: 44px; text-align: right; }
.ai-pick .p-why { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.ai-note { font-size: 11px; color: var(--muted); line-height: 1.5; }

.learn-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.learn-table th {
  text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.4px; padding: 5px 8px; border-bottom: 1px solid var(--border);
  position: static; background: transparent; cursor: default;
}
.learn-table td { padding: 5px 8px; border-bottom: 1px solid rgba(35,42,56,0.5); }
.learn-table th.num, .learn-table td.num { text-align: right; }
.cf-up { color: var(--green); font-size: 11px; }
.cf-down { color: var(--red); font-size: 11px; }

#notifBtn, #notifTabBtn, #modeBtn {
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 11px;
}
#notifBtn.on { color: var(--accent-ink); border-color: var(--accent-ink); }
#notifTabBtn:hover, #modeBtn:hover, #notifBtn:hover { color: var(--text); }
.ncount {
  display: inline-block; background: var(--red); color: #fff;
  border-radius: 9px; padding: 0 6px; font-size: 10px; font-weight: 700;
}

/* Simple view: hide advanced filters + dense columns
   (cols: 4 MktCap kept, hide 5 Vol1m, 6 Vol5m, 8 Spike, 11 Vol24h, 12 spark) */
body.simple .adv { display: none; }
/* Column 5 is Listed now, so every index past Mkt Cap moved up by one. These
   were 5,6,8,12,13 and hid Vol 1m, Vol 5m, Spike, Vol 24h and the sparkline.
   Listed itself stays: it is the column the board is ordered by. */
body.simple #coinTable th:nth-child(6), body.simple #coinTable td:nth-child(6),
body.simple #coinTable th:nth-child(7), body.simple #coinTable td:nth-child(7),
body.simple #coinTable th:nth-child(9), body.simple #coinTable td:nth-child(9),
body.simple #coinTable th:nth-child(13), body.simple #coinTable td:nth-child(13),
body.simple #coinTable th:nth-child(14), body.simple #coinTable td:nth-child(14) { display: none; }

/* Notifications panel */
/* DEX screener overlay */
#dexPanel { position: relative; }
#dexPanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 588;
  background: radial-gradient(900px 500px at 70% -10%, rgba(157,139,255,0.08), transparent 55%), var(--panel);
  display: flex; flex-direction: column; animation: chart-in 0.18s ease;
}
.dx-controls { display: flex; gap: 6px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.dx-controls select, .dx-controls input {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 5px 10px; font-size: 11.5px; outline: none;
}
.dx-controls select { cursor: pointer; max-width: 190px; }
.dx-controls input { width: 150px; font-family: var(--mono); }
.dx-controls select:focus, .dx-controls input:focus { border-color: var(--purple); }
#dxNew.on { background: var(--purple); color: #fff; border-color: var(--purple); }
#dxClose {
  background: var(--panel2); border: 1px solid var(--border2); color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px; margin-left: 8px;
}
#dxClose::before { content: "✕  Close"; }
#dxClose:hover { color: var(--text); border-color: var(--accent-ink); }

/* two-pane layout: chain rail on the left, pairs on the right */
.dx-layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 232px 1fr; }
.dx-sidebar {
  border-right: 1px solid var(--border); background: var(--bg2);
  display: flex; flex-direction: column; min-height: 0;
}
.dx-side-head { padding: 10px; border-bottom: 1px solid var(--border); }
.dx-side-head input {
  width: 100%; background: var(--panel2); border: 1px solid var(--border);
  color: var(--text); border-radius: 7px; padding: 6px 10px; font-size: 11.5px; outline: none;
}
.dx-side-head input:focus { border-color: var(--purple); }
.dx-chain-list { flex: 1; overflow-y: auto; padding: 6px; }
.dx-chain-item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; margin-bottom: 2px;
  border: 1px solid transparent;
}
.dx-chain-item:hover { background: var(--panel2); }
.dx-chain-item.active { background: rgba(157,139,255,.16); border-color: var(--purple); }
.dx-chain-item .cn {
  font-size: 12.2px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dx-chain-item .cv { font-size: 10.5px; color: var(--accent2); font-family: var(--mono); text-align: right; }
.dx-chain-item .cp { grid-column: 1 / -1; font-size: 10px; color: var(--muted); }
.dx-chain-item.cold .cn { color: var(--muted); font-weight: 600; }
.dx-chain-item.cold .cv { color: var(--muted); opacity: .7; }
.dx-side-group {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted);
  font-weight: 800; padding: 10px 9px 5px;
}
.dx-main { overflow-y: auto; min-height: 0; }
/* Phones (2026-10-29): the two panes stacked, measured in the tab at 375px. The
   grid gave the chain rail 232px and the pair table the 143px left over, and the
   Close button sat at x=387, off the screen. Now the head wraps with Close pinned
   top right, the chain list is a strip that scrolls sideways above the table, the
   table has the full width and scrolls sideways itself (a row is 914px), and the
   explanatory note goes so nine rows fit under the controls. minmax(0, 1fr), not
   1fr: a bare 1fr track grows to the 914px min-content of the rows. */
@media (max-width: 800px) {
  #dexPanel .sig-head { flex-wrap: wrap; row-gap: 8px; }
  #dexPanel .sig-head > div:first-child { flex: 1 1 100%; padding-right: 90px; }
  #dexPanel .dx-controls { flex: 1 1 auto; }
  #dxClose { position: absolute; top: 8px; right: 8px; margin: 0; }
  .dx-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .dx-sidebar { border-right: 0; border-bottom: 1px solid var(--border); }
  .dx-side-head, .dx-side-group, #dxBody .dx-note { display: none; }
  .dx-chain-list { display: flex; gap: 6px; overflow-x: auto; overflow-y: hidden; padding: 6px 8px; }
  .dx-chain-item { flex: 0 0 auto; min-width: 128px; }
  .dx-main { overflow-x: auto; }
}

.dx-head, .dx-row {
  display: grid;
  grid-template-columns: 34px minmax(150px,1.5fr) 92px 108px 78px 78px 78px 108px 96px;
  gap: 10px; align-items: center; padding: 9px 12px; font-size: 12.3px;
}
.dx-head {
  font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  border-bottom: 1px solid var(--border2); font-weight: 700; position: sticky; top: 0;
  background: var(--panel); z-index: 2;
}
.dx-row { border-bottom: 1px solid rgba(14, 21, 32, .55); cursor: pointer; }
.dx-row:hover { background: var(--panel2); }
.dx-rank { color: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.dx-pair { min-width: 0; }
.dx-pair b { font-weight: 800; }
.dx-pair small { color: var(--muted); font-weight: 400; margin-left: 5px; font-size: 10.5px; }
.dx-chain {
  display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; padding: 1px 6px; border-radius: 5px; margin-right: 6px;
  background: rgba(157,139,255,.18); color: #b3a5ff; vertical-align: middle;
}
.dx-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dx-num.muted { color: var(--muted); font-size: 11.5px; }
.dx-chg { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.dx-age { text-align: right; color: var(--muted); font-size: 11px; font-family: var(--mono); }
.dx-live { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px;
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border); text-transform: uppercase; }
.dx-live.on { background: rgba(38,166,154,.16); color: var(--green); border-color: rgba(38,166,154,.4); }
.dxd-stat b.pos, .dxd-tr .pos { color: var(--green); }
.dxd-stat b.neg, .dxd-tr .neg { color: var(--red); }
.dx-live.on::before { content: "\25CF"; margin-right: 5px; animation: dxpulse 1.4s ease-in-out infinite; }
@keyframes dxpulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes dxflashup { from { background: rgba(38,166,154,.42) } to { background: transparent } }
@keyframes dxflashdn { from { background: rgba(239,83,80,.42) } to { background: transparent } }
.dx-price.flash-up { animation: dxflashup .7s ease-out; border-radius: 4px; }
.dx-price.flash-dn { animation: dxflashdn .7s ease-out; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) {
  .dx-price.flash-up, .dx-price.flash-dn, .dx-live.on::before { animation: none; }
}
.dxd { position: fixed; inset: 0; background: var(--bg); z-index: 590; display: flex; flex-direction: column; }
.dxd.hidden { display: none; }
body.dxd-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   A coin URL is a page, not only an app view.
   /app/TRUMPUSDT carries the chart AND the written section beneath it, so this
   one document has to scroll — everywhere else the shell stays a locked
   viewport, which is what makes the board behave like an app.
   --------------------------------------------------------------------------- */
body.pair-page {
  height: auto;
  min-height: 100vh;
  overflow: visible;
}
/* the coin view joins the flow instead of covering it, so a reader can scroll
   past the chart to the writing rather than having to close the panel first */
body.pair-page .chart-panel {
  position: static;
  inset: auto;
  z-index: auto;
  min-height: calc(100vh - 34px);
  overflow: visible;
  animation: none;
}
body.pair-page #pair-seo {
  border-top: 1px solid var(--border);
  padding-top: 8px;
}


#dxdBody { flex: 1; min-height: 0; display: flex; }
.dxd-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 340px; width: 100%; }
.dxd-main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column;
  border-right: 1px solid var(--border); }
.dxd-nav { display: flex; align-items: center; gap: 12px; padding: 9px 14px;
  border-bottom: 1px solid var(--border); background: var(--panel2); }
.dxd-back { background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 7px 14px; font: 700 12px/1 inherit; cursor: pointer; }
.dxd-back:hover { border-color: var(--purple); color: var(--purple); }
.dxd-brand { font-size: 13px; letter-spacing: .5px; color: var(--muted); }
.dxd-brand b { color: var(--accent-ink); }
.dxd-navlinks { display: flex; gap: 6px; }
.dxd-navlinks button { background: var(--panel); border: 1px solid var(--border); color: var(--muted);
  border-radius: 8px; padding: 6px 11px; font: 600 11px/1 inherit; cursor: pointer; }
.dxd-navlinks button:hover { color: var(--text); border-color: var(--purple); }
@media (max-width: 720px) { .dxd-brand, .dxd-navlinks button:nth-child(3) { display: none; } }
.dxd-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border); background: var(--panel); flex-wrap: wrap; }
.dxd-spacer { flex: 1; }
.dxd-tfs, .dxd-seg, .dxd-tabs { display: flex; gap: 2px; background: var(--panel2);
  border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.dxd-tfs button, .dxd-seg button {
  background: none; border: 0; color: var(--muted); font: 600 11px/1 inherit;
  padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.dxd-tfs button:hover, .dxd-seg button:hover { color: var(--text); }
.dxd-tfs button.on, .dxd-seg button.on { background: var(--purple); color: #fff; }
.dxd-chartwrap { position: relative; flex: 1 1 58%; min-height: 180px; padding: 0 0 0 4px; }
#dxdChart { width: 100%; height: 100%; display: block; cursor: crosshair; }
.dxd-ohlc { position: absolute; left: 8px; top: 6px; right: 86px; z-index: 2; display: flex; flex-wrap: wrap;
  gap: 10px; align-items: baseline; font-size: 11px; color: var(--muted); pointer-events: none;
  font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--bg) 82%, transparent);
  padding: 3px 6px; border-radius: 6px; width: fit-content; max-width: calc(100% - 94px); }
.dxd-ohlc b { font-size: 13px; color: var(--text); }
.dxd-ohlc i { font-style: normal; color: var(--text); margin-left: 3px; }
.dxd-ohlc-dex { color: var(--muted); }
.dxd-ohlc .dxd-vol { color: var(--accent2); }
.dxd-tabs { margin: 0 12px; align-self: flex-start; }
.dxd-tabs button { background: none; border: 0; color: var(--muted); font: 700 11px/1 inherit;
  padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.dxd-tabs button.on { background: var(--purple); color: #fff; }
.dxd-tablewrap { flex: 1 1 42%; min-height: 0; overflow: auto; border-top: 1px solid var(--border); margin-top: 8px; }
.dxd-th, .dxd-tr { display: grid; gap: 8px; padding: 6px 14px; font-size: 12px; align-items: center; }
.tx-cols { grid-template-columns: 74px 76px 1fr 1fr 1fr 1fr 92px 30px; }
.trader-cols { grid-template-columns: 110px 1fr 1fr 1fr 80px 84px; }
.dxd-th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); z-index: 1;
  font-size: 10px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--border); }
.dxd-tr { border-bottom: 1px solid rgba(14, 21, 32, .03); font-variant-numeric: tabular-nums; }
.dxd-tr.buy { background: rgba(46,230,160,.05); }
.dxd-tr.sell { background: rgba(255,93,115,.05); }
.dxd-tr .mono, .dxd-th .mono { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); }
.dxd-side { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--panel); }
.dxd-title { display: flex; gap: 10px; align-items: center; }
.dxd-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: cover; background: var(--panel2); }
.dxd-title h3 { font-size: 17px; margin: 0; } .dxd-title small { color: var(--muted); font-weight: 500; }
.dxd-sub { font-size: 11px; color: var(--muted); }
.dxd-kv { display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid rgba(14, 21, 32, .04); font-size: 12px; }
.dxd-kv span { color: var(--muted); } .dxd-kv b { font-variant-numeric: tabular-nums; }
.dxd-kv b small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.dxd-addr { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 3px 0; }
.dxd-addr span { color: var(--muted); min-width: 46px; }
.dxd-addr code { font-family: ui-monospace, Menlo, monospace; flex: 1; color: var(--text); }
.dxd-mini { font-size: 10px; color: var(--accent-ink); background: var(--panel2); border: 1px solid var(--border);
  border-radius: 5px; padding: 2px 6px; cursor: pointer; text-decoration: none; }
.dxd-mini:hover { color: var(--text); }
.dxd-audit { border: 1px solid var(--border); border-radius: 9px; padding: 10px; margin-top: 4px; }
.dxd-audit.good { border-left: 3px solid var(--green); } .dxd-audit.bad { border-left: 3px solid var(--red); }
.dxd-audit-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.dxd-audit-head span { color: var(--muted); }
.dxd-check { display: flex; gap: 8px; padding: 4px 0; font-size: 11px; }
.dxd-check.ok > span { color: var(--green); } .dxd-check.no > span { color: var(--red); }
.dxd-check b { display: block; font-size: 11px; } .dxd-check small { color: var(--muted); }
.dxd-audit-note { font-size: 10px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
.dxd-links { display: flex; flex-wrap: wrap; gap: 6px; }
.dxd-btn { flex: 1 1 auto; text-align: center; background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px; font-size: 11px; font-weight: 700; color: var(--text);
  text-decoration: none; }
.dxd-btn:hover { border-color: var(--purple); }
.dxd-desc { font-size: 11px; color: var(--muted); line-height: 1.5; }
.dxd-wins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.dxd-win { background: var(--panel); padding: 7px 4px; text-align: center; display: flex;
  flex-direction: column; gap: 2px; }
.dxd-win span { font-size: 9px; color: var(--muted); text-transform: uppercase; }
.dxd-win b { font-size: 12px; } .dxd-win small { font-size: 10px; color: var(--muted); }
.dxd-win em { font-style: normal; font-size: 9px; }
.dxd-rail { position: absolute; left: 6px; top: 34px; z-index: 3; display: flex; flex-direction: column;
  gap: 2px; background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.dxd-rail button { width: 26px; height: 26px; background: none; border: 0; color: var(--muted);
  border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1; }
.dxd-rail button:hover { color: var(--text); background: rgba(14, 21, 32, .05); }
.dxd-rail button.on { background: var(--purple); color: #fff; }
.holder-cols { grid-template-columns: 40px 110px 1fr 74px 1fr 30px; }
.kol-cols { grid-template-columns: 108px 1fr 1fr 1fr 1fr 60px 56px 74px; }
.dxd-share { display: block; height: 6px; background: rgba(14, 21, 32, .06); border-radius: 3px; overflow: hidden; }
.dxd-share i { display: block; height: 100%; background: var(--purple); }
.dxd-holdsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 1px;
  background: var(--border); border-bottom: 1px solid var(--border); }
.dxd-holdsum > div { background: var(--panel); padding: 9px 12px; display: flex; flex-direction: column; gap: 2px; }
.dxd-holdsum span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dxd-holdsum b { font-size: 15px; font-variant-numeric: tabular-nums; }
.dxd-warn { margin: 8px 14px; padding: 8px 10px; border-radius: 8px; font-size: 11px; line-height: 1.5;
  background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.3); color: var(--text); }
.dxd-map { padding: 12px 16px; }
.dxd-map-title { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.dxd-maprow { display: grid; grid-template-columns: 130px 1fr 70px; gap: 10px; align-items: center;
  padding: 3px 0; font-size: 11px; }
.dxd-maprow span { color: var(--muted); }
.dxd-maprow i { display: block; height: 12px; border-radius: 3px; background: var(--purple); min-width: 2px; }
.dxd-maprow b { text-align: right; font-variant-numeric: tabular-nums; }
.dxd-votes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.dxd-react { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 9px; padding: 7px 4px; }
.dxd-react:hover { border-color: var(--purple); }
.dxd-react.mine { border-color: var(--purple); background: rgba(139,92,246,.14); }
.dxd-react span { font-size: 15px; line-height: 1; }
.dxd-react b { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.dxd-swap { border: 1px solid var(--border); border-radius: 10px; padding: 10px; display: flex;
  flex-direction: column; gap: 7px; }
.dxd-swap-head { display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; font-weight: 700; }
.dxd-swap-row { display: flex; gap: 6px; }
.dxd-swap-row select, .dxd-swap-row input {
  flex: 1; min-width: 0; background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 7px; padding: 7px 8px; font-size: 12px; font-family: inherit; }
.dxd-swap-row select[id="dxdSwapSlip"] { flex: 0 0 76px; }
.dxd-swap-out { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; }
.dxd-swap-out b { color: var(--text); font-size: 14px; }
.dxd-swap-out small { color: var(--muted); margin-left: 5px; }
.dxd-swap-go { background: var(--purple); border-color: var(--purple); color: #fff; }
.dxd-swap-msg { font-size: 11px; color: var(--muted); min-height: 14px; line-height: 1.45; }
.dxd-swap-msg a { color: var(--accent-ink); }
.dxd-tr .pos, .dxd-win .pos, .dxd-kv .pos { color: var(--green); }
.dxd-tr .neg, .dxd-win .neg, .dxd-kv .neg { color: var(--red); }
@media (max-width: 900px) {
  #dxdBody { overflow: auto; display: block; }
  .dxd-grid { display: block; }
  .dxd-main { overflow: visible; border-right: 0; border-bottom: 1px solid var(--border); }
  .dxd-chartwrap { height: 300px; flex: none; }
  .dxd-tablewrap { height: 320px; flex: none; }
  .dxd-side { max-height: none; }
  .tx-cols { grid-template-columns: 62px 64px 1fr 1fr 1fr 30px; }
  .tx-cols > :nth-child(5), .tx-cols > :nth-child(7) { display: none; }
  .trader-cols { grid-template-columns: 96px 1fr 1fr 1fr 56px; }
  .trader-cols > :nth-child(6) { display: none; }
  .holder-cols { grid-template-columns: 32px 96px 1fr 62px 30px; }
  .holder-cols > :nth-child(5) { display: none; }
  .kol-cols { grid-template-columns: 96px 1fr 1fr 1fr 46px; }
  .kol-cols > :nth-child(3), .kol-cols > :nth-child(4), .kol-cols > :nth-child(8) { display: none; }
  .dxd-maprow { grid-template-columns: 104px 1fr 56px; }
}
.dxl-head, .dxl-row { grid-template-columns: 44px minmax(0,1.6fr) 82px 100px 130px 110px 32px !important; }
.dxl-row { cursor: pointer; }
.dxd-badge { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 5px; margin-left: 4px;
  background: rgba(139,92,246,.18); color: var(--purple); }
.dxd-empty { padding: 46px 30px; max-width: 520px; margin: 0 auto; text-align: center; }
.dxd-empty h3 { font-size: 18px; margin-bottom: 10px; }
.dxd-empty p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 12px; }
.dxd-empty-mint { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.dxd-empty-actions { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.dxd-empty-actions .dxd-btn { flex: 0 0 auto; cursor: pointer; }
.dxl-row .dx-pair small { display: block; color: var(--muted); font-size: 11px; }
/* A full-screen overlay, matching #dexPanel. It used to be `position: relative`
   — an ordinary child of the 100vh flex body — so it was handed almost no
   height, .wh-body had nothing to scroll inside, and the portal looked frozen
   with most of its content unreachable. */
#whalePanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 588;
  background: radial-gradient(900px 500px at 70% -10%, rgba(157,139,255,0.08), transparent 55%), var(--panel);
  display: flex; flex-direction: column; animation: chart-in 0.18s ease;
}
#whalePanel .sig-head, #whalePanel .wh-sum, #whalePanel .wh-note { flex: none; }
.wh-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 1px;
  background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.wh-stat { background: var(--panel); padding: 9px 14px; display: flex; flex-direction: column; gap: 2px; }
.wh-stat span { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wh-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.wh-note { font-size: 11px; color: var(--muted); line-height: 1.55; padding: 10px 16px; }
.wh-note b { color: var(--text); }
.wh-body { flex: 1; min-height: 0; overflow: auto; padding-bottom: 20px; }
/* the whole row is the target, not just the truncated address */
.wh-tr.is-clickable { cursor: pointer; }
.wh-tr.is-clickable:hover { background: rgba(14, 21, 32, .04); }
.wh-sig { border-bottom: 1px solid var(--border); padding: 12px 16px; border-left: 3px solid var(--border); }
.wh-sig.sev-crit { border-left-color: var(--red); background: rgba(255,93,115,.05); }
.wh-sig.sev-high { border-left-color: #ff9f43; }
.wh-sig.sev-med  { border-left-color: var(--purple); }
.wh-sig-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.wh-sig-head small { color: var(--muted); font-size: 11px; }
.wh-spacer { flex: 1; }
.wh-badge { font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 5px; background: var(--panel2); }
.wh-badge.sev-crit { background: rgba(255,93,115,.2); color: var(--red); }
.wh-badge.sev-high { background: rgba(255,159,67,.2); color: #ff9f43; }
.wh-badge.sev-med  { background: rgba(139,92,246,.2); color: var(--purple); }
.sev-crit { color: var(--red); } .sev-high { color: #ff9f43; } .sev-med { color: var(--purple); }
.wh-coin { cursor: pointer; border-bottom: 1px dotted var(--muted); }
.wh-coin:hover { color: var(--purple); }
.wh-score { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.wh-ago { font-size: 11px; color: var(--muted); }
.wh-sig-line { font-size: 12px; margin-top: 6px; }
.wh-creator { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 4px; background: rgba(255,93,115,.18); color: var(--red); }
.wh-creator.sm { font-size: 8px; margin-left: 4px; }
.wh-w { color: var(--accent-ink); cursor: pointer; text-decoration: none; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.wh-w:hover { text-decoration: underline; }
.wh-checks { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 6px; margin-top: 9px; }
.wh-check { display: flex; gap: 7px; font-size: 11px; align-items: flex-start; }
.wh-check.ok > span { color: var(--green); } .wh-check.no > span { color: var(--muted); }
.wh-check b { display: block; font-size: 11px; } .wh-check small { color: var(--muted); }
.wh-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px,1fr)); gap: 8px; margin-top: 9px; }
.wh-part { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.wh-part span { flex: 0 0 108px; } .wh-part em { font-style: normal; opacity: .6; margin-left: 4px; }
.wh-part i { flex: 1; height: 5px; background: rgba(14, 21, 32, .07); border-radius: 3px; overflow: hidden; }
.wh-part i b { display: block; height: 100%; background: var(--purple); }
.wh-part u { text-decoration: none; font-variant-numeric: tabular-nums; width: 22px; text-align: right; }
.wh-th, .wh-tr { display: grid; gap: 8px; padding: 7px 16px; font-size: 12px; align-items: center; }
.trade-cols { grid-template-columns: 74px minmax(0,1.3fr) 74px 1fr 84px 1fr 100px 30px; }
.wallet-cols { grid-template-columns: minmax(0,1.4fr) 1fr 1fr 1fr 1fr 64px 60px 64px 74px; }
.wh-th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); z-index: 1;
  font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--border); }
.wh-tr { border-bottom: 1px solid rgba(14, 21, 32, .03); font-variant-numeric: tabular-nums; }
.wh-tr.buy { background: rgba(46,230,160,.04); } .wh-tr.sell { background: rgba(255,93,115,.04); }
.wh-wallet-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.wh-wallet-head code { font-family: ui-monospace, Menlo, monospace; font-size: 11px; word-break: break-all; }
.wh-warn { margin: 8px 16px; padding: 9px 11px; border-radius: 8px; font-size: 11px; line-height: 1.5;
  background: rgba(255,93,115,.1); border: 1px solid rgba(255,93,115,.3); }
@media (max-width: 900px) {
  .trade-cols { grid-template-columns: 62px minmax(0,1fr) 62px 1fr 66px 30px; }
  .trade-cols > :nth-child(6), .trade-cols > :nth-child(7) { display: none; }
  .wallet-cols { grid-template-columns: minmax(0,1.2fr) 1fr 1fr 1fr 56px; }
  .wallet-cols > :nth-child(3), .wallet-cols > :nth-child(4),
  .wallet-cols > :nth-child(7), .wallet-cols > :nth-child(9) { display: none; }
}
/* ---- plan gating ---- */
.gate-more { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 16px; margin: 6px 0; border-radius: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(139,92,246,.16), rgba(139,92,246,.04));
  border: 1px solid rgba(139,92,246,.35); }
.gate-more b { display: block; font-size: 13px; }
.gate-more small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.gate-cta { background: var(--purple); color: #fff; border: 0; border-radius: 8px;
  padding: 8px 16px; font-weight: 700; font-size: 12px; text-decoration: none; white-space: nowrap; }
.gate-cta:hover { filter: brightness(1.12); }
.gate-cta.small { padding: 4px 10px; font-size: 11px; }
.gate-cta.big { display: inline-block; padding: 11px 26px; font-size: 14px; margin-top: 14px; }
/* starts below the 51px panel header so the Close button stays reachable —
   a gate you cannot dismiss is a trap, not an upsell */
.chart-gate { position: absolute; inset: 52px 0 0 0; z-index: 20; display: grid;
  place-items: center; background: var(--panel); border-radius: 0 0 12px 12px; overflow: auto; }
.chart-gate.hidden { display: none; }
.gate-lock { text-align: center; padding: 54px 26px; max-width: 540px; margin: 0 auto; }
.gate-lock-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 11px; border-radius: 20px; margin-bottom: 14px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted); }
.gate-lock h3 { font-size: 21px; margin-bottom: 10px; }
.gate-lock p { color: var(--muted); font-size: 13px; line-height: 1.65; max-width: 44ch; margin: 0 auto; }
.gate-lock-pitch { color: var(--text) !important; margin-top: 10px !important; }
.gate-lock-note { font-size: 11px; margin-top: 14px !important; }
.gate-lock-note a { color: var(--accent-ink); }
.plan-badge { font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px; background: var(--panel2);
  border: 1px solid var(--border); color: var(--muted); }
/* In the status row the badge is as tall as the text line: its 3px of padding
   made the row 7px taller for the moment it existed, and the whole page moved
   with it (2026-10-28). */
.auth-menu .plan-badge { padding-top: 0; padding-bottom: 0; line-height: 12px; }
.plan-badge.tier-advance { color: var(--purple); border-color: rgba(139,92,246,.5); }
.plan-badge.tier-pro { color: var(--green); border-color: rgba(46,230,160,.5); }

/* ---- market cap of ---- */
/* Every other overlay panel is fixed to the viewport and scrolls inside itself.
   This one was left position:relative, so it sat as an ordinary child of a
   height:100vh overflow:hidden body — rendered below the fold with no way to
   scroll to it. Only its first ~150px were ever reachable. */
#capofPanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 588;
  background: radial-gradient(900px 500px at 70% -10%, rgba(157,139,255,0.08), transparent 55%), var(--panel);
  display: flex; flex-direction: column; animation: chart-in 0.18s ease;
}
#capofPanel .sig-head { flex: none; }
.mc-body { flex: 1; min-height: 0; overflow-y: auto;
           padding: 0 16px 30px; width: 100%; max-width: 1120px; margin: 0 auto; }
.mc-intro { color: var(--muted); font-size: 13px; line-height: 1.6; padding: 16px 0 4px; max-width: 78ch; }
.mc-intro b.mc-a { color: var(--accent-ink); } .mc-intro b.mc-b { color: var(--purple); }
.mc-swapline { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 16px 0; }
.mc-chip { display: flex; align-items: center; gap: 9px; width: 100%; cursor: pointer;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 12px;
  padding: 13px 15px; color: var(--text); font-family: inherit; font-size: 14px; }
.mc-chip:hover { border-color: var(--purple); }
.mc-chip img, .mc-chip .mc-ph { width: 24px; height: 24px; border-radius: 50%; flex: 0 0 24px; }
.mc-chip b { font-size: 15px; } .mc-chip-px { color: var(--muted); font-variant-numeric: tabular-nums; }
.mc-chip i { margin-left: auto; font-style: normal; color: var(--muted); }
.mc-chip.empty .mc-chip-ph { color: var(--muted); }
.mc-swap { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 17px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--purple); }
.mc-swap:hover { border-color: var(--purple); background: rgba(139,92,246,.14); }
.mc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mc-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 18px; }
.mc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 16px; }
.mc-panel-head h4 { font-size: 17px; }
.mc-toggle { display: flex; background: var(--panel2); border-radius: 20px; padding: 3px; }
.mc-toggle button { border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 6px 16px; border-radius: 16px; font: 700 11px/1 inherit; letter-spacing: .04em; }
.mc-toggle button.on { background: var(--purple); color: #fff; }
.mc-eq { font-size: 14px; text-align: center; margin-bottom: 14px; }
.mc-eq b.mc-a { color: var(--accent-ink); } .mc-eq b.mc-b { color: var(--purple); }
.mc-athtag { display: block; font-size: 10px; color: var(--muted); font-style: normal; margin-top: 3px; }
.mc-result { border: 1px dashed var(--border); border-radius: 12px; padding: 22px 12px;
  text-align: center; display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mc-resprice { font-size: clamp(26px, 4.4vw, 40px); font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-resprice sub { font-size: .5em; }
.mc-resx { font-size: 22px; font-weight: 800; }
.mc-resx.pos { color: var(--green); } .mc-resx.neg { color: var(--red); }
.mc-above { text-align: center; font-size: 14px; margin: 16px 0 12px; }
.mc-above b.mc-a { color: var(--accent-ink); } .mc-above b.mc-b { color: var(--purple); }
.mc-above b.pos { color: var(--green); } .mc-above b.neg { color: var(--red); }
.mc-caps > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0;
  border-top: 1px solid rgba(14, 21, 32, .05); font-size: 12.5px; }
.mc-caps span { color: var(--muted); }
.mc-caps b { font-variant-numeric: tabular-nums; }
.mc-caps b.pos { color: var(--green); } .mc-caps b.neg { color: var(--red); }
.mc-warn { display: block !important; color: var(--muted); font-size: 11px; line-height: 1.5; }
.mc-est-label { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.mc-est { border: 1px dashed var(--border); border-radius: 12px; padding: 22px 12px; text-align: center;
  font-size: clamp(24px, 4vw, 36px); font-weight: 800; font-variant-numeric: tabular-nums; }
.mc-amt { display: flex; margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.mc-amt input { flex: 1; min-width: 0; background: var(--panel2); border: 0; color: var(--text);
  padding: 12px 14px; font-size: 14px; font-family: inherit; }
.mc-amt span { display: flex; align-items: center; padding: 0 16px; background: var(--panel);
  border-left: 1px solid var(--border); color: var(--purple); font-weight: 700; font-size: 13px; }
.mc-est-now { text-align: center; color: var(--muted); font-size: 11.5px; margin-top: 9px; }
.mc-actions { display: flex; gap: 8px; margin-top: 16px; }
.mc-buy { flex: 1; text-align: center; background: var(--purple); color: #fff; border-radius: 10px;
  padding: 13px; font-weight: 700; font-size: 13px; text-decoration: none; }
.mc-buy:hover { filter: brightness(1.12); }
.mc-icon { width: 48px; border: 1px solid var(--purple); background: none; color: var(--purple);
  border-radius: 10px; cursor: pointer; font-size: 15px; }
.mc-icon:hover { background: rgba(139,92,246,.14); }
.mc-drop { position: absolute; left: 50%; transform: translateX(-50%); top: 120px; z-index: 60;
  width: min(460px, calc(100% - 32px)); background: var(--panel); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 20px 60px rgba(14, 21, 32, .6); overflow: hidden; }
.mc-drop-head { display: flex; border-bottom: 1px solid var(--border); }
.mc-search { flex: 1; background: var(--panel2); border: 0; color: var(--text);
  padding: 13px 15px; font-size: 14px; font-family: inherit; }
.mc-drop-x { width: 46px; border: 0; background: var(--panel2); color: var(--muted); cursor: pointer; font-size: 13px; }
.mc-tabs { display: flex; gap: 4px; padding: 10px; background: var(--panel2); }
.mc-tabs button { flex: 1; border: 0; background: none; color: var(--muted); cursor: pointer;
  padding: 9px; border-radius: 18px; font: 700 12px/1 inherit; }
.mc-tabs button.on { background: var(--purple); color: #fff; }
.mc-drop-note { font-size: 11px; color: var(--muted); padding: 8px 14px; line-height: 1.5; }
.mc-list { max-height: 330px; overflow: auto; }
.mc-list button { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px dashed rgba(14, 21, 32, .06); cursor: pointer;
  padding: 11px 15px; color: var(--text); font-size: 14px; font-family: inherit; }
.mc-list button:hover { background: var(--panel2); }
.mc-list img, .mc-list .mc-ph { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; }
.mc-list b { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-sym { color: var(--purple); font-size: 13px; font-weight: 600; }
.mc-ph { background: var(--panel2); font-size: 9px; display: flex; align-items: center;
  justify-content: center; color: var(--muted); }
.mc-nounit { font-size: 20px; color: var(--muted); font-weight: 600; }
.mc-nounit-note { font-size: 11.5px; color: var(--muted); line-height: 1.55; text-align: center;
  margin: 12px 0 0; }
.mc-note { font-size: 11px; color: var(--muted); line-height: 1.6; margin-top: 22px; max-width: 82ch; }
.mc-note b { color: var(--text); }
@media (max-width: 820px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-swapline { grid-template-columns: 1fr; }
  .mc-swap { justify-self: center; }
}

/* The subscribe row and the delay banner sit between the panel head and the
   feed, so both are read before the posts rather than after scrolling. */
.tw-notify { border-bottom: 1px solid var(--border); }
.tw-delay { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            padding: 9px 16px; font-size: 12px; color: #ffab70;
            background: rgba(122,59,30,0.14); border-bottom: 1px solid var(--border); }
.tw-sub-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 16px;
              font-size: 12px; color: var(--muted); }
.tw-sub-row input { background: #0d1219; border: 1px solid var(--border); color: var(--text);
                    border-radius: 6px; padding: 5px 9px; font: inherit; min-width: 210px; }
.tw-sub-row input:disabled { opacity: .5; }
.tw-sub-row button { background: #14304d; border: 1px solid #24506f; color: #9fd0ff;
                     border-radius: 6px; padding: 5px 12px; font: inherit; cursor: pointer; }
.tw-sub-row button:disabled { opacity: .45; cursor: not-allowed; }
.tw-sub-msg { font-size: 11px; }

/* The wallet flow chart: a shape, not an instrument — it exists to show whether
   a wallet accumulated slowly and left quickly, which a column of numbers hides. */
.wh-flow { padding: 10px 16px 4px; }
.wh-flow-h { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.wh-flow-svg { width: 100%; height: 64px; display: block; }
.wh-flow-f { display: flex; justify-content: space-between; font-size: 10px; color: var(--muted); }

/* A locked chart tool states what it is and offers the plan, in the space the
   tool itself would have taken. */
.ct-lock { display:inline-flex; align-items:center; gap:8px; font-size:12px;
           color:#8E99B0; padding:5px 2px; }
.ct-lock .gate-cta.small { font-size:11px; }

/* ---- locked filters ---- */
.filter-locked { opacity: .45; cursor: not-allowed; }
.filter-locked input, .filter-locked select { cursor: not-allowed; pointer-events: none; }
.filter-locked-btn { opacity: .45; cursor: not-allowed; }
th.sort-locked { cursor: not-allowed; }
.filter-lock-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 16px 8px; padding: 7px 12px; border-radius: 8px; font-size: 11.5px;
  color: var(--muted); background: rgba(139,92,246,.10);
  border: 1px solid rgba(139,92,246,.30); }
.filter-lock-note span { flex: 1; min-width: 200px; }
@keyframes filterLockFlash {
  0%, 100% { background: rgba(139,92,246,.10); border-color: rgba(139,92,246,.30); }
  35%      { background: rgba(139,92,246,.30); border-color: rgba(139,92,246,.85); }
}
.filter-lock-note.flash { animation: filterLockFlash .6s ease 2; }

/* ---- locked rows: visible, unreadable ---- */
/* Only the starred-out identity is greyed and letter-spaced. The stats columns
   on a locked row keep their normal colour so the move stays readable — that is
   the whole point of the locked row. */
.masked, tr.row-locked .sym, tr.row-locked .coin-name, tr.row-locked .td-price,
.mover-row.row-locked .m-sym, .mover-row.row-locked .m-px {
  color: var(--muted) !important; letter-spacing: .18em; user-select: none;
}
tr.row-locked, .mover-row.row-locked { opacity: .92; cursor: not-allowed; }
tr.row-locked:hover { background: transparent !important; box-shadow: none !important; }
.mover-row.row-locked .clogo { display: none; }
.mover-unlock { display: block; text-align: center; margin: 8px 6px 2px; padding: 8px;
  border-radius: 8px; font-size: 11px; font-weight: 700; text-decoration: none;
  color: var(--purple); background: rgba(139,92,246,.12);
  border: 1px dashed rgba(139,92,246,.45); }
.mover-unlock:hover { background: rgba(139,92,246,.2); }

/* ---- advert slots ---- */
/* Board pages. Sits under the table, inside the one scrolling region, so it
   travels with the rows rather than floating over them. */
.pager { display: flex; align-items: center; justify-content: space-between;
         gap: 12px; flex-wrap: wrap; padding: 14px 16px 4px; }
.pager .pg-count { color: var(--muted); font-size: 12px; }
.pager .pg-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pager button.pg { min-width: 34px; height: 30px; padding: 0 9px; cursor: pointer;
                   border: 1px solid var(--line); border-radius: 7px;
                   background: var(--card); color: var(--fg);
                   font: inherit; font-size: 12.5px; line-height: 28px; }
.pager button.pg:hover { border-color: var(--accent); }
.pager button.pg.on { background: var(--accent); border-color: var(--accent);
                      color: #fff; font-weight: 600; cursor: default; }
.pager button.pg.off { opacity: .4; cursor: default; }
.pager button.pg.off:hover { border-color: var(--line); }
.pager .pg-gap { color: var(--muted); padding: 0 2px; }
@media (max-width: 640px) { .pager { justify-content: center; } }

/* Stacking order on this page, lowest first:
     page content and dropdowns   < 100
     .ad-box                        400
     full-page overlays             585 signals, 586 X feed, 587 unusual,
                                    588 dex / whale / cap-of
     .dxd  (DEX detail)             590
     .chart-panel                   600
     .toast                         700
   Every overlay must sit above .ad-box. An advert in normal flow with a
   z-index of 400 paints over anything below it and takes the clicks with it,
   which is how the Whale Portal ended up with an ad card in the middle of its
   signal list. A new overlay belongs at 585 or higher. */
.ad-box { position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; z-index: 400; overflow: hidden;
  /* body is a flex column. `overflow:hidden` disables a flex item's automatic
     minimum size, so without this the in-flow top slot collapses to its 2px
     borders and the ad inside is never visible. */
  flex: none; }
/* the coin page is a full-screen overlay, so the right rail would land on top of
   its sidebar — drop that one only, and keep top and bottom visible throughout */
body.dxd-open .ad-right { display: none; }
.ad-box.hidden { display: none; }
.ad-tag { position: absolute; top: 4px; left: 6px; font-size: 10px; letter-spacing: .1em;   /* was 8px: an "Ad" mark has to be readable on a phone */
  text-transform: uppercase; color: var(--muted); opacity: .75; pointer-events: none; }
.ad-x { position: absolute; top: 2px; right: 4px; background: none; border: 0; cursor: pointer;
  color: var(--muted); font-size: 11px; line-height: 1; padding: 3px; }
.ad-x:hover { color: var(--text); }
.ad-body { padding: 14px 10px 10px; display: flex; align-items: center; justify-content: center;
  min-height: 60px; }
/* The network's adaptive unit renders a 150px iframe in this slot, but the slot
   reserved 60px, so the whole board jumped 114px the moment the ad arrived —
   most of a 0.185 CLS. Reserve what it actually occupies.
   Deliberately only this slot: #ad-bottom is a fixed bar ~70px tall and giving
   it the same reservation would cost a quarter of a phone screen. */
#ad-top .ad-body { min-height: 174px; }
.ad-body img { max-width: 100%; height: auto; display: block; }
/* the bottom ad bar is position:fixed and ~70px tall, so the footer reserves
   room for it — the risk disclaimer must never sit underneath an advert */
.site-legal { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  padding:14px 18px 90px; font-size:11px; color:var(--muted);
  border-top:1px solid var(--border); background:var(--bg); }
.site-legal a { color:var(--muted); text-decoration:none; }
.site-legal a:hover { color:var(--purple); text-decoration:underline; }
.site-legal span { flex:1; min-width:240px; opacity:.8; }
/* Always-visible corner link so a would-be advertiser can get to the booking
   page straight from the slot, whether it is showing a paid advert or the house
   placeholder. Sits opposite the close button so it never covers the creative. */
.ad-cta { position: absolute; top: 3px; right: 26px; z-index: 3;
  font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: var(--purple); background: rgba(139,92,246,.14);
  border: 1px solid rgba(139,92,246,.4); border-radius: 999px;
  padding: 2px 8px; text-decoration: none; line-height: 1.5; white-space: nowrap; }
.ad-cta:hover { background: var(--purple); color: #fff; border-color: var(--purple); }
.ad-rot { position: absolute; bottom: 3px; right: 6px; font-size: 9px; color: var(--muted);
  background: rgba(14, 21, 32, .35); border-radius: 6px; padding: 0 4px; pointer-events: none; }
.ad-box.ad-house { border-style: dashed; border-color: rgba(139,92,246,.4);
  background: linear-gradient(135deg, rgba(139,92,246,.08), transparent); }
.house-ad { display: flex; flex-direction: column; gap: 2px; text-align: center;
  text-decoration: none; padding: 2px 6px; }
.house-ad b { color: var(--purple); font-size: 13px; }
.house-ad span { color: var(--text); font-size: 11px; }
.house-ad em { color: var(--muted); font-size: 10px; font-style: normal; }
.house-ad:hover b { text-decoration: underline; }
/* Both banners sit inside .table-panel, which is the only scrolling region.
   body is a height:100vh flex shell where <main> is the sole flexible child, so
   an ad placed in the body flow is taken straight out of the coin table's
   height. In here they cost the table nothing and scroll away with the content. */
/* `relative`, not `static`: .ad-box relies on being a positioning context for
   the "Ad" tag, the close button, the rotation counter and the corner link.
   Setting static here silently threw all four out to the viewport corner. */
.ad-top, .ad-bottom { position: relative; transform: none; box-shadow: none;
  width: auto; margin: 0 0 8px; }
.ad-bottom { margin-top: 0; }
.ad-right { position: fixed; right: 10px; top: 92px; width: 176px; }
@media (max-width: 1400px) { .ad-right { display: none; } }


.dx-note { font-size: 11px; color: var(--muted); padding: 10px 12px 4px; line-height: 1.5; }
.dx-note b { color: var(--text); }


/* DEX timeframe pills + filter panel */
/* .dx-tfs / .dx-tf are styled by the shared segmented control above */

.dx-filters {
  border-bottom: 1px solid var(--border); background: var(--bg2);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 7px;
}
.dx-f-row { display: grid; grid-template-columns: 108px 1fr 1fr 108px 1fr 1fr; gap: 7px; align-items: center; }
.dx-f-row label { font-size: 11px; color: var(--muted); text-align: right; font-weight: 600; }
.dx-f-row label small { opacity: .7; font-weight: 400; }
.dx-f-row label b { color: var(--purple); }
.dx-filters input {
  background: var(--panel2); border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 5px 8px; font-size: 11.5px; outline: none;
  font-family: var(--mono); width: 100%;
}
.dx-filters input:focus { border-color: var(--purple); }
.dx-filters input.set { border-color: var(--purple); background: rgba(157,139,255,.08); }
.dx-f-actions { grid-column: 4 / -1; display: flex; justify-content: flex-end; }
#dxFilterBtn.on { background: var(--purple); color: #fff; border-color: var(--purple); }
@media (max-width: 1000px) {
  .dx-f-row { grid-template-columns: 96px 1fr 1fr; }
  .dx-f-actions { grid-column: 1 / -1; }
}

/* Unusual activity + 2-week range overlay */
#unusualPanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 587;
  background: radial-gradient(900px 500px at 20% -10%, rgba(255,93,115,0.07), transparent 55%), var(--panel);
  display: flex; flex-direction: column; animation: chart-in 0.18s ease;
}
.untab {
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 11.5px; font-weight: 600;
}
.untab.active { background: var(--red); color: #fff; border-color: var(--red); }
#unClose {
  background: var(--panel2); border: 1px solid var(--border2); color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px; margin-left: 10px;
}
#unClose::before { content: "✕  Close"; }
#unClose:hover { color: var(--text); border-color: var(--accent-ink); }

.un-row {
  display: grid; grid-template-columns: 46px minmax(96px,1.1fr) 104px 92px 1.5fr 128px;
  gap: 12px; align-items: center; padding: 10px 12px; cursor: pointer;
  border-bottom: 1px solid rgba(14, 21, 32, .6); font-size: 12.5px;
}
.un-row:hover { background: var(--panel2); }
.un-rank { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.un-sym { font-weight: 800; display: flex; align-items: center; gap: 7px; }
.un-sym small { color: var(--muted); font-weight: 400; font-size: 10.5px; }
.un-score {
  font-weight: 800; font-size: 13px; text-align: center; border-radius: 8px;
  padding: 3px 8px; font-variant-numeric: tabular-nums;
}
.un-score.hot { background: rgba(255,93,115,.18); color: var(--red); }
.un-score.warm { background: rgba(14, 21, 32, .18); color: var(--accent-ink); }
.un-score.mild { background: var(--panel); color: var(--muted); }
.un-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.un-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .3px; padding: 2px 7px; border-radius: 7px; }
.un-tag.hot { background: rgba(255,93,115,.2); color: #ff8b9c; }
.un-tag.warm { background: rgba(14, 21, 32, .2); color: var(--accent-ink); }
.un-tag.up { background: rgba(46,230,160,.18); color: var(--green); }
.un-tag.down { background: rgba(255,93,115,.18); color: var(--red); }
.un-meta { color: var(--muted); font-size: 11px; font-family: var(--mono); text-align: right; }
.un-head {
  display: grid; grid-template-columns: 46px minmax(96px,1.1fr) 104px 92px 1.5fr 128px;
  gap: 12px; padding: 8px 12px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); border-bottom: 1px solid var(--border2); font-weight: 700;
}

/* 2-week range bar */
.rg-row {
  display: grid; grid-template-columns: 40px minmax(92px,1fr) 92px 1.7fr 128px;
  gap: 12px; align-items: center; padding: 9px 12px; cursor: pointer;
  border-bottom: 1px solid rgba(14, 21, 32, .6); font-size: 12.5px;
}
.rg-row:hover { background: var(--panel2); }
.rg-bar { position: relative; height: 22px; background: var(--panel); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.rg-fill { position: absolute; top:0; bottom:0; left:0; opacity: .3; }
.rg-mark { position: absolute; top:-2px; bottom:-2px; width: 3px; background: var(--text); border-radius: 2px; }
.rg-lo, .rg-hi { position: absolute; top: 4px; font-size: 9.5px; color: var(--muted); font-family: var(--mono); }
.rg-lo { left: 6px; } .rg-hi { right: 6px; }
.rg-pct { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.un-note { font-size: 11px; color: var(--muted); line-height: 1.55; margin-bottom: 12px; }

/* Crypto X feed overlay */
/* a newly arrived card glows briefly so the reader can see what changed */
@keyframes twNewGlow {
  0%   { box-shadow: 0 0 0 2px rgba(139,92,246,.85); }
  100% { box-shadow: 0 0 0 2px rgba(139,92,246,0); }
}
.tw-card.tw-new { animation: twNewGlow 2.4s ease-out 1; }
#tweetsPanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 586;
  background: radial-gradient(900px 500px at 80% -10%, rgba(29,155,240,0.07), transparent 55%), var(--panel);
  display: flex; flex-direction: column; animation: chart-in 0.18s ease;
}
.tw-tabs { display: flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }
.twtab {
  background: var(--panel2); color: var(--muted); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 12px; cursor: pointer; font-size: 11.5px; font-weight: 600;
}
.twtab.active { background: #1d9bf0; color: #fff; border-color: #1d9bf0; }
#twClose {
  background: var(--panel2); border: 1px solid var(--border2); color: var(--muted);
  font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px; margin-left: 10px;
}
#twClose::before { content: "✕  Close"; }
#twClose:hover { color: var(--text); border-color: var(--accent-ink); }
.tw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tw-card {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 13px;
  padding: 13px 15px; display: flex; flex-direction: column; gap: 8px;
  text-decoration: none; color: var(--text); transition: border-color .12s, transform .12s;
}
.tw-card:hover { border-color: #1d9bf0; transform: translateY(-1px); }
.tw-top { display: flex; align-items: center; gap: 9px; }
.tw-av { width: 34px; height: 34px; border-radius: 50%; background: var(--panel); flex-shrink: 0; object-fit: cover; }
.tw-who { min-width: 0; flex: 1; }
.tw-name { font-weight: 700; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-handle { color: var(--muted); font-size: 11px; font-family: var(--mono); }
.tw-when { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.tw-body { font-size: 12.8px; line-height: 1.5; color: #d5dded; white-space: pre-wrap; word-break: break-word; }
.tw-media { width: 100%; border-radius: 9px; max-height: 190px; object-fit: cover; border: 1px solid var(--border); }
.tw-cat {
  font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 7px; background: rgba(29,155,240,.16); color: #6cc4f5;
}
.tw-note { font-size: 11px; color: var(--muted); margin-bottom: 12px; line-height: 1.5; }

/* Signals (Telegram channels) full-page overlay */
#signalsPanel {
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 585;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(77,208,225,0.06), transparent 55%),
    var(--panel);
  display: flex; flex-direction: column;
  animation: chart-in 0.18s ease;
}
.sig-head {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 22px; border-bottom: 1px solid var(--border2);
  background: linear-gradient(180deg, rgba(14, 21, 32, 0.6), transparent);
}
.sig-head h2 {
  font-size: 18px; font-weight: 800; letter-spacing: 0.2px;
  background: linear-gradient(90deg, #E9EEF8, #8E99B0);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.sig-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
#sigClose {
  margin-left: auto; background: var(--panel2); border: 1px solid var(--border2);
  color: var(--muted); font-size: 13px; cursor: pointer; padding: 6px 14px; border-radius: 8px;
}
#sigClose::before { content: "✕  Close"; }
#sigClose:hover { color: var(--text); border-color: var(--accent-ink); }
.sig-disclaimer {
  margin: 12px 22px 0; padding: 10px 14px; border-radius: 10px;
  background: rgba(14, 21, 32, 0.07); border: 1px solid rgba(14, 21, 32, 0.25);
  font-size: 11.5px; line-height: 1.5; color: #d8c9a0;
}
.sig-disclaimer b { color: var(--accent-ink); }
.sig-body { flex: 1; overflow-y: auto; padding: 16px 22px 30px; }
.sig-group { margin-bottom: 22px; }
.sig-group h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--accent2); margin-bottom: 10px; font-weight: 700;
}
.sig-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.sig-card {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 14px; transition: border-color 0.1s, transform 0.1s;
}
.sig-card:hover { border-color: var(--accent2); transform: translateY(-1px); }
.sig-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 19px;
  background: linear-gradient(135deg, rgba(77,208,225,0.18), rgba(157,139,255,0.12));
  border: 1px solid var(--border2);
}
.sig-info { min-width: 0; flex: 1; }
.sig-name { font-weight: 700; font-size: 13.5px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.sig-verified { color: var(--accent2); font-size: 11px; }
.sig-handle { color: var(--muted); font-size: 11px; font-family: var(--mono); margin-top: 1px; }
.sig-desc { color: var(--muted); font-size: 11px; margin-top: 3px; line-height: 1.35; }
.sig-open { color: var(--accent2); font-size: 16px; flex-shrink: 0; }

/* The feed is the third column of the Top Movers strip, not a fixed overlay
   that covered the board from the top edge whenever it was open. */
#notifPanel {
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  border-left: 1px solid var(--border); padding-left: 16px;
}
#notifPanel.hidden { display: none; }
.np-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px;
  padding: 4px 0 6px; font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.np-filters { margin-left: auto; }
/* The feed now lives in a ~240-320px column, so its header has to give. The
   pill track wraps onto its own row instead of pushing "⬇ Down" out past the
   panel edge, and the close button stays up on the title row rather than
   being bumped to a line of its own. */
#notifPanel .np-filters { flex-wrap: wrap; flex-basis: 100%; order: 3; margin-left: 0; }
#notifPanel .nf { padding: 4px 9px; font-size: 10.5px; }
#npClose { margin-left: auto; }
#npClose { background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 14px; }
#npClose:hover { color: var(--text); }
#npBody { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 0 0; display: flex; flex-direction: column; gap: 6px; }
.np-item {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 9px; cursor: pointer; font-size: 11px; line-height: 1.35;
}
.np-item:hover { border-color: var(--accent-ink); }
.np-item.up { border-left: 3px solid var(--green); }
/* ---- 🏆 Winning ---- */
.np-item.np-win { border-left: 3px solid #f0b429; }
.npw-top { display: flex; align-items: center; gap: 6px; }
.npw-sym { font-weight: 800; }
.npw-sym small { color: var(--muted); font-weight: 400; margin-left: 4px; }
.npw-top .clogo { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.npw-peak { margin-left: auto; font-weight: 800; color: var(--green); white-space: nowrap; }
.npw-sub { color: var(--muted); font-size: 10px; margin-top: 3px; }
.npw-live { color: #f0b429; font-weight: 700; }
.npw-note { color: var(--muted); font-size: 10px; line-height: 1.45;
  border-top: 1px dashed var(--border); margin-top: 4px; padding-top: 7px; opacity: .9; }
.np-item.down { border-left: 3px solid var(--red); }
.np-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.np-dir { font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 8px; }
.np-dir.up { background: rgba(38,194,129,0.18); color: var(--green); }
.np-dir.down { background: rgba(240,97,109,0.18); color: var(--red); }
.np-kind { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.np-time { margin-left: auto; font-size: 10px; color: var(--muted); }
.np-detail { color: var(--muted); font-size: 11px; margin-top: 3px; }

.pattern-strip {
  border-bottom: 1px solid var(--border);
  padding: 8px 14px; max-height: 130px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 6px;
}
.pat {
  font-size: 12px; padding: 7px 10px; border-radius: 7px;
  background: var(--panel2); border: 1px solid var(--border); line-height: 1.4;
}
.pat.bullish { border-left: 3px solid var(--green); }
.pat.bearish { border-left: 3px solid var(--red); }
.pat.neutral { border-left: 3px solid var(--accent); }
.pat-status {
  font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 8px;
  background: var(--bg); margin-left: 6px; text-transform: uppercase;
}
.pat-note { color: var(--muted); font-size: 11px; margin-top: 3px; }

#toasts {
  /* Top right. These are a nudge; the permanent record is the 🔔 column in the
     movers strip, so they are kept narrow and few rather than allowed to stack
     down over the board. */
  /* top is set from the nav's height in JS: this used to be a flat 14px,
     which put the stack directly over the nav's Sign in button — on a
     narrow screen the nav wraps and the toasts swallowed the clicks. */
  /* above the overlays, which now start at 585. At the old 100 this was
     above the panels too; raising them without raising this would have
     hidden every toast behind an open panel. */
  position: fixed; top: var(--toast-top, 14px); right: 14px; z-index: 700;
  display: flex; flex-direction: column; gap: 8px;
  width: min(320px, calc(100vw - 28px));
}
.toast {
  background: var(--panel); border: 1px solid var(--accent);
  border-radius: 10px; padding: 10px 14px; font-size: 12px;
  box-shadow: 0 6px 24px rgba(14, 21, 32, 0.5); cursor: pointer;
  animation: toast-in 0.25s ease;
}
.toast:hover { background: var(--panel2); }
.toast-note { color: var(--muted); font-size: 10px; margin-top: 3px; }
@keyframes toast-in { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* full-page chart overlay — sits below the market ticker (34px) */
.chart-panel {
  /* above .ad-box (z-index 400): the sticky top banner and the fixed bottom bar
     were painting over this panel's header and swallowing clicks on Close */
  position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 600;
  /* Chart, AI, News, Research and Learning are all on screen at once, so
     they cannot all fit a fixed viewport -- the panel scrolls rather than
     squashing every section to a letterbox. Down only: anything too wide
     scrolls inside its own pane, so the panel never moves sideways. */
  overflow-x: hidden; overflow-y: auto;
  background:
    radial-gradient(1000px 500px at 15% -10%, rgba(77,208,225,0.05), transparent 55%),
    var(--panel);
  display: flex; flex-direction: column;
  animation: chart-in 0.18s ease;
}
@keyframes chart-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chart-header {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--border2);
  /* Opaque, because content now scrolls underneath it. Close and the coin name
     have to stay reachable from anywhere in the stack. */
  position: sticky; top: 0; z-index: 3;
  background: linear-gradient(180deg, rgba(14, 21, 32, 0.6), transparent), var(--panel);
}
.chart-sym { font-size: 18px; font-weight: 800; letter-spacing: 0.3px; }
.chart-name { color: var(--muted); font-size: 12px; }
.chart-stats { display: flex; flex-direction: column; font-size: 12px; }
#chartPrice { font-weight: 600; }
.intervals { margin-left: auto; display: inline-flex; align-items: center; gap: 2px;
  background: rgba(14, 21, 32, .045); border: 1px solid var(--border);
  border-radius: 11px; padding: 3px; }
.iv {
  background: transparent; border: 0; color: var(--muted);
  border-radius: 8px; padding: 5px 12px; cursor: pointer;
  font-size: 11.5px; font-weight: 600; transition: color .12s ease, background .12s ease;
}
.iv:hover { color: var(--text); background: rgba(255, 255, 255, .07); }
.iv.active { background: #232B40; color: #E9EEF8; font-weight: 700;
  box-shadow: 0 1px 2px rgba(14, 21, 32, .45); }
/* S/R is a toggle, not one of the mutually-exclusive intervals — keep it
   visually separate so it does not read as the selected timeframe */
.iv.sr { margin-left: 8px; border: 1px solid var(--border2); }
.iv.sr.active { background: transparent; color: var(--green); border-color: var(--green); box-shadow: none; }
#closeChart {
  background: var(--panel2); border: 1px solid var(--border2); color: var(--muted);
  font-size: 15px; cursor: pointer; padding: 5px 12px; border-radius: 7px;
  margin-left: 4px;
}
#closeChart::before { content: "✕  Close  "; font-size: 12px; }
#closeChart:hover { color: var(--text); border-color: var(--accent-ink); }

/* The chart fills its column, and that column's height is set by the three
   sections stacked beside it. The ResizeObserver on this element re-fits the
   chart to whatever that works out to. */
#chart { flex: 1; min-height: 320px; }

/* The chart tab strip is a full-width row that HOLDS the segmented control,
   so the track itself is styled above — this only positions it. Declared after
   the shared rule, so it must not restate background/colour or it would win. */
.tabs-row {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 14px; border-bottom: 1px solid var(--border);
}

.pane { flex: none; overflow-x: auto; padding: 12px 14px; }
.pane-msg { color: var(--muted); text-align: center; padding: 40px 10px; font-size: 12px; }

.news-item {
  display: flex; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid rgba(35, 42, 56, 0.5);
}
.news-item img {
  width: 64px; height: 64px; object-fit: cover; border-radius: 8px;
  background: var(--panel2); flex-shrink: 0;
}
.news-item .ni-body { min-width: 0; }
.news-item a.ni-title {
  color: var(--text); text-decoration: none; font-weight: 600;
  font-size: 13px; line-height: 1.35; display: block;
}
.news-item a.ni-title:hover { color: var(--accent-ink); }
.ni-meta { color: var(--muted); font-size: 11px; margin: 3px 0; }
.ni-meta .src { color: var(--accent-ink); }
.ni-snippet { color: var(--muted); font-size: 12px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-note { font-size: 11px; color: var(--muted); padding: 6px 0 10px; }

.r-section { margin-bottom: 16px; }
.r-section h3 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); margin-bottom: 8px;
}
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.stat {
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.stat .k { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; }
.stat .v { font-size: 13px; font-weight: 600; margin-top: 2px; }
.review-list { list-style: none; }
.review-list li {
  padding: 7px 10px; margin-bottom: 6px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--border);
  font-size: 12px; line-height: 1.45;
}
.review-list li.flag-bad { border-color: rgba(240, 97, 109, 0.4); }
.review-list li.flag-good { border-color: rgba(38, 194, 129, 0.35); }
.about-text { font-size: 12px; line-height: 1.55; color: #3C4757; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-row a {
  color: var(--accent-ink); text-decoration: none; font-size: 12px;
  background: var(--panel2); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
}
.link-row a:hover { border-color: var(--accent-ink); }

.trade-plan {
  padding: 8px 14px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted); line-height: 1.6;
  background: rgba(243, 186, 47, 0.04);
}
.trade-plan b { color: var(--text); }

.chart-footer {
  display: flex; gap: 20px; padding: 8px 14px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--muted);
}
.chart-footer b { color: var(--text); }
.live-tag { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--green); font-weight: 600; }

@media (max-width: 1100px) {
  .chart-panel { top: 34px; }
}

.auth-menu { display: flex; align-items: center; gap: 8px; margin-left: 6px; padding-left: 10px; border-left: 1px solid var(--border); }
.auth-menu a { color: var(--accent-ink); text-decoration: none; font-size: 11px; }
.auth-menu a:hover { text-decoration: underline; }
.auth-menu button {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  border-radius: 5px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.auth-menu button:hover { color: var(--text); }

/* ------------------------------ site search ------------------------------ */
.cs-search-wrap{position:relative;display:inline-block;margin-right:6px}
#csSearchBox{background:#171D2E;border:1px solid #232B40;border-radius:8px;
  color:#E9EEF8;font-size:13px;padding:7px 12px;min-width:230px;outline:none}
#csSearchBox:focus{border-color:#FFC84D}
#csSearchBox::placeholder{color:#6d7a8e}
#csSearchBox{min-width:200px}
/* The page went light in the redesign and this list stayed dark, with dark
   ticker text on it: the symbols could not be read at all. */
.cs-search-results{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:70;
  background:#121724;border:1px solid #232B40;border-radius:4px;overflow:hidden;
  box-shadow:0 14px 34px rgba(14, 21, 32, .14);max-height:62vh;overflow-y:auto;min-width:360px}
.cs-search-results.hidden{display:none}
.cs-sr{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer;
  border-bottom:1px solid #EDF1F5;text-decoration:none;color:#E9EEF8}
.cs-sr:last-child{border-bottom:0}
.cs-sr:hover,.cs-sr.on{background:#121724}
.cs-sr .sym{font-weight:700;color:#E9EEF8;min-width:62px;font-family:"Archivo","Archivo Fallback",system-ui,sans-serif}
.cs-sr .nm{color:#8E99B0;font-size:12.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cs-sr .px{color:#E9EEF8;font-size:12px;font-family:"IBM Plex Mono","IBM Plex Mono Fallback",ui-monospace,monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.cs-sr .px.old{color:#6D7883}
.cs-sr .lv{display:inline-block;width:6px;height:6px;border-radius:50%;background:#098757;
  margin-right:6px;vertical-align:1px}
.cs-sr .kind{font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  padding:2px 7px;border-radius:999px;font-weight:700}
.cs-sr .kind.pair{background:#087E5122;color:#087E51}
.cs-sr .kind.project{background:#6D4AE022;color:#6D4AE0}
.cs-sr .kind.pool{background:#F0A50022;color:#FFC84D}
.cs-sr .kind.token{background:#2F6FDB1A;color:#2F5FB8}
.cs-sr-empty{padding:12px;color:#8E99B0;font-size:13px}

/* --------------------------------------------------------------------------
   Layout corrections, 2026-08-25. Each measured in the browser at 1600px.
   -------------------------------------------------------------------------- */

/* The in-flow banners had no width and collapsed to 2px inside the flex
   column, which pushed their close button to left:-17px. */
#ad-top, #ad-bottom {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  align-self: center;
}
#ad-top:empty, #ad-bottom:empty { display: none; }

/* The right rail is fixed, so nothing was reserving its column and it painted
   over the content. Give it back its space, and only run it where there is
   room for it. */
@media (min-width: 1400px) {
  body.has-ad-rail { padding-right: 196px; }
  body.has-ad-rail .ad-right { display: block; }
}
@media (max-width: 1399px) {
  .ad-right { display: none !important; }
  body.has-ad-rail { padding-right: 0; }
}

/* A dismiss control has to be reachable. 11x16 is not. */
#npClose, .ad-x, [class*="ad-close"], .np-close {
  min-width: 26px;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  right: 6px;
  top: 6px;
}
#npClose:hover, .ad-x:hover { background: rgba(14, 21, 32, .07); }

/* Headings painted with a clipped gradient: white-to-pale over a white page is
   invisible. Run the gradient dark instead. */
h1, h2, .grad, [class*="grad"] {
  -webkit-text-fill-color: currentColor;
}
h1[style*="clip"], .coin-sec > h2 {
  background-image: linear-gradient(90deg, #E9EEF8, #8E99B0);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ads-row width guard: the banners resolve `width:100%` against their parent,
   and the parent was shrinking to its own content, so 100% meant 2px. */
#ad-top, #ad-bottom { width: 100% !important; max-width: 1180px; margin-inline: auto; align-self: stretch; }
#ad-top > *, #ad-bottom > * { max-width: 100%; }

/* A coin URL stacks the board and the coin view instead of placing them side by
   side. Without this the chart, now in flow, is a flex sibling that takes the
   whole row and leaves the board collapsed to zero width — which silently took
   the banner ads with it (board collapsed to zero, ads to 2px). */
body.pair-page main { flex-direction: column; }
body.pair-page .table-panel { width: 100%; flex: 0 0 auto; overflow: visible; }
body.pair-page .chart-panel { width: 100%; flex: 0 0 auto; }
/* Where the 1,356px board is wider than the screen it scrolls sideways inside
   its panel. Left visible, it spilled past the page edge, and a phone browser
   zoomed the whole coin page out to fit it (innerHeight read 2,937 on an
   812px phone, so the filter block also opened). The cost is the sticky
   table header on narrow screens, which now sticks inside the panel. */
@media (max-width: 1100px) {
  body.pair-page .table-panel { overflow-x: auto; }
}
/* The last 10px a phone could scroll sideways on a coin page: the chart's
   volume line (five figures and LIVE) did not wrap, and the coin summary grid
   let its widest word set the column. */
@media (max-width: 760px) {
  .chart-footer { flex-wrap: wrap; gap: 4px 14px; }
  body.pair-page .cs-grid { grid-template-columns: minmax(0, 1fr); }
  body.pair-page .cs-grid > * { min-width: 0; }
  /* On a phone the coin comes first. The board's filters, search and movers
     (528px) sat above it, so the coin a visitor opened started 626px down,
     under a list of other coins. main steps out of the way (display:
     contents) so the coin panel can be ordered above the board's header. */
  body.pair-page main { display: contents; }
  body.pair-page #chartPanel { order: 1; }
  body.pair-page > header { order: 2; }
  body.pair-page > #moversPanel { order: 3; }
  body.pair-page main > .table-panel { order: 4; }   /* beats the order: 2 further down */
  body.pair-page > #burstBar { order: 5; }
  /* The board's smallest type, read on a phone: 10px trend badges and 11.5px
     names. Movers tabs were 26px tall and page buttons 30px, under a finger's
     width. body raises these over the house-style rules further down. */
  body #coinTable .tb { font-size: 11.5px; padding: 2px 6px; }
  body #coinTable .coin-name { font-size: 12.5px; }
  body .mtab { min-height: 34px; }
  body .pager button.pg { min-width: 40px; height: 40px; }
}

/* On a coin URL, show the coin first. The board is 4,000px tall, and putting it
   above the chart means scrolling past the whole market to reach the one coin
   the visitor asked for. */
body.pair-page #chartPanel { order: 1; }
body.pair-page .table-panel { order: 2; }
/* #pair-seo is a grid item inside the coin panel now, so its place comes
   from grid-area rather than flex order. */
/* the coin view no longer needs to fill a screen it now starts at the top of */
body.pair-page .chart-panel { min-height: 0; }

/* On a coin URL the panel is the page, not an overlay: there is nothing behind
   it to go back to, so Close would strand the visitor on a coin URL showing no
   coin. The tracker keeps the button. */
body.pair-page #closeChart { display: none; }

/* ------------------------------------------------------------------ *
 * Filter bar.
 *
 * Thirteen controls in a flat row read as a wall: "Max market cap" sat
 * beside "Stop-loss" with nothing to say they do different jobs. They are
 * grouped by purpose now, with one caption per group rather than a label
 * over every field, and the fields share a width so the row has a rhythm
 * instead of thirteen different edges.
 * ------------------------------------------------------------------ */
.controls{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.ctl-group{position:relative;display:flex;align-items:flex-end;gap:9px;
  padding:15px 13px 10px;border:1px solid var(--border);border-radius:11px;
  background:var(--panel)}
.ctl-cap{position:absolute;top:-7px;left:11px;padding:0 6px;background:var(--bg);
  font-size:9.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted)}
.controls label{display:flex;flex-direction:column;gap:4px;font-size:10.5px;
  color:var(--muted);letter-spacing:.01em}
.controls label.check{flex-direction:row;align-items:center;gap:6px;
  font-size:11.5px;padding-bottom:7px;white-space:nowrap;cursor:pointer}
.controls label.check input{margin:0;cursor:pointer}
.input-wrap{min-height:33px}
.ctl-go{display:flex;align-items:flex-end}
#applyBtn{min-height:33px;padding:0 26px;border-radius:9px;font-size:13px;
  letter-spacing:.02em}

/* ---- the panel launchers ---- */
.panel-set{display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:3px;border:1px solid var(--border);border-radius:10px;
  background:var(--panel)}
.panel-set button{background:transparent;border:1px solid transparent;
  border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:600;
  color:var(--muted);cursor:pointer;white-space:nowrap}
.panel-set button:hover{background:var(--panel2);color:var(--text);
  border-color:var(--border)}
.panel-set button.on{background:var(--accent);border-color:var(--accent);
  color:#16110a}
.panel-set .ncount{margin-left:5px}
@media(max-width:900px){
  .ctl-group{flex-wrap:wrap;width:100%}
  .ctl-go,.ctl-go #applyBtn{width:100%}
}

/* =========================================================================
   House style: the board wears the front page's design (2026-09-15).

   The tracker had drifted into a second look. Most of it was a dark theme
   that was never fully taken out when the site went light: the header band
   was a translucent near-black gradient over a white page, which rendered as
   a grey slab; the table header was #131826; a selected row turned navy; the
   market bar carried dark dividers and a teal wordmark; house adverts were
   purple. None of that exists on home.php.

   This block restates the front page's system on top of what is here, and
   sits last so it wins by source order. It changes how things look, never
   where they are or whether they show: column visibility (the nth-child rules
   under body.simple), overlay stacking and the pair-page layout are untouched.
   ========================================================================= */
:root {
  --bg: #0A0D14; --bg2: #121724; --panel: #FFFFFF; --panel2: #121724;
  --border: #232B40; --border2: #232B40; --rule-soft: #1B2234;
  --text: #E9EEF8; --muted: #8E99B0; --dim: #6D7883;
  --green: #098757; --green-dim: #098757; --red: #D62B3F; --red-dim: #D62B3F;
  --accent: #F0A500; --accent-ink: #A16C00; --accent2: #F0A500;
  --mono: "IBM Plex Mono","IBM Plex Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: "Archivo","Archivo Fallback", system-ui, sans-serif;
  --body: "IBM Plex Sans","IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
body { background: var(--bg); font-family: var(--body); font-size: 13.5px; }

/* ---- site menu: white, like the front page's bar ---- */
body .cs-topnav { background: var(--panel); border-bottom: 1px solid var(--border); padding: 11px 22px; }
body .cs-brand { font-family: var(--display); font-size: 15px; letter-spacing: -.02em; }
body .cs-brand b { color: var(--accent); }
body .cs-links a { font-size: 13px; color: var(--muted); }
body .cs-links a:hover, body .cs-links a.on { color: var(--text); }
body .cs-cta { font-family: var(--mono); font-size: 12px; font-weight: 600; border-radius: 4px;
  padding: 8px 15px; color: #241A00; }

/* ---- market figures: the front page's strip, above the menu ---- */
#mktBar { order: -1; background: var(--panel); backdrop-filter: none; height: auto; min-height: 0;
  padding: 7px 22px; gap: 20px; font-family: var(--mono); border-bottom: 1px solid var(--border); }
#mktBar .mkt-brand { display: none; }            /* the menu below already carries the mark */
#mktBar .mktbar { padding: 0; height: auto; border-right: 0; font-size: 11px; gap: 6px; color: var(--muted); }
#mktBar .mktbar .k { font-size: 11px; letter-spacing: .02em; }
#mktBar .mktbar b { color: var(--text); font-weight: 600; }
.fng-pill { border-radius: 4px; font-family: var(--mono); font-size: 10.5px; }

/* ---- controls row: the front page's chip row ---- */
header { background: var(--bg); backdrop-filter: none; padding: 12px 22px; gap: 14px;
  border-bottom: 1px solid var(--border); }
.status { gap: 8px; font-family: var(--mono); font-size: 11px; }
#csSearchBox { background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 11px; font-family: var(--body); font-size: 13px; color: var(--text); min-width: 240px; }
#csSearchBox:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.mkt-seg, .panel-set { background: transparent; border: 0; padding: 0; gap: 7px; border-radius: 0; }
.mkt-btn, .panel-set button, .filters-toggle {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0;
  padding: 6px 12px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); }
.mkt-btn:hover, .panel-set button:hover, .filters-toggle:hover {
  color: var(--text); border-color: var(--dim); background: var(--panel); }
.mkt-btn.on, .panel-set button.on { background: var(--accent); border-color: var(--accent); color: #241A00; }

/* the tabs inside panels share the chip language */
.mtab, .nf, .dx-tf, .tab {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  padding: 5px 10px; border-radius: 4px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); }
.mtab:hover, .nf:hover, .dx-tf:hover, .tab:hover { color: var(--text); border-color: var(--dim); background: var(--panel); }
.mtab.active, .nf.active, .dx-tf.active, .tab.active,
.mtab.active:hover, .nf.active:hover, .dx-tf.active:hover, .tab.active:hover {
  background: var(--accent); border-color: var(--accent); color: #241A00; }

#applyBtn { font-family: var(--mono); font-size: 12px; font-weight: 600; border-radius: 4px;
  background: var(--accent); color: #241A00; border: 0; }
#applyBtn:hover { background: #F2A600; }

/* ---- top movers and notifications: the front page's event panels ---- */
#moversPanel { background: var(--panel); border-bottom: 1px solid var(--border); }
.movers-head { padding: 11px 22px 9px; gap: 12px; }
.movers-title, .mv-h, .np-head b, .burst-head b {
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); }
.mv-h.pos { color: var(--green); } .mv-h.neg { color: var(--red); }
.movers-info { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.mover-row { border-radius: 0; border-bottom: 1px solid var(--rule-soft); }
.mover-row:hover { background: var(--bg2); }
.mover-row .m-sym { font-family: var(--display); font-weight: 700; font-size: 13px; letter-spacing: -.01em; }
.mover-row .m-px, .mover-row .m-rank { font-family: var(--mono); }
#notifPanel { background: var(--panel); border-left: 1px solid var(--border); }
.np-item { border-radius: 4px; border-color: var(--border); }
.np-item:hover { border-color: var(--accent); }

/* ---- the board: the front page's table ---- */
thead th {
  background: var(--panel); border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .11em;
  color: var(--muted); padding: 10px 12px; }
thead th:hover { color: var(--text); }
thead th.sorted { color: var(--accent-ink); }
tbody tr { border-bottom: 1px solid var(--rule-soft); }
tbody tr:hover { background: var(--bg2); box-shadow: none; }
tbody tr.selected { background: rgba(224, 150, 0, .07); box-shadow: inset 3px 0 0 var(--accent); }
/* the board's rows only: overlay tables (DEX, whales) stay as dense as they are */
#coinTable td { padding: 9px 12px; }
#coinTable td.td-price, #coinTable td.num { font-family: var(--mono); font-size: 12.5px; }
.sym { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -.015em; }
.coin-name { font-family: var(--body); font-size: 11.5px; color: var(--dim); }
.pos { color: var(--green); } .neg { color: var(--red); }
/* a burst is the one loud cue on the front page, and the same cue here */
tbody tr.spike-hot { background: linear-gradient(90deg, rgba(11,154,99,.09), transparent 46%); }
tbody tr.spike-warm { background: linear-gradient(90deg, rgba(11,154,99,.045), transparent 46%); }
tbody tr.spike-hot td:first-child { box-shadow: inset 3px 0 0 var(--green); }

/* pages and the plan bar, as the front page draws them */
.pager button.pg { border-radius: 4px; font-family: var(--mono); font-size: 12px; }
.pager button.pg.on { background: var(--accent); border-color: var(--accent); color: #241A00; }
.pager .pg-count { font-family: var(--mono); font-size: 11.5px; }
.gate-more { border-radius: 4px; }
.gate-cta { border-radius: 4px; font-family: var(--mono); }

/* ---- advertising: amber and hairlines rather than purple ---- */
.ad-box { border-radius: 4px; border: 1px solid var(--border); }
.ad-box.ad-house { border-style: dashed; border-color: var(--border); background: var(--panel); }
.house-ad b { color: var(--accent-ink); }
.ad-cta { font-family: var(--mono); color: var(--accent-ink); background: rgba(224,150,0,.1);
  border-color: rgba(224,150,0,.35); border-radius: 4px; }
.ad-cta:hover { background: var(--accent); border-color: var(--accent); color: #241A00; }
.site-legal a:hover { color: var(--accent-ink); }

/* ---- volume bursts ---- */
#burstBar { background: var(--panel); border-top: 1px solid var(--border); }
.burst-head { padding: 8px 22px; font-family: var(--mono); font-size: 11px; }
.burst-head input { border-radius: 4px; font-family: var(--mono); }

/* ---- plan notices: amber, the brand's own colour, rather than purple ---- */
.filter-lock-note { border-radius: 4px; color: var(--text);
  background: rgba(224,150,0,.07); border: 1px solid rgba(224,150,0,.32); }
@keyframes filterLockFlash {
  0%, 100% { background: rgba(224,150,0,.07); border-color: rgba(224,150,0,.32); }
  35%      { background: rgba(224,150,0,.22); border-color: rgba(224,150,0,.8); }
}
.gate-more { border-radius: 4px; background: rgba(224,150,0,.06); border: 1px solid rgba(224,150,0,.3); }
.gate-cta, .gate-cta:hover { background: var(--accent); color: #241A00; border-radius: 4px;
  font-family: var(--mono); font-weight: 600; filter: none; }
.gate-cta:hover { background: #F2A600; }
.mover-unlock { border-radius: 4px; color: var(--accent-ink);
  background: rgba(224,150,0,.07); border: 1px solid rgba(224,150,0,.3); font-family: var(--mono); font-weight: 600; }
/* PERP reads like the front page's row tags: a quiet outline, not a coloured pill */
.fut-tag { font-family: var(--mono); font-size: 8.5px; font-weight: 600; letter-spacing: .1em;
  color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; }

/* The right rail placeholder. It floats over the page, and the gutter that
   keeps it off the content was decided once at load, before any advert had
   arrived — so the gutter never opened and "Advertise here" sat on top of the
   paid-plan notice and the panel buttons. The top banner and the bottom bar
   already advertise the slots; a paid rail advert still shows, and the script
   at the end of the page now opens the gutter whenever one does. */
.ad-right.ad-house { display: none !important; }

/* the live status reads as one line, as the front page's count does */
.status { flex-wrap: wrap; row-gap: 8px; }
#statusText { white-space: nowrap; font-family: var(--mono); font-size: 11px; color: var(--dim); }

@media (max-width: 720px) {
  #mktBar, header, .movers-head, body .cs-topnav, .burst-head { padding-left: 12px; padding-right: 12px; }
  .cs-search-wrap { width: 100%; }
  #csSearchBox { min-width: 0; width: 100%; }
}

/* Phones: the two smallest tags grow a notch. At the end of the sheet on purpose:
   .fut-tag and .dx-chain are declared later than the DEX phone block above, and
   at equal specificity the later rule wins (2026-10-29). */
@media (max-width: 800px) {
  .fut-tag { font-size: 9.5px; }
  .dx-chain { font-size: 10px; }
}

/* Phones (2026-10-29): the Whale Portal, Unusual and X feed heads kept their
   title block beside the controls, 75 to 109px wide, so the subtitle ran to
   eight lines; the title now takes the whole row and the controls the next
   (Whale head 207px to 129px). Signals and Cap Of fit as they are and keep
   one row. The whale cards' detail lines were 9px and 9.2px. */
@media (max-width: 800px) {
  #whalePanel .sig-head, #unusualPanel .sig-head, #tweetsPanel .sig-head { flex-wrap: wrap; row-gap: 8px; }
  #whalePanel .sig-head > div:first-child, #unusualPanel .sig-head > div:first-child,
  #tweetsPanel .sig-head > div:first-child { flex: 1 1 100%; }
  .wh-badge { font-size: 10px; }
  .wh-creator { font-size: 10px; }
  .wh-creator.sm { font-size: 9px; }
  #whalePanel .wh-sig small { font-size: 10.5px; }
}

/* Phones (2026-10-29): the Unusual panel rows. The 2-week range rows kept their
   five desktop columns, so the body scrolled sideways (436px in 375) and the
   range bar, the point of the view, collapsed to 2px; now the bar gets 70px or
   more and its two price labels go (they overlapped in it). The unusual rows had
   six columns in 12px gaps; on a phone the tags and the z-score line each take
   a row of their own under score, coin, volume and move, and the column
   headings go with them. */
@media (max-width: 800px) {
  #unBody .rg-row { grid-template-columns: 24px 66px 58px minmax(70px, 1fr) 60px; gap: 6px; }
  #unBody .rg-lo, #unBody .rg-hi { display: none; }
  #unBody .un-head { display: none; }
  #unBody .un-row { grid-template-columns: 36px minmax(0, 1fr) 64px 56px; gap: 6px 8px; }
  #unBody .un-row > :nth-child(5), #unBody .un-row > :nth-child(6) { grid-column: 1 / -1; text-align: left; }
}

/* Phones (2026-10-29): the X feed cards' category badge was 9px. */
@media (max-width: 800px) {
  .tw-cat { font-size: 10px; }
}

/* Phones (2026-10-30): the notification feed lives in the movers strip, and on
   a phone that strip is a flex item squeezed to about 104px between the header,
   the board, the advert and the burst bar, so the alerts were read through a
   letterbox under the gainers list. Open, the feed now covers the screen like
   the DEX and Whale panels do, with its own close button; closed, the strip is
   as before. Its smallest text grows from 9 to 10.5px. */
@media (max-width: 800px) {
  #moversPanel .movers-body.with-notif #notifPanel {
    position: fixed; top: 34px; left: 0; right: 0; bottom: 0; z-index: 588;
    background: var(--panel); padding: 10px 16px 16px; margin: 0; border: 0; overflow-y: auto;
  }
  .npw-sub, .npw-note, .np-dir, .np-kind, .np-time { font-size: 10.5px; }
  #notifPanel small { font-size: 10px; }
}