/* ──────────────────────────────────────────────────────────────────────────
   Screener table, 2026 rebuild.

   The old table carried fifteen columns — five separate price-change windows,
   spark, volume, liquidity, market cap, holders, trust, trades and age — all
   side by side. On anything narrower than a desktop it overflowed to the right,
   so the numbers people came for sat off-screen behind a horizontal scroll
   nobody discovers.

   Now: six columns, with the 24h change as the headline, and everything else
   one tap away in a row that opens underneath. Works the same in dark, light
   and game mode; the colours come from the theme's own variables, never
   hardcoded, so the modes keep their character.
   ────────────────────────────────────────────────────────────────────────── */

/* The chevron column stays narrow at every width. */
.t-table th.c-exp, .t-table td.c-exp { width: 30px; padding-left: 6px; padding-right: 0; }

.t-exp {
  display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; padding: 0;
  background: none; border: 1px solid var(--panel-border, rgba(255,255,255,.12));
  border-radius: 6px; cursor: pointer; color: var(--text2);
  transition: transform .18s ease, color .15s, border-color .15s, background .15s;
}
.t-exp svg { width: 10px; height: 7px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.t-exp { flex: 0 0 22px; color: var(--text2); }
.t-exp:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-dim, transparent); }
.t-exp.open { transform: rotate(180deg); color: var(--accent); border-color: var(--accent); }

/* The 24h column is the headline number — give it weight. */
.t-table td.c-24h { font-weight: 700; font-size: 1.02em; white-space: nowrap; }

/* ── the expander row ─────────────────────────────────────────────────────
   Animated on grid-template-rows rather than height, so it opens smoothly
   without measuring anything in JavaScript. */
tr.t-detail > td { padding: 0 !important; border: 0 !important; background: transparent; }
tr.t-detail .t-dwrap {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s ease;
}
tr.t-detail.open .t-dwrap { grid-template-rows: 1fr; }
tr.t-detail .t-dgrid {
  overflow: hidden;
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  background: var(--panel-border, rgba(255,255,255,.08));
  border-left: 2px solid var(--accent);
}
tr.t-detail.open .t-dgrid { padding: 0; }

.t-dcell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 12px;
  background: var(--bg2, rgba(255,255,255,.02));
}
.t-dlab {
  font-family: var(--font-head, inherit);
  font-size: 8.5px; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text3);
}
.t-dval { font-size: 13px; font-weight: 600; color: var(--text); }

/* Phones: the two widest money columns go, leaving token / price / 24h / trend.
   Everything dropped here is still in the expander, so nothing is lost. */
@media (max-width: 720px) {
  .t-table th:nth-child(6), .t-table td:nth-child(6),
  .t-table th:nth-child(7), .t-table td:nth-child(7) { display: none; }
  .t-dgrid { grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)); }
  .t-table td.c-24h { font-size: 1em; }
}
/* Below 560 the sparkline is the first thing to go: the 24h number is why anyone
   opened the page, and it was being clipped at the right edge on a 390px phone. */
@media (max-width: 560px) {
  .t-table th.spark-cell, .t-table td.spark-cell { display: none; }
  .t-table td.c-24h, .t-table th[data-sort="change_24h"] { text-align: right; padding-right: 10px; }
  .t-table th.c-exp, .t-table td.c-exp { width: 26px; padding-left: 4px; }
}

