/* =====================================================================
   نقره‌ای · NOQREI · سیستم طراحی
   حس: ابزار دقیق. سفید غالب، فولاد سرد، سبز پاتینا برای رشد.
   ===================================================================== */

/* ---------- توکن‌ها ---------- */
:root{
  --ground:#EDEFF2;
  --ground-2:#E4E8ED;
  --surface:#FFFFFF;
  --surface-2:#F6F8FA;
  --surface-3:#EFF2F5;
  --ink:#0D1116;
  --ink-2:#4E5762;
  --ink-3:#5C6874;
  --line:#DDE2E8;
  --line-2:#C9D0D8;
  --steel:#5E6A77;
  --steel-deep:#3F4A55;
  --patina:#2C6A5C;
  --patina-soft:#E4F0EC;
  --oxide:#A8433D;
  --oxide-soft:#F7E8E7;
  --amber:#8A6520;
  --amber-soft:#F7EFDC;
  --tether:#197A5C;
  --on-patina:#FFFFFF;
  --on-oxide:#FFFFFF;

  --metal-hi:#FFFFFF;
  --metal-lo:#A4AFBB;
  --metal-mid:#D6DDE4;
  --disc-base:#C9D2DB;
  --ring-ink:rgba(83,96,110,.20);
  --sheen-a:rgba(255,255,255,.92);
  /* برقِ ملایمِ سطح‌های برجسته. از sheen-a کم‌جان‌تر است تا متن روی لبهٔ بالا گم نشود */
  --raise-hi:rgba(255,255,255,.72);
  --sheen-b:rgba(74,86,99,.30);
  --blend:overlay;

  --sh-1:0 1px 2px rgba(13,17,22,.055), 0 10px 26px -14px rgba(13,17,22,.16);
  --sh-2:0 2px 5px rgba(13,17,22,.05), 0 36px 70px -32px rgba(13,17,22,.30);
  --glass:rgba(237,239,242,.72);

  --fa:'Vazirmatn', ui-sans-serif, system-ui, 'Segoe UI', Tahoma, sans-serif;
  --la:'Sora', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;

  --r-xs:10px; --r-sm:14px; --r-md:20px; --r-lg:28px; --r-xl:40px;
  --pad:clamp(16px, 5vw, 40px);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.28,1);

  --tkt-bg:#EEF4FA; --tkt-line:#9FB2C6; --tkt-ink:#1B2A38; --tkt-mut:#55697C;
  --thm-track:#DFE4EA;
  --thm-line:#C3CBD4;
  --thm-knob:#FFFFFF;
  --thm-knob-line:#B9C2CC;
  --thm-icn:#3F4A55;
  --thm-in:rgba(13,17,22,.10);
  --thm-sh:rgba(13,17,22,.28);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#090C10; --ground-2:#0E1217; --surface:#141A21; --surface-2:#1A2129; --surface-3:#1F262F;
    --ink:#ECF1F5; --ink-2:#A2ADB9; --ink-3:#98A3B0;
    --line:#222A33; --line-2:#2F3945;
    --steel:#9AA8B7; --steel-deep:#C6D1DC;
    --patina:#4FB392; --patina-soft:#0F2B25;
    --oxide:#E37B73; --oxide-soft:#2E1614;
    --amber:#D8B268; --amber-soft:#2B2211;
    --tether:#3FBF95;
  --on-patina:#04100C; --on-oxide:#1C0A09;
    --metal-hi:#F6FAFD; --metal-lo:#4C5762; --metal-mid:#8F9BA8;
    --disc-base:#2A333D; --ring-ink:rgba(196,210,224,.13);
    --sheen-a:rgba(255,255,255,.55); --sheen-b:rgba(0,0,0,.42); --blend:soft-light;
  --raise-hi:rgba(255,255,255,.075);
    --raise-hi:rgba(255,255,255,.075);
    --sh-1:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
    --sh-2:0 2px 6px rgba(0,0,0,.45), 0 40px 80px -36px rgba(0,0,0,.85);
    --glass:rgba(9,12,16,.7);

    --tkt-bg:#151C25; --tkt-line:#43535F; --tkt-ink:#E7EEF5; --tkt-mut:#9EAFBF;
    --tkt-bg:#151C25; --tkt-line:#43535F; --tkt-ink:#E7EEF5; --tkt-mut:#9EAFBF;
  --thm-track:#2A333D; --thm-line:#414D5A; --thm-knob:#D8E1EA; --thm-knob-line:#8F9BA8;
    --thm-icn:#141A21; --thm-in:rgba(0,0,0,.5); --thm-sh:rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --ground:#090C10; --ground-2:#0E1217; --surface:#141A21; --surface-2:#1A2129; --surface-3:#1F262F;
  --ink:#ECF1F5; --ink-2:#A2ADB9; --ink-3:#98A3B0;
  --line:#222A33; --line-2:#2F3945;
  --steel:#9AA8B7; --steel-deep:#C6D1DC;
  --patina:#4FB392; --patina-soft:#0F2B25;
  --oxide:#E37B73; --oxide-soft:#2E1614;
  --amber:#D8B268; --amber-soft:#2B2211;
  --tether:#3FBF95;
  --on-patina:#04100C; --on-oxide:#1C0A09;
  --metal-hi:#F6FAFD; --metal-lo:#4C5762; --metal-mid:#8F9BA8;
  --disc-base:#2A333D; --ring-ink:rgba(196,210,224,.13);
  --sheen-a:rgba(255,255,255,.55); --sheen-b:rgba(0,0,0,.42); --blend:soft-light;
  --raise-hi:rgba(255,255,255,.075);
  --sh-1:0 1px 2px rgba(0,0,0,.4), 0 12px 30px -16px rgba(0,0,0,.7);
  --sh-2:0 2px 6px rgba(0,0,0,.45), 0 40px 80px -36px rgba(0,0,0,.85);
  --glass:rgba(9,12,16,.7);

  --thm-track:#2A333D; --thm-line:#414D5A; --thm-knob:#D8E1EA; --thm-knob-line:#8F9BA8;
  --thm-icn:#141A21; --thm-in:rgba(0,0,0,.5); --thm-sh:rgba(0,0,0,.6);
}

/* ---------- پایه ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* دو بار زدن روی صفحه دیگر زوم نمی‌کند. دو انگشتی هنوز کار می‌کند. */
  touch-action:manipulation}
body{
  margin:0; direction:rtl; background:var(--ground); color:var(--ink);
  font-family:var(--fa); font-size:16px; line-height:1.75; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden; min-height:100vh;
}
img,svg,video{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;
  touch-action:manipulation}
