/* =========================================================
   tradinghub.cc — design tokens
   Site-wide tokens now match the Trading Terminal's own
   "Bloomberg/Aggr" flat palette 1:1 (see former #terminal-shell
   override, now promoted to :root) so every page — hub, guides,
   tools, terminal — reads as one continuous product instead of
   a marketing shell wrapped around a separate tool.
   Headings/UI chrome use IBM Plex Mono (same face as the
   terminal identity bar); Inter is kept only for long-form
   reading copy inside guide articles, where a data-terminal
   mono face would hurt legibility.
   ========================================================= */

:root{
  --void:        #000000;
  --panel:       #090909;
  --panel-hover: #121212;
  --surface-header: #1A1A1A;
  --line:        #1A1A1A;
  --line-soft:   #141414;
  --ink:         #CCCCCC;
  --mute:        #8F8F8F;
  --mute-dim:    #5A5A5A;
  --signal:      #FFC857;
  --signal-soft: rgba(255,200,87,0.12);
  --pulse:       #00FF88;
  --pulse-soft:  rgba(0,255,136,0.12);
  --danger:      #FF4D4D;
  --danger-soft: rgba(255,77,77,0.12);
  --violet:      #A78BFA;
  --violet-soft: rgba(167,139,250,0.12);
  --cyan:        #4CC2FF;
  --cyan-soft:   rgba(76,194,255,0.12);

  --font-display: 'IBM Plex Mono', 'Space Grotesk', monospace;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 0;
  --radius-sm: 0;
  --maxw: 1180px;
}

/* ---------- terminal-flat surfaces, site-wide ----------
   The terminal enforces hairline borders with zero corner
   radius everywhere; that's now the whole site's default too.
   Only genuinely circular chrome (status dots, avatar-style
   badges, round icon buttons) is exempted, exactly as the
   terminal itself already exempts its own dots. */
*,*::before,*::after{ border-radius:0 !important; }
.dot,
.funding-dot,
.term-identity-bar__dot,
.tv-watchdog__spinner,
.fsnap-sym-badge,
.liq-icon,
.liq-chip__icon,
.info-btn,
.glossary-dialog__close,
.mktw-sym-badge{ border-radius:50% !important; }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  overflow-x:hidden;
  background:var(--void);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.16;
  margin:0 0 .5em;
  letter-spacing:-0.005em;
}
p{ margin:0 0 1em; color:var(--mute); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

::selection{ background:var(--signal); color:#000000; }
:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* ---------- eyebrow / tag / mono utilities ---------- */
.eyebrow{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--signal);
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:.03em;
  color:var(--mute);
  background:var(--void);
  border:1px solid var(--line);
  border-radius:999px;
  padding:4px 10px;
}
.dot{ width:6px; height:6px; border-radius:50%; background:var(--pulse); box-shadow:0 0 8px var(--pulse); flex:none; }
.dot--collecting{ background:var(--signal); box-shadow:0 0 8px var(--signal); animation:dot-collecting-pulse 1.4s ease-in-out infinite; }
.dot--cached{ background:var(--violet); box-shadow:0 0 8px var(--violet); }
.dot--offline{ background:var(--danger); box-shadow:0 0 8px var(--danger); }
@keyframes dot-collecting-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
}
/* Decorative blur layer, not .site-header itself: backdrop-filter (like
   filter/transform) turns whatever element carries it into the containing
   block for any position:fixed descendant — which used to include the
   mobile .nav-links panel nested inside this header, breaking its fixed
   coordinates so it positioned relative to the header's own short box
   instead of the viewport and rendered off-screen. A ::before layer gets
   the same visual blur without being an ancestor of .nav-links. */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(26,26,26,0.85);
  backdrop-filter:blur(10px);
  z-index:-1;
  pointer-events:none;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  max-width:var(--maxw); margin:0 auto;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  color:var(--ink);
  display:flex; align-items:baseline; gap:2px;
}
.logo span{ color:var(--signal); }
.nav-links{
  display:flex; gap:32px;
  list-style:none; margin:0; padding:0;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:.02em;
}
.nav-links a{
  color:var(--mute);
  padding:6px 0;
  border-bottom:1px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--ink); border-color:var(--signal); }
.nav-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:8px; color:var(--ink); padding:8px 10px; font-size:18px; }

/* static market strip — no auto-scroll; scrolls horizontally by hand only
   if it doesn't fit (e.g. narrow viewport with several watchlist coins) */
.ticker{
  border-bottom:1px solid var(--line);
  background:var(--panel);
  overflow-x:auto;
  overflow-y:hidden;
  white-space:nowrap;
  position:relative;
  scrollbar-width:thin;
}
.ticker::-webkit-scrollbar{ height:4px; }
.ticker::-webkit-scrollbar-thumb{ background:var(--line); border-radius:2px; }
.ticker-track{
  display:inline-flex;
  align-items:center;
  padding:9px 16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mute);
}
.ticker-track .tk-coin{
  display:inline-flex; align-items:center; gap:8px;
  margin-right:28px; white-space:nowrap; flex-shrink:0;
  padding-right:28px;
  border-right:1px solid var(--line);
}
.ticker-track .tk-coin:last-of-type{ border-right:none; }
.ticker-track .tk-global{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; }
.ticker-track .tk-sym{ color:var(--ink); font-weight:600; letter-spacing:.02em; }
.ticker-track .tk-label{ color:var(--mute-dim); }
.ticker-track .tk-val{ color:var(--ink); font-weight:500; }
.ticker-track .tk-chg{ font-weight:500; }
.ticker-track .up{ color:var(--pulse); }
.ticker-track .down{ color:var(--danger); }

/* trading terminal: same strip, tightened to one lean line — smaller type,
   tighter gaps between items, no room wasted between the nav and the
   terminal itself */
body.page-terminal .ticker-track{
  padding:6px 16px;
  font-size:11.5px;
  gap:0;
}
body.page-terminal .ticker-track .tk-coin{
  gap:6px;
  margin-right:16px;
  padding-right:16px;
}
body.page-terminal .ticker-track .tk-global{ gap:6px; }
body.page-terminal .ticker-track .tk-label{ margin-left:2px; }

/* ---------- hero ---------- */
.hero{
  position:relative;
  padding:38px 24px 26px;
  max-width:var(--maxw); margin:0 auto;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-220px; right:-160px;
  width:560px; height:560px;
  background:radial-gradient(circle, rgba(255,200,87,0.16) 0%, rgba(255,200,87,0.05) 45%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.hero::after{
  content:"";
  position:absolute;
  top:-120px; right:120px;
  width:380px; height:380px;
  background:radial-gradient(circle, rgba(0,255,136,0.10) 0%, transparent 65%);
  pointer-events:none;
  z-index:0;
}
.hero > *{ position:relative; z-index:1; }
.hero .eyebrow{ margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.hero h1{
  font-size:clamp(26px,4.2vw,42px);
  max-width:18ch;
  line-height:1.1;
  margin-bottom:.35em;
  letter-spacing:-0.01em;
}
.hero h1 .accent{ color:var(--signal); }
.hero .lede{
  font-size:14.5px;
  max-width:56ch;
  color:var(--mute);
  margin-top:8px;
  margin-bottom:24px;
}
.hero-meta{
  font-size:13.5px;
  color:var(--mute-dim);
  margin-top:18px;
}
.hero-cta{
  display:flex; flex-wrap:wrap; gap:12px;
  margin-top:16px;
  margin-bottom:26px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13px;
  padding:11px 20px; border-radius:999px;
  border:1px solid var(--line);
  transition:border-color .15s ease, background .15s ease, transform .15s ease, color .15s ease;
}
.btn-primary{ background:var(--signal); color:var(--void); border-color:var(--signal); font-weight:600; }
.btn-primary:hover{ transform:translateY(-1px); background:#ffd37a; }
.btn-ghost{ background:var(--panel); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--signal-soft); background:var(--panel-hover); color:var(--signal); }

.hero-stats{
  display:flex; flex-wrap:wrap; gap:0;
  border-top:1px solid var(--line);
  padding-top:22px;
}
.hero-stat{
  padding:0 28px 0 0; margin-right:28px;
  border-right:1px solid var(--line-soft);
}
.hero-stat:last-child{ border-right:none; margin-right:0; padding-right:0; }
.hero-stat .num{
  font-family:var(--font-display); font-weight:700;
  font-size:24px; color:var(--ink); display:block;
}
.hero-stat .label{
  font-family:var(--font-mono); font-size:11px; color:var(--mute-dim);
  text-transform:uppercase; letter-spacing:.05em;
}
@media (max-width:560px){
  .hero{ padding:40px 20px 32px; }
  .hero-stat{ padding-right:16px; margin-right:16px; }
  .hero-stat .num{ font-size:20px; }
  .btn{ flex:1; justify-content:center; }
}

/* ---------- hub grid ---------- */
.hub{
  padding:8px 24px 56px;
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
}
@media (max-width:1080px){ .hub{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .hub{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .hub{ grid-template-columns:1fr; } }

.hub-card{
  grid-column:span 1;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 18px;
  display:flex; flex-direction:column;
  min-height:200px;
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease, background .2s ease;
}
.hub-card:hover{
  border-color:var(--signal-soft);
  background:var(--panel-hover);
  transform:translateY(-2px);
}
.hub-card .icon{
  width:34px; height:34px;
  border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:var(--signal-soft);
  color:var(--signal);
  margin-bottom:14px;
}
.hub-card h3{ font-size:17px; margin-bottom:6px; }
.hub-card p{ font-size:13px; margin-bottom:0; flex:1; line-height:1.45; }
.hub-card .card-foot{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.hub-card .meta{ font-family:var(--font-mono); font-size:11.5px; color:var(--mute-dim); }
.hub-card .arrow{ color:var(--mute); transition:transform .15s ease, color .15s ease; }
.hub-card:hover .arrow{ color:var(--signal); transform:translateX(3px); }

/* size variants for a dashboard feel */
.hub-card.wide{ grid-column:span 2; }
@media (max-width:560px){ .hub-card.wide{ grid-column:span 1; } }

/* ---------- section shell (subpages) ---------- */
.page-head{
  position:relative;
  padding:40px 24px 22px;
  max-width:var(--maxw); margin:0 auto;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-head::before{
  content:"";
  position:absolute;
  top:-200px; right:-120px;
  width:440px; height:440px;
  background:radial-gradient(circle, rgba(255,200,87,0.12) 0%, rgba(255,200,87,0.04) 45%, transparent 70%);
  pointer-events:none;
  z-index:0;
}
.page-head > *{ position:relative; z-index:1; }
.page-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
@media (max-width:560px){ .page-head{ padding:32px 20px 20px; } }
.breadcrumb{
  display:flex; align-items:center; gap:9px; flex-wrap:wrap; row-gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--mute-dim);
  margin-bottom:14px;
}
.next-guide-link{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:7px;
  color:var(--mute);
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:999px;
  padding:5px 10px 5px 12px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  white-space:nowrap;
}
.next-guide-link:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.next-guide-link .next-arrow{ display:inline-block; transition:transform .15s ease; }
.next-guide-link:hover .next-arrow{ transform:translateX(3px); }
@media (max-width:480px){ .next-guide-link .next-label{ display:none; } .next-guide-link{ padding:6px 11px; } }
.breadcrumb a{ color:var(--mute); }
.breadcrumb a:hover{ color:var(--signal); }
.back-link{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--mute);
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:999px;
  padding:5px 12px 5px 10px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.back-link:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.back-arrow{ display:inline-block; transition:transform .15s ease; }
.back-link:hover .back-arrow{ transform:translateX(-3px); }
.crumb-sep{ color:var(--line); }
.page-head h1{ font-size:clamp(28px,4vw,40px); }
.page-head .lede{ color:var(--mute); max-width:60ch; font-size:16px; }

.section{
  padding:34px 24px;
  max-width:var(--maxw); margin:0 auto;
}
.section h2{ font-size:22px; margin-bottom:6px; }
.section .section-sub{ color:var(--mute-dim); font-family:var(--font-mono); font-size:12.5px; margin-bottom:20px; }

.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:900px){ .grid-3{ grid-template-columns:repeat(2,1fr); } .grid-4{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){ .grid-3,.grid-2,.grid-4{ grid-template-columns:1fr; } }

/* Trading Terminal — the widget grids are dense data panels, not prose,
   so they should use most of the monitor instead of the site's normal
   1180px reading column. Scoped to .page-terminal only so every other
   page (articles, guides, etc.) keeps its usual comfortable width. */
.page-terminal .page-head,
.page-terminal .section{
  max-width:min(2400px, 96vw);
}
.page-terminal .section{
  padding-bottom:20px;
}
/* the terminal head lost its lede/tag row, so it no longer needs the
   full hero padding — pull it in tighter to cut scroll height */
.page-terminal .page-head{
  padding-top:24px;
  padding-bottom:10px;
}
.page-terminal .breadcrumb{ margin-bottom:8px; }
.page-terminal .page-head::before{ display:none; }
.page-terminal .term-tabs{
  margin:10px 0 14px;
}
.page-terminal .grid-2,
.page-terminal .grid-3{
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:12px;
}
@media (max-width:600px){
  .page-terminal .grid-2,
  .page-terminal .grid-3{ grid-template-columns:1fr; }
}

.item-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:20px;
  transition:border-color .15s ease;
}
.item-card:hover{ border-color:var(--signal-soft); }
.item-card h4{ font-size:15.5px; margin-bottom:6px; }
.item-card p{ font-size:13.5px; margin-bottom:12px; }
.status{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px; display:inline-block;
}
.status.soon{ color:var(--mute); background:var(--void); border:1px solid var(--line); }
.status.live{ color:var(--pulse); background:var(--pulse-soft); }
.status.partner{ color:var(--signal); background:var(--signal-soft); }
.status.nokyc{ color:var(--cyan); background:var(--cyan-soft); }

/* ---------- "continue where you left off" widget ---------- */
.continue-widget[hidden]{ display:none; }
.continue-card{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--pulse);
  border-radius:var(--radius-sm); padding:16px 20px;
  transition:border-color .15s ease, background .15s ease, transform .15s ease;
}
.continue-card:hover{ background:var(--panel-hover); transform:translateY(-2px); }
.continue-card-text{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.continue-eyebrow{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--pulse);
}
.continue-title{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); }
.continue-meta{ font-family:var(--font-mono); font-size:12px; color:var(--mute-dim); }
.continue-arrow{ font-size:18px; color:var(--pulse); flex-shrink:0; transition:transform .15s ease; }
.continue-card:hover .continue-arrow{ transform:translateX(3px); }
@media (max-width:560px){
  .continue-title{ font-size:14px; }
  .continue-card{ padding:14px 16px; }
}

/* ---------- exchange fee stats (item-card) ---------- */
.card-top-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.fee-stats{
  display:flex; gap:16px;
  margin:12px 0 14px;
  padding-top:12px;
  border-top:1px solid var(--line-soft);
}
.fee-stat{ flex:1; }
.fee-stat .fee-label{
  display:block; font-family:var(--font-mono); font-size:10px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mute-dim); margin-bottom:2px;
}
.fee-stat .fee-val{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); }
.btn-sm{ padding:7px 14px; font-size:11.5px; }

/* ---------- guide tracks (categorized, per-guide icons) ---------- */
/* ---------- track tabs (Learn page — one track visible at a time) ---------- */
.track-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin:22px 0 26px;
}
.track-tab{
  display:flex; align-items:center; gap:9px;
  font-family:var(--font-mono); font-size:12.5px;
  padding:9px 16px 9px 10px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--mute);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.track-tab:hover{ color:var(--ink); border-color:var(--signal-soft); }
