/* ═══════════════════════════════════════════
CSS VARIABLES & RESET
═══════════════════════════════════════════ */
:root {
--bg0:#050b14; --bg1:#080f1c; --bg2:#0c1525; --bg3:#11203a; --bg4:#172848; --bg5:#1d3055;
--c1:#00d4ff; --c1a:rgba(0,212,255,.12); --c2:#7c3aed; --c3:#3b82f6;
--g:#10b981; --r:#ef4444; --y:#f59e0b; --o:#f97316; --p:#a855f7;
--t1:#f0f6ff; --t2:#8ba3c7; --t3:#3d5a80; --t4:#1a2d45;
--b0:rgba(255,255,255,.04); --b1:rgba(255,255,255,.07); --b2:rgba(255,255,255,.12); --b3:rgba(0,212,255,.25);
--fd:'Sora',sans-serif; --fm:'IBM Plex Mono',monospace; --ff:'Vazirmatn',sans-serif;
--nav:56px; --tick:34px;
--sidebar:260px;
--radius:12px;
--shadow:0 8px 32px rgba(0,0,0,.6);
/* Responsive breakpoints */
--bp-xl:1800px; --bp-lg:1400px; --bp-md:1100px; --bp-sm:900px; --bp-xs:620px; --bp-xxs:420px;
}
/* Light theme */
body.light {
--bg0:#f0f4f8; --bg1:#e8edf5; --bg2:#ffffff; --bg3:#f5f7fb; --bg4:#eaeef5; --bg5:#dde4ef;
--t1:#0a1628; --t2:#4a6080; --t3:#8ba3c7; --t4:#d0daea;
--b0:rgba(0,0,0,.04); --b1:rgba(0,0,0,.08); --b2:rgba(0,0,0,.14);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:13px; scroll-behavior:smooth }
body { background:var(--bg0); color:var(--t1); font-family:var(--fd); overflow-x:hidden; min-height:100vh; transition:background .3s,color .3s }
body[dir=rtl] { font-family:var(--ff) }
a { text-decoration:none; color:inherit }
button { font-family:inherit; cursor:pointer; border:none; background:none; outline:none }
img { max-width:100%; display:block }
input,select { outline:none }
/* Scrollbar */
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:var(--bg1) }
::-webkit-scrollbar-thumb { background:var(--bg5); border-radius:2px }
::-webkit-scrollbar-thumb:hover { background:var(--c1) }
/* Background ambient */
body::after {
content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
background:
radial-gradient(ellipse 120% 50% at 50% -5%,rgba(0,212,255,.06),transparent 60%),
radial-gradient(ellipse 40% 40% at 92% 95%,rgba(124,58,237,.05),transparent 55%);
}
/* ═══════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════ */
#nav {
position:sticky; top:0; z-index:900; height:var(--nav);
display:flex; align-items:center; padding:0 16px; gap:10px;
background:rgba(5,11,20,.97); backdrop-filter:blur(24px) saturate(1.6);
border-bottom:1px solid var(--b1);
}
body.light #nav { background:rgba(240,244,248,.97) }
.logo { display:flex; align-items:center; gap:9px; flex-shrink:0; cursor:pointer; user-select:none }
.logo-img { width:40px; height:40px; border-radius:8px; object-fit:cover; box-shadow:0 0 20px rgba(0,212,255,.4) }
.logo-sq { width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,var(--c1),var(--c2)); display:flex; align-items:center; justify-content:center; font-family:var(--fm); font-weight:700; font-size:11px; color:#fff; box-shadow:0 0 20px rgba(0,212,255,.4) }
.logo-tx { font-size:14px; font-weight:900; letter-spacing:2px; background:linear-gradient(90deg,var(--c1),#a78bfa); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.logo-ver { font-size:8px; color:var(--t3); font-family:var(--fm); letter-spacing:.5px; margin-top:-2px }
/* Nav Links */
.navlinks { display:flex; align-items:center; gap:1px; overflow-x:auto; flex:1; scrollbar-width:none; padding:0 8px }
.navlinks::-webkit-scrollbar { display:none }
.nl { padding:5px 11px; border-radius:7px; font-size:11.5px; font-weight:500; color:var(--t2); cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0; border:1px solid transparent }
.nl:hover { color:var(--t1); background:var(--b0) }
.nl.on { color:var(--c1); background:rgba(0,212,255,.1); border-color:rgba(0,212,255,.15) }
.nl.new-badge::after { content:'NEW'; font-size:7px; background:var(--g); color:#fff; border-radius:3px; padding:1px 3px; margin-left:4px; vertical-align:middle; font-weight:800 }
/* Right nav actions */
.nav-r { display:flex; align-items:center; gap:6px; flex-shrink:0; margin-left:auto }
/* Search */
.srch-wrap { position:relative }
.srch-box { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--b1); border-radius:9px; padding:6px 12px; width:200px; transition:all .25s }
.srch-box:focus-within { border-color:var(--c1); box-shadow:0 0 0 3px rgba(0,212,255,.1); width:260px }
.srch-box input { background:none; border:none; color:var(--t1); font-size:12px; width:100%; font-family:var(--fd) }
.srch-box input::placeholder { color:var(--t3) }
.srch-icon { color:var(--t3); flex-shrink:0; font-size:13px }
.srch-kbd { font-size:9px; color:var(--t3); border:1px solid var(--b1); border-radius:4px; padding:1px 5px; font-family:var(--fm); white-space:nowrap }
.srch-drop { position:absolute; top:calc(100% + 6px); left:0; right:0; background:var(--bg3); border:1px solid var(--b2); border-radius:12px; z-index:1000; display:none; box-shadow:0 24px 60px rgba(0,0,0,.8); max-height:420px; overflow-y:auto; min-width:320px }
.srch-drop.open { display:block; animation:fadeDown .15s ease }
@keyframes fadeDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
.srch-header { padding:8px 12px 6px; border-bottom:1px solid var(--b1); font-size:10px; color:var(--t3); font-family:var(--fm); display:flex; align-items:center; justify-content:space-between }
.sdi { display:flex; align-items:center; gap:10px; padding:9px 12px; cursor:pointer; transition:background .1s }
.sdi:hover { background:var(--bg4) }
.sdi-img { width:26px; height:26px; border-radius:50%; flex-shrink:0; background:var(--bg4); object-fit:cover }
.sdi-nm { font-size:12px; font-weight:600 }
.sdi-sy { font-size:10px; color:var(--t3); font-family:var(--fm) }
.sdi-pr { font-size:12px; font-weight:700; font-family:var(--fm); text-align:right }
.srch-status { padding:14px; font-size:11px; color:var(--t2); text-align:center }
.srch-section-ttl { padding:6px 12px 3px; font-size:9.5px; color:var(--t3); font-family:var(--fm); text-transform:uppercase; letter-spacing:1px }
/* Language */
.lang-sw { position:relative }
.lang-btn { display:flex; align-items:center; gap:5px; background:var(--bg2); border:1px solid var(--b1); border-radius:7px; padding:5px 10px; font-size:10px; font-weight:700; font-family:var(--fm); color:var(--t3); transition:all .15s; cursor:pointer }
.lang-btn:hover { border-color:var(--c1); color:var(--c1) }
.lang-drop { position:absolute; top:calc(100% + 6px); right:0; background:var(--bg3); border:1px solid var(--b2); border-radius:10px; z-index:1000; display:none; min-width:150px; box-shadow:0 16px 48px rgba(0,0,0,.6) }
.lang-drop.open { display:block; animation:fadeDown .15s ease }
.lang-opt { display:flex; align-items:center; gap:8px; padding:7px 12px; cursor:pointer; transition:background .13s; font-size:11px }
.lang-opt:hover { background:var(--b0) }
.lang-opt.on { background:rgba(0,212,255,.15); color:var(--c1) }
/* Icon buttons */
.ib { width:32px; height:32px; border-radius:8px; background:var(--bg2); border:1px solid var(--b1); color:var(--t2); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s }
.ib:hover { color:var(--c1); border-color:rgba(0,212,255,.4); background:rgba(0,212,255,.06) }
/* Hamburger */
.ham { display:none!important }
/* ═══════════════════════════════════════════
GLOBAL BAR
═══════════════════════════════════════════ */
.gbar { height:30px; display:flex; align-items:center; padding:0 16px; gap:0; background:var(--bg1); border-bottom:1px solid var(--b1); overflow-x:auto; scrollbar-width:none; white-space:nowrap; font-size:11px; font-family:var(--fm) }
.gbar::-webkit-scrollbar { display:none }
.gi { display:inline-flex; align-items:center; gap:5px; padding:0 13px; border-right:1px solid var(--b1); flex-shrink:0 }
.gi:last-child { border-right:none; margin-left:auto }
.gi-lbl { color:var(--t3); font-size:10.5px }
.gi-val { color:var(--t1); font-weight:600; font-size:11px }
.gi-chg { font-size:10px }
/* ═══════════════════════════════════════════
TICKER
═══════════════════════════════════════════ */
.ticker { height:var(--tick); background:var(--bg1); border-bottom:1px solid var(--b1); overflow:hidden; position:relative }
.ticker::before,.ticker::after { content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none }
.ticker::before { left:0; background:linear-gradient(90deg,var(--bg1),transparent) }
.ticker::after { right:0; background:linear-gradient(-90deg,var(--bg1),transparent) }
.tk-tr { display:inline-flex; animation:tkA 80s linear infinite; white-space:nowrap; will-change:transform }
.tk-tr:hover { animation-play-state:paused }
.ti { display:inline-flex; align-items:center; gap:6px; padding:0 14px; height:var(--tick); border-right:1px solid var(--b1); font-family:var(--fm); font-size:11px; cursor:pointer; transition:background .1s; flex-shrink:0 }
.ti:hover { background:rgba(0,212,255,.05) }
.ti img { width:16px; height:16px; border-radius:50%; background:var(--bg3) }
.ti-s { color:var(--t2); font-weight:600 }
@keyframes tkA { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
/* ═══════════════════════════════════════════
LAYOUT
═══════════════════════════════════════════ */
.app-wrap { max-width:2000px; margin:0 auto; padding:12px 16px 60px; position:relative; z-index:1 }
.view { display:none; opacity: 0; transition: opacity 0.3s ease-in-out; }
.view.on { display:block; opacity: 1; }
/* ═══════════════════════════════════════════
CARDS & BASE COMPONENTS
═══════════════════════════════════════════ */
.card { background:var(--bg2); border:1px solid var(--b1); border-radius:var(--radius); overflow:hidden; transition:border-color .2s }
.card:hover { border-color:var(--b2) }
.ch { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--b1); gap:8px; flex-wrap:wrap }
.ct { font-size:12px; font-weight:700; color:var(--t1); white-space:nowrap }
.lk { font-size:10.5px; color:var(--c1); font-weight:600; cursor:pointer; transition:opacity .15s; white-space:nowrap }
.lk:hover { opacity:.7 }
/* Tabs */
.tabs { display:flex; gap:2px; background:var(--bg3); border:1px solid var(--b1); border-radius:8px; padding:3px; width:fit-content; flex-wrap:nowrap }
.tb { padding:4px 10px; border-radius:6px; font-size:10.5px; font-weight:600; color:var(--t2); cursor:pointer; transition:all .15s; white-space:nowrap }
.tb.on { background:var(--c1); color:var(--bg0) }
.tb:hover:not(.on) { color:var(--t1); background:var(--b0) }
/* Badges */
.badge { display:inline-flex; align-items:center; gap:2px; padding:2px 7px; border-radius:20px; font-family:var(--fm); font-size:10.5px; font-weight:700; white-space:nowrap }
.badge.u { background:rgba(16,185,129,.15); color:var(--g) }
.badge.d { background:rgba(239,68,68,.15); color:var(--r) }
.badge.n { background:rgba(139,163,199,.1); color:var(--t2) }
/* Buttons */
.btn { background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; padding:7px 16px; border-radius:9px; font-size:11.5px; font-weight:700; cursor:pointer; border:none; transition:all .2s; font-family:var(--fd); white-space:nowrap }
.btn:hover { filter:brightness(1.12); transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,212,255,.3) }
.bto { background:transparent; color:var(--c1); border:1px solid rgba(0,212,255,.3); padding:4px 10px; border-radius:7px; font-size:10.5px; font-weight:600; font-family:var(--fd); transition:all .15s; cursor:pointer }
.bto:hover { background:rgba(0,212,255,.08); border-color:var(--c1) }
/* Live dot */
.ldot { width:7px; height:7px; border-radius:50%; background:var(--g); animation:lp 2s infinite; display:inline-block; flex-shrink:0 }
@keyframes lp { 0%,100%{opacity:1;box-shadow:0 0 6px var(--g)} 50%{opacity:.3;box-shadow:none} }
/* Colors */
.cu { color:var(--g)!important }
.cd { color:var(--r)!important }
.cn { color:var(--t2) }
/* Loading */
.loader { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px; color:var(--t2); gap:10px }
.spin { width:28px; height:28px; border:2px solid var(--b1); border-top-color:var(--c1); border-radius:50%; animation:sp .7s linear infinite }
@keyframes sp { to{transform:rotate(360deg)} }
.skel { background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:400% 100%; animation:sk 1.5s infinite; border-radius:5px }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* ═══════════════════════════════════════════
MARKETS VIEW — TOP SECTION
═══════════════════════════════════════════ */
.mkt-top { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 270px; gap:12px; margin-bottom:12px }
/* Heatmap */
.hm-wrap { padding:10px 12px }
.hm-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:4px }
.hmc { border-radius:6px; padding:8px 5px; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:all .2s; text-align:center; min-height:60px; position:relative; overflow:hidden }
.hmc:hover { transform:scale(1.05); z-index:5; box-shadow:0 6px 20px rgba(0,0,0,.7) }
.hmc img { width:18px; height:18px; border-radius:50%; margin-bottom:3px; background:rgba(0,0,0,.2) }
.hm-sy { font-size:11px; font-weight:800; color:#fff }
.hm-pc { font-size:10px; font-family:var(--fm); font-weight:700; color:rgba(255,255,255,.95) }
.hm-pr { font-size:8.5px; color:rgba(255,255,255,.6); font-family:var(--fm); margin-top:1px }
/* Bubble chart */
.bbl-area { position:relative; height:240px; overflow:hidden; border-radius:8px; background:linear-gradient(135deg,var(--bg3),var(--bg1)) }
.bbl { position:absolute; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:transform .3s; font-weight:700; user-select:none; border:1px solid rgba(255,255,255,.1) }
.bbl:hover { transform:scale(1.12)!important; z-index:20 }
.bbl img { width:32%; height:32%; border-radius:50%; margin-bottom:2px; object-fit:cover }
.bbl-s { font-size:11px; color:#fff; font-weight:800; text-shadow:0 1px 3px rgba(0,0,0,.8) }
.bbl-p { font-size:9.5px; font-family:var(--fm); text-shadow:0 1px 3px rgba(0,0,0,.8) }
/* Insights panel */
.ins-block { background:var(--bg2); border:1px solid var(--b1); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column }
.ins-hd { padding:10px 14px; border-bottom:1px solid var(--b1); display:flex; align-items:center; justify-content:space-between }
.ins-ttl { font-size:12px; font-weight:700 }
.bull-wrap { padding:12px; border-bottom:1px solid var(--b1); text-align:center }
.bull-val { font-size:24px; font-weight:900; font-family:var(--fm) }
.bull-lbl { font-size:10px; color:var(--t2); margin-top:2px; font-family:var(--fm) }
.sig-row { display:flex; align-items:center; justify-content:space-between; padding:7px 14px; border-bottom:1px solid rgba(255,255,255,.03) }
.sig-row:last-child { border-bottom:none }
.sig-n { font-size:11px; color:var(--t2) }
.sig-v { font-size:11px; font-weight:700; font-family:var(--fm) }
.sig-b { padding:2px 8px; border-radius:20px; font-size:9px; font-weight:700 }
.sig-b.buy { background:rgba(16,185,129,.15); color:var(--g) }
.sig-b.sell { background:rgba(239,68,68,.15); color:var(--r) }
.sig-b.neu { background:rgba(139,163,199,.1); color:var(--t2) }
/* ═══════════════════════════════════════════
MARKET TABLE
═══════════════════════════════════════════ */
.mkt-mid { margin-bottom:12px }
.mkt-tbl { width:100%; border-collapse:collapse; min-width:600px }
.mkt-tbl th { padding:8px 10px; font-size:10px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.8px; font-family:var(--fm); background:var(--bg1); text-align:left; white-space:nowrap; cursor:pointer; transition:color .15s; user-select:none; position:sticky; top:0; z-index:5 }
.mkt-tbl th:hover,.mkt-tbl th.srt { color:var(--c1) }
.mkt-tbl th .sort-arrow { margin-left:3px; opacity:.5 }
.mkt-tbl th.srt .sort-arrow { opacity:1; color:var(--c1) }
.mkt-tbl td { padding:8px 10px; font-size:12px; border-bottom:1px solid rgba(255,255,255,.03); vertical-align:middle; transition:background .1s }
.mkt-tbl tr:hover td { background:rgba(0,212,255,.03) }
.mkt-tbl tr:last-child td { border-bottom:none }
.mkt-tbl tr { cursor:pointer }
.cc { display:flex; align-items:center; gap:9px }
.coin-img { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:var(--bg4); object-fit:cover }
.cn-name { font-size:12.5px; font-weight:700 }
.cs { font-size:10px; color:var(--t3); font-family:var(--fm) }
.cpr { font-family:var(--fm); font-weight:600; font-size:12px; transition:color .4s }
.cpr.fu { color:var(--g)!important }
.cpr.fd { color:var(--r)!important }
.spk { width:64px!important; height:28px!important }
.sstar { color:var(--t3); font-size:13px; padding:2px 6px; border-radius:5px; transition:color .15s }
.sstar:hover,.sstar.on { color:var(--y) }
.liq-bar { width:64px; height:3px; background:var(--bg4); border-radius:2px; overflow:hidden; margin-bottom:2px }
.liq-fill { height:100%; border-radius:2px; background:linear-gradient(90deg,var(--c1),var(--c2)) }
.rank-num { color:var(--t3); font-family:var(--fm); font-size:11px }
/* ═══════════════════════════════════════════
PAGINATION
═══════════════════════════════════════════ */
.pagination-wrap { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-top:1px solid var(--b1); flex-wrap:wrap; gap:8px }
.pag-info { font-size:10.5px; color:var(--t3); font-family:var(--fm) }
.pag-info strong { color:var(--t2) }
.pag-controls { display:flex; align-items:center; gap:4px }
.pag-btn { width:30px; height:30px; border-radius:7px; background:var(--bg2); border:1px solid var(--b1); color:var(--t2); font-size:11px; font-family:var(--fm); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; font-weight:600 }
.pag-btn:hover:not(:disabled) { border-color:var(--c1); color:var(--c1); background:rgba(0,212,255,.06) }
.pag-btn.on { background:var(--c1); color:var(--bg0); border-color:var(--c1) }
.pag-btn:disabled { opacity:.35; cursor:not-allowed }
.pag-ellipsis { color:var(--t3); font-size:11px; font-family:var(--fm); padding:0 4px }
.pag-perpage { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--t3) }
.pag-perpage select { background:var(--bg2); border:1px solid var(--b1); border-radius:6px; padding:3px 8px; color:var(--t1); font-size:10.5px; font-family:var(--fm); cursor:pointer }
/* Quick jump */
.pag-jump { display:flex; align-items:center; gap:6px; font-size:10.5px; color:var(--t3) }
.pag-jump input { background:var(--bg2); border:1px solid var(--b1); border-radius:6px; padding:3px 8px; color:var(--t1); font-size:10.5px; font-family:var(--fm); width:48px; text-align:center }
/* ═══════════════════════════════════════════
MARKET BOTTOM
═══════════════════════════════════════════ */
.mkt-bot { display:grid; grid-template-columns:1fr 1fr 1fr 240px; gap:12px; margin-bottom:12px }
.disc-row { display:flex; align-items:center; justify-content:space-between; padding:7px 12px; border-bottom:1px solid rgba(255,255,255,.03); cursor:pointer; transition:background .1s }
.disc-row:hover { background:rgba(0,212,255,.03) }
.disc-row:last-child { border-bottom:none }
.drl { display:flex; align-items:center; gap:8px }
.dr-img { width:22px; height:22px; border-radius:50%; background:var(--bg4); object-fit:cover; flex-shrink:0 }
.dr-nm { font-size:11.5px; font-weight:600 }
.dr-pr { font-size:10px; font-family:var(--fm); color:var(--t2) }
/* News mini */
.news-mini-item { padding:9px 12px; border-bottom:1px solid rgba(255,255,255,.03); cursor:pointer; transition:background .1s }
.news-mini-item:hover { background:var(--bg3) }
.news-mini-item:last-child { border-bottom:none }
.nmi-tag { display:inline-block; padding:1px 8px; border-radius:20px; font-size:9px; font-weight:700; font-family:var(--fm); margin-bottom:4px }
.nmi-ttl { font-size:11px; font-weight:500; line-height:1.5; color:var(--t1); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.nmi-meta { font-size:9.5px; color:var(--t3); font-family:var(--fm); margin-top:3px }
/* ═══════════════════════════════════════════
NEW TOKENS / TRENDING (Search filter)
═══════════════════════════════════════════ */
.view-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px }
.view-ttl { font-size:16px; font-weight:900 }
.view-sub { font-size:11px; color:var(--t2); margin-top:2px }
/* Filter bar for new tokens */
.filter-bar { display:flex; align-items:center; gap:8px; margin-bottom:12px; flex-wrap:wrap }
.filter-search { display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--b1); border-radius:9px; padding:7px 13px; flex:1; min-width:200px; max-width:360px; transition:all .2s }
.filter-search:focus-within { border-color:var(--c1); box-shadow:0 0 0 3px rgba(0,212,255,.08) }
.filter-search input { background:none; border:none; color:var(--t1); font-size:12px; width:100%; font-family:var(--fd) }
.filter-search input::placeholder { color:var(--t3) }
.filter-chain { display:flex; gap:4px; flex-wrap:wrap }
.fc-btn { padding:4px 10px; border-radius:20px; font-size:10px; font-weight:700; font-family:var(--fm); border:1px solid var(--b1); background:var(--bg2); color:var(--t2); cursor:pointer; transition:all .15s; white-space:nowrap }
.fc-btn:hover { border-color:var(--c1); color:var(--c1) }
.fc-btn.on { background:var(--c1); color:var(--bg0); border-color:var(--c1) }
.filter-sort { background:var(--bg2); border:1px solid var(--b1); border-radius:8px; padding:6px 10px; color:var(--t1); font-size:11.5px; font-family:var(--fd); cursor:pointer }
/* New token badge */
.new-tok-badge { display:inline-flex; align-items:center; gap:3px; padding:1px 7px; border-radius:20px; font-size:9px; font-weight:700; font-family:var(--fm); background:rgba(16,185,129,.12); color:var(--g); border:1px solid rgba(16,185,129,.2) }
/* Stats cards row */
.stats-row { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px }
.stat-card { background:var(--bg2); border:1px solid var(--b1); border-radius:10px; padding:13px; transition:all .2s }
.stat-card:hover { border-color:var(--b2); transform:translateY(-2px) }
.sc-lbl { font-size:9.5px; color:var(--t2); font-family:var(--fm); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px }
.sc-val { font-size:20px; font-weight:900; font-family:var(--fm) }
.sc-chg { font-size:10px; font-family:var(--fm); margin-top:3px }
.sc-icon { font-size:22px; float:right; margin-top:-4px; opacity:.7 }
/* ═══════════════════════════════════════════
DEFI
═══════════════════════════════════════════ */
.defi-top { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:12px }
.ds-card { background:var(--bg2); border:1px solid var(--b1); border-radius:10px; padding:13px }
.ds-lbl { font-size:9.5px; color:var(--t2); font-family:var(--fm); text-transform:uppercase; letter-spacing:1px; margin-bottom:5px }
.ds-val { font-size:20px; font-weight:800; font-family:var(--fm) }
.ds-chg { font-size:10px; font-family:var(--fm); margin-top:2px }
.defi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.dfc { background:var(--bg2); border:1px solid var(--b1); border-radius:10px; padding:14px; cursor:pointer; transition:all .2s }
.dfc:hover { border-color:var(--b2); transform:translateY(-2px); box-shadow:var(--shadow) }
.dfc-top { display:flex; align-items:center; gap:10px; margin-bottom:11px }
.dfc-ic { width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px }
.dfc-nm { font-size:13px; font-weight:700 }
.dfc-ch { font-size:9.5px; color:var(--t3); font-family:var(--fm) }
.dfc-tvl { font-size:18px; font-weight:800; font-family:var(--fm); margin-bottom:4px }
.dfc-bar { height:3px; background:var(--bg4); border-radius:2px; overflow:hidden; margin-top:10px }
.dfc-bar div { height:100%; border-radius:2px }
/* ═══════════════════════════════════════════
NFT
═══════════════════════════════════════════ */
.nft-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.nfc { background:var(--bg2); border:1px solid var(--b1); border-radius:10px; overflow:hidden; cursor:pointer; transition:all .2s }
.nfc:hover { border-color:var(--b2); transform:translateY(-2px); box-shadow:var(--shadow) }
.nfc-img { aspect-ratio:1; display:flex; align-items:center; justify-content:center; font-size:52px; border-bottom:1px solid var(--b1) }
.nfc-body { padding:11px }
.nfc-nm { font-size:12.5px; font-weight:700; margin-bottom:8px }
.nfc-g { display:grid; grid-template-columns:1fr 1fr; gap:6px }
.nfc-lbl { font-size:9px; color:var(--t3); font-family:var(--fm); text-transform:uppercase }
.nfc-val { font-size:12.5px; font-weight:700; font-family:var(--fm) }
.nfc-chain { display:inline-block; padding:2px 7px; border-radius:20px; font-size:9px; font-weight:700; font-family:var(--fm); margin-bottom:7px }
/* ═══════════════════════════════════════════
EXCHANGES
═══════════════════════════════════════════ */
.ex-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px }
.exc { background:var(--bg2); border:1px solid var(--b1); border-radius:10px; padding:12px; cursor:pointer; transition:all .2s }
.exc:hover { border-color:var(--b2); transform:translateY(-2px); box-shadow:var(--shadow) }
.exc-top { display:flex; align-items:flex-start; gap:9px; margin-bottom:9px }
.exc-ic { width:30px; height:30px; border-radius:7px; object-fit:cover; flex-shrink:0 }
.exc-tp { padding:2px 7px; border-radius:20px; font-size:8px; font-weight:700; font-family:var(--fm); margin-left:auto; flex-shrink:0 }
.exc-tp.cx { background:rgba(0,212,255,.1); color:var(--c1) }
.exc-tp.dx { background:rgba(16,185,129,.1); color:var(--g) }
.exc-nm { font-size:12px; font-weight:700; margin-bottom:4px }
.exc-ds { font-size:9px; color:var(--t2); margin-bottom:8px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.exc-row { display:flex; justify-content:space-between; margin-bottom:3px; font-size:9.5px }
.exc-k { color:var(--t3); font-family:var(--fm) }
.exc-v { font-weight:600; font-family:var(--fm) }
.exc-sc { display:flex; gap:2px; margin-top:7px }
.esb { flex:1; height:2px; border-radius:1px; background:var(--bg4) }
.esb.f { background:linear-gradient(90deg,var(--c1),var(--c2)) }
.exc-lnk { display:block; margin-top:9px; padding:6px; text-align:center; background:linear-gradient(135deg,var(--c1),var(--c2)); color:#fff; border-radius:7px; font-size:10.5px; font-weight:600; transition:all .2s }
.exc-lnk:hover { transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,212,255,.35) }
/* ═══════════════════════════════════════════
PORTFOLIO
═══════════════════════════════════════════ */
.port-header { background:linear-gradient(135deg,var(--bg2),var(--bg3)); border:1px solid var(--b1); border-radius:14px; padding:20px; margin-bottom:12px; position:relative; overflow:hidden }
.port-header::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 80% 50% at 50% 0%,rgba(0,212,255,.06),transparent) }
.ph-lbl { font-size:9.5px; color:var(--t2); font-family:var(--fm); text-transform:uppercase; letter-spacing:1.5px; margin-bottom:5px; position:relative }
.ph-total { font-size:32px; font-weight:900; font-family:var(--fm); position:relative; margin-bottom:12px }
.ph-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; position:relative }
.ph-st { background:rgba(255,255,255,.04); border-radius:10px; padding:11px; border:1px solid var(--b1) }
.ph-sl { font-size:9.5px; color:var(--t3); font-family:var(--fm); margin-bottom:3px }
.ph-sv { font-size:16px; font-weight:800 }
.port-layout { display:grid; grid-template-columns:1fr 260px; gap:12px }
.pt { width:100%; border-collapse:collapse }
.pt th,.pt td { padding:8px 12px; text-align:left; border-bottom:1px solid rgba(255,255,255,.03) }
.pt th { font-size:9.5px; font-weight:700; color:var(--t3); text-transform:uppercase; letter-spacing:.8px; font-family:var(--fm); background:var(--bg1); white-space:nowrap }
.pt td { font-size:11.5px }
.pt tr { cursor:pointer }
.pt tr:hover td { background:rgba(0,212,255,.025) }
.pt tr:last-child td { border-bottom:none }
.port-add { position:fixed; bottom:24px; right:24px; width:46px; height:46px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); border:none; font-size:22px; cursor:pointer; box-shadow:0 6px 20px rgba(0,212,255,.5); transition:all .2s; display:flex; align-items:center; justify-content:center; color:#fff; z-index:300 }
.port-add:hover { transform:scale(1.12) }
/* ═══════════════════════════════════════════
CONVERTER
═══════════════════════════════════════════ */
.conv-wrap { max-width:580px; margin:0 auto }
.conv-card { background:var(--bg2); border:1px solid var(--b1); border-radius:14px; padding:24px }
.conv-inp { background:var(--bg1); border:1px solid var(--b1); border-radius:11px; padding:12px 14px; display:flex; align-items:center; gap:10px; transition:all .2s }
.conv-inp:focus-within { border-color:var(--c1); box-shadow:0 0 0 3px rgba(0,212,255,.08) }
.conv-inp input { background:none; border:none; color:var(--t1); font-size:22px; font-weight:700; font-family:var(--fm); width:100%; min-width:0 }
.conv-inp select { background:var(--bg3); border:1px solid var(--b2); border-radius:8px; padding:6px 9px; color:var(--t1); font-size:12px; font-weight:600; cursor:pointer; font-family:var(--fd); flex-shrink:0; max-width:180px }
.conv-sw { width:36px; height:36px; border-radius:50%; background:var(--bg3); border:1px solid var(--b2); color:var(--c1); font-size:17px; display:flex; align-items:center; justify-content:center; margin:10px auto; cursor:pointer; transition:all .25s }
.conv-sw:hover { transform:rotate(180deg); border-color:var(--c1); box-shadow:0 0 14px rgba(0,212,255,.25) }
.conv-res { background:var(--bg1); border-radius:11px; padding:16px; margin-top:14px; text-align:center }
.crv { font-size:24px; font-weight:900; font-family:var(--fm); color:var(--c1) }
.crs { font-size:11px; color:var(--t2); margin-top:4px }
.conv-rates { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px }
.crc { background:var(--bg1); border-radius:9px; padding:10px; text-align:center; border:1px solid var(--b1) }
.crc-s { font-size:9.5px; color:var(--t3); font-family:var(--fm) }
.crc-v { font-size:13.5px; font-weight:700; font-family:var(--fm) }
/* ═══════════════════════════════════════════
ALERTS
═══════════════════════════════════════════ */
.al-form { background:var(--bg2); border:1px solid var(--b1); border-radius:12px; padding:18px; margin-bottom:14px; max-width:700px }
.fr { display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; align-items:end }
.fg { display:flex; flex-direction:column; gap:5px }
.fl { font-size:10px; color:var(--t2); font-family:var(--fm); text-transform:uppercase; letter-spacing:.7px }
.fi,.fs { background:var(--bg1); border:1px solid var(--b1); border-radius:9px; padding:8px 11px; color:var(--t1); font-size:12px; outline:none; font-family:var(--fd); transition:border-color .2s; width:100% }
.fi:focus,.fs:focus { border-color:var(--c1) }
.al-item { background:var(--bg2); border:1px solid var(--b1); border-radius:11px; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; max-width:700px; transition:all .2s }
.al-item.trig { border-color:rgba(245,158,11,.4); background:rgba(245,158,11,.04) }
.al-left { display:flex; align-items:center; gap:10px }
.al-coin-img { width:30px; height:30px; border-radius:50%; background:var(--bg4); object-fit:cover; flex-shrink:0 }
.al-tgt { font-size:15px; font-weight:800; font-family:var(--fm); color:var(--c1) }
.al-inf { font-size:10.5px; color:var(--t2); font-family:var(--fm); margin-top:2px }
.al-del { width:26px; height:26px; border-radius:7px; background:rgba(239,68,68,.1); color:var(--r); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; flex-shrink:0 }
.al-del:hover { background:rgba(239,68,68,.25) }
.al-stat { padding:2px 8px; border-radius:20px; font-size:9.5px; font-weight:700; font-family:var(--fm); white-space:nowrap }
/* ═══════════════════════════════════════════
COMPARE
═══════════════════════════════════════════ */
.cmp-layout { display:grid; grid-template-columns:1fr 60px 1fr; gap:12px; align-items:start }
.cmp-card { background:var(--bg2); border:1px solid var(--b1); border-radius:12px; padding:16px }
.cmp-vs { display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; color:var(--t3); padding-top:80px }
.cmp-sel { background:var(--bg1); border:1px solid var(--b1); border-radius:9px; padding:8px 11px; color:var(--t1); font-size:12px; font-weight:700; font-family:var(--fd); width:100%; margin-bottom:14px; cursor:pointer }
.cmp-br { display:flex; align-items:center; gap:8px; margin-bottom:6px }
.cmp-bl { font-size:10px; color:var(--t2); width:74px; flex-shrink:0 }
.cmp-bw { flex:1; height:4px; background:var(--bg4); border-radius:2px; overflow:hidden }
.cmp-bf { height:100%; border-radius:2px; transition:width .8s }
.cmp-bv { font-size:10.5px; font-family:var(--fm); font-weight:700; min-width:55px; text-align:right }
/* ═══════════════════════════════════════════
NEWS PAGE
═══════════════════════════════════════════ */
.news-page-grid { display:grid; grid-template-columns:1fr 1fr 1fr 230px; gap:12px }
.news-card { background:var(--bg2); border:1px solid var(--b1); border-radius:11px; padding:14px; cursor:pointer; transition:all .2s }
.news-card:hover { border-color:var(--b2); background:var(--bg3); transform:translateY(-2px) }
.nc-tag { display:inline-block; padding:2px 9px; border-radius:20px; font-size:9px; font-weight:700; font-family:var(--fm); text-transform:uppercase; margin-bottom:7px }
.nc-ttl { font-size:12.5px; font-weight:600; line-height:1.55; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden }
.nc-meta { font-size:10px; color:var(--t3); font-family:var(--fm) }
/* ═══════════════════════════════════════════
TREND GRID
═══════════════════════════════════════════ */
.trend-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px }
/* ═══════════════════════════════════════════
DISCOVER
═══════════════════════════════════════════ */
.disc-4col { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
/* ═══════════════════════════════════════════
MODAL
═══════════════════════════════════════════ */
.mov { position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.9); backdrop-filter:blur(16px); display:none; align-items:center; justify-content:center; padding:20px }
.mov.open { display:flex }
.mbx { background:var(--bg2); border:1px solid var(--b2); border-radius:18px; padding:22px; max-width:960px; width:100%; max-height:96vh; overflow-y:auto; animation:mIn .22s ease; position:relative }
@keyframes mIn { from{opacity:0;transform:translateY(24px) scale(.97)} to{opacity:1;transform:none} }
.mc { position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:8px; background:var(--bg3); border:1px solid var(--b1); color:var(--t2); font-size:13px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s; z-index:10 }
.mc:hover { color:var(--t1); border-color:var(--b2) }
.mhd { display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap }
.m-ico { width:46px; height:46px; border-radius:50%; flex-shrink:0; background:var(--bg4); object-fit:cover }
.mcn { font-size:20px; font-weight:900 }
.mcs { font-size:11.5px; color:var(--t3); font-family:var(--fm) }
.mpb { margin-left:auto; text-align:right }
.mpr { font-size:22px; font-weight:900; font-family:var(--fm) }
.m-sg { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:16px }
.mst { background:var(--bg1); border-radius:10px; padding:11px }
.msl { font-size:9px; color:var(--t3); text-transform:uppercase; letter-spacing:1.2px; font-family:var(--fm); margin-bottom:3px }
.msv { font-size:16px; font-weight:800; font-family:var(--fm) }
.m-cw { background:var(--bg1); border-radius:11px; padding:14px; margin-bottom:14px }
.m-tabs { display:flex; gap:3px; margin-bottom:12px }
.m-tb { padding:4px 10px; border-radius:6px; font-size:10.5px; font-weight:700; font-family:var(--fm); color:var(--t2); cursor:pointer; transition:all .15s }
.m-tb.on { background:var(--c1); color:var(--bg0) }
.m-tb:hover:not(.on) { color:var(--t1); background:var(--b0) }
.m-about { background:var(--bg1); border-radius:10px; padding:13px; font-size:11.5px; color:var(--t2); line-height:1.75 }
.m-links { display:flex; gap:6px; margin-top:11px; flex-wrap:wrap }
.m-lnk { padding:5px 10px; border-radius:8px; font-size:10.5px; font-weight:600; background:var(--bg3); border:1px solid var(--b1); color:var(--t2); cursor:pointer; transition:all .15s }
.m-lnk:hover { color:var(--c1); border-color:rgba(0,212,255,.3) }
.msm { background:var(--bg2); border:1px solid var(--b2); border-radius:16px; padding:22px; max-width:400px; width:100%; animation:mIn .22s ease; position:relative }
.mfr { display:flex; flex-direction:column; gap:6px; margin-bottom:13px }
/* ═══════════════════════════════════════════
TOAST
═══════════════════════════════════════════ */
.toast { position:fixed; bottom:22px; right:22px; z-index:3000; background:var(--bg3); border:1px solid var(--b2); padding:10px 16px; border-radius:11px; font-size:12px; box-shadow:0 10px 28px rgba(0,0,0,.7); transform:translateY(70px); opacity:0; transition:all .24s; max-width:280px; pointer-events:none }
.toast.sh { transform:translateY(0); opacity:1 }
.toast.s { border-color:rgba(16,185,129,.5); color:var(--g) }
.toast.e { border-color:rgba(239,68,68,.5); color:var(--r) }
[dir=rtl] .toast { left:22px; right:auto }
/* ═══════════════════════════════════════════
MOBILE NAV
═══════════════════════════════════════════ */
.mnav { display:none; position:fixed; inset:0; z-index:800; background:rgba(5,11,20,.98); flex-direction:column; align-items:center; justify-content:center; gap:6px; overflow-y:auto; padding:20px }
.mnav.open { display:flex }
.mnav span { font-size:16px; font-weight:700; color:var(--t2); padding:10px 32px; border-radius:10px; transition:all .15s; cursor:pointer; width:100%; max-width:260px; text-align:center }
.mnav span:hover { color:var(--c1); background:rgba(0,212,255,.07) }
.mnav span.on { color:var(--c1); background:rgba(0,212,255,.1) }
/* ═══════════════════════════════════════════
SECTION HEADERS
═══════════════════════════════════════════ */
.shd { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:14px; flex-wrap:wrap; gap:10px }
.sttl { font-size:16px; font-weight:900 }
.ssub { font-size:11px; color:var(--t2); margin-top:2px }
/* TradingView */
#tvContainer { min-height:400px; border-radius:8px; overflow:hidden }
/* ═══════════════════════════════════════════
WIDE SCREEN (TV / Ultra-wide)
═══════════════════════════════════════════ */
@media(min-width:1801px) {
.app-wrap { padding:14px 24px 60px; max-width: 95%; }
.mkt-top { grid-template-columns:minmax(0,1.6fr) minmax(0,1.1fr) 300px }
.mkt-bot { grid-template-columns:1fr 1fr 1fr 1fr }
.nft-grid { grid-template-columns:repeat(5,1fr) }
.ex-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)) }
.defi-grid { grid-template-columns:repeat(4,1fr) }
.news-page-grid { grid-template-columns:1fr 1fr 1fr 1fr 250px }
.disc-4col { grid-template-columns:repeat(5,1fr) }
.hm-grid { grid-template-columns:repeat(6,1fr) }
.stats-row { grid-template-columns:repeat(6,1fr) }
}
/* Large desktop */
@media(max-width:1400px) {
.mkt-top { grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
.ins-block { display:none }
}
@media(max-width:1100px) {
.mkt-top { grid-template-columns:1fr }
.mkt-bot { grid-template-columns:1fr 1fr }
.defi-grid { grid-template-columns:1fr 1fr }
.nft-grid { grid-template-columns:1fr 1fr 1fr }
.ex-grid { grid-template-columns:1fr 1fr }
.news-page-grid { grid-template-columns:1fr 1fr }
.disc-4col { grid-template-columns:1fr 1fr }
.trend-grid { grid-template-columns:1fr }
}
/* Tablet */
@media(max-width:900px) {
.navlinks { display:none!important }
.ham { display:flex!important }
.srch-box { width:160px }
.srch-box:focus-within { width:200px }
.mkt-bot { grid-template-columns:1fr 1fr }
.port-layout { grid-template-columns:1fr }
.cmp-layout { grid-template-columns:1fr }
.cmp-vs { display:none }
.stats-row { grid-template-columns:repeat(2,1fr) }
.fr { grid-template-columns:1fr 1fr }
.defi-top { grid-template-columns:1fr 1fr }
.news-page-grid { grid-template-columns:1fr }
.ph-grid { grid-template-columns:1fr 1fr }
}
/* Mobile */
@media(max-width:620px) {
:root { --nav:52px; --tick:30px }
html { font-size:12px }
.app-wrap { padding:8px 10px 56px }
.mkt-bot { grid-template-columns:1fr }
.nft-grid { grid-template-columns:1fr 1fr }
.ex-grid { grid-template-columns:1fr }
.ph-grid { grid-template-columns:1fr 1fr }
.fr { grid-template-columns:1fr }
.defi-top { grid-template-columns:1fr 1fr }
.defi-grid { grid-template-columns:1fr }
.hm-grid { grid-template-columns:repeat(3,1fr) }
.m-sg { grid-template-columns:1fr 1fr }
.srch-box { width:130px }
.srch-kbd { display:none }
.gbar { display:none }
.port-header { padding:14px }
.ph-total { font-size:24px }
.logo-ver { display:none }
.conv-wrap { padding:0 }
.disc-4col { grid-template-columns:1fr 1fr }
.stats-row { grid-template-columns:1fr 1fr }
.pag-jump { display:none }
}
/* Extra small */
@media(max-width:420px) {
.hm-grid { grid-template-columns:repeat(3,1fr) }
.nft-grid { grid-template-columns:1fr }
.disc-4col { grid-template-columns:1fr }
.stats-row { grid-template-columns:1fr 1fr }
.m-sg { grid-template-columns:1fr 1fr }
}
/* RTL support */
[dir=rtl] .navlinks, [dir=rtl] .cc, [dir=rtl] .mhd, [dir=rtl] .al-left { flex-direction:row-reverse }
[dir=rtl] .mpb { text-align:left; margin-left:0; margin-right:auto }
[dir=rtl] .nav-r { margin-left:0; margin-right:auto }
[dir=rtl] .logo-tx { background:linear-gradient(270deg,var(--c1),#a78bfa); -webkit-background-clip:text; background-clip:text }
/* ═══════════════════════════════════════════
BOTTOM NAV (Mobile)
═══════════════════════════════════════════ */
.bottom-nav { display:none; position:fixed; bottom:0; left:0; right:0; z-index:700; height:54px; background:rgba(8,15,28,.97); border-top:1px solid var(--b1); backdrop-filter:blur(20px); align-items:center; justify-content:space-around; padding:0 4px }
@media(max-width:900px) { .bottom-nav { display:flex } }
.bn-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:6px 10px; border-radius:9px; cursor:pointer; transition:all .15s; flex:1; max-width:70px }
.bn-item:hover,.bn-item.on { background:rgba(0,212,255,.08) }
.bn-icon { font-size:18px; line-height:1 }
.bn-lbl { font-size:8.5px; font-weight:600; color:var(--t3) }
.bn-item.on .bn-lbl { color:var(--c1) }
.bn-item.on .bn-icon { filter:drop-shadow(0 0 4px var(--c1)) }
/* ═══════════════════════════════════════════
SCROLLABLE TABLE WRAPPER
═══════════════════════════════════════════ */
.tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch }
.tbl-wrap::-webkit-scrollbar { height:4px }
/* Category filter chips */
.cat-chips { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px }
.cat-chips::-webkit-scrollbar { display:none }
.cat-chip { padding:4px 12px; border-radius:20px; font-size:10.5px; font-weight:600; border:1px solid var(--b1); background:var(--bg2); color:var(--t2); cursor:pointer; transition:all .15s; white-space:nowrap; flex-shrink:0 }
.cat-chip:hover { border-color:var(--c1); color:var(--c1) }
.cat-chip.on { background:var(--c1); color:var(--bg0); border-color:var(--c1) }