/* CoinRanking — design tokens, dark-first with a full light theme. */
:root {
  --bg: #05070d;
  --bg-elev: #0b0f1a;
  --bg-card: #0e1320;
  --bg-hover: #151b2c;
  --line: #1c2438;
  --line-soft: #141a29;
  --text: #e8ecf6;
  --text-dim: #98a2ba;
  --text-faint: #67708a;
  --accent: #ffb020;
  --accent-soft: rgba(255, 176, 32, .12);
  --up: #16d99a;
  --down: #ff5c72;
  --info: #5b8cff;
  --violet: #a97bff;
  --shadow: 0 18px 50px -20px rgba(0, 0, 0, .85);
  --radius: 16px;
  --radius-sm: 10px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="light"] {
  --bg: #f4f6fb;
  --bg-elev: #ffffff;
  --bg-card: #ffffff;
  --bg-hover: #eef2fa;
  --line: #dde3ef;
  --line-soft: #e9edf6;
  --text: #0d1220;
  --text-dim: #5a6480;
  --text-faint: #8a93ab;
  --accent: #b7761a;
  --accent-soft: rgba(183, 118, 26, .1);
  --up: #009b6b;
  --down: #d92b46;
  --info: #2f61d8;
  --violet: #7b4fd6;
  --shadow: 0 14px 40px -22px rgba(15, 26, 60, .5);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 40px;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------- top bar --------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 20px;
  padding: 12px 22px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; min-width: 0; }
.brand-logo { width: 34px; height: 34px; flex-shrink: 0; }
/*
 * The wordmark carries the logo's own three colours: navy for the name, gold for
 * "rank", and the brighter blue for the domain. Text rather than image, so it stays
 * sharp at any size and can be read by anything that reads a page.
 */
.brand-text {
  font-weight: 800; font-size: 17px; letter-spacing: -.4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand-text b { color: var(--text); font-weight: 800; }
.brand-text em { font-style: normal; color: #f0b429; font-weight: 800; }
.brand-text i { font-style: normal; color: #1560f5; font-weight: 800; }

.search-wrap { position: relative; flex: 1; max-width: 520px; }
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-faint); pointer-events: none;
}
#search {
  width: 100%; padding: 10px 14px 10px 36px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 11px; color: var(--text); font-size: 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#search:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
#search::placeholder { color: var(--text-faint); }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 380px; overflow-y: auto;
  background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
}
.sr-item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.sr-item:hover { background: var(--bg-hover); }
.sr-empty { padding: 14px; color: var(--text-faint); font-size: 13px; text-align: center; }

.topnav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link {
  padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 500;
  color: var(--text-dim); display: flex; align-items: center; gap: 7px;
}
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.active { background: var(--accent-soft); color: var(--accent); }
.pill-count {
  min-width: 20px; padding: 1px 6px; border-radius: 20px; text-align: center;
  background: var(--line); font-size: 11px; font-weight: 700; font-family: var(--mono);
}
.icon-btn {
  display: grid; place-items: center; width: 36px; height: 36px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 9px; color: var(--text-dim);
}
.icon-btn:hover { color: var(--accent); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }

/* -------------------------------- ticker --------------------------------- */
.ticker {
  border-bottom: 1px solid var(--line);
  background: var(--bg-elev);
  overflow: hidden;
}
.ticker-track {
  display: flex; gap: 30px; padding: 9px 22px;
  font-size: 12.5px; font-family: var(--mono); color: var(--text-dim);
  white-space: nowrap; overflow-x: auto; scrollbar-width: none;
}
.ticker-track::-webkit-scrollbar { display: none; }
.tick b { color: var(--text); font-weight: 600; }
.tick.live b { color: var(--up); }
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--up); margin-right: 6px; vertical-align: middle;
  animation: pulse 2s ease-in-out infinite;
}
.dot.warm { background: var(--accent); }
.dot.cold { background: var(--down); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* --------------------------------- layout -------------------------------- */
.view { max-width: 1560px; margin: 0 auto; padding: 26px 22px 60px; }

.page-head { margin-bottom: 22px; }
.page-title { font-size: 27px; font-weight: 750; letter-spacing: -.7px; margin: 0 0 6px; display: flex; align-items: center; gap: 11px; }
.page-sub { color: var(--text-dim); margin: 0; font-size: 14.5px; max-width: 760px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 26px;
}
.stat {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 16px;
}
.stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); font-weight: 600; }
.stat-value { font-size: 22px; font-weight: 700; font-family: var(--mono); margin-top: 5px; letter-spacing: -.6px; }

/* --------------------------- chain filter chips --------------------------- */
.chain-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; align-items: center; }
.chip {
  padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 550;
  background: var(--bg-card); border: 1px solid var(--line); color: var(--text-dim);
}
.chip:hover { color: var(--text); border-color: var(--text-faint); }
.chip.active { background: var(--text); color: var(--bg); border-color: var(--text); }
.chip .swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; }