.track-tab .track-tab-icon{
  width:24px; height:24px; border-radius:7px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.track-tab .track-tab-icon svg{ width:14px; height:14px; }
.track-tab.basics .track-tab-icon{ background:var(--pulse-soft); color:var(--pulse); }
.track-tab.trading .track-tab-icon{ background:var(--signal-soft); color:var(--signal); }
.track-tab.safety .track-tab-icon{ background:var(--violet-soft); color:var(--violet); }
.track-tab.derivatives .track-tab-icon{ background:var(--cyan-soft); color:var(--cyan); }
.track-tab .track-tab-count{ color:var(--mute-dim); }
.track-tab.active{ border-color:var(--line); background:var(--panel-hover); color:var(--ink); font-weight:500; }
.track-panel{ display:none; }
.track-panel.active{ display:block; animation:term-fade .12s ease; }
@media (max-width:560px){ .track-tab{ flex:1 1 auto; justify-content:center; } }

.guide-track{ margin-bottom:40px; }
.guide-track:last-child{ margin-bottom:0; }
.guide-track-head{
  display:flex; align-items:center; gap:14px;
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--line-soft);
}
.track-icon{
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.track-icon svg{ width:19px; height:19px; }
.guide-track-head h3{ font-size:16.5px; margin-bottom:2px; }
.guide-track-head .track-desc{ font-size:13px; color:var(--mute-dim); margin:0; }
.track-count{
  margin-left:auto; flex-shrink:0;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.05em;
  color:var(--mute-dim); border:1px solid var(--line); border-radius:999px;
  padding:4px 10px; white-space:nowrap;
}
@media (max-width:560px){ .track-count{ display:none; } }

.section-head-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.section-head-row .section-sub{ margin-bottom:0; }

.guide-progress-summary{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; color:var(--mute);
  white-space:nowrap; padding-top:3px;
}
.guide-progress-summary b{ color:var(--pulse); }
.guide-progress-reset{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--mute-dim); background:transparent; border:1px solid var(--line); border-radius:999px;
  padding:3px 9px; cursor:pointer; transition:color .15s ease, border-color .15s ease;
}
.guide-progress-reset:hover{ color:var(--ink); border-color:var(--mute-dim); }

/* track-tabs doubles as the progress bar: buttons sit inside it, with a
   thin fill line tracking overall read-progress along its bottom edge */
.track-tabs.guide-progress{ position:relative; padding-bottom:13px; }
.track-tabs.guide-progress::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--line); border-radius:999px;
}
.guide-progress-fill{
  position:absolute; left:0; bottom:0; height:3px; width:0%;
  background:var(--pulse); border-radius:999px; transition:width .4s ease;
}

.guide-top-right{ display:flex; align-items:center; gap:8px; }
.guide-read-badge{ white-space:nowrap; }
.guide-card.is-read{ background:var(--panel-hover); }

.guide-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width:980px){ .guide-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .guide-grid{ grid-template-columns:1fr; } }

.guide-card{
  display:block;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:3px solid var(--line);
  border-radius:var(--radius-sm);
  padding:18px 18px 16px;
  transition:border-color .15s ease, transform .15s ease, background .15s ease;
}
.guide-card:hover{ background:var(--panel-hover); transform:translateY(-2px); }
.guide-card-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:13px; }
.guide-icon{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.guide-icon svg{ width:16px; height:16px; }
.guide-num{ font-family:var(--font-mono); font-size:11px; color:var(--mute-dim); }
.guide-card h4{ font-size:14.5px; margin-bottom:6px; line-height:1.3; }
.guide-card p{ font-size:12.5px; margin-bottom:14px; color:var(--mute-dim); line-height:1.45; }
.guide-cta{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; text-transform:uppercase;
}
.guide-cta .arrow{ transition:transform .15s ease; }
.guide-card:hover .guide-cta .arrow{ transform:translateX(3px); }

/* category color variants */
.guide-track-head.basics .track-icon,
.guide-card.basics .guide-icon{ background:var(--pulse-soft); color:var(--pulse); }
.guide-card.basics{ border-left-color:var(--pulse); }
.guide-card.basics .guide-cta{ color:var(--pulse); }

.guide-track-head.trading .track-icon,
.guide-card.trading .guide-icon{ background:var(--signal-soft); color:var(--signal); }
.guide-card.trading{ border-left-color:var(--signal); }
.guide-card.trading .guide-cta{ color:var(--signal); }

.guide-track-head.safety .track-icon,
.guide-card.safety .guide-icon{ background:var(--violet-soft); color:var(--violet); }
.guide-card.safety{ border-left-color:var(--violet); }
.guide-card.safety .guide-cta{ color:var(--violet); }

.guide-track-head.derivatives .track-icon,
.guide-card.derivatives .guide-icon{ background:var(--cyan-soft); color:var(--cyan); }
.guide-card.derivatives{ border-left-color:var(--cyan); }
.guide-card.derivatives .guide-cta{ color:var(--cyan); }

/* ---------- glossary ---------- */
.glossary-search{
  position:relative; margin:28px 0 6px; max-width:420px;
}
.glossary-search input{
  width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-family:var(--font-body); font-size:14.5px; border-radius:var(--radius-sm);
  padding:11px 14px 11px 38px; outline:none; transition:border-color .15s ease;
}
.glossary-search input:focus{ border-color:var(--signal-soft); }
.glossary-search input::placeholder{ color:var(--mute-dim); }
.glossary-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:15px; height:15px; color:var(--mute-dim); pointer-events:none; }
.glossary-count{ font-family:var(--font-mono); font-size:12px; color:var(--mute-dim); margin:10px 0 0; }

.glossary-jump{ display:flex; flex-wrap:wrap; gap:6px; margin:22px 0 8px; }
.glossary-jump a{
  font-family:var(--font-mono); font-size:12px; color:var(--mute);
  border:1px solid var(--line); border-radius:6px;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease;
}
.glossary-jump a:hover{ color:var(--signal); border-color:var(--signal-soft); }
.glossary-jump a.disabled{ color:var(--mute-dim); opacity:.35; pointer-events:none; }

.glossary-letter{ margin-top:38px; scroll-margin-top:24px; }
.glossary-letter h2{
  font-family:var(--font-mono); color:var(--signal); font-size:19px;
  border-bottom:1px solid var(--line-soft); padding-bottom:9px; margin-bottom:4px;
}
.glossary-term{ padding:16px 0; border-bottom:1px solid var(--line-soft); }
.glossary-term:last-child{ border-bottom:none; }
.glossary-term dt{ font-family:var(--font-display); font-weight:600; font-size:15.5px; color:var(--ink); margin-bottom:5px; }
.glossary-term dd{ margin:0; font-size:14px; color:var(--mute); line-height:1.55; }
.glossary-term dd a{ color:var(--signal); }
.glossary-term.hidden{ display:none; }
.glossary-letter.hidden{ display:none; }

/* placeholder block for "coming soon" widget/table areas */
.placeholder{
  border:1px dashed var(--line);
  border-radius:var(--radius);
  padding:40px 24px;
  text-align:center;
  color:var(--mute-dim);
  font-family:var(--font-mono);
  font-size:13px;
  background:repeating-linear-gradient(135deg, var(--panel), var(--panel) 10px, var(--line-soft) 10px, var(--line-soft) 11px);
}

/* comparison table skeleton */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); }
table.compare{ width:100%; border-collapse:collapse; min-width:720px; font-size:13.5px; }
table.compare th, table.compare td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); white-space:nowrap; }
table.compare thead th{ font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); background:var(--panel); }
table.compare tbody tr:last-child td{ border-bottom:none; }
table.compare tbody tr:hover{ background:var(--panel-hover); }

/* wrap-cells variant: lets long cell text wrap instead of forcing
   a horizontal scrollbar on the table-wrap container */
table.compare.compare-wrap{ min-width:0; width:100%; table-layout:fixed; }
table.compare.compare-wrap th, table.compare.compare-wrap td{ white-space:normal; word-break:break-word; }
@media (max-width:700px){
  table.compare.compare-wrap{ font-size:12.5px; }
  table.compare.compare-wrap th, table.compare.compare-wrap td{ padding:10px 10px; }
}

/* disclosure / legal callout */
.callout{
  border-left:2px solid var(--signal);
  background:var(--signal-soft);
  padding:16px 18px;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:13.5px;
  color:var(--ink);
  margin:24px 0;
}
.callout b{ color:var(--signal); }
.callout--cta{ border-left-color:var(--pulse); background:var(--pulse-soft); }
.callout--cta b{ color:var(--pulse); }
.callout--cta a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--pulse); text-underline-offset:2px; }
.callout--cta a:hover{ color:var(--pulse); }

/* ---------- calculators (Tools) ---------- */
.calc-tabs{
  display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;
}
.calc-tab{
  font-family:var(--font-mono); font-size:12.5px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel); color:var(--mute);
  cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.calc-tab:hover{ color:var(--ink); border-color:var(--signal-soft); }
.calc-tab.active{ color:var(--void); background:var(--signal); border-color:var(--signal); font-weight:500; }

.calc-panel{ display:none; }
.calc-panel.active{
  display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start;
}
@media (max-width:820px){ .calc-panel.active{ grid-template-columns:1fr; } }

.calc-form, .calc-result{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:24px;
}
.calc-form h3, .calc-result h3{ font-size:16px; margin-bottom:18px; }

.field{ margin-bottom:16px; }
.field:last-child{ margin-bottom:0; }
.field label{
  display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mute-dim); margin-bottom:7px;
}
.field input[type=number], .field select{
  width:100%; background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font-family:var(--font-body); font-size:14.5px; padding:10px 12px;
  -moz-appearance:textfield;
}
.field input[type=number]::-webkit-outer-spin-button,
.field input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.field input:focus, .field select:focus{ border-color:var(--signal); outline:none; }
.field .unit-row{ display:flex; align-items:center; gap:8px; }
.field .unit-row span{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute-dim); }

