/* ===== Tokens: "dawn" (light) & "night" (dark) — both soft, low-glare ===== */
:root{
  --bg:#eef2f9; --bg-top:#e3eafa; --surface:#ffffff; --surface-2:#f3f6fc; --line:#E6EDF5; --prem:#8E63F5; --prem-soft:#F1ECFF;
  --ink:#1b2340; --muted:#6a7593;
  --accent:#2563eb; --on-accent:#ffffff; --accent-soft:rgba(37,99,235,.10); --btn-glow:rgba(37,99,235,.5); --wbtn-bg:#2563eb; --wbtn-fg:#ffffff;
  --sky:#3b7de8; --sky-soft:rgba(59,125,232,.1);
  --ok:#16924a; --bad:#dc3f45;
  --card-bg:linear-gradient(140deg,#e7eeff 0%,#d7e2ff 55%,#e4dcff 100%); --card-ink:#1b2340;
  --shadow:0 1px 2px rgba(27,35,64,.04),0 12px 32px rgba(27,35,64,.06);
  --glass:rgba(255,255,255,.95); --stars-o:0;--aur1:rgba(150,190,255,.6);--aur2:rgba(140,165,255,.5);
  --note-bg:linear-gradient(279deg,#fffaf0 13.8%,#fffdf8 84.33%); --note-line:#f0ddb8; --note-fg:#96650a;
  --k-stars-bg:#fff1cc; --k-stars:#b57600; --k-premium-bg:#F1ECFF; --k-premium:#8E63F5; --k-gift-bg:#fde6f2; --k-gift:#bd2f88; --k-sell-bg:#dcf4e5; --k-sell:#15864a; --k-silver-bg:#eaedf3; --k-silver:#5b6472; --k-gram-bg:#dcf0fc; --k-gram:#0f7fb8;
  --inv-bg:linear-gradient(120deg,#eef4fe 0%,#eaf1fd 55%,#f2f6fe 100%); --inv-border:rgba(150,170,215,.16); --inv-title:#1b1fb0; --inv-sub:#4a5fb0; --inv-chev:#aab4d6;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1020; --bg-top:#16204a; --surface:#131a2f; --surface-2:#1a2340; --line:rgba(255,255,255,.07); --prem:#8E63F5; --prem-soft:rgba(142,99,245,.2);
    --ink:#e8ecf8; --muted:#8a95b6; --accent:#2f6bf0; --on-accent:#ffffff; --accent-soft:rgba(90,140,255,.16); --btn-glow:rgba(47,107,240,.55); --wbtn-bg:#ffffff; --wbtn-fg:#1b2340;
    --sky:#7db4ff; --sky-soft:rgba(125,180,255,.12); --ok:#4cd08a; --bad:#ff7075;
    --card-bg:linear-gradient(140deg,#243066 0%,#2b2f72 55%,#3a2c66 100%); --card-ink:#eef1ff;
    --shadow:0 0 0 1px rgba(255,255,255,.04),0 14px 36px rgba(0,0,0,.3);
    --glass:rgba(19,26,47,.95); --stars-o:.55;--aur1:rgba(90,140,255,.32);--aur2:rgba(110,130,255,.4);
    --note-bg:linear-gradient(279deg,#fffaf0 13.8%,#fffdf8 84.33%); --note-line:#f0ddb8; --note-fg:#96650a;
    --k-stars-bg:rgba(255,194,71,.14); --k-stars:#ffc247; --k-premium-bg:rgba(142,99,245,.2); --k-premium:#b08cff; --k-gift-bg:rgba(255,120,190,.14); --k-gift:#ff90cc; --k-sell-bg:rgba(76,208,138,.14); --k-sell:#5cd894; --k-silver-bg:rgba(174,184,201,.14); --k-silver:#aeb8c9; --k-gram-bg:rgba(41,164,224,.16); --k-gram:#5cc2f5;
    --inv-bg:linear-gradient(120deg,#1c2650 0%,#202a58 55%,#241f52 100%); --inv-border:rgba(255,255,255,.08); --inv-title:#9db4ff; --inv-sub:#8b98cf; --inv-chev:#5c6690;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1020; --bg-top:#16204a; --surface:#131a2f; --surface-2:#1a2340; --line:rgba(255,255,255,.07); --prem:#8E63F5; --prem-soft:rgba(142,99,245,.2);
  --ink:#e8ecf8; --muted:#8a95b6; --accent:#2f6bf0; --on-accent:#ffffff; --accent-soft:rgba(90,140,255,.16); --btn-glow:rgba(47,107,240,.55); --wbtn-bg:#ffffff; --wbtn-fg:#1b2340;
  --sky:#7db4ff; --sky-soft:rgba(125,180,255,.12); --ok:#4cd08a; --bad:#ff7075;
  --card-bg:linear-gradient(140deg,#243066 0%,#2b2f72 55%,#3a2c66 100%); --card-ink:#eef1ff;
  --shadow:0 0 0 1px rgba(255,255,255,.04),0 14px 36px rgba(0,0,0,.3);
  --glass:rgba(19,26,47,.95); --stars-o:.55;--aur1:rgba(90,140,255,.32);--aur2:rgba(110,130,255,.4);
  --note-bg:linear-gradient(279deg,#fffaf0 13.8%,#fffdf8 84.33%); --note-line:#f0ddb8; --note-fg:#96650a;
  --k-stars-bg:rgba(255,194,71,.14); --k-stars:#ffc247; --k-premium-bg:rgba(142,99,245,.2); --k-premium:#b08cff; --k-gift-bg:rgba(255,120,190,.14); --k-gift:#ff90cc; --k-sell-bg:rgba(76,208,138,.14); --k-sell:#5cd894; --k-silver-bg:rgba(174,184,201,.14); --k-silver:#aeb8c9; --k-gram-bg:rgba(41,164,224,.16); --k-gram:#5cc2f5;
  --inv-bg:linear-gradient(120deg,#1c2650 0%,#202a58 55%,#241f52 100%); --inv-border:rgba(255,255,255,.08); --inv-title:#9db4ff; --inv-sub:#8b98cf; --inv-chev:#5c6690;
  color-scheme:dark;
}
.page-red{--accent:#F65555;--on-accent:#ffffff;--accent-soft:rgba(246,85,85,.10);--btn-glow:rgba(246,85,85,.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .page-red{--accent:#ff8080;--accent-soft:rgba(255,128,128,.16);--btn-glow:rgba(255,128,128,.45)}}
:root[data-theme="dark"] .page-red{--accent:#ff8080;--accent-soft:rgba(255,128,128,.16);--btn-glow:rgba(255,128,128,.45)}
.page-ton{--accent:#0098ea;--on-accent:#ffffff;--accent-soft:rgba(0,152,234,.10);--btn-glow:rgba(0,152,234,.4)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .page-ton{--accent:#3db8f5;--accent-soft:rgba(61,184,245,.16);--btn-glow:rgba(61,184,245,.45)}}
:root[data-theme="dark"] .page-ton{--accent:#3db8f5;--accent-soft:rgba(61,184,245,.16);--btn-glow:rgba(61,184,245,.45)}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{height:100%;overflow-x:clip;overflow-y:scroll;scrollbar-gutter:stable;scroll-padding-top:env(safe-area-inset-top,0px)}
body{overflow-x:clip;min-height:100%;background:radial-gradient(900px 420px at 50% -120px,var(--bg-top),transparent 70%),var(--bg);background-repeat:no-repeat;color:var(--ink);font-family:"Vazirmatn",Tahoma,"Segoe UI",sans-serif;font-size:15px;line-height:1.7;font-variant-numeric:tabular-nums;padding-top:env(safe-area-inset-top,0px);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--stars-o);
  background-image:
   radial-gradient(1.3px 1.3px at 34px 46px,#fff 55%,transparent 60%),
   radial-gradient(1px 1px at 210px 22px,#fff 55%,transparent 60%),
   radial-gradient(1.6px 1.6px at 128px 130px,#ffe7a3 55%,transparent 60%),
   radial-gradient(1px 1px at 290px 170px,#fff 55%,transparent 60%),
   radial-gradient(1.2px 1.2px at 70px 240px,#fff 55%,transparent 60%),
   radial-gradient(1px 1px at 250px 300px,#ffe7a3 55%,transparent 60%);
  background-size:340px 340px}
/* twinkle حذف شد: کی‌فریم‌هایش opacity را با calc(var(--stars-o)) می‌ساختند و
   انیمیشنِ opacity با مقدارِ وابسته به custom property قابل composite نیست،
   یعنی این لایه‌ی fixed تمام‌صفحه هر فریم روی main thread دوباره پِینت می‌شد. */
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
a{color:inherit;text-decoration:none;touch-action:manipulation}
input{font:inherit;color:var(--ink)}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:6px}
input:focus-visible{outline:none}
svg{display:block}
.i{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.muted{color:var(--muted)}

/* ===== shell (sidebar floats on the RIGHT) ===== */
.app{position:relative;z-index:1;display:flex;gap:18px;padding:16px;min-height:100vh;min-height:100dvh;max-width:1280px;margin:0 auto}
.side{width:236px;flex:none;background:var(--surface);border-radius:26px;box-shadow:var(--shadow);padding:14px 14px 10px;display:flex;flex-direction:column;position:sticky;top:16px;height:calc(100vh - 32px);height:calc(100dvh - 32px);overflow-y:auto}
.brand{display:flex;align-items:center;gap:6px;padding:2px 10px 12px;font-weight:800;font-size:18px;direction:ltr;justify-content:flex-start}
.brand-exit{margin-inline-start:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:10px;color:var(--muted);flex:none}
.brand-exit svg{width:17px;height:17px}
.brand-exit:hover{background:var(--surface-2);color:var(--bad)}
/* «>» عمدی است: svg داخل .brand-exit (آیکن خروج) نباید جابه‌جا شود */
.brand>svg{width:25px;height:25px;margin-top:-3px;filter:drop-shadow(0 2px 8px rgba(61,123,245,.4))}
.wordmark .b-stars{color:var(--ink)}
.wordmark .b-byte{color:#3d7bf5}
.prof{display:flex;align-items:center;gap:10px;padding:4px 10px 12px;margin-bottom:6px;border-bottom:1px solid var(--line)}
.prof-av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--prem))}
.prof-t{flex:1;min-width:0}
.prof-t b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-t small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-t small a{color:var(--sky);font-weight:600}
.prof-t small .vb{color:var(--ok);font-weight:800;margin-inline-end:2px}
.lvlt{display:inline-flex;align-items:center;gap:5px;font-weight:700}
.lvlt .lvl-dot{width:7px;height:7px;border-radius:50%;flex:none}
.lvlt.lvl-1{color:var(--sky)}
.lvlt.lvl-1 .lvl-dot{background:var(--sky)}
.lvlt.lvl-2{color:var(--ok)}
.lvlt.lvl-2 .lvl-dot{background:var(--ok)}
.lvlt.lv-bronze{color:var(--muted)}
.lvlt.lv-bronze .lvl-dot{background:var(--muted)}
.lvlt.lv-silver{color:var(--k-silver)}
.lvlt.lv-silver .lvl-dot{background:var(--k-silver)}
.lvlt.lv-gold{color:var(--k-stars)}
.lvlt.lv-gold .lvl-dot{background:var(--k-stars)}
.lvlt.lv-diamond{color:var(--accent)}
.lvlt.lv-diamond .lvl-dot{background:var(--accent)}
.nav{display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;color:var(--muted);font-weight:500;font-size:14px}
.nav a .i{width:18px;height:18px}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a.on:hover{background:var(--accent-soft)}
.nav a.on{color:var(--ink);font-weight:700;background:var(--accent-soft)}
.nav a.on .i{color:var(--accent)}
.nav hr{border:0;border-top:1px solid var(--line);margin:6px 12px}
.nav-kyc{margin-inline-start:auto;font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;background:rgba(220,63,69,.12);color:var(--bad)}
.nav-kyc.lvl-1{background:var(--sky-soft);color:var(--sky)}
.nav-kyc.lvl-2{background:rgba(22,146,74,.14);color:var(--ok)}
.grow{flex:1;min-height:8px}
.me{background:var(--surface-2);border-radius:18px;padding:10px 12px}
.me small{color:var(--muted);font-size:12px}
.me b{display:block;font-size:18px;font-weight:800;line-height:1.4}
.me .row2{display:flex;align-items:center;justify-content:space-between;margin-top:6px}
.me a{color:var(--sky);font-size:13px;font-weight:600}
.round{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--surface-2);color:var(--muted);transition:color .15s,transform .15s}
.round:hover{color:var(--ink)}
.round:active{transform:scale(.92)}
.me .round{background:var(--surface);width:34px;height:34px}
.main{flex:1;min-width:0}
.top{display:none}
.dtop{display:flex;justify-content:flex-end;padding:16px 20px 0}
.dtop-r{display:flex;align-items:center;gap:10px}
.dtop-btn{display:flex;align-items:center;gap:6px;height:38px;padding:0 14px;border-radius:6px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink);font-weight:600;font-size:12.5px;position:relative;transition:transform .12s}
.dtop-btn:active{transform:scale(.95)}
.dtop-btn.ic{width:38px;padding:0;justify-content:center}
.dtop-btn .i{width:18px;height:18px;color:var(--muted)}
.dtop-btn .dot{position:absolute;top:6px;inset-inline-end:7px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface);display:none}
.dtop-btn .dot.on{display:block}
.round{position:relative}
.round .dot{position:absolute;top:4px;inset-inline-end:5px;width:8px;height:8px;border-radius:50%;background:var(--bad);border:2px solid var(--surface);display:none}
.round .dot.on{display:block}
.page{max-width:640px;margin:0 auto;padding:30px 8px 80px}
.page.anim>*{animation:rise .35s cubic-bezier(.2,.7,.2,1) both}
.page.anim>*:nth-child(2){animation-delay:.04s}.page.anim>*:nth-child(3){animation-delay:.08s}.page.anim>*:nth-child(4){animation-delay:.12s}.page.anim>*:nth-child(5){animation-delay:.16s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1.pt{font-size:26px;font-weight:800;letter-spacing:-.3px;line-height:1.4}
.sub{color:var(--muted);margin-top:2px}
.head{margin-bottom:24px}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--accent);color:var(--on-accent);font-weight:800;padding:0 22px;height:48px;border-radius:6px;transition:transform .12s,filter .15s,box-shadow .15s;white-space:nowrap;box-shadow:0 6px 16px -6px var(--btn-glow)}
.btn:hover{filter:brightness(1.04)}
.btn:active{transform:scale(.97)}
.btn.ghost{background:var(--surface-2);color:var(--ink);box-shadow:none;font-weight:700}
.btn.ghost:hover{filter:none;background:var(--line)}
.btn.soft{background:var(--sky-soft);color:var(--sky);box-shadow:none;font-weight:700}
.btn.sm{height:40px;padding:0 15px;font-size:13.5px;border-radius:6px}
.btn.block{width:100%}
.link{color:var(--sky);font-weight:600}
.link.bad{color:var(--bad)}
.bank-badge{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:14px;flex:none}

/* ===== dashboard ===== */
.hi{color:var(--muted);font-size:14px}
.invbanner{background:var(--inv-bg);border:1px solid var(--inv-border);box-shadow:0 1px 2px rgba(70,90,150,.05);border-radius:6px;padding:12px 14px;display:flex;align-items:center;gap:10px;margin:14px 0 10px}
.invbanner .ib-gift{flex:none;width:30px;height:30px}
.invbanner .ib-texts{flex:1;min-width:0}
.invbanner .ib-title{font-size:13px;font-weight:800;color:var(--inv-title);margin:0 0 4px}
.invbanner .ib-sub{font-size:11px;font-weight:600;color:var(--inv-sub);margin:0}
.invrow{display:flex;gap:10px;margin:0 0 18px}
.invrow .invbanner{flex:1;min-width:0;flex-direction:column;text-align:center;gap:8px;padding:14px 10px;margin:0}
.invrow .invbanner.flavor-tg .ib-title{color:#1c8ad9}
.invrow .invbanner.flavor-ig .ib-title{color:#c1348a}
.invrow .invbanner .ib-gift{width:28px;height:28px}
.invrow .invbanner .ib-texts{flex:none;width:100%}
.invrow .invbanner .ib-title{font-size:12px;margin:0 0 3px}
.invrow .invbanner .ib-sub{font-size:10px}
.kycbanner{display:flex;align-items:center;gap:12px;background:var(--k-stars-bg);border-radius:6px;padding:12px 14px;margin-bottom:18px}
.kycbanner .ic{width:36px;height:36px;border-radius:8px;background:var(--surface);color:var(--k-stars);display:grid;place-items:center;flex:none;box-shadow:var(--shadow)}
.kycbanner .ic .i{width:18px;height:18px}
.kycbanner .tx{flex:1;min-width:0}
.kycbanner .tx b{display:block;font-size:13px;font-weight:700;margin-bottom:2px}
.kycbanner .tx small{display:block;font-size:12px;color:var(--muted);line-height:1.5}
.kycbanner .btn{flex:none;background:var(--surface);color:color-mix(in srgb,var(--ink) 78%,transparent);border:1.5px solid var(--line);border-radius:6px;box-shadow:none;height:36px;padding:0 14px;font-size:12px;font-weight:700;transition:background .15s}
.kycbanner .btn:hover{background:var(--line)}
@media (max-width:420px){.kycbanner{flex-wrap:wrap}.kycbanner .btn{flex:1 1 100%}}
.wallet{position:relative;overflow:hidden;background:var(--card-bg);color:var(--card-ink);border-radius:6px;padding:24px 24px 22px;box-shadow:var(--shadow)}
.wallet .wl{opacity:.75;font-size:13.5px}
.wallet .wn{font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.25;margin:2px 0 16px;position:relative}
.wallet .wn small{font-size:14px;font-weight:500;opacity:.7;letter-spacing:0;margin-inline-start:8px}
.wallet .wa{display:flex;gap:8px;position:relative;flex-wrap:wrap}
.wallet .wtier{margin-top:12px;position:relative}
.wallet .wtier .lvlt{font-size:12px;color:var(--card-ink);opacity:.8}
.wallet .wtier .lvlt .lvl-dot{background:var(--card-ink)}
.wallet .wtier .lvlt.lv-silver{color:var(--k-silver);opacity:1}
.wallet .wtier .lvlt.lv-silver .lvl-dot{background:var(--k-silver)}
.wallet .wtier .lvlt.lv-gold{color:var(--k-stars);opacity:1}
.wallet .wtier .lvlt.lv-gold .lvl-dot{background:var(--k-stars)}
.wallet .wtier .lvlt.lv-diamond{color:var(--accent);opacity:1}
.wallet .wtier .lvlt.lv-diamond .lvl-dot{background:var(--accent)}
.wallet .btn:not(.ghost){background:var(--wbtn-bg);color:var(--wbtn-fg)}
.wallet .btn.ghost{background:rgba(255,255,255,.55);color:#1b2340}
:root[data-theme="dark"] .wallet .btn.ghost{background:rgba(255,255,255,.12);color:#eef1ff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wallet .btn.ghost{background:rgba(255,255,255,.12);color:#eef1ff}}
.orb{position:absolute;inset-inline-end:-6px;top:-8px;width:150px;opacity:.9;pointer-events:none}
.orb .a{animation:bob 6s ease-in-out infinite}
.orb .b{animation:bob 7s ease-in-out -2s infinite}
.orb .c{animation:bob 5s ease-in-out -1s infinite}
@keyframes bob{50%{transform:translateY(-7px) rotate(6deg)}}
.orb g{transform-box:fill-box;transform-origin:center}
.k-stars{background:var(--k-stars-bg);color:var(--k-stars)}
.k-premium{background:var(--k-premium-bg);color:var(--k-premium)}
.k-gift{background:var(--k-gift-bg);color:var(--k-gift)}
.k-sell{background:var(--k-sell-bg);color:var(--k-sell)}
.k-gram{background:var(--k-gram-bg);color:var(--k-gram)}
.sec{margin-top:30px}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.sec-h h2{font-size:15px;font-weight:700}
.sec-h a,.sec-h button{font-size:13px;color:var(--sky);font-weight:600}
.list{background:var(--surface);border-radius:6px;padding:2px 16px;box-shadow:var(--shadow)}
.list>*{position:relative;display:flex;align-items:center;gap:14px;padding:13px 0;width:100%;text-align:right;border-bottom:1px solid var(--line)}
.list>*:last-child{border-bottom:0}
.tasklist{display:flex;flex-direction:column;gap:10px}
.tasklist .row{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:14px 16px;width:100%;text-align:right}
.list .row.unread::before{content:"";position:absolute;inset:0 -16px;background:var(--sky-soft);border-radius:6px;z-index:-1;pointer-events:none}
.oi{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;flex:none}
.oi .i{width:20px;height:20px}
.oi.k-stars .i{fill:currentColor}
.list .tx{flex:1;min-width:0}
.list .tx b{display:block;font-weight:600;line-height:1.5}
.list .tx small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.tasklist .tx{flex:1;min-width:0}
.tasklist .tx b{display:block;font-weight:600;line-height:1.5}
.tasklist .tx small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5}
.list .tx small.ref{font-size:11px;font-family:ui-monospace,Menlo,Consolas,monospace;opacity:.8}
.txrow{gap:11px;transition:background .15s,box-shadow .15s}
.txrow .tx b{font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txrow .tx small{font-size:11.5px;white-space:nowrap}
.txrow .end b{font-size:14px}
.txrow:hover{background:var(--surface-2);box-shadow:16px 0 0 var(--surface-2),-16px 0 0 var(--surface-2)}
.txrow .chev{color:var(--muted);flex:none}
.txrow .end{margin-inline-start:auto}
.list .end small.ref{display:block;font-size:10.5px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--muted);letter-spacing:.2px;margin-top:2px}
.modal .kvlist .kv .v{font-size:13px;word-break:break-word;text-align:end;max-width:62%}
.list .end{color:var(--muted);font-size:12.5px;white-space:nowrap;text-align:left}
.list .end b{color:var(--ink);font-weight:700;display:block;font-size:14.5px}
.list .end del{color:var(--muted);font-size:11px;font-weight:500}
.list .end b.dis{color:var(--ok)}
.chev{color:var(--muted);opacity:.6;width:18px;height:18px}
button.row,a.row{transition:opacity .12s}
button.row:active,a.row:active{opacity:.6}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-inline-end:6px;background:var(--ok)}
.dot.wait{background:var(--accent);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.3}}
.row.live::after{content:"";position:absolute;inset-inline:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,var(--accent),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:slide 1.6s linear infinite}
@keyframes slide{from{background-position:130% 0}to{background-position:-30% 0}}
.empty{padding:34px 0;text-align:center;color:var(--muted)}
.plus{color:var(--ok)!important}
.sellc{color:#F65555!important}

/* ===== forms ===== */
.f{margin-bottom:26px}
.f>label,.f>.lb{display:flex;align-items:baseline;justify-content:space-between;font-size:13.5px;font-weight:700;margin:0 4px 10px}
.f>.lb small{font-weight:400;color:var(--muted);font-size:12.5px}
.inp{width:100%;font-size:16px;height:50px;background:var(--surface-2);border:1.5px solid var(--line);border-radius:6px;padding:0 16px;outline:0;box-shadow:var(--shadow);transition:border-color .15s,background .15s}
.inp.txa{height:auto;min-height:92px;padding:12px 16px;line-height:1.7;resize:vertical;font-family:inherit}
.gqty{display:flex;align-items:center;justify-content:center;gap:20px}
.gqty b{font-size:26px;font-weight:800;min-width:46px;text-align:center}
.inp:focus{background:var(--surface);border-color:var(--accent);box-shadow:0 10px 30px rgba(27,35,64,.16)}
.inp.err{background:rgba(229,72,77,.09);animation:shakeX .45s}
.inp.ok{border-color:var(--ok);background:rgba(22,146,74,.07)}
.inp.ltr{direction:ltr;text-align:left}
.inp::placeholder{color:var(--muted);opacity:.7}
.inline{display:flex;gap:8px}
.inline .inp{flex:1;min-width:0}
.inline .btn{flex:none;height:50px}
.hint{font-size:12.5px;color:var(--muted);margin:6px 4px 0}
.hint.bad{color:var(--bad)}
.hint.ok{color:var(--ok)}
.note{background:var(--sky-soft);color:var(--sky);border-radius:6px;padding:12px 16px;font-size:13.5px;font-weight:500;margin-bottom:22px}
.warn{background:rgba(220,63,69,.1);color:var(--bad);border-radius:6px;padding:12px 14px;font-size:12.5px;font-weight:600;line-height:1.6;margin-bottom:14px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:66px;padding:8px 4px;border:2px solid transparent;border-radius:6px;background:var(--surface);box-shadow:var(--shadow);transition:transform .12s,border-color .15s,background .15s}
.tile:hover{border-color:var(--line)}
.tile:active{transform:scale(.95)}
.tile.sel{border-color:var(--accent);background:var(--accent-soft);animation:pop .28s cubic-bezier(.3,1.5,.5,1)}
@keyframes pop{0%{transform:scale(.94)}100%{transform:scale(1)}}
.tile .n{display:flex;align-items:center;gap:5px;font-weight:800;font-size:16.5px;line-height:1.4}
.tile .n svg{width:15px;height:15px}
.tile .n .e{font-size:20px;line-height:1}
.tile .p{color:var(--muted);font-size:12px;line-height:1.4}
.gtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.gtile{min-height:auto;padding:10px 4px;gap:4px}
.gtile .ge{font-size:23px;line-height:1}
.gtile .gn{font-size:11.5px;font-weight:700;color:var(--ink);line-height:1.3}
.gtile .gs{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:800;color:var(--k-stars);background:var(--k-stars-bg);padding:1px 7px;border-radius:20px}
.gtile .gs svg{width:11px;height:11px}
.tile em{position:absolute;top:-9px;inset-inline-end:10px;background:var(--accent);color:var(--on-accent);font-style:normal;font-size:10.5px;font-weight:800;padding:0 8px;border-radius:6px;line-height:1.7}
.opts{display:flex;flex-direction:column;gap:9px}
.opt{display:flex;align-items:center;gap:13px;padding:0 16px;min-height:62px;border:2px solid transparent;border-radius:6px;background:var(--surface);box-shadow:var(--shadow);text-align:right;width:100%;transition:transform .12s,border-color .15s,background .15s}
.opt:active{transform:scale(.985)}
.opt.sel{border-color:var(--accent);background:var(--accent-soft)}
.opt .rd{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;display:grid;place-items:center;transition:all .15s}
.opt.sel .rd{border-color:var(--accent);background:var(--accent)}
.opt.sel .rd::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--on-accent)}
.opt .t{flex:1}
.opt .t b{font-weight:800}
.opt .t small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4}
.opt .tag{font-size:11px;font-weight:800;color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent);padding:2px 8px;border-radius:6px;margin-inline-start:8px;white-space:nowrap;display:inline-block}
.opt .tag.dis{color:var(--ok);background:rgba(22,146,74,.14)}
.opt .pr{font-weight:800}
.seg{display:flex;background:var(--surface-2);border-radius:6px;padding:4px}
.seg button{flex:1;height:42px;border-radius:6px;font-weight:500;color:var(--muted);transition:all .15s}
.seg button.sel{background:var(--surface);color:var(--ink);font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.perks{list-style:none;display:grid;gap:8px;color:var(--muted);font-size:13.5px;margin:0 4px 26px}
.perks li{display:flex;gap:9px;align-items:center}
.perks .i{width:17px;height:17px;color:var(--ok);stroke-width:2.3}

/* pay bar */
.paybar{position:sticky;bottom:16px;display:flex;align-items:center;gap:14px;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-radius:6px;padding:12px 12px 12px 14px;box-shadow:0 10px 40px rgba(20,30,70,.16),0 0 0 1px var(--line);margin-top:10px;z-index:5}
.paybar .t{flex:1;min-width:0;padding-inline-start:6px}
.paybar small{display:block;color:var(--muted);font-size:12px;line-height:1.4}
.paybar b{font-size:20px;font-weight:800;line-height:1.3;display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 6px}
.paybar b span{font-size:12.5px;font-weight:500;color:var(--muted);margin-inline-start:4px}
.paybar s{text-decoration:none;color:var(--ok);font-size:12px;font-weight:700;margin-inline-start:8px}
.paybar .btn{min-width:140px;height:52px;font-size:15px}

/* ===== misc ===== */
.srch{position:relative;display:flex;align-items:center;margin:0 0 10px}
.srch .i{position:absolute;inset-inline-start:13px;width:16px;height:16px;color:var(--muted);pointer-events:none}
.srch input{width:100%;height:44px;background:var(--surface);border:1.5px solid var(--line);border-radius:6px;padding:0 38px;outline:0;font-size:14px;font-family:inherit;color:var(--ink);box-shadow:var(--shadow);transition:border-color .15s}
.srch input:focus{border-color:var(--accent)}
.srch input::placeholder{color:var(--muted);opacity:.75}
.srch .clr{position:absolute;inset-inline-end:8px;width:26px;height:26px;border-radius:6px;display:grid;place-items:center;color:var(--muted);font-size:17px;line-height:1;transition:background .15s,color .15s}
.srch .clr:hover{background:var(--surface-2);color:var(--ink)}
/* display:grid روی کلاس، [hidden] مرورگر را می‌پوشاند */
.srch .clr[hidden]{display:none}
.lcount{font-size:12px;color:var(--muted);margin:0 4px 8px}
.lcount b{color:var(--ink);font-weight:700}
.tabs{display:flex;gap:8px;margin-bottom:14px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{padding:0 18px;height:40px;border-radius:6px;background:var(--surface);color:var(--muted);font-weight:500;white-space:nowrap;box-shadow:var(--shadow)}
.tabs button.sel{background:var(--accent);color:#fff;font-weight:700}
.code{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700;font-size:13px;direction:ltr;background:var(--sky-soft);color:var(--sky);padding:3px 11px;border-radius:6px}
.cpn2{display:flex;align-items:stretch;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px;transition:opacity .15s}
.cpn2.off{opacity:.5}
.cpn2-pct{flex:none;width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--accent);background:var(--accent-soft);border-inline-end:2px dashed var(--surface-2)}
.cpn2-pct b{font-size:21px;line-height:1;font-weight:800}
.cpn2-pct.t-y{color:var(--k-stars);background:var(--k-stars-bg)}
.cpn2-pct.t-b{color:var(--accent);background:var(--accent-soft)}
.cpn2-pct.t-g{color:var(--ok);background:rgba(22,146,74,.1)}
.cpn2-pct.t-r{color:#F65555;background:rgba(246,85,85,.1)}
.cpn2-pct small{font-size:10px;opacity:.85}
.cpn2-mid{flex:1;min-width:0;padding:13px 14px}
.cpn2-mid .top{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.cpn2-mid .dsc{font-weight:700;font-size:13px;display:block;margin-bottom:5px}
.cpn2-mid .meta{color:var(--muted);font-size:11px}
.cpn2-act{flex:none;display:flex;align-items:center;padding-inline-end:12px}
.cpn2-act .btn[disabled]{opacity:.4}
.linkbox{display:flex;align-items:center;gap:8px;background:var(--surface);box-shadow:var(--shadow);border-radius:6px;padding:7px 7px 7px 16px}
.linkbox code{flex:1;direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lockbox{text-align:center;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:34px 20px;margin:18px 0}
.lockbox .i{width:38px;height:38px;color:var(--muted);margin-bottom:10px}
.lockbox b{display:block;font-size:16px;margin-bottom:6px}
.lockbox p{margin-bottom:16px}
.auth-wrap{display:flex;justify-content:center;padding:26px 0 40px}
body[data-pg="login"] .side,
body[data-pg="login"] .top,
body[data-pg="login"] .dtop,
body[data-pg="login"] #tabbar{display:none!important}
body[data-pg="login"] .app{padding:0;gap:0}
body[data-pg="login"] .main{width:100%}
body[data-pg="login"] .page{max-width:none;margin:0;padding:16px;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:center}
body[data-pg="login"] .foot{margin-top:22px;text-align:center}

/* ===== landing (pre-login) ===== */
body[data-pg="landing"] .side,
body[data-pg="landing"] .top,
body[data-pg="landing"] .dtop,
body[data-pg="landing"] #tabbar{display:none!important}
body[data-pg="landing"] .app{padding:0;gap:0;max-width:none;min-height:0}
body[data-pg="landing"] .main{width:100%}
body[data-pg="landing"] .page{max-width:none;margin:0;padding:0}
body[data-pg="landing"] .foot{display:none}
/* لایه‌های تزئینی سراسریِ اپ روی لندینگ/لاگین اضافه‌اند (لندینگ .lp-stars خودش را دارد)
   و هر کدام یک لایه‌ی fixed تمام‌صفحه‌ی متحرک‌اند. */
body[data-pg="landing"]::before,body[data-pg="landing"] .shoot,
body[data-pg="login"]::before,body[data-pg="login"] .shoot{display:none!important}
body[data-pg="landing"]{
  --lp-bg:#08080f; --lp-bg2:#0c0c16; --lp-surface:#121220; --lp-line:rgba(255,255,255,.09);
  --lp-acc:#4d8bf5; --lp-acc2:#8ab6ff; --lp-acc-rgb:77,139,245; --lp-violet:#8b7cf6;
  --lp-ink:#f4f2ea; --lp-soft:#9693a6; --lp-dim:#68657a;
  --lp-star:255,255,255; --lp-star-o:.55; --lp-shadow:rgba(0,0,0,.4);
  --lp-cta-ink:#fff; --lp-cta-sh:rgba(var(--lp-acc-rgb),.30); --lp-cta-sh2:rgba(var(--lp-acc-rgb),.44);
  --lp-navbg:rgba(8,8,15,.82);
  background:var(--lp-bg);color:var(--lp-ink)
}
:root[data-theme="light"] body[data-pg="landing"]{
  --lp-bg:#f5f7fc; --lp-bg2:#eef1fa; --lp-surface:#fff; --lp-line:rgba(20,30,70,.09);
  --lp-acc:#2563eb; --lp-acc2:#1d4ed8; --lp-acc-rgb:37,99,235; --lp-violet:#6d5cf6;
  --lp-ink:#12172e; --lp-soft:#5b6478; --lp-dim:#8a8fa8;
  --lp-star:40,60,140; --lp-star-o:.16; --lp-shadow:rgba(40,60,140,.16);
  --lp-cta-ink:#fff; --lp-cta-sh:rgba(var(--lp-acc-rgb),.30); --lp-cta-sh2:rgba(var(--lp-acc-rgb),.44);
  --lp-navbg:rgba(245,247,252,.85)
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) body[data-pg="landing"]{
    --lp-bg:#f5f7fc; --lp-bg2:#eef1fa; --lp-surface:#fff; --lp-line:rgba(20,30,70,.09);
    --lp-acc:#2563eb; --lp-acc2:#1d4ed8; --lp-acc-rgb:37,99,235; --lp-violet:#6d5cf6;
    --lp-ink:#12172e; --lp-soft:#5b6478; --lp-dim:#8a8fa8;
    --lp-star:40,60,140; --lp-star-o:.16; --lp-shadow:rgba(40,60,140,.16);
    --lp-cta-ink:#fff; --lp-cta-sh:rgba(var(--lp-acc-rgb),.30); --lp-cta-sh2:rgba(var(--lp-acc-rgb),.44);
    --lp-navbg:rgba(245,247,252,.85)
  }
}
.lp{position:relative;color:var(--lp-ink)}
.lp .wrap{max-width:1180px;margin:0 auto;padding:0 32px}
/* decorative layers are ABSOLUTE + height-capped on purpose:
   as position:fixed full-screen layers they repainted on every scroll frame
   (measured: ~23ms/frame, 22% dropped) — confining them costs nothing visually */
.lp-stars{position:absolute;inset:0 0 auto;height:1150px;z-index:0;pointer-events:none;opacity:var(--lp-star-o);
  background-image:
    radial-gradient(1.5px 1.5px at 8% 22%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1px 1px at 22% 68%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1.5px 1.5px at 38% 12%,rgba(var(--lp-star),.8),transparent),
    radial-gradient(1px 1px at 55% 78%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1.5px 1.5px at 68% 30%,rgba(var(--lp-star),.7),transparent),
    radial-gradient(1px 1px at 78% 58%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1.5px 1.5px at 90% 15%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1px 1px at 95% 82%,rgba(var(--lp-star),.8),transparent),
    radial-gradient(1.5px 1.5px at 12% 90%,rgba(var(--lp-star),1),transparent),
    radial-gradient(1px 1px at 45% 45%,rgba(var(--lp-star),.6),transparent);
  background-repeat:repeat;background-size:600px 600px;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent);mask-image:linear-gradient(180deg,#000 62%,transparent)}
.lp-glow{position:absolute;inset:0 0 auto;height:1150px;z-index:0;pointer-events:none;
  background:radial-gradient(700px 500px at 85% -5%,rgba(var(--lp-acc-rgb),.10),transparent 60%),
             radial-gradient(600px 500px at 5% 30%,rgba(139,124,246,.10),transparent 60%)}
/* padding عمداً ترنزیشن ندارد: چون هدر sticky است، انیمیشن padding هر فریم اسکرول را layout می‌کند */
.lp-head{position:sticky;top:0;z-index:50;padding:22px 0;transition:background .3s ease,border-color .3s ease}
.lp-head.scrolled{padding:12px 0;background:var(--lp-navbg);border-bottom:1px solid var(--lp-line)}
.lp-nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.lp-brand{display:flex;align-items:center;gap:4px;font-weight:800;font-size:19px;letter-spacing:-.2px;color:var(--lp-ink);direction:ltr}
.lp-mark{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  background:linear-gradient(155deg,var(--lp-acc2),var(--lp-acc) 70%);box-shadow:0 0 18px rgba(var(--lp-acc-rgb),.4)}
.lp-mark svg{width:17px;height:17px;color:var(--lp-cta-ink)}
/* لوگوی هدر لندینگ: ستاره‌ی گرادیانی + «Stars» تیره و «Byte» آبی (مطابق ماکاپ) */
.lp-mark2{width:34px;height:34px;flex:none;transform:translateY(-2px)}
.lp-word{font-family:"Plus Jakarta Sans","Vazirmatn",sans-serif;font-weight:800;font-size:25px;letter-spacing:-.6px}
.lp-word .b-stars{color:var(--lp-ink)}
.lp-word .b-byte{color:var(--lp-acc)}
.lp-links{display:flex;align-items:center;gap:34px;font-size:14.5px;color:var(--lp-soft)}
.lp-links a{color:inherit;position:relative;transition:color .2s}
.lp-links a:hover{color:var(--lp-ink)}
.lp-links a::after{content:"";position:absolute;inset-inline:0;bottom:-8px;height:1px;background:var(--lp-acc);transform:scaleX(0);transition:transform .25s ease}
.lp-links a:hover::after{transform:scaleX(1)}
.lp-navcta{display:flex;align-items:center;gap:10px}
.lp-icbtn{width:34px;height:34px;border:1px solid var(--lp-line);border-radius:50%;display:grid;place-items:center;color:var(--lp-dim);background:var(--lp-surface);transition:color .2s,transform .2s;flex:none}
.lp-icbtn:hover{color:var(--lp-acc2);transform:scale(1.08)}
.lp-icbtn .i{width:15px;height:15px}
.lp-burger{display:none}
.nb-short{display:none}
/* دکمه ورود در نوبار — سلکتور دوکلاسه لازم است چون .lp-cta پایین‌تر تعریف شده */
.lp-navcta .lp-navbtn{padding:7px 21px;font-size:14px;white-space:nowrap;box-shadow:0 8px 20px var(--lp-cta-sh)}
.lp-navcta .lp-navbtn:hover{box-shadow:0 12px 26px var(--lp-cta-sh2)}
.lp-hero{position:relative;z-index:2;padding:40px 0 50px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:20px}
.lp-hcol{max-width:560px}
.lp h1{font-size:clamp(30px,3.9vw,46px);font-weight:800;line-height:1.45;letter-spacing:-.6px;margin:0 0 20px}
.lp h1 em{font-style:normal;color:var(--lp-acc)}
.lp-lede{font-size:16.5px;line-height:2.1;color:var(--lp-soft);max-width:475px;margin:0 0 32px;font-weight:400}
/* سه ویژگی — آیکون بالا، متن وسط‌چین (مطابق ماکاپ) */
.lp-feat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:480px;margin-bottom:34px}
.lp-f3{text-align:center}
.lp-f3ic{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;
  background:rgba(var(--lp-acc-rgb),.09);box-shadow:0 4px 16px rgba(var(--lp-acc-rgb),.12)}
.lp-f3ic svg{width:25px;height:25px;color:var(--lp-acc)}
.lp-f3 b{display:block;font-size:14.5px;font-weight:700;color:var(--lp-ink);line-height:1.7}
.lp-f3 .lp-f3s{display:block;font-size:12.5px;color:var(--lp-dim);line-height:1.7}
.lp-cta-hero{width:100%;max-width:480px;justify-content:center;padding:19px 32px;font-size:16px}
.lp-help-hero{display:flex;justify-content:center;max-width:480px;margin-top:20px}
/* تصویر وکتور سمت چپ */
.lp-art{display:grid;place-items:center}
/* لکه و موجِ روشنِ پشت تصویر برای پس‌زمینه سفید طراحی شده؛ در تم تاریک کم‌رنگ می‌شود */
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .lp-artbg{opacity:.10}}
:root[data-theme="dark"] .lp-artbg{opacity:.10}
.lp-heroart{width:100%;max-width:560px;height:auto}
.lp-ctarow{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.lp-cta{display:inline-flex;align-items:center;gap:10px;padding:16px 32px;border-radius:99px;
  background:linear-gradient(100deg,var(--lp-acc2),var(--lp-acc));color:var(--lp-cta-ink);font-weight:700;font-size:15.5px;
  box-shadow:0 14px 34px var(--lp-cta-sh);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease}
.lp-cta:hover{transform:translateY(-2px);box-shadow:0 18px 40px var(--lp-cta-sh2)}
.lp-cta svg{width:16px;height:16px}
.lp-help{display:inline-flex;align-items:center;gap:8px;color:var(--lp-soft);font-size:14px;transition:color .2s}
.lp-help:hover{color:var(--lp-acc2)}
.lp-help svg{width:16px;height:16px}
/* منظومه‌ی قبلی حذف شد؛ جایش تصویر وکتور .lp-art آمد */
.lp-sr{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.lp-sr.in{opacity:1;transform:none}
.lp-strip{position:relative;z-index:2;display:flex;border-top:1px solid var(--lp-line);border-bottom:1px solid var(--lp-line);margin-top:20px}
.lp-stat{flex:1;text-align:center;padding:32px 10px;border-inline-start:1px solid var(--lp-line)}
.lp-stat:first-child{border-inline-start:none}
.lp-stat b{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:800;color:var(--lp-acc2);margin-bottom:6px}
.lp-stat span{font-size:12.5px;color:var(--lp-dim)}
.lp-block{position:relative;z-index:2;padding:88px 0}
.lp-block.alt{background:var(--lp-bg2)}
.lp-shead{margin-bottom:50px;max-width:560px}
.lp-kicker{color:var(--lp-acc2);font-size:13.5px;margin:0 0 12px;font-weight:600}
.lp-shead h2{font-size:clamp(25px,3vw,36px);font-weight:800;margin:0 0 14px;letter-spacing:-.5px}
.lp-desc{color:var(--lp-soft);font-size:15px;line-height:1.9;margin:0;font-weight:300}
.lp-bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:190px;gap:18px}
.lp-bcard{border:1px solid var(--lp-line);border-radius:20px;padding:26px;background:var(--lp-surface);
  display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
  transition:border-color .3s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.lp-bcard::before{content:"";position:absolute;inset:0;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(220px 140px at 85% 0%,rgba(var(--lp-acc-rgb),.14),transparent 70%)}
.lp-bcard:hover{border-color:rgba(var(--lp-acc-rgb),.35);transform:translateY(-4px)}
.lp-bcard:hover::before{opacity:1}
.lp-bwide{grid-column:span 2}
/* flex:none لازم است: والد .lp-bcard یک ستون flex با ارتفاع ثابت است و
   بدون آن، flex-shrink پیش‌فرض ارتفاع ۴۰px را به ۲۳px له می‌کرد */
.lp-bic{width:40px;height:40px;flex:none;position:relative;display:flex;align-items:center}
.lp-bic svg{width:22px;height:22px;color:var(--lp-acc)}
.lp-bcard h3{font-size:18px;font-weight:700;margin:16px 0 8px;position:relative}
.lp-bcard p{font-size:13.5px;color:var(--lp-soft);line-height:1.8;margin:0;font-weight:300;position:relative}
.lp-bprice{font-size:13px;font-weight:700;color:var(--lp-acc2);margin-top:12px;position:relative}
.lp-tl{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative}
.lp-tl::before{content:"";position:absolute;top:22px;inset-inline:12%;height:1px;
  background:linear-gradient(90deg,transparent,var(--lp-line) 15%,var(--lp-line) 85%,transparent)}
.lp-tli{position:relative;text-align:center}
.lp-tlnum{width:44px;height:44px;margin:0 auto 18px;border-radius:50%;border:1px solid var(--lp-acc);
  color:var(--lp-acc2);display:grid;place-items:center;font-weight:800;font-size:16px;background:var(--lp-bg2);position:relative;z-index:2}
.lp-tli h4{font-size:15px;font-weight:700;margin:0 0 8px}
.lp-tli p{font-size:12.5px;color:var(--lp-dim);line-height:1.8;margin:0;font-weight:300}
.lp-quotes{display:grid;grid-template-columns:repeat(3,1fr)}
.lp-quote{padding:0 30px;border-inline-end:1px solid var(--lp-line)}
.lp-quote:last-child{border-inline-end:none;padding-inline-end:0}
.lp-quote>svg{width:26px;height:26px;color:var(--lp-acc);margin-bottom:16px;opacity:.7}
.lp-quote p{font-size:14.5px;line-height:1.95;color:var(--lp-soft);margin:0 0 18px;font-weight:300}
.lp-quote b{display:block;font-size:13.5px;font-weight:700}
.lp-quote span{font-size:12px;color:var(--lp-dim)}
/* ===== «چرا ما؟» — کارت تیره در هر دو تم، با رنگ‌های خود قالب ===== */
.lp-why{display:grid;grid-template-columns:1fr 1.05fr;gap:46px;align-items:center;
  background:linear-gradient(150deg,#141c36,#0d1428 60%,#111a33);
  border-radius:30px;padding:56px 52px;box-shadow:0 26px 70px rgba(12,22,50,.28)}
.lp-why-t h2{font-size:clamp(23px,2.5vw,31px);font-weight:800;line-height:1.6;margin:0 0 16px;color:#f2f5ff}
.lp-why-t p{font-size:14.5px;line-height:2.1;color:#9fb0d4;margin:0 0 28px;font-weight:300;max-width:400px}
.lp-why-cta{background:linear-gradient(100deg,var(--lp-acc2),var(--lp-acc));box-shadow:0 14px 32px rgba(var(--lp-acc-rgb),.34)}
.lp-wlist{display:flex;flex-direction:column;gap:22px}
.lp-wrow{display:flex;align-items:flex-start;gap:15px}
.lp-wic{width:44px;height:44px;flex:none;border-radius:13px;display:grid;place-items:center;
  box-shadow:0 8px 20px rgba(0,0,0,.28)}
.lp-wic svg,.lp-wic .i{width:20px;height:20px}
.w-blue{background:rgba(64,130,255,.18);color:#6ea6ff}
.w-violet{background:rgba(139,124,246,.18);color:#a999ff}
.w-sky{background:rgba(62,196,224,.16);color:#5fd2e8}
.w-green{background:rgba(76,208,138,.16);color:#5cd894}
.lp-wrow b{display:block;font-size:15px;font-weight:700;color:#eef2ff;line-height:1.9}
.lp-wrow .lp-ws{display:block;font-size:13px;color:#8fa2c8;line-height:1.9;font-weight:300}
/* ===== نوار «هنوز مطمئن نیستی؟» ===== */
.lp-chat{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  background:linear-gradient(110deg,var(--lp-acc2),var(--lp-acc));border-radius:26px;padding:40px 46px;
  box-shadow:0 22px 56px rgba(var(--lp-acc-rgb),.30)}
.lp-chat h3{font-size:clamp(20px,2.2vw,27px);font-weight:800;color:#fff;margin:0 0 8px;line-height:1.7}
.lp-chat p{font-size:14px;color:rgba(255,255,255,.85);margin:0;line-height:2;font-weight:300}
.lp-chatbtn{display:inline-flex;align-items:center;gap:10px;flex:none;background:#fff;color:var(--lp-acc2);
  font-weight:700;font-size:14.5px;padding:15px 28px;border-radius:99px;
  box-shadow:0 12px 28px rgba(10,30,80,.22);transition:transform .25s ease,box-shadow .25s ease}
.lp-chatbtn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(10,30,80,.28)}
.lp-chatbtn svg{width:17px;height:17px}
.lp-faq{max-width:720px;display:flex;flex-direction:column}
.lp-fitem{border-top:1px solid var(--lp-line)}
.lp-fitem:last-child{border-bottom:1px solid var(--lp-line)}
.lp-fq{width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:22px 4px;
  font-family:inherit;font-size:15.5px;font-weight:600;color:var(--lp-ink);text-align:start}
.lp-fq svg{width:16px;height:16px;flex:none;color:var(--lp-acc);transition:transform .25s ease}
.lp-fitem.open .lp-fq svg{transform:rotate(45deg)}
.lp-fa{max-height:0;overflow:hidden;transition:max-height .3s ease}
.lp-fa p{margin:0;padding:0 4px 22px;font-size:13.5px;line-height:1.9;color:var(--lp-soft);font-weight:300}
.lp-final{border:1px solid rgba(var(--lp-acc-rgb),.3);border-radius:28px;padding:66px 40px;text-align:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(var(--lp-acc-rgb),.05),transparent)}
.lp-final h2{font-size:clamp(25px,3.4vw,38px);font-weight:800;margin:0 0 16px}
.lp-final p{color:var(--lp-soft);font-size:15px;margin:0 0 32px;font-weight:300}
.lp-foot{position:relative;z-index:2;padding:52px 0 30px;border-top:1px solid var(--lp-line)}
.lp-fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;margin-bottom:38px}
.lp-fbrand .lp-brand{width:fit-content;font-size:20px;gap:9px}
.lp-fbrand p{font-size:13px;color:var(--lp-dim);line-height:1.9;margin:14px 0 0;max-width:260px;font-weight:300}
.lp-fcol h5{font-size:13.5px;font-weight:700;margin:0 0 16px;color:var(--lp-soft)}
.lp-fcol a{display:block;color:var(--lp-dim);font-size:13px;margin-bottom:12px;transition:color .2s}
.lp-fcol a:hover{color:var(--lp-acc2)}
.lp-trust{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;padding:30px 0 34px;border-top:1px solid var(--lp-line)}
.lp-trust-t b{display:block;font-size:13.5px;font-weight:700;color:var(--lp-soft);line-height:1.8}
.lp-trust-t small{display:block;font-size:12px;color:var(--lp-dim);line-height:1.8;font-weight:300}
.lp-seals{display:flex;gap:12px;flex-wrap:wrap}
.lp-seal{width:104px;height:104px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
  background:var(--lp-surface);border:1px dashed var(--lp-line);border-radius:14px;padding:8px;overflow:hidden}
.lp-seal>svg{width:22px;height:22px;color:var(--lp-acc2);flex:none}
.lp-seal>span{font-size:10px;line-height:1.55;color:var(--lp-dim)}
.lp-seal img,.lp-seal a{max-width:100%;height:auto;display:block}
.lp-seal:has(img){border-style:solid;padding:0;background:none}
.lp-fbot{display:flex;justify-content:space-between;align-items:center;gap:14px;padding-top:24px;border-top:1px solid var(--lp-line);font-size:12px;color:var(--lp-dim)}
.lp-fsoc{display:flex;gap:10px}
.lp-fsoc a{width:32px;height:32px;border-radius:50%;border:1px solid var(--lp-line);display:grid;place-items:center;color:var(--lp-dim);transition:.2s}
.lp-fsoc a:hover{color:var(--lp-cta-ink);background:var(--lp-acc2);border-color:transparent}
.lp-fsoc svg{width:14px;height:14px}
@media (max-width:980px){
  .lp-hero{grid-template-columns:1fr;text-align:center;padding-top:30px}
  .lp-hcol{max-width:none;margin-inline:auto}
  .lp-lede{margin-inline:auto}
  .lp-feat3{margin-inline:auto}
  .lp-cta-hero,.lp-help-hero{margin-inline:auto}
  .lp-ctarow{justify-content:center}
  .lp-art{order:-1}
  .lp-heroart{max-width:400px}
  .lp-links{display:none}
  .lp-burger{display:grid}
  body.lpmenu .lp-links{display:flex;position:absolute;inset-inline:20px;top:64px;flex-direction:column;align-items:stretch;gap:0;
    background:var(--lp-surface);border:1px solid var(--lp-line);border-radius:16px;box-shadow:0 18px 44px var(--lp-shadow);padding:6px;z-index:60}
  body.lpmenu .lp-links a{padding:13px 14px;border-radius:10px}
  body.lpmenu .lp-links a::after{display:none}
  .lp-bento{grid-template-columns:repeat(2,1fr)}
  .lp-bwide{grid-column:span 2}
  .lp-strip{flex-wrap:wrap}
  .lp-stat{flex:0 0 50%;border-bottom:1px solid var(--lp-line)}
  .lp-stat:nth-child(odd){border-inline-start:none}
  .lp-tl{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .lp-tl::before{display:none}
  .lp-why{grid-template-columns:1fr;gap:34px;padding:44px 36px}
  .lp-why-t p{max-width:none}
  .lp-quotes{grid-template-columns:1fr;gap:30px}
  .lp-quote{border-inline-end:none;padding-inline:0}
  .lp-fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .lp .wrap{padding:0 20px}
  .lp h1{font-size:31px}
  .lp-hero{padding:16px 0 36px;gap:6px}
  .lp-heroart{max-width:320px}
  .lp-feat3{gap:4px;margin-bottom:26px}
  .lp-f3ic{width:48px;height:48px;margin-bottom:8px}
  .lp-f3ic svg{width:20px;height:20px}
  .lp-f3 b{font-size:13px}
  .lp-f3 .lp-f3s{font-size:11px}
  .lp-cta-hero{padding:17px 24px;font-size:15px}
  .lp-block{padding:60px 0}
  .lp-shead{margin-bottom:34px}
  .lp-bento{grid-template-columns:1fr}
  .lp-bwide{grid-column:span 1}
  .lp-ctarow .lp-cta,.lp-final .lp-cta{width:100%;justify-content:center}
  .lp-navcta .lp-cta{padding-inline:16px;font-size:13px;white-space:nowrap}
  .lp-why{padding:34px 22px;border-radius:24px;gap:28px}
  .lp-why-cta{width:100%;justify-content:center}
  .lp-wlist{gap:18px}
  .lp-wic{width:40px;height:40px;border-radius:12px}
  .lp-wic svg,.lp-wic .i{width:18px;height:18px}
  .lp-chat{padding:30px 22px;border-radius:22px;text-align:center;justify-content:center;gap:20px}
  .lp-chatbtn{width:100%;justify-content:center}
  .lp-tl{grid-template-columns:1fr}
  .lp-fgrid{grid-template-columns:1fr}
  .lp-fbot{flex-direction:column;text-align:center}
  .lp-trust{flex-direction:column;align-items:center;text-align:center;gap:14px;padding:26px 0 30px}
  .lp-final{padding:44px 22px}
}
@media (max-width:430px){
  .lp .wrap{padding:0 16px}
  .lp-nav{gap:10px}
  .lp-brand{gap:3px}
  .lp-mark2{width:28px;height:28px;transform:translateY(-1.6px)}
  .lp-word{font-size:20px}
  .lp-navcta{gap:7px}
  .lp-icbtn{width:31px;height:31px}
  .lp-navcta .lp-cta{padding-inline:13px;font-size:12.5px}
  body.lpmenu .lp-links{inset-inline:16px}
}
@media (max-width:370px){
  .lp-navcta .nb-full{display:none}
  .lp-navcta .nb-short{display:inline}
  .lp-navcta .lp-navbtn{padding-block:4px}
}
.auth-card{width:100%;max-width:480px;background:#fff;border-radius:20px;box-shadow:0 10px 30px rgba(30,50,110,.07),0 2px 8px rgba(30,50,110,.04);border:1px solid #e6eaf5;padding:28px 32px 32px;position:relative;animation:up .4s cubic-bezier(.2,.9,.3,1) both}
.auth-topbar{display:flex;align-items:center;justify-content:center;margin-bottom:34px}
.auth-brand{display:flex;align-items:center;gap:8px;direction:ltr;font-family:"Plus Jakarta Sans","Vazirmatn",sans-serif;font-weight:800;font-size:21px;letter-spacing:-.4px}
.auth-brand svg{width:26px;height:26px;flex:none}
.auth-brand .b-stars{color:#101a3d}
.auth-brand .b-byte{background:linear-gradient(90deg,#5ea4f3 0%,#0b3ef0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-card h1.pt{font-size:22px;font-weight:700;letter-spacing:0;text-align:center;margin:0 0 12px}
.auth-card .sub{font-size:13.5px;line-height:1.9;max-width:360px;margin:0 auto 26px;color:#7c88a6;text-align:center}
.auth-card .sub b{color:#0f1a3c;font-weight:600;direction:ltr;display:inline-block}
.auth-badge{width:88px;height:88px;border-radius:50%;background:#eef3fe;color:#2b6ef2;display:grid;place-items:center;margin:4px auto 22px}
.auth-badge .i{width:36px;height:36px;stroke-width:1.8}
.auth-card .inp{direction:ltr;text-align:left;border:1px solid #e6eaf5;border-radius:12px;height:50px;background:#fff;box-shadow:none}
.auth-card .inp:focus{border-color:#2b6ef2;box-shadow:0 0 0 3px rgba(43,110,242,.12)}
.auth-note{display:flex;align-items:flex-start;gap:10px;background:#f3f6fc;border-radius:12px;padding:14px 16px;margin-top:22px;font-size:12.5px;color:#7c88a6;line-height:1.9;text-align:right}
/* تیک پذیرش قوانین — تا زده نشود دکمه ادامه غیرفعال است */
.chk{display:flex;align-items:flex-start;gap:10px;width:100%;margin-top:18px;cursor:pointer;
  text-align:start;font-size:12.5px;line-height:2.2;color:#5d6b8c;background:none;padding:0}
.chk .box{width:21px;height:21px;flex:none;border-radius:6px;border:1.5px solid #c6d0e6;background:#fff;
  display:grid;place-items:center;margin-top:3px;transition:background .15s,border-color .15s}
.chk .box .i{width:13px;height:13px;color:#fff;stroke-width:3;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s}
.chk.on .box{background:var(--accent);border-color:var(--accent)}
.chk.on .box .i{opacity:1;transform:scale(1)}
.chk:hover .box{border-color:var(--accent)}
.chk a{color:var(--accent);font-weight:700}
.chk a:hover{text-decoration:underline}
.chk.err .box{border-color:var(--bad);background:#fff}
.chk.err{animation:shakeX .4s}
.chk.err .box .i{opacity:0}
.auth-note .i{width:18px;height:18px;flex:none;color:#2b6ef2;margin-top:2px}
#loResendBtn .i{width:14px;height:14px}
#loResendBtn:disabled{opacity:.55;pointer-events:none}
/* چیپ شماره موبایل با آیکون ویرایش — جایگزین متن توضیحی و لینک «تغییر شماره» */
.phchip{display:flex;align-items:center;gap:7px;width:fit-content;margin:0 auto 22px;
  padding:3px 11px;border-radius:9px;background:#eaf1ff;color:#2f6bf5;
  font-weight:600;font-size:12px;letter-spacing:.2px;direction:ltr;
  transition:background .15s,transform .15s}
.phchip:hover{background:#dae7ff}
.phchip:active{transform:scale(.97)}
.phchip .i{width:14px;height:14px;stroke-width:1.9}
.otp-boxes{display:flex;gap:10px;justify-content:center;direction:ltr}
.otp-box{width:56px;height:56px;text-align:center;font-size:20px;font-weight:700;border-radius:12px;border:1px solid #e6eaf5;background:#fff;color:#0f1a3c;outline:0;font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .15s}
.otp-box:focus{border-color:#2b6ef2;box-shadow:0 0 0 3px rgba(43,110,242,.15);transform:translateY(-1px)}
.otp-box.err{border-color:#e5484d;animation:shakeX .45s}
/* کد کامل و درست وارد شده — تأیید بصری قبل از زدن دکمه */
.otp-box.ok{border-color:#16924a;background:#eefaf2;color:#0e6b37;box-shadow:0 0 0 3px rgba(22,146,74,.14)}
.otp-box.ok:focus{border-color:#16924a;box-shadow:0 0 0 3px rgba(22,146,74,.22)}
.auth-card .btn.block{border-radius:12px;background:linear-gradient(90deg,#2b8cf2,#7b4bf0);box-shadow:0 8px 18px rgba(75,90,240,.22);font-size:15.5px;height:52px}
.auth-card .btn.block:hover{filter:brightness(1.03)}
@media (max-width:560px){.auth-card{padding:22px 18px 26px}.otp-box{width:48px;height:48px;font-size:18px}}
.tkt{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);margin-bottom:10px;overflow:hidden}
.tkt-h{display:flex;align-items:center;gap:10px;width:100%;padding:14px 16px;text-align:right}
.tkt-h .tx{flex:1;min-width:0}
.tkt-h .tx b{display:block;font-weight:700;line-height:1.5}
.tkt-h .tx small{display:block;color:var(--muted);font-size:12.5px;line-height:1.5;margin-top:1px}
.tkt-h .chev{width:16px;height:16px;color:var(--muted);flex:none;transition:transform .2s}
.tkt.open .tkt-h .chev{transform:rotate(-90deg)}
.tkt-b{padding:0 16px 16px;border-top:1px solid var(--line);padding-top:12px;animation:rowIn .3s both}
.okbox{display:flex;align-items:flex-start;gap:8px;background:rgba(22,146,74,.1);color:var(--ok);border-radius:6px;padding:10px 12px;font-size:12.5px;font-weight:600;line-height:1.7;margin-bottom:12px}
.okbox .i{width:16px;height:16px;flex:none;margin-top:4px}
.kvlist{display:flex;flex-direction:column}
.kvlist .kv{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.kvlist .kv:last-child{border-bottom:0}
.kvlist .kv .k{color:var(--muted);font-size:13px}
.kvlist .kv .v{font-weight:700;font-size:13.5px}
.kvlist .kv .v.none{color:var(--muted);font-weight:500}
.kvpill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:3px 10px;font-size:12px;font-weight:700;background:var(--k-sell-bg);color:var(--k-sell)}
.kvpill.bad{background:var(--k-gift-bg);color:var(--k-gift)}
.tkt-chat{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.msg{max-width:82%;width:fit-content;padding:9px 13px;border-radius:14px;font-size:13px;line-height:1.6}
.msg.user{margin-inline-end:auto;background:var(--accent);color:var(--on-accent);border-end-end-radius:4px}
.msg.support{margin-inline-start:auto;background:var(--surface-2);color:var(--ink);border-end-start-radius:4px}
.msg small{display:block;margin-top:4px;font-size:10px;opacity:.75}
.tkt-actions{display:flex;gap:8px;margin-top:10px}
.tkt-actions .btn{flex:1}
.tkt-actions .btn.ic{flex:none;min-width:40px;padding:0 12px;gap:5px}
.tkt-actions .btn.ic .i{width:16px;height:16px}
.back{display:flex;align-items:center;gap:2px;color:var(--sky);font-size:13px;font-weight:600;margin-bottom:10px}
.back .i{width:16px;height:16px;transform:scaleX(-1)}
.faq-cta{text-align:center;background:var(--surface-2);border-radius:6px;padding:22px 16px;margin-top:6px}
.faq-cta p{color:var(--muted);margin-bottom:12px;font-size:13.5px}
.file-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:6px;padding:6px 10px;font-size:12px;margin:8px 6px 0 0}
.file-chip .i{width:14px;height:14px;color:var(--muted);flex:none}
.file-chip small{color:var(--muted)}
.file-chip button{color:var(--muted);font-size:16px;line-height:1;padding:0 2px}
.file-chip.sm{padding:4px 8px;font-size:11px;margin:0}
/* داخل حباب آبی کاربر، چیپ روشن روی متن سفید خوانا نبود */
.msg.user .file-chip{background:rgba(255,255,255,.18);color:#fff}
.msg.user .file-chip .i{color:rgba(255,255,255,.85)}
.msg.user .file-chip small{color:rgba(255,255,255,.75)}
.file-list{display:flex;flex-wrap:wrap}
.msg-files{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.sw{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.sw:last-child{border:0}
.tg{position:relative;width:48px;height:29px;border-radius:999px;background:var(--line);transition:background .2s;flex:none}
.tg::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.tg.on{background:var(--accent)}
.tg.on::after{transform:translateX(-19px)}
.foot{margin-top:44px;text-align:center;color:var(--muted);font-size:12px;opacity:.8}

/* ===== overlays ===== */
.mbg{position:fixed;inset:0;background:rgba(6,10,24,.58);z-index:50;display:grid;place-items:center;padding:20px;animation:fade .2s both}
body.modal-open::before,body.modal-open .shoot,
body.modal-open .app .sp,body.modal-open .app .orb g,body.modal-open .app .ap-st,
body.modal-open .app .wallet::before,body.modal-open .app .wallet::after,
body.modal-open .app .pv::before,body.modal-open .app .pv-star,
body.modal-open .app .btn.shine::before,
body.modal-open .app .row.live::after,body.modal-open .app .dot.wait{animation-play-state:paused!important}
body.modal-open .paybar,body.modal-open .top,body.modal-open .tabbar{backdrop-filter:none;-webkit-backdrop-filter:none}
@keyframes fade{from{opacity:0}}
.modal{position:relative;background:var(--surface);border-radius:6px;padding:26px;width:100%;max-width:400px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:up .3s cubic-bezier(.2,.9,.3,1) both}
@keyframes up{from{opacity:0;transform:translateY(24px) scale(.98)}}
.modal h3{font-size:19px;font-weight:800;margin-bottom:8px}
.modal .r{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.modal .r span:first-child{color:var(--muted)}
.modal .r del{color:var(--muted);font-weight:500}
.modal .r .dis-amt{color:var(--ok)}
.modal .r.cur span:first-child{color:var(--ink);font-weight:700}
.modal .r.cur small{color:var(--accent);font-weight:700}
.modal .r.cur b{color:var(--accent)}
.oi.lg{width:56px;height:56px;border-radius:16px;margin:0 auto 14px}
.oi.lg .i{width:28px;height:28px}
.modal .b{display:flex;gap:10px;margin-top:22px}
.modal .b .btn{flex:1}
.okw{text-align:center;position:relative}
.okstar{width:84px;height:84px;margin:0 auto 10px;position:relative;display:grid;place-items:center}
.okstar::before{content:"";position:absolute;inset:-8px;border-radius:50%;background:radial-gradient(circle,var(--ok-glow,rgba(245,178,27,.28)),transparent 70%);z-index:-1}
.okstar svg{width:78px;height:78px;filter:drop-shadow(0 6px 18px var(--ok-shadow,rgba(245,178,27,.5)));animation:starin .7s cubic-bezier(.3,1.6,.5,1) both}
.okstar.k-gram{--ok-glow:rgba(0,152,234,.28);--ok-ring:#0098ea;--ok-shadow:rgba(0,152,234,.5)}
.okstar.k-premium{--ok-glow:rgba(142,99,245,.28);--ok-ring:#8E63F5;--ok-shadow:rgba(142,99,245,.5)}
.okstar.k-gift{--ok-glow:rgba(74,123,255,.28);--ok-ring:#4a7bff;--ok-shadow:rgba(74,123,255,.5)}
@keyframes starin{from{transform:scale(0) rotate(-40deg)}to{transform:none}}
.steps{list-style:none;text-align:right;margin:20px 0 0;display:flex;flex-direction:column;gap:0}
.steps li{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:14px;position:relative;padding-bottom:20px}
.steps li:last-child{padding-bottom:0}
.steps li::after{content:"";position:absolute;top:24px;bottom:-2px;inset-inline-end:10px;width:2px;background:var(--line);transition:background .3s .1s}
.steps li:last-child::after{display:none}
.steps li.done::after{background:var(--ok)}
.steps li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;background:var(--surface);position:relative;z-index:1;transition:transform .3s cubic-bezier(.3,1.6,.5,1),background .2s,border-color .2s}
.steps li i .ck{width:13px;height:13px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:opacity .25s .05s,transform .3s .05s cubic-bezier(.3,1.6,.5,1)}
.steps li.done{color:var(--ink)}
.steps li.done i{background:var(--ok);border-color:var(--ok);transform:scale(1.1)}
.steps li.done i .ck{opacity:1;transform:scale(1)}
.steps li.cur{color:var(--ink);font-weight:600}
.steps li.cur i{border-color:var(--accent);border-top-color:transparent;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.bs{position:absolute;left:50%;top:50%;width:14px;height:14px;background:#f5b21b;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);animation:burst 1s cubic-bezier(.15,.7,.3,1) forwards;pointer-events:none}
@keyframes burst{from{transform:translate(-50%,-50%) scale(0);opacity:1}to{transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(var(--s));opacity:0}}
.toast{position:fixed;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:6px;z-index:60;font-weight:500;max-width:90vw;text-align:center;font-size:14px;animation:up .25s both}
.toast.bad{background:var(--bad);color:#fff}
.scrim{display:none}
.tabbar{display:none}

/* ===== WOW layer: light, GPU-friendly (transform/opacity only) ===== */
.shoot{position:fixed;left:0;top:0;width:130px;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);opacity:0;z-index:0;pointer-events:none;animation:shoot 13s linear 3s infinite}
@keyframes shoot{0%{opacity:0;transform:translate3d(78vw,60px,0) rotate(-29deg)}2%{opacity:calc(var(--stars-o)*1.6)}7%{opacity:0;transform:translate3d(calc(78vw - 380px),260px,0) rotate(-29deg)}100%{opacity:0}}
.nav a{position:relative;z-index:1}
#cnt{position:relative;display:inline-block}
.tiltw{perspective:1100px}
.wallet{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out;will-change:transform;isolation:isolate}
.wallet::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;background:radial-gradient(circle at 28% 40%,var(--aur1),transparent 42%),radial-gradient(circle at 72% 62%,var(--aur2),transparent 46%);animation:aur 14s ease-in-out infinite alternate}
@keyframes aur{from{transform:translate3d(-4%,-3%,0) rotate(0)}to{transform:translate3d(5%,4%,0) rotate(18deg)}}
.wallet::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:34%;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.38),transparent);transform:translateX(-160%) skewX(-18deg);animation:sheen 8s ease-in-out 1.2s infinite}
@keyframes sheen{0%,60%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.wallet>.wl,.wallet>.wn,.wallet>.wa{position:relative;z-index:1}
.orb{z-index:1;transform:translate(calc(var(--px,0)*14px),calc(var(--py,0)*10px));transition:transform .3s ease-out}
.sp{position:absolute;width:13px;height:13px;background:#fff;clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);opacity:0;animation:spark 3.8s ease-in-out var(--d,0s) infinite;pointer-events:none;z-index:1}
@keyframes spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}50%{opacity:.95;transform:scale(1) rotate(90deg)}}
.btn{position:relative;overflow:hidden}
.btn.shine::before{content:"";position:absolute;top:0;bottom:0;left:0;width:38%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-160%) skewX(-20deg);animation:shine 4.5s ease-in-out 1s infinite;pointer-events:none}
@keyframes shine{0%,55%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(420%) skewX(-20deg)}}
.opt{position:relative;overflow:hidden}
.ripple{position:absolute;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.5);transform:translate(-50%,-50%) scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
.btn.ghost .ripple,.btn.soft .ripple{background:rgba(128,150,200,.3)}
.opt .ripple{background:var(--accent-soft)}
@keyframes rip{to{transform:translate(-50%,-50%) scale(14);opacity:0}}
.page.anim .tile,.page.anim .opt{animation:tileIn .5s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:calc(var(--i,0)*45ms + 120ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(16px) scale(.9)}to{opacity:1;transform:none}}
.page.anim .paybar{animation:barIn .65s .4s cubic-bezier(.2,1.1,.3,1) both}
@keyframes barIn{from{opacity:0;transform:translateY(44px)}to{opacity:1;transform:none}}
.page.anim>.sec{animation:none}
.rv{opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
.rv .list>*{opacity:0;transform:translateX(14px)}
.rv.in .list>*{opacity:1;transform:none;transition:opacity .45s ease calc(var(--r,0)*70ms),transform .55s cubic-bezier(.2,.8,.2,1) calc(var(--r,0)*70ms)}
.chev{transition:transform .2s}
.list button.row:hover .chev{transform:translateX(-4px)}
.row.flash{animation:flash 1.8s ease}
@keyframes flash{0%{background:rgba(76,208,138,.24)}100%{background:transparent}}
.okstar::before,.okstar::after{content:"";position:absolute;inset:6px;border-radius:50%;border:2px solid var(--ok-ring,#f5b21b);opacity:0;animation:ring 1.9s ease-out infinite}
.okstar::after{animation-delay:.95s}
@keyframes ring{from{transform:scale(.7);opacity:.55}to{transform:scale(1.9);opacity:0}}
.okstar.done svg{animation:tada .8s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tada{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(12deg)}100%{transform:scale(1) rotate(0)}}

/* ===== stars page + recipient ===== */
.stepn{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:800;margin-inline-end:8px;vertical-align:1px}
.trust{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.trust span{display:inline-flex;align-items:center;gap:5px;background:var(--surface);box-shadow:var(--shadow);border-radius:6px;padding:3px 10px;font-size:12px;font-weight:600;color:var(--muted)}
.trust .i{width:14px;height:14px;color:var(--ok);stroke-width:2}
.pv{position:relative;overflow:hidden;isolation:isolate;background:var(--card-bg);color:var(--card-ink);border-radius:6px;padding:16px 20px;display:flex;align-items:center;gap:16px;margin-bottom:22px;box-shadow:var(--shadow)}
.pv-shield{position:relative;z-index:1;width:40px;height:40px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.pv>div{position:relative;z-index:1}
.pv-t{display:block;font-size:15.5px;font-weight:800;margin-bottom:3px}
.pv-s{font-size:13px;opacity:.82}
.pv::before{content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;background:radial-gradient(circle at 25% 45%,var(--aur1),transparent 42%),radial-gradient(circle at 75% 60%,var(--aur2),transparent 46%);animation:aur 14s ease-in-out infinite alternate}
.pv-star{position:relative;z-index:1;width:68px;height:68px;flex:none;animation:bob2 5s ease-in-out infinite}
.pv-star svg{width:100%;height:100%;filter:drop-shadow(0 6px 16px rgba(245,178,27,.55));animation:pvpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bob2{50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes pvpop{from{transform:scale(.7) rotate(-15deg)}to{transform:none}}
.pv-t{position:relative;z-index:1;min-width:0}
.pv-t small{display:block;opacity:.7;font-size:12.5px;line-height:1.5}
.pv-t b{display:block;font-size:32px;font-weight:800;letter-spacing:-.5px;line-height:1.2}
.pv-t b em{font-style:normal;font-size:15px;font-weight:600;opacity:.75;letter-spacing:0;margin-inline-start:6px}
.pv-p{font-size:14px;font-weight:600;opacity:.85}
.cust{margin-top:12px}
.stepper{display:flex;gap:8px}
.stepper .inp{text-align:center;font-weight:800;font-size:18px}
.stp{width:54px;height:50px;flex:none;background:var(--surface);box-shadow:var(--shadow);border-radius:6px;font-size:24px;font-weight:600;color:var(--ink);line-height:1}
.stp:active{transform:scale(.94)}
.rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--line);margin:18px 0 4px;outline:0}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:6px;background:var(--accent);border:3px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.rng::-moz-range-thumb{width:20px;height:20px;border-radius:6px;background:var(--accent);border:3px solid var(--surface);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.rcp .seg{margin-bottom:10px}
.tgin{direction:ltr;display:flex;align-items:center;gap:6px;height:56px;background:var(--surface);border:1.5px solid transparent;border-radius:6px;padding:0 8px 0 14px;box-shadow:var(--shadow);transition:border-color .15s}
.tgin:focus-within{box-shadow:0 10px 30px rgba(27,35,64,.16)}
.tgin.err{background:rgba(229,72,77,.09);animation:shakeX .45s}
.tgin .at{color:var(--muted);font-weight:700;font-size:19px;line-height:1}
.tgin input{flex:1;min-width:0;height:100%;background:none;border:0;outline:0;font-size:17px;font-weight:600;text-align:left;direction:ltr}
.tgin input::placeholder{color:var(--muted);opacity:.6;font-weight:400}
.tgin .okic{display:none;color:var(--ok)}
.tgin.ok .okic{display:grid}
.tgin .ib{height:40px;padding:0 14px;border-radius:6px;background:var(--surface-2);color:var(--sky);font-weight:700;font-size:13.5px;direction:rtl}
.tgin .clr{display:none;width:40px;padding:0;font-size:22px;line-height:1;color:var(--muted)}
.tgin.has .clr{display:grid;place-items:center}
.tgin.has .pst{display:none}
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.chips button{direction:ltr;background:var(--surface);box-shadow:var(--shadow);border-radius:6px;padding:5px 12px;font-weight:600;color:var(--ink)}
.chips button:active{transform:scale(.95)}
.chips .pk{background:var(--ok);color:#fff;box-shadow:none}
.okt{color:var(--ok);font-weight:600}

/* ===== wallet payment methods & sheets ===== */
.mi{width:40px;height:40px;border-radius:6px;display:grid;place-items:center;flex:none;background:var(--sky-soft);color:var(--sky)}
.mi-card{background:var(--k-premium-bg);color:var(--k-premium)}
.mi-usdt,.mi-ton{background:transparent}
.bdg{font-size:11px;font-weight:700;color:var(--sky);background:var(--sky-soft);padding:1px 9px;border-radius:6px;white-space:nowrap}
.bdg.ok{color:var(--ok);background:rgba(22,146,74,.12)}
.bdg.off{color:var(--muted);background:var(--surface-2)}
.bdg.warn{color:var(--k-stars);background:var(--k-stars-bg)}
.bdg.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}
/* opacity روی خودِ .opt کار نمی‌کرد: انیمیشن ورود با fill-mode:both مقدار نهایی
   opacity:1 را نگه می‌دارد و بر اعلان ساده می‌چربد. پس حالت غیرفعال را با
   رنگ و پس‌زمینه می‌سازیم و opacity را فقط روی فرزندها می‌گذاریم. */
.opt.dis{filter:grayscale(.6);pointer-events:none;background:var(--surface-2);box-shadow:none;border-color:transparent}
.opt.dis .mi{opacity:.5}
.opt.dis .t b{color:var(--muted);font-weight:700}
.opt.dis .t small{color:var(--muted);opacity:.85}
.opt.dis .rd{border-color:var(--line);background:transparent;opacity:.6}
.pmopt.sel{border-color:var(--pmc,var(--accent));background:var(--pmc-soft,var(--accent-soft))}
.opts .pmopt .bdg{color:var(--pmc,var(--sky));background:var(--pmc-soft,var(--sky-soft))}
.opts .pmopt.dis .bdg{color:var(--muted);background:color-mix(in srgb,var(--muted) 18%,transparent)}
.pmopt.sel .rd{border-color:var(--pmc,var(--accent));background:var(--pmc,var(--accent))}
.opt .t small{white-space:normal}
.modal{max-height:92vh;max-height:92dvh;overflow-y:auto}
.sh-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.sh-h h3{margin:0}
.cp{background:var(--sky-soft);color:var(--sky);border-radius:6px;padding:2px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.cp:active{transform:scale(.94)}
.btn[disabled]{opacity:.5;pointer-events:none}
.paycard{position:relative;overflow:hidden;background:linear-gradient(135deg,#1c2760,#3a2f96 60%,#5a3aa8);color:#fff;border-radius:6px;padding:16px 18px;margin:12px 0}
.paycard small{opacity:.7;font-size:12px}
.paycard .cn{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 14px;direction:ltr;font-size:19px;font-weight:700;letter-spacing:1.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
.paycard .cp{background:rgba(255,255,255,.2);color:#fff;letter-spacing:0;font-family:"Vazirmatn",sans-serif}
.paycard .ch{display:flex;justify-content:space-between;align-items:center;font-size:13px;opacity:.92}
.emv{width:34px;height:24px;border-radius:5px;background:linear-gradient(135deg,#ffe08a,#e2a93b)}
.cryamt{background:var(--surface-2);border-radius:6px;padding:14px;text-align:center;margin:8px 0 12px}
.cryamt small{display:block;color:var(--muted);font-size:12px}
.cryamt .ca{display:flex;justify-content:center;align-items:center;gap:10px;margin:2px 0}
.cryamt .ca b{font-size:27px;font-weight:800;letter-spacing:-.3px}
.cryamt .muted{font-size:12px}
.qrbox{width:168px;height:168px;margin:12px auto 4px;background:#fff;border-radius:6px;padding:4px;box-shadow:var(--shadow)}
.qrcap{text-align:center;font-size:11.5px;color:var(--muted);margin-bottom:12px}
.addr{background:var(--surface-2);border-radius:6px;padding:10px 12px;margin-bottom:8px}
.addr small{display:block;color:var(--muted);font-size:12px;line-height:1.5}
.addr .ad{display:flex;align-items:center;gap:8px}
.addr code{flex:1;min-width:0;direction:ltr;text-align:left;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;word-break:break-all}
.addr.memo{border:1.5px solid var(--accent)}
.warn{background:rgba(229,72,77,.1);color:var(--bad);border-radius:6px;padding:10px 12px;font-size:12.5px;margin:10px 0}
.paybar .t small span{direction:ltr;unicode-bidi:isolate}

/* ===== v3: premium colour, alerts, picker, discount ===== */
body[data-pg="premium"]{--accent:var(--prem);--accent-soft:var(--prem-soft);--btn-glow:rgba(142,99,245,.5)}
@keyframes shakeX{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shakeX .45s}
.toast{display:flex;align-items:center;gap:10px;padding:11px 16px 13px 14px;border-radius:6px;background:var(--surface);color:var(--ink);box-shadow:0 18px 50px rgba(20,30,70,.28),0 0 0 1px var(--line);overflow:hidden;min-width:230px;max-width:min(92vw,420px);text-align:right;animation:toastIn .5s cubic-bezier(.2,1.4,.4,1) both;cursor:pointer}
.toast.bad{background:var(--surface);color:var(--ink);animation:toastIn .5s cubic-bezier(.2,1.4,.4,1) both,shakeT .5s .35s}
.toast.out{animation:toastOut .26s ease both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,30px) scale(.88)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,16px) scale(.94)}}
@keyframes shakeT{20%{transform:translate(calc(-50% - 6px),0)}40%{transform:translate(calc(-50% + 6px),0)}60%{transform:translate(calc(-50% - 4px),0)}80%{transform:translate(calc(-50% + 4px),0)}}
.toast .ti{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;flex:none}
.toast .ti svg{width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast .ti svg .pp{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .5s .2s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.toast.ok .ti{background:rgba(22,146,74,.14)}.toast.ok .ti svg{stroke:var(--ok)}
.toast.bad .ti{background:rgba(229,72,77,.14)}.toast.bad .ti svg{stroke:var(--bad)}
.toast.info .ti{background:var(--sky-soft)}.toast.info .ti svg{stroke:var(--sky)}
.toast .tt{font-weight:600;font-size:14px;line-height:1.5}
.toast .tpr{position:absolute;inset-inline:0;bottom:0;height:3px;opacity:.35;transform-origin:right;animation:tpr 3.4s linear forwards}
.toast.ok .tpr{background:var(--ok)}.toast.bad .tpr{background:var(--bad)}.toast.info .tpr{background:var(--sky)}
@keyframes tpr{to{transform:scaleX(0)}}
.mbg.closing{animation:fadeOut .22s both}
.mbg.closing .modal{animation:downOut .22s ease both}
@keyframes fadeOut{to{opacity:0}}
@keyframes downOut{to{opacity:0;transform:translateY(30px) scale(.97)}}
.modal .r{animation:rowIn .4s both}
.modal .r:nth-child(2){animation-delay:.08s}.modal .r:nth-child(3){animation-delay:.14s}.modal .r:nth-child(4){animation-delay:.2s}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}}
/* یادآوری مالکیت کارت — هشدار مهم است نه خطا، پس کهربایی است نه قرمز */
.notebox{display:flex;align-items:flex-start;justify-content:center;gap:10px;background:var(--note-bg);color:var(--note-fg);border:1px solid var(--note-line);border-radius:10px;padding:16px 18px;font-size:12.5px;font-weight:600;line-height:2;margin-bottom:16px}
.notebox .i{width:18px;height:18px;flex:none;margin-top:3.5px;stroke-width:1.9}
@media (max-width:430px){.notebox{padding:13px 14px;line-height:1.85;gap:8px}.notebox .i{margin-top:2.5px}}
/* وقتی زیر یک اینپوت می‌نشیند نباید بچسبد */
.f>.notebox{margin-top:14px;margin-bottom:0}
.notebox b{font-weight:800;letter-spacing:.4px}
.notebox a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* کارت بانکی ذخیره‌شده، به شکل کارت واقعی */
.cgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
.bnkc{position:relative;border-radius:10px;padding:15px 16px 13px;color:var(--bi,#fff);overflow:hidden;background:var(--bc);box-shadow:0 1px 2px rgba(27,35,64,.06),0 10px 26px rgba(27,35,64,.13)}
/* هایلایت و حلقه‌ی تزئینی؛ روی هر رنگ بانکی یکسان می‌نشیند */
.bnkc::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 42%,rgba(0,0,0,.22));pointer-events:none}
.bnkc::after{content:"";position:absolute;inset-inline-end:-46px;top:-60px;width:156px;height:156px;border-radius:50%;background:rgba(255,255,255,.1);pointer-events:none}
.bnkc>*{position:relative}
.bnkc-top{display:flex;align-items:center;gap:8px;min-height:22px;margin-bottom:15px}/* min-height تا کارت پیش‌فرض بخاطر بج بلندتر نشود */
.bnkc-chip{width:28px;height:21px;border-radius:4px;flex:none;background:linear-gradient(140deg,#ffe9a6,#f2b705);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.bnkc-chip::after{content:"";display:block;margin:6px auto 0;width:16px;height:9px;border:1px solid rgba(0,0,0,.22);border-radius:2px}
.bnkc-nm{font-size:13px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bnkc-def{display:inline-flex;align-items:center;gap:3px;background:color-mix(in srgb,var(--bi,#fff) 22%,transparent);border-radius:5px;padding:3px 8px;font-size:10.5px;font-weight:800;flex:none}
.bnkc-def .i{width:11px;height:11px;stroke-width:2.6}
.bnkc-num{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16.5px;font-weight:700;letter-spacing:1.4px;direction:ltr;text-align:left;margin-bottom:14px}
.bnkc-acts{display:flex;flex-wrap:wrap;gap:6px}
.bnkc-acts button{display:inline-flex;align-items:center;gap:4px;background:color-mix(in srgb,var(--bi,#fff) 16%,transparent);color:var(--bi,#fff);border-radius:6px;padding:6px 10px;font-size:11.5px;font-weight:700;font-family:inherit;transition:background .15s,transform .12s}
.bnkc-acts button:hover{background:color-mix(in srgb,var(--bi,#fff) 28%,transparent)}
.bnkc-acts button:active{transform:scale(.95)}
.bnkc-acts button .i{width:13px;height:13px;stroke-width:2.2}
.bnkc-acts .rm{background:rgba(0,0,0,.22)}
.bnkc-acts .rm:hover{background:rgba(255,80,85,.55)}
@media (max-width:430px){.cgrid{grid-template-columns:1fr}.bnkc-num{font-size:15px;letter-spacing:1px}}
/* در عرض‌های خیلی کم، چهار دکمه فقط با پدینگ کمتر در یک سطر جا می‌شوند */
@media (max-width:380px){.bnkc-acts{gap:5px}.bnkc-acts button{padding:6px 7px;font-size:11px;gap:3px}}

/* حالت خالی با توضیح، به‌جای یک جمله‌ی خشک */
.emptyc{text-align:center;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:30px 22px}
.emptyc .i{width:34px;height:34px;color:var(--muted);margin-bottom:10px}
.emptyc b{display:block;font-size:15px;margin-bottom:6px}
.emptyc span{display:block;color:var(--muted);font-size:12.5px;line-height:2;max-width:330px;margin:0 auto}
/* پنل سفید دور کل بخش مدیریت کارت‌ها */
.cardpanel{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:18px}
.cardpanel .emptyc{background:transparent;box-shadow:none;padding:24px 10px}
.cardadd-box{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.cardadd-t{font-size:15px;font-weight:700;margin:0 4px 14px}
.cardadd-box .f:last-of-type{margin-bottom:0}
@media (max-width:430px){.cardpanel{padding:14px}}

/* شماره شبا روی کارت — بدون گروه‌بندی چهارتایی، چون ۳۲ نویسه در عرض کارت جا نمی‌شد */
.bnkc-sh{display:flex;align-items:center;gap:6px;margin:-5px 0 12px}
.bnkc-sh b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11.5px;font-weight:700;letter-spacing:0;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.94}
.bnkc-sh button{display:grid;place-items:center;width:24px;height:24px;border-radius:5px;background:color-mix(in srgb,var(--bi,#fff) 16%,transparent);color:var(--bi,#fff);flex:none;transition:background .15s}
.bnkc-sh button:hover{background:color-mix(in srgb,var(--bi,#fff) 30%,transparent)}
.bnkc-sh button .i{width:12px;height:12px;stroke-width:2.2}
/* جای خالی شبا: دعوت به افزودن، هم‌ارتفاع با ردیف شبا */
.bnkc-shadd{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;margin:-5px 0 12px;height:26px;border:1px dashed color-mix(in srgb,var(--bi,#fff) 42%,transparent);border-radius:6px;color:var(--bi,#fff);font-size:11.5px;font-weight:700;font-family:inherit;opacity:.85;transition:background .15s,opacity .15s}
.bnkc-shadd:hover{background:color-mix(in srgb,var(--bi,#fff) 14%,transparent);opacity:1}
.bnkc-shadd .i{width:13px;height:13px;stroke-width:2.4}

/* دکمه‌ی افزودن کارت: خط‌چین به رنگ اکسنت تا «افزودن» بخواند، نه یک دکمه‌ی خاکستری خنثی */
.btn.addcard{background:var(--accent-soft);color:var(--accent);box-shadow:none;font-weight:700;border:1.5px dashed color-mix(in srgb,var(--accent) 42%,transparent)}
.btn.addcard:hover{filter:none;background:color-mix(in srgb,var(--accent) 16%,transparent);border-style:solid}
.btn.addcard .i{width:17px;height:17px;stroke-width:2.4}

/* نوار جمع‌وجور کارت‌ها در کیف پول */
.cardstrip{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:12px 16px}
.cardstrip .lb{font-size:12.5px;color:var(--muted);font-weight:600}
.cardstrip .cchip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border-radius:6px;padding:5px 10px;font-size:12px;font-weight:700}
.cardstrip .cchip i{width:9px;height:9px;border-radius:50%;background:var(--bc);flex:none}
.cardstrip .cchip small{color:var(--muted);font-weight:600;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px}
.cardstrip>a{margin-inline-start:auto;font-size:12.5px;color:var(--sky);font-weight:600}

/* انتخابگر کارت مقصد در برداشت */
.chips .ccpick{display:inline-flex;align-items:center;gap:6px;border:1.5px solid transparent}
.chips .ccpick i{width:9px;height:9px;border-radius:50%;background:var(--bc);flex:none}
.chips .ccpick small{color:var(--muted);font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.4px}
.chips .ccpick.sel{border-color:var(--bc);background:var(--surface-2)}
.chips .ccpick.sel small{color:var(--ink)}
.chips .ccadd{display:inline-flex;align-items:center;gap:4px;color:var(--sky);font-weight:700;font-size:12.5px;padding:5px 8px}
.chips .ccadd .i{width:14px;height:14px;stroke-width:2.4}
.hint.good{color:var(--ok)}
.btn.danger{background:var(--bad);box-shadow:0 6px 16px -6px rgba(220,63,69,.5)}
.alert-ic{position:relative;width:58px;height:58px;border-radius:6px;display:grid;place-items:center;margin:0 auto 12px;background:rgba(229,72,77,.12);color:var(--bad);animation:shakeX .6s .25s}
.alert-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.alert-ic::after{content:"";position:absolute;inset:0;border-radius:6px;border:2px solid var(--bad);opacity:0;animation:ping 1.6s ease-out .3s infinite}
@keyframes ping{from{transform:scale(1);opacity:.5}to{transform:scale(1.6);opacity:0}}
.ap{background:linear-gradient(180deg,var(--sky-soft),transparent 60%),var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:18px 14px 16px}
.ap.shake{animation:shakeX .45s}
.ap-top{display:flex;align-items:center;gap:8px}
.ap-mid{flex:1;min-width:0;text-align:center}
.ap-num{display:flex;align-items:center;justify-content:center;gap:8px}
.ap-st{width:34px;height:34px;flex:none;filter:drop-shadow(0 4px 10px rgba(245,178,27,.5));animation:bob2 5s ease-in-out infinite}
#ap-gram .ap-st{filter:drop-shadow(0 4px 10px rgba(0,152,234,.45))}
.ap-in{width:150px;max-width:100%;background:var(--surface-2);border:0;border-bottom:2px dashed color-mix(in srgb,var(--muted) 48%,transparent);border-radius:12px 12px 4px 4px;outline:0;text-align:center;font-size:42px;font-weight:800;letter-spacing:-1px;line-height:1.2;color:var(--ink);padding:4px 10px 2px;font-family:inherit;transition:background .15s,box-shadow .15s,border-color .15s}
.ap-in:focus{background:var(--accent-soft);border-bottom-color:transparent;box-shadow:0 0 0 2px var(--accent)}
.ap-in.bump{animation:bump .3s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(.88)}100%{transform:scale(1)}}
@keyframes apPulse{0%,100%{box-shadow:0 0 0 0 var(--accent-soft)}50%{box-shadow:0 0 0 7px var(--accent-soft)}}
.ap-in.hintpulse{animation:apPulse 1.3s ease-in-out 2}
/* راهنمای یک‌بارمصرف: بعد از اولین لمس عدد حذف می‌شود تا شلوغی دائمی نشود */
.ap-tap{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--accent);margin-top:9px}
.ap-tap .i{width:13px;height:13px;stroke-width:2.2}
.ap .stp{width:52px;height:52px;background:var(--surface-2);box-shadow:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ap-price{display:flex;align-items:baseline;justify-content:center;gap:7px;margin:12px 0 4px;flex-wrap:wrap}
.ap-price .lbl{color:var(--muted);font-size:12.5px}
.ap-price .nw{font-size:21px;font-weight:800}
.ap-price .nw.dis{color:var(--ok)}
.ap-price del{color:var(--muted);font-size:14px;animation:oldIn .5s both}
.ap-price .cur{color:var(--muted);font-size:12.5px}
.ap-quick{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px}
.ap-quick button{height:30px;padding:0 14px;border-radius:20px;background:var(--surface-2);font-weight:700;font-size:12.5px;color:var(--muted);direction:ltr;transition:background .15s,color .15s,transform .12s}
.ap-quick button:active{transform:scale(.93);background:var(--accent-soft);color:var(--accent)}
.rng{background:linear-gradient(to left,var(--accent) var(--p,10%),var(--line) var(--p,10%))}
.ap-chips{display:flex;gap:6px;margin-top:14px}
.ap .hint{margin-top:14px}
.cc{position:relative;flex:1 1 0;min-width:0;height:40px;border-radius:6px;background:var(--surface-2);font-weight:700;font-size:14px;transition:background .15s,color .15s,transform .12s}
.cc:active{transform:scale(.93)}
.cc.sel{background:var(--accent);color:var(--on-accent)}
.cc em{position:absolute;top:-8px;inset-inline-end:3px;font-style:normal;font-size:9.5px;font-weight:800;background:var(--ink);color:var(--bg);padding:0 5px;border-radius:4px;line-height:1.6}
@media (max-width:400px){
  .ap-top{gap:6px}
  .ap .stp{width:44px;height:44px;font-size:21px}
  .ap-num{gap:5px}
  .ap-st{width:26px;height:26px}
  .ap-in{width:112px;font-size:32px;padding:4px 6px}
}
.dtag{display:inline-block;background:rgba(22,146,74,.14);color:var(--ok);font-size:11px;font-weight:800;padding:0 7px;border-radius:6px;margin-inline-start:6px;line-height:1.6;animation:tagPop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes tagPop{from{transform:scale(.4);opacity:0}}
.paybar del.old{color:var(--muted);font-size:13px;font-weight:500;text-decoration:line-through;animation:oldIn .5s both}
@keyframes oldIn{from{opacity:0;transform:translateY(6px)}}
.paybar .save{color:var(--ok);font-weight:600;font-size:12px}
.paybar.sv{animation:glowSv 1.2s ease}
@keyframes glowSv{0%{box-shadow:0 0 0 0 rgba(22,146,74,.6),0 10px 40px rgba(20,30,70,.16)}60%{box-shadow:0 0 0 14px rgba(22,146,74,0),0 10px 40px rgba(20,30,70,.16)}}
.opt .pr.dis{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;color:var(--ok)}
.opt .pr del{color:var(--muted);font-size:11.5px;font-weight:500}
.tile .p .dis{color:var(--ok);font-weight:700}
.cpn{display:flex;align-items:center;gap:12px;background:rgba(22,146,74,.1);border-radius:6px;padding:10px 14px;animation:cpnIn .5s cubic-bezier(.3,1.4,.5,1) both}
@keyframes cpnIn{from{opacity:0;transform:scale(.94) translateY(8px)}}
.cpn .ck{width:30px;height:30px;border-radius:6px;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}
.cpn .ck .i{width:18px;height:18px;stroke-width:2.6}
.cpn .cpt{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.cpn .cpt b{font-family:ui-monospace,Menlo,Consolas,monospace;direction:ltr;font-size:14px}
.cpn .cpt small{color:var(--ok);font-size:12.5px;font-weight:600}

/* ===== referral dashboard ===== */
.reftabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:16px;padding-bottom:2px}
.reftabs button{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:12.5px;font-weight:700;color:var(--muted);background:var(--surface);box-shadow:var(--shadow);padding:8px 14px;border-radius:6px;white-space:nowrap}
.reftabs button.sel{color:var(--on-accent);background:var(--accent)}
.reftabs button .i{width:14px;height:14px}
.reftabs .tgico{width:16px;height:16px;flex:none}
.refsec{margin-bottom:30px}
.gate{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-inline-start:3px solid var(--accent);
  border-radius:6px;padding:14px 16px;box-shadow:var(--shadow)}
.gate-ic{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.gate-ic .i{width:19px;height:19px}
.gate-t{flex:1;min-width:0}
.gate-t b{display:block;font-size:14px;font-weight:700;line-height:1.7}
.gate-t small{display:block;font-size:12px;color:var(--muted);line-height:1.7}
.gate .btn{flex:none}
/* کارت موجودی ایردراپ + سه راه برداشت */
.adbal{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:16px 16px 14px}
.adbal-t{text-align:center;margin-bottom:16px}
.adbal-l{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px}
.adbal-v{display:inline-flex;align-items:center;gap:7px;font-size:30px;font-weight:800;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--ink)}
.adbal-v .i{color:#f5b21b}
.adbal-v .i{width:24px;height:24px;fill:currentColor;stroke:none}
.adbal-v em{font-style:normal;font-size:14px;font-weight:700;align-self:flex-end;margin-bottom:5px}
.adbal-s{display:block;font-size:12.5px;color:var(--muted);margin-top:5px}
.adbal-acts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.adact{display:flex;align-items:center;justify-content:center;gap:8px;text-align:start;padding:9px 11px;border:1.5px solid var(--line);border-radius:6px;background:var(--surface-2);font-family:inherit;transition:border-color .15s,background .15s,transform .12s}
.adact:hover{border-color:var(--accent);background:var(--accent-soft)}
.adact:active{transform:scale(.97)}
.adact-ic{width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.adact-ic .i{width:15px;height:15px}
.adact-t b{display:block;font-size:12px;font-weight:700;line-height:1.5}
.adact-t small{display:block;font-size:10px;color:var(--muted);line-height:1.5}
.adact.off{opacity:.5}
.adact.off:hover{border-color:var(--line);background:var(--surface-2)}
.adact.off .adact-ic{background:var(--surface-2);color:var(--muted)}
@media (max-width:480px){.adbal-acts{grid-template-columns:1fr}.adact{justify-content:flex-start;gap:10px;padding:10px 12px}.adact-t{flex:1;min-width:0}}
.btn.dis-btn{background:var(--surface-2);color:var(--muted);box-shadow:none;gap:5px}
.btn.dis-btn .i{width:14px;height:14px}
@media (max-width:520px){
  .gate{flex-wrap:wrap}
  .gate .btn{width:100%}
}
.refsec-h{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 10px}
.refsec-h h2{font-size:15px;font-weight:700}
.refsec-h small{font-size:12px;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat-card{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:9px 6px;text-align:center}
.stat-card .v{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.stat-card .l{font-size:9.5px;color:var(--muted);margin-top:2px;line-height:1.4}
@media (max-width:420px){.stat-grid{grid-template-columns:repeat(2,1fr)}}
.stat-card .v.ok{color:var(--ok)}
.reflink{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:14px 16px;margin-bottom:10px}
.reflink code{display:block;direction:ltr;text-align:left;font-size:12.5px;background:var(--surface-2);border-radius:6px;padding:10px 12px;margin-bottom:10px;overflow-x:auto;white-space:nowrap}
.reflink .acts{display:flex;gap:8px}
.reflink .acts .btn{flex:1;padding:0 8px}
.funnel{display:flex;flex-direction:column;align-items:stretch}
.funnel-step{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:13px 16px;display:flex;justify-content:space-between;align-items:center}
.funnel-step b.cnt{font-size:16px;font-weight:800}
.funnel-arrow{display:flex;align-items:center;gap:6px;padding:6px 0 6px 16px;color:var(--muted)}
.funnel-arrow .i{width:14px;height:14px}
.funnel-arrow .pct{font-size:11.5px;font-weight:700;color:var(--accent)}
.lvl-card{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:16px}
.lvl-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.lvl-name{font-size:17px;font-weight:800}
.lvl-pct{font-size:20px;font-weight:800;color:var(--accent)}
.lvl-sub{font-size:12px;color:var(--muted);margin-bottom:12px}
.prog{height:8px;border-radius:6px;background:var(--line);overflow:hidden}
.prog b{display:block;height:100%;border-radius:6px;background:var(--accent);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.lvl-ladder{display:flex;justify-content:space-between;margin-top:14px;gap:2px}
.lvl-ladder span{font-size:9.5px;color:var(--muted);text-align:center;flex:1;padding-top:6px;border-top:2px solid var(--line);position:relative}
.lvl-ladder span.done{color:var(--accent);border-top-color:var(--accent);font-weight:700}
.lvl-card.lv-silver .lvl-pct{color:var(--k-silver)}
.lvl-card.lv-silver .prog b{background:var(--k-silver)}
.lvl-card.lv-silver .lvl-ladder span.done{color:var(--k-silver);border-top-color:var(--k-silver)}
.lvl-card.lv-gold .lvl-pct{color:var(--k-stars)}
.lvl-card.lv-gold .prog b{background:var(--k-stars)}
.lvl-card.lv-gold .lvl-ladder span.done{color:var(--k-stars);border-top-color:var(--k-stars)}
.lvl-card.lv-diamond .lvl-pct{color:var(--accent)}
.lvl-card.lv-diamond .prog b{background:var(--accent)}
.lvl-card.lv-diamond .lvl-ladder span.done{color:var(--accent);border-top-color:var(--accent)}
.vbonus{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:16px;margin-top:12px;flex-wrap:wrap}
.vbonus .vb-b{text-align:center}
.vbonus .vb-b b{display:block;font-size:17px;font-weight:800}
.vbonus .vb-b small{font-size:11px;color:var(--muted)}
.vbonus .vb-b.plus b{color:var(--ok)}
.vbonus .vb-b.final b{color:var(--accent);font-size:20px}
.vbonus .vb-plus{color:var(--muted);font-size:16px;font-weight:800}
.vbonus.off .vb-b.plus b{color:var(--muted)}
.refbal{background:linear-gradient(135deg,var(--accent-soft),var(--surface) 70%);border-radius:6px;box-shadow:var(--shadow);padding:18px 20px}
.refbal .l{font-size:12.5px;color:var(--muted)}
.refbal .v{font-size:26px;font-weight:800;margin:4px 0 14px}
.refbal .acts{display:flex;gap:8px;flex-wrap:wrap}
/* min-width باید از خود متن بزرگ‌تر باشد وگرنه دکمه‌ها متن را می‌برند */
.refbal .acts .btn{flex:1 1 170px;min-width:170px;padding-inline:12px}
@media (max-width:420px){.refbal .acts .btn{flex:1 1 100%;min-width:0}}
.rtable-wrap{overflow-x:auto}
.rtable{width:100%;border-collapse:collapse;background:var(--surface);border-radius:6px;overflow:hidden;box-shadow:var(--shadow)}
.rtable th{font-size:11px;color:var(--muted);font-weight:600;text-align:right;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.rtable td{font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
.rtable tr:last-child td{border-bottom:0}
.rtable td b{font-weight:700}
@media (max-width:680px){
  .rtable,.rtable thead,.rtable tbody{display:block;width:100%}
  .rtable thead{display:none}
  .rtable tbody{display:flex;flex-direction:column;gap:8px}
  .rtable tr{display:flex;flex-wrap:wrap;align-items:center;background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:12px 14px;column-gap:10px;row-gap:3px}
  .rtable td{display:none;border:0;padding:0;white-space:nowrap}
  .rtable td.c-title{display:block;flex:1 1 auto;min-width:0;font-weight:700;font-size:13.5px;order:1;overflow:hidden;text-overflow:ellipsis}
  .rtable td.c-status{display:block;flex:none;order:2}
  .rtable td.c-sub{display:block;flex:1 1 auto;min-width:0;color:var(--muted);font-size:11.5px;order:3}
  .rtable td.c-amt{display:block;flex:none;font-weight:800;font-size:13px;order:4}
}
.lb-list{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:2px 16px}
.lb-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.lb-row:last-child{border-bottom:0}
.lb-row.me{background:var(--accent-soft);margin:0 -12px;padding-inline:12px;border-radius:6px;border-bottom-color:transparent}
.lb-rank{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:12px;font-weight:800;background:var(--surface-2);color:var(--muted)}
.lb-rank.g1{background:#f5c451;color:#5a3d00}
.lb-rank.g2{background:#cfd6e2;color:#33404f}
.lb-rank.g3{background:#e2a86c;color:#4a2c05}
.lb-row .tx{flex:1;min-width:0}
.lb-row .tx b{display:block;font-weight:700;font-size:13.5px}
.lb-row .tx small{display:block;color:var(--muted);font-size:11.5px}
.lb-row .end{text-align:left;flex:none}
.lb-row .end b{display:block;font-weight:800;font-size:13.5px;color:var(--ok)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.badge{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:14px 10px;text-align:center}
.badge.locked{opacity:.6}
.badge .bi{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;margin:0 auto 8px;background:var(--accent-soft);color:var(--accent)}
.badge.locked .bi{background:var(--surface-2);color:var(--muted)}
.badge .n{font-size:11.5px;font-weight:700;margin-bottom:6px}
.badge .prog{margin-top:2px}
.badge .prog-t{font-size:9.5px;color:var(--muted);margin-top:4px}
.campaign{position:relative;overflow:hidden;background:linear-gradient(135deg,var(--accent-soft),var(--surface) 65%);border-radius:6px;box-shadow:var(--shadow);padding:18px}
.campaign .top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px;gap:10px}
.campaign .top b{font-size:15px;font-weight:800}
.campaign .top small{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.campaign .reward{flex:none;background:var(--accent);color:var(--on-accent);font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:6px;white-space:nowrap}
.campaign .cnt{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-top:6px}
.feed{display:flex;flex-direction:column}
.feed-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:0}
.feed-item .fi{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--sky-soft);color:var(--sky)}
.feed-item .fi .i{width:16px;height:16px}
.feed-item.k-purchase .fi,.feed-item.k-commission .fi{background:var(--k-sell-bg);color:var(--k-sell)}
.feed-item.k-achievement .fi,.feed-item.k-levelup .fi{background:var(--k-stars-bg);color:var(--k-stars)}
.feed-item .tx{flex:1;min-width:0;font-size:12.5px;line-height:1.6}
.feed-item .tx small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.announce{background:var(--surface);border-radius:6px;box-shadow:var(--shadow);padding:4px 16px}
.announce-card{padding:16px 0;border-bottom:1px solid var(--line)}
.announce-card:last-child{border-bottom:0}
.announce-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.announce-h b{font-size:13.5px;font-weight:700}
.announce-card p{font-size:12.5px;color:var(--muted);line-height:2;margin-bottom:8px}
.announce-card .dt{font-size:11px;color:var(--muted)}
.qrbox{width:180px;height:180px;margin:0 auto;border-radius:6px;overflow:hidden;display:grid;grid-template-columns:repeat(11,1fr);grid-template-rows:repeat(11,1fr);background:#fff;padding:10px;box-shadow:var(--shadow)}
.qrbox i{background:#1b2340}
.qrbox i.off{background:transparent}

/* ===== mobile ===== */
@media (max-width:900px){
  .dtop{display:none}
  .app{padding:0;gap:0}
  .side{position:fixed;inset-block:0;inset-inline-start:0;z-index:30;transform:translateX(108%);visibility:hidden;transition:transform .25s ease,visibility 0s .25s;width:280px;height:100dvh;top:0;border-radius:26px 0 0 26px;padding-top:calc(24px + env(safe-area-inset-top,0px));padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  body.open .side{transform:none;visibility:visible;transition:transform .25s ease,visibility 0s}
  body.open .scrim{display:block;position:fixed;inset:0;background:rgba(6,10,24,.5);z-index:25}
  .side .me{display:none}
  .top{display:flex;align-items:center;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top,0px)) 18px 10px;position:sticky;top:0;z-index:6;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
  body{padding-top:0}
  .top .brand{padding:0;font-size:19px}
  .top .brand .bname{display:none}
  .top .r{display:flex;align-items:center;gap:8px}
  .top .chip{display:flex;align-items:center;gap:6px;background:var(--surface);box-shadow:var(--shadow);border-radius:6px;padding:0 14px;height:38px;font-weight:700;font-size:13.5px}
  .top .chip .i{width:16px;height:16px;color:var(--accent)}
  .top .round{background:var(--surface);box-shadow:var(--shadow)}
  .page{padding:10px 18px calc(110px + env(safe-area-inset-bottom,0px))}
  h1.pt{font-size:23px}
  .wallet .wn{font-size:38px}
  .orb{width:120px}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;inset-inline:12px;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:20;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:24px;padding:6px;box-shadow:0 10px 40px rgba(20,30,70,.18),0 0 0 1px var(--line)}
  .tabbar a,.tabbar button{display:flex;flex-direction:column;align-items:center;gap:1px;font-size:11px;font-weight:600;color:var(--muted);padding:6px 0 5px;border-radius:18px}
  .tabbar .i{width:23px;height:23px}
  .tabbar .on{color:var(--ink);background:var(--accent-soft)}
  .tabbar .on .i{color:var(--accent)}
  .paybar{bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:auto;top:calc(78px + env(safe-area-inset-top,0px))}
  @keyframes toastIn{from{opacity:0;transform:translate(-50%,-30px) scale(.88)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
  @keyframes toastOut{to{opacity:0;transform:translate(-50%,-16px) scale(.94)}}
  .mbg{align-items:end;padding:0}
  .modal{max-width:none;border-radius:6px 6px 0 0;padding-bottom:calc(26px + env(safe-area-inset-bottom,0px))}
  .modal::before{content:"";display:block;width:38px;height:4px;border-radius:4px;background:var(--line);margin:-10px auto 16px}
}
@media (max-width:380px){ .tile .n{font-size:15px} .paybar .btn{min-width:112px} .top .r{gap:6px} .top .chip{padding:0 10px;gap:4px;font-size:12.5px} .chips{font-size:11px;gap:4px} .chips button{padding:3px 8px;font-size:10.5px} .trust{gap:4px} .trust span{padding:3px 7px;font-size:10px;gap:3px} .trust .i{width:12px;height:12px} .ap-price{gap:4px} .ap-price .nw{font-size:18px} .ap-price del{font-size:12px} .ap-price .cur{font-size:12px} .dtag{margin-inline-start:2px;padding:0 5px;font-size:10px} }
/* گوشی‌های خیلی باریک (iPhone SE و پایین‌تر): نوار بالا جا نمی‌شد و دکمه تم بریده می‌شد */
@media (max-width:345px){
  .top{padding-inline:12px}
  .top .r{gap:5px}
  .top .chip{padding:0 8px;gap:4px;font-size:12px;height:36px}
  .top .round{width:34px;height:34px}
  .top .round .i{width:18px;height:18px}
  .page{padding-inline:14px}
  .paybar{padding-inline:14px}
  .paybar .btn{min-width:104px;padding-inline:12px;font-size:14px}
}
/* هدف لمسی: چند دکمه/لینک زیر ۳۶px بودند و روی موبایل سخت زده می‌شدند.
   padding با margin منفی خنثی می‌شود تا چیدمان تکان نخورد. */
@media (max-width:900px){
  .back{padding:7px 6px;margin-inline-start:-6px;margin-bottom:4px}
  .sec-h a,.sec-h button{padding:8px 6px;margin:-8px -6px}
  .link{padding:6px 4px;margin:-6px -4px;display:inline-block}
  .ap-quick button{height:36px;padding:0 15px}
  .tg::before{content:"";position:absolute;inset:-8px -4px}/* فقط ناحیه لمس، ظاهر دست‌نخورده */
  .top .brand{padding:6px;margin:-6px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* ===== حالت بارگذاری اولیه (پیش از رسیدن پاسخ سرور) ===== */
.boot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:52vh;text-align:center}
.boot p{margin:0;font-size:13.5px;color:var(--muted)}
.boot-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:bootspin .8s linear infinite}
@keyframes bootspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.boot-spin{animation-duration:2s}}
/* لینک متنی داخل پنل (قوانین، حریم خصوصی) */
.foot a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
.foot a:hover{color:var(--accent)}

/* ===== پس‌زمینه‌ی صفحه روی html به‌جای body =====
   وقتی body پس‌زمینه دارد، مرورگر آن را به canvas منتقل می‌کند و هنگام
   «تعویض زنده‌ی تم» (بدون ریلود) رنگ قبلی باقی می‌ماند. با گذاشتن آن
   روی html و با مقدار صریح، تعویض تم بلافاصله اعمال می‌شود. */
html{
  background-color:#eef2f9;
  background-image:radial-gradient(900px 420px at 50% -120px,#e3eafa,transparent 70%);
  background-repeat:no-repeat;
  transition:background-color .3s
}
html[data-theme="dark"]{
  background-color:#0b1020;
  background-image:radial-gradient(900px 420px at 50% -120px,#16204a,transparent 70%)
}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]){
    background-color:#0b1020;
    background-image:radial-gradient(900px 420px at 50% -120px,#16204a,transparent 70%)
  }
}
body{background-color:transparent;background-image:none}