/* =========================================================
   tradinghub.cc — design tokens
   Void terminal palette: near-black surface, amber identity,
   teal "live data" pulse. Space Grotesk for display / IBM Plex
   Mono for data & tags / Inter for reading copy.
   ========================================================= */

:root{
  --void:        #0A0B0D;
  --panel:       #131519;
  --panel-hover: #191c21;
  --line:        #24272D;
  --line-soft:   #1B1E23;
  --ink:         #F5F6F7;
  --mute:        #8B9099;
  --mute-dim:    #5B6067;
  --signal:      #F5A623;
  --signal-soft: rgba(245,166,35,0.12);
  --pulse:       #29D9A0;
  --pulse-soft:  rgba(41,217,160,0.12);
  --danger:      #E5484D;
  --violet:      #A78BFA;
  --violet-soft: rgba(167,139,250,0.12);
  --cyan:        #4FC3E8;
  --cyan-soft:   rgba(79,195,232,0.12);

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

  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1180px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  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.12;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}
p{ margin:0 0 1em; color:var(--mute); }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

::selection{ background:var(--signal); color:#0A0B0D; }
: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); }
@keyframes dot-collecting-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.3; } }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,11,13,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.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; }

/* scrolling data strip */
.ticker{
  border-bottom:1px solid var(--line);
  background:var(--panel);
  overflow:hidden;
  white-space:nowrap;
  position:relative;
}
.ticker::before, .ticker::after{
  content:""; position:absolute; top:0; bottom:0; width:48px; z-index:2; pointer-events:none;
}
.ticker::before{ left:0; background:linear-gradient(90deg,var(--panel),transparent); }
.ticker::after{ right:0; background:linear-gradient(270deg,var(--panel),transparent); }
.ticker-track{
  display:inline-flex;
  align-items:center;
  padding:9px 0;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--mute);
  will-change:transform;
}
.ticker-track > span{ margin-right:40px; white-space:nowrap; flex-shrink:0; }
.ticker-track span b{ color:var(--ink); font-weight:500; }
.ticker-track .up{ color:var(--pulse); }
.ticker-track .down{ color:var(--danger); }

/* ---------- 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(245,166,35,0.16) 0%, rgba(245,166,35,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(41,217,160,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:#ffb638; }
.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(245,166,35,0.12) 0%, rgba(245,166,35,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 .term-toolbar{
  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(229,72,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{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px;
  display:flex; flex-direction:column;
  min-height:auto;
}
.widget-card__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.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:12px; 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:10px; 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:13.5px; color:var(--ink); line-height:1.4; }
.news-meta{ font-family:var(--font-mono); font-size:11px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.03em; }
.news-item.news-fallback{ padding:11px 4px; font-size:13px; 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:12.5px; padding:20px 4px; text-align:center; }

/* ---------- main interactive chart + symbol quick-switch ---------- */
.tv-chart-main{ height:560px; min-height:560px; }
.tv-chart-main .tradingview-widget-container__widget{ height:100%; }
.tv-chart-main iframe{ height:100% !important; }
@media (max-width:760px){ .tv-chart-main{ height:420px; min-height:420px; } }
.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:11px; color:var(--mute-dim); margin:10px 2px 0; }

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

/* ---------- terminal toolbar (replaces the old Markets / Calendar & News tabs — everything now sits on one screen) ---------- */
.term-toolbar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
}
.term-toolbar__hint{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12.5px; color:var(--mute);
}
.term-toolbar__hint .dot{ background:var(--pulse); }

/* ---------- terminal 3-column layout (DEXTools-style: watchlist/calendar/news
   on the left, chart/liquidations/heatmap in the middle as the priority
   content, compact macro glances on the right) ----------
   Each column simply stacks its cards at their natural content height and
   the page scrolls normally, same as every other page on the site. An
   earlier version tried to force everything into one fixed viewport-height
   box with flex-basis tricks — TradingView's embeds ship their own fixed
   pixel heights and don't cooperate with being squeezed by flex-basis, so
   that approach clipped/overlapped content. Natural height avoids that
   whole class of bug. */
.term-3col{
  display:grid;
  grid-template-columns:300px minmax(0,1fr) 320px;
  gap:14px;
  align-items:start;
  margin-top:16px;
}
.term-col{
  display:flex; flex-direction:column; gap:12px;
  min-width:0;
}

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

/* 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; }

.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:12px; color:var(--mute); }


/* ---------- quick calculators popover (trading terminal) ---------- */
.calc-quick{ position:relative; flex:none; margin-bottom:2px; }
.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__chevron{ transition:transform .15s ease; }
.calc-quick-btn[aria-expanded="true"] .calc-quick-btn__chevron{ transform:rotate(180deg); }
.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(--panel);
}
.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:11.5px; }
.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; }
  .calc-quick-btn__label{ display:none; }
  .calc-quick-btn{ padding:7px 9px; }
}