.seg{ display:flex; gap:8px; }
.seg button{
  flex:1; padding:10px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--void); color:var(--mute); font-family:var(--font-mono); font-size:12.5px; cursor:pointer;
  transition:all .15s ease;
}
.seg button.on{ border-color:var(--pulse); color:var(--pulse); background:var(--pulse-soft); }
.seg button.on.danger{ border-color:var(--danger); color:var(--danger); background:rgba(255,77,77,.12); }

.calc-result{ display:flex; flex-direction:column; }
.result-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line-soft);
}
.result-row:first-of-type{ padding-top:0; }
.result-row:last-child{ border-bottom:none; }
.result-row .rlabel{ font-family:var(--font-mono); font-size:12px; color:var(--mute); }
.result-row .rvalue{ font-family:var(--font-mono); font-size:17px; color:var(--ink); font-weight:500; white-space:nowrap; }
.result-row .rvalue.big{ font-size:28px; color:var(--signal); }
.result-row .rvalue.pos{ color:var(--pulse); }
.result-row .rvalue.neg{ color:var(--danger); }
.calc-hint{ font-size:12.5px; color:var(--mute-dim); margin-top:16px; line-height:1.5; }

.fee-table-wrap{ overflow-x:auto; }
table.fee-table{ width:100%; border-collapse:collapse; font-size:13.5px; min-width:520px; }
table.fee-table th, table.fee-table td{ padding:11px 14px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.fee-table thead th{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); }
table.fee-table tbody tr.cheapest{ background:var(--pulse-soft); }
table.fee-table tbody tr.cheapest td:first-child{ color:var(--pulse); font-weight:600; }
table.fee-table td.num{ font-family:var(--font-mono); }

/* ---------- crypto terminal widgets ---------- */
.widget-card{
  --card-pad-y: 14px;
  --card-pad-x: 14px;
  --card-head-gap: 10px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:var(--card-pad-y) var(--card-pad-x);
  display:flex; flex-direction:column;
  min-height:auto;
}
.widget-card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin:calc(-1 * var(--card-pad-y)) calc(-1 * var(--card-pad-x)) var(--card-head-gap);
  padding:calc(var(--card-pad-y) * 0.7) var(--card-pad-x);
  background:var(--surface-header);
  border-bottom:1px solid var(--line);
}
.widget-card__head h4{ font-size:14px; margin:0; }
.widget-card__head{ flex-wrap:wrap; gap:8px 12px; }
/* min-width:0 is the actual fix here: flex children default to min-width:auto,
   which lets wide content (a TradingView iframe, a long table) force the card
   wider than its grid track instead of shrinking to fit it. */
.widget-card__body{ flex:1; display:flex; flex-direction:column; min-width:0; }

/* TradingView embeds don't ship their own sizing CSS — without this, the
   injected iframe can render at an intrinsic width wider than the card.
   position:relative + min-height give the watchdog overlay below a stable
   box to sit in before the iframe has loaded and established its own size. */
.tradingview-widget-container{ width:100%; min-width:0; overflow:hidden; position:relative; min-height:170px; }
.tradingview-widget-container.tv-tall{ min-height:430px; }
/* macro ticker-tape strip: one thin scrolling row instead of 8 full cards */
.tradingview-widget-container__widget{ width:100%; }
.tradingview-widget-container iframe{ width:100% !important; max-width:100%; }

/* Watchdog overlay — shown while a TradingView embed is loading, and swapped
   to an error state if no iframe shows up within a few seconds (most often
   an ad blocker, sometimes a TradingView outage). Without this, a blocked
   widget is just a permanently empty card with no explanation. */
.tv-watchdog{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center; padding:18px;
  background:var(--panel);
  border-radius:var(--radius-sm);
  transition:opacity .25s ease;
}
.tv-watchdog__spinner{
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--signal);
  animation:tv-watchdog-spin 0.8s linear infinite;
}
@keyframes tv-watchdog-spin{ to{ transform:rotate(360deg); } }
.tv-watchdog__text{ font-family:var(--font-mono); font-size:13.5px; color:var(--mute-dim); line-height:1.5; max-width:32ch; }
.tv-watchdog--error .tv-watchdog__text{ color:var(--mute); }
.tv-watchdog__text a{ color:var(--signal); text-decoration:underline; }
.tv-watchdog__text a:hover{ color:var(--ink); }
.tv-watchdog.tv-watchdog--hidden{ opacity:0; pointer-events:none; }
@media (prefers-reduced-motion: reduce){
  .tv-watchdog__spinner{ animation:none; border-top-color:var(--line); }
}

.tv-lazy-mount{ width:100%; min-width:0; flex:1; display:flex; flex-direction:column; }
.tv-lazy-placeholder{
  flex:1; display:flex; align-items:center; justify-content:center;
  min-height:160px; color:var(--mute-dim); font-family:var(--font-mono); font-size:12.5px;
}

.widget-credit{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
  margin:10px 0 0; text-align:right;
}
.widget-credit a{ color:var(--mute); }
.widget-credit a:hover{ color:var(--signal); }

.fng-embed{ display:flex; flex-direction:column; align-items:center; justify-content:center; flex:1; gap:0; padding:2px 0; min-width:0; }
.fng-gauge{ width:100%; max-width:120px; height:auto; }
.fng-gauge path{ transition:stroke-dasharray .5s ease, stroke .5s ease; }
.fng-gauge #fng-needle-group{ transition:transform .5s ease; transform-origin:100px 100px; }
.fng-value{ font-family:var(--font-mono); font-weight:600; font-size:19px; color:var(--ink); line-height:1; margin-top:-13px; }
.fng-label{ font-size:11.5px; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; }

.news-list{ list-style:none; margin:0; padding:0; flex:1; display:flex; flex-direction:column; gap:2px; overflow-y:auto; max-height:320px; }
.news-item a{
  display:flex; flex-direction:column; gap:4px;
  padding:11px 4px; border-bottom:1px solid var(--line-soft);
  transition:background .12s ease;
}
.news-item:last-child a{ border-bottom:none; }
.news-item a:hover{ background:var(--panel-hover); }
.news-title{ font-size:15px; color:var(--ink); line-height:1.4; }
.news-meta{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.03em; }
.news-item.news-fallback{ padding:11px 4px; font-size:14.5px; color:var(--mute); }
.news-item.news-fallback a{ display:inline; padding:0; border:none; color:var(--signal); }
.news-skeleton{ color:var(--mute-dim); font-family:var(--font-mono); font-size:14px; padding:20px 4px; text-align:center; }

/* ---------- main interactive chart + symbol quick-switch ---------- */
/* !important is required here: the TradingView embed script writes its own
   inline style="width:100%;height:100%" onto this same container element
   once the widget mounts. An inline style always beats a class selector
   from an external stylesheet, so without !important this rule is silently
   overridden the moment the widget loads — the container falls back to
   height:100% of a parent that has no defined height, i.e. it collapses to
   a small, content-driven size instead of the min(76vh,860px) we want. */
.tv-chart-main{ height:min(76vh, 860px) !important; min-height:640px !important; width:100% !important; min-width:0; }
.tv-chart-main .tradingview-widget-container__widget{ height:100%; }
.tv-chart-main iframe{ height:100% !important; }
@media (max-width:1300px){ .tv-chart-main{ height:min(68vh, 700px) !important; min-height:560px !important; } }
@media (max-width:760px){ .tv-chart-main{ height:420px !important; min-height:420px !important; } }
.chart-sym-tabs{
  display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.chart-sym-tabs::-webkit-scrollbar{ display:none; }
.chart-sym-btn{
  flex:none; padding:6px 13px; border-radius:999px; border:1px solid var(--line);
  background:var(--void); color:var(--mute); font-family:var(--font-mono); font-size:12px;
  cursor:pointer; white-space:nowrap; transition:all .15s ease;
}
.chart-sym-btn:hover{ color:var(--ink); border-color:var(--mute-dim); }
.chart-sym-btn.on{ border-color:var(--signal); color:var(--signal); background:var(--signal-soft); font-weight:600; }
.chart-hint{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute-dim); margin:10px 2px 0; }

/* ---------- terminal utility colors ---------- */
.pos{ color:var(--pulse); }
.neg{ color:var(--danger); }

/* ---------- terminal section tabs (Crypto / Macro & Forex) ----------
   Also carries the calculators icon on the same row (previously its own
   toolbar row above this one — once that row's hint text was removed it
   was just a tall empty bar with the icon floating on the right, so the
   icon moved down here and that row was deleted). The icon's markup
   still comes first in the DOM (it wraps the calculator popover, which
   is easiest to keep in one contiguous block), so `order` flips its
   visual position to the end of the row instead of relocating that
   markup. */
.term-tabs{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 16px;
  border-bottom:1px solid var(--line);
}
.term-tabs__list{ display:flex; gap:6px; order:1; }
.term-tabs .term-tools{ order:2; display:flex; align-items:center; gap:8px; }
.term-tab{
  font-family:var(--font-mono); font-size:13px; letter-spacing:.02em;
  color:var(--mute); background:none; border:none; cursor:pointer;
  padding:10px 4px; margin-bottom:-1px;
  border-bottom:2px solid transparent;
  transition:color .12s ease, border-color .12s ease;
}
.term-tab + .term-tab{ margin-left:14px; }
.term-tab:hover{ color:var(--ink); }
.term-tab--active, .term-tab--active:hover{ color:var(--ink); border-bottom-color:var(--signal); }

/* ---------- terminal 2-column layouts ----------
   Crypto panel: narrow sidebar (watchlist + liquidations) next to the
   chart, which is the priority content. Macro & Forex panel has no single
   "main" item, so it gets two balanced columns instead. Both replace the
   old 3-column layout now that macro widgets live on their own tab. */
.term-panel.term-2col{
  display:grid;
  grid-template-columns:270px minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin-top:16px;
}
.term-panel.term-2col.term-2col--balanced{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}
.term-panel[hidden]{ display:none !important; }
.term-col{
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}

@media (max-width:1300px){
  .term-panel.term-2col{ grid-template-columns:240px minmax(0,1fr); gap:12px; }
}
@media (max-width:980px){
  .term-panel.term-2col{ grid-template-columns:1fr; margin-top:14px; }
  .term-panel.term-2col .term-col-main{ order:1; }
  .term-panel.term-2col .term-col-left{ order:2; }
}

/* Right column: several small TradingView mini-widgets stacked in one card
   (Dominance, Indices, Gold & Oil) instead of one wide multi-tab embed. */
.mini-tv-stack{ display:flex; flex-direction:column; gap:10px; }
.mini-tv-stack .tradingview-widget-container{ min-height:90px; }

/* ================= TILING TERMINAL GRID (Crypto tab) =================
   Every pane boundary is an independently draggable gutter — a full
   tiling workspace, not a single fixed split. Panes are flush, separated
   only by 1px hairlines: no cards, no radius, no shadows, no window
   chrome. Headers are reduced to a thin label strip; controls only
   appear on hover. Background carries a faint navy tint instead of pure
   black. Breaks out of the site's centered column on purpose, using the
   full screen width.

   Layout math is resolution-independent by construction: the only
   persisted values are three percentages (0–100) — how far each gutter
   sits across its container. A percentage is always valid at any
   viewport width, so a layout can never go stale the way the old
   absolute-pixel version did. See assets/term-window-manager.js. */
