/* public_html/styles.css
   Coinslytic — Global Styles (stable + fast + SPA safe)
   ✅ Consolidated (no duplicates)
   ✅ Stable dropdown/z-index layers
   ✅ Bubbles canvas styles included globally (no inline-style dependency)
*/

:root{
  --bg:#0b1020;
  --panel:#0f172a;
  --card:#0f1b33;
  --text:#e8eefc;
  --muted:#93a4c7;
  --border:#1e2a48;
  --shadow: 0 12px 30px rgba(0,0,0,.25);
  --accent:#f5a41d;
  --accent-strong:#e58e00;
  --accent-2:#ffbf47;
  --accent-soft:rgba(245,164,29,0.12);
  --accent-soft-2:rgba(245,164,29,0.22);
  --accent-soft-3:rgba(245,164,29,0.32);
  --accent-grad:linear-gradient(135deg, #f5a41d 0%, #ffd089 100%);
  --accent-grad-strong:linear-gradient(135deg, #e58e00 0%, #f5a41d 100%);
  --accent-glow:0 12px 28px rgba(245,164,29,0.28);
  --good:#19c37d;
  --bad:#ff4d4d;
}

/* Light theme */
html.light,
html[data-theme="light"],
body.light,
body[data-theme="light"],
.theme-light{
  --bg:#f6f8ff;
  --panel:#ffffff;
  --card:#ffffff;
  --text:#0b1220;
  --muted:#5c6b86;

  /* ✅ make borders visible in light mode */
  --border: rgba(15,23,42,.14);
  --shadow: 0 10px 24px rgba(15,23,42,.08);

  --accent:#f5a41d;
  --accent-strong:#d98200;
  --accent-2:#ffb84a;
  --accent-soft:rgba(245,164,29,0.18);
  --accent-soft-2:rgba(245,164,29,0.26);
  --accent-soft-3:rgba(245,164,29,0.34);
  --accent-grad:linear-gradient(135deg, #f5a41d 0%, #ffd089 100%);
  --accent-grad-strong:linear-gradient(135deg, #d98200 0%, #f5a41d 100%);
  --accent-glow:0 10px 22px rgba(245,164,29,0.25);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  background:var(--bg);
  color:var(--text);
}

/* layout */
.container{ max-width:1200px; margin:18px auto; padding:0 14px; }

/* topbar */
.topbar{
  position:sticky; top:0; z-index:90;
  background: rgba(10,14,30,.78);
  backdrop-filter: blur(12px);
  border-bottom:1px solid var(--border);
  padding:12px 14px;
  display:flex; gap:14px; align-items:center; justify-content:space-between;
}
body.light .topbar,
body[data-theme="light"] .topbar,
.theme-light .topbar{ background: rgba(246,248,255,.86); }

.topbar__left{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand{ font-weight:700; letter-spacing:.3px; font-size:18px; white-space:nowrap; }
.nav{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.nav__link{
  text-decoration:none; color:var(--muted);
  padding:8px 10px; border-radius:10px;
  border:1px solid transparent;
  line-height:1;
}
.nav__item{ position:relative; }
.nav__dropdown .nav__menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  min-width:220px;
  display:none;
  flex-direction:column;
  gap:4px;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  box-shadow: var(--shadow);
  z-index:200;
}
.nav__dropdown:hover .nav__menu{ display:flex; }
.nav__sublink{
  width:100%;
  justify-content:flex-start;
  border-radius:10px;
}
.nav__dropdown .nav__link{ white-space:nowrap; }
.nav__link:hover{
  color:var(--accent);
  border-color:rgba(245,164,29,0.4);
  background:var(--accent-soft);
}
.nav__link.active{
  color:var(--accent-strong);
  border-color:rgba(245,164,29,0.5);
  background:var(--accent-soft-2);
}

.topbar__right{ display:flex; gap:10px; align-items:center; }
.topbar__mobile{ display:none; gap:10px; align-items:center; }
.desktopOnly{ display:block; }
.nav.desktopOnly{ display:flex; }
.search.desktopOnly{ display:block; }
.mobileOnly{ display:none; }

@media (max-width: 980px){
  .desktopOnly{ display:none !important; }
  .mobileOnly{ display:flex !important; }
  .topbar{ padding:12px 14px; }
  .topbar__left{ gap:10px; }
}

@media (max-width: 900px){
  .container{ padding:0 12px; }
  .cardPad{ padding:12px; }
  .btn{ padding:9px 11px; }
}

/* search */
.search{ position:relative; }
.search__input{
  width:280px; max-width:50vw;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
.search__input:focus{
  border-color:rgba(245,164,29,0.5);
  box-shadow:0 0 0 3px var(--accent-soft);
}
.search__input::placeholder{ color:var(--muted); }

@media (max-width: 980px){
  body.mobile-search-open .search{
    display:block !important;
    position:fixed;
    left:12px; right:12px;
    top:64px;
    z-index:120;
  }
  body.mobile-search-open .search__input{
    width:100%;
    max-width:none;
  }
  body.mobile-search-open #searchSuggestions{
    left:0; right:0; top:48px;
    min-width:auto;
  }
}

/* buttons */
.btn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{ background:rgba(255,255,255,.06); }
.btn.primary{
  background:var(--accent-grad);
  border-color:transparent;
  color:white;
  font-weight:700;
  box-shadow:var(--accent-glow);
}
.btn.primary:hover{ background:var(--accent-grad-strong); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }

.iconBtn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  border-radius:12px;
  cursor:pointer;
  height:38px; width:38px;
}

.profileBtn{
  height:42px; width:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.profileBtn:hover,
.iconBtn:hover{
  background:rgba(255,255,255,.06);
  border-color:rgba(245,164,29,0.45);
  color:var(--accent);
}

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cardPad{ padding:14px; }
@media (hover:hover){
  .card:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(0,0,0,.28);
  }
  body.light .card:hover,
  body[data-theme="light"] .card:hover,
  html[data-theme="light"] .card:hover{
    box-shadow: 0 16px 34px rgba(15,23,42,.12);
  }
}

/* table */
.tableWrap{ width:100%; overflow:auto; }
table{ width:100%; border-collapse:collapse; }
thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  user-select:none;
  white-space:nowrap;
}
tbody td{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  white-space:nowrap;
}
tbody tr:hover{ background:rgba(255,255,255,.04); cursor:pointer; }

body.light tbody td,
body[data-theme="light"] tbody td,
.theme-light tbody td{
  border-bottom:1px solid rgba(15,23,42,.08);
}

@media (max-width: 760px){
  .tableWrap{ overflow-x:auto; }
  table{ min-width:680px; }
}

.muted{ color:var(--muted); }
.tiny{ font-size:12px; }

/* dropdown (global) */
.dropdown{
  position:absolute;
  right:0;
  top:48px;
  min-width:320px;
  z-index:200;
}
.dropdownSolid{
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:14px;
  overflow:hidden;
}
.hidden{ display:none !important; }

/* search suggestions */
.searchSugItem{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; cursor:pointer;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.light .searchSugItem,
body[data-theme="light"] .searchSugItem{
  border-bottom:1px solid rgba(15,23,42,.08);
}
.searchSugItem:hover{ background:var(--accent-soft); }
.searchSugImg{
  width:28px; height:28px; border-radius:999px; object-fit:cover;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.searchSugTxt{ display:flex; flex-direction:column; min-width:0; }
.searchSugName{ font-weight:750; font-size:13px; }
.searchSugSym{ color:var(--muted); font-size:12px; }
.searchSugRank{ margin-left:auto; color:var(--muted); font-size:12px; }

/* profile dropdown */
.profileMenuHead{ font-size:12px; color:var(--muted); padding:10px 12px 0; }
.profileMenuUser{ font-weight:800; padding:4px 12px 10px; }
.profileMenuItem{
  display:flex; align-items:center; gap:8px;
  padding:10px 12px; text-decoration:none; color:var(--text);
  border-top:1px solid rgba(255,255,255,.06); cursor:pointer;
  background:transparent; border:0; width:100%; text-align:left;
}
body.light .profileMenuItem,
body[data-theme="light"] .profileMenuItem{
  border-top:1px solid rgba(15,23,42,.08);
}
.profileMenuItem:hover{ background:var(--accent-soft); }
.profileMenuItem--btn{ font:inherit; }

/* mobile menu */
.mobileMenu{
  position:fixed;
  inset:0;
  z-index:200;
  display:none;
}
.mobileMenu.open{ display:block; }
.mobileMenu__overlay{
  position:absolute; inset:0;
  background:rgba(5,8,16,0.65);
}
.mobileMenu__panel{
  position:absolute; inset:0;
  background:var(--panel);
  color:var(--text);
  padding:18px 18px 22px;
  display:flex; flex-direction:column; gap:16px;
  animation:csFadeUp .2s ease both;
  overflow-y:auto;
}
.mobileMenu__head{
  display:flex; align-items:center; justify-content:space-between;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
body.light .mobileMenu__head,
body[data-theme="light"] .mobileMenu__head,
html[data-theme="light"] .mobileMenu__head{
  border-bottom:1px solid rgba(15,23,42,.08);
}
.mobileMenu__list{
  display:flex; flex-direction:column; gap:10px;
  padding:6px 0;
}
.mobileMenu__link{
  text-decoration:none;
  color:var(--text);
  font-size:20px;
  padding:10px 12px;
  border-radius:12px;
}
.mobileMenu__link.active{
  color:var(--accent-strong);
  background:var(--accent-soft-2);
  border:1px solid rgba(245,164,29,.45);
}
.mobileMenu__divider{
  height:1px; background:rgba(255,255,255,.08);
}
body.light .mobileMenu__divider,
body[data-theme="light"] .mobileMenu__divider,
html[data-theme="light"] .mobileMenu__divider{
  background:rgba(15,23,42,.08);
}
.mobileMenu__profile{
  display:flex; flex-direction:column; gap:6px;
  color:var(--muted);
  font-size:13px;
}
.mobileMenu__label{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}
.mobileMenu__profile a,
.mobileMenu__profile button{
  color:var(--text);
  text-decoration:none;
  background:transparent;
  border:0;
  padding:8px 10px;
  border-radius:10px;
  text-align:left;
  font-size:15px;
}
.mobileMenu__profile a:hover,
.mobileMenu__profile button:hover{
  background:var(--accent-soft);
}
.mobileMenu__actions{
  margin-top:auto;
  display:flex;
  gap:10px;
}
.mobileMenu__action{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  color:var(--text);
  padding:12px;
  cursor:pointer;
  font-weight:600;
}
.mobileMenu__icon{ font-size:16px; }
body.menu-open{ overflow:hidden; }

/* toast */
.toast{
  position:fixed;
  right:16px;
  bottom:16px;
  background:var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:14px;
  padding:12px 12px;
  min-width:280px;
  z-index:999;
}

/* loading + animations */
.csPageLoader{
  min-height:40vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--muted);
}
.csSpinner{
  width:36px;height:36px;border-radius:50%;
  border:3px solid rgba(245,164,29,.25);
  border-top-color:rgba(245,164,29,.95);
  animation:csSpin 0.9s linear infinite;
}
.csLoaderTxt{ font-size:13px; letter-spacing:.2px; }

.csFadeIn{ animation:csFadeUp .35s ease both; }

@keyframes csSpin{ to{ transform:rotate(360deg); } }
@keyframes csFadeUp{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

#app{ position:relative; }
#app.is-loading{ min-height:40vh; }
#app.is-loading::before{
  content:"";
  position:absolute; inset:0;
  background:rgba(5,8,16,0.35);
  backdrop-filter: blur(2px);
  pointer-events:none;
  border-radius:14px;
}
#app.is-loading::after{
  content:"";
  position:absolute;
  top:16px; right:16px;
  width:28px; height:28px;
  border-radius:50%;
  border:3px solid rgba(245,164,29,.28);
  border-top-color:rgba(245,164,29,.95);
  animation:csSpin .9s linear infinite;
  pointer-events:none;
}
body.light #app.is-loading::before,
body[data-theme="light"] #app.is-loading::before,
html[data-theme="light"] #app.is-loading::before{
  background:rgba(255,255,255,0.6);
}

/* footer */
.siteFooter{
  margin-top:40px;
  padding:46px 0 0;
  border-top:1px solid var(--border);
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(245,164,29,.10), rgba(0,0,0,0)),
    radial-gradient(900px 420px at 90% 120%, rgba(245,164,29,.08), rgba(0,0,0,0)),
    var(--bg);
}
body.light .siteFooter,
body[data-theme="light"] .siteFooter,
.theme-light .siteFooter{
  background:
    radial-gradient(900px 420px at 10% -10%, rgba(245,164,29,.16), rgba(255,255,255,0)),
    radial-gradient(900px 420px at 90% 120%, rgba(245,164,29,.10), rgba(255,255,255,0)),
    var(--bg);
}
.siteFooter__inner{
  max-width:1200px;
  margin:0 auto;
  padding:0 14px 26px;
  display:flex;
  flex-direction:column;
  gap:26px;
}
.siteFooter__top{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap:24px;
  align-items:center;
}
.siteFooter__brand{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.siteFooter__tag{color:var(--muted);max-width:420px;font-size:13px;line-height:1.5}
.siteFooter__contact{display:flex;gap:10px;flex-wrap:wrap}
.siteFooter__pill{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  color:var(--text);
}
.siteFooter__cta{
  border:1px solid var(--border);
  background:var(--card);
  padding:18px;
  border-radius:18px;
  box-shadow:var(--shadow);
}
.siteFooter__ctaTitle{font-size:16px;font-weight:700;margin-bottom:6px}
.siteFooter__ctaSub{color:var(--muted);font-size:12px;margin-bottom:12px}
.siteFooter__ctaRow{display:flex;gap:10px;flex-wrap:wrap}

.siteFooter__form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.siteFooter__input{
  flex:1 1 220px;
  min-width:180px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
  box-sizing:border-box;
}
.siteFooter__input:focus{
  border-color:rgba(245,164,29,.55);
  box-shadow:0 0 0 3px rgba(245,164,29,.18);
}
.siteFooter__note{
  margin-top:8px;
  font-size:12px;
  color:var(--muted);
}
.siteFooter__note--ok{ color: var(--good); }
.siteFooter__note--err{ color: var(--bad); }

.siteFooter__grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:18px;
}
.siteFooter__col{display:flex;flex-direction:column;gap:8px}
.siteFooter__title{font-size:12px;letter-spacing:.3px;color:var(--muted);text-transform:uppercase}
.siteFooter__link{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  cursor:pointer;
}
.siteFooter__link:hover{color:var(--accent)}

.siteFooter__bar{
  display:flex;
  justify-content:space-between;
  gap:14px;
  border-top:1px solid var(--border);
  padding-top:14px;
  color:var(--muted);
  font-size:12px;
  flex-wrap:wrap;
}
.siteFooter__meta{color:var(--muted)}

@media (max-width: 980px){
  .siteFooter__top{grid-template-columns:1fr}
  .siteFooter__grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .siteFooter__grid{grid-template-columns:1fr}
  .siteFooter__form{ flex-direction:column; align-items:stretch; }
  .siteFooter__input{
    flex: 0 0 auto;
    width:100%;
    padding:8px 10px;
    font-size:12px;
    border-radius:10px;
    height:38px;
    min-height:38px;
    max-height:38px;
    line-height:1.2;
  }
  .siteFooter__form .btn{
    padding:8px 12px;
    font-size:12px;
    border-radius:10px;
    height:38px;
  }
}

/* =========================
   Coin Bubbles styles...
   (UNCHANGED from your file)
   ========================= */
/* (Keeping your entire Bubbles section as-is, not repeating here to save space in this message) */

/* ======================================================================
   MARKETS v2 FIX PACK (CLEAN, SINGLE COPY)
   Full screen with ~10% margins + sparkline never clipped
====================================================================== */

body[data-route="markets"] .container{
  max-width:none;
  margin:0;
  padding:0;
}

.mkPage{
  padding: 16px 10vw 40px; /* ✅ 10% left/right margins */
}

.mkTop{ display:flex; flex-direction:column; gap:12px; }

.mkHero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-radius:20px;
  border:1px solid var(--border);
  background:
    radial-gradient(1200px 400px at 0% 0%, rgba(245,164,29,.16), transparent 45%),
    radial-gradient(800px 300px at 100% 0%, rgba(59,130,246,.10), transparent 45%),
    var(--card);
  box-shadow: var(--shadow);
  margin-bottom:14px;
}
.mkHeroLeft{ min-width:0; }
.mkHeroTitle{ font-size:28px; font-weight:900; letter-spacing:.2px; }
.mkHeroSub{ color:var(--muted); margin-top:6px; }
.mkHeroBadges{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.mkLiveDot{
  width:8px; height:8px; border-radius:999px;
  background:var(--good); box-shadow:0 0 0 4px rgba(25,195,125,.12);
}
.mkHeroBadge{
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  font-size:12px; font-weight:700; color:var(--text);
}
.mkHeroRight{ display:flex; align-items:center; gap:10px; }
.mkSearchWrap{ position:relative; min-width:260px; }
.mkSearchInput{
  width:100%;
  padding:11px 36px 11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  outline:none;
}
.mkSearchInput:focus{
  border-color:rgba(245,164,29,.55);
  box-shadow:0 0 0 3px rgba(245,164,29,.18);
}
.mkSearchIcon{
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%);
  opacity:.6; font-size:14px;
}

.mkPageHead{
  margin: 6px 0 14px 0;
  padding: 4px 4px 0 4px;
}
.mkPageTitle{
  font-size:28px;
  font-weight:500;
  letter-spacing:.2px;
}
.mkPageDesc{
  color:var(--muted);
  margin-top:6px;
  font-size:14px;
  max-width:900px;
}

.mkKpis{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1200px){
  .mkKpis{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 980px){
  .mkKpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .mkKpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mkPage{ padding:16px 5vw 32px; }
  .mkFngCard{ grid-column: 1 / -1; }
  .mkPageTitle{ font-size:20px; }
  .mkPageDesc{ font-size:12px; }
}

@media (max-width: 980px){
  .mkHero{ flex-direction:column; align-items:flex-start; }
  .mkHeroRight{ width:100%; }
  .mkSearchWrap{ width:100%; min-width:0; }
}
@media (max-width: 720px){
  .mkHeroTitle{ font-size:22px; }
  .mkHeroSub{ font-size:12px; }
  .mkHero{ padding:14px; }
}

.mkKpi{
  padding:16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.10));
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
}
.mkKpi::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:140px; height:140px;
  background:radial-gradient(circle at center, rgba(245,164,29,.12), rgba(0,0,0,0));
  pointer-events:none;
}
.mkKpiTitle{ color:var(--muted); font-size:13px; font-weight:600; }
.mkKpiValue{ font-size:22px; margin-top:8px; font-weight:800; letter-spacing:.2px; }
.mkKpiSub{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:8px; gap:10px;
}
.mkKpiChange.pos{ color: var(--good); font-weight:750; }
.mkKpiChange.neg{ color: var(--bad); font-weight:750; }