/* 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:13.5px; 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:10.5px; 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 feed ---------- */
.liq-windows{ display:flex; flex-wrap:wrap; gap:8px; margin:2px 0 12px; }
.liq-window{
  flex:1; min-width:64px; display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--panel-hover); border:1px solid var(--line-soft); border-radius:8px;
  padding:6px 4px;
}
.liq-window b{ font-family:var(--font-mono); font-size:13px; color:var(--ink); font-weight:600; }
.liq-window i{ font-style:normal; font-size:10px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.05em; }
.liq-item a, .liq-item{ padding:5px 6px !important; }
.liq-row{
  display:grid;
  grid-template-columns:44px 58px 1fr auto auto;
  align-items:center;
  column-gap:8px;
  font-size:12px;
  width:100%;
  min-width:0;
}
.liq-exch-badge{
  font-family:var(--font-mono); font-weight:700; font-size:9px;
  letter-spacing:.03em; text-align:center; text-transform:uppercase;
  padding:2px 0; border-radius:4px; line-height:1.4;
}
.liq-exch-badge--binance{ color:#F0B90B; background:rgba(240,185,11,.12); border:1px solid rgba(240,185,11,.3); }
.liq-exch-badge--bybit{ color:#FF7A1A; background:rgba(255,122,26,.12); border:1px solid rgba(255,122,26,.3); }
.liq-symbol{ font-family:var(--font-mono); font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liq-exchange{ display:none; }
.liq-label{ font-size:11.5px; white-space:nowrap; }
.liq-value{ font-family:var(--font-mono); color:var(--ink); text-align:right; white-space:nowrap; }
.liq-time{ font-family:var(--font-mono); font-size:10.5px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.03em; text-align:right; white-space:nowrap; }
@media (max-width:560px){
  .liq-row{
    grid-template-columns:38px 50px 1fr auto;
    column-gap:6px;
  }
  .liq-label{ display:none; }
}

/* The right rail is narrow at every viewport width (it's a grid track, not
   the full page), so give the liquidations widget the compact treatment
   unconditionally instead of behind a viewport media query. */
.term-col-right .liq-windows{ display:grid; grid-template-columns:1fr 1fr; }
.term-col-right .liq-row{
  grid-template-columns:32px 1fr auto;
  column-gap:6px;
}
.term-col-right .liq-label{ display:none; }
.term-col-right .liq-time{ display:none; }

/* 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:11.5px; color:var(--mute-dim); }
.widget-live-note{
  font-family:var(--font-mono); font-size:11px; 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:12px; 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:10.5px; font-weight:400; color:var(--mute-dim); }
.heatmap-axis-label{
  font-family:var(--font-mono); font-size:9px; 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:11px; }
  .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:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:3px 8px; border-radius:20px; font-weight:500;
}
.impact.high{ color:var(--danger); background:rgba(229,72,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:13.5px; 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); }

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(6,7,9,.72); }
.glossary-dialog__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:18px 20px; border-bottom:1px solid var(--line);
}
.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:13.5px; color:var(--ink); margin-bottom:6px; }
.widget-info-pop__text{ margin:0 0 10px; font-size:13px; color:var(--mute); line-height:1.55; }
.widget-info-pop__link{ display:inline-block; font-size:12.5px; 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:11px; 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:11.5px; 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(229,72,77,.06); border:1px solid rgba(229,72,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);
}

/* mobile nav */
@media (max-width:760px){
  .nav-links{
    position:fixed; top:105px; 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;
  }
  .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:300;
  background:rgba(6,7,9,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);
}
.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:10px; }
.widget-card__head::before{
  content:''; position:absolute; left:-14px; top:1px; bottom:3px; width:3px;
  border-radius:2px; background:var(--signal); opacity:.85;
}
.widget-card--compact .widget-card__head::before{ left:-12px; }

/* ---------- 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:baseline; gap:4px 22px;
  padding:10px 2px 14px; 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{ font-family:var(--font-mono); font-weight:600; font-size:24px; color:var(--ink); flex:none; }
.chart-hero__change{ font-family:var(--font-mono); font-weight:600; font-size:14px; flex:none; }
.chart-hero__stats{ display:flex; flex-wrap:wrap; gap:2px 20px; margin-left:auto; }
.chart-hero__stat{ display:flex; flex-direction:column; gap:1px; }
.chart-hero__stat span{ font-family:var(--font-mono); font-size:9.5px; color:var(--mute-dim); text-transform:uppercase; letter-spacing:.05em; }
.chart-hero__stat b{ font-family:var(--font-mono); font-size:12.5px; color:var(--ink); font-weight:500; }
@media (max-width:640px){
  .chart-hero__stats{ margin-left:0; gap:8px 16px; }
  .chart-hero__price{ font-size:20px; }
}

/* ---------- 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:10.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:12px; }
.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; }