@font-face{font-family:Vazirmatn;font-weight:400;font-display:swap;src:url(fonts/Vazirmatn-Regular.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:500;font-display:swap;src:url(fonts/Vazirmatn-Medium.woff2) format("woff2")}
@font-face{font-family:Vazirmatn;font-weight:700;font-display:swap;src:url(fonts/Vazirmatn-Bold.woff2) format("woff2")}
@font-face{font-family:Chakra;font-weight:600;font-display:swap;src:url(fonts/chakrapetch-600-latin.woff2) format("woff2")}
@font-face{font-family:Chakra;font-weight:700;font-display:swap;src:url(fonts/chakrapetch-700-latin.woff2) format("woff2")}
:root{
  --bg:#06080b;--bg2:#0b0f14;--s1:#10151c;--s2:#161c25;--line:rgba(190,205,225,.09);--line2:rgba(190,205,225,.16);
  --tx:#e8edf3;--tx2:#9aa6b4;--tx3:#667282;
  --steel:linear-gradient(135deg,#f4f7fb 0%,#b9c3cf 38%,#7d8895 62%,#d5dce5 100%);
  --ice:#8fd0ff;--ice2:#5aa9e6;--glow:0 0 28px rgba(120,190,255,.22);
  --ok:#3fdc9a;--warn:#ffb84d;--bad:#ff6b73;
  --r:18px;--tab:68px;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--tx);font-family:Vazirmatn,system-ui,sans-serif;font-size:15px;line-height:1.7;overscroll-behavior:none}
body{background:radial-gradient(900px 480px at 50% -140px,rgba(110,170,230,.10),transparent 70%),var(--bg)}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.num,.en{font-family:Chakra,Vazirmatn,sans-serif;letter-spacing:.2px;direction:ltr;unicode-bidi:isolate}
#app{min-height:100%;padding:calc(var(--sat) + 14px) 16px calc(var(--tab) + var(--sab) + 22px)}
.view{animation:rise .38s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1,h2,h3{margin:0;font-weight:700}
.sec{display:flex;align-items:center;justify-content:space-between;margin:26px 2px 12px}
.sec h2{font-size:15px;color:var(--tx)}
.sec a,.sec button{font-size:13px;color:var(--ice)}
.muted{color:var(--tx2)} .tiny{font-size:12px;color:var(--tx3)}

/* splash */
#splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:var(--bg);z-index:50;transition:opacity .4s}
#splash img{width:112px;height:112px;border-radius:50%;box-shadow:var(--glow),0 0 0 1px var(--line2);animation:pulse 2.2s ease-in-out infinite}
#splash .bar{width:120px;height:2px;background:var(--line);overflow:hidden;border-radius:2px}
#splash .bar i{display:block;width:40%;height:100%;background:var(--steel);animation:slide 1.1s ease-in-out infinite}
@keyframes slide{from{transform:translateX(-120%)}to{transform:translateX(320%)}}
@keyframes pulse{50%{box-shadow:0 0 44px rgba(120,190,255,.34),0 0 0 1px var(--line2)}}

/* header */
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.top img{width:42px;height:42px;border-radius:50%;box-shadow:0 0 0 1px var(--line2)}
.top .hi{flex:1;min-width:0}
.top .hi b{display:block;font-size:16px}
.top .hi span{font-size:12.5px;color:var(--tx2)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:99px;font-size:12px;background:var(--s2);border:1px solid var(--line)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px currentColor;color:var(--ok)}
.dot.bad{background:var(--bad);color:var(--bad)}.dot.warn{background:var(--warn);color:var(--warn)}

/* cards */
.card{background:linear-gradient(180deg,var(--s2),var(--s1));border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative}
.card.tap{transition:transform .15s,border-color .2s}.card.tap:active{transform:scale(.985);border-color:var(--line2)}
.hero{overflow:hidden;padding:20px;background:linear-gradient(150deg,#1a212b 0%,#0e1319 60%,#141b24 100%);border-color:var(--line2)}
.hero:before{content:"";position:absolute;inset:-40% -20% auto auto;width:260px;height:260px;background:radial-gradient(circle,rgba(130,195,255,.22),transparent 65%);pointer-events:none}
.hero:after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent)}
.hero .lbl{font-size:12.5px;color:var(--tx2)}
.hero .bal{font-size:34px;font-weight:700;margin:2px 0 14px;display:flex;align-items:baseline;gap:8px}
.hero .bal small{font-size:13px;color:var(--tx2);font-weight:400}
.steeltxt{background:var(--steel);-webkit-background-clip:text;background-clip:text;color:transparent}
.row{display:flex;gap:10px}.row>*{flex:1}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border-radius:14px;font-weight:500;background:var(--s2);border:1px solid var(--line2);transition:transform .12s,filter .2s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--steel);color:#0a0d11;border:0;font-weight:700;box-shadow:0 6px 22px rgba(160,200,240,.18)}
.btn.ghost{background:transparent}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:11px}
.btn[disabled]{opacity:.5;pointer-events:none}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.qa{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 4px;font-size:12px;color:var(--tx2)}
.qa i{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;font-style:normal;font-size:21px;background:var(--s2);border:1px solid var(--line2)}
.qa:active i{background:var(--s1)}