.mkKpiRight{
  width:130px; max-width:130px;
  display:flex; justify-content:flex-end;
  overflow:hidden;
}
.mkKpiRight .mkSpark{ height:32px; width:100%; color:var(--accent); }
.mkSpark{ color:var(--accent); }
.mkSpark.pos{ color:var(--good); }
.mkSpark.neg{ color:var(--bad); }
.mkSparkLine{ stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.mkSparkFill{ fill:currentColor; opacity:.16; }
.mkSparkSpike{ stroke:currentColor; stroke-width:1; opacity:.4; }
.mkSparkDot{ fill:currentColor; }
.mkSparkPct{ display:none; }
.mkSparkPct.pos{ color: var(--good); }
.mkSparkPct.neg{ color: var(--bad); }

.mkFngCard{
  cursor:pointer;
  background:var(--card);
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  padding:16px 18px 14px;
  border-radius:20px;
}
.mkFngCard::after{ display:none; }
.mkFngHead{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mkFngTitle{ font-size:18px; font-weight:800; color:var(--text); letter-spacing:.2px; }
.mkFngChevron{ font-size:20px; color:var(--muted); }
.mkFngGauge{ position:relative; display:flex; align-items:center; justify-content:center; margin-top:6px; }
.mkFngSvg{ width:170px; height:96px; }
.mkFngCenter{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}
.mkFngValue{ font-size:26px; font-weight:800; }
.mkFngLabel{ font-size:13px; color:var(--muted); text-transform:none; }
.mkFngFoot{ display:none; }
.mkFngDelta{ font-size:12px; color:var(--muted); }

body.light .mkFngCard,
body[data-theme="light"] .mkFngCard,
html[data-theme="light"] .mkFngCard{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.mkFngDelta.pos{ color:var(--good); font-weight:700; }
.mkFngDelta.neg{ color:var(--bad); font-weight:700; }
.mkFngSpark{ width:90px; display:flex; justify-content:flex-end; }

/* Fear & Greed page */
.fngPage{ padding: 20px 10vw 44px; }
.fngGrid{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap:18px;
}
.fngLeft, .fngRight{ display:flex; flex-direction:column; gap:16px; }
.fngCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px 20px;
  box-shadow:var(--shadow);
}
.fngPage{
  background:var(--bg);
}
body.light .fngCard,
body[data-theme="light"] .fngCard,
html[data-theme="light"] .fngCard{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 12px 28px rgba(15,23,42,.08);
}
.fngCardTitle{ font-size:18px; font-weight:800; margin-bottom:12px; }
.fngGaugeWrap{ position:relative; display:flex; align-items:center; justify-content:center; }
.fngGaugeSvg{ width:190px; height:120px; }
.fngGaugeCenter{
  position:absolute;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:2px;
}
.fngMainValue{ font-size:32px; font-weight:800; }
.fngMainLabel{ font-size:13px; color:var(--muted); }
.fngList{ display:flex; flex-direction:column; gap:10px; }
.fngRow{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.fngRowLabel{ color:var(--muted); font-size:13px; }
.fngPill{
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  border:0;
  background:rgba(245,164,29,.12);
  color:var(--text);
}

.fngChartCard{ padding:16px 18px 20px; }
.fngCardHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.fngRange{ display:flex; gap:8px; }
.fngRangeBtn{
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:6px 12px;
  border-radius:12px;
  cursor:pointer;
}
.fngRangeBtn.active{
  background:var(--accent-soft-2);
  border-color:rgba(245,164,29,.45);
}
.fngLegend{ display:flex; gap:14px; flex-wrap:wrap; color:var(--muted); font-size:12px; margin-bottom:10px; }
.fngLegendItem{ display:flex; align-items:center; gap:8px; }
.dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.dotFng{ background:#facc15; }
.dotBtc{ background:#94a3b8; }
.dotVol{ background:rgba(148,163,184,.45); }
.fngChartWrap{
  position:relative;
  border-radius:14px;
  padding:10px 12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
}
body.light .fngChartWrap,
body[data-theme="light"] .fngChartWrap,
html[data-theme="light"] .fngChartWrap{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.08);
}
body.light .fngRangeBtn,
body[data-theme="light"] .fngRangeBtn,
html[data-theme="light"] .fngRangeBtn{
  background:#f1f5f9;
  border-color:rgba(15,23,42,.12);
}
body.light .fngRangeBtn.active,
body[data-theme="light"] .fngRangeBtn.active,
html[data-theme="light"] .fngRangeBtn.active{
  background:#fff0d4;
  border-color:rgba(245,164,29,.5);
}

@media (max-width: 1100px){
  .fngGrid{ grid-template-columns:1fr; }
}
@media (max-width: 720px){
  .fngPage{ padding:16px 5vw 32px; }
  .fngRange{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .fngChartWrap canvas{ height:300px !important; }
}

.mkChipsWrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow: var(--shadow);
}
.mkChips{
  display:flex;
  gap:10px;
  overflow:auto;
  white-space:nowrap;
  padding-bottom:4px;
}
.mkChip{
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius:999px;
  padding:9px 14px;
  cursor:pointer;
  font-weight:750;
}
.mkChip.active{
  background: var(--accent-soft-2);
  border-color: rgba(245,164,29,.45);
}
.mkMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.mkTiny{ color:var(--muted); font-size:12px; }

/* table card */
.mkTable{
  width:100%;
  overflow:hidden;
  border-radius:16px;
}

.mkTablePro{
  border:1px solid var(--border);
  background:var(--card);
  box-shadow: var(--shadow);
}

.mkMobileHead{
  display:none;
}

/* grid columns */
.mkTableHead,
.mkRow{
  display:grid;
  grid-template-columns:
    44px
    84px
    minmax(240px, 1.2fr)
    78px
    110px
    80px
    80px
    80px
    140px
    140px
    180px;
  align-items:center;
}

.mkTableHead{
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--muted);
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.04em;
  background:rgba(255,255,255,.02);
}

body.light .mkTableHead,
body[data-theme="light"] .mkTableHead,
.theme-light .mkTableHead{
  border-bottom:1px solid rgba(15,23,42,.10);
}

.mkRows .mkRow{
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.light .mkRows .mkRow,
body[data-theme="light"] .mkRows .mkRow,
.theme-light .mkRows .mkRow{
  border-bottom:1px solid rgba(15,23,42,.08);
}

.mkCell{ min-width:0; }

/* ✅ hover effect requested */
.mkRows .mkRow{
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.mkRows .mkRow:hover{
  background: rgba(245,164,29,.08);
  cursor:pointer;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
}
body.light .mkRows .mkRow:hover,
body[data-theme="light"] .mkRows .mkRow:hover,
.theme-light .mkRows .mkRow:hover{
  background: rgba(15,23,42,.03);
  box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.mkIcons{ display:flex; gap:12px; justify-content:flex-start; margin-right:12px; }
.mkBuy{ display:flex; justify-content:center; }

.mkChg.pos{ color: var(--good); font-weight:400; }
.mkChg.neg{ color: var(--bad); font-weight:400; }
.mkPrice{ font-weight:400; }
.mkPrice.pos{ color: var(--good); }
.mkPrice.neg{ color: var(--bad); }
.mkPriceM.pos{ color: var(--good); }
.mkPriceM.neg{ color: var(--bad); }
@media (max-width: 720px){
  body[data-route="markets"] .mkPrice{ font-weight:400; }
}
.mkMcap, .mkVol{ color: var(--muted); }

.mkCoinLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.mkCoin{ padding-left:6px; }
.mkLogo{
  width:32px; height:32px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.mkNames{ min-width:0; }
.mkName{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:400; }
.mkSym{ color:var(--muted); font-size:12px; margin-top:2px; }
.mkSubCap{ color:var(--muted); font-size:12px; display:none; margin-top:2px; }

/* ✅ watch + alert button (STAR COLOR FIX) */
.mkIco{
  width:36px; height:36px;
  border-radius:12px;
  border:0;
  background: transparent;
  cursor:pointer;
  position:relative;

  /* ✅ important: star uses this color (white on dark, black on light) */
  color: var(--text);
}
body.light .mkIco,
body[data-theme="light"] .mkIco,
.theme-light .mkIco{
  border:0;
  background: transparent;
  color: var(--text); /* text is dark in light theme */
}

.mkIco[data-action="watch"]::before{
  content:"☆";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  color: inherit;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}
.mkIco.active[data-action="watch"]::before{ content:"★"; }

.mkIco[data-action="alert"]::before{
  content:"🔔";
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
}

/* buy button */
.mkBuyBtn{
  padding:7px 14px;
  border-radius:12px;
  border:1px solid rgba(245,164,29,.55);
  background: var(--accent-grad);
  color: #111;
  cursor:pointer;
  font-weight:400;
}
.mkBuyBtn:hover{ background: var(--accent-grad-strong); }

/* sparkline never outside */
.mkSparkCol{
  overflow:hidden;
  display:flex;
  justify-content:flex-end;
}
.mkSparkWrap{ width:100%; overflow:hidden; }
.mkSpark{
  width:100%;
  height:28px;
  display:block;
}
.mkSpark path{ stroke-width:2; stroke-linecap:round; }
.mkSpark.pos path{ stroke: var(--good); }
.mkSpark.neg path{ stroke: var(--bad); }
.mkSpark.pos .mkSparkDot{ fill: var(--good); }
.mkSpark.neg .mkSparkDot{ fill: var(--bad); }

.mkLoading{
  padding:18px 16px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px;
}
.mkLoading::before{
  content:"";
  width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(245,164,29,.25);
  border-top-color:rgba(245,164,29,.95);
  animation:csSpin 0.8s linear infinite;
}
.mkError{ padding:18px 16px; color:var(--bad); }

/* pager */
.mkPager{
  display:flex;
  justify-content:center;
  gap:8px;
  padding:14px 12px;
}
.mkPgBtn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius:12px;
  padding:8px 12px;
  cursor:pointer;
  font-weight:750;
}
.mkPgBtn.active{ background: var(--accent-soft-2); border-color: rgba(245,164,29,.45); }
.mkPgBtn:disabled{ opacity:.55; cursor:not-allowed; }
.mkDots{ color:var(--muted); padding:8px 2px; }

/* popover */
.mkPopOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.35);
  z-index: 300;
}
.mkPopover{
  position:fixed;
  z-index: 310;
}
.mkPopCard{
  background: var(--card);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius:16px;
  padding:14px;
}
.mkPopTitle{ font-size:14px; margin-bottom:6px; font-weight:800; }
.mkPopSub{ color:var(--muted); font-size:12px; margin-bottom:12px; }
.mkPopMono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.mkEmpty{
  padding:24px;
  text-align:center;
  color:var(--muted);
  font-weight:600;
}

.mkForm{ display:flex; flex-direction:column; gap:8px; }
.mkLbl{ color:var(--muted); font-size:12px; font-weight:600; }
.mkInp{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline:none;
}

.mkPopBtns{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}
.mkBtn{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius:12px;
  padding:9px 12px;
  cursor:pointer;
  font-weight:700;
}
.mkBtn.primary{
  background: var(--accent-grad);
  border-color: transparent;
  color:#fff;
}
.mkBtn.primary:hover{ background: var(--accent-grad-strong); }

.mkBuyList{ display:flex; flex-direction:column; gap:10px; }
.mkBuyLink{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
}
.mkBuyLink:hover{ background: rgba(255,255,255,.06); }

.mkBuyLogo{
  width:24px; height:24px; border-radius:999px;
  object-fit:cover; flex:0 0 auto;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
.mkBuyLogo--fallback{
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  color: var(--accent-strong);
  background: var(--accent-soft);
}

/* responsive: compact markets table for mobile */
@media (max-width: 980px){
  body[data-route="markets"] .mkTableHead,
  body[data-route="markets"] .mkRow{
    grid-template-columns: 36px 64px 220px 90px 120px 70px 70px 70px 130px 130px 160px;
    min-width: 980px;
  }
  body[data-route="markets"] .mkSubCap{ display:block; }
  body[data-route="markets"] .mkKpis{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
    overflow:visible;
    padding-bottom:0;
  }
  body[data-route="markets"] .mkKpi{ min-width:0; flex:initial; }
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(2),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(2),
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(4),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(4),
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(6),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(6),
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(8),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(8),
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(10),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(10),
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(11),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(11){
    display:block;
  }
  body[data-route="markets"] .mkTable{ overflow:auto; -webkit-overflow-scrolling:touch; }
  body[data-route="markets"] .mkTable::-webkit-scrollbar{ height:6px; }
  body[data-route="markets"] .mkTable::-webkit-scrollbar-thumb{ background:rgba(245,164,29,.35); border-radius:999px; }
  body[data-route="markets"] .mkTable::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); }
  body[data-route="markets"] .mkTable{ --mk-col-rank:36px; --mk-col-icons:64px; }
  body[data-route="markets"] .mkTableHead .mkRank,
  body[data-route="markets"] .mkRow .mkRank{
    position:sticky; left:0; z-index:3;
    background:var(--card);
  }
  body[data-route="markets"] .mkTableHead .mkIcons,
  body[data-route="markets"] .mkRow .mkIcons{
    position:sticky; left:var(--mk-col-rank); z-index:3;
    background:var(--card);
  }
  body[data-route="markets"] .mkTableHead .mkCoin,
  body[data-route="markets"] .mkRow .mkCoin{
    position:sticky; left:calc(var(--mk-col-rank) + var(--mk-col-icons)); z-index:3;
    background:var(--card);
    box-shadow: 8px 0 12px rgba(0,0,0,.12);
  }
  body.light[data-route="markets"] .mkTableHead .mkCoin,
  body.light[data-route="markets"] .mkRow .mkCoin,
  body[data-theme="light"][data-route="markets"] .mkTableHead .mkCoin,
  body[data-theme="light"][data-route="markets"] .mkRow .mkCoin{
    box-shadow: 8px 0 12px rgba(15,23,42,.08);
  }
  body[data-route="markets"] .mkTableHead{
    position:sticky; top:0; z-index:2;
    background:var(--card);
  }
}
@media (max-width: 640px){
  body[data-route="markets"] .mkTableHead,
  body[data-route="markets"] .mkRow{
    grid-template-columns: 30px 56px 200px 90px 110px 70px 70px 70px 120px 120px 140px;
    min-width: 940px;
  }
  body[data-route="markets"] .mkTableHead > .mkCol:nth-child(9),
  body[data-route="markets"] .mkRow > .mkCell:nth-child(9){
    display:block;
  }
  body[data-route="markets"] .mkTable{ --mk-col-rank:30px; --mk-col-icons:56px; }
}

@media (max-width: 720px){
  body[data-route="markets"] .mkKpis{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:10px;
  }
  body[data-route="markets"] .mkKpi{
    padding:12px 10px;
    border-radius:14px;
  }
  body[data-route="markets"] .mkKpiTitle{ font-size:11px; }
  body[data-route="markets"] .mkKpiValue{ font-size:16px; margin-top:4px; }
  body[data-route="markets"] .mkKpiSub{ font-size:11px; margin-top:4px; }
  body[data-route="markets"] .mkKpiRight{ display:none; }
  body[data-route="markets"] .mkFngTitle{ font-size:11px; }
  body[data-route="markets"] .mkFngSvg{ width:110px; height:64px; }
  body[data-route="markets"] .mkFngValue{ font-size:16px; }
  body[data-route="markets"] .mkFngLabel{ font-size:11px; }

  body[data-route="markets"] .mkTable{
    overflow:visible;
    border:0;
    box-shadow:none;
    background:transparent;
    border-radius:0;
  }
  body[data-route="markets"] .mkTableHead{ display:none; }
  body[data-route="markets"] .mkMobileHead{
    display:grid;
    grid-template-columns: 22px minmax(0,1fr) 88px 78px;
    padding:10px 12px;
    color:var(--muted);
    font-size:11px;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  body.light[data-route="markets"] .mkMobileHead,
  body[data-theme="light"][data-route="markets"] .mkMobileHead,
  .theme-light[data-route="markets"] .mkMobileHead{
    border-bottom:1px solid rgba(15,23,42,.10);
  }
  body[data-route="markets"] .mkMobileHead .mkPrice,
  body[data-route="markets"] .mkMobileHead .mkSparkCol{
    justify-self:end;
    text-align:right;
  }
  body[data-route="markets"] .mkRows .mkRow{
    grid-template-columns: 22px minmax(0,1fr) 88px 78px;
    min-width:0;
    gap:8px;
    align-items:center;
    padding:10px 12px;
    border-bottom:1px solid rgba(255,255,255,.06);
    background:transparent;
    box-shadow:none;
  }
  body.light[data-route="markets"] .mkRows .mkRow,
  body[data-theme="light"][data-route="markets"] .mkRows .mkRow,
  .theme-light[data-route="markets"] .mkRows .mkRow{
    border-bottom:1px solid rgba(15,23,42,.08);
  }
  body[data-route="markets"] .mkRows .mkRow:hover{
    background:transparent;
    box-shadow:none;
    transform:none;
  }
  body[data-route="markets"] .mkMobileHead .mkCol,
  body[data-route="markets"] .mkRows .mkRank{
    position:static;
    left:auto;
    z-index:auto;
    background:transparent;
    box-shadow:none;
  }

  body[data-route="markets"] .mkRows .mkIcons,
  body[data-route="markets"] .mkRows .mkBuy,
  body[data-route="markets"] .mkRows .mkCoin,
  body[data-route="markets"] .mkRows .mkPrice,
  body[data-route="markets"] .mkRows .mkSparkCol,
  body[data-route="markets"] .mkRows .mkChg,
  body[data-route="markets"] .mkRows .mkMcap,
  body[data-route="markets"] .mkRows .mkVol{
    display:none !important;
  }

  body[data-route="markets"] .mkRank{
    grid-column:1;
    color:var(--muted);
    font-weight:400;
  }
  body[data-route="markets"] .mkCoinM{
    grid-column:2;
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  body[data-route="markets"] .mkCoinM .mkLogo{ width:28px; height:28px; }
  body[data-route="markets"] .mkCoinM .mkNames{ min-width:0; }
  body[data-route="markets"] .mkCoinM .mkSym{
    font-size:13px;
    font-weight:400;
    text-transform:uppercase;
    color:var(--text);
  }
  body[data-route="markets"] .mkCoinM .mkSubCap{
    display:block;
    font-size:11px;
    color:var(--muted);
    font-weight:400;
    margin-top:2px;
  }
  body[data-route="markets"] .mkCoinM .mkBuyBtn--sm{
    margin-left:auto;
    padding:4px 10px;
    font-size:11px;
    line-height:1;
    border-radius:10px;
  }

  body[data-route="markets"] .mkPriceM{
    grid-column:3;
    justify-self:end;
    text-align:right;
    font-size:12px;
    font-weight:400;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
  }
  body[data-route="markets"] .mkPriceM .mkPriceSub{
    font-size:11px;
    color:var(--muted);
    font-weight:400;
  }

  body[data-route="markets"] .mkSparkM{
    grid-column:4;
    justify-self:end;
    text-align:right;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:4px;
  }
  body[data-route="markets"] .mkSparkM .mkSpark{ width:64px; height:20px; }
  body[data-route="markets"] .mkSparkPct{ display:block; font-size:11px; font-weight:400; }
}


/* =========================
   Header Brand Logo Switch
   ========================= */
.brandLink{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  line-height:0;
}

.brandLogo{
  height:40px;
  width:auto;
  display:block;
}

/* Default: DARK theme shows dark logo */
.brandLogo--light{ display:none; }
.brandLogo--dark{ display:block; }

/* Light theme: show light logo */
body.light .brandLogo--light,
body[data-theme="light"] .brandLogo--light,
.theme-light .brandLogo--light,
html[data-theme="light"] .brandLogo--light,
html.light .brandLogo--light{
  display:block;
}

body.light .brandLogo--dark,
body[data-theme="light"] .brandLogo--dark,
.theme-light .brandLogo--dark,
html[data-theme="light"] .brandLogo--dark,
html.light .brandLogo--dark{
  display:none;
}

/* ===========================
   COIN PAGE v8 — SAFE SCOPE
   Only affects: body[data-route="coin"] .coinPageV8 ...
   =========================== */

/* Remove extra side space (your screenshot red area fix) */
body[data-route="coin"] .container{
  max-width:none;
  margin:0;
  padding:0;
}

/* Slight padding (full width feel) */
body[data-route="coin"] .coinPageV8{
  padding: 18px 22px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 2 columns: Main (B) + Sidebar (A,C) */
body[data-route="coin"] .coinPageV8 .csGridABC{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas:
    "b a"
    "b c";
  gap:14px;
  align-items:start;
}
body[data-route="coin"] #csB{ grid-area:b; }
body[data-route="coin"] #csA{ grid-area:a; }
body[data-route="coin"] #csC{ grid-area:c; }

/* responsive */
@media (max-width: 1200px){
  body[data-route="coin"] .coinPageV8{ padding: 12px 14px; }
  body[data-route="coin"] .coinPageV8 .csGridABC{
    grid-template-columns: 1fr;
    grid-template-areas: "b" "a" "c";
  }
}
@media (max-width: 720px){
  body[data-route="coin"] .coinPageV8 .csHeroTop{ flex-direction:column; align-items:flex-start; }
  body[data-route="coin"] .coinPageV8 .csHeroLeft{ min-width:0; }
  body[data-route="coin"] .coinPageV8 .csBigPrice{ font-size:34px; }
  body[data-route="coin"] .coinPageV8 .csPriceRow{ flex-wrap:wrap; }
  body[data-route="coin"] .coinPageV8 .csConv{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 820px){
  body[data-route="coin"] #csBnav{ display:none; }
  body[data-route="coin"] .csMobileBar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:6px 2px 10px;
  }
  body[data-route="coin"] .csBackBtn,
  body[data-route="coin"] .csMobileIcon{
    width:34px; height:34px;
    border-radius:12px;
    border:1px solid var(--border);
    background: rgba(255,255,255,.03);
    color:var(--text);
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  body[data-route="coin"] .csMobileCoin{
    display:flex; align-items:center; gap:8px; min-width:0;
  }
  body[data-route="coin"] .csMobileLogo{
    width:28px; height:28px; border-radius:999px; border:1px solid var(--border);
    background:rgba(255,255,255,.04);
  }
  body[data-route="coin"] .csMobileNames{ display:flex; flex-direction:column; line-height:1.1; }
  body[data-route="coin"] .csMobileName{ font-weight:700; font-size:12px; }
  body[data-route="coin"] .csMobileSym{ font-weight:600; font-size:11px; color:var(--muted); letter-spacing:.2px; }
  body[data-route="coin"] .csMobileActs{ display:flex; gap:8px; }

  body[data-route="coin"] .csMobileTabs{
    display:flex;
    gap:18px;
    overflow-x:auto;
    white-space:nowrap;
    padding:4px 2px 10px;
    border-bottom:1px solid var(--border);
  }
  body[data-route="coin"] .csMobileTab{
    background:transparent;
    border:0;
    color:var(--muted);
    font-weight:650;
    padding:6px 0;
    cursor:pointer;
  }
  body[data-route="coin"] .csMobileTab.active{
    color:var(--text);
    box-shadow: inset 0 -3px 0 var(--accent-strong);
  }

  body[data-route="coin"] .csStickyBar{ flex-direction:column; align-items:flex-start; gap:10px; }
  body[data-route="coin"] .csStickyMid{ width:100%; overflow-x:auto; white-space:nowrap; }
  body[data-route="coin"] .csStickyRight{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  body[data-route="coin"] .csHeroRight{ width:100%; justify-content:flex-start; flex-wrap:wrap; }
  body[data-route="coin"] .csTopTab,
  body[data-route="coin"] .csChip{ font-size:12px; padding:7px 10px; }
  body[data-route="coin"] .csChartHead{ flex-direction:column; align-items:flex-start; }
  body[data-route="coin"] .csChartChips,
  body[data-route="coin"] .csSubTabs{ overflow-x:auto; white-space:nowrap; }
  body[data-route="coin"] .csChartTopRow{ gap:8px; }
  body[data-route="coin"] .csTf{
    overflow-x:auto; white-space:nowrap;
    padding:6px; border-radius:16px; border:1px solid var(--border);
    background: rgba(255,255,255,.02);
  }
  body[data-route="coin"] .csTfBtn{
    background:transparent; border:0; padding:8px 12px; border-radius:12px;
    color:var(--muted);
  }
  body[data-route="coin"] .csTfBtn.active{
    color:var(--text);
    background:rgba(255,255,255,.08);
  }
  body[data-route="coin"] .csSeg{
    overflow-x:auto; white-space:nowrap;
    border-radius:16px;
  }
  body[data-route="coin"] .csChartLeft{
    flex-wrap:nowrap;
    overflow-x:auto;
  }
  body[data-route="coin"] .csSeg,
  body[data-route="coin"] .csTvBtn{ flex:0 0 auto; }
  body[data-route="coin"] #mainChart,
  body[data-route="coin"] #tvFrame{
    height:260px !important;
  }
  body[data-route="coin"] .csSubTab{ flex:0 0 auto; }
  body[data-route="coin"] .csRow{ flex-direction:column; align-items:flex-start; }
  body[data-route="coin"] .csRowR{ justify-content:flex-start; }
  body[data-route="coin"] .csIconRow{ overflow-x:auto; white-space:nowrap; }
  body[data-route="coin"] .csTblWrap{ overflow-x:auto; }
  body[data-route="coin"] .coinPageV8{ padding:10px 12px; }
  body[data-route="coin"] .csHeroTop{ align-items:flex-start; }
  body[data-route="coin"] .csHeroRight .btn,
  body[data-route="coin"] .csHeroRight .csWatchBtn{ padding:7px 10px; }
  body[data-route="coin"] .csBigPrice{ font-size:36px; }
  body[data-route="coin"] .csBigPct span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border-radius:12px;
    font-weight:800;
    background:rgba(255,255,255,.06);
  }
  body[data-route="coin"] .csBigPct .up{
    background:rgba(25,195,125,.18);
    color:var(--good);
  }
  body[data-route="coin"] .csBigPct .down{
    background:rgba(255,77,77,.18);
    color:var(--bad);
  }
  body[data-route="coin"] .csStickyPct .up,
  body[data-route="coin"] .csStickyPct .down{
    padding:6px 10px;
    border-radius:10px;
    background:rgba(255,255,255,.06);
  }

  body[data-route="coin"]{
    overflow-x:hidden;
  }
  body[data-route="coin"] .csChartLeft,
  body[data-route="coin"] .csChartRight{ width:100%; }
  body[data-route="coin"] .csCmpSearchWrap{
    min-width:0 !important;
    max-width:none !important;
    width:100% !important;
  }
  body[data-route="coin"] .csCmpInp{ width:100% !important; }
  body[data-route="coin"] .csSeg,
  body[data-route="coin"] .csTf{ width:100%; }
  body[data-route="coin"] .csChartWrap{ overflow:hidden; }

  body[data-route="coin"] #csCmpWrap,
  body[data-route="coin"] #csCmpChipSlot,
  body[data-route="coin"] #csLogBtn{
    display:none !important;
  }
}

/* hero */
body[data-route="coin"] .coinPageV8 .csHeroTop{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
}
body[data-route="coin"] .csMobileBar{ display:none; }
body[data-route="coin"] .csMobileTabs{ display:none; }
body[data-route="coin"] .csMobileOnly{ display:none; }
body[data-route="coin"] .csDesktopOnly{ display:block; }
body[data-route="coin"] .coinPageV8 .csHeroLeft{ display:flex; align-items:center; gap:12px; min-width:280px; }
body[data-route="coin"] .coinPageV8 .csHeroLogo{
  width:42px; height:42px; border-radius:999px; object-fit:cover;
  border:1px solid var(--border); background:rgba(255,255,255,.04);
}
body[data-route="coin"] .coinPageV8 .csHeroTitle{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  font-weight:600;
}

@media (max-width: 820px){
  body[data-route="coin"] .csMobileOnly{ display:block; }
  body[data-route="coin"] .csDesktopOnly{ display:none; }
  body[data-route="coin"] .csStickyBar{ padding:8px 0; }
  body[data-route="coin"] .csStickyLeft{ align-items:flex-start; gap:10px; }
  body[data-route="coin"] .csStickyNames{
    display:grid; grid-template-columns:auto auto; column-gap:12px; align-items:center;
  }
  body[data-route="coin"] .csStickyTitle{ grid-column:1; flex-wrap:wrap; gap:6px; }
  body[data-route="coin"] #cName2{ order:1; }
  body[data-route="coin"] #cRank2{ order:2; }
  body[data-route="coin"] #cSym2{
    order:3; flex-basis:100%; font-size:11px; opacity:.75;
  }
  body[data-route="coin"] #cRank2{ font-size:10px; padding:2px 6px; }
  body[data-route="coin"] .csStickyPriceRow{
    grid-column:2;
    flex-direction:column; align-items:flex-start; gap:2px;
  }
  body[data-route="coin"] .csStickyRight .csWatchBtn,
  body[data-route="coin"] .csStickyRight #shareBtn2{
    display:none;
  }
  body[data-route="coin"] .csStickyRight{ align-self:flex-start; }
}

/* Mobile stats card */
body[data-route="coin"] .csStatsHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="coin"] .csPerfSeg{
  display:flex; gap:6px; padding:4px; border-radius:12px;
  border:1px solid var(--border); background:rgba(255,255,255,.03);
}
body[data-route="coin"] .csPerfBtn{
  background:transparent; border:0; color:var(--muted);
  padding:6px 10px; border-radius:10px; cursor:pointer; font-weight:700;
}
body[data-route="coin"] .csPerfBtn.active{
  color:var(--text); background:rgba(255,255,255,.08);
}
body[data-route="coin"] .csStatsLowHigh{
  margin-top:12px; display:flex; justify-content:space-between; gap:12px;
}
body[data-route="coin"] .csStatsVal{ font-weight:800; }
body[data-route="coin"] .csPerfBar{
  margin-top:10px; height:10px; border-radius:999px; border:1px solid var(--border);
  background:rgba(255,255,255,.03); position:relative;
}
body[data-route="coin"] .csPerfBar span{
  position:absolute; top:-6px; width:2px; height:22px; background:rgba(148,163,184,.9);
}

/* Mobile sections moved after overview */
body[data-route="coin"] .csMobileAfter{ display:none; }
@media (max-width: 820px){
  body[data-route="coin"] .csMobileAfter{
    display:grid; gap:12px; margin-top:12px;
  }
  body[data-route="coin"] #csMobileAfter .csSectionWrap{
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px;
  }
  body[data-route="coin"] #csMobileAfter .csSectionTitle{ margin-top:0 !important; }
  body[data-route="coin"] #csMobileAfter #sec_markets,
  body[data-route="coin"] #csMobileAfter #sec_yield,
  body[data-route="coin"] #csMobileAfter #sec_unlocks,
  body[data-route="coin"] #csMobileAfter #sec_onchain,
  body[data-route="coin"] #csMobileAfter #sec_about,
  body[data-route="coin"] #csMobileAfter #sec_similar{
    margin-top:0 !important;
  }
  body[data-route="coin"] .csMktCards{
    grid-template-columns:1fr 1fr;
  }
  body[data-route="coin"] .csMktCard{
    padding:8px;
    min-width:0;
  }
  body[data-route="coin"] .csMktCardMain{ font-size:12px; }
}
body[data-route="coin"] .coinPageV8 .csTag{
  padding:4px 10px; border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  font-size:12px;
}
body[data-route="coin"] .coinPageV8 .csHeroMid{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
body[data-route="coin"] .coinPageV8 .csTopTab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600; /* regular */
}
body[data-route="coin"] .coinPageV8 .csTopTab.active{
  background: var(--accent-soft-2);
  border-color: rgba(245,164,29,.45);
}
body[data-route="coin"] .coinPageV8 .csHeroRight{ display:flex; gap:10px; align-items:center; }

