/* =========================================================
   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; 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.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); }
.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;
  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 ---------- */
/* !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: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 section tabs (Crypto / Macro & Forex) ---------- */
.term-tabs{
  display:flex; gap:6px; margin-top:16px;
  border-bottom:1px solid var(--line);
}
.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:11px; color:var(--mute-dim);
  background:#0B0E14;
}
.term-winbar__label{ text-transform:uppercase; letter-spacing:.08em; color:var(--mute-dim); flex:none; font-size:10px; }
.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:11px; 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:11px; 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;
  border-bottom:1px solid var(--line-soft);
  user-select:none;
  flex:none;
}
.term-pane__title{
  font-family:var(--font-mono);
  font-size:10.5px; 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:13px; 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-windows{ 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; }
}

.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; }
/* aggr.trade-style single line per fill: the whole row is a flat color
   chip (red = long liquidated / forced sell, green = short liquidated /
   forced buy) and bigger notional gets a brighter, bolder, taller row
   instead of extra text — size alone signals significance at a glance. */
.liq-item{
  display:flex !important; flex-direction:row !important; align-items:center;
  gap:8px; padding:6px 8px !important; border-radius:6px;
  font-family:var(--font-mono); border-bottom:none !important;
}
.liq-item.liq-side--long{ background:rgba(229,72,77,.10); }
.liq-item.liq-side--short{ background:rgba(41,217,160,.10); }
.liq-item.liq-tier-2.liq-side--long{ background:rgba(229,72,77,.17); }
.liq-item.liq-tier-2.liq-side--short{ background:rgba(41,217,160,.17); }
.liq-item.liq-tier-3{ font-weight:700; padding-top:7px !important; padding-bottom:7px !important; }
.liq-item.liq-tier-3.liq-side--long{ background:rgba(229,72,77,.28); }
.liq-item.liq-tier-3.liq-side--short{ background:rgba(41,217,160,.28); }
.liq-item.liq-tier-4{ font-weight:800; padding-top:9px !important; padding-bottom:9px !important; }
.liq-item.liq-tier-4.liq-side--long{ background:rgba(229,72,77,.48); }
.liq-item.liq-tier-4.liq-side--short{ background:rgba(41,217,160,.48); }
.liq-item.liq-tier-4 .liq-amt, .liq-item.liq-tier-4 .liq-price{ color:#fff; }

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

.liq-side-ico{ flex:none; width:10px; text-align:center; font-size:9px; line-height:1; }
.liq-item.liq-side--long .liq-side-ico{ color:var(--danger); }
.liq-item.liq-side--short .liq-side-ico{ color:var(--pulse); }

.liq-sym{ flex:none; width:38px; font-weight:700; font-size:11px; color:var(--mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.liq-price{ flex:1; min-width:0; font-size:12px; color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.liq-time{ flex:none; width:26px; text-align:right; font-size:10px; color:var(--mute-dim); text-transform:uppercase; }
.liq-amt{ flex:none; min-width:56px; text-align:right; font-weight:700; font-size:12px; color:var(--ink); white-space:nowrap; }
.liq-item.liq-side--long .liq-amt{ color:var(--danger); }
.liq-item.liq-side--short .liq-amt{ color:var(--pulse); }

/* This feed keeps its ~40-row history for the volume badges, but only the
   ones that fit should ever be visible — no visible native scrollbar. It's
   still scrollable with a wheel/touch if someone wants to see older rows. */
#liq-feed-list{ scrollbar-width:none; -ms-overflow-style:none; }
#liq-feed-list::-webkit-scrollbar{ display:none; width:0; height:0; }

/* The left column is narrow at every viewport width (it's a grid track, not
   the full page), so keep the 4 volume badges as a 2x2 grid there instead
   of squeezing them into one flex row. */
.term-col-left .liq-windows{ display:grid; grid-template-columns:1fr 1fr; }

/* 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:950;
  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: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(41,217,160,0.12); }
.chart-hero__change.neg{ color:var(--danger); background:rgba(229,72,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: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; }

/* =========================================================
   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').
   ========================================================= */

.term-toolbar__actions{ display:flex; align-items:center; gap:10px; flex:none; margin-bottom:2px; }

.term-enter-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;
}
.term-enter-btn:hover{ color:var(--signal); border-color:var(--signal-soft); background:var(--panel-hover); }
.term-enter-btn svg{ display:block; flex:none; }
.term-enter-btn[aria-pressed="true"]{ color:var(--pulse); border-color:var(--pulse-soft); background:var(--pulse-soft); }
@media (max-width:560px){ .term-enter-btn__label{ display:none; } }

/* ---- entering immersive mode: hide site chrome, expand terminal ---- */
body.term-immersive{ overflow:hidden; }
body.term-immersive .site-header,
body.term-immersive .site-footer,
body.term-immersive #term-page-head,
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:56px 20px 24px;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:var(--void);
}
@media (max-width:560px){
  body.term-immersive #terminal-shell{ padding:56px 12px 20px; }
}

/* ---- floating nav replacement (fab + slide-down menu) ---- */
.term-immersive-nav{ display:none; }
body.term-immersive .term-immersive-nav{
  display:block; position:fixed; top:16px; left:16px; z-index:1000;
}
.term-immersive-fab{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(19,21,25,0.92); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-radius:10px;
  color:var(--ink); font-family:var(--font-mono); font-size:12.5px;
  padding:9px 12px; cursor:pointer;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:border-color .15s ease, color .15s ease;
}
.term-immersive-fab:hover, .term-immersive-fab[aria-expanded="true"]{ color:var(--signal); border-color:var(--signal-soft); }
.term-immersive-fab__mark{ font-family:var(--font-display); font-weight:700; }
.term-immersive-fab__mark span{ color:var(--signal); }
.term-immersive-fab svg{ transition:transform .15s ease; flex:none; }
.term-immersive-fab[aria-expanded="true"] svg{ transform:rotate(180deg); }

.term-immersive-menu{
  position:absolute; top:calc(100% + 8px); left:0; 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;
}
.term-immersive-nav.open .term-immersive-menu{ opacity:1; transform:translateY(0); pointer-events:auto; }

.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__exit{ color:var(--danger); margin-top:4px; border-top:1px solid var(--line-soft); border-radius:0 0 6px 6px; padding-top:11px; }
.term-immersive-menu__exit:hover{ color:var(--danger); background:rgba(229,72,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);
}

/* -- sharper corners: most terminal surfaces (widget-card, popovers,
   calendar accordion, dialogs) size their border-radius off these two
   tokens, so retargeting them here is enough to pull the whole
   terminal toward flat, hairline-bordered Bloomberg/Aggr chrome
   without hunting down every individual rule. */
#terminal-shell{
  --radius: 5px;
  --radius-sm: 3px;
}
.widget-info-pop{ border-radius:3px; }

/* -- padding: ~25% tighter across every terminal surface -- */
#terminal-shell .widget-card{ 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-toolbar{ margin:8px 0 10px; }
.page-terminal .grid-2,
.page-terminal .grid-3{ gap:9px; }

#terminal-shell .term-toolbar{ padding-bottom:10px; }
#terminal-shell .term-tabs{ margin-top:12px; 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-windows{ gap:6px; margin:2px 0 9px; }
#terminal-shell .liq-window{ padding:4px 3px; border-radius:3px; }
#terminal-shell .liq-item{ padding:4px 6px !important; border-radius:3px; }
#terminal-shell .liq-item.liq-tier-3{ padding-top:5px !important; padding-bottom:5px !important; }
#terminal-shell .liq-item.liq-tier-4{ padding-top:7px !important; padding-bottom:7px !important; }

#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; }

#terminal-shell .term-enter-btn{ padding:5px 9px; border-radius:3px; }

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