/* ------------------------------ board grid ------------------------------- */
.board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 16px;
}
.board-card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
  transition: border-color .18s, transform .18s;
}
.board-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.board-card-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 17px 13px; border-bottom: 1px solid var(--line-soft);
}
.board-emoji { font-size: 20px; line-height: 1.3; }
.board-card-title { font-size: 15.5px; font-weight: 700; letter-spacing: -.25px; margin: 0; }
.board-card-blurb { font-size: 12.5px; color: var(--text-dim); margin: 3px 0 0; line-height: 1.45; }
.board-count {
  margin-left: auto; font-family: var(--mono); font-size: 11px;
  color: var(--text-faint); background: var(--bg-hover);
  padding: 3px 8px; border-radius: 6px; white-space: nowrap;
}
.board-rows { flex: 1; }
.board-foot {
  padding: 10px 17px; border-top: 1px solid var(--line-soft);
  font-size: 13px; font-weight: 600; color: var(--accent);
  display: flex; align-items: center; justify-content: space-between;
}
.board-foot:hover { background: var(--accent-soft); }

/* --------------------------------- rows ---------------------------------- */
.row {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: center; gap: 11px;
  padding: 9px 17px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--bg-hover); }
.row-rank { font-family: var(--mono); font-size: 12px; color: var(--text-faint); text-align: right; }
.row-rank.top { color: var(--accent); font-weight: 700; }
.row-id { display: flex; align-items: center; gap: 9px; min-width: 0; }
.row-meta { min-width: 0; }
.row-symbol { font-weight: 650; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
/* A second line under the symbol carrying the network value. Mobile only: on a
   wide screen that number has its own column and repeating it is noise. */
.row-under { display: none; }
/* The DEX pair cell shows "CYBERLEEK / USDT" on desktop. The bare base symbol
   is the phone substitute for it, so it is off by default. */
.pair-symbol { display: none; }

.row-name { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.row-metric { font-family: var(--mono); font-size: 13px; font-weight: 600; text-align: right; white-space: nowrap; }
.row-sub { font-size: 11px; color: var(--text-faint); font-family: var(--mono); text-align: right; }

.avatar {
  width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
  background: var(--bg-hover); object-fit: cover;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--text-faint); font-family: var(--mono);
  border: 1px solid var(--line);
}
.chain-tag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  padding: 1.5px 5px; border-radius: 4px; font-family: var(--mono);
}
.up { color: var(--up); }
.down { color: var(--down); }
.muted { color: var(--text-faint); }

.risk-pill {
  font-size: 10px; font-family: var(--mono); font-weight: 700;
  padding: 1.5px 5px; border-radius: 4px; letter-spacing: .3px;
}
.risk-low { background: rgba(22, 217, 154, .14); color: var(--up); }
.risk-mid { background: rgba(255, 176, 32, .14); color: var(--accent); }
.risk-high { background: rgba(255, 92, 114, .14); color: var(--down); }

/* -------------------------------- table ---------------------------------- */
.table-wrap {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; min-width: 1040px; }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev);
  text-align: right; padding: 11px 14px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text-faint); font-weight: 650;
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
thead th:nth-child(1), thead th:nth-child(2) { text-align: left; }
tbody td { padding: 11px 14px; text-align: right; font-family: var(--mono); font-size: 13px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
tbody td:nth-child(1), tbody td:nth-child(2) { text-align: left; font-family: var(--sans); }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg-hover); }
.col-primary { font-weight: 650; }

.why-note {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--bg-card); border: 1px solid var(--line);
  border-left: 3px solid var(--info);
  border-radius: var(--radius-sm); padding: 12px 15px; margin-bottom: 18px;
  font-size: 13px; color: var(--text-dim); line-height: 1.55;
}
.why-note strong { color: var(--text); }

.pager { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 20px; }
.btn {
  padding: 9px 17px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  background: var(--bg-card); border: 1px solid var(--line); color: var(--text);
}
.btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #14100a; border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); color: #14100a; }

/* ------------------------------- sparkline ------------------------------- */
.spark { width: 74px; height: 24px; overflow: visible; }
.spark path { fill: none; stroke-width: 1.6; }

/* --------------------------------- drawer -------------------------------- */
.scrim { position: fixed; inset: 0; background: rgba(2, 4, 10, .62); z-index: 80; backdrop-filter: blur(2px); }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw);
  background: var(--bg-elev); border-left: 1px solid var(--line);
  z-index: 90; overflow-y: auto; box-shadow: var(--shadow);
  animation: slide .22s cubic-bezier(.22, .8, .3, 1);
}
@keyframes slide { from { transform: translateX(26px); opacity: .4; } }
.drawer-head { padding: 20px 22px 16px; border-bottom: 1px solid var(--line); }
.drawer-top { display: flex; align-items: flex-start; gap: 13px; }
.drawer-title { font-size: 21px; font-weight: 750; letter-spacing: -.5px; margin: 0; }
.drawer-name { color: var(--text-dim); font-size: 13.5px; margin: 2px 0 0; }
.drawer-close { margin-left: auto; }
.drawer-price { font-family: var(--mono); font-size: 27px; font-weight: 700; margin: 15px 0 4px; letter-spacing: -.8px; }
.drawer-body { padding: 20px 22px 60px; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.metric {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.metric-label { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); font-weight: 650; }
.metric-value { font-family: var(--mono); font-size: 15px; font-weight: 650; margin-top: 4px; }

.section-title {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .9px;
  color: var(--text-faint); font-weight: 700; margin: 24px 0 11px;
}
.meter { height: 7px; border-radius: 4px; background: var(--line); overflow: hidden; margin: 9px 0 6px; }
.meter-fill { height: 100%; border-radius: 4px; transition: width .3s; }
.flow-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 9px 0 6px; }
.flow-buy { background: var(--up); }
.flow-sell { background: var(--down); }
.legend { display: flex; justify-content: space-between; font-size: 11.5px; font-family: var(--mono); color: var(--text-dim); }