/* price row */
body[data-route="coin"] .coinPageV8 .csPriceRow{
  display:flex; align-items:baseline; gap:14px;
  margin-top:10px;
}
body[data-route="coin"] .coinPageV8 .csBigPrice{
  font-size:56px;
  font-weight:750; /* only price strong */
  letter-spacing:-0.5px;
}
body[data-route="coin"] .coinPageV8 .csBigPct{
  font-size:18px;
  font-weight:600;
}

/* cards basic */
body[data-route="coin"] .coinPageV8 .csH6{ font-size:16px; font-weight:650; }
body[data-route="coin"] .coinPageV8 .csList{ display:grid; gap:10px; }
body[data-route="coin"] .coinPageV8 .csRow{
  display:flex; justify-content:space-between; gap:12px;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.light[data-route="coin"] .coinPageV8 .csRow{
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-route="coin"] .coinPageV8 .csRow:last-child{ border-bottom:none; }
body[data-route="coin"] .coinPageV8 .csRowR{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }

body[data-route="coin"] .coinPageV8 .csHr{
  margin:12px 0;
  border-top:1px solid rgba(255,255,255,.06);
}
body.light[data-route="coin"] .coinPageV8 .csHr{
  border-top:1px solid rgba(15,23,42,.10);
}

/* mini helpers */
body[data-route="coin"] .coinPageV8 .csMono{ font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
body[data-route="coin"] .coinPageV8 .csSmBtn{ padding:7px 10px; border-radius:10px; }

/* icon links only */
body[data-route="coin"] .coinPageV8 .csIconRow{ display:flex; gap:10px; flex-wrap:wrap; }
body[data-route="coin"] .coinPageV8 .csIconLink{
  width:42px; height:42px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.03);
  display:flex; align-items:center; justify-content:center;
  text-decoration:none;
  color: var(--text);
  font-size:18px;
}
body[data-route="coin"] .coinPageV8 .csIconLink:hover{ background:rgba(255,255,255,.06); }

/* converter */
body[data-route="coin"] .coinPageV8 .csConv{
  display:grid;
  grid-template-columns: 1fr auto 1fr auto;
  gap:10px;
  align-items:center;
}
body[data-route="coin"] .coinPageV8 .csInp{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: var(--panel);
  color: var(--text);
  outline:none;
}
body[data-route="coin"] .coinPageV8 .csConvMid{ color:var(--muted); font-weight:600; }
body[data-route="coin"] .coinPageV8 .csConvCur{ color:var(--muted); font-size:12px; }

/* chart */
body[data-route="coin"] .coinPageV8 .csChartHead{
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  align-items:flex-start;
}
body[data-route="coin"] .coinPageV8 .csChartChips{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end;
}
body[data-route="coin"] .coinPageV8 .csChip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor:pointer;
  font-weight:600; /* regular */
}
body[data-route="coin"] .coinPageV8 .csChip.active{
  background: var(--accent-soft-2);
  border-color: rgba(245,164,29,.45);
}
body[data-route="coin"] .coinPageV8 .csChartMeta{
  margin-top:10px;
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background: rgba(255,255,255,.02);
}
body[data-route="coin"] .coinPageV8 .csMetaVal{ font-size:16px; font-weight:650; }
body[data-route="coin"] .coinPageV8 .csMetaDate{ color:var(--muted); font-size:12px; }
body[data-route="coin"] .coinPageV8 .csChartWrap{
  margin-top:12px;
  border-radius:16px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  overflow:hidden;
}