a,label,summary,input[type="button"],input[type="submit"]{touch-action:manipulation}
input,select,textarea{font:inherit; color:inherit; touch-action:manipulation}
/* آیفون روی هر ورودی کوچک‌تر از شانزده پیکسل خودش صفحه را زوم می‌کند.
   روی صفحه‌های لمسی همه را شانزده می‌گذاریم تا تصویر سر جایش قفل بماند. */
@media (pointer: coarse){
  input,select,textarea{font-size:16px}
}
:focus-visible{outline:2px solid var(--steel); outline-offset:3px; border-radius:6px}
hr{border:0; border-top:1px solid var(--line); margin:24px 0}
.skip{position:absolute; width:1px; height:1px; overflow:hidden; top:0; inset-inline-start:0;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; z-index:200;
  background:var(--surface); padding:0; border-radius:0 0 var(--r-sm) 0}
.skip:focus{width:auto; height:auto; clip:auto; clip-path:none; padding:10px 16px}

.lat{font-family:var(--la); direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.num{font-family:var(--la); font-variant-numeric:tabular-nums; direction:ltr;
  unicode-bidi:isolate; letter-spacing:-.01em}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.hide{display:none !important}
@media (max-width:640px){ .hide-sm{display:none !important} }

/* ---------- چیدمان ---------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.wrap--narrow{max-width:720px}
.sec{padding-block:clamp(40px, 8vw, 108px)}
.sec--tight{padding-block:clamp(28px, 5vw, 56px)}
.sec-head{display:flex; flex-direction:column; gap:16px; margin-bottom:clamp(28px,5vw,52px)}
.stack{display:flex; flex-direction:column; gap:16px}
.stack--sm{gap:9px}
.stack--lg{gap:28px}
.row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.row--between{justify-content:space-between}
.row--end{justify-content:flex-end}
.spacer{flex:1}
.grid{display:grid; gap:14px}
.grid > *{min-width:0}
@media (min-width:620px){ .grid--2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:620px){ .grid--3{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .grid--3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:620px){ .grid--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:980px){ .grid--4{grid-template-columns:repeat(4,1fr)} }
.divider{height:1px; background:var(--line); border:0; margin-block:18px}

/* ---------- تایپوگرافی ---------- */
h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.18; letter-spacing:-.022em; text-wrap:balance}
h1{font-size:clamp(2.1rem, 6.6vw, 4.6rem); font-weight:900; line-height:1.06; letter-spacing:-.038em}
h2{font-size:clamp(1.6rem, 4.4vw, 2.9rem); line-height:1.14; letter-spacing:-.03em}
h3{font-size:clamp(1.05rem, 2.4vw, 1.35rem); font-weight:700}
h4{font-size:1rem; font-weight:700}
p{margin:0}
.lede{font-size:clamp(1rem,2.2vw,1.22rem); color:var(--ink-2); line-height:1.85; max-width:58ch}
.eyebrow{
  font-family:var(--la); font-size:11px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:10px; direction:ltr;
}
.eyebrow::after{content:''; flex:1; height:1px; background:var(--line-2); opacity:.8}
.prose{max-width:70ch; line-height:2.1; color:var(--ink-2)}
.prose h2,.prose h3{color:var(--ink); margin:34px 0 12px}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{padding-inline-start:22px; margin-bottom:18px}
.prose li{margin-bottom:8px}
.prose a{color:var(--patina); text-decoration:underline; text-underline-offset:3px}

/* ---------- ناوبری ---------- */
.nav{
  position:sticky; top:0; z-index:60; background:var(--glass);
  -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent; transition:border-color .3s var(--ease);
}
.nav.is-stuck{border-bottom-color:var(--line)}
.nav__in{max-width:var(--maxw); margin-inline:auto; padding:11px var(--pad);
  display:flex; align-items:center; gap:12px}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0; min-width:0}
.brand__seal{width:34px; height:34px; flex-shrink:0; border-radius:50%}
.brand__name{font-weight:900; font-size:1.1rem; letter-spacing:-.03em; display:block; line-height:1.2}
.brand__sub{font-family:var(--la); font-size:9px; letter-spacing:.22em; color:var(--ink-3);
  display:block; line-height:1; margin-top:2px; direction:ltr; font-weight:500}
.nav__links{display:none; gap:2px; margin-inline-start:14px}
.nav__links a{padding:7px 12px; border-radius:999px; font-size:.9rem; font-weight:500;
  color:var(--ink-2); transition:background .18s var(--ease), color .18s var(--ease)}
.nav__links a:hover{background:var(--surface); color:var(--ink)}
.nav__act{margin-inline-start:auto; display:flex; align-items:center; gap:8px; min-width:0}
@media (max-width:520px){
  .nav__in{gap:8px}
  .nav__act{gap:5px}
  .nav__act .btn--quiet{display:none}          /* ورود در کشوی منو هست */
  .nav__act .btn{padding:9px 13px; font-size:.86rem}
  .brand__sub{display:none}
}
@media (max-width:360px){
  .nav__act .btn--metal{padding:8px 11px; font-size:.8rem}
  .brand__name{font-size:1rem}
}

@media (min-width:900px){ .nav__links{display:flex} }
.nav__burger{width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  display:grid; place-content:center; gap:4px; background:var(--surface)}
.nav__burger span{display:block; width:15px; height:1.6px; background:var(--ink); border-radius:2px}
@media (min-width:900px){ .nav__burger{display:none} }

/* =====================================================================
   منوی حساب
   دکمهٔ گرد آدمک در نوار بالا، و ورقه‌ای که زیرش باز می‌شود.
   ===================================================================== */
.acct{position:relative; flex:0 0 auto}
.acct__btn{width:38px; height:38px; border-radius:50%; padding:0;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px var(--thm-in);
  transition:transform .16s var(--ease), border-color .18s var(--ease)}
.acct__btn svg{width:20px; height:20px}
.acct__btn:active{transform:scale(.9)}
.acct__btn[aria-expanded="true"]{border-color:var(--ink); box-shadow:0 0 0 3px var(--sheen-a)}
.acct__btn:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* در راست به چپ، دکمه سمت چپ نوار است، پس ورقه از همان‌جا به راست باز می‌شود */
.acct__pop{position:absolute; top:calc(100% + 10px); inset-inline-end:0;
  width:min(320px, calc(100vw - 24px)); z-index:60;
  display:flex; flex-direction:column; gap:9px; padding:11px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px;
  box-shadow:var(--sh-2)}
.acct__pop[hidden]{display:none !important}