.term-bleed{
  width:100vw;
  position:relative;
  left:50%;
  transform:translateX(-50%);
  background:#0B0E14;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.term-winbar{
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px;
  padding:7px 16px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:12.5px; color:var(--mute-dim);
  background:#0B0E14;
}
.term-winbar__label{ text-transform:uppercase; letter-spacing:.08em; color:var(--mute-dim); flex:none; font-size:11.5px; }
.term-winbar__closed{ display:flex; gap:6px; flex-wrap:wrap; flex:1; min-width:0; }
.term-winbar__chip{
  display:flex; align-items:center; gap:5px;
  padding:3px 9px 3px 7px; border:1px solid var(--line); border-radius:2px;
  background:transparent; color:var(--mute); cursor:pointer;
  font-family:var(--font-mono); font-size:12.5px; transition:all .12s ease;
}
.term-winbar__chip:hover{ color:var(--ink); border-color:var(--signal); }
.term-winbar__chip b{ color:var(--signal); font-weight:700; }
.term-winbar__reset{
  flex:none; background:none; border:none; color:var(--mute-dim);
  font-family:var(--font-mono); font-size:12.5px; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.term-winbar__reset:hover{ color:var(--ink); }

/* --term-left-w / --term-left-h / --term-right-h are set live by
   term-window-manager.js (fall back to sane defaults if JS is slow). */
.term-canvas{
  --term-left-w:26%;
  display:flex;
  align-items:stretch;
  height:min(78vh, 760px);
  min-height:460px;
  overflow:hidden;
  background:#0B0E14;
}
.term-gcol{
  display:flex; flex-direction:column;
  min-width:0; min-height:0;
  overflow:hidden;
}
#term-gcol-left{ flex:0 0 var(--term-left-w); border-right:1px solid var(--line); }
#term-gcol-right{ flex:1 1 auto; }

.term-gutter{ position:relative; z-index:3; background:transparent; flex:none; }
.term-gutter--v{ width:5px; margin:0 -2px; cursor:col-resize; }
.term-gutter:not(.term-gutter--h){ width:5px; margin:0 -2px; cursor:col-resize; }
.term-gutter--h{ height:5px; margin:-2px 0; cursor:row-resize; width:auto; }
.term-gutter[hidden]{ display:none; }
.term-gutter::after{
  content:''; position:absolute; background:var(--line);
}
.term-gutter:not(.term-gutter--h)::after{ top:0; bottom:0; left:2px; width:1px; }
.term-gutter--h::after{ left:0; right:0; top:2px; height:1px; }
.term-gutter:hover::after,
.term-gutter--active::after{ background:var(--signal); }
.term-gutter:not(.term-gutter--h):hover::after,
.term-gutter:not(.term-gutter--h).term-gutter--active::after{ left:1px; width:3px; }
.term-gutter--h:hover::after,
.term-gutter--h.term-gutter--active::after{ top:1px; height:3px; }

.term-pane{
  display:flex; flex-direction:column;
  min-height:0; min-width:0;
  background:#0B0E14;
}
.term-pane[hidden]{ display:none; }

.term-pane__head{
  display:flex; align-items:center; gap:8px;
  padding:6px 8px 6px 12px;
  background:var(--surface-header);
  border-bottom:1px solid var(--line-soft);
  user-select:none;
  flex:none;
}
.term-pane__title{
  font-family:var(--font-mono);
  font-size:12px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mute);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.term-pane__meta{ display:flex; align-items:center; gap:8px; margin-left:auto; flex:none; }
.term-pane__btn{
  width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  border:none; background:none; color:var(--mute-dim); cursor:pointer;
  border-radius:2px; font-size:14.5px; line-height:1; flex:none; margin-left:2px;
  opacity:0; transition:opacity .12s ease;
}
.term-pane:hover .term-pane__btn,
.term-pane__btn:focus-visible{ opacity:1; }
.term-pane__btn:hover{ color:var(--danger); background:var(--line-soft); }

.term-pane__body{
  flex:1; min-height:0; min-width:0;
  display:flex; flex-direction:column;
  padding:10px 12px; overflow:hidden;
}

/* content inside panes should fill the available box */
.term-pane .mktw-list{ flex:1; min-height:0; overflow-y:auto; }
.term-pane .news-list{ flex:1; min-height:0; max-height:none; overflow-y:auto; }
.term-pane .liq-ticker{ flex:none; }
.term-pane .tv-chart-main{ flex:1; min-height:0 !important; height:100% !important; }
.term-pane .chart-hero{ flex:none; margin-bottom:10px; }
.term-pane .mini-tv-stack{ flex:1; overflow-y:auto; }

/* thin, understated scrollbars inside the terminal only */
.term-canvas *{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.term-canvas *::-webkit-scrollbar{ width:6px; height:6px; }
.term-canvas *::-webkit-scrollbar-track{ background:transparent; }
.term-canvas *::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
.term-canvas *::-webkit-scrollbar-thumb:hover{ background:var(--mute-dim); }

body.term-is-dragging{ user-select:none; }
body.term-is-dragging.term-is-dragging--col{ cursor:col-resize !important; }
body.term-is-dragging.term-is-dragging--row{ cursor:row-resize !important; }
body.term-is-dragging .term-gcol,
body.term-is-dragging .term-pane{ pointer-events:none; }

@media (max-width:900px){
  .term-canvas{ display:block; height:auto; min-height:0; background:#0B0E14; }
  .term-gutter{ display:none !important; }
  #term-gcol-left,
  #term-gcol-right{ flex:none !important; border-right:none; }
  #term-gcol-left{ border-bottom:1px solid var(--line); }
  .term-gcol .term-pane{ flex:none !important; min-height:360px; }
  .term-pane .tv-chart-main{ min-height:420px !important; }
  .term-pane .mktw-list,
  .term-pane .news-list{ max-height:320px; }
}

/* ---------- terminal swipe navigation (mobile) ----------
   Below the tab strip, dots let a thumb see + jump between sections at a
   glance, and the panel itself takes a horizontal swipe (left = next tab,
   right = previous) instead of requiring a precise tap on the small tab
   label. Both are additive — the tab buttons above still work exactly as
   before, this just gives touch users a faster path to the same action. */
.term-swipe-dots{
  display:none;
  align-items:center; justify-content:center; gap:7px;
  padding:10px 0 2px;
}
@media (max-width:900px){
  .term-swipe-dots{ display:flex; }
}
.term-swipe-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--line); border:none; padding:0; cursor:pointer;
  transition:background .15s ease, transform .15s ease, width .15s ease;
}
.term-swipe-dot--active{ background:var(--signal); width:16px; border-radius:3px; }
.term-panel{ will-change:transform, opacity; }
.term-panel--swipe-in-left{ animation:term-panel-in-left .22s ease; }
.term-panel--swipe-in-right{ animation:term-panel-in-right .22s ease; }
@keyframes term-panel-in-left{ from{ transform:translateX(18px); opacity:.4; } to{ transform:translateX(0); opacity:1; } }
@keyframes term-panel-in-right{ from{ transform:translateX(-18px); opacity:.4; } to{ transform:translateX(0); opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .term-panel--swipe-in-left, .term-panel--swipe-in-right{ animation:none; }
}

.fsnap-sym-row{ display:flex; align-items:center; gap:8px; margin-bottom:2px; }
.fsnap-sym-badge{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:var(--signal-soft); color:var(--signal);
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.02em;
}
.fsnap-sym-name{ font-family:var(--font-mono); font-size:13.5px; color:var(--mute); }


/* ---------- quick calculators popover (trading terminal) ---------- */
.calc-quick{ position:relative; flex:none; }
.calc-quick-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--mute); font-family:var(--font-mono); font-size:12px;
  padding:7px 12px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.calc-quick-btn:hover, .calc-quick-btn[aria-expanded="true"]{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.calc-quick-btn svg{ display:block; flex:none; }
.calc-quick-btn--icon-only{ padding:7px 9px; }
@media (max-width:760px){
  .calc-quick-btn--icon-only{ min-width:36px; min-height:36px; justify-content:center; }
}
.calc-quick-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:120;
  width:700px; max-width:calc(100vw - 32px);
  max-height:calc(100vh - 120px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.calc-quick-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.calc-quick-panel__head{
  position:sticky; top:0; z-index:1;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--surface-header);
}
.calc-quick-panel__head h4{ font-size:14px; margin:0; }
.calc-quick-close{ background:none; border:none; color:var(--mute-dim); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
.calc-quick-close:hover{ color:var(--ink); }
.calc-quick-body{ padding:16px; }
/* Tighten up the tools.html calculator styles a bit for the popover context */
.calc-quick-body .calc-tabs{ margin-bottom:18px; gap:6px; }
.calc-quick-body .calc-tab{ padding:7px 12px; font-size:13px; }
.calc-quick-body .calc-form, .calc-quick-body .calc-result{ padding:18px; }
.calc-quick-footer{
  display:block; padding:12px 16px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11.5px; color:var(--mute); text-align:center; text-decoration:none;
}
.calc-quick-footer:hover{ color:var(--signal); }
@media (max-width:820px){
  .calc-quick-panel{ right:-8px; }
}
/* Mobile: the desktop dropdown pattern (absolute, anchored under the
   trigger button) clips off the left edge and runs past the bottom of
   the viewport on narrow screens. Below 600px it becomes a fullscreen
   bottom-sheet instead — same markup, same open/close JS (quick-calc.js
   already closes on any outside click, which now includes the backdrop
   below since it isn't part of the panel or the trigger button). */
.calc-quick-backdrop{ display:none; }
@media (max-width:600px){
  .calc-quick-panel{
    position:fixed; top:auto; left:0; right:0; bottom:0;
    width:100%; max-width:100%;
    max-height:88vh;
    border-radius:16px 16px 0 0;
    transform:translateY(100%);
  }
  .calc-quick-panel.open{ transform:translateY(0); }
  .calc-quick-panel.open ~ .calc-quick-backdrop{
    display:block; position:fixed; inset:0; z-index:119;
    background:rgba(0,0,0,.55);
  }
}

/* Groups several widget-card rows under one label inside the merged
   Markets tab, so the page still reads as organized sections even
   though everything now sits on one screen instead of behind tabs. */
.term-section{ margin-bottom:12px; }
.term-section:last-child{ margin-bottom:0; }
.term-section__title{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--mute-dim); margin:0 0 8px;
}

/* caps widget content height so a whole panel fits one screen; overflow scrolls inside the card, not the page */
.term-scroll{ max-height:400px; overflow-y:auto; }
@media (max-width:760px){ .term-scroll{ max-height:none; } }

/* ---------- terminal data tables (funding, open interest) ---------- */
.term-table-wrap{ overflow-x:auto; }
table.term-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:400px; }
table.term-table th, table.term-table td{ padding:8px 12px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.term-table thead th{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); }
table.term-table tbody tr:last-child td{ border-bottom:none; }
table.term-table td.num{ font-family:var(--font-mono); text-align:right; }
table.term-table th:not(:first-child){ text-align:right; }

/* small last-3-fundings trend dots next to the "Previous" column */
.funding-trend{ display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle; }
.funding-dot{ width:6px; height:6px; border-radius:50%; display:inline-block; opacity:.85; }
.funding-dot.pos{ background:var(--pulse); }
.funding-dot.neg{ background:var(--danger); }

/* tighter row spacing so Funding rates / Open interest always show every
   row without an inner scrollbar — these tables intentionally don't use
   .term-scroll at all, this class just keeps the rows dense. */
.term-table--compact{ max-height:none; overflow-y:visible; }
.term-table--compact table.term-table th, .term-table--compact table.term-table td{ padding:5px 12px; }

/* ---------- liquidations ticker ---------- */
/* This widget used to repeat the exact 15m/30m/1h/4h summary table shown in
   the "Liquidations" widget above it — pure redundancy. It's now a live
   scrolling ticker of individual fills instead: an infinite marquee of
   pill-shaped chips, aggr.trade-ticker style. Two back-to-back copies of the
   chip list are rendered and the track is animated exactly -50%, so the
   loop point is invisible (see liquidations.js). */
.liq-ticker{
  overflow:hidden; position:relative; border-radius:6px; padding:2px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
}
.liq-ticker__track{
  display:flex; align-items:center; gap:8px; width:max-content;
  will-change:transform; animation:liq-ticker-scroll linear infinite;
}
@keyframes liq-ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
/* Pause on hover/focus so someone can actually read a chip instead of
   chasing it across the screen. */
.liq-ticker:hover .liq-ticker__track,
.liq-ticker:focus-within .liq-ticker__track{ animation-play-state:paused; }
/* prefers-reduced-motion: liquidations.js renders a single (non-duplicated)
   copy and skips the animation entirely — this just makes that strip
   scrollable by hand instead of clipped. */
.liq-ticker--static{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
.liq-ticker--static .liq-ticker__track{ animation:none !important; }
.liq-ticker{ scrollbar-width:none; -ms-overflow-style:none; }
.liq-ticker::-webkit-scrollbar{ display:none; width:0; height:0; }

/* aggr.trade-style: each chip is a flat color pill (red = long liquidated /
   forced sell, green = short liquidated / forced buy) and bigger notional
   gets a bolder, brighter chip instead of extra text — size alone signals
   significance at a glance. */
.liq-chip{
  display:inline-flex; flex:none; align-items:center; gap:6px;
  padding:5px 10px; border-radius:999px; border:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:11.5px; white-space:nowrap;
}
.liq-chip--empty{ border:none; padding:6px 2px; color:var(--mute-dim); }
.liq-chip.liq-side--long{ background:rgba(255,77,77,.10); border-color:rgba(255,77,77,.25); }
.liq-chip.liq-side--short{ background:rgba(0,255,136,.10); border-color:rgba(0,255,136,.25); }
.liq-chip.liq-tier-2.liq-side--long{ background:rgba(255,77,77,.18); }
.liq-chip.liq-tier-2.liq-side--short{ background:rgba(0,255,136,.18); }
.liq-chip.liq-tier-3{ font-weight:700; }
.liq-chip.liq-tier-3.liq-side--long{ background:rgba(255,77,77,.30); }
.liq-chip.liq-tier-3.liq-side--short{ background:rgba(0,255,136,.30); }
.liq-chip.liq-tier-4{ font-weight:800; }
.liq-chip.liq-tier-4.liq-side--long{ background:rgba(255,77,77,.46); }
.liq-chip.liq-tier-4.liq-side--short{ background:rgba(0,255,136,.46); }
.liq-chip.liq-tier-4 .liq-chip__amt, .liq-chip.liq-tier-4 .liq-chip__price{ color:#fff; }

.liq-chip__icon{
  flex:none; width:15px; height:15px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800; color:#1a1a1a; line-height:1;
}
.liq-icon--binance{ background:#F0B90B; }
.liq-icon--bybit{ background:#FF7A1A; }
.liq-icon--okx{ background:#FFFFFF; }

.liq-chip__side{ flex:none; font-size:10.5px; }
.liq-chip.liq-side--long .liq-chip__side{ color:var(--danger); }
.liq-chip.liq-side--short .liq-chip__side{ color:var(--pulse); }

.liq-chip__sym{ font-weight:700; color:var(--mute); }
.liq-chip__price{ color:var(--ink); font-variant-numeric:tabular-nums; }
.liq-chip__amt{ font-weight:700; color:var(--ink); }
.liq-chip.liq-side--long .liq-chip__amt{ color:var(--danger); }
.liq-chip.liq-side--short .liq-chip__amt{ color:var(--pulse); }

.liq-ticker-card .widget-card__head h4{ display:flex; align-items:center; flex-wrap:wrap; }

/* keeps cards in this row at their own natural height instead of all
   stretching to match the tallest sibling, so a shorter/compact card
   doesn't end up with a big empty gap at the bottom */
.grid-3--top{ align-items:start; }

/* Crypto snapshot row: three equal glance cards (Fear & Greed, BTC
   dominance, funding snapshot) — the old 1.7fr "Market overview" TradingView
   tab-widget is gone, replaced by the full-width watchlist above the chart. */
.page-terminal .grid-snapshot{
  grid-template-columns: 1fr 1fr 1fr;
  align-items:stretch;
}
@media (max-width:900px){
  .page-terminal .grid-snapshot{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:600px){
  .page-terminal .grid-snapshot{ grid-template-columns: 1fr; }
}

/* Derivatives & positioning row: funding/OI table needs more width than the
   liquidations feed. Previously both cards sat in a 3-column grid with
   nothing in the third track, which left a lopsided empty gap. */
.term-grid-deriv{
  display:grid; grid-template-columns: 1.6fr 1fr; gap:16px; align-items:start;
}
@media (max-width:900px){ .term-grid-deriv{ grid-template-columns:1fr; } }
.widget-card--compact{ padding:10px 12px; }
.widget-card--compact .widget-card__head{ margin-bottom:6px; }
.widget-card--compact .tradingview-widget-container{ min-height:90px; }

/* ---------- liquidation heatmap ---------- */
.heatmap-controls{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:14px;
}
.heatmap-hint{ font-family:var(--font-mono); font-size:13px; color:var(--mute-dim); }
.widget-live-note{
  font-family:var(--font-mono); font-size:12.5px; line-height:1.5; color:var(--mute-dim);
  margin:-2px 0 12px;
}
.heatmap-empty-note{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:13.5px; line-height:1.5; color:var(--mute-dim);
  padding:16px; margin-bottom:10px;
  border:1px dashed var(--line); border-radius:8px; background:var(--void);
}
.heatmap-empty-note .dot{ flex:none; }
.heatmap-wrap{ overflow-x:auto; }
.heatmap-table{ display:flex; flex-direction:column; gap:3px; min-width:640px; }
.heatmap-row{ display:grid; grid-template-columns:110px repeat(21,1fr); gap:3px; align-items:center; }
.heatmap-row--head{ margin-bottom:2px; }
.heatmap-symbol{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; color:var(--ink);
  display:flex; flex-direction:column; line-height:1.3; padding-right:8px;
}
.heatmap-price{ font-size:12px; font-weight:400; color:var(--mute-dim); }
.heatmap-axis-label{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim); text-align:center;
  writing-mode:horizontal-tb;
}
.heatmap-axis-label--zero{ color:var(--signal); font-weight:600; }
.heatmap-cell{
  height:26px; border-radius:3px; background:var(--panel-hover);
  border:1px solid var(--line-soft);
  transition:background .25s ease;
}
.heatmap-cell--zero{ border-color:var(--signal-soft); border-width:1px; }
@media (max-width:560px){
  .heatmap-row{ grid-template-columns:76px repeat(21,1fr); }
  .heatmap-symbol{ font-size:12.5px; }
  .heatmap-cell{ height:20px; }
}

/* ---------- economic calendar event glossary (native <details>/<summary>) ---------- */
.event-glossary{ display:flex; flex-direction:column; gap:10px; }
.event-item{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  overflow:hidden;
}
.event-item summary{
  list-style:none; cursor:pointer; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--ink);
}
.event-item summary::-webkit-details-marker{ display:none; }
.event-item summary .ev-meta{ display:flex; align-items:center; gap:10px; }
.event-item summary .impact{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; font-weight:500;
}
.impact.high{ color:var(--danger); background:rgba(255,77,77,.12); }
.impact.medium{ color:var(--signal); background:var(--signal-soft); }
.event-item summary .chev{ color:var(--mute-dim); transition:transform .15s ease; flex-shrink:0; }
.event-item[open] summary .chev{ transform:rotate(180deg); }
.event-item .event-body{ padding:0 16px 16px; font-size:15px; color:var(--mute); line-height:1.55; }
.event-item .event-body p{ margin:0 0 .8em; }
.event-item .event-body p:last-child{ margin-bottom:0; }
.event-item .event-body b{ color:var(--ink); }

/* ---------- info toggle button + glossary dialog ---------- */
.info-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--mute);
  font-family:var(--font-mono); font-size:12.5px; line-height:1; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
  flex-shrink:0;
}
.info-btn:hover{ color:var(--signal); border-color:var(--signal); background:var(--signal-soft); }
@media (max-width:760px){
  .info-btn{ width:32px; height:32px; }
}

dialog.glossary-dialog{
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:0;
  width:min(560px, calc(100vw - 32px));
  max-height:min(640px, calc(100vh - 64px));
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
dialog.glossary-dialog::backdrop{ background:rgba(3,3,3,.72); }
.glossary-dialog__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line);
  background:var(--surface-header);
}
.glossary-dialog__head h4{ margin:0; font-size:15px; }
.glossary-dialog__close{
  background:none; border:1px solid var(--line); color:var(--mute);
  width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; line-height:1;
  flex-shrink:0;
}
.glossary-dialog__close:hover{ color:var(--signal); border-color:var(--signal); }
.glossary-dialog__body{ padding:16px 20px 20px; max-height:calc(min(640px, calc(100vh - 64px)) - 66px); overflow-y:auto; }
@media (max-width:560px){ .glossary-dialog__body .event-item summary{ padding:12px 14px; } }

/* ---------- per-widget info popover ("What is X →") ---------- */
.widget-info-pop{
  position:absolute; z-index:120; display:none;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:14px 16px; box-shadow:0 14px 40px rgba(0,0,0,.5);
}
.widget-info-pop.open{ display:block; }
.widget-info-pop__title{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:6px; }
.widget-info-pop__text{ margin:0 0 10px; font-size:14.5px; color:var(--mute); line-height:1.55; }
.widget-info-pop__link{ display:inline-block; font-size:14px; font-weight:600; color:var(--signal); text-decoration:none; }
.widget-info-pop__link:hover{ text-decoration:underline; }

/* ---------- economic calendar timezone selector ---------- */
.calendar-tz-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px;
  margin-bottom:14px;
}
.calendar-tz-row label{
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.05em; text-transform:uppercase;
  color:var(--mute-dim);
}
.calendar-tz-row select{
  background:var(--void); border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink); font-family:var(--font-body); font-size:13px; padding:7px 10px; cursor:pointer;
}
.calendar-tz-row select:focus{ border-color:var(--signal); outline:none; }
.calendar-tz-hint{ font-family:var(--font-mono); font-size:13px; color:var(--mute-dim); }