/* sub tabs under chart */
body[data-route="coin"] .coinPageV8 .csSubTabs{ display:flex; gap:10px; flex-wrap:wrap; }
body[data-route="coin"] .coinPageV8 .csSubTab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  border-radius:999px;
  padding:8px 14px;
  cursor:pointer;
  font-weight:600;
}
body[data-route="coin"] .coinPageV8 .csSubTab.active{
  background: var(--accent-soft-2);
  border-color: rgba(245,164,29,.45);
}

/* markets table in B */
body[data-route="coin"] .coinPageV8 .csTableWrap{
  width:100%;
  overflow:auto;
  border-radius:16px;
  border:1px solid var(--border);
}
body[data-route="coin"] .coinPageV8 .csTbl{
  width:100%;
  border-collapse:collapse;
  min-width:760px;
}
body[data-route="coin"] .coinPageV8 .csTbl th,
body[data-route="coin"] .coinPageV8 .csTbl td{
  padding:12px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  white-space:nowrap;
}
body.light[data-route="coin"] .coinPageV8 .csTbl th,
body.light[data-route="coin"] .coinPageV8 .csTbl td{
  border-bottom:1px solid rgba(15,23,42,.08);
}
body[data-route="coin"] .coinPageV8 .csEx{ display:flex; align-items:center; gap:10px; }
body[data-route="coin"] .coinPageV8 .csExLogo{
  width:26px; height:26px;
  border-radius:10px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
body[data-route="coin"] .coinPageV8 .csExLogo img{ width:100%; height:100%; object-fit:cover; }
body[data-route="coin"] .coinPageV8 .csExPh{ font-size:12px; opacity:.8; }

/* sentiment */
body[data-route="coin"] .coinPageV8 .csVoteBar{
  display:flex;
  height:10px;
  border-radius:999px;
  overflow:hidden;
  background: rgba(255,255,255,.08);
}
body[data-route="coin"] .coinPageV8 .csVoteBull{ background: rgba(25,195,125,.75); }
body[data-route="coin"] .coinPageV8 .csVoteBear{ background: rgba(255,77,77,.75); }
body[data-route="coin"] .coinPageV8 .csVoteNums{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
}
body[data-route="coin"] .coinPageV8 .csBtn2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
body[data-route="coin"] .coinPageV8 .csBtnBull{ border-color: rgba(25,195,125,.45); background: rgba(25,195,125,.10); }
body[data-route="coin"] .coinPageV8 .csBtnBear{ border-color: rgba(255,77,77,.45); background: rgba(255,77,77,.10); }

/* AI dots */
body[data-route="coin"] .coinPageV8 .csGrid2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width: 1100px){
  body[data-route="coin"] .coinPageV8 .csGrid2{ grid-template-columns:1fr; }
}
body[data-route="coin"] .coinPageV8 .csPillRow{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; }
body[data-route="coin"] .coinPageV8 .csDot{ width:8px; height:8px; border-radius:999px; margin-top:6px; }
body[data-route="coin"] .coinPageV8 .upDot{ background: var(--good); }
body[data-route="coin"] .coinPageV8 .downDot{ background: var(--bad); }

/* news items */
body[data-route="coin"] .coinPageV8 .csNewsItem{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  border-radius:16px;
  padding:12px;
}
body[data-route="coin"] .coinPageV8 .csNewsTop{
  display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="coin"] .coinPageV8 .csNewsTitle{ font-weight:650; }