.action-row { display: flex; gap: 9px; margin: 16px 0 4px; flex-wrap: wrap; }
.pool-item, .comment {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 11px 13px; margin-bottom: 8px;
  font-size: 13px;
}
.pool-item { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 12px; }
.comment-head { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.comment-handle { font-weight: 650; font-size: 12.5px; color: var(--accent); }
.comment-time { font-size: 11px; color: var(--text-faint); font-family: var(--mono); }
.comment-body { color: var(--text-dim); line-height: 1.5; word-wrap: break-word; }
.composer { display: flex; gap: 8px; margin-bottom: 14px; }
.composer input {
  flex: 1; padding: 10px 13px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: 9px; color: var(--text); outline: none; font-size: 13.5px;
}
.composer input:focus { border-color: var(--accent); }
.link-row { display: flex; flex-wrap: wrap; gap: 7px; }
.link-chip {
  padding: 5px 11px; border-radius: 7px; background: var(--bg-card);
  border: 1px solid var(--line); font-size: 12.5px; color: var(--text-dim);
}
.link-chip:hover { color: var(--accent); border-color: var(--accent); }

/* --------------------------------- misc ---------------------------------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 11px 20px;
  border-radius: 10px; font-size: 13.5px; font-weight: 600; z-index: 200;
  box-shadow: var(--shadow); animation: rise .2s ease-out;
}
@keyframes rise { from { transform: translate(-50%, 12px); opacity: 0; } }

.empty { text-align: center; padding: 60px 20px; color: var(--text-faint); }
.empty-emoji { font-size: 38px; margin-bottom: 12px; }
.skeleton {
  height: 13px; border-radius: 5px; margin: 7px 0;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--bg-hover) 50%, var(--line-soft) 75%);
  background-size: 200% 100%; animation: shimmer 1.4s infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

.footer {
  max-width: 1560px; margin: 0 auto; padding: 30px 22px;
  border-top: 1px solid var(--line); color: var(--text-faint); font-size: 12.5px; line-height: 1.65;
}
.footer p { margin: 0 0 9px; max-width: 900px; }
.footer strong { color: var(--text-dim); }
.disclaimer { color: var(--down); opacity: .85; }

@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 11px 15px; }
  .search-wrap { order: 3; flex-basis: 100%; max-width: none; }
  /* THE NAVIGATION WAS DRAGGING THE WHOLE PAGE SIDEWAYS.
     Thirteen links in a flex row with no wrap and no overflow measured 1138px on a
     390px phone, so the document itself scrolled horizontally: every heading sat off
     centre, buttons landed outside the screen and nothing lined up. The chain filter
     below already solved this exact problem; the navigation never got the same
     treatment. It scrolls within itself now, and the page does not move. */
  /* The domain suffix is the first thing to go when space is short. */
  .brand-text i { display: none; }
  .brand-text { font-size: 15.5px; }

  .topnav {
    margin-left: 0;
    width: 100%;
    min-width: 0;
    order: 4;
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  /* Without this the links shrink to fit instead of scrolling, and the labels wrap
     onto two lines inside their own pills. */
  .topnav .nav-link { flex: 0 0 auto; }
  .view { padding: 20px 15px 50px; }
  .board-grid { grid-template-columns: 1fr; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
  .page-title { font-size: 22px; }
}

/* Chain filter grows with the number of live chains, so let it scroll. */
.chain-bar {
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.chain-bar .chip { flex-shrink: 0; display: inline-flex; align-items: center; }
.chip-count {
  margin-left: 7px; padding: 1px 6px; border-radius: 20px;
  background: var(--line); color: var(--text-faint);
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
}
.chip.active .chip-count { background: color-mix(in srgb, var(--bg) 25%, transparent); color: inherit; }
.chain-picker {
  flex-shrink: 0; padding: 7px 12px; border-radius: 20px;
  background: var(--bg-card); border: 1px solid var(--line);
  color: var(--text-dim); font-size: 13px; font-weight: 550;
  font-family: var(--sans); outline: none; max-width: 230px;
}
.chain-picker:hover { color: var(--text); border-color: var(--text-faint); }
.chain-picker:focus { border-color: var(--accent); }

/* ============================ token terminal ============================= */
.back-link { display: inline-block; color: var(--text-dim); font-size: 13px; margin-bottom: 14px; }
.back-link:hover { color: var(--accent); }
.token-skeleton { padding: 20px; }
.avatar-lg { width: 52px; height: 52px; border-radius: 14px; font-size: 15px; }

.token-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.token-id { min-width: 0; flex: 1; }
.token-symbol { font-size: 27px; font-weight: 750; letter-spacing: -.7px; margin: 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.token-name { color: var(--text-dim); margin: 2px 0 0; font-size: 14px; }
.token-price-block { text-align: right; }
.token-price { font-family: var(--mono); font-size: 30px; font-weight: 700; letter-spacing: -1px; }
.token-changes { display: flex; gap: 13px; font-family: var(--mono); font-size: 12.5px; justify-content: flex-end; margin-top: 4px; }

.verify-badge { font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--line); color: var(--text-dim); font-family: var(--mono); }
.verify-verified_metadata, .verify-enhanced_review { background: rgba(22,217,154,.15); color: var(--up); }
.verify-claimed { background: var(--accent-soft); color: var(--accent); }

.flag-row { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.flag { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: rgba(255,92,114,.12); color: var(--down); font-family: var(--mono); }
.flag-new-pool { background: var(--accent-soft); color: var(--accent); }
.flag-stale-data { background: var(--line); color: var(--text-faint); }
.flags-cell { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }

/* chart */
.chart-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); margin: 18px 0 24px; overflow: hidden; }
.chart-toolbar { display: flex; align-items: center; gap: 14px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.tf-group { display: flex; gap: 5px; }
.chip.tf { padding: 5px 11px; font-size: 12px; }
.chart-readout { display: flex; gap: 13px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); flex: 1; flex-wrap: wrap; }
.ohlc b { color: var(--text-faint); font-weight: 600; margin-right: 3px; }
.chart-opts { display: flex; gap: 7px; align-items: center; margin-left: auto; }
.chart-canvas-wrap { height: 430px; padding: 6px 4px 0; }
#chart-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.chart-foot { padding: 9px 14px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }

.token-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px; align-items: start; }
.note { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; margin: 8px 0 0; }
.note.disclaimer { color: var(--text-faint); }
.copyable { cursor: pointer; }
.copyable:hover { border-color: var(--accent); }

/* ============================== sponsored ================================ */
.sponsored-block { border: 1px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); margin-bottom: 20px; overflow: hidden; }
.sponsored-head { display: flex; align-items: center; gap: 11px; padding: 9px 15px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.sponsored-tag { font-size: 10px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; padding: 3px 8px; border-radius: 5px; background: var(--accent); color: #14100a; font-family: var(--mono); }
.sponsored-tag.sm { font-size: 9px; padding: 2px 6px; }
.sponsored-note { font-size: 11.5px; color: var(--text-dim); }

/* ============================== advertise ================================ */
.placement-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 10px; }
.placement { display: flex; gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer; }
.placement:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.placement-name { font-weight: 650; font-size: 14px; }
.placement-blurb { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
.placement-inv { font-size: 11px; color: var(--text-faint); font-family: var(--mono); margin-top: 5px; }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 10px; }
.tier { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; }
.tier.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.tier-name { font-weight: 700; font-size: 14px; }
.tier-price { font-family: var(--mono); font-size: 24px; font-weight: 700; margin: 5px 0; }
.tier-units { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); }
.tier-blurb { font-size: 12px; color: var(--text-dim); margin: 8px 0 12px; min-height: 32px; }