/* ---------- small "try the calculator" links inside terminal widgets ---------- */
.widget-cta{
  display:block; margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:12px; color:var(--signal); text-decoration:none;
}
.widget-cta:hover{ text-decoration:underline; }

/* ---------- guide comparison tables (spec-sheet style, visually separated from body text) ---------- */
.article .spec-table-wrap{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px;
  margin:24px 0;
  overflow-x:auto;
}
table.spec-table{ width:100%; border-collapse:collapse; min-width:480px; font-size:14px; }
table.spec-table th, table.spec-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line-soft); }
table.spec-table thead th{
  font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mute-dim); background:var(--panel-hover);
}
table.spec-table thead th:first-child{ border-top-left-radius:var(--radius-sm); }
table.spec-table thead th:last-child{ border-top-right-radius:var(--radius-sm); }
table.spec-table tbody th{
  font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--mute);
  white-space:nowrap; background:var(--panel-hover);
}
table.spec-table tbody td{ color:var(--ink); }
table.spec-table tbody tr:last-child th, table.spec-table tbody tr:last-child td{ border-bottom:none; }
table.spec-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.015); }

/* ---------- guide articles ---------- */
.article{
  max-width:74ch; margin:0 auto;
  padding:44px 24px 80px;
}
.article .meta-row{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin-bottom:22px;
}
.article h1{ font-size:clamp(26px,4vw,38px); line-height:1.15; margin-bottom:.35em; }
.article .lede{ font-size:16.5px; color:var(--mute); margin-bottom:8px; }
.article .tldr{
  background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--pulse);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:16px 18px; margin:28px 0;
}
.article .tldr b{ color:var(--pulse); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:8px; }
.article .tldr ul{ margin:0; padding-left:18px; }
.article .tldr li{ font-size:14px; color:var(--ink); margin-bottom:4px; }
.article h2{ font-size:21px; margin-top:2.2em; margin-bottom:.5em; }
.article h3{ font-size:16.5px; margin-top:1.7em; margin-bottom:.5em; }
.article p{ font-size:15.5px; color:var(--mute); margin-bottom:1.1em; }
.article ul, .article ol{ color:var(--mute); font-size:15.5px; padding-left:22px; margin-bottom:1.2em; }
.article li{ margin-bottom:.5em; }
.article strong{ color:var(--ink); }
.article a:not(.btn):not(.back-link):not(.next-guide-link){ color:var(--signal); border-bottom:1px solid var(--signal-soft); }
.article a:not(.btn):not(.back-link):not(.next-guide-link):hover{ border-color:var(--signal); }
.article .inline-cta{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin:28px 0;
}
.article .inline-cta p{ margin:0; font-size:14px; color:var(--ink); }
.article .guide-diagram{
  margin:22px 0 30px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); padding:18px 18px 14px;
}
.article .guide-diagram svg{ display:block; width:100%; height:auto; }
.article .guide-diagram figcaption{
  margin-top:12px; font-size:12px; color:var(--mute-dim); text-align:center; line-height:1.5;
}
.article .mistake{
  background:rgba(255,77,77,.06); border:1px solid rgba(255,77,77,.25);
  border-radius:var(--radius-sm); padding:14px 16px; margin-bottom:12px;
}
.article .mistake b{ color:var(--danger); font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:4px; }
.article .mistake p{ margin:0; font-size:14px; }
.guide-related{ margin-top:48px; padding-top:26px; border-top:1px solid var(--line); }
.guide-related h3{
  font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.07em; color:var(--mute-dim); margin:0 0 14px;
}
.guide-related-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px; }
.article a.guide-related-link{
  display:block; border:1px solid var(--line); border-bottom:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--panel);
  padding:14px 16px; transition:border-color .15s ease, background .15s ease;
}
.article a.guide-related-link:hover{ border-color:var(--signal-soft); background:var(--panel-hover); }
.guide-related-link .grl-title{ display:block; font-size:13.5px; color:var(--ink); font-weight:600; margin-bottom:4px; }
.guide-related-link .grl-desc{ display:block; font-size:12px; color:var(--mute-dim); line-height:1.4; }
.article a.guide-related-link.is-tool{ border-color:var(--signal-soft); }
.article a.guide-related-link.is-tool:hover{ border-color:var(--signal); background:var(--panel-hover); }
.guide-related-link .grl-tag{
  display:flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; color:var(--signal); margin-bottom:6px;
}
.guide-related-link .grl-tag::before{ content:"⌁"; font-size:11px; }
.guide-nav{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:52px; padding-top:24px; border-top:1px solid var(--line);
}
.guide-nav a{ font-family:var(--font-mono); font-size:12.5px; color:var(--mute); display:flex; align-items:center; gap:8px; }
.guide-nav a:hover{ color:var(--signal); }
@media (max-width:560px){ .article{ padding:32px 20px 60px; } }
.site-footer{
  border-top:1px solid var(--line);
  margin-top:40px;
  padding:44px 24px 32px;
}
.footer-grid{
  max-width:var(--maxw); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:32px;
}
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-grid h5{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mute-dim); margin:0 0 14px; }
.footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-grid a{ color:var(--mute); font-size:13.5px; }
.footer-grid a:hover{ color:var(--signal); }
.footer-bottom{
  max-width:var(--maxw); margin:36px auto 0;
  padding-top:20px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--font-mono); font-size:11.5px; color:var(--mute-dim);
}