/* colors */
body[data-route="coin"] .coinPageV8 .up{ color: var(--good); }
body[data-route="coin"] .coinPageV8 .down{ color: var(--bad); }
body[data-route="coin"] .coinPageV8 .warn{ color: #facc15; }

/* FIX: popup theme text colors */
body[data-route="coin"] .csCoinModal__card{
  color: var(--text);
}
body.light[data-route="coin"] .csCoinModal__card{
  color: var(--text);
}


/* ===========================
   COIN PAGE v10 — BLOCK B NAV + CMC CHART UI
   =========================== */
body[data-route="coin"] .container{ max-width:none; margin:0; padding:0; }
@media (max-width: 1400px){ body[data-route="coin"] .container{ padding:0; } }
@media (max-width: 980px){ body[data-route="coin"] .container{ padding:0; } }

body[data-route="coin"] .csGridABC{
  display:grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "b a" "b c";
  gap:14px;
  align-items:start;
}
@media (max-width:1200px){
  body[data-route="coin"] .csGridABC{
    grid-template-columns:1fr;
    grid-template-areas:"b" "a" "c";
  }
}

/* top block-B nav like screenshot */
body[data-route="coin"] .csBnav{
  display:flex; gap:26px; align-items:center;
  border-bottom:1px solid var(--border);
  padding:6px 2px 10px;
  position:sticky; top:0; z-index:50;
  background:var(--panel);
}
body[data-route="coin"] .csBnav--compact{
  border-bottom:0; padding:0; position:static; background:transparent;
}
body[data-route="coin"] .csBnavItem{
  background:transparent; border:0; padding:10px 2px;
  font-weight:650; color:var(--text);
  opacity:.85; cursor:pointer;
}
body[data-route="coin"] .csBnavItem.active{
  opacity:1;
  box-shadow: inset 0 -3px 0 var(--accent-strong);
}
body[data-route="coin"] .csBnavItem:hover{ opacity:1; }

/* CMC-like top stats row */
body[data-route="coin"] .csTopStats{
  margin-top:12px !important;
  display:grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap:12px !important;
}
body[data-route="coin"] .csTopStat{
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  background:var(--card);
  box-shadow: var(--shadow);
}
body[data-route="coin"] .csTopStatLabel{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.2px;
}
body[data-route="coin"] .csTopStatValue{
  margin-top:6px;
  font-size:16px;
  font-weight:650;
}
@media (max-width: 1100px){
  body[data-route="coin"] .csTopStats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 720px){
  body[data-route="coin"] .csTopStats{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }
  body[data-route="coin"] .csTopStat{ padding:10px 12px; }
  body[data-route="coin"] .csTopStatValue{ font-size:14px; }
}

/* sticky header */
body[data-route="coin"] .csStickyBar{
  position:sticky; top:0; z-index:200;
  margin-top:10px; padding:10px 12px;
  border-radius:14px; border:1px solid var(--border);
  background: rgba(10,14,30,.72); backdrop-filter: blur(10px);
  display:flex; justify-content:space-between; gap:12px; align-items:center;
}
body.light[data-route="coin"] .csStickyBar{ background: rgba(246,248,255,.86); }
body[data-route="coin"] .csStickyBar.hidden{ display:none; }
body[data-route="coin"] .csStickyLeft{ display:flex; align-items:center; gap:10px; min-width:240px; }
body[data-route="coin"] .csStickyLogo{ width:32px; height:32px; border-radius:999px; }
body[data-route="coin"] .csStickyTitle{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body[data-route="coin"] .csStickyPriceRow{ display:flex; gap:10px; align-items:center; margin-top:2px; }
body[data-route="coin"] .csStickyPrice{ font-size:14px; font-weight:650; }

/* watchlist count pill */
body[data-route="coin"] .csFavPill{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; min-width:42px; padding:0 10px;
  border-radius:999px; border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  font-weight:650;
}

/* chart controls row */
body[data-route="coin"] .csChartTopRow{
  margin-top:12px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap;
}
body[data-route="coin"] .csChartLeft{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
body[data-route="coin"] .csChartRight{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

body[data-route="coin"] .csSeg{
  display:flex; gap:8px; align-items:center;
  padding:4px; border:1px solid var(--border); border-radius:14px;
  background: rgba(255,255,255,.02);
}
body[data-route="coin"] .csSegBtn{
  border:0; background:transparent; padding:8px 12px; border-radius:12px;
  font-weight:650; cursor:pointer; opacity:.85; color:var(--text);
}
body[data-route="coin"] .csSegBtn.active{
  opacity:1; background: rgba(148,163,184,.15);
}

body[data-route="coin"] .csTvBtn{
  border:1px solid var(--border); border-radius:14px;
  background: rgba(255,255,255,.02);
  padding:8px 12px; font-weight:650; cursor:pointer; color:var(--text);
}

body[data-route="coin"] .csTf{ display:flex; gap:8px; align-items:center; }
body[data-route="coin"] .csTfBtn{
  border:0; background:transparent; padding:8px 10px; border-radius:12px;
  font-weight:650; cursor:pointer; opacity:.8; color:var(--text);
}
body[data-route="coin"] .csTfBtn.active{ opacity:1; background: rgba(148,163,184,.15); }

body[data-route="coin"] .csGhostBtn{
  border:1px solid var(--border); border-radius:14px;
  background: rgba(255,255,255,.02);
  padding:8px 12px; font-weight:650; cursor:pointer; color:var(--text);
}
body[data-route="coin"] .csGhostBtn.active{ background: rgba(148,163,184,.15); }

body[data-route="coin"] .csGhostIcon{
  border:1px solid var(--border); border-radius:14px;
  background: rgba(255,255,255,.02);
  width:42px; height:38px; cursor:pointer; color:var(--text);
}

/* chart watermark bottom-right */
body[data-route="coin"] .csChartWrap{ position:relative; }
body[data-route="coin"] .csChartWatermark{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(240px, 42%);
  height:auto;
  opacity:.08;
  pointer-events:none;
  filter:none;
}
body.light[data-route="coin"] .csChartWatermark{ opacity:.12; }

/* markets filters + cards */
body[data-route="coin"] .csMktTop{
  margin-top:10px;
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
body[data-route="coin"] .csMktTabs{ display:flex; gap:8px; align-items:center; }
body[data-route="coin"] .csMktTab{
  border:1px solid var(--border); border-radius:14px;
  background: rgba(255,255,255,.02);
  padding:8px 12px; font-weight:650; cursor:pointer; color:var(--text);
}
body[data-route="coin"] .csMktTab.active{ background: rgba(148,163,184,.15); }

body[data-route="coin"] .csMktCards{
  margin-top:12px;
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
}
@media (max-width: 900px){
  body[data-route="coin"] .csMktCards{ grid-template-columns:1fr; }
}
body[data-route="coin"] .csMktCard{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background: rgba(255,255,255,.02);
}
body[data-route="coin"] .csMktCardMain{
  margin-top:6px; font-weight:750; font-size:14px;
}

/* markets list (NO horizontal scroll) */
body[data-route="coin"] .csMktGridHead{
  display:grid;
  grid-template-columns: .4fr 2.2fr 1fr 1fr .8fr 1fr;
  gap:10px;
  padding:10px 10px;
  border:1px solid var(--border);
  border-radius:14px 14px 0 0;
  background: rgba(255,255,255,.02);
  font-weight:700;
}
body[data-route="coin"] .csMktGridHead > div{ white-space:nowrap; }
body[data-route="coin"] .csMktList{
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 14px 14px;
  overflow:hidden;
}
body[data-route="coin"] .csMktRow{
  display:grid;
  grid-template-columns: .4fr 2.2fr 1fr 1fr .8fr 1fr;
  gap:10px;
  padding:10px 10px;
  align-items:center;
  border-top:1px solid rgba(148,163,184,.14);
}
body[data-route="coin"] .csMktNum{
  color:var(--muted);
  font-size:12px;
}
body[data-route="coin"] .csMktRow:hover{ background: rgba(148,163,184,.06); }
body[data-route="coin"] .r{ text-align:right; }

body[data-route="coin"] .csMktEx{
  display:flex; align-items:center; gap:10px; min-width:0;
}
body[data-route="coin"] .csMktExName{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
body[data-route="coin"] .csMktPair{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* responsive: turn into stacked rows on small screens */
@media (max-width: 820px){
  body[data-route="coin"] .csMktGridHead{ display:none; }
  body[data-route="coin"] .csMktRow{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "num ex"
      "pair pair"
      "price vol"
      "spread spread";
    gap:8px;
  }
  body[data-route="coin"] .csMktNum{ grid-area:num; }
  body[data-route="coin"] .csMktEx{ grid-area:ex; }
  body[data-route="coin"] .csMktPair{ grid-area:pair; }
  body[data-route="coin"] .csMktRow > :nth-child(4){ grid-area:price; text-align:left; }
  body[data-route="coin"] .csMktRow > :nth-child(6){ grid-area:vol; text-align:right; }
  body[data-route="coin"] .csMktRow > :nth-child(5){ grid-area:spread; text-align:left; }
}

/* buy modal buttons */
body[data-route="coin"] .csCoinModalBtn{
  display:flex; align-items:center; justify-content:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  color: var(--text);
  text-decoration:none;
  font-weight:650;
}
body[data-route="coin"] .csCoinModalBtn:hover{ background: rgba(255,255,255,.06); }

body[data-route="coin"] .csBuyLogo{
  width:26px; height:26px; border-radius:999px;
  object-fit:cover; flex:0 0 auto;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
}
body[data-route="coin"] .csBuyLogo--fallback{
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800;
  color: var(--accent-strong);
  background: var(--accent-soft);
}


/* =========================================================
   COIN PAGE v11 — CMC LOOK OVERRIDE PACK (PASTE AT END)
   Fixes conflicts between v8 + v10 blocks in your styles.css
   - consistent margins (CMC-like)
   - sticky nav + sticky header not hidden behind topbar
   - watermark uses theme SVGs (no invert filter)
   - unify grid widths & paddings
========================================================= */

/* 1) Container spacing */
body[data-route="coin"] .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(14px, 5vw, 80px) !important;
}

/* 2) Page wrapper padding */
body[data-route="coin"] .coinPageV8{
  padding: 16px 0 !important;
}

/* 3) 2-column grid: main + sidebar */
body[data-route="coin"] .coinPageV8 .csGridABC,
body[data-route="coin"] .csGridABC{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 360px !important;
  grid-template-areas: "b a" "b c" !important;
  gap: 14px !important;
  align-items: start !important;
}
body[data-route="coin"] #csB{ grid-area: b !important; }
body[data-route="coin"] #csA{ grid-area: a !important; }
body[data-route="coin"] #csC{ grid-area: c !important; }
@media (max-width: 1200px){
  body[data-route="coin"] .coinPageV8 .csGridABC,
  body[data-route="coin"] .csGridABC{
    grid-template-columns: 1fr !important;
    grid-template-areas: "b" "a" "c" !important;
  }
}

/* 4) Block-B top nav (sticky like screenshot, BELOW topbar) */
body[data-route="coin"] .csBnav{
  position: sticky !important;
  top: 64px !important;           /* ✅ topbar offset */
  z-index: 80 !important;
  background: var(--panel) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 8px 2px 10px !important;
}

/* Hero + price CMC feel */
body[data-route="coin"] .csHeroTop{
  align-items:center !important;
}
body[data-route="coin"] .coinPageV8 .csHeroTitle{
  font-weight:600 !important;
  font-size:20px;
}
body[data-route="coin"] .coinPageV8 .csTag{
  font-size:11px;
  padding:3px 8px;
}
body[data-route="coin"] .coinPageV8 .csPriceRow{
  margin-top:10px !important;
}
body[data-route="coin"] .coinPageV8 .csBigPrice{
  font-size:48px !important;
}
body[data-route="coin"] .coinPageV8 .csBigPct span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(255,255,255,.06);
  font-weight:700;
}
body[data-route="coin"] .coinPageV8 .csBigPct .up{
  background:rgba(25,195,125,.18);
  color:var(--good);
}
body[data-route="coin"] .coinPageV8 .csBigPct .down{
  background:rgba(255,77,77,.18);
  color:var(--bad);
}

/* Compact nav inside sticky header should NOT be sticky */
body[data-route="coin"] .csBnav--compact{
  position: static !important;
  top: auto !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* Nav items CMC spacing */
body[data-route="coin"] .csBnavItem{
  padding: 10px 2px !important;
  font-weight: 650 !important;
  opacity: .82 !important;
}
body[data-route="coin"] .csBnavItem.active{
  opacity: 1 !important;
  box-shadow: inset 0 -3px 0 var(--accent-strong) !important;
}

/* 5) Sticky header should also sit BELOW topbar */
body[data-route="coin"] .csStickyBar{
  position: sticky !important;
  top: 64px !important;     /* ✅ same offset */
  z-index: 120 !important;
  margin-top: 10px !important;
}

/* 6) Chart block spacing matches CMC */
body[data-route="coin"] .csChartTopRow{
  margin-top: 12px !important;
  gap: 10px !important;
}
body[data-route="coin"] .csChartMeta{
  margin-top: 10px !important;
  padding: 0 !important; /* your coin.js v11 renders meta as clean row, not a boxed card */
  border: 0 !important;
  background: transparent !important;
}

/* ===========================
   Exchanges Page (Premium UI)
   =========================== */
.exPage{ display:grid; gap:16px; }
.exHeader{ display:flex; justify-content:space-between; align-items:flex-end; gap:12px; flex-wrap:wrap; }
.exTitle{ font-size:22px; font-weight:900; }
.exSub{ color:var(--muted); font-size:13px; margin-top:4px; }
.exSearchWrap{ min-width:220px; }
.exSearch{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text);
  outline:none;
}
.exSearch:focus{ border-color:rgba(245,164,29,.5); box-shadow:0 0 0 3px var(--accent-soft); }

.exTopGrid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 1100px){ .exTopGrid{ grid-template-columns:1fr 1fr; } }
@media (max-width: 700px){ .exTopGrid{ grid-template-columns:1fr; } }

.exCard{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}
.exCardHead{ display:flex; align-items:center; gap:10px; }
.exLogo{
  width:36px; height:36px; border-radius:12px;
  object-fit:cover; border:1px solid var(--border);
  background:rgba(255,255,255,.04);
}
.exName{ font-weight:800; }
.exMeta{ color:var(--muted); font-size:12px; }
.exVol{ font-size:18px; font-weight:900; margin-top:10px; }
.exVolSub{ color:var(--muted); font-size:12px; margin-top:4px; }

.exTable{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.exRow{
  display:grid;
  grid-template-columns: 50px minmax(220px,1.3fr) 90px 140px 140px 90px 220px;
  gap:10px;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
body.light .exRow,
body[data-theme="light"] .exRow{
  border-bottom:1px solid rgba(15,23,42,.08);
}
.exRow.exHead{
  font-size:12px; color:var(--muted); font-weight:700;
  background:rgba(255,255,255,.02);
}
.exExchange{ display:flex; align-items:center; gap:10px; }
.exExTxt{ display:flex; flex-direction:column; min-width:0; }
.exTrust, .exVolUsd, .exVolBtc, .exYear{ font-weight:650; }
.exBtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 12px; border-radius:12px;
  border:1px solid rgba(245,164,29,.45);
  background:var(--accent-soft);
  color:var(--accent-strong);
  text-decoration:none; font-weight:750;
}
.exBtn:hover{ background:var(--accent-soft-2); }
.exMuted{ color:var(--muted); }

@media (max-width: 1100px){
  .exRow{ grid-template-columns: 50px minmax(200px,1.2fr) 80px 120px 120px 80px; }
  .exAction{ grid-column: 2 / -1; justify-self:start; }
}
@media (max-width: 760px){
  .exRow{ grid-template-columns: 40px minmax(180px,1fr) 80px 100px; }
  .exVolUsd, .exVolBtc, .exYear, .exAction{ display:none; }
}

/* 7) Watermark placement override */
body[data-route="coin"] .csChartWatermark{
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(240px, 42%) !important;
  opacity: .10 !important;
  filter: none !important;     /* ✅ no invert */
}
body.light[data-route="coin"] .csChartWatermark{
  opacity: .20 !important;
  filter: brightness(.40) contrast(1.12) !important;
}

/* 8) Compare dropdown panel positioning */
body[data-route="coin"] .csCompareWrap{ position: relative !important; }
body[data-route="coin"] .csComparePanel{
  top: 42px !important;
  right: 0 !important;
  z-index: 200 !important;
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* 9) Section titles inside Block-B (clean + consistent) */
body[data-route="coin"] .csSectionTitle{
  font-size: 16px !important;
  font-weight: 750 !important;
  margin: 16px 0 10px !important;
}
@media (max-width: 820px){
  body[data-route="coin"] .coinPageV8 .csH6{ font-size:15px; }
  body[data-route="coin"] .csSectionTitle{ font-size:15px !important; }
}

/* 10) Markets list smoothing */
body[data-route="coin"] .csMktGridHead{
  border-radius: 14px 14px 0 0 !important;
}
body[data-route="coin"] .csMktList{
  border-radius: 0 0 14px 14px !important;
}

/* 11) Inputs used in v11 sections (Yield/Unlocks) */
body[data-route="coin"] .csInp{
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid var(--border) !important;
  background: var(--panel) !important;
  color: var(--text) !important;
  outline: none !important;
}

/* 12) Mobile: give breathing room for sticky elements */
@media (max-width: 980px){
  body[data-route="coin"] .csBnav{ top: 58px !important; }     /* smaller topbar on mobile */
  body[data-route="coin"] .csStickyBar{ top: 58px !important; }
}

/* ======================================================================
   COIN PAGE — CoinMarketCap Classic (targeted)
   ====================================================================== */
body[data-route="coin"] .coinPageCMC .csHeroTop{
  align-items:flex-end;
  gap:16px;
}
body[data-route="coin"] .coinPageCMC #csCmpWrap,
body[data-route="coin"] .coinPageCMC #csCmpChipSlot{
  display:none !important;
}
body[data-route="coin"] .coinPageCMC .csBnav{
  background:transparent;
  border-bottom:1px solid var(--border);
  padding:6px 2px 10px;
}
body[data-route="coin"] .coinPageCMC .csBnavItem{
  font-weight:600;
  color:var(--muted);
  opacity:1 !important;
}
body[data-route="coin"] .coinPageCMC .csBnavItem.active{
  color:var(--text);
  box-shadow: inset 0 -2px 0 var(--accent-strong);
  opacity:1 !important;
}
body[data-route="coin"] .coinPageCMC .csGridABC{
  display:grid;
  grid-template-columns: minmax(0,20%) minmax(0,55%) minmax(0,25%);
  grid-template-areas: "a b c";
  gap:14px;
}
body[data-route="coin"] .coinPageCMC #csB{ grid-area:b; }
body[data-route="coin"] .coinPageCMC #csA{ grid-area:a; }
body[data-route="coin"] .coinPageCMC #csC{ grid-area:c; }
body[data-route="coin"] .coinPageCMC .csHeroTitle{
  font-size:20px;
  font-weight:600;
}
body[data-route="coin"] .coinPageCMC .csTag{
  font-size:11px;
  padding:3px 8px;
  border-radius:8px;
}
body[data-route="coin"] .coinPageCMC .csHeroRight .btn,
body[data-route="coin"] .coinPageCMC .csHeroRight .csWatchBtn{
  height:36px;
  padding:0 12px;
  border-radius:10px;
}
body[data-route="coin"] .coinPageCMC .csPriceRow{
  margin-top:8px !important;
  gap:12px;
}
body[data-route="coin"] .coinPageCMC .csBigPrice{
  font-size:46px !important;
  font-weight:700;
}
body[data-route="coin"] .coinPageCMC .csBigPct span{
  font-weight:600;
  padding:6px 10px;
  border-radius:10px;
}

/* Top stats row (CMC-like) */
body[data-route="coin"] .coinPageCMC .csTopStats{
  margin-top:12px !important;
  display:none !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap:0 !important;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
}
body[data-route="coin"] .coinPageCMC .csTopStat{
  padding:12px 14px;
  border-right:1px solid var(--border);
  background:transparent;
  box-shadow:none;
}
body[data-route="coin"] .coinPageCMC .csTopStat:last-child{ border-right:0; }
body[data-route="coin"] .coinPageCMC .csTopStatLabel{
  font-size:11px;
  text-transform:none;
  letter-spacing:0;
  color:var(--muted);
  font-weight:500;
}
body[data-route="coin"] .coinPageCMC .csTopStatValue{
  font-size:15px;
  font-weight:600;
  margin-top:6px;
}
body[data-route="coin"] .coinPageCMC .csStatsCard{
  display:block;
}
body[data-route="coin"] .coinPageCMC .csStatDelta{
  margin-left:6px;
  font-size:11px;
  font-weight:600;
}
body[data-route="coin"] .coinPageCMC .csStatDelta.up{ color:var(--good); }
body[data-route="coin"] .coinPageCMC .csStatDelta.down{ color:var(--bad); }
body[data-route="coin"] .coinPageCMC .csStatDelta.muted{ color:var(--muted); }
body[data-route="coin"] .coinPageCMC .csStatPct{
  margin-left:6px;
  font-size:11px;
  color:var(--muted);
}
body[data-route="coin"] .coinPageCMC .csSigGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
body[data-route="coin"] .coinPageCMC .csSigMeta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}
/* Equal spacing for Column B blocks */
body[data-route="coin"] .coinPageV8.coinPageCMC #csB .csBcard{
  margin-top:14px;
}
body[data-route="coin"] .coinPageV8.coinPageCMC #csB .csBcard:first-child{
  margin-top:0;
}
body.light[data-route="coin"] .csStickyBar{
  background: rgba(248,250,252,.96) !important;
  border-color: rgba(148,163,184,.35) !important;
  color: var(--text) !important;
}
body.light[data-route="coin"] .coinPageV8 .csStickyBar{
  background: rgba(248,250,252,.96) !important;
  border-color: rgba(148,163,184,.35) !important;
  color: var(--text) !important;
}
body.light[data-route="coin"] .csStickyBar .csStickyPct{
  color: var(--text) !important;
}
body.light[data-route="coin"] .csStickyBar .btn.primary{
  background: var(--accent-strong) !important;
  color: #1b1b1b !important;
  border-color: transparent !important;
}
body.light[data-route="coin"] .csStickyBar .btn,
body.light[data-route="coin"] .csStickyBar .csWatchBtn{
  background: rgba(0,0,0,.02) !important;
}
body[data-route="coin"] .csSupplyBar{
  height:8px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(255,255,255,.04);
  margin:6px 0 10px;
  overflow:hidden;
  width:140px;
}
body[data-route="coin"] .csSupplyBar span{
  display:block;
  height:100%;
  background: linear-gradient(90deg, var(--accent-strong), rgba(245,164,29,.35));
}
body[data-route="coin"] .csInfo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1px solid var(--border);
  font-size:11px;
  margin-left:6px;
  color:var(--muted);
  cursor:help;
  position:relative;
}
body[data-route="coin"] .csInfo:hover{
  color:var(--text);
}
body[data-route="coin"] .csInfo::after{
  content: attr(data-tip);
  position:absolute;
  left:50%;
  bottom:140%;
  transform:translateX(-50%);
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  width:220px;
  max-width:260px;
  white-space:normal;
  opacity:0;
  pointer-events:none;
  box-shadow: var(--shadow);
  transition: opacity .15s ease;
  z-index:200;
}
body[data-route="coin"] .csInfo:hover::after{ opacity:1; }
body[data-route="coin"] .csCircVal{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
  min-width:0;
}
body[data-route="coin"] .csCircTop{
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-route="coin"] .csCircVal .csSupplyBar{
  align-self:flex-end;
}

/* Mobile CMC-like compact layout tweaks */
@media (max-width: 820px){
  body[data-route="coin"] .coinPageCMC .csHeroTop{
    gap:8px;
    align-items:flex-start;
  }
  body[data-route="coin"] .coinPageCMC .csHeroLogo{
    width:34px; height:34px;
  }
  body[data-route="coin"] .coinPageCMC .csHeroTitle{
    font-size:16px;
  }
  body[data-route="coin"] .coinPageCMC .csTag{
    font-size:10px;
    padding:2px 6px;
  }
  body[data-route="coin"] .coinPageCMC .csHeroRight{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  body[data-route="coin"] .coinPageCMC .csHeroRight .btn.primary{
    height:34px;
    padding:0 12px;
  }
  body[data-route="coin"] .coinPageCMC .csPriceRow{
    margin-top:8px !important;
  }
  body[data-route="coin"] .coinPageCMC .csBigPrice{
    font-size:30px !important;
  }
  body[data-route="coin"] .coinPageCMC .csBigPct span{
    font-size:12px;
    padding:6px 10px;
  }
  body[data-route="coin"] .coinPageCMC #csB .csBcard{
    padding:12px;
  }
  body[data-route="coin"] .coinPageCMC .csTopStat{
    min-width:140px;
  }
  body[data-route="coin"] .coinPageCMC .csTopStatValue{
    font-size:13px;
  }
}

