/* VoxTradePro app UI (mobile-first market screens). Original styles. */
:root{--bg:#0b0e14;--s1:#11151d;--s2:#171c26;--s3:#1e2430;--ln:#232a37;--tx:#e9edf5;--mut:#8b94a7;--mut2:#5f687a;--ac:#f5b301;--ac2:#2fd3a7;--up:#16c784;--dn:#ea3943;--upb:rgba(22,199,132,.14);--dnb:rgba(234,57,67,.14);--r:14px;--top:52px;--tabs:0px;color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html{background:var(--bg);-webkit-text-size-adjust:100%;overscroll-behavior-y:none}
body{margin:0;background:var(--bg);color:var(--tx);font:14px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,sans-serif;min-height:100vh;padding-bottom:calc(var(--tabs) + env(safe-area-inset-bottom));overflow-x:hidden}
body.web{--tabs:60px}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select{font:inherit;color:var(--tx)}
svg{display:block}
.num,.p,.pc,.n{font-variant-numeric:tabular-nums}
.up{color:var(--up)}.dn{color:var(--dn)}.mut{color:var(--mut)}
/* top bar */
.top{position:sticky;top:0;z-index:40;background:rgba(11,14,20,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--ln)}
.tb{height:var(--top);display:flex;align-items:center;gap:8px;padding:0 12px;max-width:900px;margin:0 auto}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:17px;letter-spacing:-.2px}.brand svg{width:26px;height:26px}.brand b{color:var(--ac)}
.live{margin-left:auto;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--mut);padding:5px 9px;border-radius:99px;background:var(--s1);border:1px solid var(--ln)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--mut2)}
.live.on i{background:var(--up);box-shadow:0 0 0 0 rgba(22,199,132,.6);animation:pulse 2s infinite}.live.on span{color:var(--tx)}
.live.warn i{background:var(--ac)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,199,132,.55)}70%{box-shadow:0 0 0 7px rgba(22,199,132,0)}100%{box-shadow:0 0 0 0 rgba(22,199,132,0)}}
.ib{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s1);border:1px solid var(--ln)}
.ib svg{width:19px;height:19px;fill:none;stroke:var(--tx);stroke-width:2;stroke-linecap:round}
.view{max-width:900px;margin:0 auto;min-height:60vh}
/* global strip */
.gs{display:flex;gap:8px;overflow-x:auto;padding:10px 12px 4px;scrollbar-width:none;scroll-snap-type:x proximity}.gs::-webkit-scrollbar{display:none}
.gc{flex:0 0 auto;min-width:118px;background:var(--s1);border:1px solid var(--ln);border-radius:12px;padding:8px 10px;scroll-snap-align:start}
.gc b{display:block;font-size:11px;font-weight:600;color:var(--mut);margin-bottom:2px;white-space:nowrap}
.gc .v{font-size:15px;font-weight:700;white-space:nowrap}.gc .s{font-size:11.5px;white-space:nowrap}
.gc.fg{display:flex;align-items:center;gap:8px;min-width:150px}.gc.fg svg{width:46px;height:28px;flex:0 0 auto}
.bar2{height:4px;border-radius:4px;background:var(--s3);overflow:hidden;margin-top:5px}.bar2 i{display:block;height:100%;background:var(--ac)}
/* chips */
.chips{display:flex;gap:6px;overflow-x:auto;padding:8px 12px;scrollbar-width:none;position:sticky;top:var(--top);z-index:30;background:var(--bg)}.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;padding:7px 12px;border-radius:99px;background:var(--s1);border:1px solid var(--ln);color:var(--mut);font-weight:600;font-size:13px;white-space:nowrap}
.chip.on{background:var(--tx);color:#0b0e14;border-color:var(--tx)}
.seg{display:flex;background:var(--s1);border:1px solid var(--ln);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;padding:6px 10px;border-radius:8px;color:var(--mut);font-weight:600;font-size:12.5px;white-space:nowrap}
.seg button.on{background:var(--s3);color:var(--tx)}
.tools{display:flex;align-items:center;gap:8px;padding:2px 12px 6px}
.tools .seg{flex:0 0 auto}.tools .sp{flex:1}
.sel{background:var(--s1);border:1px solid var(--ln);border-radius:10px;padding:6px 8px;font-size:12.5px;font-weight:600;color:var(--tx);appearance:none;-webkit-appearance:none;padding-right:22px;background-image:linear-gradient(45deg,transparent 50%,var(--mut) 50%),linear-gradient(135deg,var(--mut) 50%,transparent 50%);background-position:calc(100% - 11px) 50%,calc(100% - 7px) 50%;background-size:4px 4px;background-repeat:no-repeat}
/* coin rows */
.lh{display:grid;grid-template-columns:20px 1fr 54px 98px;gap:7px;padding:6px 10px;font-size:11px;color:var(--mut2);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
.lh span:last-child{text-align:right}
.row{display:grid;grid-template-columns:20px 1fr 54px 98px;gap:7px;align-items:center;padding:9px 10px;border-bottom:1px solid rgba(35,42,55,.55);content-visibility:auto;contain-intrinsic-size:auto 58px}
.row:active{background:var(--s1)}
.rk{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11px;color:var(--mut)}
.star{width:20px;height:20px;display:grid;place-items:center}.star svg{width:15px;height:15px;fill:none;stroke:var(--mut2);stroke-width:2}
.star.on svg{fill:var(--ac);stroke:var(--ac)}
.nm{display:flex;align-items:center;gap:8px;min-width:0}
.lg{width:26px;height:26px;border-radius:50%;background:var(--s3);flex:0 0 auto;object-fit:cover}
.nm div{min-width:0}.nm b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nm small{display:block;font-size:11px;letter-spacing:-.1px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sk{width:54px;height:30px}.sk polyline{fill:none;stroke-width:1.5;stroke-linejoin:round}
.pr{text-align:right;min-width:0}
.pr .p{display:inline-block;font-size:14.5px;font-weight:700;padding:1px 3px;margin-right:-3px;border-radius:5px;white-space:nowrap;transition:background-color .6s}
.pr .pc{display:block;font-size:12px;font-weight:600;margin-top:2px}
.fu{background:var(--upb)!important;color:var(--up);transition:none!important}.fd{background:var(--dnb)!important;color:var(--dn);transition:none!important}
.badge{display:inline-block;padding:3px 7px;border-radius:7px;font-weight:700;font-size:12.5px;color:#fff}
.badge.up{background:var(--up)}.badge.dn{background:var(--dn)}
.empty{padding:40px 24px;text-align:center;color:var(--mut)}.empty b{display:block;color:var(--tx);font-size:16px;margin-bottom:6px}
.more-btn{display:block;margin:14px auto;padding:10px 18px;border-radius:12px;background:var(--s2);border:1px solid var(--ln);font-weight:700}
/* sections / cards */
.sec{padding:12px}
.sec h2{font-size:16px;margin:4px 0 10px;display:flex;align-items:center;gap:8px}.sec h2 small{margin-left:auto;font-size:12px;color:var(--mut);font-weight:500}
.card{background:var(--s1);border:1px solid var(--ln);border-radius:var(--r);padding:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv{background:var(--s1);border:1px solid var(--ln);border-radius:12px;padding:10px}
.kv b{display:block;font-size:11.5px;color:var(--mut);font-weight:600;margin-bottom:3px}.kv span{font-size:14.5px;font-weight:700}.kv small{display:block;font-size:11.5px;color:var(--mut);margin-top:2px}
.list .li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid rgba(35,42,55,.55)}
.li .x{flex:1;min-width:0}.li .x b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.li .x small{display:block;color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .r{text-align:right;white-space:nowrap}.li .r b{display:block;font-weight:700}.li .r small{display:block;font-size:12px}
.ix{width:22px;color:var(--mut);font-size:12px;text-align:center;flex:0 0 auto}
.trust{display:inline-block;width:46px;height:5px;border-radius:5px;background:var(--s3);vertical-align:middle;overflow:hidden}.trust i{display:block;height:100%;background:var(--up)}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px}
.gl .card{padding:0;overflow:hidden}.gl h3{margin:0;padding:10px 12px 6px;font-size:14px}
.gl .li{padding:8px 10px;gap:8px}.gl .lg{width:22px;height:22px}.gl .li .x b{font-size:13px}.gl .li .r b{font-size:13px}
/* coin detail */
.dh{display:flex;align-items:center;gap:10px;padding:12px 12px 4px}
.back{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:var(--s1);border:1px solid var(--ln)}.back svg{width:18px;height:18px;fill:none;stroke:var(--tx);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dh .lg{width:34px;height:34px}
.dh .t{flex:1;min-width:0}.dh .t b{font-size:17px;display:block}.dh .t small{color:var(--mut);font-size:12px}
.rkb{background:var(--s3);color:var(--mut);border-radius:6px;padding:1px 6px;font-size:11.5px;font-weight:700;margin-left:4px}
.dp{padding:2px 12px 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.dp .p{font-size:30px;font-weight:800;letter-spacing:-.5px;padding:0 4px;margin-left:-4px;border-radius:8px;transition:background-color .6s}
.dp .hl{width:100%;font-size:12px;color:var(--mut)}
.tf{display:flex;gap:4px;padding:6px 12px;align-items:center}
.tf button{padding:6px 9px;border-radius:8px;color:var(--mut);font-weight:700;font-size:12.5px}.tf button.on{background:var(--s3);color:var(--tx)}
.tf .sp{flex:1}
.chart{position:relative;height:min(56vh,420px);min-height:300px;margin:0 4px}
.chart .msg{position:absolute;inset:0;display:grid;place-items:center;color:var(--mut);font-size:13px;text-align:center;padding:20px}
.ohlc{padding:0 12px;font-size:11.5px;color:var(--mut);min-height:16px;font-variant-numeric:tabular-nums}
.cta{display:flex;gap:8px;padding:10px 12px}
.btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:12px;border-radius:12px;font-weight:800;font-size:14.5px;background:var(--s2);border:1px solid var(--ln)}
.btn.pri{background:var(--ac);color:#111;border-color:var(--ac)}.btn.g{background:var(--up);border-color:var(--up);color:#fff}.btn.r{background:var(--dn);border-color:var(--dn);color:#fff}
.rng{margin-top:6px}.rng .tr{position:relative;height:5px;border-radius:5px;background:linear-gradient(90deg,var(--dn),var(--ac),var(--up));opacity:.85}.rng .tr i{position:absolute;top:-4px;width:3px;height:13px;border-radius:2px;background:#fff;transform:translateX(-1px)}
.rng .ends{display:flex;justify-content:space-between;font-size:11.5px;color:var(--mut);margin-top:4px}
.about{color:#c7cedb;font-size:14px;line-height:1.6}.about p{margin:0 0 10px}.about.clip{max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 60%,transparent)}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.links a{padding:6px 10px;border-radius:9px;background:var(--s2);border:1px solid var(--ln);font-size:12.5px;font-weight:600}
.calc label{display:block;font-size:12px;color:var(--mut);font-weight:600;margin:8px 0 4px}
.inp{width:100%;background:var(--s2);border:1px solid var(--ln);border-radius:10px;padding:10px 12px;font-size:15px;font-weight:600;outline:none}.inp:focus{border-color:var(--ac)}
.rngin{width:100%;accent-color:var(--ac)}
.res{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:10px}.res div{background:var(--s2);border-radius:10px;padding:8px 10px}.res b{display:block;font-size:11.5px;color:var(--mut)}.res span{font-weight:800}
.disc{margin:16px 12px 20px;font-size:11.5px;color:var(--mut2);line-height:1.5}
/* sheet / search */
.search{position:fixed;inset:0;z-index:60;background:var(--bg);display:flex;flex-direction:column}
.sbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--ln)}.sbar svg{width:18px;height:18px;fill:none;stroke:var(--mut);stroke-width:2}
.sbar input{flex:1;background:var(--s1);border:1px solid var(--ln);border-radius:11px;padding:10px 12px;font-size:16px;outline:none}
.txtb{color:var(--ac);font-weight:700;padding:6px}
.qres{overflow-y:auto;flex:1}
.qh{padding:12px 12px 4px;font-size:12px;color:var(--mut);font-weight:700;text-transform:uppercase}
.sheet{position:fixed;inset:0;z-index:70}.sh-bg{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.sh-card{position:absolute;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;background:var(--s1);border-radius:18px 18px 0 0;padding:8px 14px calc(18px + env(safe-area-inset-bottom));animation:up .2s ease-out}
.sh-h{width:40px;height:4px;border-radius:4px;background:var(--s3);margin:2px auto 10px}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
.toast{position:fixed;left:50%;bottom:calc(var(--tabs) + 24px);transform:translateX(-50%) translateY(20px);background:var(--s3);color:var(--tx);padding:10px 16px;border-radius:12px;font-weight:600;opacity:0;pointer-events:none;transition:.2s;z-index:80;max-width:90vw}
.toast.on{opacity:1;transform:translateX(-50%)}
/* web tabs (hidden inside the Android app which has native tabs) */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;background:rgba(17,21,29,.96);border-top:1px solid var(--ln);padding-bottom:env(safe-area-inset-bottom)}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;font-size:11px;color:var(--mut);font-weight:600}
.tabs a svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tabs a.on{color:var(--ac)}
/* more grid */
.mg{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 12px}
.mg a{background:var(--s1);border:1px solid var(--ln);border-radius:14px;padding:14px 8px;text-align:center;font-weight:700;font-size:12.5px}
.mg a i{display:block;font-style:normal;font-size:22px;margin-bottom:6px}
/* fng */
.fgw{display:flex;flex-direction:column;align-items:center;padding:6px 0}.fgw svg{width:230px;height:130px}
.fgw .v{font-size:36px;font-weight:800;margin-top:-34px}.fgw .c{font-weight:700;margin-top:2px}
.bars{display:flex;align-items:flex-end;gap:2px;height:90px;margin-top:10px}.bars i{flex:1;border-radius:2px 2px 0 0;min-height:2px}
/* news */
.nw{display:block;padding:12px;border-bottom:1px solid rgba(35,42,55,.55)}.nw b{display:block;font-size:14.5px;line-height:1.35}.nw small{display:block;color:var(--mut);font-size:12px;margin-top:4px}
.skel{height:56px;margin:6px 12px;border-radius:12px;background:linear-gradient(90deg,var(--s1),var(--s2),var(--s1));background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}
.foot{padding:4px 12px 16px;font-size:11.5px;color:var(--mut2)}
.pill{display:inline-block;font-size:11px;padding:1px 7px;border-radius:99px;background:var(--s3);color:var(--mut);font-weight:700;vertical-align:middle}
.pill.w{background:rgba(245,179,1,.15);color:var(--ac)}
.tbl{width:100%;border-collapse:collapse;font-size:13px}.tbl td,.tbl th{padding:8px 6px;border-bottom:1px solid rgba(35,42,55,.55);text-align:right;white-space:nowrap}.tbl td:first-child,.tbl th:first-child{text-align:left}.tbl th{font-size:11px;color:var(--mut);font-weight:700;text-transform:uppercase}
.hs{overflow-x:auto}
@media(min-width:700px){.row,.lh{grid-template-columns:22px 1fr 110px 130px}.row .sk{width:110px}.gl{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* markets filter bar + sortable header (CMC-style behaviour) */
.fbar{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;gap:6px}.fbar::-webkit-scrollbar{display:none}
.fbar .seg,.fbar .sel{flex:0 0 auto}.fbar .seg button{padding:6px 8px}
.fbtn{position:relative;flex:0 0 auto;width:34px;height:34px}.fbtn .fdot{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--ac)}
.lh button{all:unset;cursor:pointer;font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;padding:6px 0;white-space:nowrap;-webkit-tap-highlight-color:transparent}
.lh button.on{color:var(--tx)}.lh .lr{display:flex;justify-content:flex-end;gap:8px}.lh{position:relative;z-index:1}
.chk{display:flex;align-items:center;gap:8px;font-weight:600;margin:4px 0 6px}.chk input{width:18px;height:18px;accent-color:var(--ac)}
.fch{flex:0 0 auto;min-width:34px;height:31px;padding:0 10px;background:var(--s1);border:1px solid var(--ln);border-radius:10px;font-weight:700;font-size:12.5px;color:var(--tx)}
.lh .dd{text-align:left}.lh .pop{position:absolute;top:100%;min-width:160px;background:var(--s2,#161b25);border:1px solid var(--ln);border-radius:12px;padding:4px;box-shadow:0 10px 30px rgba(0,0,0,.45);z-index:20;text-transform:none;letter-spacing:0}
.lh .pop button{display:block;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--tx)}.lh .pop button.on{color:var(--ac);background:var(--s3)}
#dbg{position:fixed;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:99;background:rgba(0,0,0,.86);color:#9fe8c3;font:11px/1.45 ui-monospace,Menlo,monospace;white-space:pre-wrap;padding:8px 10px;border-radius:10px;border:1px solid #2a3344}
#liveDot{cursor:pointer}
.fbar #cat{flex:0 1 auto;width:auto;max-width:124px;min-width:0}.fbar #rankTop{flex:0 0 auto;width:auto}
.fgw .v{margin-top:2px}
.seg-b{flex:0 0 auto;padding:7px 12px;border-radius:10px;background:var(--s2);border:1px solid var(--ln);font-size:12px;font-weight:700;color:var(--tx)}
#hT .tbl td,#hT .tbl th{padding:7px 5px;font-size:12px}
.hm{position:relative;margin:4px 12px 0;border-radius:12px;overflow:hidden;background:var(--s1)}
.hmt{position:absolute;box-sizing:border-box;border:1px solid #0b0e14;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;color:#fff;text-decoration:none;line-height:1.15;text-align:center;transition:background-color .4s}
.hmt b{font-size:11px;font-weight:800}.hmt .p{font-size:10px;opacity:.9}.hmt .pc{font-size:10px;font-weight:700}
.hmt.m b{font-size:13px}.hmt.m .p,.hmt.m .pc{font-size:11px}.hmt.b b{font-size:18px}.hmt.b .p{font-size:13px}.hmt.b .pc{font-size:13px}
.hmleg{display:flex;align-items:center;gap:6px;margin:8px 12px 0;font-size:11px;color:var(--mut)}.hmleg i{flex:0 0 120px;height:8px;border-radius:4px;background:linear-gradient(90deg,rgb(200,45,52),#2a3140,rgb(14,150,90))}
.seg-b.on{border-color:var(--ac,#F5B301)}
.cyhit{display:flex;align-items:center;gap:12px}.cyhit b{font-size:22px;display:block}.cybar{flex:1;height:8px;border-radius:4px;background:var(--s2);overflow:hidden}.cybar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f5b301,#ea3943)}
.cyl{display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}.cyi span{font-weight:700}.cyi.hit{border-color:#ea3943}
.cyk{display:flex;flex-wrap:wrap;gap:10px;margin:8px 2px 0;font-size:11px;color:var(--mut)}.cyk span:before{content:'';display:inline-block;width:10px;height:3px;border-radius:2px;background:var(--c);margin-right:5px;vertical-align:middle}
.apb{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12px;color:var(--tx);text-decoration:none}.apb span{flex:0 0 54px;font-weight:700;overflow:hidden;text-overflow:ellipsis}.apb i{display:block;height:8px;border-radius:4px;min-width:2px}.apb i.up{background:#16c784}.apb i.dn{background:#ea3943}.apb b{margin-left:auto;font-size:12px}