.quote { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; margin-top: 12px; }
.quote-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px,1fr)); gap: 11px; margin: 12px 0; }
.quote-grid span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); font-weight: 650; }
.quote-grid b { font-family: var(--mono); font-size: 15px; }
.quote-grid input { width: 100%; padding: 7px 10px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 7px; color: var(--text); font-family: var(--mono); }
.ad-toggle { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--text-dim); margin: 10px 0; }

.campaign { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; margin-bottom: 10px; }
.campaign-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; }
.campaign-status { font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 2px 7px; border-radius: 5px; font-family: var(--mono); background: var(--line); color: var(--text-dim); }
.status-active { background: rgba(22,217,154,.15); color: var(--up); }
.status-paused { background: var(--accent-soft); color: var(--accent); }
.status-verified { background: rgba(22,217,154,.15); color: var(--up); }

/* ============================ projects / radar =========================== */
.level-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 10px; }
.level { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px; }
.level-name { font-weight: 650; font-size: 14px; }
.claim-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 9px; }
.claim-form input, .claim-form select { padding: 10px 13px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 9px; color: var(--text); font-size: 13.5px; outline: none; }
.proof { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 8px; padding: 12px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; color: var(--text-dim); }

.radar-filters { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.radar-filters label { font-size: 12.5px; color: var(--text-dim); display: flex; gap: 7px; align-items: center; }
.radar-filters select { padding: 7px 11px; background: var(--bg-card); border: 1px solid var(--line); border-radius: 8px; color: var(--text); font-size: 13px; }
.radar-count { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.why-cell { white-space: normal; font-family: var(--sans); font-size: 12px; color: var(--text-dim); max-width: 520px; text-align: left; }

@media (max-width: 1000px) {
  .token-grid { grid-template-columns: 1fr; gap: 8px; }
  .claim-form { grid-template-columns: 1fr; }
  .chart-canvas-wrap { height: 320px; }
  .token-price-block { text-align: left; }
  .token-changes { justify-content: flex-start; }
}

/* ============================ markets (CMC style) ======================== */
.market-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.mtab { padding: 9px 15px; font-size: 14.5px; font-weight: 600; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.mtab:hover { color: var(--text); }
.mtab.active { color: var(--accent); border-bottom-color: var(--accent); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; }
.skeleton-card { height: 96px; background: linear-gradient(90deg, var(--line-soft) 25%, var(--bg-hover) 50%, var(--line-soft) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.sc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); font-weight: 650; }
.sc-value { font-size: 23px; font-weight: 720; font-family: var(--mono); letter-spacing: -.7px; margin-top: 5px; }
.sc-sub { font-size: 12px; font-family: var(--mono); margin-top: 3px; }
.gauge-card { display: flex; flex-direction: column; }
.gauge { width: 110px; height: 62px; margin: 2px auto -6px; }
.gauge path, .gauge line { fill: none; }
.gauge-val { text-align: center; font-family: var(--mono); font-size: 20px; font-weight: 700; }
.gauge-val span { display: block; font-size: 11px; color: var(--text-faint); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }

.market-table table { min-width: 1180px; }
.star-col { width: 34px; }
.star { background: none; border: 0; color: var(--text-faint); font-size: 15px; padding: 2px; }
.star:hover, .star.on { color: var(--accent); }
.tick-sym { color: var(--text-faint); font-weight: 500; font-size: 12px; margin-left: 7px; font-family: var(--mono); }
.supply-cell { font-size: 12px; }
.supply-bar { height: 4px; border-radius: 3px; background: var(--line); margin-top: 5px; overflow: hidden; }
.supply-bar i { display: block; height: 100%; background: var(--text-faint); }

/* ============================== dexscan ================================= */
.dex-head { display: flex; gap: 26px; flex-wrap: wrap; margin-bottom: 14px; }
.dex-stat span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--text-faint); font-weight: 650; }
.dex-stat b { font-family: var(--mono); font-size: 19px; font-weight: 700; }
.dex-sorts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.dex-table table { min-width: 1280px; }
.dex-table td { padding: 9px 12px; }
.pair-name { font-weight: 650; }
.ver-tag { font-size: 9px; font-weight: 700; padding: 1.5px 5px; border-radius: 4px; background: var(--line); color: var(--text-faint); font-family: var(--mono); }
.own-tag { font-size: 9px; font-weight: 700; padding: 1.5px 5px; border-radius: 4px; background: rgba(22,217,154,.16); color: var(--up); font-family: var(--mono); }
.btc-tag { font-size: 9px; font-weight: 800; padding: 1.5px 5px; border-radius: 4px; background: rgba(247,147,26,.18); color: #f7931a; font-family: var(--mono); margin-left: 6px; }

/* ============================== signals ================================= */
.signal-list { display: flex; flex-direction: column; gap: 9px; }
.signal { display: grid; grid-template-columns: 128px 1fr auto; gap: 16px; align-items: center;
  background: var(--bg-card); border: 1px solid var(--line); border-left: 3px solid var(--text-faint);
  border-radius: var(--radius-sm); padding: 13px 16px; cursor: pointer; }
.signal:hover { background: var(--bg-hover); }
.signal.sev-high { border-left-color: var(--down); }
.signal.sev-medium { border-left-color: var(--accent); }
.signal-kind { font-size: 10.5px; font-weight: 750; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); font-family: var(--mono); }
.signal-headline { font-weight: 620; font-size: 14px; margin-top: 6px; }
.signal-detail { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }
.signal-stats { text-align: right; font-family: var(--mono); font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }

/* ============================= launchpads =============================== */
.pad-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.pad-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.pad-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pad-name { font-size: 16px; font-weight: 700; }
.pad-chains { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); margin-top: 2px; }
.pad-grad { text-align: right; }
.pad-grad-val { font-family: var(--mono); font-size: 21px; font-weight: 700; color: var(--accent); }
.pad-grad-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--text-faint); font-weight: 650; }
.pad-top { border-top: 1px solid var(--line-soft); margin-top: 8px; }
.pad-top .row { grid-template-columns: 1fr auto; padding: 8px 0; }