/* Chart tabs & timeframe (CMC classic) */
body[data-route="coin"] .coinPageCMC .csChartTopRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}
body[data-route="coin"] .coinPageCMC .csChartLeft{
  display:flex;
  align-items:center;
  gap:8px;
}
body[data-route="coin"] .coinPageCMC .csChartRight{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
body[data-route="coin"] .coinPageCMC .csSeg{
  background:transparent;
  border:0;
  padding:0;
}
body[data-route="coin"] .coinPageCMC .csSegBtn{
  background:transparent;
  border:0;
  padding:8px 10px;
  font-weight:600;
  color:var(--muted);
  border-bottom:2px solid transparent;
}
body[data-route="coin"] .coinPageCMC .csSegBtn.active{
  color:var(--text);
  border-bottom-color:var(--accent-strong);
}
body[data-route="coin"] .coinPageCMC .csTvBtn{
  border:0;
  background:transparent;
  color:var(--muted);
  padding:8px 10px;
  font-weight:600;
}
body[data-route="coin"] .coinPageCMC .csTf{
  border:1px solid var(--border);
  background:rgba(255,255,255,.02);
  border-radius:12px;
  padding:4px;
}
body[data-route="coin"] .coinPageCMC .csTfBtn{
  font-size:12px;
  font-weight:600;
  padding:6px 10px;
  border-radius:10px;
}
body[data-route="coin"] .coinPageCMC .csTfBtn.active{
  background:rgba(255,255,255,.10);
  color:var(--text);
}
body[data-route="coin"] .coinPageCMC #csLogBtn{
  height:32px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  font-weight:600;
}
body[data-route="coin"] .coinPageCMC #csLogBtn.active{
  color:var(--text);
  border-color:rgba(245,164,29,.35);
  background:rgba(245,164,29,.12);
}
body[data-route="coin"] .coinPageCMC .csChartMeta{
  margin-top:8px;
  padding:0;
  border:0;
  background:transparent;
}
body[data-route="coin"] .coinPageCMC .csChartWrap{
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--card);
}

/* Markets table (CMC feel) */
body[data-route="coin"] .coinPageCMC .csTbl{
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
}
body[data-route="coin"] .coinPageCMC .csTbl th{
  background:rgba(255,255,255,.03);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
body[data-route="coin"] .coinPageCMC .csTbl td{
  font-size:13px;
}
body[data-route="coin"] .coinPageCMC .csTbl tr:hover{
  background:rgba(255,255,255,.04);
}

/* About / Community cards */
body[data-route="coin"] .coinPageCMC .csAcard,
body[data-route="coin"] .coinPageCMC .csCcard,
body[data-route="coin"] .coinPageCMC .card{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--card);
  box-shadow: var(--shadow);
}

@media (max-width: 1100px){
  body[data-route="coin"] .coinPageCMC .csGridABC{
    grid-template-columns: 1fr;
    grid-template-areas: "b" "a" "c";
  }
  body[data-route="coin"] .coinPageCMC .csTopStats{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 820px){
  body[data-route="coin"] .coinPageCMC .csTopStats{
    display:flex !important;
    overflow-x:auto;
    gap:10px !important;
    padding:10px !important;
  }
  body[data-route="coin"] .coinPageCMC .csSigGrid{
    grid-template-columns: 1fr;
  }
  body[data-route="coin"] .coinPageCMC .csChartTopRow{
    flex-direction:column;
    align-items:flex-start;
  }
  body[data-route="coin"] .coinPageCMC .csChartRight{
    width:100%;
    justify-content:space-between;
  }
  body[data-route="coin"] .coinPageCMC .csTf{
    width:100%;
    overflow-x:auto;
  }
  body[data-route="coin"] .coinPageCMC #csLogBtn{
    align-self:flex-start;
  }
  body[data-route="coin"] .coinPageCMC .csTopStat{
    min-width:160px;
    border-right:0;
    border:1px solid var(--border);
    border-radius:12px;
  }
  body[data-route="coin"] .coinPageCMC .csMobileTabs{
    border-bottom:1px solid var(--border);
  }
  body[data-route="coin"] .coinPageCMC .csMobileTab.active{
    box-shadow: inset 0 -2px 0 var(--accent-strong);
  }
  body[data-route="coin"] .coinPageCMC .csBigPrice{ font-size:32px !important; }
}