/* سربرگ: نوار فولاد براش‌خورده */
.acct__head{display:flex; align-items:center; gap:11px; padding:11px 12px; border-radius:15px;
  background:
    linear-gradient(102deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px),
    linear-gradient(146deg, #F7F9FB 0%, #D9E2EC 28%, #FDFEFE 48%, #C3CDD8 70%, #EEF3F8 100%);
  border:1px solid #B7C3CF; box-shadow:inset 0 1px 0 #fff}
.acct__av{flex:0 0 auto; width:38px; height:38px; border-radius:12px; display:grid;
  place-items:center; font-weight:800; font-size:1.05rem; color:#F4F7FA;
  background:linear-gradient(150deg,#4A5563,#1B222B);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 2px 6px rgba(16,24,40,.3)}
.acct__id{display:flex; flex-direction:column; gap:1px; min-width:0}
.acct__id b{font-size:.9rem; font-weight:800; color:#1B222B}
.acct__id em{font-style:normal; font-size:.72rem; font-weight:500; color:#3D4653;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; direction:ltr; text-align:start}

/* میان‌برهای حساب، سه‌تایی */
.acct__grid{display:grid; grid-template-columns:repeat(3,1fr); gap:7px}
.acct__chip{display:flex; flex-direction:column; align-items:center; gap:7px;
  padding:12px 8px; border-radius:15px; text-align:center;
  border:1px solid var(--line); background:var(--surface-2);
  font-size:.8rem; font-weight:700; color:var(--ink);
  transition:border-color .16s var(--ease), transform .16s var(--ease)}
.acct__chip:active{transform:scale(.97)}
.acct__chip__i{width:34px; height:34px; border-radius:11px; display:grid; place-items:center;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink)}
.acct__chip__i svg{width:17px; height:17px}
.acct__chip{font-size:.72rem; padding:11px 5px; gap:6px}
.acct__chip > span:last-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  max-width:100%}
.acct__chip--kyc.is-ok .acct__chip__i{background:var(--patina-soft); border-color:var(--patina);
  color:var(--patina)}
.acct__chip--kyc.is-wait .acct__chip__i{background:var(--amber-soft); border-color:var(--amber);
  color:var(--amber)}

/* دعوت دوستان: شکل بلیت با بریدگی دو طرف */
.acct__tkt{position:relative; display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding:11px 13px; border-radius:15px; overflow:hidden;
  border:1px dashed var(--tkt-line, #9FB2C6); background:var(--tkt-bg, #EEF4FA);
  transition:transform .16s var(--ease)}
.acct__tkt:active{transform:scale(.985)}
.acct__tkt::before,.acct__tkt::after{content:''; position:absolute; width:15px; height:15px;
  border-radius:50%; background:var(--surface); border:1px dashed var(--tkt-line, #9FB2C6)}
.acct__tkt::before{inset-inline-start:-8px; top:50%; transform:translateY(-50%)}
.acct__tkt::after{inset-inline-end:-8px; top:50%; transform:translateY(-50%)}
.acct__tkt__l{display:flex; align-items:center; gap:10px; min-width:0}
.acct__tkt__c{flex:0 0 auto; width:34px; height:34px; border-radius:50%; display:grid;
  place-items:center; color:#20303F;
  background:linear-gradient(150deg,#FFFFFF,#C7D4E1);
  box-shadow:inset 0 1px 0 #fff, 0 2px 6px rgba(16,24,40,.2)}
.acct__tkt__c svg{width:18px; height:18px}
.acct__tkt__t{display:flex; flex-direction:column; gap:1px; min-width:0}
.acct__tkt__t b{font-size:.85rem; font-weight:800; color:var(--tkt-ink, #1B2A38)}
.acct__tkt__t em{font-style:normal; font-size:.68rem; font-weight:500; line-height:1.4;
  color:var(--tkt-mut, #55697C)}
.acct__tkt__r{flex:0 0 auto; color:var(--tkt-mut, #55697C)}
.acct__tkt__r svg{width:15px; height:15px}
html[dir="ltr"] .acct__tkt__r svg{transform:scaleX(-1)}

/* پای پنجره: برچسب تم، کلید گرد، و دکمهٔ پاور. بدون هیچ قابی */
.acct__foot{display:flex; align-items:center; gap:10px; padding:2px 2px 0}
.acct__foot__k{flex:1 1 auto; min-width:0; font-size:.85rem; font-weight:700; color:var(--ink)}
.acct__f{margin:0; flex:0 0 auto}

/* خروج، همان دکمهٔ پاورِ کوچک */
.acct__pwr{position:relative; width:40px; height:40px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; padding:0; font:inherit;
  color:var(--oxide);
  background:var(--surface);
  background-image:linear-gradient(158deg,var(--raise-hi) 0%,transparent 52%);
  border:1px solid var(--line-2);
  box-shadow:0 4px 10px -4px rgba(16,24,40,.45),
             inset 0 1px 0 var(--sheen-a),
             inset 0 -2px 5px rgba(16,24,40,.10);
  -webkit-tap-highlight-color:transparent;
  transition:transform .14s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease)}
.acct__pwr svg{width:18px; height:18px}
.acct__pwr:hover{color:var(--oxide); border-color:var(--oxide)}
.acct__pwr:active{transform:translateY(1px) scale(.96);
  box-shadow:0 1px 3px -1px rgba(16,24,40,.4), inset 0 2px 6px rgba(16,24,40,.22)}

/* ---------- برجستگی: چیزها باید دست‌زدنی به نظر برسند ---------- */
.acct__chip{
  background-image:linear-gradient(166deg,var(--raise-hi) 0%,transparent 54%);
  box-shadow:0 5px 12px -6px rgba(16,24,40,.42),
             inset 0 1px 0 var(--sheen-a),
             inset 0 -2px 6px rgba(16,24,40,.10);
  border-color:var(--line-2)}
.acct__chip:hover{border-color:var(--steel)}
.acct__chip:active{transform:translateY(1px) scale(.97);
  box-shadow:0 1px 3px -1px rgba(16,24,40,.4), inset 0 2px 7px rgba(16,24,40,.2)}
.acct__chip__i{
  background-image:linear-gradient(160deg,var(--metal-hi) 0%,var(--metal-mid) 52%,var(--metal-lo) 100%);
  border-color:var(--line-2); color:var(--steel-deep);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), 0 2px 5px -2px rgba(16,24,40,.5)}

.acct__tkt{
  background-image:linear-gradient(166deg,var(--raise-hi) 0%,transparent 58%);
  box-shadow:0 6px 14px -8px rgba(16,24,40,.45), inset 0 1px 0 var(--raise-hi)}
.acct__tkt:active{transform:translateY(1px) scale(.985)}
.acct__tkt__c{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 3px 7px -3px rgba(16,24,40,.55)}

@media (prefers-reduced-motion: reduce){
  .acct__btn,.acct__chip,.acct__tkt,.acct__pwr{transition:none}
  .acct__btn:active,.acct__chip:active,.acct__tkt:active,.acct__pwr:active{transform:none}
}

/* ---------- دکمهٔ گرد برگشت، جای منو داخل حساب ---------- */
.nav__back{flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  display:grid; place-items:center; -webkit-tap-highlight-color:transparent;
  box-shadow:0 1px 2px var(--thm-in);
  transition:transform .16s var(--ease), border-color .18s var(--ease)}
.nav__back svg{width:19px; height:19px; transform:scaleX(-1)}
html[dir="ltr"] .nav__back svg{transform:none}
.nav__back:hover{border-color:var(--thm-line)}
.nav__back:active{transform:scale(.88)}
.nav__back:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media (min-width:900px){ .nav__back{display:none} }
@media (prefers-reduced-motion: reduce){ .nav__back{transition:none} .nav__back:active{transform:none} }

/* ---------- کشوی منو: ردیف‌های کارتی، فشرده ---------- */
/* چهار ردیف، هر کدام حدود شصت پیکسل. روی هم کمتر از یک سوم صفحه. */
.nav__drawer{display:flex; flex-direction:column; gap:7px;
  padding:8px var(--pad) 12px;
  border-top:1px solid var(--line); background:var(--surface);
  overflow:hidden; max-height:0; opacity:0;
  transition:max-height .42s cubic-bezier(.22,.68,.24,1),
             opacity .26s ease,
             padding-top .42s cubic-bezier(.22,.68,.24,1),
             padding-bottom .42s cubic-bezier(.22,.68,.24,1);
  padding-top:0; padding-bottom:0}
.nav__drawer.is-open{opacity:1; padding-top:8px; padding-bottom:12px}
.nav__drawer[hidden]{display:none !important}

/* هر ردیف کمی دیرتر از ردیف پیش از خودش می‌آید */
.nav__drawer a{display:flex; align-items:center; gap:10px; padding:8px 11px;
  border:1px solid var(--line); border-radius:13px; background:var(--surface-2);
  font-weight:600;
  opacity:0; transform:translateY(-9px);
  transition:border-color .16s var(--ease), transform .34s cubic-bezier(.2,.7,.24,1),
             opacity .3s ease}
.nav__drawer.is-open a{opacity:1; transform:none}
.nav__drawer.is-open a:nth-child(1){transition-delay:.06s}
.nav__drawer.is-open a:nth-child(2){transition-delay:.11s}
.nav__drawer.is-open a:nth-child(3){transition-delay:.16s}
.nav__drawer.is-open a:nth-child(4){transition-delay:.21s}
.nav__drawer.is-open a:nth-child(5){transition-delay:.26s}

/* خط‌های همبرگر وقتی باز است ضربدر می‌شوند */
.nav__burger span{transition:transform .32s cubic-bezier(.2,.7,.24,1), opacity .2s ease}
.nav__burger.is-on span:first-child{transform:translateY(3px) rotate(45deg)}
.nav__burger.is-on span:last-child{transform:translateY(-2.6px) rotate(-45deg)}

@media (prefers-reduced-motion: reduce){
  .nav__drawer,.nav__drawer a,.nav__burger span{transition:none}
  .nav__drawer a{opacity:1; transform:none}
}
.nav__drawer a:active{transform:scale(.985)}
.nav__dic{flex:0 0 auto; width:34px; height:34px; border-radius:11px; display:grid;
  place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--ink)}
.nav__dic svg{width:17px; height:17px}
.nav__dtx{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1 1 auto}
.nav__dtx b{font-size:.9rem; font-weight:700; color:var(--ink); line-height:1.35}
.nav__dtx em{font-style:normal; font-size:.7rem; font-weight:500; line-height:1.4;
  color:var(--ink-2)}
/* در راست به چپ، جهتِ «برو» سمت چپ است، پس فلش برنمی‌گردد */
.nav__dgo{flex:0 0 auto; width:15px; height:15px; color:var(--ink-2)}
html[dir="ltr"] .nav__dgo{transform:scaleX(-1)}

/* دکمهٔ داشبورد: صفحهٔ فولاد براش‌خورده، تا میان دکمه‌های نوار بالا جدا بنشیند */
.btn--steel{
  background:
    linear-gradient(102deg, rgba(255,255,255,.5) 0 1px, transparent 1px 5px),
    linear-gradient(148deg, #F9FBFC 0%, #DCE5EE 26%, #FDFEFE 46%, #C4CED9 68%, #EFF4F9 100%);
  color:#1B222B; border:1px solid #B7C3CF;
  box-shadow:inset 0 1px 0 #fff, 0 4px 12px rgba(16,24,40,.24)}
.btn--steel:hover{border-color:#9FADBB}
@media (min-width:900px){ .nav__drawer{display:none !important} }

/* ---------- کلید روز و شب ---------- */
/* یک دکمهٔ گرد فشاری. هم‌قد بقیهٔ دکمه‌های هدر، فقط گرد.
   دو آیکون روی هم می‌نشینند و با چرخش و محو شدن جای هم را می‌گیرند. */
.thm{
  flex:0 0 auto; width:40px; height:40px; min-width:40px; padding:0;
  border:1px solid var(--line-2); border-radius:50%; background:var(--surface);
  background-image:linear-gradient(158deg,var(--raise-hi) 0%,transparent 52%);
  color:var(--ink-2); cursor:pointer; -webkit-tap-highlight-color:transparent;
  display:inline-grid; place-items:center; position:relative;
  box-shadow:0 4px 10px -4px rgba(16,24,40,.45),
             inset 0 1px 0 var(--sheen-a),
             inset 0 -2px 5px rgba(16,24,40,.10);
  transition:transform .14s var(--ease), background .18s var(--ease),
             border-color .18s var(--ease), color .18s var(--ease),
             box-shadow .18s var(--ease);
}
.thm:active{transform:translateY(1px) scale(.96);
  box-shadow:0 1px 3px -1px rgba(16,24,40,.4), inset 0 2px 6px rgba(16,24,40,.22)}
.thm[hidden]{display:none !important}
.thm:hover{color:var(--ink); border-color:var(--thm-line)}
.thm:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

.thm__d{display:grid; place-items:center; width:18px; height:18px}
.thm__d svg{
  grid-area:1/1; width:18px; height:18px; color:currentColor;
  transition:opacity .2s var(--ease), transform .3s var(--ease);
}
/* روز: ماه دیده می‌شود، چون زدنش شب می‌کند */
.thm__sun {opacity:0; transform:rotate(-70deg) scale(.55)}
.thm__moon{opacity:1; transform:rotate(0deg)   scale(1)}
/* شب: خورشید دیده می‌شود */
.thm[aria-checked="true"] .thm__sun {opacity:1; transform:rotate(0deg)  scale(1)}
.thm[aria-checked="true"] .thm__moon{opacity:0; transform:rotate(70deg) scale(.55)}

@media (prefers-reduced-motion: reduce){
  .thm,.thm__d svg{transition:none}
  .thm:active{transform:none}
}

@media (max-width:400px){
  .nav__in{gap:6px; padding-inline:12px}
  .nav__act{gap:4px}
  .nav__act .btn{padding:8px 10px; font-size:.79rem}
  .nav__act .btn--metal{padding:8px 10px; font-size:.79rem}
  .brand__seal{width:28px; height:28px}
  .brand{gap:7px}
  .brand__name{font-size:.94rem}
  .nav__burger{width:34px; height:34px}
  .bell__btn{width:34px !important; height:34px !important}
  .thm{width:34px; height:34px; min-width:34px}
  .thm__d,.thm__d svg{width:17px; height:17px}
  /* داخل پنجرهٔ حساب، کلید تم و دکمهٔ پاور هم‌اندازه می‌مانند */
  .acct__pop .thm{width:40px; height:40px; min-width:40px}
  .acct__pop .thm__d,.acct__pop .thm__d svg{width:19px; height:19px}
}

/* ---------- دکمه ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 21px; border-radius:999px; font-weight:600; font-size:.95rem;
  line-height:1; white-space:nowrap; position:relative;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease),
             background .22s var(--ease), border-color .22s var(--ease), opacity .2s;
  -webkit-tap-highlight-color:transparent; border:1px solid transparent;
}
.btn:active{transform:scale(.965)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5; pointer-events:none}
.btn--metal{
  color:#0F151B;
  background:linear-gradient(146deg,#FFF 0%,#E2E8EE 26%,#FAFCFD 44%,#AFBAC6 58%,#E6ECF1 76%,#FDFEFF 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(60,72,84,.28),
             0 1px 2px rgba(13,17,22,.12), 0 10px 24px -12px rgba(13,17,22,.4);
  border-color:rgba(120,134,150,.42); text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.btn--metal:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(60,72,84,.3),
  0 2px 4px rgba(13,17,22,.14), 0 16px 34px -14px rgba(13,17,22,.5)}
.btn--ink{background:var(--ink); color:var(--ground); border-color:var(--ink)}
.btn--ink:hover{opacity:.9}
.btn--ghost{border-color:var(--line-2); color:var(--ink); background:var(--surface)}
.btn--ghost:hover{border-color:var(--steel); background:var(--surface-2)}
.btn--quiet{color:var(--ink-2); padding-inline:13px}
.btn--quiet:hover{color:var(--ink)}
.btn--ok{background:var(--patina); color:var(--on-patina); border-color:var(--patina)}
.btn--danger{background:var(--oxide); color:var(--on-oxide); border-color:var(--oxide)}
.btn--sm{padding:8px 15px; font-size:.86rem}
.btn--lg{padding:15px 30px; font-size:1.01rem}
.btn--block{width:100%}
.btn--icon{padding:9px; width:38px; height:38px}

/* ---------- کارت ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden}
.card--pad{padding:clamp(18px,3vw,26px)}
.card--flat{box-shadow:none}
.card--lift{transition:transform .28s var(--ease), box-shadow .28s var(--ease),
  border-color .28s var(--ease)}
.card--lift:hover{transform:translateY(-3px); box-shadow:var(--sh-1); border-color:var(--line-2)}
.card__head{padding:15px 18px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--surface-2)}
.card__head h3{font-size:1rem}
.card__body{padding:clamp(16px,3vw,24px)}
.card__foot{padding:14px 18px; border-top:1px solid var(--line); background:var(--surface-2)}

/* ---------- کاشی آمار ---------- */
.tile{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:18px 18px 20px; min-width:0}
.tile__k{font-size:.83rem; color:var(--ink-3); margin-bottom:6px}
.tile__v{font-family:var(--la); font-size:clamp(1.35rem,3.4vw,1.85rem); font-weight:600;
  letter-spacing:-.035em; line-height:1.1; direction:ltr; unicode-bidi:isolate;
  font-variant-numeric:tabular-nums; overflow-wrap:anywhere}
.tile__s{font-size:.8rem; color:var(--ink-2); margin-top:7px}
.tile--accent{background:var(--surface-2)}

/* ---------- نشان و تراشه ---------- */
.chip,.badge,.pill{
  display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px;
  font-size:.79rem; font-weight:600; line-height:1.6; white-space:nowrap;
}
.chip[hidden],.badge[hidden],.pill[hidden]{display:none !important}
.chip--up{background:var(--patina-soft); color:var(--patina); font-family:var(--la); direction:ltr}
.chip--down{background:var(--oxide-soft); color:var(--oxide); font-family:var(--la); direction:ltr}
.chip--warn{background:var(--amber-soft); color:var(--amber)}
.chip--neutral{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}
.badge--ok{background:var(--patina-soft); color:var(--patina)}
.badge--err{background:var(--oxide-soft); color:var(--oxide)}
.badge--wait{background:var(--amber-soft); color:var(--amber)}
.badge--off{background:var(--surface-2); color:var(--ink-3); border:1px solid var(--line)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--patina); flex-shrink:0}
.dot--warn{background:var(--amber)} .dot--err{background:var(--oxide)}

/* ---------- فرم ---------- */
.field{display:flex; flex-direction:column; gap:7px; min-width:0}
.field__label{font-size:.88rem; font-weight:600; color:var(--ink)}
.field__hint{font-size:.79rem; color:var(--ink-3); line-height:1.7}
.field__err{font-size:.8rem; color:var(--oxide)}
.input,.select,.textarea{
  width:100%; padding:12px 14px; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink);
  font-size:1rem; line-height:1.5; transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(119,133,147,.16);
}
.input::placeholder,.textarea::placeholder{color:var(--ink-3)}
.input:disabled,.select:disabled{background:var(--surface-2); color:var(--ink-3)}
.input--num{font-family:var(--la); direction:ltr; text-align:left; font-variant-numeric:tabular-nums}
.textarea{min-height:120px; resize:vertical; line-height:1.9}
.select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:left 18px top 50%, left 13px top 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-inline-start:38px}
.input-group{display:flex; align-items:stretch; gap:0}
.input-group .input{border-start-end-radius:0; border-end-end-radius:0}
.input-group__addon{display:flex; align-items:center; padding:0 14px; font-size:.86rem;
  color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line-2);
  border-inline-start:0; border-start-end-radius:var(--r-sm); border-end-end-radius:var(--r-sm)}
.check{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:.92rem}
.check input{width:19px; height:19px; margin:3px 0 0; accent-color:var(--steel-deep); flex-shrink:0}
.otp{display:flex; gap:8px; justify-content:center; direction:ltr}
.otp input{width:46px; height:56px; text-align:center; font-family:var(--la);
  font-size:1.5rem; font-weight:600; border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink)}
.otp input:focus{outline:none; border-color:var(--steel); box-shadow:0 0 0 3px rgba(119,133,147,.16)}
@media (max-width:400px){ .otp input{width:40px; height:50px; font-size:1.25rem} }

/* ---------- کنترل قطعه‌ای، حس iOS ---------- */
.seg{display:flex; padding:3px; border-radius:13px; background:var(--surface-2);
  border:1px solid var(--line); gap:3px}
.seg button,.seg a{flex:1; padding:9px 6px; border-radius:10px; font-size:.88rem; font-weight:600;
  color:var(--ink-2); text-align:center; transition:background .2s var(--ease),
  color .2s var(--ease), box-shadow .2s var(--ease)}
.seg button[aria-pressed="true"],.seg a[aria-current="page"],.seg .is-on{
  background:var(--surface); color:var(--ink); box-shadow:var(--sh-1)}
.seg .btn--metal{color:#0F151B}
.tabpanel[hidden]{display:none !important}

/* ---------- جدول ---------- */
.table-wrap{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface)}
.table{width:100%; border-collapse:collapse; font-size:.9rem; min-width:560px}
.table th,.table td{padding:12px 14px; text-align:start; border-bottom:1px solid var(--line);
  vertical-align:middle}
.table th{font-weight:600; font-size:.82rem; color:var(--ink-3); background:var(--surface-2);
  position:sticky; top:0; white-space:nowrap}
.table tbody tr:last-child td{border-bottom:0}
.table--zebra tbody tr:nth-child(even){background:var(--surface-2)}
.table tbody tr:hover{background:var(--surface-3)}
.table .num{white-space:nowrap}

/* ---------- پیام و حالت خالی ---------- */
.flash{max-width:var(--maxw); margin:14px auto 0; padding:13px 18px;
  border-radius:var(--r-sm); font-size:.92rem; font-weight:500;
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  margin-inline:auto; width:calc(100% - var(--pad) * 2)}
.flash--ok{background:var(--patina-soft); border-color:transparent; color:var(--patina)}
.flash--err{background:var(--oxide-soft); border-color:transparent; color:var(--oxide)}
.flash--warn{background:var(--amber-soft); border-color:transparent; color:var(--amber)}
.flash--info{background:var(--surface-2)}
.empty{text-align:center; padding:clamp(40px,8vw,80px) 20px;
  display:flex; flex-direction:column; align-items:center; gap:16px}
.empty h1,.empty h2{margin:0}
.empty .lede{text-align:center; margin-inline:auto}
.notice{padding:14px 16px; border-radius:var(--r-sm); background:var(--surface-2);
  border:1px solid var(--line); font-size:.9rem; line-height:1.85; color:var(--ink-2)}
.notice--warn{background:var(--amber-soft); border-color:transparent; color:var(--amber)}
.notice--ok{background:var(--patina-soft); border-color:transparent; color:var(--patina)}

/* ---------- ویجت قیمت ---------- */
.pxw{display:inline-flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:9px 15px; border-radius:999px; background:var(--surface);
  border:1px solid var(--line); font-size:.9rem}
.pxw__k{color:var(--ink-3); font-size:.82rem}
.pxw__v{font-family:var(--la); font-weight:600; font-size:1.08rem; direction:ltr;
  font-variant-numeric:tabular-nums}
.pxw__u{color:var(--ink-2); font-size:.82rem}

/* ---------- دیسک نقره، امضای بصری ---------- */
.disc-stage{position:relative; display:grid; place-items:center; container-type:inline-size;
  aspect-ratio:1/1; width:min(100%,440px); margin-inline:auto; isolation:isolate}
@media (max-width:559px){ .disc-stage{width:min(86%,320px)} }
.disc{position:relative; width:100%; aspect-ratio:1/1; border-radius:50%;
  background:var(--disc-base); box-shadow:var(--sh-2), inset 0 0 0 1px rgba(255,255,255,.24);
  overflow:hidden; contain:paint}
.disc__rings{position:absolute; inset:0; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, var(--ring-ink) 0 .5px, transparent .5px 4px)}
.disc__sheen{position:absolute; inset:-12%; border-radius:50%;
  background:conic-gradient(from 0deg, var(--sheen-b) 0deg, var(--sheen-a) 26deg,
    var(--sheen-b) 62deg, var(--sheen-a) 104deg, var(--sheen-b) 150deg, var(--sheen-a) 186deg,
    var(--sheen-b) 226deg, var(--sheen-a) 268deg, var(--sheen-b) 312deg,
    var(--sheen-a) 344deg, var(--sheen-b) 360deg);
  mix-blend-mode:var(--blend); transform:rotate(var(--sheen,0deg)); will-change:transform}
.disc__sheen--b{inset:-4%; opacity:.55; transform:rotate(calc(var(--sheen,0deg) * -.62)); filter:blur(6px)}
.disc__gloss{position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(120% 90% at 28% 12%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 52%),
             radial-gradient(90% 80% at 76% 92%, rgba(13,17,22,.22) 0%, rgba(13,17,22,0) 55%)}
.disc__rim{position:absolute; inset:0; border-radius:50%; pointer-events:none;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.7), inset 0 -1.5px 0 rgba(20,28,36,.35),
             inset 0 0 0 1px rgba(120,134,150,.34)}
.disc__inner{position:absolute; inset:8.5%; border-radius:50%; pointer-events:none;
  border:1px solid rgba(120,134,150,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.disc__glyph{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-size:clamp(78px, 26cqw, 160px); font-weight:900; line-height:1; color:var(--steel-deep);
  text-shadow:0 2px 0 rgba(255,255,255,.72), 0 -1.5px 0 rgba(16,24,32,.4),
              0 6px 14px rgba(16,24,32,.16); padding-bottom:.06em}
.disc__hall{position:absolute; bottom:14%; inset-inline:0; text-align:center;
  font-family:var(--la); font-size:clamp(9px,2.4cqw,12px); letter-spacing:.34em;
  color:var(--steel-deep); opacity:.6; direction:ltr; font-weight:500}
@media (prefers-reduced-motion: no-preference){
  .disc__sheen{animation:noqTurn 34s linear infinite}
  .disc__sheen--b{animation:noqTurn 52s linear infinite reverse}
  .disc.is-live .disc__sheen,.disc.is-live .disc__sheen--b{animation-play-state:paused}
}
@keyframes noqTurn{ to{ transform:rotate(360deg) } }

/* ---------- بند تیره ---------- */
.band{background:linear-gradient(168deg,#131A22 0%,#0A0E13 52%,#171F28 100%);
  color:#E9EEF3; border-radius:var(--r-xl); overflow:hidden; position:relative;
  padding:clamp(32px,6vw,76px) clamp(20px,5vw,60px)}
.band::before{content:''; position:absolute; inset:-30% -10%;
  background:repeating-radial-gradient(circle at 62% 26%, rgba(230,240,250,.075) 0 1px, transparent 1px 11px);
  -webkit-mask-image:radial-gradient(circle at 62% 26%, #000 0 46%, transparent 74%);
  mask-image:radial-gradient(circle at 62% 26%, #000 0 46%, transparent 74%); pointer-events:none}
.band > *{position:relative}
.band h2{color:#F3F7FA} .band p{color:#A9B5C1}
.band .eyebrow{color:#8E9CAA}
.band .eyebrow::after{background:rgba(200,215,230,.2)}
.band .tile{background:rgba(255,255,255,.045); border-color:rgba(200,215,230,.14)}
.band .tile__k{color:#93A0AE} .band .tile__v{color:#fff}

/* ---------- مودال و شیت ---------- */
.modal{position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:16px; background:rgba(9,12,16,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.modal[hidden]{display:none !important}
.modal__box{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  width:min(560px,100%); max-height:88vh; overflow:auto; box-shadow:var(--sh-2)}
.modal__head{position:sticky; top:0; background:var(--surface); padding:16px 20px;
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:12px; z-index:1}
.modal__head h3{flex:1; font-size:1.02rem}
.modal__body{padding:20px}
.modal__foot{padding:14px 20px; border-top:1px solid var(--line);
  display:flex; gap:9px; justify-content:flex-end; flex-wrap:wrap}
@media (max-width:560px){
  .modal{padding:0; place-items:end center}
  .modal__box{border-radius:var(--r-lg) var(--r-lg) 0 0; max-height:92vh; width:100%}
}
.sheet{position:fixed; inset-inline:0; bottom:0; z-index:120; background:var(--surface);
  border-radius:var(--r-lg) var(--r-lg) 0 0; box-shadow:var(--sh-2);
  border-top:1px solid var(--line); padding:20px; max-height:86vh; overflow:auto}
.sheet[hidden]{display:none !important}
.sheet::before{content:''; display:block; width:38px; height:4px; border-radius:99px;
  background:var(--line-2); margin:0 auto 16px}

/* ---------- زنگوله، جای‌گیر تا bell.css بیاید ---------- */
.bell{position:relative}
.bell__btn{width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--surface); display:grid; place-content:center; color:var(--ink-2); position:relative}
.bell__btn:hover{color:var(--ink)}
.bell-badge{position:absolute; top:-5px; inset-inline-end:-5px; min-width:18px; height:18px;
  padding:0 5px; border-radius:999px; background:var(--oxide); color:var(--on-oxide);
  font-family:var(--la); font-size:10px; font-weight:600;
  display:flex; align-items:center; justify-content:center; line-height:1}
.bell-badge[hidden]{display:none !important}

/* ---------- فوتر ---------- */
.foot{border-top:1px solid var(--line); background:var(--surface); margin-top:clamp(36px,6vw,80px)}
.foot__in{max-width:var(--maxw); margin-inline:auto; padding:clamp(32px,5vw,58px) var(--pad) 26px;
  display:grid; gap:30px}
@media (min-width:760px){ .foot__in{grid-template-columns:1.6fr 1fr 1fr 1fr} }
.foot h4{font-size:.86rem; font-weight:700; margin-bottom:12px; color:var(--ink)}
.foot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.foot a{font-size:.89rem; color:var(--ink-2); transition:color .18s var(--ease)}
.foot a:hover{color:var(--ink)}
.foot__note{font-size:.87rem; color:var(--ink-2); max-width:36ch; line-height:1.85; margin-top:12px}
.foot__trust{display:inline-block; margin-top:14px; font-size:.83rem;
  padding:7px 14px; border-radius:999px; border:1px solid var(--line); color:var(--ink-2)}
.foot__bot{max-width:var(--maxw); margin-inline:auto; padding:16px var(--pad) 28px;
  border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px;
  justify-content:space-between; align-items:center; font-size:.81rem; color:var(--ink-3)}
.foot__mark{letter-spacing:.14em; font-size:11px}

/* ---------- نمودار ---------- */
.spark{width:100%; height:64px; overflow:visible; display:block}
.chart{width:100%; height:clamp(180px,32vw,280px); display:block}

/* ---------- بارگذاری ---------- */
.skel{background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface-3) 37%,var(--surface-2) 63%);
  background-size:400% 100%; border-radius:var(--r-sm); animation:noqSkel 1.4s ease infinite}
@keyframes noqSkel{ 0%{background-position:100% 50%} 100%{background-position:0 50%} }
.spin{width:18px; height:18px; border:2px solid var(--line-2); border-top-color:var(--steel-deep);
  border-radius:50%; animation:noqSpin .7s linear infinite; display:inline-block}
@keyframes noqSpin{ to{ transform:rotate(360deg) } }

/* ---------- ظهور تدریجی، همیشه از حالت دیده‌شده شروع می‌شود ---------- */
.rv{transition:opacity .6s var(--ease), transform .6s var(--ease)}
.rv.pending{opacity:0; transform:translateY(16px)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rv,.rv.pending{opacity:1 !important; transform:none !important; transition:none}
  .disc__sheen,.disc__sheen--b{animation:none !important}
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

/* ---------- چاپ ---------- */
@media print{
  .nav,.foot,.btn,.bell{display:none !important}
  body{background:#fff; color:#000}
  .card{border:1px solid #ccc; break-inside:avoid}
}

/* =====================================================================
   خط‌کش اسکرول کنار صفحه، با دکمهٔ برگشت به بالا
   شیارهای ریز فلزی، همان حس نقرهٔ خراطی‌شده
   ===================================================================== */
.nq-rail{
  position:fixed; inset-inline-start:14px; top:50%; transform:translateY(-50%);
  z-index:45; display:none; flex-direction:column; align-items:flex-start; gap:0;
  pointer-events:none;
}
@media (min-width:1100px){ .nq-rail{display:flex} }
.nq-rail__t{
  display:block; width:7px; height:1px; margin-block:3px; border-radius:1px;
  background:var(--line-2); opacity:.55;
  transition:width .28s var(--ease), background .28s var(--ease), opacity .28s var(--ease);
}
.nq-rail__t.maj{width:13px; opacity:.75}
.nq-rail__t.near{width:15px; opacity:.9; background:var(--steel)}
.nq-rail__t.on{
  width:24px; opacity:1; height:2px;
  background:linear-gradient(90deg,var(--steel-deep),var(--metal-lo));
  box-shadow:0 0 6px rgba(120,134,150,.5);
}
.nq-rail__top{
  pointer-events:auto; margin-top:14px; width:30px; height:30px; border-radius:50%;
  display:grid; place-content:center; color:var(--ink-2);
  background:linear-gradient(150deg,#FFF,#E4EAEF 42%,#B7C2CE 62%,#F2F6F9);
  border:1px solid rgba(120,134,150,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -5px rgba(13,17,22,.4);
  opacity:0; transform:scale(.7) translateY(-4px); transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.nq-rail.is-scrolled .nq-rail__top{opacity:1; transform:scale(1) translateY(0)}
.nq-rail__top:hover{color:var(--ink); transform:scale(1.08)}
.nq-rail__top:active{transform:scale(.92)}
:root[data-theme="dark"] .nq-rail__top,
:root:not([data-theme="light"]) .nq-rail__top{color:var(--ink-2)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nq-rail__top{
    background:linear-gradient(150deg,#3A4652,#222A33 45%,#4A5663 65%,#2B343E);
    border-color:rgba(150,166,182,.35);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 4px 12px -5px rgba(0,0,0,.7);
  }
}
@media (prefers-reduced-motion: reduce){
  .nq-rail__t,.nq-rail__top{transition:none}
}

/* =====================================================================
   نظرها، حباب‌های باریک به سبک گفت‌وگوی آیفون
   ===================================================================== */
.nq-rev{display:flex; flex-direction:column; gap:10px; max-width:640px; margin-inline:auto}
.nq-rev__row{display:flex; gap:9px; align-items:flex-end}
.nq-rev__row--b{flex-direction:row-reverse}
.nq-rev__av{
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  display:grid; place-content:center; font-size:.72rem; font-weight:700;
  color:#39434E; background:linear-gradient(145deg,#FFF,#DCE3EA 45%,#B4BFCB 65%,#EFF3F6);
  border:1px solid rgba(120,134,150,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85);
}
.nq-rev__b{
  position:relative; max-width:min(80%,440px);
  padding:9px 14px 10px; border-radius:18px;
  background:var(--surface); border:1px solid var(--line);
  font-size:.9rem; line-height:1.8; color:var(--ink);
  box-shadow:0 1px 2px rgba(13,17,22,.04);
}
.nq-rev__row:not(.nq-rev__row--b) .nq-rev__b{border-end-start-radius:6px}
.nq-rev__row--b .nq-rev__b{
  border-end-end-radius:6px;
  background:linear-gradient(160deg,#F4F7FA,#E4EAF0);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nq-rev__row--b .nq-rev__b{
    background:linear-gradient(160deg,#1E262F,#161D25);
  }
}
:root[data-theme="dark"] .nq-rev__row--b .nq-rev__b{background:linear-gradient(160deg,#1E262F,#161D25)}
.nq-rev__meta{
  display:flex; align-items:center; gap:7px; margin-bottom:3px;
  font-size:.74rem; color:var(--ink-3);
}
.nq-rev__who{font-weight:700; color:var(--ink-2)}
.nq-rev__stars{color:var(--steel-deep); letter-spacing:1px; font-size:.72rem; direction:ltr}
.nq-rev__t{font-size:.68rem; color:var(--ink-3); align-self:flex-end; padding-bottom:4px;
  white-space:nowrap; flex-shrink:0}
@media (max-width:520px){
  .nq-rev__b{max-width:84%; font-size:.87rem}
  .nq-rev__t{display:none}
}

/* =====================================================================
   فوتر فشرده: سه ستون کنار هم، بج‌ها و دکمه‌های برنامه
   ===================================================================== */
.foot__in{
  max-width:var(--maxw); margin-inline:auto;
  padding:clamp(26px,4vw,44px) var(--pad) 20px;
  display:flex; flex-direction:column; gap:clamp(20px,3vw,28px);
}
.foot__brand{display:flex; flex-direction:column; gap:10px}
.foot__note{font-size:.87rem; color:var(--ink-2); max-width:46ch; line-height:1.8; margin:0}

.foot__cols{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.foot__cols > *{min-width:0}
.foot__col h4{font-size:.84rem; font-weight:700; margin:0 0 10px; color:var(--ink)}
.foot__col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px}
.foot__col a{font-size:.86rem; color:var(--ink-2); line-height:1.7; display:inline-block}
.foot__col a:hover{color:var(--ink)}
@media (max-width:400px){
  .foot__cols{gap:9px}
  .foot__col h4{font-size:.79rem}
  .foot__col a{font-size:.8rem}
}

.foot__apps{display:flex; flex-wrap:wrap; gap:10px}
.foot__app{
  display:inline-flex; align-items:center; gap:9px; min-height:46px;
  padding:8px 16px 8px 14px; border-radius:14px; text-align:start;
  background:var(--surface-2); border:1px solid var(--line); color:var(--ink);
  font-size:.85rem; font-weight:600; line-height:1.25;
  transition:border-color .2s var(--ease), background .2s var(--ease);
}
.foot__app:hover{border-color:var(--steel); background:var(--surface)}
.foot__app em{display:block; font-style:normal; font-size:.72rem; font-weight:400;
  color:var(--ink-3); margin-top:2px}
.foot__app svg{flex-shrink:0; color:var(--steel-deep)}

.foot__badges{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
@media (max-width:400px){
    }

.foot__bot{
  max-width:var(--maxw); margin-inline:auto;
  padding:14px var(--pad) calc(22px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between;
  align-items:center; font-size:.78rem; color:var(--ink-3);
}
@media (min-width:820px){
  .foot__in{display:grid; grid-template-columns:1.35fr 2fr; gap:26px 40px;
    align-items:start}
  .foot__brand{grid-column:1; grid-row:1}
  .foot__cols{grid-column:2; grid-row:1}
  .foot__apps{grid-column:1; grid-row:2}
  .foot__badges{grid-column:2; grid-row:2; justify-content:flex-start}
}

/* تصویرهای اعتماد در فوتر. بدون لینک، ارتفاع از پنل تنظیم می‌شود */
.foot__badges{--badge-h:54px}
.foot__badge{
  display:inline-flex; align-items:center; justify-content:center;
  height:calc(var(--badge-h) + 14px); padding:7px 10px; border-radius:12px;
  background:var(--surface); border:1px solid var(--line); overflow:hidden;
}
.foot__badge img{height:var(--badge-h); width:auto; max-width:100%;
  object-fit:contain; display:block}