/* =========================== community / misc =========================== */
.feed { display: flex; flex-direction: column; gap: 9px; }
.feed-item { display: grid; grid-template-columns: 230px 1fr; gap: 16px; background: var(--bg-card);
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 16px; cursor: pointer; }
.feed-item:hover { background: var(--bg-hover); }
.mono-cell { font-family: var(--mono); font-size: 11.5px; word-break: break-all; }

.convert-box { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; max-width: 760px; }
.convert-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.convert-row input { padding: 11px 14px; background: var(--bg-elev); border: 1px solid var(--line);
  border-radius: 9px; color: var(--text); font-family: var(--mono); font-size: 15px; width: 130px; outline: none; }
.convert-row input:focus { border-color: var(--accent); }
.convert-eq { font-size: 19px; color: var(--text-faint); }
.convert-out { margin-top: 16px; }
.convert-result { font-family: var(--mono); font-size: 22px; font-weight: 700; }

.footer-nav { line-height: 2.1; }
.footer-nav a { color: var(--text-dim); }
.footer-nav a:hover { color: var(--accent); }

@media (max-width: 900px) {
  .signal { grid-template-columns: 1fr; gap: 8px; }
  .signal-stats { flex-direction: row; gap: 12px; align-items: center; }
  .feed-item { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* ============================ provenance / origin ======================== */
.src-chip { font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px;
  border-radius: 5px; background: var(--line); color: var(--text-faint); font-family: var(--mono); }
.src-chip.src-direct { background: rgba(22,217,154,.15); color: var(--up); }
.origin-link { color: var(--text-faint); font-size: 12px; margin-left: 5px; }
.origin-link:hover { color: var(--accent); }
.venue-link { color: var(--text-faint); font-size: 11px; margin-left: 6px; text-decoration: underline dotted; }
.venue-link:hover { color: var(--accent); }

.origin-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.origin-row { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; align-items: baseline; }
.origin-row:last-child { border-bottom: 0; }
.origin-row > span { color: var(--text-faint); font-size: 11px; text-transform: uppercase;
  letter-spacing: .6px; font-weight: 650; }
.origin-row > b { font-weight: 600; min-width: 0; }
.origin-row a { color: var(--accent); }
.origin-addr { display: flex; flex-direction: column; gap: 4px; font-family: var(--mono);
  font-size: 11.5px; word-break: break-all; }
.src-chip.src-contract { background: rgba(91,140,255,.15); color: var(--info); }
.src-chip.src-native { background: rgba(169,123,255,.15); color: var(--violet); }

/* ================================ live layer ============================= */
.live-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 13px; margin-bottom: 14px;
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 9px; font-family: var(--mono); font-size: 12px; color: var(--text-dim);
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 60%, transparent);
  animation: livePulse 2s ease-out infinite;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.live-text { color: var(--up); font-weight: 700; letter-spacing: .5px; }
.live-sep { color: var(--text-faint); }
.live-next { margin-left: auto; color: var(--text-faint); }
.live-bar.live-stale .live-dot { background: var(--down); animation: none; }
.live-bar.live-stale .live-text { color: var(--down); }

/* A value that changed since the previous paint. */
@keyframes flashUp {
  from { background: color-mix(in srgb, var(--up) 30%, transparent); }
  to { background: transparent; }
}
@keyframes flashDown {
  from { background: color-mix(in srgb, var(--down) 30%, transparent); }
  to { background: transparent; }
}
.flash-up { animation: flashUp 1.1s ease-out; }
.flash-down { animation: flashDown 1.1s ease-out; }

.origin-cell { display: flex; flex-direction: column; gap: 3px; align-items: flex-end; }
.origin-chain { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.row-age { font-size: 10.5px; color: var(--text-faint); font-family: var(--mono); }
.row-age-old { color: var(--accent); }
.live-tick {
  display: inline-block; width: 5px; height: 5px; border-radius: 50%;
  background: var(--up); margin-left: 6px; vertical-align: middle;
  animation: livePulse 2.4s ease-out infinite;
}
.scope-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.scope-note { font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); display: flex; align-items: center; gap: 9px; }
.scope-fill { display: inline-block; width: 90px; height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; }
.scope-fill i { display: block; height: 100%; background: var(--accent); }

/* ============================== chart tooltip ============================ */
.chart-canvas-wrap { position: relative; }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  min-width: 158px; padding: 9px 11px;
  background: color-mix(in srgb, var(--bg-elev) 96%, transparent);
  border: 1px solid var(--line); border-radius: 9px;
  box-shadow: var(--shadow); font-family: var(--mono); font-size: 11.5px;
}
.tip-head {
  font-weight: 700; font-size: 12px; color: var(--text);
  padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft);
  display: flex; justify-content: space-between; gap: 10px;
}
.tip-head span { color: var(--text-faint); font-weight: 500; }
.tip-row { display: flex; justify-content: space-between; gap: 14px; line-height: 1.75; }
.tip-row span { color: var(--text-faint); }
.tip-row b { font-weight: 600; }
.tip-foot { margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--line-soft); color: var(--text-faint); font-size: 10.5px; }
.pad-card { cursor: pointer; transition: border-color .15s; }
.pad-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.provider-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.provider {
  display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 13px;
}
.provider:hover { border-color: var(--accent); }
.provider-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); flex-shrink: 0; }
.provider-live .provider-dot { background: var(--up); }
.provider-name { font-weight: 600; }
.provider-chains { margin-left: auto; font-family: var(--mono); font-size: 10.5px; color: var(--text-faint); }
.risk-pill.risk-none { background: var(--line); color: var(--text-faint); }
.known-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; }
.known-head { display: flex; align-items: center; gap: 11px; font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.known-bar { flex: 1; height: 6px; border-radius: 4px; background: var(--line); overflow: hidden; }
.known-bar i { display: block; height: 100%; background: var(--up); }
.known-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 11px; }
.known { font-size: 11px; font-family: var(--mono); padding: 3px 8px; border-radius: 5px; }
.known.yes { background: rgba(22,217,154,.14); color: var(--up); }
.known.no { background: var(--line); color: var(--text-faint); text-decoration: line-through; }
.chip-static { cursor: default; opacity: .78; }
.chip-static:hover { border-color: var(--line); color: var(--text-dim); }
.basis { display: block; font-size: 9.5px; color: var(--text-faint); font-family: var(--mono); }