/* Mobile coin page tweaks per sketches */
@media (max-width: 820px){
  body[data-route="coin"] #csTopStats{ display:none !important; }
  body[data-route="coin"] #cCats{ display:none !important; }
  body[data-route="coin"] .csDesktopOnly{ display:none !important; }
  body[data-route="coin"] .csMobileOnly{ display:block !important; }

  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTop{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "menu menu"
      "left right";
    align-items:center !important;
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
  }
  body[data-route="coin"] #csMobileTabs{
    grid-area: menu;
    margin-bottom:4px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLeft{
    grid-area:left;
    flex:1 1 auto;
    min-width:0;
    align-items:flex-start;
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:4px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroNames{
    grid-column:2;
    grid-row:1;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLogo{
    grid-row:1 / span 2;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight{
    grid-area:right;
    margin-left:auto;
    justify-content:flex-end;
    gap:8px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight .btn.primary{
    height:34px;
    padding:0 12px;
    border-radius:12px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle #cName{
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle #cSym,
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle #cRank{
    white-space:nowrap;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle .csTag{
    background:transparent;
    border:0;
    padding:0;
    font-size:11px;
    color:var(--muted);
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTop .csPriceRow{
    width:100%;
    margin-top:0 !important;
    gap:8px;
    align-items:baseline;
    grid-column:2;
    grid-row:2;
    justify-content:flex-start;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csBigPrice{ font-size:22px !important; }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csBigPct span{
    font-size:11px;
    padding:0;
    background:transparent;
    border:0;
  }

  body[data-route="coin"] .csStickyMid{
    display:block !important;
    width:100%;
    overflow-x:auto;
    white-space:nowrap;
    border-top:1px solid var(--border);
    padding-top:6px;
  }
  body[data-route="coin"] .csStickyBar{
    display:grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "left right"
      "menu menu";
    align-items:center !important;
    gap:8px !important;
    position:fixed !important;
    top:60px !important;
    left:12px;
    right:12px;
    width:auto;
    z-index:999;
  }
  body[data-route="coin"] .csStickyLeft{ min-width:0; grid-area:left; }
  body[data-route="coin"] .csStickyNames{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  body[data-route="coin"] .csStickyTitle{
    display:flex;
    align-items:center;
    gap:6px;
  }
  body[data-route="coin"] .csStickyTitle #cName2,
  body[data-route="coin"] .csStickyTitle #cRank2{
    display:none !important;
  }
  body[data-route="coin"] .csStickyTitle #cSym2{
    background:transparent;
    border:0;
    padding:0;
    font-size:11px;
    color:var(--muted);
  }
  body[data-route="coin"] .csStickyPriceRow{
    margin-top:0;
    font-size:12px;
    display:inline-flex;
    gap:6px;
    align-items:baseline;
  }
  body[data-route="coin"] .csStickyPrice{ font-size:13px; }
  body[data-route="coin"] .csStickyPct{
    font-size:11px;
    background:transparent !important;
    padding:0 !important;
  }
  body[data-route="coin"] .csStickyRight{
    grid-area:right;
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-end;
  }
  body[data-route="coin"] .csStickyRight .csWatchBtn,
  body[data-route="coin"] .csStickyRight #shareBtn2{
    display:none !important;
  }
}

/* Mobile width fixes: prevent any overflow */
@media (max-width: 820px){
  html, body{ overflow-x:hidden; }
  body[data-route="coin"] .container{ max-width:100% !important; }
  body[data-route="coin"] .coinPageV8{
    padding:10px 12px;
    max-width:100% !important;
  }
  body[data-route="coin"] .coinPageV8 .card,
  body[data-route="coin"] .coinPageV8 .csBcard,
  body[data-route="coin"] .coinPageV8 .csAcard,
  body[data-route="coin"] .coinPageV8 .csCcard,
  body[data-route="coin"] .coinPageV8 .csSectionWrap{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  body[data-route="coin"] .coinPageV8 .cardPad{ padding:12px; }
  body[data-route="coin"] .coinPageV8 .csChartWrap{ overflow:hidden; }
  body[data-route="coin"] .coinPageV8 #mainChart,
  body[data-route="coin"] .coinPageV8 #tvFrame{ width:100% !important; }
  body[data-route="coin"] .coinPageV8 .csTableWrap{ width:100%; overflow-x:auto; }
  body[data-route="coin"] #csConverterCard .csConvGrid{
    grid-template-columns: 1fr 1fr;
    align-items:end;
  }
}

/* Mobile statistics two-column split */
body[data-route="coin"] .csStatsGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  position:relative;
}
body[data-route="coin"] .csStatsGrid::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  background: var(--border);
}
body[data-route="coin"] .csStatsGrid .csRow{
  border-bottom:1px solid var(--border);
  padding-bottom:10px;
}
body[data-route="coin"] .csStatsGrid .csRow:last-child{
  border-bottom:none;
  padding-bottom:0;
}
body[data-route="coin"] .csStatsGrid .csCircVal{
  align-items:flex-start;
}

/* Mobile markets layout */
body[data-route="coin"] .csMktMobile{ display:none; }
body[data-route="coin"] .csMktDesktop{ display:block; }
@media (max-width: 820px){
  body[data-route="coin"] .csMktDesktop{ display:block !important; overflow:hidden; }
  body[data-route="coin"] .csMktMobile{ display:none !important; }
  body[data-route="coin"] .csMktTableScroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  body[data-route="coin"] .csMktGridHead{
    display:grid !important;
    grid-template-columns: .4fr 2.2fr 1fr 1fr .8fr 1fr;
    min-width:720px;
  }
  body[data-route="coin"] .csMktRow{
    grid-template-columns: .4fr 2.2fr 1fr 1fr .8fr 1fr !important;
    grid-template-areas:none !important;
    gap:10px !important;
    min-width:720px;
  }
  body[data-route="coin"] .csMktRow > *{
    grid-area:auto !important;
    white-space:nowrap;
  }
  body[data-route="coin"] .csMktMobileHead{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.3px;
  }
  body[data-route="coin"] .csMktMobileList{
    display:grid;
    gap:0;
  }
  body[data-route="coin"] .csMktRowMobile{
    direction:ltr;
    display:grid;
    grid-template-columns: 20px minmax(0,1.2fr) minmax(0,.9fr) minmax(0,.9fr) minmax(0,.7fr) minmax(0,1fr);
    gap:6px;
    align-items:center;
    padding:10px 12px;
    border-top:1px solid var(--border);
    font-size:11px;
    line-height:1.2;
  }
  body[data-route="coin"] .csMktRowMobile .csMktEx{ display:flex; align-items:center; gap:6px; min-width:0; }
  body[data-route="coin"] .csMktRowMobile .csMktExName{
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body[data-route="coin"] .csMktRowMobile .csMktPair{
    font-size:11px;
  }
  body[data-route="coin"] .csMktRowMobile .r{
    text-align:right;
  }
}

@media (max-width: 820px){
  body[data-route="coin"] .csGridABC{ display:none !important; }
  body[data-route="coin"] .csMobileAfter{
    display:grid !important;
    grid-template-columns: 1fr;
    width:100%;
    max-width:100%;
  }
  body[data-route="coin"] .csMobileAfter > *{ min-width:0; }
}

/* Ensure sticky hidden works even when display is overridden */
body[data-route="coin"] .csStickyBar.hidden{ display:none !important; }

/* Final mobile markets fix: keep table layout + show right columns */
@media (max-width: 820px){
  body[data-route="coin"] .csMktTableScroll{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body[data-route="coin"] .csMktGridHead{
    display:grid !important;
    grid-template-columns: 40px 200px 120px 120px 90px 140px !important;
    min-width:900px !important;
  }
  body[data-route="coin"] .csMktRow{
    display:grid !important;
    grid-template-columns: 40px 200px 120px 120px 90px 140px !important;
    grid-template-areas:none !important;
    min-width:900px !important;
    gap:10px !important;
  }
  body[data-route="coin"] .csMktRow > *{ grid-area:auto !important; }
  body[data-route="coin"] .csMktPair{
    overflow:visible !important;
    text-overflow:clip !important;
  }
}

/* Mobile: force all blocks to fit screen width */
@media (max-width: 820px){
  body[data-route="coin"] .coinPageV8,
  body[data-route="coin"] .coinPageV8 .card,
  body[data-route="coin"] .coinPageV8 .csBcard,
  body[data-route="coin"] .coinPageV8 .csAcard,
  body[data-route="coin"] .coinPageV8 .csCcard,
  body[data-route="coin"] .coinPageV8 .csSectionWrap,
  body[data-route="coin"] .coinPageV8 .csMobileAfter,
  body[data-route="coin"] .coinPageV8 .csHeroTop,
  body[data-route="coin"] .coinPageV8 .csChartWrap,
  body[data-route="coin"] .coinPageV8 #mainChart,
  body[data-route="coin"] .coinPageV8 #tvFrame{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box;
  }
  body[data-route="coin"] .coinPageV8 .csChartWrap{ overflow:hidden; }
  body[data-route="coin"] .coinPageV8 .csMobileTabs{ width:100%; overflow-x:auto; }
  body[data-route="coin"] .coinPageV8 .csBnav{ width:100%; }
  body[data-route="coin"] .csMktTableScroll{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Force 3-column layout (A/B/C) — highest specificity */
body[data-route="coin"] .coinPageV8.coinPageCMC .csGridABC{
  grid-template-columns: minmax(0,20%) minmax(0,55%) minmax(0,25%) !important;
  grid-template-areas: "a b c" !important;
}
body[data-route="coin"] .coinPageV8.coinPageCMC #csA{ grid-area:a !important; }
body[data-route="coin"] .coinPageV8.coinPageCMC #csB{ grid-area:b !important; }
body[data-route="coin"] .coinPageV8.coinPageCMC #csC{ grid-area:c !important; }
@media (max-width: 1100px){
  body[data-route="coin"] .coinPageV8.coinPageCMC .csGridABC{
    grid-template-columns: 1fr !important;
    grid-template-areas: "b" "a" "c" !important;
  }
}

/* =====================
   MOBILE COIN OVERRIDES
   ===================== */
@media (max-width: 820px){
  /* headings */
  body[data-route="coin"] .csH6,
  body[data-route="coin"] .csSectionTitle,
  body[data-route="coin"] .csSentTitle{
    font-weight:800 !important;
  }
  body[data-route="coin"] .csSectionTitle{ font-size:18px; }
  body[data-route="coin"] .csH6{ font-size:18px; }

  /* header alignment */
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTop{
    border:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    padding:0 !important;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLeft{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    column-gap:10px;
    row-gap:4px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroNames{
    grid-column:2;
    grid-row:1;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLogo{
    grid-row:1 / span 2;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle .csTag{
    background:transparent !important;
    border:0 !important;
    padding:0 !important;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTop .csPriceRow{
    grid-column:2;
    grid-row:2;
    margin-top:0 !important;
    align-items:baseline;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csBigPct span{
    background:transparent !important;
    padding:0 !important;
    border:0 !important;
  }

  /* sticky */
  body[data-route="coin"] .csStickyPriceRow{
    display:inline-flex;
    gap:6px;
    align-items:baseline;
  }

  /* converter 2-column */
  body[data-route="coin"] #csConverterCard .csConvGrid{
    grid-template-columns: 1fr 1fr;
    align-items:end;
  }

  /* markets: keep table layout + inner scroll */
  body[data-route="coin"] .csMktGridHead{ display:grid !important; }
  body[data-route="coin"] .csMktRow{
    grid-template-columns: .4fr 2.2fr 1fr 1fr .8fr 1fr !important;
    gap:10px !important;
  }
  body[data-route="coin"] .csMktRow > :nth-child(4),
  body[data-route="coin"] .csMktRow > :nth-child(5),
  body[data-route="coin"] .csMktRow > :nth-child(6){
    grid-area:auto !important;
  }
  body[data-route="coin"] .csMktTableScroll{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* Mobile coin header/layout — sketch-based */
@media (max-width: 820px){
  body[data-route="coin"] .csMobileBar{ display:none !important; }

  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTop{
    padding:10px 12px;
    border:1px solid var(--border);
    border-radius:14px;
    background:var(--card);
    gap:10px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLeft{ flex:1 1 auto; min-width:0; }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroLogo{ width:40px; height:40px; }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroTitle{ font-size:15px; }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight{
    margin-left:auto;
    gap:8px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight .btn,
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight .csWatchBtn{
    height:32px;
    padding:0 10px;
    border-radius:10px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csHeroRight .btn.primary{
    padding:0 12px;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csPriceRow{
    margin-top:10px !important;
  }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csBigPrice{ font-size:30px !important; }
  body[data-route="coin"] .coinPageV8.coinPageCMC .csBigPct span{ font-size:12px; }

  body[data-route="coin"] .coinPageV8.coinPageCMC .csMobileTabs{
    margin-top:8px;
    padding:6px 2px 8px;
  }
}

/* Sticky header light theme (match light background + primary button) */
html[data-theme="light"] body[data-route="coin"] .csStickyBar,
body[data-theme="light"][data-route="coin"] .csStickyBar{
  background: rgba(248,250,252,.96) !important;
  border-color: rgba(148,163,184,.35) !important;
  color: var(--text) !important;
}
html[data-theme="light"] body[data-route="coin"] .csStickyBar .csStickyPct,
body[data-theme="light"][data-route="coin"] .csStickyBar .csStickyPct{
  color: var(--text) !important;
}
html[data-theme="light"] body[data-route="coin"] .csStickyBar .btn.primary,
body[data-theme="light"][data-route="coin"] .csStickyBar .btn.primary{
  background: var(--accent-strong) !important;
  color: #1b1b1b !important;
  border-color: transparent !important;
}
html[data-theme="light"] body[data-route="coin"] .csStickyBar .btn,
html[data-theme="light"] body[data-route="coin"] .csStickyBar .csWatchBtn,
body[data-theme="light"][data-route="coin"] .csStickyBar .btn,
body[data-theme="light"][data-route="coin"] .csStickyBar .csWatchBtn{
  background: rgba(0,0,0,.02) !important;
}

/* Circulating supply bar sizing */
body[data-route="coin"] .csSupplyBar{
  width:100%;
  max-width:180px;
  min-width:120px;
}

/* ======================
   Crypto ETF page
   ====================== */
body[data-route="etf"] .etfPage{ display:grid; gap:14px; }
body[data-route="etf"] .etfHero{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
body[data-route="etf"] .etfTitle{ font-size:22px; font-weight:900; }
body[data-route="etf"] .etfSub{ color:var(--muted); font-size:13px; margin-top:4px; }
body[data-route="etf"] .etfTabs{ display:flex; gap:8px; flex-wrap:wrap; }
body[data-route="etf"] .etfTab{
  border:1px solid var(--border);
  background: rgba(255,255,255,.02);
  padding:8px 12px;
  border-radius:12px;
  font-weight:700;
  color:var(--text);
  cursor:pointer;
}
body[data-route="etf"] .etfTab.active{
  border-color: rgba(245,164,29,.55);
  background: var(--accent-soft-2);
  color: var(--accent-strong);
}
body[data-route="etf"] .etfGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:12px;
}
@media (max-width: 980px){
  body[data-route="etf"] .etfGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  body[data-route="etf"] .etfGrid{ grid-template-columns: 1fr; }
}
body[data-route="etf"] .etfLabel{ color:var(--muted); font-size:12px; }
body[data-route="etf"] .etfValue{ font-size:20px; font-weight:900; margin-top:4px; }
body[data-route="etf"] .etfMeta{ color:var(--muted); font-size:12px; margin-top:6px; }

body[data-route="etf"] .etfChartCard{ padding-bottom:6px; }
body[data-route="etf"] .etfChartHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="etf"] .etfChartTitle{ font-size:16px; font-weight:800; }
body[data-route="etf"] .etfLegend{ color:var(--muted); font-size:12px; display:flex; gap:10px; align-items:center; }
body[data-route="etf"] .etfFlowBadge{
  margin-top:6px;
  display:inline-flex;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(255,255,255,0.12);
}
body[data-route="etf"] .etfChartControls{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:6px;
}
body[data-route="etf"] .etfAgg,
body[data-route="etf"] .etfRange{ display:flex; gap:6px; flex-wrap:wrap; }
body[data-route="etf"] .etfCtl{
  padding:6px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: var(--text);
  font-size:12px;
  cursor:pointer;
}
body[data-route="etf"] .etfCtl.active{
  border-color: rgba(245,164,29,.55);
  background: var(--accent-soft-2);
  color: var(--accent-strong);
}
body[data-route="etf"] .etfCustom{ display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
body[data-route="etf"] .etfCustom input[type="date"]{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding:6px 8px;
  border-radius:10px;
  font-size:12px;
}
body[data-route="etf"] .etfDash{ color:var(--muted); font-size:12px; }
body[data-route="etf"] .etfTravel{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
body[data-route="etf"] .etfTravelLabel{ font-size:12px; color:var(--muted); }
body[data-route="etf"] .etfTravelVal{ font-size:12px; color:var(--text); }
body[data-route="etf"] #etfWindow{ accent-color: var(--accent-strong); }
body[data-route="etf"] .etfDot{
  width:8px; height:8px; border-radius:999px; display:inline-block; margin-right:4px;
}
body[data-route="etf"] .etfDot.up{ background: #22c55e; }
body[data-route="etf"] .etfDot.down{ background: #ef4444; }
body[data-route="etf"] .etfDot.price{ background: #f5a41d; }
body[data-route="etf"] .etfDot.ma{ background: #6366f1; }
body[data-route="etf"] .etfChart{ width:100%; height:260px; }
body[data-route="etf"] .etfLogo{
  width:20px; height:20px; border-radius:999px; object-fit:cover;
  border:1px solid var(--border); margin-right:6px; vertical-align:middle;
}
body[data-route="etf"] .etfTooltip{
  position:absolute;
  background: rgba(10,14,30,.9);
  color: #fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  transform: translateX(-50%);
  pointer-events:none;
  z-index:10;
}
body[data-route="etf"] .etfTooltip.hidden{ display:none; }

body[data-route="etf"] .etfPieTooltip{
  position:absolute;
  background: rgba(10,14,30,.9);
  color: #fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
  z-index:10;
}
body[data-route="etf"] .etfPieTooltip.hidden{ display:none; }

body[data-route="etf"] .etfPieCard{ padding:14px; }
body[data-route="etf"] .etfPieWrap{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:16px;
  align-items:center;
}
@media (max-width: 820px){
  body[data-route="etf"] .etfPieWrap{ grid-template-columns:1fr; }
}
body[data-route="etf"] .etfPie{ width:100%; height:260px; }
body[data-route="etf"] .etfPieLegend{ display:grid; gap:8px; }
body[data-route="etf"] .etfPieItem{
  display:flex; align-items:center; gap:8px;
  font-size:12px; color:var(--text);
}
body[data-route="etf"] .etfPieDot{
  width:10px; height:10px; border-radius:999px; display:inline-block;
}
body[data-route="etf"] .etfPieName{ flex:1; color:var(--text); }
body[data-route="etf"] .etfPiePct{ color:var(--muted); }

body[data-route="etf"] .up{ color:#22c55e; }
body[data-route="etf"] .down{ color:#ef4444; }

body[data-route="etf"] .etfSplit{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
}
@media (max-width: 900px){
  body[data-route="etf"] .etfSplit{ grid-template-columns: 1fr; }
}
body[data-route="etf"] .etfAlerts{
  display:grid;
  gap:10px;
  margin-top:8px;
}
body[data-route="etf"] .etfAlert{
  padding:10px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
body[data-route="etf"] .etfAlertTitle{ font-weight:700; font-size:13px; }
body[data-route="etf"] .etfAlertVal{ font-weight:800; margin-top:4px; }

body[data-route="etf"] .etfAttrib{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:12px;
  margin-top:8px;
}
@media (max-width: 700px){
  body[data-route="etf"] .etfAttrib{ grid-template-columns: 1fr; }
}
body[data-route="etf"] .etfAttribRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 0;
  border-bottom:1px dashed rgba(255,255,255,0.06);
}
body[data-route="etf"] .etfAttribName{ color:var(--text); font-size:13px; }
body[data-route="etf"] .etfAttribVal{ font-weight:700; font-size:13px; }

body[data-route="etf"] .etfFundDetail{ display:grid; gap:12px; }
body[data-route="etf"] .etfFundDetail.hidden{ display:none; }
body[data-route="etf"] .etfFundHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="etf"] .etfFundTitle{ font-weight:900; font-size:18px; }
body[data-route="etf"] .etfFundGrid{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;
}
@media (max-width: 900px){
  body[data-route="etf"] .etfFundGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  body[data-route="etf"] .etfFundGrid{ grid-template-columns: 1fr; }
}
body[data-route="etf"] .etfFundChart{ margin-top:4px; }

body[data-route="etf"] .etfCompare{
  display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; align-items:center;
}
body[data-route="etf"] .etfCompare select{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  color: var(--text);
  padding:8px 10px;
  border-radius:10px;
  font-size:12px;
  min-width:160px;
}
body[data-route="etf"] .etfCompareTable{ margin-top:10px; display:grid; gap:6px; }
body[data-route="etf"] .etfCompareChart{ width:100%; height:180px; margin-top:10px; }
body[data-route="etf"] .etfCompareHeader,
body[data-route="etf"] .etfCompareRow{
  display:grid; grid-template-columns: 1.2fr 1fr 1fr; gap:8px;
}
body[data-route="etf"] .etfCompareHeader{
  font-weight:800; font-size:12px; color: var(--muted);
}
body[data-route="etf"] .etfCompareKey{ color: var(--muted); font-size:12px; }
body[data-route="etf"] .etfCompareVal{ font-weight:700; font-size:13px; }

body[data-route="etf"] .etfImpact{
  display:grid; gap:6px; margin-top:8px;
}
body[data-route="etf"] .etfImpactScore{
  font-size:28px; font-weight:900;
}

body[data-route="etf"] .etfReport{ display:grid; gap:8px; }
body[data-route="etf"] .etfReportHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="etf"] .etfReportActions{ display:flex; gap:8px; flex-wrap:wrap; }
body[data-route="etf"] .etfReportBody{ display:grid; gap:6px; margin-top:6px; }
body[data-route="etf"] .etfReportRow{ font-size:13px; color: var(--text); }
body[data-route="etf"] .etfCredit{ margin-top:6px; font-size:11px; color:var(--muted); }

body[data-route="etf"] .etfSummary{
  display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:12px;
}
@media (max-width: 900px){
  body[data-route="etf"] .etfSummary{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  body[data-route="etf"] .etfSummary{ grid-template-columns: 1fr; }
}
body[data-route="etf"] .etfSummaryItem{
  padding:10px 12px;
  border-radius:12px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
}
body[data-route="etf"] .etfSummaryLabel{ font-size:12px; color:var(--muted); }
body[data-route="etf"] .etfSummaryVal{ font-size:18px; font-weight:800; margin-top:4px; }

body[data-route="etf"] .etfInsightsBody{ display:grid; gap:6px; }
body[data-route="etf"] .etfInsight{
  padding:8px 10px;
  border-radius:10px;
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  font-size:13px;
}

body[data-route="etf"] .etfTableActions{ display:flex; gap:10px; align-items:center; }
body[data-route="etf"] .etfStar{
  background: transparent;
  border:1px solid rgba(255,255,255,0.12);
  color: var(--muted);
  border-radius:8px;
  width:26px; height:26px;
  cursor:pointer;
}
body[data-route="etf"] .etfStar.active{ color: #f5a41d; border-color: rgba(245,164,29,0.6); }
body[data-route="etf"] .etfTag{
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  border:1px solid rgba(255,255,255,0.12);
}
body[data-route="etf"] .etfSpark{ display:block; }

body[data-route="etf"] .etfTableCard{ padding:0; overflow:hidden; }
body[data-route="etf"] .etfTableHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body[data-route="etf"] .etfTitleSmall{ font-weight:900; font-size:16px; }
body[data-route="etf"] .etfTableWrap{ overflow-x:auto; }

/* Treasuries */
body[data-route="treasuries"] .treasuriesPage{ display:grid; gap:14px; }
body[data-route="treasuries"] .treasuriesHero{ display:flex; flex-direction:column; gap:8px; }
body[data-route="treasuries"] .treasuriesTitle{ font-size:24px; font-weight:900; }
body[data-route="treasuries"] .treasuriesSub{ color:var(--muted); font-size:13px; }
body[data-route="treasuries"] .treasuriesFilters{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
body[data-route="treasuries"] .treasuriesControls{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
body[data-route="treasuries"] .treasSelect{
  padding:7px 10px; border-radius:10px; border:1px solid rgba(255,255,255,0.12);
  background:rgba(16,22,44,0.6); color:var(--text); font-size:12px; font-weight:600;
  min-width:170px;
}
body[data-route="treasuries"] .treasuriesPill{
  padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,0.12);
  background:rgba(16,22,44,0.6);
  color:var(--text); font-size:12px; font-weight:600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
body[data-route="treasuries"] .treasuriesPill.active{
  background:linear-gradient(135deg, #f5a41d, #f7c15a);
  color:#1f2937; border-color:transparent; font-weight:800;
  box-shadow: 0 8px 20px rgba(245,164,29,0.25);
}
body[data-route="treasuries"] .treasuriesSummary{
  display:grid; gap:12px; grid-template-columns: repeat(5, minmax(0,1fr));
}
body[data-route="treasuries"] .treasLabel{ color:var(--muted); font-size:12px; }
body[data-route="treasuries"] .treasValue{ font-size:18px; font-weight:900; margin-top:4px; line-height:1.2; }
body[data-route="treasuries"] .treasuriesTitleSmall{ font-size:16px; font-weight:900; }
body[data-route="treasuries"] .treasuriesSplit{
  display:grid;
  grid-template-columns: 1.3fr .9fr;
  gap:12px;
}
body[data-route="treasuries"] .treasuriesChartCard{ position:relative; }
body[data-route="treasuries"] .treasuriesChartHead{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
body[data-route="treasuries"] .treasuriesChartTitle{ font-weight:900; font-size:16px; }
body[data-route="treasuries"] .treasuriesMeta{ color:var(--muted); font-size:12px; }
body[data-route="treasuries"] .treasuriesChart{ width:100%; height:280px; }
body[data-route="treasuries"] .treasWeeklyCard{ position:relative; overflow:hidden; }
body[data-route="treasuries"] .treasWeeklyChart{ height:420px; }
body[data-route="treasuries"] .treasDateRange{
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
body[data-route="treasuries"] .treasDateRange .input{
  min-width:146px;
  max-width:170px;
  padding:6px 9px;
  font-size:12px;
}
body[data-route="treasuries"] .treasDateRange span{
  color:var(--muted);
  font-size:12px;
}

body[data-route="treasuries"] .treasuriesPieCard{ position:relative; }
body[data-route="treasuries"] .treasuriesPieWrap{
  display:grid;
  grid-template-columns: minmax(260px, 320px) 1fr;
  gap:12px;
  align-items:center;
}
body[data-route="treasuries"] .treasuriesPie{ width:100%; height:260px; }
body[data-route="treasuries"] .treasuriesPieLegend{ display:grid; gap:8px; }
body[data-route="treasuries"] .treasPieItem{
  display:flex; align-items:center; gap:8px; font-size:12px;
}
body[data-route="treasuries"] .treasPieDot{ width:10px; height:10px; border-radius:999px; display:inline-block; }
body[data-route="treasuries"] .treasPieName{ flex:1; color:var(--text); }
body[data-route="treasuries"] .treasPiePct{ color:var(--muted); }
body[data-route="treasuries"] .treasuriesPieTip{
  position:absolute;
  background: rgba(10,14,30,.9);
  color:#fff;
  padding:7px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.12);
  font-size:12px;
  transform: translateX(-50%);
  pointer-events:none;
  z-index:10;
}
body[data-route="treasuries"] .treasuriesPieTip.hidden{ display:none; }

body[data-route="treasuries"] .treasuriesTableWrap{ overflow:auto; border-radius:14px; }
body[data-route="treasuries"] .treasuriesTable{
  width:100%; border-collapse:separate; border-spacing:0; min-width:1280px;
}
body[data-route="treasuries"] .treasuriesTable th,
body[data-route="treasuries"] .treasuriesTable td{
  padding:11px 12px; border-bottom:1px solid rgba(255,255,255,0.06);
  vertical-align:middle;
}
body[data-route="treasuries"] .treasuriesTable th{
  text-align:left; font-size:12px; color:var(--muted); font-weight:800;
}
body[data-route="treasuries"] .treasuriesTable td.r,
body[data-route="treasuries"] .treasuriesTable th.r{ text-align:right; }
body[data-route="treasuries"] .treasEntity{ display:flex; flex-direction:column; gap:3px; }
body[data-route="treasuries"] .treasEntityMain{ display:flex; align-items:center; gap:8px; }
body[data-route="treasuries"] .treasEntityLogo{
  width:24px; height:24px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,0.18);
}
body[data-route="treasuries"] .treasEntityLogo.fallback{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(245,164,29,0.2); color:#f5a41d; font-weight:800;
}
body[data-route="treasuries"] .treasName{ font-weight:800; font-size:14px; }
body[data-route="treasuries"] .treasTicker{ color:var(--muted); font-size:12px; }
body[data-route="treasuries"] .treasPnl{ font-weight:800; font-size:13px; line-height:1.1; }
body[data-route="treasuries"] .treasPnlSub{ font-size:11px; margin-top:3px; line-height:1.1; }
body[data-route="treasuries"] .treasPnl.up,
body[data-route="treasuries"] .treasPnlSub.up{ color:#22c55e; }
body[data-route="treasuries"] .treasPnl.down,
body[data-route="treasuries"] .treasPnlSub.down{ color:#ef4444; }
body[data-route="treasuries"] .treasPnl.flat,
body[data-route="treasuries"] .treasPnlSub.flat{ color:var(--muted); }
body[data-route="treasuries"] .treasBadge{
  padding:4px 8px; border-radius:999px; font-size:11px; font-weight:800;
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(34,197,94,0.15); color:#86efac;
}
body[data-route="treasuries"] .treasBadge.gov{ background:rgba(59,130,246,0.15); color:#93c5fd; }
body[data-route="treasuries"] .treasBadge.etf{ background:rgba(245,164,29,0.15); color:#f5a41d; }
body[data-route="treasuries"] .treasBadge.private{ background:rgba(168,85,247,0.16); color:#d8b4fe; }
body[data-route="treasuries"] .treasCoinCell{ display:flex; align-items:center; gap:8px; min-width:140px; }
body[data-route="treasuries"] .treasCoinLogo{
  width:20px; height:20px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,0.16);
}
body[data-route="treasuries"] .treasCoinLogo.fallback{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(245,164,29,0.2); color:#f5a41d; font-size:11px; font-weight:800;
}
body[data-route="treasuries"] .treasCoinSym{ font-size:12px; font-weight:800; line-height:1.1; }
body[data-route="treasuries"] .treasCoinName{ font-size:11px; color:var(--muted); line-height:1.1; }
body[data-route="treasuries"] .treasCoinStack{
  display:flex; align-items:center; gap:4px; min-width:120px; flex-wrap:wrap;
}
body[data-route="treasuries"] .treasCoinStackImg{
  width:20px; height:20px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,.16);
}
body[data-route="treasuries"] .treasCoinStackImg.fallback{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(245,164,29,0.2); color:#f5a41d; font-size:11px; font-weight:800;
}
body[data-route="treasuries"] .treasCoinStackMore{
  padding:2px 6px; border-radius:999px; font-size:11px;
  background:rgba(255,255,255,.06); color:var(--muted);
}
body[data-route="treasuries"] .treasClickable{ cursor:pointer; }
body[data-route="treasuries"] .treasClickable:hover{
  background:rgba(255,255,255,.03);
}

.treasModal{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
}
.treasModal.hidden{ display:none; }
.treasModalOverlay{
  position:absolute; inset:0;
  background:rgba(0,0,0,.58);
}
.treasModalCard{
  position:relative; z-index:2;
  width:min(1360px, 96vw); max-height:92vh; overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
body.treas-company-route .treasuriesPage{ display:none !important; }
body.treas-company-route .treasModal{
  position:static; inset:auto; z-index:auto;
  display:block;
  padding:0;
}
body.treas-company-route .treasModalOverlay{ display:none !important; }
body.treas-company-route .treasModalCard,
.treasModal.treasModalAsPage .treasModalCard{
  width:min(1360px, 96vw);
  max-height:none;
  margin:14px auto;
  overflow:visible;
}
.treasModalHead{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.treasModalTitle{ font-size:20px; font-weight:900; }
.treasModalMeta{
  margin-top:4px;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  color:var(--muted); font-size:12px;
}
.treasModalMeta a{ color:var(--a-accent); text-decoration:none; }
.treasProfileLayout{
  margin-top:10px;
  display:grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.treasProfileSide{ position:sticky; top:0; }
.treasProfileHead{ display:flex; align-items:center; gap:10px; }
.treasProfileLogo{
  width:42px; height:42px; border-radius:999px; object-fit:cover;
  border:1px solid rgba(255,255,255,.2);
}
.treasProfileLogo.fallback{
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(245,164,29,.2); color:#f5a41d; font-weight:800;
}
.treasProfileName{ font-size:20px; font-weight:900; line-height:1.15; }
.treasProfileTicker{ color:var(--muted); font-size:13px; margin-top:2px; }
.treasProfileValue{
  margin-top:10px;
  font-size:44px;
  line-height:1;
  font-weight:900;
}
.treasProfileValueSub{
  margin-top:6px;
  font-size:26px;
  line-height:1.1;
  font-weight:900;
}
.treasProfileValueSub.up{ color:#22c55e; }
.treasProfileValueSub.down{ color:#ef4444; }
.treasProfileGroup{ margin-top:14px; }
.treasProfileGroupTitle{ font-size:30px; font-weight:900; margin-bottom:8px; }
.treasProfileList{ display:grid; gap:0; }
.treasProfileRow{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:9px 0;
  font-size:13px;
}
.treasProfileRow span{ color:var(--muted); }
.treasProfileRow b{ font-weight:800; color:var(--text); }
.treasProfileRow b.up{ color:#22c55e; }
.treasProfileRow b.down{ color:#ef4444; }
.treasProfileRow a{ color:var(--a-accent); text-decoration:none; }
.treasProfileMain{ display:grid; gap:12px; min-width:0; }
.treasModalSummary{
  display:grid; gap:10px; grid-template-columns: repeat(4, minmax(0,1fr));
}
.treasProfileTimelineCard{ position:relative; }
.treasProfileTimelineHead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.treasRangeTabs{
  display:inline-flex; align-items:center; gap:4px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.03);
  border-radius:12px;
  padding:4px;
}
.treasRangeBtn{
  border:0; background:transparent; color:var(--muted); cursor:pointer;
  font-size:12px; font-weight:700; padding:6px 10px; border-radius:9px;
}
.treasRangeBtn.active{
  background:rgba(245,164,29,.18);
  color:#f5a41d;
}
.treasModalTimelineChart{ height:320px; }
.treasTxDateRange{ margin-top:6px; margin-bottom:2px; }
.treasTimelineLegend{
  display:flex; gap:12px; flex-wrap:wrap;
  margin-top:8px;
  color:var(--muted); font-size:12px;
}
.treasTimelineLegend .dot{
  display:inline-block; width:8px; height:8px; border-radius:999px; margin-right:6px;
}
.treasTimelineLegend .dot.hold{ background:#22c55e; }
.treasTimelineLegend .dot.price{ background:#f5a41d; }
.treasTimelineLegend .dot.flow{ background:#60a5fa; }
.treasTimelineLegend .dot.pnl{ background:#ef4444; }
body[data-route="treasuries"] .treasWeeklyCard .treasTimelineLegend .dot.hold{ background:#2f6eeb; }
body[data-route="treasuries"] .treasWeeklyCard .treasTimelineLegend .dot.flow{ background:#7c8cff; }
.treasWeeklyCoinLegend{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}
.treasWeeklyCoinLegendItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:var(--text);
  border:1px solid rgba(255,255,255,0.1);
  background:rgba(255,255,255,0.03);
}
.treasWeeklyCoinLegendItem .dot{
  width:8px;
  height:8px;
  border-radius:999px;
}
.treasTimelineTip{
  position:absolute;
  background:rgba(10,14,30,.92);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  border-radius:10px;
  font-size:12px;
  padding:10px 12px;
  z-index:5;
  transform:translateX(-50%);
  pointer-events:none;
  min-width:240px;
  line-height:1.35;
}
.treasTimelineTip.hidden{ display:none; }
.treasTipDate{
  font-weight:800;
  margin-bottom:8px;
}
.treasTipRow{
  display:grid;
  grid-template-columns: 10px 1fr auto;
  gap:8px;
  align-items:center;
  margin-top:4px;
}
.treasTipDot{
  width:8px;
  height:8px;
  border-radius:999px;
  display:inline-block;
}
.treasTipLabel{ color:rgba(226,232,240,0.92); }
.treasTipValue{
  font-weight:700;
  color:#fff;
}
.treasTipValue.up{ color:#22c55e; }
.treasTipValue.down{ color:#ef4444; }
.treasTipValue.flat{ color:#94a3b8; }
.treasTipDivider{
  margin:8px 0 6px;
  border-top:1px solid rgba(255,255,255,.12);
}
body.light .treasRangeTabs{
  border-color:#cfd6e3;
  background:#f7f9fd;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.8);
}
body.light .treasRangeBtn{
  color:#5b6782;
  border:1px solid transparent;
}
body.light .treasRangeBtn:hover{
  border-color:#d6dde9;
  background:#eef2f8;
}
body.light .treasRangeBtn.active{
  border-color:#f2c374;
  background:#fff4df;
  color:#b87400;
}
.treasModalCharts{
  display:grid; gap:10px; grid-template-columns: 1fr 1fr;
}
.treasTxCard{ position:relative; }
.treasModalAssetChart, .treasModalTxChart{ height:230px; }
.treasModalBlock{ margin-top:10px; overflow:hidden; }
.treasModalTable{
  min-width:0;
  width:100%;
  table-layout:auto;
}
.treasModalTable th,
.treasModalTable td{
  white-space:nowrap;
  word-break:normal;
}
.treasModalHoldingsTable{
  min-width:0;
}
.treasModalTxTable{
  min-width:0;
  table-layout:auto;
}
.treasModalTxTable th,
.treasModalTxTable td{ padding:8px 10px; }
.treasModalHoldingsTable th,
.treasModalHoldingsTable td{
  padding:8px 8px;
}
.treasModalHoldingsTable td.r,
.treasModalTxTable td.r{
  white-space:nowrap;
}
.treasModalHoldingsTable .treasCoinCell{
  min-width:0;
}
.treasModalHoldingsTable .treasCoinSym{
  font-size:13px;
}
.treasModalHoldingsTable .treasCoinName{
  font-size:11px;
  line-height:1.1;
  opacity:.8;
}
.treasTx{
  display:inline-flex; padding:3px 8px; border-radius:999px; font-size:11px; font-weight:800;
  border:1px solid rgba(255,255,255,.12);
}
.treasTx.buy{ color:#22c55e; background:rgba(34,197,94,.14); }
.treasTx.sell{ color:#ef4444; background:rgba(239,68,68,.14); }

@media (max-width: 1120px){
  body[data-route="treasuries"] .treasuriesSummary{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  body[data-route="treasuries"] .treasuriesSplit{ grid-template-columns: 1fr; }
  body[data-route="treasuries"] .treasuriesPieWrap{ grid-template-columns: 1fr; }
  .treasProfileLayout{ grid-template-columns: 1fr; }
  .treasProfileSide{ position:relative; }
  .treasModalSummary{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .treasModalCharts{ grid-template-columns: 1fr; }
}
@media (max-width: 860px){
  body[data-route="treasuries"] .treasuriesSummary{ grid-template-columns: 1fr 1fr; }
  body[data-route="treasuries"] .treasuriesChart{ height:230px; }
  body[data-route="treasuries"] .treasWeeklyChart{ height:320px; }
  body[data-route="treasuries"] .treasuriesPie{ height:230px; }
  body[data-route="treasuries"] .treasuriesTable{ min-width:980px; }
  .treasModalCard{
    width:100vw; max-width:100vw; height:100vh; max-height:100vh;
    border-radius:0; border:0; padding:10px;
  }
  body.treas-company-route .treasModalCard,
  .treasModal.treasModalAsPage .treasModalCard{
    width:100%;
    max-width:100%;
    height:auto;
    max-height:none;
    border-radius:0;
    border:0;
    margin:0;
  }
  .treasProfileValue{ font-size:34px; }
  .treasProfileValueSub{ font-size:20px; }
  .treasProfileGroupTitle{ font-size:24px; }
  .treasModalSummary{ grid-template-columns:1fr 1fr; }
  .treasModalTimelineChart{ height:280px; }
  .treasModalAssetChart, .treasModalTxChart{ height:210px; }
  .treasModalTable{ min-width:0; }
  .treasModalTxTable{ min-width:0; }
  .treasModalHoldingsTable th:nth-child(8),
  .treasModalHoldingsTable th:nth-child(9),
  .treasModalHoldingsTable td:nth-child(8),
  .treasModalHoldingsTable td:nth-child(9){
    display:none;
  }
  .treasDateRange .input{
    min-width:0;
    width:calc(50% - 8px);
  }
}
@media (max-width: 560px){
  body[data-route="treasuries"] .treasuriesSummary{ grid-template-columns: 1fr; }
  .treasModalSummary{ grid-template-columns: 1fr; }
  body[data-route="treasuries"] .treasSelect{ min-width:0; width:100%; }
  body[data-route="treasuries"] .treasuriesControls{ display:grid; grid-template-columns:1fr; }
  .treasModalTable{ min-width:0; }
  .treasModalHoldingsTable th:nth-child(5),
  .treasModalHoldingsTable th:nth-child(6),
  .treasModalHoldingsTable th:nth-child(7),
  .treasModalHoldingsTable td:nth-child(5),
  .treasModalHoldingsTable td:nth-child(6),
  .treasModalHoldingsTable td:nth-child(7){
    display:none;
  }
  .treasModalTxTable th:nth-child(5),
  .treasModalTxTable td:nth-child(5){
    display:none;
  }
  .treasDateRange .input{
    width:100%;
  }
  .treasProfileGroupTitle{ font-size:20px; }
}
body[data-route="etf"] .etfTable{
  width:100%;
  border-collapse:collapse;
  min-width:820px;
}
body[data-route="etf"] .etfTable th,
body[data-route="etf"] .etfTable td{
  padding:10px 12px;
  border-top:1px solid var(--border);
  white-space:nowrap;
}
body[data-route="etf"] .etfTable th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  background: rgba(255,255,255,.02);
}
body[data-route="etf"] .etfTable td.r{ text-align:right; }

body[data-route="etf"] .etfFaq{ display:grid; gap:10px; }
body[data-route="etf"] .etfFaq details{
  background: rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  padding:10px 12px;
}
body[data-route="etf"] .etfFaq summary{
  cursor:pointer;
  font-weight:700;
  color: var(--text);
}
body[data-route="etf"] .etfFaqBody{
  margin-top:8px;
  color: var(--muted);
  font-size:13px;
  line-height:1.45;
}

/* ETF modal */
.etfModal{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
}
.etfModal.hidden{ display:none; }
.etfModal__overlay{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
}
.etfModal__card{
  position:relative;
  z-index:2;
  width:min(820px, 92vw);
  max-height:85vh;
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow: var(--shadow);
}
.etfModal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin-bottom:10px;
}
.etfModal__title{ font-weight:900; font-size:18px; }
.etfModal__close{
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:10px;
  padding:6px 10px;
  cursor:pointer;
}
.etfModal__grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:10px;
}
@media (max-width: 640px){
  .etfModal__grid{ grid-template-columns:1fr; }
}
.etfModal__chart{ margin-top:12px; }

/* Heading emphasis (clearer section titles) */
body[data-route="coin"] .csSectionTitle,
body[data-route="coin"] .csH6,
body[data-route="coin"] .csSentTitle{
  font-weight:800 !important;
  font-size:20px;
}
@media (max-width: 820px){
  body[data-route="coin"] .csSectionTitle,
  body[data-route="coin"] .csH6,
  body[data-route="coin"] .csSentTitle{
    font-size:18px;
  }
}

/* Mobile sticky header should stay visible (fixed) */
@media (max-width: 820px){
  body[data-route="coin"] .csStickyBar{
    display:none !important;
  }
}

/* Mobile markets: keep table scroll + show right columns */
@media (max-width: 820px){
  body[data-route="coin"] .csMktTableScroll{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch;
  }
  body[data-route="coin"] .csMktList{
    overflow:visible !important;
    min-width:920px !important;
  }
  body[data-route="coin"] .csMktGridHead,
  body[data-route="coin"] .csMktRow{
    min-width:920px !important;
    grid-template-columns: 40px 200px 140px 140px 100px 160px !important;
  }
  body[data-route="coin"] .csMktRow{
    display:grid !important;
    grid-template-areas:none !important;
  }
  body[data-route="coin"] .csMktRow > *{ grid-area:auto !important; }
  body[data-route="coin"] .csMktPair{
    overflow:visible !important;
    text-overflow:clip !important;
    padding-right:6px;
  }
}