/* ── light mode ── */
body.apex-light-active .t-dcell { background: #fafafc; }
body.apex-light-active .t-dgrid { background: rgba(0,0,0,.07); }
body.apex-light-active .t-exp { border-color: rgba(0,0,0,.14); }

/* ── game mode: same structure, louder ── */
.game-mode .t-dgrid { border-left-width: 3px; }
.game-mode .t-dlab { letter-spacing: 1.1px; }
.game-mode .t-exp.open { box-shadow: 0 0 8px var(--accent-glow, transparent); }

/* ── Empty states ─────────────────────────────────────────────────────────
   The cell must never widen the table. A long sentence in a <td> stretched the
   whole table to 481px on a 390px phone, so the page scrolled sideways and the
   text ran off the edge — in the one view where the user has nothing to look at
   and most needs to be able to read the instructions. */
.t-empty-cell { padding: 0 !important; }
.t-empty {
  box-sizing: border-box;
  width: 100%; max-width: 100vw;
  margin: 0 auto; padding: 40px 22px 44px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.t-empty-ico {
  width: 46px; height: 46px; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; line-height: 1;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-dim, rgba(0,200,255,.12));
  border: 1px solid var(--panel-border, rgba(255,255,255,.12));
}
.t-empty-h {
  font-family: var(--font-head, inherit);
  font-size: 13px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--text); margin-bottom: 7px;
}
.t-empty-p {
  margin: 0 0 18px; max-width: 34ch;
  font-size: 13px; line-height: 1.55; color: var(--text2);
  white-space: normal; word-break: break-word;
}
.t-empty-cta {
  padding: 11px 20px; border-radius: 10px; border: 0; cursor: pointer;
  font-size: 13px; font-weight: 700;
  background: linear-gradient(90deg, #7ef0c8, #5ff4ff); color: #04222c;
  transition: transform .12s ease, filter .15s;
}
.t-empty-cta:hover { transform: translateY(-1px); filter: brightness(1.06); }
.t-empty-cta:active { transform: translateY(0); }

body.apex-light-active .t-empty-ico { background: rgba(0,0,0,.05); }
.game-mode .t-empty-h { letter-spacing: 1.2px; }
.game-mode .t-empty-cta { box-shadow: 0 0 12px var(--accent-glow, transparent); }

/* ── the expander chevron must survive the global button rules ─────────────
   game-mode.css restyles every <button> with !important (cyan gradient,
   12px radius, 10px/20px padding) and light mode paints button backgrounds
   white. Both hit the 22px chevron and inflated it into a 42x44 solid block —
   the "blue cube" over the chart in game mode, and the blank white squares
   down the left of every row in light mode. Pin it back, with the same
   specificity weapon. */
.t-exp,
.game-mode .t-exp,
body.apex-light-active .t-exp,
.game-mode button.t-exp {
  width: 22px !important; height: 22px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important;
  flex: 0 0 22px !important;
  border-radius: 6px !important;
  background: none !important; background-image: none !important;
  box-shadow: none !important;
  border: 1px solid var(--panel-border, rgba(255,255,255,.12)) !important;
  color: var(--text2) !important;
  font-size: 0 !important; letter-spacing: 0 !important;
  text-transform: none !important;
}
.game-mode .t-exp:active, body.apex-light-active .t-exp:active {
  transform: scale(.92) !important; box-shadow: none !important;
}
.t-exp.open, .game-mode .t-exp.open, body.apex-light-active .t-exp.open {
  transform: rotate(180deg) !important;
  color: var(--accent) !important; border-color: var(--accent) !important;
}
.t-exp svg, .game-mode .t-exp svg { width: 10px !important; height: 7px !important; display: block !important; }
body.apex-light-active .t-exp { border-color: rgba(0,0,0,.18) !important; color: rgba(0,0,0,.55) !important; }

/* ── chart empty / error note ──────────────────────────────────────────────
   Sits inside the chart box so it lands exactly where the candles would be. */
.d-chart { position: relative; }
.d-chart-note {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 20px; text-align: center; pointer-events: none;
}
.d-cn-ico { font-size: 26px; opacity: .45; line-height: 1; }
.d-cn-t { font-family: var(--font-head, inherit); font-size: 12px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--text2); }
.d-cn-b { font-size: 11.5px; line-height: 1.55; color: var(--text3); max-width: 34ch; }

/* ── change-window switcher, in the column header ──────────────────────────
   The old table answered "how much did it move?" with one fixed number and
   buried the other four windows behind a tap. Now the header IS the control:
   1m / 1h / 6h / 24h / 7d, one tap, every row updates at once. 24h stays the
   default because that is the number people come for. */