/* ============================== UI refinements =========================== */
/* Tables carry most of the meaning here, so they get the most attention:
   a quieter header, rows that separate by tone rather than by heavy rules,
   and numerals that line up in columns. */
table { font-variant-numeric: tabular-nums; }
thead th {
  font-size: 10.5px; letter-spacing: .9px; font-weight: 700;
  background: color-mix(in srgb, var(--bg-elev) 92%, var(--bg));
  backdrop-filter: blur(6px);
}
tbody tr { transition: background .12s; }
tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg-hover) 32%, transparent); }
tbody tr:hover { background: var(--bg-hover); }
tbody td { border-bottom: 1px solid color-mix(in srgb, var(--line-soft) 60%, transparent); }
.col-primary { font-weight: 650; letter-spacing: -.2px; }

/* The first three ranks earn a little emphasis, the rest stay quiet. */
tbody tr:nth-child(-n+3) .row-symbol { font-weight: 700; }

/* Cards lift slightly on hover instead of only changing colour. */
.board-card, .stat-card, .pad-card, .campaign, .tier {
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.board-card:hover, .pad-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

/* Section headings sit closer to their content. */
.section-title { margin: 26px 0 10px; }
.page-head { margin-bottom: 18px; }
.page-title { line-height: 1.2; }
.page-sub { line-height: 1.55; }

/* Chips read as one control strip rather than scattered buttons. */
.chip { transition: background .12s, border-color .12s, color .12s; }
.chip.active { box-shadow: 0 1px 0 color-mix(in srgb, var(--text) 20%, transparent); }

/* Numbers that matter most get slightly more room to breathe. */
.stat-value, .sc-value { line-height: 1.15; }
.hero-stats .stat { transition: border-color .18s; }
.hero-stats .stat:hover { border-color: var(--text-faint); }

/* Scrollbars stop shouting. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
*::-webkit-scrollbar { height: 8px; width: 8px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
*::-webkit-scrollbar-track { background: transparent; }

/* Focus is visible for keyboard users without adding noise for everyone else. */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

@media (max-width: 700px) {
  .page-title { font-size: 20px; }
  .market-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .mtab { white-space: nowrap; }
  .live-bar { font-size: 11px; }
  .live-next { margin-left: 0; width: 100%; }
}

/* ================================ trading ================================ */
.trade-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 17px; margin: 18px 0; }
.trade-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trade-title { font-weight: 700; font-size: 14px; }
.trade-sub { font-size: 11.5px; color: var(--text-faint); font-family: var(--mono); }
.trade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
.trade-cell { background: var(--bg-elev); border: 1px solid var(--line-soft); border-radius: 9px; padding: 9px 11px; }
.trade-cell span { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--text-faint); font-weight: 650; }
.trade-cell b { font-family: var(--mono); font-size: 14.5px; font-weight: 650; }
.book-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; margin: 13px 0 6px; }
.book-bid { background: var(--up); }
.book-ask { background: var(--down); }
.class-tag { font-size: 10.5px; font-family: var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent); white-space: nowrap; }

