/* OrbitFX — Markets (MOBILE ONLY, loaded via media="(max-width: 900px)") */
:root{
  --bg:#0a1117; --card:#0b1218; --card2:#0d131a; --line:#1b2330;
  --ink:#cfe7e3; --muted:#8aa0aa; --good:#10b981; --bad:#ef4444;
}

/* kill sideways scroll from any wide child */
html,body{ background:var(--bg); color:var(--ink); margin:0; overflow-x:hidden; }
img,svg,canvas,iframe{ max-width:100%; }

/* make all site wrappers fluid on mobile */
.topnav, header, .navbar{ width:100%!important; }
.topnav .container, header .container, .navbar .container,
.container, .wrap, .wrapper, .shell, .layout, main, #content{
  max-width:none!important; width:100%!important; margin:0!important;
  padding-left:12px!important; padding-right:12px!important;
}

/* page grid → single column */
.mkts-grid{ display:block!important; grid-template-columns:1fr!important; gap:12px!important; padding:12px!important; }
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line); border-radius:14px; padding:12px;
}
.card h3{ margin:0 0 10px; font-size:1.05rem; }
.sep{ height:1px; background:var(--line); margin:12px 0; }
.muted{ color:var(--muted); }

/* sticky search (matches mockup) */
.toolbar{ position:sticky; top:56px; z-index:30; background:var(--bg); padding:8px 0 10px; border-bottom:1px solid var(--line); }
.toolbar .search, #q{
  width:100%; height:40px; padding:8px 10px; border:1px solid var(--line); border-radius:10px;
  background:#0f1720; color:var(--ink);
}

/* watchlist & recently viewed → horizontal chips */
.wl-chips, #wl-chips, .chips-row, .chips{
  display:flex!important; gap:8px!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; padding-bottom:4px;
}
.wl-chip, .chip{
  display:flex; align-items:center; gap:8px; padding:8px 10px; white-space:nowrap;
  border:1px solid var(--line); border-radius:999px; background:#0f1720;
}
.wl-chip img, .chip img{ width:18px; height:18px; border-radius:999px; }
.chg.up{ color:var(--good); } .chg.down{ color:var(--bad); }

/* top movers → horizontal cards */
.movers{ display:flex!important; gap:10px!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch; padding-bottom:4px; }
.mover{
  min-width:210px; display:flex; align-items:center; gap:10px; padding:10px;
  border:1px solid var(--line); border-radius:12px; background:#0b1218;
}
.mover img{ width:24px; height:24px; border-radius:999px; }
.mover .pct.up{ color:var(--good); } .mover .pct.down{ color:var(--bad); }

/* heatmap → small round bubbles, tidy grid */
#heat{ display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:10px!important; }
@media (max-width:360px){ #heat{ grid-template-columns:repeat(3,1fr)!important; } }
.bubble, .tile{
  width:58px!important; height:58px!important; border-radius:999px!important;
  border:1px solid var(--line); background:#0b1218; margin:0 auto; position:relative;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.bubble::after, .tile::after{ content:""; position:absolute; inset:0; border-radius:999px; opacity:.18; background:var(--tint,linear-gradient(180deg,#0b1218,#0b1218)); }
.b-in{ text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; }
.b-logo{ width:18px!important; height:18px!important; border-radius:999px; }
.b-sym{ font-size:10px; font-weight:700; }
.b-pct{ font-size:10px; font-weight:600; }
.b-pct.up{ color:var(--good); } .b-pct.down{ color:var(--bad); }

/* main markets table → mobile cards */
.table{ width:100%; border-collapse:collapse; }
.table thead{ display:none; }
.table, .table tbody, .table tr, .table td{ display:block; width:100%; }
.table tr{
  border:1px solid var(--line); border-radius:12px; margin-bottom:10px; background:#0b1218; padding:8px;
}
.table td{ border:0; padding:6px 4px; }
.symcell, .sym{ display:flex; align-items:center; gap:8px; }
.symcell img, .sym img{ width:22px; height:22px; border-radius:999px; }
.price{ font-variant-numeric:tabular-nums; font-weight:600; }
.pct.up{ color:var(--good); } .pct.down{ color:var(--bad); }
.spark{ width:100%!important; height:34px!important; display:block; margin:6px 0; }
.tradebtn{
  width:100%!important; text-align:center; display:inline-block; padding:8px 10px;
  border-radius:10px; border:1px solid var(--line); background:#0f1720; color:var(--ink); text-decoration:none;
}

/* letter avatar fallback (matches desktop style) */
.logo-fallback{
  width:22px; height:22px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; color:#0b1218; background:linear-gradient(135deg,#9ad9c7,#38bdf8);
}
.logo-fallback.b{ width:18px; height:18px; }