.t-table th.c-chg { cursor: pointer; }
.thc-lab { display: none; }
.tfsw {
  display: inline-flex; gap: 1px; padding: 2px;
  background: var(--bg2, rgba(255,255,255,.04));
  border: 1px solid var(--panel-border, rgba(255,255,255,.1));
  border-radius: 999px; vertical-align: middle;
}
.tfsw-b {
  appearance: none; -webkit-appearance: none;
  border: 0 !important; background: none !important; background-image: none !important;
  box-shadow: none !important;
  padding: 3px 7px !important; margin: 0 !important;
  min-width: 0 !important; min-height: 0 !important;
  border-radius: 999px !important;
  font-family: var(--font-head, inherit) !important;
  font-size: 9px !important; letter-spacing: .04em !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  cursor: pointer; line-height: 1.4;
  transition: color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.tfsw-b:hover { color: var(--text) !important; }
.tfsw-b.active {
  background: var(--accent, #00c8ff) !important;
  color: #05131c !important; font-weight: 700 !important;
}
body.apex-light-active .tfsw-b.active { color: #fff !important; }
.game-mode .tfsw-b.active { box-shadow: 0 0 8px var(--accent-glow, transparent) !important; }
/* the header cell no longer shows the sort arrow — the pills say which window */
.t-table th.c-chg.sorted::after { content: ""; }

/* ── fit the phone ─────────────────────────────────────────────────────────
   The table carried min-width:800px, so on a 390px screen it always scrolled
   sideways and Volume/Liquidity sat off the edge. Both numbers are already in
   the row that opens under the chevron, so on a phone they come out of the
   grid entirely rather than pushing it off-screen. */
@media (max-width: 640px) {
  .t-table th:nth-child(6), .t-table td:nth-child(6),
  .t-table th:nth-child(7), .t-table td:nth-child(7) { display: none; }
  .t-table tr.t-detail > td { display: table-cell !important; }
  .tfsw-b { padding: 2px 4px !important; font-size: 8px !important; letter-spacing: 0 !important; }
  .tfsw { padding: 1px; gap: 0; }
  .t-table th, .t-table td { padding-left: 5px; padding-right: 5px; }
}

/* Lightweight Charts writes touch-action inline on its own canvases, so the
   stylesheet rule on .d-chart canvas lost. Without this the library never sees
   a vertical drag: the browser scrolls the page instead, which is why dragging
   the price scale and panning up/down did nothing. */
.d-chart, .d-chart canvas, .d-chart div,
.lwc-box, .lwc-box canvas, .lwc-box div, .lwc-box table { touch-action: none !important; }

/* Below ~430px the sparkline column is the last thing that still pushes the
   grid past the screen. The trend it shows is the same story the % already
   tells, so it goes rather than the numbers. */
@media (max-width: 430px) {
  .t-table th.spark-cell, .t-table td.spark-cell { display: none; }
}

/* ── the phone-width switcher bar ──────────────────────────────────────────
   Only one switcher shows at a time: the header one on desktop where there is
   room in the column, this one on a phone where there is not. */
.tfsw-bar { display: none; align-items: center; gap: 8px; padding: 8px 10px 10px; }
.tfsw-bar-lab {
  font-family: var(--font-head, inherit); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3); white-space: nowrap;
}
.tfsw-bar .tfsw { flex: 1; justify-content: space-between; }
.tfsw-bar .tfsw-b { flex: 1; text-align: center; font-size: 10px !important; padding: 5px 4px !important; }

@media (max-width: 640px) {
  .tfsw-bar { display: flex; }
  #th-chg .tfsw { display: none; }
  #th-chg .thc-lab { display: inline; }
}

/* ── tap latency ──────────────────────────────────────────────────────────
   Mobile browsers hold every tap for ~300ms waiting to see if it becomes a
   double-tap-to-zoom. On a page of small controls that reads as the whole UI
   being sluggish. `touch-action: manipulation` opts each control out of the
   double-tap gesture, so the click fires on touchend instead. */
button, .filter-chip, .tfsw-b, .t-exp, .mnav-tab, .wl-star, .view-btn,
.d-tf, .tk-tab, .t-empty-cta, a.btn, [role="button"] {
  touch-action: manipulation;
}
/* and a visible acknowledgement, so a tap never looks ignored while data loads */
.t-empty-cta.t-cta-busy { opacity: .6; transform: scale(.97); }
.filter-chip:active, .mnav-tab:active, .t-empty-cta:active { transform: scale(.97); }

/* ── bottom navigation: one bar, not three buttons ────────────────────────
   Martin, 2026-09-13: "to have like three buttons is just fucking ugly ...
   look at elegance, beauty, design."
   The base style was already a flat strip; what made them read as three
   separate cards is the global button treatment (game-mode.css and the
   2026 theme sheets paint every <button> with a border, radius and shadow,
   all !important). So this takes the chrome back off and rebuilds the strip
   as a single segmented control: one rounded bar, hairline dividers, and a
   filled pill that marks where you are. */
#mobile-nav {
  height: 62px !important;
  padding: 7px 10px calc(7px + env(safe-area-inset-bottom, 0px)) !important;
  background: color-mix(in srgb, var(--panel) 92%, transparent) !important;
  border-top: 1px solid var(--panel-border) !important;
  justify-content: center !important;
  gap: 0 !important;
}
/* the bar itself */
#mobile-nav::before {
  content: ""; position: absolute; left: 10px; right: 10px; top: 7px; bottom: 7px;
  border-radius: 999px;
  background: var(--bg2, rgba(255,255,255,.04));
  border: 1px solid var(--panel-border);
  pointer-events: none;
}
#mobile-nav { position: fixed; }
#mobile-nav button.mnav-tab {
  position: relative; z-index: 1;
  flex: 1 1 0 !important; min-width: 0 !important;
  display: flex !important; flex-direction: row !important;
  align-items: center !important; justify-content: center !important; gap: 7px !important;
  height: 100% !important;
  background: none !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important;
  border-radius: 999px !important;
  padding: 0 6px !important; margin: 0 !important;
  font-size: 10px !important; letter-spacing: .06em !important;
  color: var(--text3) !important; -webkit-text-fill-color: currentColor !important;
  text-transform: uppercase !important;
  transition: color .18s ease, background .18s ease;
}
/* hairline dividers between segments, never on the ends */
#mobile-nav button.mnav-tab + button.mnav-tab::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 18px; background: var(--panel-border);
  transition: opacity .18s ease;
}
#mobile-nav button.mnav-tab svg { width: 16px !important; height: 16px !important; flex: none; }
#mobile-nav button.mnav-tab.active {
  color: var(--accent) !important;
  background: var(--accent-dim, rgba(0,200,255,.12)) !important;
}
/* the divider next to the highlighted pill would clip its edge */
#mobile-nav button.mnav-tab.active::before, #mobile-nav button.mnav-tab.active + button.mnav-tab::before { opacity: 0; }
#mobile-nav button.mnav-tab:active { transform: scale(.97); }