/* ================================== news ================================= */
.news-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.news-item { display: block; background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 15px 17px; transition: border-color .15s, transform .15s; }
.news-item:hover { border-color: var(--accent); transform: translateY(-1px); }
.news-meta { display: flex; gap: 10px; align-items: center; font-family: var(--mono); font-size: 11px; margin-bottom: 7px; }
.news-source { color: var(--accent); font-weight: 700; }
.news-time { color: var(--text-faint); }
.news-title { font-weight: 650; font-size: 14.5px; line-height: 1.4; }
.news-summary { font-size: 12.5px; color: var(--text-dim); margin-top: 7px; line-height: 1.5; }
.news-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.news-tag { font-size: 10px; font-family: var(--mono); padding: 2px 7px; border-radius: 5px; background: var(--line); color: var(--text-faint); }
.provider-fold { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg-card); }
.provider-fold summary { padding: 12px 15px; cursor: pointer; font-size: 13.5px; font-weight: 600; }
.provider-fold summary:hover { color: var(--accent); }
.provider-fold[open] summary { border-bottom: 1px solid var(--line-soft); }
.provider-fold .provider-grid { padding: 12px 15px; }
.empty code { font-family: var(--mono); background: var(--bg-hover); padding: 2px 7px; border-radius: 5px; color: var(--accent); }
.unmeasured { color: var(--text-faint); font-size: 11px; font-style: italic; opacity: .75; }


/* ------------------------- tables on a phone -----------------------------
 *
 * Every table here has around thirteen columns and runs to roughly 1700px. On a
 * 390px phone that is four screens of sideways dragging to read one row, and
 * because only the first column is ever in view a full table reads as an EMPTY
 * one: DexMarket was reported as broken when it was serving a hundred rows.
 *
 * So on a phone every table is pinned to the screen width and shows the columns
 * a person actually scans. Nothing is removed from the markup and everything
 * returns above 700px: hiding a column is a layout decision and must never
 * become a data decision.
 */