/* mini footer: a single lean strip — © year plus the core site links,
   nothing else. Roughly 30% shorter than the old compact footer (which
   carried a logo, a second legal nav row and a disclaimer line) since
   that's plenty for a utility footer that isn't the primary nav. */
.site-footer--mini{ padding:16px 24px 14px; }
.footer-mini{
  max-width:var(--maxw); margin:0 auto;
  display:flex; align-items:center; flex-wrap:wrap; gap:8px 24px;
  font-family:var(--font-mono); font-size:11.5px;
}
.footer-mini-copy{ color:var(--mute-dim); flex-shrink:0; }
.footer-mini-links{ display:flex; flex-wrap:wrap; gap:4px 16px; }
.footer-mini-links a{ color:var(--mute); }
.footer-mini-links a:hover{ color:var(--signal); }

/* ---------- terminal page: tighter data note + footer ----------
   The terminal is already dense, so on this page the data-note callout
   drops its padded/colored box for a thin rule-bordered strip, and the
   footer's margins/padding are trimmed further than the site-wide
   compact footer — together saving roughly 120px of vertical space.
   Scoped to .page-terminal (body class on trading.html only) so every
   other page keeps the regular callout box and footer sizing. */
.page-terminal #term-data-note{
  border:none;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  border-radius:0;
  background:transparent;
  margin:14px 0;
  padding:10px 0;
  font-size:12px;
}
.page-terminal .site-footer--mini{ margin-top:20px; padding:12px 24px 10px; }

/* mobile nav */
@media (max-width:760px){
  .nav-links{
    position:fixed; top:var(--site-header-h, 60px); left:0; right:0; bottom:0;
    background:var(--void);
    flex-direction:column; gap:0;
    padding:8px 24px;
    transform:translateY(-8px);
    opacity:0; pointer-events:none;
    transition:opacity .15s ease, transform .15s ease;
    z-index:49; /* just under .site-header (z-index:50) so it tucks in flush below it, not over it */
    overflow-y:auto;
  }
  .nav-links.open{ opacity:1; pointer-events:auto; transform:translateY(0); }
  .nav-links li{ border-bottom:1px solid var(--line-soft); }
  .nav-links a{ display:block; padding:16px 0; }
  .nav-toggle{ display:inline-flex; }
}

/* ---------- site-wide search ---------- */
.nav-right{ display:flex; align-items:center; gap:14px; }
.nav-search-btn{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--mute-dim); padding:7px 10px; cursor:pointer; flex:none;
  font-family:var(--font-mono); font-size:11.5px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-search-btn:hover{ color:var(--ink); border-color:var(--signal-soft); background:var(--panel-hover); }
.nav-search-btn kbd{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
@media (max-width:560px){ .nav-search-btn kbd{ display:none; } .nav-search-btn span.nsb-label{ display:none; } }

.search-overlay{
  position:fixed; inset:0; z-index:950;
  background:rgba(3,3,3,0.78); backdrop-filter:blur(4px);
  display:none; align-items:flex-start; justify-content:center;
  padding:11vh 20px 20px;
}
.search-overlay.open{ display:flex; }
.search-panel{
  width:100%; max-width:580px; max-height:72vh;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:flex; flex-direction:column; overflow:hidden;
}
.search-panel__input-row{
  display:flex; align-items:center; gap:10px;
  padding:14px 16px; border-bottom:1px solid var(--line); flex:none;
}
.search-panel__input-row svg{ color:var(--mute-dim); flex:none; }
.search-panel__input-row input{
  flex:1; min-width:0; background:none; border:none; outline:none;
  color:var(--ink); font-family:var(--font-mono); font-size:14.5px;
}
.search-panel__input-row input::placeholder{ color:var(--mute-dim); }
.search-panel__esc{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
  border:1px solid var(--line); border-radius:4px; padding:2px 6px; flex:none;
}
.search-results{ overflow-y:auto; padding:8px; }
.search-result{
  display:flex; flex-direction:column; gap:2px;
  padding:10px 12px; border-radius:8px; cursor:pointer;
}
.search-result:hover, .search-result.active{ background:var(--panel-hover); }
.search-result__top{ display:flex; align-items:center; gap:8px; }
.search-result__title{ font-size:13.5px; color:var(--ink); }
.search-result__cat{
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--signal); border:1px solid var(--signal-soft);
  border-radius:4px; padding:1px 5px; flex:none;
}
.search-result__desc{ font-size:12px; color:var(--mute-dim); line-height:1.4; }
.search-empty{ padding:30px 16px; text-align:center; color:var(--mute-dim); font-size:13px; font-family:var(--font-mono); }
.search-hint{ padding:10px 16px; border-top:1px solid var(--line); flex:none; display:flex; gap:16px; font-family:var(--font-mono); font-size:11px; color:var(--mute-dim); }
.search-hint kbd{ border:1px solid var(--line); border-radius:4px; padding:1px 5px; margin-right:5px; }

/* ---------- watchlist ---------- */
.nav-watchlist-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line); border-radius:8px;
  color:var(--mute-dim); width:32px; height:32px; cursor:pointer; flex:none;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.nav-watchlist-btn:hover, .nav-watchlist-btn[aria-expanded="true"]{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.nav-watchlist-btn svg{ display:block; }
.watchlist-badge{
  position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 3px;
  background:var(--signal); color:var(--void); border-radius:8px;
  font-family:var(--font-mono); font-size:10px; font-weight:600; line-height:16px; text-align:center;
}
.watchlist-panel{
  position:fixed; top:66px; right:16px; z-index:220; width:340px; max-width:calc(100vw - 32px);
  max-height:calc(100vh - 90px); overflow-y:auto;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  opacity:0; transform:translateY(-6px); pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.watchlist-panel.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.watchlist-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px; border-bottom:1px solid var(--line);
  background:var(--surface-header);
}
.watchlist-panel__head h4{ font-size:14px; margin:0; }
.watchlist-close{ background:none; border:none; color:var(--mute-dim); font-size:18px; cursor:pointer; line-height:1; padding:2px 4px; }
.watchlist-close:hover{ color:var(--ink); }
.watchlist-list{ padding:6px 8px; }
.watchlist-empty-hint{ font-size:12.5px; color:var(--mute-dim); line-height:1.5; padding:14px 10px; }
.watchlist-row{
  padding:10px 10px; border-radius:8px; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.watchlist-row:hover{ background:var(--panel-hover); }
.watchlist-row__main{ display:flex; flex-direction:column; min-width:52px; }
.watchlist-sym{ font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:600; }
.watchlist-name{ font-size:10.5px; color:var(--mute-dim); }
.watchlist-row__price{ display:flex; flex-direction:column; align-items:flex-end; margin-left:auto; }
.watchlist-price{ font-family:var(--font-mono); font-size:13px; color:var(--ink); }
.watchlist-change{ font-family:var(--font-mono); font-size:11px; }
.watchlist-change.up{ color:var(--pulse); }
.watchlist-change.down{ color:var(--danger); }
.watchlist-row__actions{ display:flex; align-items:center; gap:4px; flex:none; }
.watchlist-remove-btn{
  background:none; border:1px solid var(--line); border-radius:7px; color:var(--mute-dim);
  width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:15px;
}
.watchlist-remove-btn:hover{ color:var(--ink); border-color:var(--signal-soft); }
.watchlist-add{ padding:10px 16px 14px; border-top:1px solid var(--line); }
.watchlist-add-label{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); margin:0 0 8px; }
.watchlist-chips{ display:flex; flex-wrap:wrap; gap:6px; }
.watchlist-chip{
  background:none; border:1px solid var(--line); border-radius:16px; color:var(--mute);
  padding:5px 10px; font-family:var(--font-mono); font-size:11.5px; cursor:pointer;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.watchlist-chip:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.watchlist-footer-link{
  display:block; padding:12px 16px; border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:11.5px; color:var(--mute); text-align:center;
}
.watchlist-footer-link:hover{ color:var(--signal); }
@media (max-width:560px){ .watchlist-panel{ right:8px; left:8px; width:auto; } }
@media (max-width:560px){ .search-overlay{ padding:0; } .search-panel{ max-width:none; max-height:100vh; height:100vh; border-radius:0; border:none; } }

/* ===== Freshness system: recently-updated module (homepage) ===== */
.recent-updates{ margin-top:56px; padding-top:28px; border-top:1px solid var(--line); }
.recent-updates h2{ font-size:15px; text-transform:uppercase; letter-spacing:.06em; color:var(--mute-dim); margin-bottom:16px; }
.recent-updates-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:12px; }
a.recent-updates-link{ display:block; padding:14px 16px; border:1px solid var(--line); border-radius:10px; text-decoration:none; transition:border-color .15s ease, background .15s ease; }
a.recent-updates-link:hover{ border-color:var(--signal-soft); background:var(--panel-hover); }
.recent-updates-link .rul-title{ display:block; font-size:13.5px; color:var(--ink); font-weight:600; margin-bottom:4px; }
.recent-updates-link .rul-date{ display:block; font-size:12px; color:var(--mute-dim); }

/* =========================================================
   Trading Terminal redesign — live market-watch table, chart
   hero ticker, and compact stat cards. Namespaced "mktw-" /
   "hero-" / "fsnap-" to avoid clashing with the header's
   personal-pin ".watchlist-*" panel (a separate feature).
   ========================================================= */

/* tabular numerals everywhere inside the terminal so price columns
   don't jitter horizontally as digits change on live updates */
.page-terminal .term-panel{ font-variant-numeric: tabular-nums; }

/* thin accent rule on the left of every widget head — a small nod to
   the vertical "market depth" bars on Bybit/Binance without copying
   their chrome outright */
.widget-card__head{ position:relative; padding-left:calc(var(--card-pad-x) - 4px); }
.widget-card__head::before{
  content:''; position:absolute; left:0; top:1px; bottom:3px; width:3px;
  border-radius:2px; background:var(--signal); opacity:.85;
}
.widget-card--compact .widget-card__head::before{ left:0; }

/* ---------- market-watch list (replaces the old blank TradingView
   "Market overview" tab widget with real, guaranteed-to-render data).
   Built as a flex list rather than a <table>: the symbol side can
   shrink and truncate with an ellipsis while the price/change side
   stays fixed-width, so the row content always fits its column and
   the rail never needs a horizontal scrollbar. ---------- */
.mktw-head-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:0 6px 8px; margin-bottom:2px; border-bottom:1px solid var(--line);
}
.mktw-sort-btn{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--mute-dim); white-space:nowrap;
}
.mktw-sort-btn--right{ margin-left:auto; }
.mktw-sort-btn:hover{ color:var(--ink); }
.mktw-sort-btn.mktw-sort-active{ color:var(--signal); }
.mktw-sort-arrow{ display:inline-block; opacity:.7; }
.mktw-list{ list-style:none; margin:0; padding:0; }
.mktw-row{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  cursor:pointer; transition:background .12s ease;
  padding:8px 6px; border-bottom:1px solid var(--line-soft);
  min-width:0;
}
.mktw-row:last-child{ border-bottom:none; }
.mktw-row:hover{ background:var(--panel-hover); }
.mktw-row.on{ background:var(--signal-soft); }
.mktw-sym-cell{ display:flex; align-items:center; gap:8px; min-width:0; flex:1 1 auto; overflow:hidden; }
.mktw-sym-badge{
  width:26px; height:26px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9.5px; font-weight:700;
  background:var(--panel-hover); border:1px solid var(--line); color:var(--mute);
}
.mktw-sym-text{ min-width:0; overflow:hidden; }
.mktw-sym-name{ display:block; font-family:var(--font-mono); font-weight:600; color:var(--ink); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mktw-sym-pair{ display:block; font-size:10px; color:var(--mute-dim); font-weight:400; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mktw-quote{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; flex:none; white-space:nowrap; }
.mktw-price{ font-family:var(--font-mono); color:var(--ink); font-weight:500; font-size:13px; }
.mktw-change{ font-family:var(--font-mono); font-weight:600; font-size:11.5px; }
.mktw-change.pos{ color:var(--pulse); }
.mktw-change.neg{ color:var(--danger); }
.mktw-loading-row{ text-align:center; color:var(--mute-dim); font-family:var(--font-mono); font-size:12.5px; padding:20px 4px; list-style:none; }
@media (max-width:760px){
  .mktw-sym-badge{ width:22px; height:22px; }
}

/* ---------- chart hero ticker: big live price + 24h stats, synced to
   whichever symbol is selected in the market-watch table / chart tabs ---------- */
.chart-hero{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 13px;
  padding:12px 2px 16px; margin-bottom:2px; border-bottom:1px solid var(--line-soft);
}
.chart-hero__pair{ display:flex; align-items:baseline; gap:9px; flex:none; }
.chart-hero__sym{ font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); }
.chart-hero__exch{ font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.04em; }
.chart-hero__price-row{ display:flex; align-items:baseline; gap:8px; flex:none; }
.chart-hero__price{ font-family:var(--font-mono); font-weight:600; font-size:20px; color:var(--ink); flex:none; }
.chart-hero__change{
  font-family:var(--font-mono); font-weight:600; font-size:12px; flex:none;
  padding:3px 6px; border-radius:5px; line-height:1;
}
.chart-hero__change.pos{ color:var(--pulse); background:rgba(0,255,136,0.12); }
.chart-hero__change.neg{ color:var(--danger); background:rgba(255,77,77,0.12); }
.chart-hero__divider{
  width:1px; align-self:stretch; min-height:28px; background:var(--line-soft); flex:none;
}
.chart-hero__stats{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; }
.chart-hero__stat{ display:flex; flex-direction:column; gap:2px; }
.chart-hero__stat span{ font-family:var(--font-mono); font-size:9px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.06em; }
.chart-hero__stat b{ font-family:var(--font-mono); font-size:12px; color:var(--ink); font-weight:500; }
@media (min-width:1650px){
  .chart-hero{ gap:8px 22px; }
  .chart-hero__price{ font-size:24px; }
  .chart-hero__change{ font-size:13px; padding:4px 8px; }
  .chart-hero__stats{ gap:4px 22px; }
  .chart-hero__stat span{ font-size:9.5px; }
  .chart-hero__stat b{ font-size:12.5px; }
}
@media (max-width:640px){
  .chart-hero__stats{ gap:8px 16px; }
  .chart-hero__price{ font-size:20px; }
  .chart-hero__divider{ display:none; }
}

/* ---------- funding snapshot glance card (3rd card in the stats row) ---------- */
.fsnap-body{ display:flex; flex-direction:column; flex:1; justify-content:center; gap:10px; padding:2px 0; }
.fsnap-avg-row{ display:flex; align-items:baseline; gap:8px; }
.fsnap-avg-value{ font-family:var(--font-mono); font-weight:700; font-size:22px; }
.fsnap-avg-label{ font-family:var(--font-mono); font-size:13.5px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.05em; }
.fsnap-split{ display:flex; gap:1px; height:5px; border-radius:3px; overflow:hidden; }
.fsnap-split i{ display:block; }
.fsnap-split i.pos{ background:var(--pulse); }
.fsnap-split i.neg{ background:var(--danger); }
.fsnap-extremes{ display:flex; flex-direction:column; gap:5px; font-size:13.5px; }
.fsnap-extremes div{ display:flex; justify-content:space-between; gap:8px; }
.fsnap-extremes span:first-child{ color:var(--mute); }
.fsnap-extremes span:last-child{ font-family:var(--font-mono); font-weight:600; }

/* keeps the three glance cards (F&G / dominance / funding snapshot) the
   same height and their bodies vertically centered instead of top-aligned */
.grid-snapshot .widget-card{ height:100%; }
.grid-snapshot .widget-card__body{ flex:1; justify-content:center; }

/* =========================================================
   Immersive Terminal Mode — full-viewport trading terminal.
   Header, footer and page breadcrumbs are hidden; the terminal
   section becomes a fixed full-screen layer with its own scroll,
   and a small floating button in the top-left replaces site nav.
   Scoped entirely under body.term-immersive so nothing here
   touches the normal terminal layout. Preference persisted in
   localStorage ('th-terminal-immersive').
   ========================================================= */

/* ---- entering immersive mode: hide site chrome, expand terminal ---- */
body.term-immersive{ overflow:hidden; }

/* ---------- Settings modal scroll lock (see trade-tape.js openFilterPanel/closeFilterPanel) ---------- */
/* overflow:hidden disables scrolling outright. paddingRight (set inline by
   lockPageScroll) offsets the vertical scrollbar's width disappearing so
   the page doesn't reflow wider the instant this class is added. */
body.th-settings-scroll-lock{ overflow:hidden; }
/* Additionally pin body to its exact scroll offset at every width, because
   iOS Safari in particular keeps scrolling page content under a
   `position:fixed` sheet even with overflow:hidden set, and the Settings
   panel is now that same fixed, centered modal on every screen size. */
body.th-settings-scroll-lock--fixed{ position:fixed; left:0; right:0; }
body.term-immersive .site-header,
body.term-immersive .site-footer,
body.term-immersive #term-data-note{
  display:none !important;
}
body.term-immersive #terminal-shell{
  position:fixed; inset:0; z-index:900;
  width:100vw; height:100vh; max-width:none;
  margin:0; padding:10px 14px 10px;
  overflow:hidden;
  background:var(--void);
  display:flex; flex-direction:column;
}
/* one screen, zero page scroll: toolbar + tabs shrink to their content,
   the active panel claims all remaining height. The trade tape and
   sidebar scroll internally (like any real terminal), the page itself
   never does. */