/* subs */
.sub{display:flex;gap:14px;align-items:center;margin-bottom:11px}
.ring{--p:0;--c:var(--ice);width:62px;height:62px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(255,255,255,.07) 0);position:relative}
.ring:before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--s1)}
.ring b{position:relative;font-size:12.5px}
.sub .meta{flex:1;min-width:0}
.sub .meta b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub .meta span{font-size:12.5px;color:var(--tx2)}
.tag{font-size:11px;padding:2px 9px;border-radius:99px;border:1px solid var(--line2);color:var(--tx2)}
.tag.ok{color:var(--ok);border-color:rgba(63,220,154,.35)}.tag.warn{color:var(--warn);border-color:rgba(255,184,77,.35)}.tag.bad{color:var(--bad);border-color:rgba(255,107,115,.35)}
.bar{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden}.bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--ice2),var(--ice))}
.empty{text-align:center;padding:38px 18px;color:var(--tx2)}
.empty .big{font-size:42px;margin-bottom:6px;filter:grayscale(.3)}

/* shop */
.seg{display:flex;background:var(--s1);border:1px solid var(--line);border-radius:15px;padding:4px;margin-bottom:6px}
.seg button{flex:1;padding:9px;border-radius:11px;color:var(--tx2);font-weight:500;transition:.2s}
.seg button.on{background:var(--s2);color:var(--tx);box-shadow:0 2px 10px rgba(0,0,0,.4),inset 0 0 0 1px var(--line2)}
.panelhd{display:flex;align-items:center;justify-content:space-between;margin:22px 2px 10px}
.panelhd b{font-size:15px}
.plan{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.plan .gb{width:58px;text-align:center;line-height:1.1}
.plan .gb b{display:block;font-size:24px;font-weight:700}.plan .gb span{font-size:11px;color:var(--tx3)}
.plan .info{flex:1}.plan .info b{display:block;font-size:14px}.plan .info span{font-size:12px;color:var(--tx2)}
.plan .price{text-align:left;direction:ltr}.plan .price b{display:block;font-size:16px}.plan .price span{font-size:11px;color:var(--tx3)}
.best{position:absolute;top:-9px;inset-inline-start:14px;background:var(--steel);color:#0a0d11;font-size:10.5px;font-weight:700;padding:1px 10px;border-radius:99px}

/* list rows */
.li{display:flex;align-items:center;gap:12px;padding:13px 2px;border-bottom:1px solid var(--line)}
.li:last-child{border:0}.li .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--s2);border:1px solid var(--line);flex:none}
.li .t{flex:1;min-width:0}.li .t b{display:block;font-weight:500;font-size:14px}.li .t span{font-size:12px;color:var(--tx2)}
.li .amt{font-weight:600;direction:ltr}
.pos{color:var(--ok)}.neg{color:var(--bad)}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--line)}.kv:last-child{border:0}.kv span{color:var(--tx2)}
.code{direction:ltr;text-align:left;font-family:Chakra,monospace;font-size:12px;color:var(--tx2);background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:10px 12px;word-break:break-all;margin:8px 0}
.stat{display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat .card{padding:14px}.stat b{display:block;font-size:22px;font-weight:700}.stat span{font-size:12px;color:var(--tx2)}
.spark{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:12px}.spark i{flex:1;border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,var(--ice),var(--ice2));min-height:3px;opacity:.85}

/* tab bar */
.tabs{position:fixed;inset-inline:0;bottom:0;height:calc(var(--tab) + var(--sab));padding-bottom:var(--sab);display:flex;background:rgba(9,12,16,.82);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);z-index:20}
.tabs button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--tx3);font-size:11px;position:relative;transition:color .2s}
.tabs button svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabs button.on{color:var(--tx)}
.tabs button.on:before{content:"";position:absolute;top:0;width:28px;height:2px;border-radius:2px;background:var(--steel);box-shadow:0 0 12px var(--ice)}
.tabs button.on svg{filter:drop-shadow(0 0 6px rgba(140,200,255,.5))}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:.25s;z-index:30}
.scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;inset-inline:0;bottom:0;max-height:88%;overflow:auto;background:linear-gradient(180deg,#171e28,#0e1319);border-top:1px solid var(--line2);border-radius:26px 26px 0 0;padding:10px 18px calc(var(--sab) + 22px);transform:translateY(105%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:31}
.sheet.on{transform:none}
.sheet .grab{width:42px;height:4px;border-radius:4px;background:var(--line2);margin:0 auto 14px}
.sheet h3{font-size:17px;margin-bottom:4px}
.qr{display:block;margin:12px auto;width:200px;height:200px;border-radius:16px;background:#fff;padding:8px}
.toast{position:fixed;inset-inline:16px;bottom:calc(var(--tab) + var(--sab) + 14px);z-index:60;background:var(--s2);border:1px solid var(--line2);border-radius:14px;padding:12px 16px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.6);transform:translateY(20px);opacity:0;transition:.28s;pointer-events:none}
.toast.on{transform:none;opacity:1}
.sk{background:linear-gradient(90deg,var(--s1),var(--s2),var(--s1));background-size:200% 100%;animation:sh 1.3s infinite;border-radius:var(--r);height:84px;margin-bottom:11px}
@keyframes sh{to{background-position:-200% 0}}
@media (min-width:560px){#app{max-width:520px;margin:0 auto}.tabs{max-width:520px;margin:0 auto}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}