body.apex-light-active #mobile-nav::before { background: #FFFFFF !important; border-color: #C9CDD4 !important; }
body.apex-light-active #mobile-nav button.mnav-tab { color: #5A5648 !important; }
body.apex-light-active #mobile-nav button.mnav-tab.active {
  color: #7A5D12 !important; background: linear-gradient(180deg,#F7E7B0,#EBD48A) !important;
}
.game-mode #mobile-nav button.mnav-tab.active { box-shadow: 0 0 10px var(--accent-glow, transparent) !important; }

/* very narrow phones: drop the words back under the icons rather than clip */
@media (max-width: 340px) {
  #mobile-nav button.mnav-tab { flex-direction: column !important; gap: 2px !important; font-size: 8px !important; }
}

/* ── Liquidity tab on the token card ──────────────────────────────────────
   Four figures at the top, then the individual transactions. Each row is a
   link to its signature on the explorer, because a liquidity number nobody
   can check is just a claim. */
.lqx-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 10px; }
.lqx-cell {
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 6px; border-radius: 10px;
  background: var(--bg2, rgba(255,255,255,.035));
  border: 1px solid var(--panel-border, rgba(255,255,255,.08));
  text-align: center;
}
.lqx-l { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
.lqx-v { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; }

.lqx-list { display: flex; flex-direction: column; gap: 4px; }
.lqx-row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 9px;
  background: var(--bg2, rgba(255,255,255,.025));
  border: 1px solid var(--panel-border, rgba(255,255,255,.06));
  text-decoration: none; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.lqx-row:hover { border-color: var(--accent); background: var(--accent-dim, transparent); }
.lqx-act {
  font-family: var(--font-head, inherit); font-size: 8.5px; font-weight: 700;
  letter-spacing: .07em; padding: 3px 6px; border-radius: 5px; white-space: nowrap;
}
.lqx-act.add { color: var(--pos); background: rgba(38,208,168,.12); border: 1px solid rgba(38,208,168,.3); }
.lqx-act.rem { color: var(--neg); background: rgba(246,70,93,.12); border: 1px solid rgba(246,70,93,.3); }
.lqx-amt { font-family: var(--font-mono, monospace); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.lqx-who { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text3); white-space: nowrap; }
.lqx-ago { font-size: 10px; color: var(--text3); white-space: nowrap; }

.lqx-empty { padding: 22px 14px; text-align: center; color: var(--text3);
  font-size: 12px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }
.lqx-empty-h { font-family: var(--font-head, inherit); font-size: 12px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }

@media (max-width: 430px) {
  .lqx-sum { grid-template-columns: repeat(2, 1fr); }
  .lqx-row { grid-template-columns: auto 1fr auto; gap: 6px; padding: 7px 8px; }
  .lqx-who { display: none; }
}
body.apex-light-active .lqx-cell, body.apex-light-active .lqx-row {
  background: #FFFFFF !important; border-color: #C9CDD4 !important;
}
body.apex-light-active .lqx-v, body.apex-light-active .lqx-amt { color: #23201A !important; }

/* ── Liquidity: pools, actions, notes ─────────────────────────────────────*/
.lqx-sec { margin-top: 16px; }
.lqx-h {
  font-family: var(--font-head, inherit); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--text3);
  margin: 0 0 8px; padding: 0;
}
.lqx-pools { display: flex; flex-direction: column; gap: 8px; }
.lqx-pool {
  padding: 10px 11px; border-radius: 11px;
  background: var(--bg2, rgba(255,255,255,.025));
  border: 1px solid var(--panel-border, rgba(255,255,255,.07));
}
.lqx-pool-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.lqx-dex {
  font-family: var(--font-head, inherit); font-size: 8.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: var(--accent-dim, rgba(0,200,255,.12));
  color: var(--accent); border: 1px solid var(--panel-border);
}
.lqx-pair { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--text2); }
.lqx-pool-liq {
  margin-left: auto; font-family: var(--font-mono, monospace);
  font-size: 13px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.lqx-stale {
  font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--new, #ffb300); border: 1px solid rgba(255,179,0,.35);
  background: rgba(255,179,0,.1); padding: 2px 6px; border-radius: 5px;
}
/* depth bar — one pool's share of all the liquidity behind this token */
.lqx-bar {
  height: 4px; border-radius: 999px; margin: 8px 0 7px;
  background: rgba(255,255,255,.06); overflow: hidden;
}
.lqx-bar > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--pos));
}
.lqx-pool-meta {
  display: flex; flex-wrap: wrap; gap: 4px 12px;
  font-size: 10px; color: var(--text3);
}
.lqx-pool-foot {
  display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--panel-border, rgba(255,255,255,.06));
}
.lqx-imp { font-size: 10.5px; color: var(--text2); font-variant-numeric: tabular-nums; }
.lqx-imp.hot { color: var(--neg); }
.lqx-mini {
  margin-left: auto; font-size: 10.5px; font-weight: 600;
  color: var(--accent); text-decoration: none; white-space: nowrap;
}
.lqx-mini:hover { text-decoration: underline; }