/* one screen, zero page scroll: the tabs/calc row shrinks to its content,
   the active panel claims all remaining height. The trade tape and
   sidebar scroll internally (like any real terminal), the page itself
   never does. Only the tab buttons hide here — the calculators icon
   lives in this same row now, and still needs to be reachable. */
body.term-immersive .term-tabs{ flex:none; padding-bottom:6px; border-bottom:none; justify-content:flex-end; }
body.term-immersive .term-tabs__list{ display:none; }
body.term-immersive .term-panel{ flex:1; min-height:0; }
body.term-immersive .term-panel[hidden]{ display:none !important; }
body.term-immersive .term-panel[data-term-panel="crypto"]{ display:flex !important; flex-direction:column; overflow:hidden; }
body.term-immersive .term-panel[data-term-panel="macro"]{ display:none !important; }
body.term-immersive .term-bleed{ flex:1; min-height:0; display:flex; }
body.term-immersive #crypto-tape-root{ flex:1; min-height:0; display:flex; width:100%; }
body.term-immersive #crypto-tape-root .live-term{ flex:1; min-height:0; height:100%; }
body.term-immersive #crypto-tape-root .live-term__main{ height:100%; }
body.term-immersive #crypto-tape-root .live-term__side{ max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:980px){
  /* below the breakpoint the tape/sidebar stack vertically anyway — let
     that stack scroll as a unit instead of fighting it for height. */
  body.term-immersive .term-panel[data-term-panel="crypto"]{ overflow-y:auto; }
  body.term-immersive #crypto-tape-root .live-term{ height:auto; }
  body.term-immersive #crypto-tape-root .live-term__side{ max-height:none; overflow-y:visible; }
}
@media (max-width:560px){
  body.term-immersive #terminal-shell{ padding:52px 12px 10px; }
}

/* ---- floating nav replacement (fab + slide-down menu) ----
   Docked bottom-right during normal browsing (out of the way of the header/
   nav) so it doubles as the "Enter Terminal" control; once immersive mode
   hides the header it moves to top-left, its original position. On the
   trading page the sidebar's Watchlist card lives in that same bottom-right
   corner once the page is scrolled far enough (longer watchlists especially),
   so trading.js checks for that overlap and adds --avoid-watchlist below,
   which nudges the fab to the clear bottom-left corner instead.
   Kept deliberately low-key (small, semi-transparent, fades further when
   idle) so it reads as a corner utility rather than a competing element —
   opacity is the only thing that ever changes here, never display/pointer-
   events, so it's reachable by mouse, touch or keyboard at all times. */
.term-immersive-nav{
  display:block; position:fixed; bottom:16px; right:16px; z-index:1000;
  transition:right .2s ease, left .2s ease, opacity .2s ease;
}
.term-immersive-nav--avoid-watchlist{ right:auto; left:16px; }
body.term-immersive .term-immersive-nav{
  top:16px; left:16px; bottom:auto; right:auto;
}
.term-immersive-fab{
  display:inline-flex; align-items:center; gap:5px;
  background:rgba(11,11,11,0.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:8px;
  color:var(--ink);
  padding:6px 8px; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:.5;
  transition:opacity .25s ease, border-color .15s ease, color .15s ease;
}
.term-immersive-fab:hover, .term-immersive-fab:focus-visible, .term-immersive-fab[aria-expanded="true"]{
  opacity:1; color:var(--signal); border-color:var(--signal-soft);
}
.term-immersive-nav:focus-within .term-immersive-fab{ opacity:1; }
/* auto-fade after a stretch of inactivity (see immersive-mode.js); never
   applied while the menu is open so it can't fade out from under a click */
.term-immersive-nav--idle:not(.open) .term-immersive-fab{ opacity:.3; }
.term-immersive-fab__mark{ display:inline-flex; align-items:center; color:var(--signal); }
.term-immersive-fab svg{ flex:none; }
.term-immersive-fab > svg{ transition:transform .15s ease; }
.term-immersive-fab[aria-expanded="true"] > svg{ transform:rotate(180deg); }
@media (max-width:640px){
  .term-immersive-nav{
    bottom:calc(12px + env(safe-area-inset-bottom, 0px)); right:12px;
  }
  .term-immersive-nav--avoid-watchlist{ right:auto; left:12px; }
  .term-immersive-fab{ padding:5px 7px; border-radius:7px; }
}

.term-immersive-menu{
  position:absolute; bottom:calc(100% + 8px); right:0; left:auto; z-index:1001;
  min-width:200px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  padding:6px;
  display:flex; flex-direction:column;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
}
body.term-immersive .term-immersive-menu{
  top:calc(100% + 8px); bottom:auto; left:0; right:auto;
  transform:translateY(-6px);
}
.term-immersive-nav.open .term-immersive-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }
.term-immersive-nav--avoid-watchlist .term-immersive-menu{ right:auto; left:0; }

.term-immersive-menu__brand{
  font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--ink);
  padding:9px 10px; border-bottom:1px solid var(--line-soft); margin-bottom:4px;
}
.term-immersive-menu__brand span{ color:var(--signal); }
.term-immersive-menu__item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; text-align:left;
  background:none; border:none; border-radius:6px;
  color:var(--mute); font-family:var(--font-mono); font-size:13px;
  padding:9px 10px; cursor:pointer;
  transition:color .12s ease, background .12s ease;
}
.term-immersive-menu__item kbd{
  font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim);
  border:1px solid var(--line); border-radius:4px; padding:1px 5px;
}
.term-immersive-menu__item:hover{ color:var(--ink); background:var(--panel-hover); }
.term-immersive-menu__toggle{ margin-top:4px; border-top:1px solid var(--line-soft); border-radius:0 0 6px 6px; padding-top:11px; }
.term-immersive-menu__toggle--exit{ color:var(--danger); }
.term-immersive-menu__toggle--exit:hover{ color:var(--danger); background:rgba(255,77,77,0.1); }

/* =========================================================
   Terminal density pass — Aggr.trade / Bloomberg-style tightening
   Scoped to #terminal-shell (the actual terminal tool: toolbar,
   tabs, widget grids, tiling pane canvas) plus the two popovers
   that render at document.body level but belong to the terminal
   (quick-calc results, widget info popover). Nothing outside the
   terminal — header, footer, hub, guides, tools page — is touched,
   and no markup, IDs, classes, or JS hooks are changed, so all
   existing behavior (tab switching, pane dragging, calculators,
   watchlist, immersive mode) keeps working exactly as before.
   ========================================================= */

/* -- typography: IBM Plex Mono everywhere inside the terminal --
   specificity of "#terminal-shell *" beats bare element selectors
   like h1-h4 (which otherwise pull in the display font), so this
   holds even for headings, labels and buttons without needing
   !important anywhere. */
#terminal-shell,
#terminal-shell *,
.widget-info-pop,
.widget-info-pop *{
  font-family: var(--font-mono);
}

/* -- the terminal's own palette/radius tokens now match :root exactly
   (promoted site-wide above), so nothing to retarget here anymore —
   kept as a no-op hook in case a future theme needs to diverge again. */
#terminal-shell{
  background:var(--void);
}

/* -- Settings → Theme: Light. Same variable-driven approach as the dark
   "Bloomberg" override above, just flipped to a light surface, so every
   terminal-scoped rule that already reads var(--panel)/var(--ink)/etc.
   repaints for free without a second stylesheet. */
#terminal-shell.theme-light{
  --void:        #F4F5F6;
  --panel:       #FFFFFF;
  --panel-hover: #F0F1F3;
  --line:        #DEE1E4;
  --line-soft:   #EBEDEF;
  --ink:         #14161A;
  --mute:        #5B6067;
  --mute-dim:    #8B9099;
  --signal:      #B5790F;
  --signal-soft: rgba(181,121,15,0.12);
  --pulse:       #0F8F63;
  --pulse-soft:  rgba(15,143,99,0.12);
  --danger:      #C93338;
}
#terminal-shell.theme-light .asset-pill--active{ color:#FFFFFF; }

