:root{--bg:#0A0A0F;--bg2:#0D0D15;--card:rgba(255,255,255,.05);--bd:rgba(255,255,255,.07);--ac:#6366F1;--ac2:#8B5CF6;--green:#10B981;--yellow:#F59E0B;--red:#EF4444;--t1:#F8FAFC;--t2:#94A3B8;--t3:#64748B;--grad:linear-gradient(135deg,#6366F1,#8B5CF6)}
*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}
html,body{background:var(--bg);color:var(--t1);font:14px/1.4 -apple-system,"SF Pro Text",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
body{min-height:100dvh;background:radial-gradient(120% 50% at 50% -10%,rgba(99,102,241,.16),transparent 60%),linear-gradient(var(--bg),var(--bg2))}
main{max-width:520px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px calc(96px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.card{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:16px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);position:relative;transition:box-shadow .4s,transform .15s}
a.card,.tap{cursor:pointer}a.card:active,.tap:active{transform:scale(.985)}
a{color:inherit;text-decoration:none}
.glow-red{box-shadow:0 0 28px rgba(239,68,68,.12);border-color:rgba(239,68,68,.25)}
.row{display:flex;align-items:center;gap:10px}.sp{justify-content:space-between}.col{display:flex;flex-direction:column}
h2{font-size:16px;font-weight:600}h1{font-size:20px;font-weight:700}
.big{font-size:38px;font-weight:700;letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.val{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.cap{font-size:12px;color:var(--t2)}.mut{color:var(--t3)}
.sec{display:flex;justify-content:space-between;align-items:center;padding:4px 2px 0}
.sec .l{display:flex;gap:8px;align-items:center}.sec span.cap{color:var(--t3)}
.hdr{display:flex;justify-content:space-between;align-items:center}
.logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;box-shadow:0 4px 16px rgba(99,102,241,.35)}
.ibtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--card);border:1px solid var(--bd);position:relative;color:var(--t2)}
.badge{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;border-radius:9px;background:var(--red);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;padding:0 4px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
.dot.green{background:var(--green)}.dot.yellow{background:var(--yellow)}.dot.red{background:var(--red)}.dot.gray{background:var(--t3)}
.dot.pulse{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,.45)}50%{box-shadow:0 0 0 5px rgba(16,185,129,0)}}
.status{display:flex;align-items:center;gap:14px;border-color:rgba(16,185,129,.25);background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(255,255,255,.03))}
.status.yellow{border-color:rgba(245,158,11,.3);background:linear-gradient(135deg,rgba(245,158,11,.12),rgba(255,255,255,.03))}
.status.red{border-color:rgba(239,68,68,.3);background:linear-gradient(135deg,rgba(239,68,68,.14),rgba(255,255,255,.03))}
.status .ring{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(16,185,129,.15);color:var(--green)}
.status.yellow .ring{background:rgba(245,158,11,.15);color:var(--yellow)}.status.red .ring{background:rgba(239,68,68,.15);color:var(--red)}
.status .grow{flex:1}.status .val{font-size:18px}
.g3{display:flex;gap:10px}.g3 > a{flex:1;min-width:0;display:block}.g3 > a > .card{width:100%;height:100%}.g2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini{padding:12px;display:flex;flex-direction:column;gap:6px}.mini .val{font-size:26px;font-weight:700}
.mini svg{color:var(--ac2)}.mini .cap{display:flex;align-items:center;gap:5px}
.up{color:var(--green);display:flex;align-items:center;gap:4px;font-weight:600}.down{color:var(--red)}
.pill{padding:3px 9px;border-radius:99px;font-size:12px;font-weight:600;background:rgba(239,68,68,.14);color:#FCA5A5}
.pill.g{background:rgba(16,185,129,.14);color:#6EE7B7}.pill.y{background:rgba(245,158,11,.14);color:#FCD34D}.pill.n{background:rgba(255,255,255,.07);color:var(--t2)}
.bars{display:flex;align-items:flex-end;gap:8px;height:84px;margin-top:14px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;justify-content:flex-end;height:100%}
.bars i{width:100%;border-radius:6px 6px 3px 3px;background:var(--grad);transform-origin:bottom;animation:grow .8s cubic-bezier(.2,.8,.2,1) both;opacity:.9}
.bars div:last-child i{opacity:1;box-shadow:0 0 14px rgba(139,92,246,.4)}
@keyframes grow{from{transform:scaleY(0)}}
.seg{display:flex;background:rgba(255,255,255,.05);border-radius:10px;padding:3px;gap:2px}
.seg button{flex:1;border:0;background:none;color:var(--t2);font:inherit;font-size:13px;font-weight:500;padding:7px 0;border-radius:8px;cursor:pointer;transition:.2s}
.seg button.on{background:var(--grad);color:#fff;box-shadow:0 2px 10px rgba(99,102,241,.35)}
.chart{width:100%;height:110px;margin-top:10px;overflow:visible}
.chart .ln{fill:none;stroke:#8B5CF6;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.xl{display:flex;justify-content:space-between;font-size:11px;color:var(--t3);margin-top:4px}
.rank{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--grad)}
.rank.r2{background:rgba(255,255,255,.12)}.rank.r3{background:rgba(255,255,255,.07)}
.prog{height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:hidden;margin-top:10px}
.prog i{display:block;height:100%;border-radius:3px;background:var(--green);width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.prog i.yellow{background:var(--yellow)}.prog i.red{background:var(--red)}
.sc{padding:14px}.sc .row:first-child{margin-bottom:6px}
.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:left}.sec3>div{display:flex;flex-direction:column;gap:4px}
.sec3 svg{color:var(--t2);width:18px}.sec3 b{font-size:16px;font-weight:600}
.list{display:flex;flex-direction:column}.list>.li{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--bd)}.list>.li:last-child{border:0}
.li .grow{flex:1;min-width:0}.li b{font-weight:600}
.av{width:36px;height:36px;border-radius:50%;background:var(--grad);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.search{width:100%;background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:11px 14px;color:var(--t1);font-size:16px;font-family:inherit;outline:none}
.search:focus{border-color:var(--ac)}
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}.chips button{white-space:nowrap;border:1px solid var(--bd);background:var(--card);color:var(--t2);padding:6px 12px;border-radius:99px;font:inherit;font-size:13px}
.chips button.on{background:rgba(99,102,241,.2);border-color:var(--ac);color:#fff}
nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;justify-content:space-around;padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));background:rgba(10,10,15,.8);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid var(--bd)}
nav a{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;font-size:11px;color:var(--t3);border-radius:12px;transition:color .2s}
nav a.on{color:var(--ac2)}nav a.on svg{filter:drop-shadow(0 0 6px rgba(139,92,246,.7))}
.back{display:flex;align-items:center;gap:8px}
.skel{height:90px;border-radius:16px;background:linear-gradient(90deg,var(--card),rgba(255,255,255,.08),var(--card));background-size:200% 100%;animation:sh 1.3s infinite}
@keyframes sh{to{background-position:-200% 0}}
.in{animation:fi .5s ease both}@keyframes fi{from{opacity:0;transform:translateY(6px)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.chart .ln{stroke-dashoffset:0}}
a.li{text-decoration:none;color:inherit}