.lqx-tip {
  margin-top: 4px; padding: 9px 11px; border-radius: 10px;
  background: var(--accent-dim, rgba(0,200,255,.08));
  border: 1px solid var(--panel-border);
  font-size: 11px; line-height: 1.55; color: var(--text2);
}
.lqx-tip b { color: var(--text); }

.lqx-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lqx-act-btn {
  display: flex; align-items: center; justify-content: center;
  padding: 11px 10px; border-radius: 11px; text-decoration: none;
  font-family: var(--font-head, inherit); font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  transition: transform .15s ease, filter .15s ease;
}
.lqx-act-btn:active { transform: scale(.98); }
.lqx-act-btn.add {
  background: var(--pos); color: #05131c;
  border: 1px solid transparent;
}
.lqx-act-btn.rem {
  background: none; color: var(--text2);
  border: 1px solid var(--panel-border);
}
.lqx-act-btn.rem:hover { color: var(--text); border-color: var(--accent); }
.lqx-note {
  margin: 9px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--text3);
}

body.apex-light-active .lqx-pool { background: #FFFFFF !important; border-color: #C9CDD4 !important; }
body.apex-light-active .lqx-pool-liq { color: #23201A !important; }
body.apex-light-active .lqx-bar { background: rgba(35,32,26,.09); }
body.apex-light-active .lqx-act-btn.add { background: #1B7A3D !important; color: #fff !important; }
body.apex-light-active .lqx-tip { background: #FBF6E8 !important; border-color: #C9CDD4 !important; }

/* ── chart freshness stamp ────────────────────────────────────────────────
   Sits between the chart and the drag hint. Quiet when the data is current,
   amber once the newest candle is more than half an hour old — because at
   that point the chart is history, not a live feed, and the reader has no
   other way to tell. */
.d-fresh {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 7px 0 2px; font-size: 10.5px; color: var(--text3);
  font-variant-numeric: tabular-nums; flex-wrap: wrap;
}
.d-fresh-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 6px var(--pos);
}
.d-fresh-sep { opacity: .4; }
.d-fresh.stale { color: var(--new, #ffb300); }
.d-fresh.stale .d-fresh-dot {
  background: var(--new, #ffb300); box-shadow: none;
  animation: none;
}
.d-fresh-note { opacity: .85; }
body.apex-light-active .d-fresh { color: #5A5648 !important; }
body.apex-light-active .d-fresh.stale { color: #8A6A16 !important; }

/* ── Paid project listing ─────────────────────────────────────────────────*/
.plst { margin: 10px 0 4px; }
.plst-cta {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
  padding: 10px 12px !important; border-radius: 11px !important;
  background: var(--bg2, rgba(255,255,255,.03)) !important;
  border: 1px dashed var(--panel-border, rgba(255,255,255,.14)) !important;
  text-align: left; cursor: pointer; box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease;
}
.plst-cta:hover { border-color: var(--accent) !important; background: var(--accent-dim, transparent) !important; }
/* Both lines are spans inside a flex column, so they need to be blocks or they
   run together ("project?Add your website..."). And the colours are pinned:
   the theme sheets repaint any button's text, which left this CTA dark grey on
   a dark card — invisible on every token that has no listing yet, which is
   almost all of them. */
/* Explicit colours, not variables. Measured after using var(--text): 1.23:1 in
   dark mode — inside the detail panel that variable does not resolve to the
   light ink it does elsewhere, so the CTA was near-invisible on exactly the
   tokens that have no listing yet, which is nearly all of them. A component
   that must be readable states its own colours. */
.plst-cta-t {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1.35;
  color: #EAF1FA !important; -webkit-text-fill-color: #EAF1FA !important;
}
.plst-cta-d {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 450; line-height: 1.4;
  color: #9FB0C8 !important; -webkit-text-fill-color: #9FB0C8 !important;
}
.plst-cta { color: #EAF1FA !important; -webkit-text-fill-color: #EAF1FA !important; }
body.apex-light-active .plst-cta-t { color: #23201A !important; -webkit-text-fill-color: #23201A !important; }
body.apex-light-active .plst-cta-d { color: #5A5648 !important; -webkit-text-fill-color: #5A5648 !important; }

.plst-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 12px; border-radius: 11px;
  background: var(--bg2, rgba(255,255,255,.03));
  border: 1px solid var(--panel-border, rgba(255,255,255,.08));
}
.plst-logo { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: none; }
.plst-body { min-width: 0; flex: 1; }
.plst-desc { font-size: 12px; line-height: 1.5; color: var(--text); margin-bottom: 5px; }
.plst-links { display: flex; flex-wrap: wrap; gap: 8px; }
.plst-links a {
  font-size: 11px; font-weight: 600; color: var(--accent); text-decoration: none;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-dim, rgba(0,200,255,.1));
  border: 1px solid var(--panel-border);
}
.plst-links a:hover { text-decoration: underline; }
.plst-meta { margin-top: 6px; font-size: 9.5px; color: var(--text3); line-height: 1.5; }
.plst-edit {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--accent) !important; font-size: 9.5px !important; cursor: pointer;
  padding: 0 0 0 6px !important; text-decoration: underline;
}

/* modal */
.plst-modal {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(3,6,14,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.plst-box {
  width: 100%; max-width: 420px; max-height: 92vh; overflow-y: auto;
  background: var(--panel, #0b0d1a); border: 1px solid var(--panel-border);
  border-radius: 16px; padding: 16px; box-sizing: border-box;
}
.plst-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.plst-head h3 {
  margin: 0; font-family: var(--font-head, inherit); font-size: 14px;
  letter-spacing: .02em; color: var(--text); flex: 1;
}
.plst-x {
  background: none !important; border: 0 !important; box-shadow: none !important;
  color: var(--text3) !important; font-size: 22px !important; line-height: 1;
  cursor: pointer; padding: 0 4px !important;
}
.plst-lede { margin: 0 0 10px; font-size: 11.5px; line-height: 1.6; color: var(--text2); }
.plst-lede b { color: var(--text); }
.plst-tok {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
  padding: 7px 10px; border-radius: 9px;
  background: var(--bg2); border: 1px solid var(--panel-border);
  font-size: 11px; color: var(--text2);
}
.plst-tok code { font-family: var(--font-mono, monospace); font-size: 10px; color: var(--text3); }
.plst-l {
  display: block; margin: 9px 0 4px; font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text3);
}
.plst-opt { text-transform: none; letter-spacing: 0; opacity: .7; }
.plst-i {
  width: 100%; box-sizing: border-box; padding: 10px 11px;
  border-radius: 9px; background: var(--bg2, rgba(255,255,255,.04));
  border: 1px solid var(--panel-border); color: var(--text);
  font-family: inherit; font-size: 13px;
}
.plst-i:focus { outline: none; border-color: var(--accent); }
.plst-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plst-err {
  margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  background: rgba(246,70,93,.1); border: 1px solid rgba(246,70,93,.35);
  color: var(--neg); font-size: 11px; line-height: 1.55; word-break: break-all;
}
.plst-pay {
  width: 100%; margin-top: 14px; padding: 13px 14px !important;
  border-radius: 11px !important; border: 0 !important;
  background: var(--accent) !important; color: #05131c !important;
  font-family: var(--font-head, inherit) !important; font-size: 12px !important;
  font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase;
  cursor: pointer; box-shadow: none !important;
}
.plst-pay:disabled { opacity: .6; cursor: default; }
.plst-fine { margin: 8px 0 0; font-size: 9.5px; line-height: 1.5; color: var(--text3); word-break: break-all; }

body.apex-light-active .plst-box { background: #FFFFFF !important; border-color: #C9CDD4 !important; }
body.apex-light-active .plst-card, body.apex-light-active .plst-cta { background: #FFFFFF !important; }
body.apex-light-active .plst-i { background: #FFFFFF !important; border-color: #C9CDD4 !important; color: #23201A !important; }
body.apex-light-active .plst-pay { background: #B8912F !important; color: #fff !important; }

/* ── token card: the finish pass ──────────────────────────────────────────
   "Why is that grey? Find a way so the screener card looks good."
   The card was assembled from working parts that had never been looked at
   together: a grey Close button, square-ish corners, a header that sat flat on
   the panel. Same material language as the rest of the site — glass with a lit
   top edge, one accent reserved for the action that matters. */

/* the sheet itself */
#detail-panel {
  border-top-left-radius: 20px !important;
  border-top-right-radius: 20px !important;
  box-shadow: 0 -18px 48px -24px rgba(0,0,0,.95) !important;
}
/* the drag handle, so the sheet reads as draggable */
#detail-panel .tk-grab, #detail-panel .d-grab {
  width: 38px; height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.16); margin: 8px auto 2px;
}

/* Back / Close — the two controls at the top of every card.
   Close was plain grey on grey: the one control everybody reaches for and the
   least visible thing on the sheet. */
#detail-panel .d-back, #detail-panel #d-close, #detail-panel .d-close {
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 6px 18px -12px rgba(0,0,0,.9) !important;
  color: var(--text) !important; -webkit-text-fill-color: var(--text) !important;
  font-weight: 650 !important;
  transition: transform .14s ease, border-color .18s ease, background .18s ease;
}
#detail-panel .d-back:active, #detail-panel #d-close:active { transform: scale(.97); }
/* #d-close is labelled BACK, not Close — an old id that no longer matches what
   the control does. Tinting it warm turned the "go back to the table" button
   into a second exit sign sitting next to the real one. It stays neutral; the
   actual Close (#d-float-x) carries the warm edge, further down. */

/* the timeframe row: a segmented control, not a row of loose buttons */
#detail-panel .d-tf-bar {
  background: var(--bg2, rgba(255,255,255,.03));
  border: 1px solid var(--panel-border, rgba(255,255,255,.07));
  border-radius: 13px !important;
  padding: 4px !important;
  gap: 3px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
#detail-panel .d-tf {
  border: 0 !important; background: none !important; background-image: none !important;
  box-shadow: none !important; border-radius: 9px !important;
  color: var(--text3) !important; font-weight: 600 !important;
  transition: color .16s ease, background .16s ease;
}
#detail-panel .d-tf.active {
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.04)) !important,
              none;
  background-color: var(--accent) !important;
  color: #05131c !important; -webkit-text-fill-color: #05131c !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 5px 14px -8px var(--accent-glow, transparent) !important;
}

/* the chart frame */
#detail-panel .d-chart {
  border-radius: 16px !important;
  border: 1px solid var(--panel-border, rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 30px -22px rgba(0,0,0,.95) !important;
}

/* the price header */
#detail-panel .tk-head {
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.012)) !important;
  border: 1px solid var(--panel-border, rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.09) !important;
}
/* the window chips (5m / 1h / 6h / 24h / 7d) */
#detail-panel .pc {
  border-radius: 12px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)) !important;
  border: 1px solid var(--panel-border, rgba(255,255,255,.07)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
}
/* TRADE — the one thing on the card that should look expensive */
#detail-panel #d-trade {
  border-radius: 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 46%),
    linear-gradient(100deg, var(--accent), #5ff4ff) !important;
  color: #05131c !important; -webkit-text-fill-color: #05131c !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 10px 26px -12px var(--accent-glow, rgba(0,200,255,.5)) !important;
  font-weight: 800 !important;
}
#detail-panel #d-trade:active { transform: scale(.985); }