/* -- Settings → Compact mode: tightens the same spacing the terminal
   density pass above already tuned, one notch further. */
#terminal-shell.th-settings-compact .widget-card__body{ padding:8px 10px; }
#terminal-shell.th-settings-compact .widget-card__head{ padding:6px 10px; }
#terminal-shell.th-settings-compact .mstat-row{ padding:3px 0; }
#terminal-shell.th-settings-compact .tape-toolbar{ padding:4px 8px; gap:6px; }
#terminal-shell.th-settings-compact .asset-select{ padding:4px 8px; }
#terminal-shell.th-settings-compact .exch-select{ padding:3px 8px; }
#terminal-shell.th-settings-compact .tape-row{ padding-top:2px; padding-bottom:2px; }

/* -- Settings → Show animations (off): kills transitions/animations across
   the terminal without touching layout, same scoping pattern as above. */
#terminal-shell.th-settings-no-animations,
#terminal-shell.th-settings-no-animations *{
  transition-duration:0s !important;
  animation-duration:0s !important;
  animation-delay:0s !important;
}
.widget-info-pop{ border-radius:0; }

/* -- flat, card-free surfaces: bottom-border sections instead of boxed
   cards, tighter uppercase headings, no drop shadows or rounded corners.
   Scoped to #terminal-shell only — every other page keeps the original
   rounded widget-card look. -- */
#terminal-shell .widget-card{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  border-radius:0;
}
#terminal-shell .widget-card__head h4{
  font-size:11.5px; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--mute);
}
#terminal-shell .tv-watchdog{ border-radius:0; background:var(--panel); }
#terminal-shell, #terminal-shell *{ border-radius:0 !important; }
#terminal-shell .dot,
#terminal-shell .funding-dot,
#terminal-shell .term-identity-bar__dot{ border-radius:50% !important; }

/* -- padding: ~25% tighter across every terminal surface -- */
#terminal-shell .widget-card{ --card-pad-y:10px; --card-pad-x:10px; --card-head-gap:7px; padding:10px; }
#terminal-shell .widget-card__head{ margin-bottom:7px; }
#terminal-shell .widget-card--compact{ padding:7px 9px; }
#terminal-shell .widget-card--compact .widget-card__head{ margin-bottom:4px; }
#terminal-shell .tv-watchdog{ padding:13px; }

#terminal-shell .page-head{ padding-top:18px; padding-bottom:8px; }
.page-terminal .section{ padding:26px 18px 15px; }
.page-terminal .term-tabs{ margin:8px 0 10px; }
.page-terminal .grid-2,
.page-terminal .grid-3{ gap:9px; }

#terminal-shell .term-tabs{ padding-bottom:10px; margin-top:12px; }
#terminal-shell .term-tabs__list{ gap:4px; }
#terminal-shell .term-tab{ padding:7px 3px; }
#terminal-shell .term-tab + .term-tab{ margin-left:10px; }

#terminal-shell .term-panel.term-2col{ gap:10px; margin-top:12px; }
#terminal-shell .term-col{ gap:9px; }
#terminal-shell .term-section{ margin-bottom:9px; }

#terminal-shell .term-winbar{ padding:5px 12px; }
#terminal-shell .term-winbar__chip{ padding:2px 7px 2px 5px; }
#terminal-shell .term-pane__head{ padding:4px 6px 4px 9px; }
#terminal-shell .term-pane__body{ padding:7px 9px; }

#terminal-shell .calc-quick-btn{ padding:5px 9px; border-radius:3px; }
#terminal-shell .calc-quick-panel__head{ padding:10px 12px; }
#terminal-shell .calc-quick-body{ padding:12px; }
#terminal-shell .calc-quick-body .calc-tabs{ margin-bottom:13px; }
#terminal-shell .calc-quick-body .calc-form,
#terminal-shell .calc-quick-body .calc-result{ padding:13px; }
#terminal-shell .calc-quick-footer{ padding:9px 12px; }

#terminal-shell table.term-table th,
#terminal-shell table.term-table td{ padding:6px 9px; }
#terminal-shell .term-table--compact table.term-table th,
#terminal-shell .term-table--compact table.term-table td{ padding:4px 9px; }

#terminal-shell .liq-chip{ padding:4px 8px; gap:5px; }

#terminal-shell .news-item a,
#terminal-shell .news-item.news-fallback{ padding:8px 3px; }
#terminal-shell .news-skeleton,
#terminal-shell .mktw-loading-row{ padding:15px 3px; }

#terminal-shell .mktw-head-row{ padding:0 4px 6px; }
#terminal-shell .mktw-row{ padding:6px 4px; }

#terminal-shell .term-grid-deriv{ gap:12px; }
#terminal-shell .heatmap-controls{ gap:8px; margin-bottom:10px; }
#terminal-shell .heatmap-empty-note{ padding:12px; margin-bottom:8px; border-radius:3px; }
#terminal-shell .heatmap-cell{ border-radius:2px; }

#terminal-shell .event-item{ border-radius:3px; }
#terminal-shell .event-item summary{ padding:10px 12px; }
#terminal-shell .event-item .event-body{ padding:0 12px 12px; }
#terminal-shell dialog.glossary-dialog{ border-radius:5px; }
#terminal-shell .glossary-dialog__head{ padding:13px 15px; }
#terminal-shell .glossary-dialog__body{ padding:12px 15px 15px; }

.widget-info-pop{ padding:10px 12px; }

#terminal-shell .chart-hero{ padding:9px 2px 12px; }
#terminal-shell .chart-sym-tabs{ gap:4px; }
#terminal-shell .chart-sym-btn{ padding:5px 10px; border-radius:3px; }
#terminal-shell .chart-hint{ margin:7px 2px 0; }


@media (max-width:560px){
  body.term-immersive #terminal-shell{ padding:48px 9px 8px; }
}

/* =========================================================
   Vertical density pass v2 — Live Chart, Order Flow,
   Liquidations, Market Pulse, Order Flow Score, Whale Tracker,
   Market Overview, Statistics.
   Builds on the density pass above: shaves the remaining chrome
   (card padding, header spacing, internal gaps) that isn't
   actual data, while leaving font sizes, row structure, table
   columns and every breakpoint untouched so nothing is lost and
   nothing reflows differently. Desktop gets the tightest values;
   the max-width:980px block below restores a bit of breathing
   room for touch targets on mobile, same as the layout already
   did before this pass.
   ========================================================= */

/* -- shared widget-card shell (affects all 8 sections' outer chrome) -- */
#terminal-shell .widget-card{ --card-pad-y:7px; --card-pad-x:10px; --card-head-gap:4px; padding:7px 10px; }
#terminal-shell .widget-card__head{ margin-bottom:4px; }
#terminal-shell .widget-card--compact{ padding:6px 8px; }
#terminal-shell .widget-card--compact .widget-card__head{ margin-bottom:3px; }
.live-term__side .widget-card{ --card-pad-y:6px; --card-pad-x:10px; --card-head-gap:4px; padding:6px 10px; }
.live-term__side .widget-card__head{ margin-bottom:4px; }

/* -- Live Chart: tighten toolbar/ticker chrome, canvas untouched -- */
#terminal-shell .livechart-toolbar{ margin-bottom:5px; }
#terminal-shell .livechart-ticker{ margin-bottom:5px; padding:6px 8px 5px; }
#terminal-shell .livechart-ticker__headline{ margin-bottom:4px; }
#terminal-shell .livechart-ticker__stat{ padding:4px 3px; }
#terminal-shell .livechart-replay-bar{ margin-bottom:5px; }
#terminal-shell .livechart-subpane{ height:56px; margin-top:3px; }

/* -- Order Flow: 60s stat block -- */
#terminal-shell .orderflow-60s{ margin-top:6px; padding-top:6px; }
#terminal-shell .orderflow-ratio-bar{ height:14px; }

/* -- Liquidations (sidebar summary card + full feed section) -- */
#terminal-shell .liq-sidebar__head-row{ padding:3px 6px 5px; }
#terminal-shell .liq-sidebar__row{ padding:5px 6px; }
#terminal-shell .news-item a,
#terminal-shell .news-item.news-fallback{ padding:6px 3px; }

/* -- Market Pulse / Order Flow Score / Market Overview / Statistics:
   all four share .mstat-row for their data rows (already tight at
   2px vertical in the sidebar grid) — the remaining slack is in the
   score readout and gauge above the rows in Order Flow Score. -- */
#terminal-shell .ofscore-value{ font-size:24px; }
#terminal-shell .ofscore-label{ margin-bottom:6px; }
#terminal-shell .ofscore-pressure__ratio{ font-size:22px; margin-bottom:5px; }
#terminal-shell .ofscore-pressure__bar{ margin-bottom:7px; }

/* -- Whale Tracker -- */
#terminal-shell .whale-stats{ padding-bottom:6px; margin-bottom:6px; }
#terminal-shell .whale-stats__row{ margin-bottom:5px; }
#terminal-shell .whale-row{ padding:5px 6px; }

/* -- page-level chrome around the terminal (tabs, section padding) -- */
.page-terminal .section{ padding:18px 18px 12px; }
#terminal-shell .term-tabs{ padding-bottom:7px; margin-top:9px; }

/* -- mobile: restore slightly roomier touch targets than the desktop
   values above, same intent as the existing 980px block, just scaled
   down to match this pass instead of the old, looser baseline. -- */
@media (max-width:980px){
  #terminal-shell .widget-card{ --card-pad-y:9px; --card-pad-x:11px; --card-head-gap:6px; padding:9px 11px; }
  #terminal-shell .widget-card__head{ margin-bottom:6px; }
  #terminal-shell .liq-sidebar__row,
  #terminal-shell .whale-row{ padding:6px 6px; }
}

/* =========================================================
   Structural merge pass — Market Pulse + Order Flow Score,
   and Market Overview + Statistics, each now render as one
   ".widget-card--paired" card (single border, single header)
   with two ".wc-split-col" halves side by side instead of two
   separate cards stacked vertically. All original element ids
   are unchanged (see core.js) so every module that reads/writes
   them (market-pulse.js, daily-stats.js, etc.) keeps working
   untouched — this is purely a layout regrouping.
   ========================================================= */
#terminal-shell .widget-card--paired .widget-card__head h4{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:5px;
}
#terminal-shell .wc-head-sep{ color:var(--mute-dim); font-weight:400; }
#terminal-shell .wc-split-body{
  display:flex; flex-direction:row; align-items:flex-start; gap:14px;
}
#terminal-shell .wc-split-col{ flex:1 1 0; min-width:0; }
#terminal-shell .wc-split-col + .wc-split-col{
  border-left:1px solid var(--line-soft);
  padding-left:12px;
}
/* Order Flow Score's gauge/value block reads fine narrower than the tape's
   own full-width version did, but the tiered layout (score, gauge, then
   rows) still wants a touch more breathing room than a bare mstat list — a
   hair smaller than the unpaired original (27px, set above) so the two
   columns balance visually next to Market Pulse's plain row list. */
#terminal-shell .wc-split-col .ofscore-value{ font-size:24px; }
#terminal-shell .wc-split-col .ofscore-label{ margin-bottom:5px; }
/* Below ~560px the sidebar itself is already stacked full-width on a
   phone-sized viewport, so a side-by-side split gets cramped — fall back
   to the original stacked-vertical reading order there. */
@media (max-width:560px){
  #terminal-shell .wc-split-body{ flex-direction:column; gap:2px; }
  #terminal-shell .wc-split-col + .wc-split-col{
    border-left:none; padding-left:0;
    border-top:1px solid var(--line-soft); padding-top:8px; margin-top:6px;
  }
}
/* Same fallback, but keyed to the sidebar's own (resizable) width rather
   than the viewport — dragging the gutter narrow on a wide desktop should
   stack the columns too, same as a narrow phone would. */
.live-term__side{ container-type:inline-size; container-name:live-side; }
@container live-side (max-width:360px){
  #terminal-shell .wc-split-body{ flex-direction:column; gap:2px; }
  #terminal-shell .wc-split-col + .wc-split-col{
    border-left:none; padding-left:0;
    border-top:1px solid var(--line-soft); padding-top:8px; margin-top:6px;
  }
}

/* =========================================================
   Live Chart — shorter header, tighter price/stats ticker.
   ========================================================= */
#terminal-shell .livechart-card .widget-card__head{ margin-bottom:3px; }
#terminal-shell .livechart-ticker{ margin-bottom:5px; padding:6px 7px 5px; }
#terminal-shell .livechart-ticker__price{ font-size:19px; }
#terminal-shell .livechart-ticker__stat{ padding:4px 2px; gap:1px; }
#terminal-shell .livechart-ticker__stat-label{ font-size:10.5px; }