@media (max-width: 700px) {
  /*
   * A PHONE TABLE SCROLLS. IT DOES NOT SHRINK, AND IT DOES NOT DROP COLUMNS.
   *
   * The previous attempt squeezed every board into 390px with `table-layout:
   * fixed` and hid the columns that would not fit. That trades one broken table
   * for another: the numbers that survived were ellipsed to "$295.6…" and the
   * ones that mattered — liquidity, volume, trades, age, risk — were simply not
   * there. A table nobody can read the values in is not worth showing.
   *
   * So: every column stays, each is as wide as its own content needs, and the
   * reader swipes sideways for the rest. This is how the exchanges do it, and it
   * is the only layout where a value is either fully readable or off-screen —
   * never half-printed over its neighbour.
   *
   * The identity columns are frozen at the left edge, because a row of numbers
   * scrolled away from its ticker means nothing.
   */
  .table-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;   /* swiping the table must not page back */
    border-radius: 10px;
  }
  .table-wrap table,
  .market-table table,
  .dex-table table {
    table-layout: auto;               /* content decides the width, not a guess */
    width: auto;
    min-width: 100%;                  /* a narrow table still fills the screen */
  }

  /* Tight enough to fit several columns in view, still readable. */
  .table-wrap table tbody td,
  .table-wrap table thead th {
    padding: 9px 10px;
    font-size: 12px;
    white-space: nowrap;              /* a wrapped price reads as two numbers */
  }

  /*
   * THE FROZEN IDENTITY COLUMNS.
   *
   * `left` offsets must match the frozen widths exactly or the second column
   * overlaps the first while scrolling, so those widths are pinned here rather
   * than left to the content. The rank is at most four characters ("#999").
   */
  .table-wrap table tbody td:first-child,
  .table-wrap table thead th:first-child,
  .table-wrap table tbody td:nth-child(2),
  .table-wrap table thead th:nth-child(2) {
    position: sticky;
    z-index: 3;
    background: var(--bg-elev);
  }
  /* A frozen cell needs an opaque background of its own: the row scrolls
     underneath it, and a transparent cell shows both at once. */
  .table-wrap table thead th:first-child,
  .table-wrap table thead th:nth-child(2) { z-index: 4; }

  /*
   * Rank-led boards freeze rank + asset.
   *
   * The asset's `left` must equal the rank column's REAL width. A table cell
   * grows to its content whatever width is asked for, and DexMarket renders
   * "#12" rather than "12": the rank measured 51px against an offset of 42, so
   * the asset jumped 9px backwards over the rank the moment it pinned. Tight
   * padding keeps even a four-digit rank inside the offset below.
   */
  .table-wrap table tbody td:first-child,
  .table-wrap table thead th:first-child {
    left: 0;
    width: 52px; min-width: 52px;
    padding-left: 8px; padding-right: 4px;
  }
  .table-wrap table tbody td:nth-child(2),
  .table-wrap table thead th:nth-child(2) {
    left: 52px;
    max-width: 148px;
    border-right: 1px solid var(--line);
  }
  /*
   * Markets leads with a star, which is an action, not information: it is the
   * one column worth dropping on a phone. But `nth-child` still counts it, so
   * the rules above froze the hidden star and the rank and left the asset
   * scrolling. Markets is shifted one place along.
   */
  .market-table .star-col { display: none; }
  .market-table table tbody td:nth-child(2),
  .market-table table thead th:nth-child(2) {
    left: 0;
    width: 52px; min-width: 52px;
    padding-left: 8px; padding-right: 4px;
  }
  .market-table table tbody td:nth-child(3),
  .market-table table thead th:nth-child(3) {
    position: sticky;
    z-index: 3;
    background: var(--bg-elev);
    left: 52px;
    max-width: 148px;
    border-right: 1px solid var(--line);
  }
  .market-table table thead th:nth-child(3) { z-index: 4; }
  /* ...and the cell that was frozen by position alone is released. */
  .market-table table tbody td:first-child,
  .market-table table thead th:first-child { position: static; }

  /*
   * Listings and the other name-led boards have no rank, so only the first
   * column is an identity and the second is already data — freezing it would
   * pin a price to the edge.
   */
  .table-wrap:not(.market-table):not(.dex-table) table:not(:has(tbody tr:first-child > td:first-child.muted)) tbody td:nth-child(2),
  .table-wrap:not(.market-table):not(.dex-table) table:not(:has(tbody tr:first-child > td:first-child.muted)) thead th:nth-child(2) {
    position: static;
    left: auto;
    max-width: none;
    border-right: 0;
  }
  .table-wrap:not(.market-table):not(.dex-table) table:not(:has(tbody tr:first-child > td:first-child.muted)) tbody td:first-child,
  .table-wrap:not(.market-table):not(.dex-table) table:not(:has(tbody tr:first-child > td:first-child.muted)) thead th:first-child {
    width: auto;
    min-width: 0;
    max-width: 150px;
    border-right: 1px solid var(--line);
  }

  /* The frozen asset column is narrow, so its contents truncate inside it
     rather than widening the freeze. Everything else is free to be as wide as
     it needs, because the table scrolls. */
  .row-name, .row-symbol, .row-meta, .pair-name, .dex-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .row-id { min-width: 0; gap: 6px; }
  .row-id .avatar { width: 18px; height: 18px; flex-shrink: 0; }

  /*
   * In the frozen column the ticker leads and the full name goes; there is room
   * for one of them and "BTC" is the one that identifies the row at a glance.
   * The name, and every other detail, is on the asset's own page. Desktop keeps
   * both — this is a phone-width decision only.
   */
  .table-wrap .asset-name { display: none; }
  .table-wrap .row-name:empty { display: none; }
  .market-table .tick-sym {
    font-size: 12px; font-weight: 600; color: var(--text); background: none;
    padding: 0; margin: 0; letter-spacing: 0;
  }
  /* The network value under the ticker keeps the frozen column meaningful while
     the rest of the row scrolls past it. */
  .row-under {
    display: block;
    font-size: 10.5px;
    color: var(--text-faint);
    font-family: var(--mono);
    line-height: 1.35;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .market-table .chain-tag { display: none; }

  /*
   * THE DEX FROZEN COLUMN SHOWS THE TOKEN, NOT THE WHOLE PAIR.
   *
   * It was rendering "CYBERLEEK / USDT" plus a version tag, an on-chain badge, a
   * boost count and an explorer link — five things competing for 148px, so the
   * one that identifies the row got ellipsed to "CYB CYBERLEEK / US" and the
   * asset was unreadable. The base symbol alone identifies it; the quote asset
   * moves to the line below, and the badges to the row's own page.
   */
  .dex-table .pair-symbol {
    display: inline;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
  }
  .dex-table .pair-name,
  .dex-table .ver-tag,
  .dex-table .own-tag,
  .dex-table .sponsored-tag,
  .dex-table .row-symbol .origin-link { display: none; }
  /* The venue never fits either — "Pancakeswap V2" becomes "Pan…" beside the
     chain pill, which reads as a rendering fault rather than information. The
     chain pill stays; the venue is on the pool's own page. */
  .dex-table .row-name .venue-link,
  .dex-table .row-name > .muted { display: none; }

  /* Long unbreakable tokens (a route in <code>, a contract address) must wrap
     rather than push the whole document sideways. */
  .empty p, .empty code, .muted { overflow-wrap: anywhere; }
}