body.apex-light-active #detail-panel #d-close, body.apex-light-active #detail-panel .d-close {
  background: linear-gradient(180deg,#FFF0F0,#FFE2E2) !important;
  border-color: #E4B4B4 !important; color: #8A2020 !important; -webkit-text-fill-color: #8A2020 !important;
}
body.apex-light-active #detail-panel .d-back {
  background: #FFFFFF !important; border-color: #C9CDD4 !important;
  color: #23201A !important; -webkit-text-fill-color: #23201A !important;
}

/* ── the sheet's own header: BACK and Close ───────────────────────────────
   These two live OUTSIDE #detail-panel, so the card rules above never reached
   them — which is why the first pass tinted BACK and left Close the flat grey
   it has always been. They are the two most-pressed controls on the card and
   were the least designed things on it.
   BACK is the neutral one (you are going back to the table). Close is the
   destructive-ish one (you are leaving), so it carries a warm edge — enough to
   find at a glance, not so much that it shouts. */
#d-close, .d-close,
#d-float-x, .d-float-x {
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.02)) !important;
  background-color: rgba(16,19,32,.82) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 22px -14px rgba(0,0,0,.95) !important;
  color: #E9EEF9 !important; -webkit-text-fill-color: #E9EEF9 !important;
  font-weight: 650 !important; letter-spacing: .01em !important;
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  transition: transform .14s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
#d-close:active, .d-close:active,
#d-float-x:active, .d-float-x:active { transform: scale(.97); }
#d-close:hover, .d-close:hover {
  border-color: rgba(160,205,255,.42) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
