/* 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:#6aa9ff;
  --good:#19c37d;
  --bad:#ff4d4d;
}

/* Light theme */
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:#1f6fff;
}

*{ 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__link:hover{ color:var(--text); border-color:var(--border); }
.nav__link.active{ color:var(--text); border-color:var(--border); background:rgba(255,255,255,.04); }

.topbar__right{ display:flex; gap:10px; align-items:center; }

/* 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::placeholder{ color:var(--muted); }

/* 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); border-color:transparent; color:white; font-weight:600; }
.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); }

/* cards */
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow);
}
.cardPad{ padding:14px; }

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

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

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

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

.mkKpis{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:12px;
}
@media (max-width: 1200px){
  .mkKpis{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mkKpi{ padding:14px; border-radius:16px; }
.mkKpiTitle{ color:var(--muted); font-size:13px; font-weight:600; }
.mkKpiValue{ font-size:20px; margin-top:8px; font-weight:800; }
.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:120px; max-width:120px;
  display:flex; justify-content:flex-end;
  overflow:hidden; /* ✅ never spill out */
}
.mkKpiRight .mkSpark{ height:28px; width:100%; }

.mkChipsWrap{ display:flex; flex-direction:column; gap:10px; }
.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: rgba(106,169,255,.18);
  border-color: rgba(106,169,255,.40);
}
.mkMetaRow{
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.mkTiny{ color:var(--muted); font-size:12px; }

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

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

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(255,255,255,.04);
  cursor:pointer;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
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:10px; justify-content:flex-start; }
.mkBuy{ display:flex; justify-content:center; }

.mkChg.pos{ color: var(--good); font-weight:750; }
.mkChg.neg{ color: var(--bad); font-weight:750; }

.mkCoinLeft{ display:flex; align-items:center; gap:12px; min-width:0; }
.mkLogo{ width:28px; height:28px; border-radius:999px; }
.mkNames{ min-width:0; }
.mkName{ font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:750; }
.mkSym{ color:var(--muted); font-size:12px; margin-top:2px; }

/* ✅ watch + alert button (STAR COLOR FIX) */
.mkIco{
  width:36px; height:36px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  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:1px solid rgba(15,23,42,.12);
  background: rgba(15,23,42,.03);
  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(106,169,255,.35);
  background: rgba(106,169,255,.10);
  color: var(--text);
  cursor:pointer;
  font-weight:750;
}
.mkBuyBtn:hover{ background: rgba(106,169,255,.18); }

/* 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; }
.mkSpark.pos path{ stroke: var(--good); }
.mkSpark.neg path{ stroke: var(--bad); }

.mkLoading{ padding:18px 16px; color:var(--muted); }
.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: rgba(106,169,255,.18); border-color: rgba(106,169,255,.40); }
.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; }

.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);
  border-color: transparent;
  color:#fff;
}

.mkBuyList{ display:flex; flex-direction:column; gap:10px; }
.mkBuyLink{
  display:block;
  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); }

/* responsive: hide some columns on small screens (still no horizontal scroll) */
@media (max-width: 980px){
  .mkTableHead, .mkRow{
    grid-template-columns:
      44px
      84px
      minmax(240px, 1fr)
      78px
      110px
      80px
      80px
      180px;
  }
  .mkTableHead .mkMcap,
  .mkTableHead .mkVol,
  .mkRow .mkMcap,
  .mkRow .mkVol{
    display:none;
  }
}


/* =========================
   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: 14px 22px;
}

/* 3 columns: A 20% | B 55% | C 25% */
body[data-route="coin"] .coinPageV8 .csGridABC{
  display:grid;
  grid-template-columns: 20% 55% 25%;
  gap:14px;
  align-items:start;
}

/* responsive */
@media (max-width: 1100px){
  body[data-route="coin"] .coinPageV8{ padding: 12px 14px; }
  body[data-route="coin"] .coinPageV8 .csGridABC{ grid-template-columns: 1fr; }
}

/* 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"] .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;
}
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: rgba(106,169,255,.18);
  border-color: rgba(106,169,255,.40);
}
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:14px; 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: rgba(106,169,255,.18);
  border-color: rgba(106,169,255,.40);
}
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: rgba(106,169,255,.18);
  border-color: rgba(106,169,255,.40);
}

/* 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 200px; }
@media (max-width: 1400px){ body[data-route="coin"] .container{ padding:0 6vw; } }
@media (max-width: 980px){ body[data-route="coin"] .container{ padding:0 14px; } }

body[data-route="coin"] .csGridABC{
  display:grid; grid-template-columns:20% 55% 25%; gap:14px; align-items:start;
}
@media (max-width:1100px){ body[data-route="coin"] .csGridABC{ grid-template-columns:1fr; } }

/* 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 rgba(37,99,235,1);
}
body[data-route="coin"] .csBnavItem:hover{ opacity:1; }

/* 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; right:14px; bottom:10px;
  width:120px; height:auto; opacity:.12; pointer-events:none;
  filter: invert(1);
}
body.light[data-route="coin"] .csChartWatermark{ filter:none; opacity:.16; }

/* 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: 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"] .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: 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"] .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:
      "ex ex"
      "pair pair"
      "price vol"
      "spread spread";
    gap:8px;
  }
  body[data-route="coin"] .csMktEx{ grid-area:ex; }
  body[data-route="coin"] .csMktPair{ grid-area:pair; }
  body[data-route="coin"] .csMktRow > :nth-child(3){ grid-area:price; text-align:left; }
  body[data-route="coin"] .csMktRow > :nth-child(5){ grid-area:vol; text-align:right; }
  body[data-route="coin"] .csMktRow > :nth-child(4){ grid-area:spread; text-align:left; }
}

/* buy modal buttons */
body[data-route="coin"] .csCoinModalBtn{
  display:flex; align-items:center; justify-content:center;
  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); }


/* =========================================================
   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 margin system (remove 200px hard padding) */
body[data-route="coin"] .container{
  max-width: none !important;
  margin: 0 !important;
  padding: 0 clamp(14px, 6vw, 120px) !important; /* ✅ CMC-like responsive side spacing */
}

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

/* 3) 3-column grid stable */
body[data-route="coin"] .coinPageV8 .csGridABC,
body[data-route="coin"] .csGridABC{
  display: grid !important;
  grid-template-columns: 20% 55% 25% !important;
  gap: 14px !important;
  align-items: start !important;
}
@media (max-width: 1100px){
  body[data-route="coin"] .coinPageV8 .csGridABC,
  body[data-route="coin"] .csGridABC{
    grid-template-columns: 1fr !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;
}

/* 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 rgba(37,99,235,1) !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;
}

/* 7) Watermark fix (IMPORTANT)
   You are now loading theme-correct SVG via coin.js:
   /assets/Coinslytic-Light.svg and /assets/Coinslytic-Dark.svg
   So we must REMOVE the old invert() filter.
*/
body[data-route="coin"] .csChartWatermark{
  bottom: 42px !important;     /* ✅ moved up ~20px */
  right: 16px !important;
  opacity: .16 !important;
  filter: none !important;     /* ✅ no invert */
  width: 140px !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: 14px !important;
  font-weight: 750 !important;
  margin: 16px 0 10px !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; }
}