/* Close: the warm edge */
#d-float-x, .d-float-x {
  border-color: rgba(255,138,138,.30) !important;
  background: linear-gradient(180deg, rgba(255,138,138,.15), rgba(255,138,138,.04)) !important;
  color: #FFDCDC !important; -webkit-text-fill-color: #FFDCDC !important;
}
#d-float-x:hover, .d-float-x:hover {
  border-color: rgba(255,138,138,.58) !important;
  background: linear-gradient(180deg, rgba(255,138,138,.26), rgba(255,138,138,.08)) !important;
  color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important;
}
body.apex-light-active #d-close, body.apex-light-active .d-close {
  background: #FFFFFF !important; background-color: #FFFFFF !important;
  border-color: #C9CDD4 !important; color: #23201A !important; -webkit-text-fill-color: #23201A !important;
}
body.apex-light-active #d-float-x, body.apex-light-active .d-float-x {
  background: linear-gradient(180deg,#FFF1F1,#FFE3E3) !important; background-color: #FFF1F1 !important;
  border-color: #E7B6B6 !important; color: #8C2222 !important; -webkit-text-fill-color: #8C2222 !important;
}

/* the timeframe suggestion inside a too-thin chart */
.d-cn-go {
  display: inline-block; margin-left: 2px;
  background: var(--accent-dim, rgba(0,200,255,.14)) !important;
  border: 1px solid var(--accent) !important; box-shadow: none !important;
  color: var(--accent) !important; -webkit-text-fill-color: var(--accent) !important;
  border-radius: 8px !important; padding: 3px 9px !important;
  font: 600 11px/1.3 inherit !important; cursor: pointer;
}
.d-cn-go:hover { background: var(--accent) !important; color: #05131c !important; -webkit-text-fill-color: #05131c !important; }

/* ── the table can never be wider than the phone ──────────────────────────
   Measured at 390px: with the 1h window selected the table's right edge sat at
   403px and the change column was cut in half. `width:100%` does not constrain
   a table whose cells size to their content — the browser honours the content
   and overflows, and because the container clips, document.scrollWidth still
   reports 390, so it does not even look like overflow to a test.
   table-layout:fixed makes the column widths a decision instead of an outcome:
   the three numeric columns get what they need, the name takes the rest and
   ellipses. Now no combination of window, price length or symbol can push a
   column off the screen. (2026-09-13) */
@media (max-width: 640px) {
  .t-table { table-layout: fixed !important; width: 100% !important; }
  /* Under table-layout:fixed an `auto` column does NOT absorb the remainder —
     it splits whatever the explicit widths left over, which collapsed the token
     name to 31px and rendered "TSLA" as a sliver. Every column states its own
     share, and they add up. */
  .t-table th.c-exp,  .t-table td.c-exp  { width: 28px !important; }
  .t-table th:nth-child(2), .t-table td:nth-child(2) { width: 44% !important; }
  .t-table th:nth-child(3), .t-table td:nth-child(3) { width: 31% !important; }
  .t-table th.c-chg,  .t-table td.c-24h  { width: 25% !important; }
  .t-table td, .t-table th { overflow: hidden; }
  .t-table td.c-24h, .t-table th.c-chg { text-align: right; }
  /* long prices ellipsis rather than push the row wider */
  .t-table td:nth-child(3) { text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 360px) {
  .t-table th:nth-child(2), .t-table td:nth-child(2) { width: 42% !important; }
  .t-table th:nth-child(3), .t-table td:nth-child(3) { width: 32% !important; }
  .t-table th.c-chg, .t-table td.c-24h { width: 26% !important; }
}

/* An arbitrage is neither a buy nor a sell — it is somebody moving value between
   two venues. Neutral amber, so it never reads as buy or sell pressure. */
.ti-tag.arb, .t-side.arb {
  color: #E8C25A !important; background: rgba(232,194,90,.12) !important;
  border: 1px solid rgba(232,194,90,.3) !important;
}