/* =================================================================
   GameWatch — استایل اصلی
   توکن‌ها ← پایه ← اجزا ← هدر ← بخش‌ها ← فوتر ← انیمیشن ← ریسپانسیو
   ================================================================= */

:root {
  --paper:      #ffffff;
  --paper-2:    #faf6f4;
  --paper-3:    #f4ece8;
  --ink:        #17110f;
  --ink-2:      #4d4441;
  --ink-3:      #837875;
  --line:       #ece3de;
  --line-2:     #d9cdc6;

  --brand:      #e0451b;
  --brand-2:    #ff6a3d;
  --brand-mid:  #ff8a63;
  --brand-3:    #ffb9a3;
  --brand-soft: #fff1ec;

  --logo-1: #ff3d00; --logo-2: #ff8a63; --logo-3: #ffb9a3; --logo-4: #ffe2d8;

  /* متن و خط روی بلوک‌های تیره */
  --on-dark:    #f0ddd6;
  --on-dark-2:  #c8a396;
  --on-dark-3:  #96705f;
  --dark-end:   #2f0c04;
  --brand-line: #f6d3c6;

  --brand-rgb:   224,69,27;
  --brand2-rgb:  255,106,61;
  --brand3-rgb:  255,138,99;
  --maroon-rgb:  74,21,8;

  --maroon:     #4a1508;
  --maroon-2:   #6d2413;
  --maroon-3:   #8d3520;

  --online:     #17a04a;
  --online-rgb: 23,160,74;
  --online-soft:#e9f8ef;
  --warn:       #c08417;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:72px; --s9:110px;

  --r1:6px; --r2:10px; --r3:16px; --r4:24px; --r5:32px;

  --shadow-s: 0 1px 2px rgba(23,17,15,.05), 0 4px 12px -8px rgba(23,17,15,.3);
  --shadow-m: 0 2px 6px rgba(23,17,15,.06), 0 18px 40px -26px rgba(23,17,15,.45);
  --shadow-l: 0 30px 70px -40px rgba(var(--maroon-rgb),.7);

  --font: Vazirmatn, "IRANSans", Tahoma, system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  --wrap: 1180px;
  --header-h: 70px;
}

/* تم دوم — همون ساختار، فقط رنگ تاکیدی آبی.
   موقع باز شدن سایت یکی از این دو تصادفی انتخاب می‌شه. */
:root[data-theme="blue"] {
  --brand:      #1663d6;
  --brand-2:    #3d8bff;
  --brand-mid:  #6aa6ff;
  --brand-3:    #a9cdff;
  --brand-soft: #eef4ff;

  --logo-1: #0d5ad4; --logo-2: #59a0ff; --logo-3: #a9cdff; --logo-4: #dbe9ff;

  --on-dark:    #dce9f8;
  --on-dark-2:  #9db4cf;
  --on-dark-3:  #6a839f;
  --dark-end:   #061428;
  --brand-line: #c3d9f7;

  --brand-rgb:   22,99,214;
  --brand2-rgb:  61,139,255;
  --brand3-rgb:  106,166,255;
  --maroon-rgb:  8,28,58;

  --maroon:     #081c3a;
  --maroon-2:   #123a6b;
  --maroon-3:   #1b528f;

  --paper-2:    #f6f8fc;
  --paper-3:    #eaf0f9;
  --line:       #e2e8f2;
  --line-2:     #c8d3e3;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.9;
  letter-spacing: -.003em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4 { margin:0; line-height:1.35; font-weight:800; letter-spacing:-.025em; }
h1 { font-size: clamp(32px, 5.4vw, 56px); line-height:1.22; }
h2 { font-size: clamp(24px, 3.6vw, 38px); }
h3 { font-size: 19px; }
p  { margin: 0; }
a  { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: #ffd9cc; color: var(--maroon); }

.wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s5); }
.mono { font-family: var(--mono); direction:ltr; unicode-bidi:isolate; }
.num  { font-variant-numeric: tabular-nums; }
.muted{ color: var(--ink-3); }
.lede { font-size:17.5px; color:var(--ink-2); line-height:2.05; }
.small{ font-size:13.5px; }
.hidden { display:none !important; }

/* ---------------------------------------------------------- اجزا */

.btn {
  position: relative; overflow: hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  padding:13px 26px; border:1px solid transparent; border-radius:var(--r2);
  background: var(--ink); color:#fff;
  font-weight:700; font-size:15px; white-space:nowrap; cursor:pointer;
  /* دکمه هیچ‌وقت باریک‌تر از متن خودش نشه. توی ردیف‌های فلکس، دکمه به‌عنوان
     یه آیتم معمولی فشرده می‌شد و چون overflow:hidden داره، متن به‌جای
     سرریز، از دو طرف *بریده* می‌شد — مثل «انلود نسخه 1.0.» */
  flex-shrink: 0;
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .2s, background .2s, border-color .2s;
}
.btn::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(120%); }
.btn:hover  { transform: translateY(-2px); box-shadow: var(--shadow-m); }
.btn:active { transform: translateY(0); }

.btn--brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); background: var(--paper-2); }
.btn--light { background:#fff; color: var(--maroon); }
.btn--onDark{ background: rgba(255,255,255,.1); color:#fff; border-color: rgba(255,255,255,.25); }
.btn--onDark:hover { background: rgba(255,255,255,.18); }
.btn--sm { padding:9px 16px; font-size:13.5px; }
.btn--lg { padding:16px 32px; font-size:16px; }
.btn--block { width:100%; }

.tag {
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 13px; border-radius:999px;
  border:1px solid var(--line-2); background:#fff;
  font-size:12.5px; font-weight:600; color:var(--ink-2);
}
.tag--brand { background:var(--brand-soft); border-color:var(--brand-line); color:var(--brand); }
.tag--online{ background:var(--online-soft); border-color:#bfe7cf; color:#0f7a37; }
.tag--soon  { background:#fdf5e3; border-color:#ecdcb1; color:#8a6512; }
.tag--dark  { background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.22); color:#ffe3d9; }

.dot { width:8px; height:8px; border-radius:50%; background:var(--online); position:relative; flex:none; }
.dot::after {
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:1px solid var(--online); opacity:.5; animation: pulse 2s ease-out infinite;
}
.dot--warn { background: var(--warn); }
.dot--warn::after { border-color: var(--warn); }
@keyframes pulse { 0%{transform:scale(.7);opacity:.7} 100%{transform:scale(1.5);opacity:0} }

.eyebrow {
  display:inline-flex; align-items:center; gap:var(--s2);
  font-size:12.5px; font-weight:800; color:var(--brand);
  letter-spacing:.05em; margin-bottom:var(--s3);
}
.eyebrow::before { content:""; width:26px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--brand), var(--brand-3)); }
.eyebrow--light { color:var(--brand-3); }
.eyebrow--light::before { background: linear-gradient(90deg,#ff7f56,rgba(255,185,163,.2)); }

/* ---------------------------------------------------------- لوگو */

/* نشان دیگه مربع نیست — نسبتش ۱.۴۵ به ۱ ـه. با ۳۴×۳۴ ارتفاع واقعیش
   می‌شد ۲۳ پیکسل و کنار متنِ ۳۲ پیکسلی ریز به نظر می‌رسید. */
.logo { --mark-w:58px; --mark-h:40px; position:relative;
        display:flex; align-items:center; gap:11px; }
.logo__svg { width:var(--mark-w); height:var(--mark-h); flex:none; }

/* درخششی که از روی نشان رد می‌شه.

   تکنیکش از uiverse.io ـه (شیمرِ Nawsome، مجوز MIT): یه گرادیانِ باریکِ
   روشن که با background-position جابه‌جا می‌شه. فرقش اینه که این‌جا با
   mask به خودِ شکلِ نشان بریده شده، وگرنه یه مستطیلِ روشن رد می‌شد.

   یه بار موقع باز شدن صفحه، و بعدش هر بار که موس روی لوگو می‌ره. */
.logo::after {
  content:''; position:absolute; inset-inline-start:0; top:50%;
  margin-top:calc(var(--mark-h) / -2);
  width:var(--mark-w); height:var(--mark-h);
  pointer-events:none;
  background:linear-gradient(105deg, transparent 42%,
              rgba(255,255,255,.85) 50%, transparent 58%);
  background-size:260% 100%;
  background-position:-110% 0;
  -webkit-mask:url(/static/img/logo-mark.svg) center/contain no-repeat;
          mask:url(/static/img/logo-mark.svg) center/contain no-repeat;
  animation:markSheen 1s ease-out .6s both;
}
.logo:hover::after { animation:markSheenHover 1s ease-out; }

@keyframes markSheen      { from { background-position:210% 0 }
                            to   { background-position:-110% 0 } }
@keyframes markSheenHover { from { background-position:210% 0 }
                            to   { background-position:-110% 0 } }

/* کسی که انیمیشن اذیتش می‌کنه، نبینه. */
@media (prefers-reduced-motion: reduce) {
  .logo::after, .logo:hover::after { animation:none; }
}
.logo__text { font-weight:800; font-size:17px; letter-spacing:-.03em; line-height:1.15; }
.logo__text small { display:block; font-size:10.5px; font-weight:500; color:var(--ink-3); letter-spacing:0; }
.logo--light .logo__text { color:#fff; }
.logo--light .logo__text small { color:var(--on-dark-2); }

/* ---------------------------------------------------------- هدر */

.announce {
  background: linear-gradient(90deg, var(--maroon), var(--maroon-2) 55%, var(--maroon));
  color:#f3ded6; font-size:13.5px; text-align:center; padding:9px var(--s4);
  position: relative; overflow: hidden;
}
.announce b { color:#fff; }
.announce::after {
  content:""; position:absolute; top:0; bottom:0; width:35%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent);
  animation: sweep 6s linear infinite;
}
@keyframes sweep { from{ inset-inline-start:-35% } to{ inset-inline-start:105% } }

.header {
  position: sticky; top:0; z-index:80;
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.header.stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -20px rgba(0,0,0,.5); }
.header__in { display:flex; align-items:center; gap:var(--s5); height:var(--header-h); }

.nav { display:flex; align-items:center; gap:var(--s5); margin-inline-start:auto; font-size:14.5px; }
.nav a { position:relative; color:var(--ink-2); font-weight:600; padding:6px 0; }
.nav a::after {
  content:""; position:absolute; inset-inline:0; bottom:0; height:2px; border-radius:2px;
  background: var(--brand); transform: scaleX(0); transform-origin: right;
  transition: transform .25s cubic-bezier(.2,.8,.3,1);
}
.nav a:hover { color:var(--ink); }
.nav a:hover::after { transform: scaleX(1); }

.header__cta { display:flex; align-items:center; gap:var(--s2); }

.burger {
  display: none; width: 42px; height: 42px; flex: none;
  align-items: center; justify-content: center; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 13px;
  cursor: pointer; padding: 0;
  transition: background .18s, border-color .18s, transform .18s;
}
.burger:hover { background: var(--paper-2); border-color: var(--line-2); }
.burger:active { transform: scale(.94); }
.burger span {
  display: block; width: 17px; height: 2px; border-radius: 2px;
  background: var(--ink); margin: 2.5px auto;
  transition: transform .28s cubic-bezier(.2,.9,.3,1), opacity .18s;
}
.burger.on { background: var(--brand); border-color: var(--brand); }
.burger.on span { background: #fff; }
.burger.on span:nth-child(1){ transform: translateY(7px) rotate(45deg) }
.burger.on span:nth-child(2){ opacity:0 }
.burger.on span:nth-child(3){ transform: translateY(-5px) rotate(-45deg) }

/* ---------------------------------------------------------- هیرو */

.hero { position:relative; padding: var(--s8) 0 var(--s7); overflow:hidden; }
.hero::before {
  content:""; position:absolute; top:-260px; inset-inline-end:-200px;
  width:680px; height:680px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(var(--brand-rgb),.10), transparent 65%);
  animation: float 14s ease-in-out infinite;
}
.hero::after {
  content:""; position:absolute; bottom:-200px; inset-inline-start:-160px;
  width:460px; height:460px; border-radius:50%; pointer-events:none;
  background: radial-gradient(circle, rgba(var(--brand2-rgb),.09), transparent 65%);
  animation: float 18s ease-in-out infinite reverse;
}
@keyframes float { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-24px,26px)} }

.hero__grid { position:relative; display:grid; grid-template-columns:1.02fr .98fr;
  gap:var(--s8); align-items:center; }
.hero h1 { margin-top:var(--s4); }
.hero h1 .grad {
  background: linear-gradient(120deg, var(--brand), var(--brand-2) 60%, var(--brand-mid));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero .lede { margin-top:var(--s4); max-width:31em; }
.hero__actions { display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s6); }
.hero__meta { display:flex; flex-wrap:wrap; gap:var(--s5); margin-top:var(--s6);
  font-size:13.5px; color:var(--ink-3); }
.hero__meta span { display:flex; align-items:center; gap:8px; }

/* پنل شبیه‌ساز برنامه */
.app {
  background: linear-gradient(165deg, var(--maroon), var(--dark-end));
  border:1px solid rgba(255,255,255,.09);
  border-radius: 22px; padding: 14px;
  box-shadow: var(--shadow-l);
  color: var(--on-dark);
  display:grid; gap:11px;
}

/* نوار عنوان — چپ‌چین مثل خود برنامه */
.app__bar { display:flex; align-items:center; gap:9px; direction:ltr; padding:2px 4px 10px; }
.app__mark { width:19px; height:19px; flex:none; }
.app__mark svg { width:100%; height:100%; }
.app__title { font-size:13px; font-weight:700; color:var(--on-dark); }
.app__dots { display:flex; gap:6px; margin-inline-start:auto; }
.app__dots i { width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.18); }
.app__dots i:nth-child(1){ animation: appdot 3.6s ease-in-out infinite }
.app__dots i:nth-child(2){ animation: appdot 3.6s ease-in-out .4s infinite }
.app__dots i:nth-child(3){ animation: appdot 3.6s ease-in-out .8s infinite }
@keyframes appdot { 0%,100%{opacity:1} 50%{opacity:.35} }

/* کارت اتصال */
.app__deck {
  display:flex; flex-direction:column; align-items:center;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:20px; padding:22px 16px 16px;
}
.app__orb {
  position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center;
  background: radial-gradient(circle at 32% 28%, var(--brand-2), var(--brand));
  animation: breathe 3.4s ease-in-out infinite;
}
.app__orb svg { width:36px; height:36px; position:relative; z-index:2; }
@keyframes breathe {
  0%,100%{ box-shadow:0 0 0 7px rgba(var(--brand-rgb),.16), 0 16px 40px -14px rgba(var(--brand-rgb),.85) }
  50%    { box-shadow:0 0 0 15px rgba(var(--brand-rgb),.05), 0 16px 46px -14px rgba(var(--brand-rgb),1) }
}
.app__wave {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid rgba(var(--brand-rgb),.55); opacity:0;
  animation: appwave 3.3s cubic-bezier(.2,.7,.4,1) infinite;
}
.app__wave--2 { animation-delay:1.65s; }
@keyframes appwave { 0%{opacity:.6;transform:scale(1)} 100%{opacity:0;transform:scale(1.8)} }

.app__deck > b { margin-top:16px; font-size:22px; color:#fff; letter-spacing:-.02em; direction:ltr; }
.app__deck > span { margin-top:5px; font-size:12.5px; color:var(--on-dark-2); }

.app__ping { display:flex; align-items:flex-end; gap:3px; height:40px; width:100%; margin:16px 0; }
.app__ping i {
  flex:1; border-radius:2px 2px 0 0;
  background: linear-gradient(180deg, var(--brand-2), rgba(var(--brand2-rgb),.2));
  animation: bar 1.6s ease-in-out infinite;
}
@keyframes bar { 0%,100%{ height:22% } 50%{ height:82% } }

.app__metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; }
.app__metrics > div {
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  border-radius:13px; padding:10px 6px; text-align:center;
}
.app__metrics b { display:block; font-size:17px; font-weight:700; color:#fff; direction:ltr; }
.app__metrics b small { font-size:10px; color:var(--on-dark-3); font-weight:500; }
.app__metrics span { display:block; font-size:10.5px; color:var(--on-dark-3); margin-top:3px;
  direction:ltr; }

/* حجم */
.app__data {
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:17px; padding:12px 14px;
}
.app__data .row { display:flex; justify-content:space-between; font-size:11px;
  color:var(--on-dark-3); margin-bottom:8px; }
.app__data .row .mono { font-size:13px; color:#fff; }
.app__data .row--sm { margin:9px 0 0; font-size:10.5px; }
.app__data .track { height:7px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.app__data .fill {
  height:100%; width:0; border-radius:99px; position:relative; overflow:hidden;
  background: linear-gradient(90deg, var(--brand), var(--brand-3));
  transition: width 1.6s cubic-bezier(.2,.8,.3,1);
}
.app__data .fill::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  animation: appsweep 2.8s ease-in-out infinite;
}
@keyframes appsweep { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(100%)} }

/* ردیف‌های انتخاب */
.app__pick {
  display:flex; align-items:center; gap:12px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:17px; padding:11px 14px;
  transition: background .22s, border-color .22s, transform .22s;
}
.app__pick:hover { background: rgba(255,255,255,.085); border-color: rgba(255,255,255,.18);
  transform: translateY(-2px); }
.app__pick-ico {
  width:38px; height:38px; flex:none; border-radius:13px; display:grid; place-items:center;
  font-size:19px; line-height:1;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
}
.app__pick-ico--round { width:32px; height:32px; border-radius:50%; font-size:17px; }
.app__pick-ico--soft { color: var(--brand-3); }
.app__pick-ico--soft svg { width:21px; height:21px; fill:none; }
.app__pick-txt { flex:1; min-width:0; }
.app__pick-txt em { display:block; font-style:normal; font-size:10.5px; color:var(--on-dark-3);
  direction:ltr; }
.app__pick-txt b { display:block; font-size:13.5px; color:#fff; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.app__go { width:17px; height:17px; flex:none; color:var(--on-dark-3); transform:scaleX(-1); }
.app__go--down { transform:none; }

.app__load { display:flex; align-items:flex-end; gap:2.5px; height:13px; flex:none; }
.app__load i { width:3.5px; border-radius:2px; background:rgba(255,255,255,.16); }
.app__load i:nth-child(1){ height:45%; background:var(--online) }
.app__load i:nth-child(2){ height:72% } .app__load i:nth-child(3){ height:100% }

/* ------------------------------------------------- نوارهای پشتیبانی */

.strip { position:relative; border-top:1px solid var(--line); background:var(--paper-2); overflow:hidden; }
.strip--alt { background:#fff; border-bottom:1px solid var(--line); }
.marquee { display:flex; width:max-content; animation: marq 45s linear infinite; }
.marquee--rev { animation-direction: reverse; animation-duration: 55s; }
.marquee__row { display:flex; gap:var(--s7); padding: var(--s4) 0; padding-inline-end: var(--s7); }
.strip:hover .marquee { animation-play-state: paused; }
.strip span { font-size:15px; font-weight:700; color:var(--ink-3); white-space:nowrap; }
.strip--alt span { color:var(--ink-2); }
@keyframes marq { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* --------------------------------------------------------- کاربردها */

.usecase {
  background: rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.1);
  border-radius: var(--r4); padding: var(--s6) var(--s5);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), background .25s;
}
.usecase:hover { transform: translateY(-4px); background: rgba(255,255,255,.07); }
.usecase__icon {
  width:46px; height:46px; border-radius:var(--r2); display:grid; place-items:center;
  background: rgba(var(--brand3-rgb),.14); border:1px solid rgba(var(--brand3-rgb),.22); margin-bottom:var(--s4);
}
.usecase h3 { color:#fff; margin-bottom:8px; }
.usecase p { color:var(--on-dark-2); font-size:14.5px; }
.usecase .ticks li { font-size:14px; }
.usecase .ticks li::before { content:"›"; color:var(--brand-mid); font-weight:800; }

/* ------------------------------------------------ نوار یادداشت پایین */

.note-strip { background: var(--paper-2); border-top:1px solid var(--line); padding: var(--s5) 0; }
.note-strip .wrap { display:flex; align-items:center; justify-content:center; gap:10px;
  color: var(--ink-3); font-size:14px; text-align:center; }
.note-strip svg { flex:none; color: var(--brand); }

/* --------------------------------------------------------- چت پشتیبانی */

.chat-fab {
  position: fixed; right:22px; bottom:22px; z-index:95;
  width:56px; height:56px; border-radius:50%; border:0; cursor:pointer;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  display:grid; place-items:center;
  box-shadow: 0 14px 34px -12px rgba(var(--brand-rgb),.75);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s;
}
.chat-fab:hover { transform: translateY(-3px) scale(1.04); }
.chat-fab svg { grid-area:1/1; transition: opacity .2s, transform .25s; }
.chat-fab__close { opacity:0; transform: rotate(-45deg); }
.chat-fab.on .chat-fab__open  { opacity:0; transform: rotate(45deg); }
.chat-fab.on .chat-fab__close { opacity:1; transform: none; }
.chat-fab__dot {
  position:absolute; top:3px; right:3px; width:12px; height:12px;
  border-radius:50%; background:var(--online); border:2px solid #fff;
}
.chat-fab.on .chat-fab__dot { display:none; }

.chat {
  position: fixed; right:22px; bottom:92px; z-index:95;
  width: min(360px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 130px));
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius: var(--r4);
  box-shadow: 0 30px 70px -30px rgba(23,17,15,.5);
  transform-origin: bottom right;
  animation: chatIn .28s cubic-bezier(.2,.9,.3,1);
}

@keyframes chatIn { from{ opacity:0; transform: translateY(14px) scale(.96) } to{ opacity:1; transform:none } }

.chat__head { background: linear-gradient(135deg, var(--maroon), var(--maroon-2)); padding: var(--s4) var(--s5); }
.chat__who { display:flex; align-items:center; gap:11px; }
.chat__avatar {
  width:38px; height:38px; border-radius:50%; flex:none; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-3)); color:#fff; font-weight:800;
}
.chat__who b { display:block; color:#fff; font-size:14.5px; }
.chat__who span { display:flex; align-items:center; gap:6px; font-size:11.5px; color:var(--on-dark-2); }

.chat__body { flex:1; overflow-y:auto; padding: var(--s5); display:flex; flex-direction:column; gap:10px; }
.chat__msg { max-width:85%; padding:11px 14px; border-radius:14px; font-size:14px; line-height:1.85; }
.chat__msg--in  { background: var(--paper-2); border:1px solid var(--line); border-end-start-radius:4px; }
.chat__msg--out { background: var(--brand); color:#fff; align-self:flex-end; border-end-end-radius:4px; }

.chat__foot { padding: var(--s4) var(--s5) var(--s5); border-top:1px solid var(--line); background:var(--paper-2); }

@media (max-width: 560px) {
  .chat-fab { right:16px; bottom:16px; width:52px; height:52px; }
  .chat { left:16px; right:16px; bottom:80px; width:auto; }
}

/* ---------------------------------------------------------- بخش‌ها */

.sec { padding: var(--s9) 0; position:relative; }
.sec--tight { padding: var(--s8) 0; }
.sec--soft { background: var(--paper-2); border-block:1px solid var(--line); }
.sec__head { max-width:44em; margin-bottom: var(--s7); }
.sec__head p { margin-top: var(--s3); }
.sec__head--center { margin-inline:auto; text-align:center; }
.sec__head--center .eyebrow { justify-content:center; }

/* بلوک تیره */
.dark { background: linear-gradient(160deg, var(--maroon), var(--dark-end)); color:var(--on-dark); position:relative; overflow:hidden; }
.dark::before {
  content:""; position:absolute; top:-160px; inset-inline-start:-120px;
  width:520px; height:520px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--brand2-rgb),.16), transparent 62%);
}
.dark h2 { color:#fff; }
.dark p  { color:#d3b3a8; }
.dark__grid { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }

.ticks { list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3); }
.ticks li { display:flex; gap:11px; font-size:15px; color:var(--on-dark); }
.ticks li svg { flex:none; margin-top:6px; }

.stats { display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r3); overflow:hidden; }
.stat { background:var(--maroon-2); padding:var(--s5); }
.stat b { display:block; font-size:30px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; }
.stat span { font-size:12.5px; color:var(--on-dark-2); }

/* کارت‌ها */
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.card {
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r3); padding:var(--s5);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.card:hover { transform: translateY(-4px); border-color:var(--line-2); box-shadow: var(--shadow-m); }
.card__icon {
  width:44px; height:44px; border-radius:var(--r2); display:grid; place-items:center;
  background: var(--brand-soft); color:var(--brand); margin-bottom:var(--s4);
}
.card h3 { margin-bottom:8px; }
.card p { font-size:14.5px; color:var(--ink-2); }

/* قدم‌ها */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s6); position:relative; }
.step__n {
  width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  font-weight:800; font-size:16px; margin-bottom:var(--s4);
  box-shadow: 0 10px 24px -12px rgba(var(--brand-rgb),.8);
}
.step h3 { margin-bottom:8px; }
.step p { font-size:14.5px; color:var(--ink-2); }

/* پلن‌ها */
.plans { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s5); }
.plan {
  position:relative; display:flex; flex-direction:column; gap:var(--s4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r4); padding:var(--s6) var(--s5);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.plan:hover { transform:translateY(-5px); box-shadow:var(--shadow-m); }
.plan--pop { border-color: var(--brand); box-shadow: var(--shadow-m); }
.plan--pop::before {
  content:""; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),.18), transparent 45%);
}
.plan__badge { position:absolute; top:-12px; inset-inline-start:var(--s5); }
.plan__traffic { font-size:34px; font-weight:800; letter-spacing:-.03em; }
.plan__traffic small { font-size:15px; font-weight:600; color:var(--ink-3); margin-inline-start:5px; }
.plan__meta { font-size:14px; color:var(--ink-3); }
.plan__price { font-size:25px; font-weight:800; font-variant-numeric:tabular-nums; }
.plan__price small { font-size:13px; font-weight:600; color:var(--ink-3); margin-inline-start:5px; }
.plan ul { list-style:none; margin:0; padding:0; display:grid; gap:9px; font-size:14px; color:var(--ink-2); }
.plan ul li { display:flex; gap:9px; }
.plan .btn { margin-top:auto; }

.empty {
  border:1.5px dashed var(--line-2); border-radius:var(--r3);
  padding:var(--s8) var(--s5); text-align:center; color:var(--ink-3); background:var(--paper-2);
}

/* سرورها */
.nodes { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s4); }
.node {
  display:flex; align-items:center; gap:var(--s3);
  background:#fff; border:1px solid var(--line); border-radius:var(--r2); padding:14px 16px;
}
.node b { font-size:14.5px; }
.node span { font-size:12.5px; color:var(--ink-3); }
.node .ping { margin-inline-start:auto; font-family:var(--mono); font-size:13px; color:var(--online); }

/* پلتفرم‌ها */
.platforms { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s5); }
.platform {
  display:flex; align-items:center; gap:var(--s4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5);
}
.platform__icon { width:48px; height:48px; border-radius:var(--r2); display:grid; place-items:center;
  background:var(--paper-3); flex:none; }
.platform h3 { font-size:16px; }
.platform p { font-size:13.5px; color:var(--ink-3); }
/* :not لازمه — آیکن هم یه div است و بدون این، کشیده می‌شد و متن رو له می‌کرد */
.platform > div:not(.platform__icon) { min-width: 0; flex: 1; }
.platform .btn, .platform .tag { flex: none; }

/* موبایل: سه ستون کنار هم جا نمی‌شه و متن تیکه‌تیکه می‌شکست.
   آیکن و متن بالا، دکمه تمام‌عرض پایین. */
@media (max-width: 560px) {
  .platform { flex-wrap: wrap; gap: 12px 14px; padding: 18px 16px; }
  .platform__icon { order: 1; }
  .platform > div:not(.platform__icon) { order: 2; flex: 1 1 auto; }
  .platform .btn { order: 3; width: 100%; }
  .platform .tag { order: 3; }
  .platform p { white-space: normal; }
}

/* سوالات */
.faq { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  list-style:none; cursor:pointer; padding:var(--s5) 0; font-weight:700; font-size:16.5px;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  transition: color .2s;
}
.faq summary:hover { color: var(--brand); }
.faq summary::-webkit-details-marker { display:none; }
.faq summary i {
  flex:none; width:26px; height:26px; border-radius:50%; border:1px solid var(--line-2);
  display:grid; place-items:center; font-style:normal; font-size:16px; color:var(--brand);
  transition: transform .25s, background .2s;
}
.faq details[open] summary i { transform: rotate(45deg); background:var(--brand-soft); }
.faq .ans { padding-bottom:var(--s5); font-size:15px; color:var(--ink-2); max-width:60em; }

/* فراخوان */
.cta {
  position:relative; overflow:hidden;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-2) 70%, var(--brand));
  border-radius: var(--r5); padding: var(--s8) var(--s7); color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap;
}
.cta::before {
  content:""; position:absolute; inset-inline-end:-90px; top:-90px;
  width:340px; height:340px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,255,255,.15), transparent 62%);
}
.cta h2 { color:#fff; position:relative; }
.cta p { color:#e6c6ba; margin-top:var(--s2); position:relative; }
.cta .btn { position:relative; }

/* ---------------------------------------------------------- فوتر */

.footer { background: #1c1310; color:#a2938e; padding: var(--s8) 0 var(--s5); }
/* ستون آخر (وضعیت و نشان‌ها) باید دو تا نشان رو کنار هم جا بده. با
   1fr خالص ۲۳۰ پیکسل می‌شد و نشان‌ها زیر هم می‌افتادن. */
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr minmax(272px, 1.2fr); gap:var(--s6); }
.footer h4 { color:#fff; font-size:14px; margin-bottom:var(--s3); }
.footer a { display:block; padding:5px 0; font-size:14px; transition:color .2s, padding .2s; }
.footer a:hover { color:#fff; padding-inline-start:5px; }
.footer p { font-size:14px; line-height:2; }
.footer__bottom {
  margin-top:var(--s7); padding-top:var(--s4); border-top:1px solid rgba(255,255,255,.1);
  display:flex; justify-content:space-between; gap:var(--s4); flex-wrap:wrap; font-size:13px;
}
.footer__bottom b { color:#fff; }

/* ------------------------------------------------------- انیمیشن */

/* فقط وقتی جاوااسکریپت هست مخفی می‌شن — وگرنه صفحه خالی می‌مونه */
.js .reveal { opacity:0; transform: translateY(26px); }
.js .reveal.in { opacity:1; transform:none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.3,1); }
.reveal.d1.in { transition-delay:.08s } .reveal.d2.in { transition-delay:.16s }
.reveal.d3.in { transition-delay:.24s } .reveal.d4.in { transition-delay:.32s }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ------------------------------------------------------ ریسپانسیو */

@media (max-width: 980px) {
  .hero__grid, .dark__grid { grid-template-columns:1fr; gap:var(--s6); }
  .cards, .steps, .platforms { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr 1fr; }
  .sec { padding: var(--s8) 0; }
}

@media (max-width: 560px) {
  body { font-size:15.5px; }
  .stats { grid-template-columns:1fr; }
  .footer__grid { grid-template-columns:1fr; }
  .cta { padding:var(--s6) var(--s5); text-align:center; justify-content:center; }
  .wrap { padding-inline:var(--s4); }
  .hero { padding-top: var(--s6); }
}

/* --------------------------------------------------- هاله‌ی موس */

.glow {
  position: fixed; top:0; left:0; width:320px; height:320px; margin:-160px 0 0 -160px;
  contain: strict;
  border-radius:50%; pointer-events:none; z-index:1; opacity:0;
  transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(var(--brand-rgb),.16), rgba(var(--brand2-rgb),.07) 40%, transparent 70%);
  will-change: transform;
}
.glow.on { opacity:1; }
@media (hover: none), (prefers-reduced-motion: reduce) { .glow { display:none; } }

/* ------------------------------------------------ صفحه پشتیبانی */

.page-head { padding: var(--s8) 0 var(--s6); border-bottom:1px solid var(--line); background:var(--paper-2); }

.support { display:grid; grid-template-columns: 1fr 320px; gap: var(--s5); align-items:start; }
.support__main { padding:0; overflow:hidden; display:flex; flex-direction:column; min-height:420px; }
.support__chat { flex:1; padding: var(--s5); display:flex; flex-direction:column; gap:10px; }
.support__lock {
  border-top:1px solid var(--line); background:var(--paper-2);
  padding: var(--s6) var(--s5); text-align:center;
}
.support__lock svg { margin:0 auto 10px; }
.support__lock b { display:block; margin-bottom:4px; }
.support__side { display:grid; gap: var(--s4); }
.chat__time { font-size:11.5px; color:var(--ink-3); margin-top:6px; }

@media (max-width: 900px) { .support { grid-template-columns:1fr; } }

/* ================================================= ورود و ثبت‌نام

   یک تعریف، نه بیشتر. قبلاً سه جای مختلف .authpage و .authcard تعریف شده
   بود با عرض‌های ۳۸۰ و ۴۳۰ و ۴۸۰؛ هر property از یکی برنده می‌شد و کارت
   بین مرحله‌ها می‌پرید و جابه‌جا می‌شد. */

.authpage {
  display: grid; place-items: start center;
  min-height: calc(100vh - 200px);
  padding: clamp(40px, 7vh, 84px) 20px 96px;
}
.authcard {
  width: 100%; max-width: 460px;
  background: #fff; border: 1px solid var(--line); border-radius: 26px;
  padding: clamp(26px, 4vw, 42px);
  box-shadow: 0 24px 60px -32px rgba(0,0,0,.28);
  /* ارتفاع بین مرحله‌ها فرق می‌کنه؛ این کف ثابت جلوی پرش رو می‌گیره */
  min-height: 430px;
  display: flex; flex-direction: column;
  animation: authIn .5s cubic-bezier(.2,.85,.3,1) both;
}
/* کادر مربع بود ولی نشان ۱.۴۵ به ۱ ـه — بالا و پایینش خالی می‌موند. */
.authcard__mark { position:relative; display:block; width:58px; height:40px;
  margin:0 auto 20px }
.authcard__mark svg { width:100%; height:100%;
  animation: markPop .6s cubic-bezier(.2,.9,.3,1.2) both .1s }
/* همون درخششِ هدر، بعد از این‌که نشان نشست. */
.authcard__mark::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%,
              rgba(255,255,255,.85) 50%, transparent 58%);
  background-size:260% 100%;
  -webkit-mask:url(/static/img/logo-mark.svg) center/contain no-repeat;
          mask:url(/static/img/logo-mark.svg) center/contain no-repeat;
  animation:markSheen 1s ease-out .75s both;
}
@media (prefers-reduced-motion: reduce) {
  .authcard__mark::after { animation:none }
}
.authcard h1 { font-size: clamp(21px, 2.8vw, 26px); text-align: center;
  margin-bottom: 6px }
.authcard__lede { font-size: 13.5px; color: var(--ink-3); text-align: center;
  line-height: 2; margin-bottom: 22px }
.authcard__lede b { color: var(--ink); font-weight: 700 }
.authcard form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px }
.authcard .field { margin: 0 }
.authcard .input { padding: 14px 16px; font-size: 14.5px; border-radius: 14px }
.authcard .btn--lg { padding: 15px; font-size: 15px; border-radius: 14px }
.authcard__resend { margin-top: 14px; text-align: center }
.authcard__foot { margin-top: auto; padding-top: 20px;
  border-top: 1px solid var(--line); text-align: center; font-size: 13.5px;
  color: var(--ink-3) }
.authcard__foot a { color: var(--brand); font-weight: 700 }
.center { text-align: center }

@keyframes authIn { from { opacity:0; transform:translateY(14px) scale(.985) } }
@keyframes markPop { from { opacity:0; transform:scale(.7) rotate(-8deg) } }

.linkbtn { background:none; border:0; padding:0; font:inherit; font-size:13px;
  color:var(--brand); font-weight:700; cursor:pointer; }
.linkbtn:disabled { color:var(--ink-3); cursor:default; }

/* پله‌های ثبت‌نام */
.authsteps { display:flex; align-items:center; gap:6px; margin-bottom:var(--s5); }
.authsteps li { flex:1; display:flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-3); }
.authsteps b {
  width:24px; height:24px; flex:none; display:grid; place-items:center;
  border-radius:50%; background:var(--paper-3); color:var(--ink-3);
  font-size:12px; font-weight:700; transition:background .25s, color .25s;
}
.authsteps .on b    { background:var(--brand); color:#fff; }
.authsteps .on span { color:var(--ink); font-weight:700; }
.authsteps .done b  { background:var(--brand-soft); color:var(--brand); }

.input--code {
  text-align:center; font-family:var(--mono); font-size:26px;
  letter-spacing:.5em; padding-inline-start:.5em;
}

.field { position:relative; }
.field__hint { display:block; font-style:normal; font-size:12px;
  color:var(--ink-3); margin-top:6px; }
.field__side { position:absolute; top:0; inset-inline-end:0;
  font-size:12px; color:var(--brand); font-weight:700; }

/* فرم‌ها */
.field { display:block; margin-bottom: var(--s4); }
.field > span { display:block; font-size:13.5px; font-weight:700; margin-bottom:6px; }
.field .hint { display:block; font-weight:400; font-size:12px; color:var(--ink-3); margin-top:5px; }
.input, .select, .textarea {
  width:100%; padding:11px 14px; background:#fff;
  border:1px solid var(--line-2); border-radius:var(--r2);
  transition: border-color .18s, box-shadow .18s;
}
.input:focus, .select:focus, .textarea:focus {
  outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(var(--brand-rgb),.12);
}
.select { appearance:none; cursor:pointer; }
.check { display:flex; align-items:center; gap:9px; font-size:14px; margin-bottom: var(--s4); }
.check input { width:17px; height:17px; accent-color: var(--brand); }

.alert { border-radius:var(--r2); padding:12px 16px; font-size:14px; margin-bottom: var(--s4); }
.alert--bad  { background:#fdecea; border:1px solid #f3c4bd; color:#8c2d18; }
.alert--ok   { background:var(--online-soft); border:1px solid #bfe7cf; color:#0f7a37; }
.alert--warn { background:#fdf5e3; border:1px solid #ecdcb1; color:#8a6512; }

/* ====================================================== پنل مدیریت */

.adminbody { background: var(--paper-2); }
.shell { display:grid; grid-template-columns: 250px 1fr; min-height:100vh; }

.side { background:#1c1310; color:#a2938e; padding: var(--s5) var(--s4);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.side__brand { display:flex; align-items:center; gap:10px; color:#fff;
  font-weight:800; padding: 0 var(--s3) var(--s5); }
.side__brand small { display:block; font-size:11px; font-weight:500; color:#a2938e; }
.side__nav { display:grid; gap:2px; }
.side__nav a { padding:11px var(--s3); border-radius:var(--r2); font-size:14.5px; font-weight:600;
  transition: background .18s, color .18s; }
.side__nav a:hover { background: rgba(255,255,255,.06); color:#fff; }
.side__nav a.on { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff; }
.side__foot { margin-top:auto; display:grid; gap:4px; padding: var(--s4) var(--s3) 0;
  border-top:1px solid rgba(255,255,255,.1); }
.side__foot a:hover { color:#fff; }

.content { padding: var(--s6) var(--s7) var(--s9); min-width:0; }
.content__head { display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); margin-bottom: var(--s6); flex-wrap:wrap; }
.content__head h1 { font-size:26px; }

.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap: var(--s4); }
.tile { background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding: var(--s5); }
.tile span { font-size:13px; color:var(--ink-3); }
.tile b { display:block; font-size:28px; font-weight:800; margin-top:4px; font-variant-numeric:tabular-nums; }
.tile b small { font-size:14px; font-weight:600; color:var(--ink-3); }
.tile--wide { grid-column: span 2; }

.panel { background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding: var(--s5); }
.panel h2 { font-size:17px; margin-bottom: var(--s4); }

.grid-form { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap: var(--s3) var(--s4); align-items:start; }
.grid-form--tight { gap: var(--s2) var(--s3); }
.grid-form .btn { align-self:end; }

.stack { display:grid; gap: var(--s4); }
.rowcard { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r3); padding: var(--s5); }
.rowcard--off { opacity:.6; }
.rowcard__top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom: var(--s4); }
.rowcard__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top: var(--s4);
  padding-top: var(--s3); border-top:1px dashed var(--line-2); }
.danger { color:#a8331a; border-color:#e8c0b6; }
.danger:hover { background:#fdecea; border-color:#d8907e; }

.routes { display:flex; flex-wrap:wrap; gap:8px; margin-bottom: var(--s3); }
.route { display:inline-flex; align-items:center; gap:7px; background:#fff;
  border:1px solid var(--line-2); border-radius:99px; padding:5px 12px; font-size:13px; direction:ltr; }
.route code { background:var(--brand-soft); color:var(--brand); border-radius:4px; padding:1px 6px; font-size:11px; }
.route button { background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:16px; line-height:1; }
.route button:hover { color:#a8331a; }
.routeform { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.routeform .select { width:auto; }
.routeform .input { flex:1; min-width:220px; }

.table { width:100%; border-collapse:collapse; font-size:14px; }
.table td { padding:10px 8px; border-bottom:1px solid var(--line); }
.table tr:last-child td { border-bottom:0; }
code { font-family: var(--mono); font-size:12.5px; }

@media (max-width: 900px) {
  .shell { grid-template-columns:1fr; }
  .side { position:static; height:auto; flex-direction:row; align-items:center;
    gap:var(--s4); overflow-x:auto; padding: var(--s3) var(--s4); }
  .side__brand { padding:0; }
  .side__nav { display:flex; gap:4px; }
  .side__foot { margin:0 0 0 auto; display:flex; gap:12px; border:0; padding:0; }
  .content { padding: var(--s5) var(--s4) var(--s8); }
  .tile--wide { grid-column:auto; }
}

/* ============================================ بازطراحی — مرحله دوم */

.narrow { max-width: 760px; padding-bottom: 110px; }

/* نوار پشتیبانی‌شده‌ها وقتی کم است */
.strip--static { padding: var(--s4) 0; }
.strip__static { display:flex; flex-wrap:wrap; gap: var(--s3) var(--s6);
  justify-content:center; align-items:center; }
.strip__static span { font-size:14.5px; font-weight:700; color:var(--ink-3); }
.strip__static span.is-game { color: var(--brand); }
.marquee span.is-game { color: var(--brand); }

/* منوی کاربر در هدر */
.usermenu { position:relative; }
.usermenu__btn {
  display:flex; align-items:center; gap:8px; cursor:pointer;
  background:#fff; border:1px solid var(--line-2); border-radius:99px;
  padding:5px 12px 5px 6px; font-size:13.5px; font-weight:600;
  transition: border-color .18s, box-shadow .18s;
}
.usermenu__btn:hover { border-color: var(--ink-3); }
.usermenu__av {
  width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff; font-size:13px; font-weight:800;
}
.usermenu__name { max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.usermenu__drop {
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; min-width:170px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r2);
  box-shadow: var(--shadow-m); padding:6px; display:none; z-index:90;
}
.usermenu.open .usermenu__drop { display:block; }
.usermenu__drop a { display:block; padding:9px 12px; border-radius:6px; font-size:14px; }
.usermenu__drop a:hover { background: var(--paper-2); }
.usermenu__drop a.danger { color:#a8331a; }

/* کارت پلن */
/* صفحه پشتیبانی */
.chatbox { min-height:180px; display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.chat__msg { max-width:80%; padding:11px 14px; border-radius:14px; font-size:14px; }
.chat__msg--in { background: var(--paper-2); border:1px solid var(--line); }
.chatform { display:flex; gap:8px; }
.chatform .input { flex:1; }
.quick { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; margin-top:20px; }
.quick__item { background:#fff; border:1px solid var(--line); border-radius:var(--r2);
  padding:16px; transition: border-color .18s, transform .18s; }
.quick__item:hover { border-color: var(--brand); transform: translateY(-2px); }
.quick__item b { display:block; font-size:14.5px; }
.quick__item span { font-size:12.5px; color:var(--ink-3); }

/* ================================================ چیپ‌های پشتیبانی */

.chips { border-top:1px solid var(--line); padding: var(--s5) 0; }
.chips--games { background: var(--paper-2); }
.chips--dev { background:#fff; border-bottom:1px solid var(--line); }
.chips__row { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.chip {
  display:inline-flex; align-items:center;
  padding:8px 18px; border-radius:99px;
  border:1px solid var(--line-2); background:#fff;
  font-size:14px; font-weight:700; color:var(--ink-2); white-space:nowrap;
  opacity:0; transform: translateY(10px);
  animation: chipIn .5s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--i) * 60ms);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.chip:hover { transform: translateY(-3px); border-color: var(--ink-3); box-shadow: var(--shadow-s); }
.chip--game { border-color:var(--brand-line); background: var(--brand-soft); color: var(--brand); }
.chip--game:hover { border-color: var(--brand); }
@keyframes chipIn { to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .chip { opacity:1; transform:none; animation:none; } }

/* =================================================== کارت پلن (نهایی) */

.pcards { display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap: var(--s5);
  max-width:1040px; margin-inline:auto; align-items:stretch; }

.pcard {
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--line); border-radius: 24px;
  padding: var(--s5); text-align:start;
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.pcard:hover { transform: translateY(-6px); border-color: var(--line-2);
  box-shadow: 0 30px 60px -34px rgba(var(--maroon-rgb),.45); }

/* خط نازک رنگی بالای کارت */
.pcard::after {
  content:""; position:absolute; inset-inline:0; top:0; height:3px;
  background: linear-gradient(90deg, transparent, var(--brand-2), transparent);
  opacity:0; transition: opacity .25s;
}
.pcard:hover::after, .pcard--pop::after { opacity:1; }

/* ── سربرگ: نام پلن + نشان */
.pcard__head { display:flex; align-items:center; gap:10px; margin-bottom: var(--s4); }
.pcard__name { font-size:15px; font-weight:800; }
.pcard__badge {
  margin-inline-start:auto; flex:none;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color:#fff;
  font-size:11px; font-weight:800; padding:4px 11px; border-radius:99px; white-space:nowrap;
  box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb),.9);
}

/* ── قیمت، بزرگ‌ترین چیز کارت */
.pcard__price { display:flex; align-items:baseline; justify-content:center; gap:7px;
  flex-wrap:wrap; text-align:center; }
.pcard__price b { font-size:30px; font-weight:800; line-height:1.15;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; }
.pcard__price span { font-size:13px; font-weight:700; color:var(--ink-3); }


/* ── دو خانه‌ی حجم و مدت */
.pcard__specs { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin: var(--s5) 0 var(--s4); }
.spec {
  background: var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:12px 13px; text-align:center;
}
.spec b { display:block; font-size:20px; font-weight:800; letter-spacing:-.03em; line-height:1.2; }
.spec span { display:block; font-size:11px; color:var(--ink-3); margin-top:3px; }

.pcard__list {
  list-style:none; margin:0 0 var(--s5); padding: var(--s4) 0 0;
  border-top:1px solid var(--line); display:grid; gap:10px;
}
.pcard__list li { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-2); }
.pcard__list li::before {
  content:"✓"; flex:none; width:18px; height:18px; border-radius:50%;
  background: var(--brand-soft); color: var(--brand);
  display:grid; place-items:center; font-size:10.5px; font-weight:800;
}
.pcard .btn { margin-top:auto; }

/* ── کارت پیشنهادی: همون کارت برنامه */
.pcard--pop {
  background: linear-gradient(165deg, var(--maroon), var(--maroon-2));
  border-color: transparent; color:var(--on-dark);
  box-shadow: 0 26px 60px -30px rgba(var(--maroon-rgb),.8);
}
.pcard--pop::before {
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(120% 55% at 50% 0%, rgba(var(--brand2-rgb),.3), transparent 62%);
}
.pcard--pop > * { position:relative; }
.pcard--pop .pcard__name, .pcard--pop .pcard__price b, .pcard--pop .spec b { color:#fff; }
.pcard--pop .pcard__price span,
.pcard--pop .spec span { color:var(--on-dark-2); }
.pcard--pop .spec { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.1); }
.pcard--pop .pcard__list { border-color: rgba(255,255,255,.13); }
.pcard--pop .pcard__list li { color:var(--on-dark-2); }
.pcard--pop .pcard__list li::before { background: rgba(var(--brand3-rgb),.22); color: var(--brand-3); }

/* ================================================= امکانات برنامه */

.feats { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap: var(--s4); }
.feat {
  background:#fff; border:1px solid var(--line); border-radius:var(--r3);
  padding: var(--s5); transition: transform .22s, border-color .22s, box-shadow .22s;
}
.feat:hover { transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-s); }
.feat svg { width:22px; height:22px; color: var(--brand); margin-bottom:12px; }
.feat b { display:block; font-size:15px; margin-bottom:3px; }
.feat span { font-size:13px; color: var(--ink-3); }

/* ==================================================== صفحه خرید */
.buygrid { display:grid; grid-template-columns:1fr 300px; gap: var(--s5); align-items:start; padding-bottom:110px; }
.buysum { position:sticky; top:90px; text-align:center; }
.buysum__total { display:flex; justify-content:space-between; align-items:baseline;
  margin-top:18px; padding-top:14px; border-top:2px solid var(--ink); text-align:start; }
.buysum__total b { font-size:20px; font-variant-numeric:tabular-nums; }
.paybox { display:flex; align-items:center; gap:12px; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--r2); padding:12px 16px; margin-bottom:10px; }
.paybox__label { font-size:13px; color:var(--ink-3); }
.paybox__amount { margin-inline-start:auto; font-size:19px; font-variant-numeric:tabular-nums; }
.paybox--card b { margin-inline-start:auto; font-size:17px; letter-spacing:.08em; }
.paybox--card .btn { flex:none; }

/* سفارش‌ها در پنل */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom: var(--s5); }
.tabbtn { padding:8px 16px; border-radius:99px; border:1px solid var(--line-2);
  background:#fff; font-size:13.5px; font-weight:700; color:var(--ink-2); }
.tabbtn.on { background: var(--ink); color:#fff; border-color: var(--ink); }
.tabbtn b { color: var(--brand); }
.tabbtn.on b { color: var(--brand-3); }
.ordergrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; font-size:14px; }
.ordergrid div span { display:block; font-size:12px; color:var(--ink-3); }
.rowcard--pending  { border-inline-start:3px solid var(--warn); }
.rowcard--approved { border-inline-start:3px solid var(--online); }
.rowcard--rejected { border-inline-start:3px solid #b5453a; }
.inline-form { display:flex; gap:8px; flex:1; min-width:260px; }
.inline-form .input { flex:1; }
@media (max-width: 860px) { .buygrid { grid-template-columns:1fr; } .buysum { position:static; } }
.couponform { display:flex; gap:8px; margin-top:12px; }
.couponform .input { flex:1; }
.table tr.off { opacity:.55; }
.err { color:#a8331a; font-size:13px; margin-top:6px; }

/* ------------------------------------------------ گفتگوی تیکت */
.thread { display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.msg { max-width:78%; }
.msg--user  { align-self:flex-start; }
.msg--admin { align-self:flex-end; }
.msg__body { padding:12px 15px; border-radius:16px; font-size:14.5px; line-height:1.9; white-space:pre-wrap; }
.msg--user  .msg__body { background:var(--paper-2); border:1px solid var(--line); border-end-start-radius:5px; }
.msg--admin .msg__body { background:var(--brand); color:#fff; border-end-end-radius:5px; }
.msg__time { font-size:11px; color:var(--ink-3); margin-top:5px; }
.msg--admin .msg__time { text-align:end; }
.replyform { display:flex; gap:10px; align-items:flex-start; }
.replyform .input { flex:1; resize:vertical; }
@media (max-width:560px){ .replyform{flex-direction:column} .replyform .input{width:100%} .msg{max-width:92%} }

/* نوار اعلان بالای سایت */
.topnote {
  background: linear-gradient(90deg, var(--maroon), var(--maroon-2) 60%, var(--maroon));
  color:#f6e2da; text-align:center; padding:9px var(--s4); font-size:13.5px;
}
.topnote a { text-decoration:underline; }

/* ------------------------------------------- صفحه پشتیبانی (تمیز) */
.sup { max-width: 680px; padding: 64px 24px 120px; }
.sup__head { display:flex; align-items:flex-start; justify-content:space-between;
  gap:16px; margin-bottom:26px; }
.sup__head h1 { font-size:24px; }
.sup__back { font-size:13px; color:var(--ink-3); }
.sup__back:hover { color:var(--brand); }
.sup__empty { text-align:center; padding:56px 24px; border:1px solid var(--line);
  border-radius:var(--r3); background:#fff; }
.sup__actions { display:flex; gap:10px; justify-content:center; margin-top:18px; }
.sup__closed { font-size:14px; color:var(--ink-3); text-align:center; padding:18px; }
.sup__closed a { color:var(--brand); text-decoration:underline; }

.tklist { display:grid; gap:8px; margin-bottom:20px; }
.tk { display:flex; align-items:center; gap:12px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r2); padding:14px 16px;
  transition: border-color .18s, transform .18s; }
.tk:hover { border-color:var(--line-2); transform:translateY(-1px); }
.tk__dot { width:7px; height:7px; border-radius:50%; background:var(--line-2); flex:none; }
.tk__dot--new { background:var(--brand); }
.tk__main { flex:1; min-width:0; }
.tk__main b { display:block; font-size:14.5px; }
.tk__main span { font-size:12px; color:var(--ink-3); }
.tk__state { font-size:12px; font-weight:700; color:var(--ink-3); white-space:nowrap; }
.tk__state--open { color:var(--warn); }
.tk__state--answered { color:var(--online); }

.newform { display:grid; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:var(--r3); padding:20px; }
.newform .btn { justify-self:start; }

/* --------------------------------------------- مدیریت پلن‌ها */
.plantop { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.newplan { margin-bottom:20px; }
.newplan__foot { display:flex; align-items:center; justify-content:space-between;
  gap:16px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line); }

.planlist { display:grid; gap:10px; }
.planrow { background:#fff; border:1px solid var(--line); border-radius:var(--r2); overflow:hidden; }
.planrow--off { opacity:.6; }
.planrow__head { display:flex; align-items:center; gap:14px; padding:14px 16px; }
.planrow__gb { flex:none; min-width:64px; text-align:center; font-size:20px; font-weight:800;
  color:var(--brand); font-variant-numeric:tabular-nums; }
.planrow__gb i { font-style:normal; font-size:11px; color:var(--ink-3); margin-inline-start:2px; }
.planrow__info { flex:1; min-width:0; }
.planrow__info b { display:block; font-size:14.5px; }
.planrow__info span { font-size:12.5px; color:var(--ink-3); }
.planrow__info code { background:var(--paper-2); border-radius:4px; padding:1px 5px; }
.planrow__toggle { flex:none; }
.planrow__edit { border-top:1px solid var(--line); background:var(--paper-2); padding:16px; }
.planrow__actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
@media (max-width:640px){ .planrow__head{flex-wrap:wrap} .planrow__gb{min-width:48px;font-size:17px} }

/* ---------------------------------------------- صفحه قوانین */

.rulespage { padding: 64px 0 110px; }
.rulespage .sec__head { margin-bottom: var(--s6); }
.rulespage h1 { font-size: clamp(24px,3.6vw,34px); }

.rulesgrid { display:grid; grid-template-columns: 220px 1fr; gap: var(--s5); align-items:start; }

.rulestoc { position:sticky; top: calc(var(--header-h) + 20px); }
.rulestoc b { display:block; font-size:12px; color:var(--ink-3); letter-spacing:.05em;
  margin-bottom:10px; }
.rulestoc ol { list-style:none; margin:0; padding:0; display:grid; gap:2px;
  border-inline-start:2px solid var(--line); }
.rulestoc a { display:block; padding:6px 12px; font-size:13px; color:var(--ink-3);
  border-inline-start:2px solid transparent; margin-inline-start:-2px;
  transition: color .18s, border-color .18s; }
.rulestoc a:hover { color: var(--brand); border-inline-start-color: var(--brand); }

.rules-body { padding: var(--s6); }
.rules-body h2 {
  font-size:17px; margin: var(--s6) 0 var(--s3); scroll-margin-top: calc(var(--header-h) + 24px);
  padding-inline-start:12px; border-inline-start:3px solid var(--brand);
}
.rules-body h2:first-child { margin-top:0; }
.rules-body p { font-size:14.5px; color:var(--ink-2); margin-bottom:12px; line-height:2.15; }
.rules-body__foot {
  margin-top: var(--s6); padding-top: var(--s4); border-top:1px solid var(--line);
  font-size:13.5px; color:var(--ink-3) !important;
}

@media (max-width: 860px) {
  .rulesgrid { grid-template-columns:1fr; }
  .rulestoc { position:static; }
  .rulestoc ol { display:flex; flex-wrap:wrap; gap:6px; border:0; }
  .rulestoc a { border:1px solid var(--line); border-radius:99px; padding:5px 12px; margin:0; }
}

.bootcmd { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; margin:10px 0; overflow-x:auto; }
.bootcmd code { direction:ltr; white-space:nowrap; font-size:12.5px; flex:1 }

/* کانفیگ تست */
.confgrid { display:grid; grid-template-columns:1fr 280px; gap:16px; align-items:start }
.conf { background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:16px; font-family:var(--mono); font-size:12.5px; line-height:1.9;
  direction:ltr; text-align:left; white-space:pre; overflow-x:auto; margin-bottom:14px }
.qrbox { display:grid; place-items:center; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:14px; min-height:220px }
.qrbox canvas { image-rendering:pixelated; width:100%; max-width:230px; height:auto }
@media (max-width:820px){ .confgrid{grid-template-columns:1fr} }

.gameicon{width:34px;height:34px;border-radius:8px;object-fit:cover;border:1px solid var(--line);flex:none}


/* =============================================== پنل: منو و داشبورد */

.side__group {
  display:block; font-size:10.5px; font-weight:700; letter-spacing:.08em;
  color: rgba(255,255,255,.35); margin: 18px 0 6px; padding-inline-start:14px;
}
.side__group:first-of-type { margin-top:10px; }

.side__nav a { display:flex; align-items:center; gap:8px; }
.side__badge {
  margin-inline-start:auto; flex:none; min-width:20px; height:20px; padding:0 6px;
  border-radius:99px; display:grid; place-items:center;
  font-size:11px; font-weight:800; font-style:normal; color:#fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 14px -6px rgba(var(--brand-rgb),.9);
}

/* کارهای مانده */
.todo { display:grid; gap:8px; }
.todo__title { display:block; font-size:12px; color:var(--ink-3); letter-spacing:.04em; }
.todo__item {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 16px; border-radius:var(--r2); font-size:14px;
  border:1px solid; animation: todoIn .4s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes todoIn { from { opacity:0; transform: translateY(8px) } }
.todo__item--bad  { background:#fdecea; border-color:#f3c4bd; color:#8c2d18; }
.todo__item--warn { background:#fdf5e3; border-color:#ecdcb1; color:#8a6512; }
.todo__item--info { background: var(--paper-2); border-color: var(--line); color: var(--ink-2); }
.todo__item .btn { flex:none; }

.tile--link { text-decoration:none; color:inherit; display:block;
  transition: border-color .18s, transform .18s, box-shadow .18s; }
.tile--link:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-s); }
.tiles--money { margin-top:12px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.tile em { display:block; font-style:normal; margin-top:4px; }


/* ============================================ پنل: اشتراک‌ها */

.newsum { cursor:pointer; font-weight:700; font-size:15px; list-style:none; }
.newsum::-webkit-details-marker { display:none; }
.newsum::before { content:"+ "; color:var(--brand); font-weight:800; }
details[open] .newsum::before { content:"− "; }

.subbar { display:flex; gap:8px; align-items:center; margin:20px 0 16px; }
.subbar .input { flex:1; }
.subbar .select { width:190px; }

.subcard {
  background:#fff; border:1px solid var(--line); border-radius:var(--r3);
  margin-bottom:10px; overflow:hidden; transition: border-color .18s, box-shadow .18s;
  scroll-margin-top: 24px;
}
.subcard:hover { border-color: var(--line-2); }
.subcard.open { border-color: var(--brand); box-shadow: var(--shadow-s); }

.subcard__head {
  display:flex; align-items:center; gap:14px; padding:14px 18px; cursor:pointer;
  user-select:none;
}
.subcard__code { font-family:var(--mono); font-size:13px; font-weight:700; direction:ltr; }
.subcard__owner { font-size:13.5px; }
.subcard__usage { font-size:12.5px; font-variant-numeric:tabular-nums;
  margin-inline-start:auto; white-space:nowrap; }
.subcard__days { font-size:12.5px; color:var(--ink-3); white-space:nowrap; }
.subcard__caret { width:16px; height:16px; flex:none; color:var(--ink-3); transition: transform .2s; }
.subcard.open .subcard__caret { transform: rotate(180deg); }

.subbar__track { height:3px; background:var(--paper-3); }
.subbar__track i { display:block; height:100%; background:linear-gradient(90deg,var(--brand),var(--brand-2)); }

.subcard__body { display:none; padding:4px 18px 18px; border-top:1px solid var(--line); }
.subcard.open .subcard__body { display:block; animation: subIn .3s cubic-bezier(.2,.85,.3,1); }
@keyframes subIn { from { opacity:0; transform: translateY(-6px) } }

.subgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px;
  margin-top:14px; }
.subbox { background:var(--paper-2); border:1px solid var(--line); border-radius:var(--r2); padding:14px; }
.subbox > b { display:block; font-size:13px; margin-bottom:10px; }
.subbox .hint { font-weight:400; }

.inline { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.inline + .inline { margin-top:8px; }
.inline .input { flex:0 1 auto; }
.unit { font-size:12.5px; color:var(--ink-3); }

.tag--active    { background:var(--online-soft); border-color:#bfe7cf; color:#0f7a37; }
.tag--expired   { background:var(--paper-3); border-color:var(--line-2); color:var(--ink-3); }
.tag--drained   { background:#fdf5e3; border-color:#ecdcb1; color:#8a6512; }
.tag--suspended { background:#fdecea; border-color:#f3c4bd; color:#8c2d18; }


/* =============================================== پنل: بکاپ */

.bkinds { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.bkind {
  display:flex; flex-direction:column; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:18px;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.bkind:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-s); }
.bkind b { font-size:15px; }
.bkind p { font-size:12.5px; color:var(--ink-3); line-height:2; flex:1; }
.bkind .btn { align-self:flex-start; }

.code-block {
  background: var(--maroon); color: var(--on-dark); border-radius: var(--r2);
  padding:16px; font-family:var(--mono); font-size:12.5px; line-height:2;
  overflow-x:auto; margin-top:12px; white-space:pre;
}

.route--dead { opacity:.5; text-decoration: line-through; }


/* ------------------------------------- افزودن با JSON */

.jsonbox {
  width:100%; font-family:var(--mono); font-size:12.5px; line-height:1.9;
  resize:vertical; min-height:200px;
}
#promptBox { max-height:420px; overflow:auto; white-space:pre-wrap; word-break:break-word; }

.skips { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:6px; }
.skips li {
  font-size:12.5px; color:#8a6512; background:#fdf5e3;
  border:1px solid #ecdcb1; border-radius:var(--r1); padding:7px 11px;
}


/* ============================ نوار پیمایش و برگشت به بالا */

/* اسکرول‌بار هم‌رنگ تم — پیش‌فرض مرورگر وسط این طراحی می‌زد تو ذوق */
* { scrollbar-width: thin; scrollbar-color: var(--brand-3) var(--paper-3); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-2); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  border-radius: 99px; border: 3px solid var(--paper-2);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand), var(--maroon-2));
  background-clip: padding-box;
}
::-webkit-scrollbar-corner { background: var(--paper-2); }

/* نوار باریک بالای صفحه که می‌گه چقدر خوندی */
.readbar {
  position: fixed; inset-inline: 0; top: 0; height: 3px; z-index: 200;
  background: linear-gradient(90deg, var(--brand), var(--brand-2), var(--brand-3));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .08s linear; pointer-events: none;
}
html[dir="rtl"] .readbar { transform-origin: 100% 50%; }

/* برگشت به بالا — پایین سمت چپ، دور از دکمه‌ی چت */
.totop {
  position: fixed; left: 22px; bottom: 22px; z-index: 94;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center;
  background: #fff; color: var(--brand);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-m);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.9);
  transition: opacity .25s, transform .25s cubic-bezier(.2,.9,.3,1), visibility .25s,
              background .2s, color .2s;
}
.totop.on { opacity: 1; visibility: visible; transform: none; }
.totop:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.totop:active { transform: scale(.94); }
.totop svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
  .totop { left: 16px; bottom: 16px; width: 42px; height: 42px; }
}


/* ================================== هدر و منوی موبایل (بازطراحی) */

.header {
  transition: transform .32s cubic-bezier(.2,.9,.3,1), background .28s,
              box-shadow .28s, backdrop-filter .28s, border-color .28s;
}
.header.stuck {
  background: rgba(255,255,255,.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(23,17,15,.5);
}


/* لینک‌های منو: زیرشون یه خط که از وسط باز می‌شه */
.nav a { position: relative; }
.nav a::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 2px; height: 2px;
  border-radius: 2px; background: var(--brand);
  transform: scaleX(0); transform-origin: 50%;
  transition: transform .26s cubic-bezier(.2,.9,.3,1);
}
.nav a:hover::after { transform: scaleX(1); }

.hide-sm { display: inline-flex; }

/* ــ منوی موبایل ــ */

.mobscrim {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98;
  background: rgba(23,17,15,.5); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .28s;
}
.mobscrim.on { opacity: 1; pointer-events: auto; }

/* از سمت چپ میاد بیرون — هم توی فارسی هم انگلیسی، ثابت و قابل‌پیش‌بینی */
/* از سمت راست میاد بیرون — همون سمتی که دکمه‌ی منو هست، پس حرکتش
   با جایی که کاربر انگشتش رو گذاشته جور درمیاد.
   مقدارهای فیزیکی (right/translateX) عمدی‌ان: transform همیشه فیزیکیه،
   پس اگه اینجا منطقی بنویسیم، توی حالت چپ‌چین از هم می‌پاشه. */
.mob {
  position: fixed; top: 0; bottom: 0; right: 0; z-index: 99;
  width: min(330px, 88vw); display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--line);
  box-shadow: -24px 0 60px -28px rgba(23,17,15,.45);
  transform: translateX(101%);
  transition: transform .36s cubic-bezier(.22,.9,.28,1);
}
.mob.open { transform: translateX(0); }

.mob__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.mob__x {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  color: var(--ink-2); cursor: pointer; transition: background .18s, color .18s;
}
.mob__x svg { width: 18px; height: 18px; }
.mob__x:hover { background: var(--paper-2); color: var(--ink); }

.mob__nav { flex: 1; overflow-y: auto; padding: 10px; }
.mob__nav a {
  display: block; padding: 14px 16px; border-radius: var(--r2);
  transition: background .18s, transform .18s;
}
.mob__nav a:hover { background: var(--paper-2); transform: translateX(-3px); }
html[dir="ltr"] .mob__nav a:hover { transform: translateX(3px); }
.mob__nav span { display: block; font-size: 15.5px; font-weight: 700; }
.mob__nav i { display: block; font-style: normal; font-size: 12.5px;
  color: var(--ink-3); margin-top: 3px; }

.mob__foot { padding: 16px 20px 22px; border-top: 1px solid var(--line);
  display: grid; gap: 9px; background: var(--paper-2); }

/* بین ۹۰۰ تا ۱۲۴۰ منو هنوز افقیه ولی جا تنگ می‌شه و ساعت از لبه
   می‌زد بیرون (کل صفحه اسکرول افقی می‌گرفت). این‌جا فشرده‌ترش می‌کنیم
   به‌جای اینکه منو رو زودتر جمع کنیم — تا لپ‌تاپ‌های ۱۰۲۴ هم منوی
   کامل داشته باشن. */
@media (max-width: 1240px) and (min-width: 1061px) {
  .header__in { gap: 18px; }
  .nav { gap: 17px; font-size: 13.6px; }
  .logo__text small { display: none; }
  .clock { padding: 0 9px; gap: 5px; }
}

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .hide-sm { display: none; }
  .header__in { gap: 10px; }
  .logo__text small { display: none; }
}


/* ============================ صفحه‌های تازه: وبلاگ، آموزش، تماس، تمدید */

.pagehead { padding: 64px 0 34px; }
.backlink { display:inline-block; font-size:13px; color:var(--ink-3); margin-bottom:18px;
  transition: color .18s; }
.backlink:hover { color: var(--brand); }

/* ── چی به‌دست میاری */
.whys { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:var(--s4); }
.why {
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5);
  transition: transform .24s cubic-bezier(.2,.8,.3,1), border-color .24s, box-shadow .24s;
}
.why:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: var(--shadow-m); }
.why__ico {
  width:44px; height:44px; border-radius:14px; display:grid; place-items:center;
  background: var(--brand-soft); border:1px solid var(--brand-line); color: var(--brand);
  margin-bottom:var(--s4);
}
.why__ico svg { width:22px; height:22px; }
.why h3 { font-size:16px; margin-bottom:8px; }
.why p { font-size:14px; color:var(--ink-3); }

/* ── دانلود */
.dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:var(--s4); }
.dlcard {
  display:flex; align-items:center; gap:var(--s4);
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:var(--s5);
  transition: border-color .22s, transform .22s, box-shadow .22s;
}
.dlcard:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: var(--shadow-s); }
.dlcard__ico { width:46px; height:46px; flex:none; display:grid; place-items:center;
  border-radius:14px; background:var(--paper-2); border:1px solid var(--line); color:var(--ink); }
.dlcard__ico svg { width:24px; height:24px; }
.dlcard__txt { flex:1; min-width:0; }

/* موبایل: آیکن و متن یه خط، دکمه خط بعد و تمام‌عرض */
@media (max-width: 560px) {
  .dlcard { flex-wrap: wrap; }
  .dlcard__txt { flex: 1 1 140px; }
  .dlcard .btn { width: 100%; }
}
.dlcard__txt h3 { font-size:16px; display:flex; align-items:center; gap:8px; }
.dlcard__txt p { font-size:13px; color:var(--ink-3); margin-top:3px; }
.dlnote { text-align:center; font-size:13.5px; color:var(--ink-3); margin-top:22px; }
.dlnote a { color:var(--brand); text-decoration:underline; }

/* ── وبلاگ */
.postgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:var(--s5); }
.post {
  display:flex; flex-direction:column; overflow:hidden;
  background:#fff; border:1px solid var(--line); border-radius:var(--r4);
  transition: transform .25s cubic-bezier(.2,.8,.3,1), box-shadow .25s, border-color .25s;
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-m); border-color: var(--line-2); }
.post__cover { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--paper-3); }
.post__cover img { width:100%; height:100%; object-fit:cover; transition: transform .4s; }
.post:hover .post__cover img { transform: scale(1.05); }
.post__body { padding: var(--s5); display:flex; flex-direction:column; gap:9px; flex:1; }
.post__body h2 { font-size:17px; line-height:1.5; }
.post__body p { font-size:13.5px; color:var(--ink-3); flex:1; }
.post__tag {
  align-self:flex-start; font-size:11px; font-weight:700; padding:4px 11px; border-radius:99px;
  background: var(--brand-soft); color: var(--brand); border:1px solid var(--brand-line);
}
.post__meta { font-size:12px; color:var(--ink-3); }

.postpage { max-width:820px; padding:48px 0 110px; }
.postpage__head { margin-bottom:var(--s5); display:grid; gap:12px; justify-items:start; }
.postpage__head h1 { font-size:clamp(26px,4vw,38px); }
.postpage__cover { width:100%; border-radius:var(--r4); margin-bottom:var(--s5); }
.postpage__body h2 { font-size:19px; }

.postmore { margin-top:var(--s7); }
.postmore > b { display:block; font-size:13px; color:var(--ink-3); margin-bottom:12px; }
.postmore__row { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }
.postmore__row a {
  background:#fff; border:1px solid var(--line); border-radius:var(--r2); padding:16px;
  transition: border-color .2s, transform .2s;
}
.postmore__row a:hover { border-color:var(--brand); transform: translateY(-2px); }
.postmore__row i { display:block; font-style:normal; font-size:11px; color:var(--brand); margin-bottom:6px; }
.postmore__row span { font-size:14px; font-weight:700; }

/* ── وبلاگ توی صفحه‌ی اصلی: فهرست شماره‌دار، نه کارت‌های شلوغ */

.blogsec { background: var(--paper-2); border-block: 1px solid var(--line); }
.blogsec__head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s6); }
.blogsec__all { display:inline-flex; align-items:center; gap:7px; font-size:14px;
  font-weight:700; color:var(--brand); white-space:nowrap; transition: gap .2s; }
.blogsec__all svg { width:15px; height:15px; }
.blogsec__all:hover { gap:12px; }

/* ستون رو صریح می‌بندیم: گرید بدون grid-template-columns اندازه‌ی
   min-content بچه‌هاش رو می‌گیره، و چون خلاصه‌ی مقاله nowrap بود، ردیف
   ۵۷۹ پیکسل می‌شد و از صفحه‌ی موبایل می‌زد بیرون. */
.bloglist { display:grid; grid-template-columns: minmax(0, 1fr);
  gap:2px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--r3); overflow:hidden; }
.blogrow {
  display:flex; align-items:center; gap:var(--s4); padding:22px var(--s5);
  background:#fff; transition: background .22s, padding .22s;
}
.blogrow:hover { background: var(--brand-soft); padding-inline-start: calc(var(--s5) + 8px); }
.blogrow__n { font-family:var(--mono); font-size:13px; color:var(--ink-3); flex:none; }
.blogrow__body { flex:1; min-width:0; }
.blogrow__body b { display:block; font-size:16px; line-height:1.6; }
.blogrow__body i { display:block; font-style:normal; font-size:13px; color:var(--ink-3);
  margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.blogrow__tag { flex:none; font-size:11.5px; font-weight:700; color:var(--brand);
  background:var(--brand-soft); border:1px solid var(--brand-line);
  padding:4px 11px; border-radius:99px; }
.blogrow:hover .blogrow__tag { background:#fff; }
.blogrow__go { width:16px; height:16px; flex:none; color:var(--ink-3); transition: transform .22s; }
.blogrow:hover .blogrow__go { transform: translateX(-4px); color:var(--brand); }
html[dir="ltr"] .blogrow:hover .blogrow__go { transform: translateX(4px); }

@media (max-width: 620px) {
  .blogrow { padding:18px var(--s4); gap:var(--s3); }
  .blogrow__n, .blogrow__tag { display:none; }
}

/* ── آموزش */
.guidegrid { display:grid; grid-template-columns:230px 1fr; gap:var(--s6);
  align-items:start; padding-bottom:110px; }
.guidenav { position:sticky; top:calc(var(--header-h) + 20px); }
.guidenav b { display:block; font-size:12px; color:var(--ink-3); margin-bottom:10px; }
.guidenav ol { list-style:none; margin:0; padding:0; display:grid; gap:2px;
  border-inline-start:2px solid var(--line); }
.guidenav a { display:block; padding:7px 12px; font-size:13.5px; color:var(--ink-3);
  border-inline-start:2px solid transparent; margin-inline-start:-2px; transition: color .18s, border-color .18s; }
.guidenav a:hover { color:var(--brand); border-inline-start-color:var(--brand); }

.guidebody { display:grid; gap:var(--s6); }
.guide { background:#fff; border:1px solid var(--line); border-radius:var(--r4); padding:var(--s6);
  scroll-margin-top: calc(var(--header-h) + 24px); }
.guide h2 { font-size:20px; }
.guide .lede { font-size:15px; margin-top:8px; }

.gsteps { list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s4); }
.gsteps li { display:flex; gap:14px; }
.gsteps__n {
  width:30px; height:30px; flex:none; border-radius:50%; display:grid; place-items:center;
  background: var(--brand-soft); color: var(--brand); border:1px solid var(--brand-line);
  font-weight:800; font-size:13px;
}
.gsteps b { font-size:15px; }
.gsteps p { font-size:14px; color:var(--ink-3); margin-top:5px; }

.guidehelp { display:flex; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.guidehelp b { font-size:16px; }
.guidehelp .btn { margin-inline-start:auto; }

/* ── تماس */
.contactgrid { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--s5);
  align-items:start; padding-bottom:110px; }
.contactmain h2 { font-size:19px; }
.contactways { display:grid; gap:12px; }
.way {
  display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:16px 18px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.way:hover { transform: translateY(-3px); border-color:var(--line-2); box-shadow: var(--shadow-s); }
.way__ico { width:42px; height:42px; flex:none; border-radius:13px; display:grid; place-items:center; color:#fff; }
.way__ico svg { width:22px; height:22px; }
.way__ico--tg { background:#229ED9; }
.way__ico--dc { background:#5865F2; }
.way__ico--ig { background:linear-gradient(45deg,#f09433,#dc2743,#bc1888); }
.way__ico--ml { background:var(--maroon-2); }
.way__txt b { display:block; font-size:15px; }
.way__txt i { display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); margin-top:2px; }

/* ── تمدید */
.renewnow { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--s4); }
.renewnow b { display:block; font-size:15px; margin-top:4px; }
.renewnow__code { display:block; font-family:var(--mono); font-size:15px; font-weight:700;
  margin-top:4px; direction:ltr; }

@media (max-width: 860px) {
  .guidegrid, .contactgrid { grid-template-columns:1fr; }
  .guidenav { position:static; }
  .guidenav ol { display:flex; flex-wrap:wrap; gap:6px; border:0; }
  .guidenav a { border:1px solid var(--line); border-radius:99px; padding:6px 13px; margin:0; }
  .postrail__row { padding-inline:20px; }
}


/* ============================ ساعت ایران و حالت شب */

.clock {
  display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 12px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  color: var(--ink-2); font-family: var(--mono); font-size: 12.5px;
  transition: background .18s, border-color .18s, color .18s, transform .18s;
}
.clock:hover { background: var(--paper-2); border-color: var(--line-2); color: var(--ink); }
.clock:active { transform: scale(.95); }
.clock svg { width: 15px; height: 15px; flex: none; }
.clock__sun { display: none; }
.night .clock__moon { display: none; }
.night .clock__sun { display: block; color: var(--brand-2); }
.clock b { font-weight: 600; direction: ltr; }

/* زیر ۹۰۰، ساعت داخل منوی کناریه (.mobclock) پس توی هدر تکرار نشه.
   این قانون عمداً بعد از تعریف بالاست: هم‌وزنن، پس هرکدوم دیرتر بیاد
   برنده‌ست — نسخه‌ی قبلی بالاتر نوشته شده بود و هیچ‌وقت اثر نمی‌کرد. */


/* حالت شب — چشم رو اذیت نکنه، ولی تیره هم نشه.
   کاغذ گرم‌تر و کم‌نورتر می‌شه و کنتراست متن یه پله میاد پایین. */
html.night { filter: brightness(.9) sepia(.14) saturate(.94); }
html.night body { background: #f5efe9; }
html.night .header.stuck { background: rgba(245,239,233,.86); }
html.night img, html.night video, html.night .app { filter: brightness(1.06); }

/* ============================ انیمیشن چیپ‌های پشتیبانی‌شده */

.chip {
  position: relative; overflow: hidden;
  transition: transform .22s cubic-bezier(.2,.9,.3,1), border-color .22s,
              box-shadow .22s, color .22s;
}
.chip::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%,
              rgba(var(--brand-rgb),.16) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.chip:hover { transform: translateY(-4px) scale(1.03); box-shadow: var(--shadow-s); }
.chip:hover::before { transform: translateX(120%); }
.chip--game:hover { border-color: var(--brand); color: var(--brand); }

/* نوار بازی‌ها آروم می‌لغزه و روی hover می‌ایسته */
.chips__row { animation: chipsFloat 1s ease both; }
@keyframes chipsFloat { from { opacity: 0; transform: translateY(10px) } }


/* ============ نوار «به گیم‌واچ متصلید» — زیر هدر، رنگ تم */

.connote {
  background: var(--brand-soft);
  border-bottom: 1px solid var(--brand-line);
  animation: connoteIn .45s cubic-bezier(.2,1.1,.35,1) both;
}
@keyframes connoteIn { from { opacity:0; transform: translateY(-8px) } }

.connote__in {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 9px 0; font-size: 13px; color: var(--brand);
}
.connote__in b { font-weight: 700; }
.connote__in i { font-style: normal; color: var(--ink-3); font-size: 12px; }

.connote__pulse {
  position: relative; width: 7px; height: 7px; flex: none;
  border-radius: 50%; background: var(--brand);
}
.connote__pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--brand); opacity: 0;
  animation: connotePulse 2.2s cubic-bezier(.2,.7,.4,1) infinite;
}
@keyframes connotePulse { 0%{opacity:.75;transform:scale(.6)} 100%{opacity:0;transform:scale(1.35)} }

@media (max-width: 520px) { .connote__in i { display: none; } }


/* ================================ پینگ‌واچ */

.nav__ping { color: var(--brand) !important; font-weight: 700; }
.nav__ping::after { background: var(--brand) !important; }

/* ================================== برچسب بتا (فقط کنار دکمه‌ی دانلود) */

.beta {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: lowercase;
  opacity: .75; direction: ltr;
}


/* ============================ لوگوی نماد اعتماد */

/* نشان‌های اعتماد. کادر سفیدِ قبلی برای لوگوهای شفاف بود، ولی هر دو
   نشان پس‌زمینه‌ی خودشون رو دارن؛ سفیدِ اضافه فقط یه مستطیل ناجور
   دور تصویر می‌ساخت. حالا خود تصویر گوشه‌گرد می‌شه و کادری در کار نیست. */
/* nowrap عمدیه: این دو تا نشانِ اعتمادن و کنار هم بودنشون بخشی از
   خونده شدنشونه. عرض ستون بالاتر جوری بسته شده که همیشه جا شن. */
.seals { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 12px; margin-top: 14px; }

/* دو نشان با نسبت‌های متفاوت (اینماد ۱۲۵×۱۳۶، زیبال ۱۰۹×۱۵۲). برای اینکه
   هم‌اندازه دیده شن، *کادر* رو یکی می‌کنیم و تصویر داخلش جا می‌شه —
   نه اینکه تصویر رو بکشیم یا ببریم.

   عدد ۱۲۴×۱۳۴ از حساب اومده: با این کادر، اینماد ۸۶٪ اندازه‌ی طبیعیش
   می‌مونه. پایین‌تر از این، ستاره‌های ریزِ پایین نشان محو می‌شن — یه بار
   همین اشتباه رو کردم و ستاره غیب شد. */
.seal {
  width: 124px; height: 134px;
  display: grid; place-items: center;
  border-radius: 12px; padding: 0; background: none;
  transition: transform .2s, box-shadow .2s;
}
.seal img {
  display: block; max-width: 100%; max-height: 100%;
  width: auto; height: auto; border-radius: 8px;
}
.seal--light { background: #f4f1ec; padding: 8px; }
.seal:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(0,0,0,.7); }


/* ================================ تست رایگان */

.freetag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 7px 14px; border-radius: 99px; font-size: 13px; color: var(--ink-2);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  transition: border-color .2s, transform .2s, color .2s;
}
.freetag b { color: var(--brand); font-weight: 700; }
.freetag svg { width: 13px; height: 13px; color: var(--brand); transition: transform .2s; }
.freetag:hover { border-color: var(--brand); transform: translateY(-1px); color: var(--ink); }
.freetag:hover svg { transform: translateX(-3px); }

.freetag__dot {
  position: relative; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--brand);
}
.freetag__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--brand); opacity: 0;
  animation: connotePulse 2.4s cubic-bezier(.2,.7,.4,1) infinite;
}

@media (max-width: 520px) { .freetag { font-size: 12px; padding: 6px 11px; } }

.tryfree {
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  padding: 15px 18px; border-radius: var(--r3);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.tryfree:hover {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 18px 40px -28px rgba(var(--brand-rgb),.9);
}

.tryfree__ico {
  width: 38px; height: 38px; flex: none; display: grid; place-items: center;
  border-radius: 12px; background: var(--brand); color: #fff;
}
.tryfree__ico svg { width: 20px; height: 20px; }

.tryfree__txt { flex: 1; min-width: 0; }
.tryfree__txt b { display: block; font-size: 15px; color: var(--ink); }
.tryfree__txt i { display: block; font-style: normal; font-size: 12.5px;
  color: var(--ink-3); margin-top: 3px; }

.tryfree__go {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 13px; font-weight: 700; color: var(--brand);
}
.tryfree__go svg { width: 14px; height: 14px; transition: transform .2s; }
.tryfree:hover .tryfree__go svg { transform: translateX(-3px); }

@media (max-width: 520px) {
  .tryfree { flex-wrap: wrap; }
  .tryfree__txt i { display: none; }
}

.pwgrid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s6);
  align-items:start; padding-bottom:110px; }
.pwh { font-size:17px; margin:0 0 14px; }
.pwh + * { margin-bottom: var(--s6); }

.pwnodes { display:grid; gap:9px; }
.pwnode { display:flex; align-items:center; gap:12px; background:#fff;
  border:1px solid var(--line); border-radius:var(--r3); padding:13px 16px;
  transition: border-color .2s, transform .2s; }
.pwnode:hover { border-color:var(--line-2); transform:translateY(-2px); }
.pwnode__flag { width:30px; height:30px; flex:none; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-size:17px; background:var(--paper-2);
  border:1px solid var(--line); }
.pwnode__flag img { width:100%; height:100%; object-fit:cover; }
.pwnode__txt { flex:1; min-width:0; }
.pwnode__txt b { display:block; font-size:14px; }
.pwnode__txt span { display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px; }
.pwnode__txt code { font-family:var(--mono); font-size:10.5px; background:var(--paper-3);
  border-radius:5px; padding:1px 6px; }

.load { display:flex; align-items:flex-end; gap:2.5px; height:14px; flex:none; }
.load i { width:4px; border-radius:2px; background:var(--paper-3); }
.load i:nth-child(1){ height:45% } .load i:nth-child(2){ height:72% } .load i:nth-child(3){ height:100% }
.load[data-l="1"] i:nth-child(1){ background:var(--online) }
.load[data-l="2"] i:nth-child(-n+2){ background:var(--warn) }
.load[data-l="3"] i { background:#d8503a }

.pwdot { width:9px; height:9px; flex:none; border-radius:50%; background:var(--line-2); }
.pwdot[data-up="1"] { background:var(--online); box-shadow:0 0 0 3px rgba(23,160,74,.16); }
.pwdot[data-up="0"] { background:#d8503a; box-shadow:0 0 0 3px rgba(216,80,58,.16); }

.pwchips { display:flex; flex-wrap:wrap; gap:8px; }
.pwchip {
  display:inline-flex; align-items:center; gap:7px; padding:7px 14px 7px 8px;
  border-radius:99px; background:#fff; border:1px solid var(--line);
  font-size:13px; font-weight:700; color:var(--ink-2);
  opacity:0; transform:translateY(8px);
  animation: chipIn .4s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay: calc(var(--i,0) * 40ms);
  transition: border-color .2s, transform .2s;
}
.pwchip:hover { border-color:var(--brand); transform:translateY(-3px); }
.pwchip img { width:22px; height:22px; border-radius:7px; object-fit:cover; }

/* نظرها */
.pwform { display:grid; gap:12px; margin-bottom:var(--s5); }
.stars { display:flex; flex-direction:row-reverse; justify-content:flex-end; gap:3px; }
.stars input { display:none; }
.stars label { font-size:24px; color:var(--line-2); cursor:pointer; transition:color .15s; }
.stars label:hover, .stars label:hover ~ label,
.stars input:checked ~ label { color:#f0a92a; }

.pwreviews { display:grid; gap:12px; }
.pwrev { background:#fff; border:1px solid var(--line); border-radius:var(--r3); padding:18px; }
.pwrev__top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pwrev__top b { font-size:14.5px; }
.pwrev__stars { color:#f0a92a; font-size:14px; letter-spacing:1px; }
.pwrev__stars i { color:var(--line-2); font-style:normal; }
.pwrev p { font-size:14px; color:var(--ink-2); margin:10px 0; line-height:2; }
.pwrev__date { font-size:11.5px; color:var(--ink-3); }

/* ================================== برچسب بتا (فقط کنار دکمه‌ی دانلود) */

.beta {
  font-style: normal; font-size: 10px; font-weight: 700;
  letter-spacing: .05em; text-transform: lowercase;
  opacity: .75; direction: ltr;
}


/* ============================ لوگوی نماد اعتماد */

.enamad {
  display: inline-block; margin-top: 14px; padding: 8px;
  background: #fff; border-radius: 10px; line-height: 0;
  transition: transform .2s, box-shadow .2s;
}
.enamad:hover { transform: translateY(-2px); box-shadow: 0 10px 26px -14px rgba(0,0,0,.6); }
.enamad img { width: 90px; height: auto; }


/* ================================ تست رایگان */

.freetag {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 7px 14px; border-radius: 99px; font-size: 13px; color: var(--ink-2);
  background: var(--brand-soft); border: 1px solid var(--brand-line);
  transition: border-color .2s, transform .2s, color .2s;
}
.freetag b { color: var(--brand); font-weight: 700; }
.freetag svg { width: 13px; height: 13px; color: var(--brand); transition: transform .2s; }
.freetag:hover { border-color: var(--brand); transform: translateY(-1px); color: var(--ink); }
.freetag:hover svg { transform: translateX(-3px); }

.freetag__dot {
  position: relative; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--brand);
}
.freetag__dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid var(--brand); opacity: 0;
  animation: connotePulse 2.4s cubic-bezier(.2,.7,.4,1) infinite;
}

@media (max-width: 520px) { .freetag { font-size: 12px; padding: 6px 11px; } }

.trialpage { max-width:600px; padding:64px 0 110px; }
.trialbox { margin-top:var(--s6); }
.trialbox__specs { display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  margin-bottom:var(--s5); }
.trialbox__specs > div { background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r2); padding:16px; text-align:center; }
.trialbox__specs b { display:block; font-size:22px; font-weight:800; letter-spacing:-.03em; }
.trialbox__specs span { display:block; font-size:12px; color:var(--ink-3); margin-top:4px; }
.trialcode { display:block; font-family:var(--mono); font-size:20px; font-weight:700;
  text-align:center; margin-top:10px; direction:ltr; color:var(--brand); }

@media (max-width: 860px) { .pwgrid { grid-template-columns:1fr; } }


/* ============== اشتراک‌های کاربر — بالای پیش‌نمایش برنامه */

.hero__app { display: grid; gap: 10px; align-content: start; min-width: 0; }

.mysubs { margin-inline-start: auto; text-align: start; max-width: 100%; }
.mysubs__head { display:block; font-size:11px; color:var(--ink-3); margin-bottom:5px; }
.mysubs__row { display:flex; flex-wrap:wrap; gap:6px; }

.mysub {
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  padding:5px 11px; font-family:inherit; font-size:11.5px;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mysub:hover { border-color:var(--line-2); transform:translateY(-1px); }
.mysub.on { border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.1); }
.mysub__dot { width:6px; height:6px; flex:none; border-radius:50%; background:var(--line-2); }
.mysub__dot[data-s="active"] { background:var(--online); }
.mysub span:not(.mysub__dot) { font-size:11.5px; color:var(--ink-2); }
.mysub.on span:not(.mysub__dot) { color:var(--ink); font-weight:600; }
.mysubs__more { display:inline-block; margin-top:6px; font-size:11px;
  color:var(--ink-3); transition:color .18s; }
.mysubs__more:hover { color:var(--brand); }

/* ظرفیت فروش — زیر عنوان پلن‌ها */
.capnote {
  display:inline-flex; align-items:center; gap:6px; margin:14px auto 0;
  background:var(--paper); border:1px solid var(--line); border-radius:99px;
  padding:6px 14px; font-size:12.5px; color:var(--ink-2);
}
.capnote b { color:var(--brand); font-weight:700; }
.capnote--closed { color:var(--ink-2); border-style:dashed; }
.btn.is-disabled {
  background:var(--paper); border:1px solid var(--line); color:var(--ink-3);
  cursor:not-allowed; pointer-events:none;
}

/* اسم دلخواه اشتراک — داخل کارت حساب کاربری */
.subname { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }
.subname .input { flex:1 1 180px; min-width:0; }

/* دستگاه‌های هر اشتراک در حساب کاربری */
.devices { border-top:1px dashed var(--line-2); margin-top:14px; padding-top:12px; }
.devices__head { display:block; font-size:12px; margin-bottom:8px; }
.device { display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px solid var(--line); font-size:12.5px; }
.device:last-child { border-bottom:0; }
.device form { margin-inline-start:auto; }
.linkbtn { background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:12px; color:var(--ink-3); }
.linkbtn:hover { color:var(--brand); }
.linkbtn.danger:hover { color:#c0392b; }

/* نوار حرکت‌دار بازی‌ها و سرویس‌ها (رفت‌وبرگشت آرام) */
.marquee .chip { opacity:1; transform:none; animation:none; }
.marquee .chip:hover { transform:translateY(-3px) }
.marquee { overflow:hidden; position:relative;
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display:flex; width:max-content;
  animation: marquee var(--speed, 40s) linear infinite; }
.chips { animation: chipsRow .6s ease both; }
@keyframes chipsRow { from { opacity:0 } }
.marquee--back .marquee__track { animation-direction: reverse; }
.marquee__row { display:flex; flex:0 0 auto; flex-wrap:nowrap; gap:10px;
  padding-inline-end:10px; }
.marquee__row .chip { flex:0 0 auto; white-space:nowrap; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation:none; }
  .marquee { mask-image:none; -webkit-mask-image:none; }
  .marquee__row:nth-child(2) { display:none; }
}

/* ---------------------------------------- ورود و ثبت‌نام */
.otp { display:flex; gap:8px; margin-top:6px; width:100%; }
.otp__box { flex:1; min-width:0; text-align:center; font-family:var(--mono);
  font-size:23px; padding:16px 0; border:1px solid var(--line); border-radius:14px;
  background:var(--paper); color:var(--ink);
  transition:border-color .18s, box-shadow .18s, transform .18s; }
.otp__box:not(:placeholder-shown) { border-color:var(--brand);
  background:var(--brand-soft) }
.otp__box:focus { outline:0; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(var(--brand-rgb),.14); }

.pwwrap { position:relative; display:block; }
.pwwrap .input { padding-inline-end:64px; }
.pweye { position:absolute; inset-inline-end:10px; top:50%; transform:translateY(-50%);
  background:none; border:0; cursor:pointer; font-family:inherit; font-size:11.5px;
  color:var(--ink-3); }
.pweye:hover { color:var(--brand); }

/* پیش‌نمایش در حالت قطع — آرام و عمدی، نه خاکستریِ خراب */
.app--off .app__orb {
  background:linear-gradient(160deg, #8d8d95, #6f6f78);
  box-shadow:0 10px 30px rgba(0,0,0,.14);
  transition:background .4s ease, box-shadow .4s ease;
}
.app--off .app__wave { opacity:0; }
.app--off .app__ping i {
  animation:none; height:22%; opacity:.45;
  transition:height .5s cubic-bezier(.2,.8,.3,1), opacity .4s;
}
.app--off #demoState { color:var(--ink-3); }
.app--off .app__metrics b { color:var(--ink-3); }
.app--off .fill { background:var(--line-2); }
.app__deck b, .app__deck span, .app__metrics b { transition:color .35s ease; }
.app__orb { transition:background .4s ease, box-shadow .4s ease; }

/* ---------------------------------------- قوانین، هم‌شکل صفحه‌ی آموزش */
.guide__n {
  display:inline-grid; place-items:center; width:26px; height:26px; flex:none;
  margin-inline-end:10px; border-radius:9px; font-size:13px;
  background:var(--brand-soft); color:var(--brand); border:1px solid var(--brand-line);
}
.guide h2 { display:flex; align-items:center; }
.rules-body p { margin:0 0 12px; line-height:2.1; color:var(--ink-2); font-size:14px; }
.rules-body p:last-child { margin-bottom:0; }
.rules-body b { color:var(--ink); }
.rules-body ul { margin:0 0 12px; padding:0; list-style:none; display:grid; gap:8px; }
.rules-body li { position:relative; padding-inline-start:20px; line-height:2;
  font-size:13.5px; color:var(--ink-2); }
.rules-body li::before { content:""; position:absolute; inset-inline-start:2px; top:12px;
  width:6px; height:6px; border-radius:50%; background:var(--brand); opacity:.7; }
.rules-body code { font-family:var(--mono, monospace); direction:ltr; font-size:12px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; }

/* ================================================= حساب کاربری */
.acc { padding-bottom:72px }
.acchead { display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:64px 0 26px }
.acchead h1 { font-size:clamp(24px,3.4vw,34px); margin:6px 0 8px }
.acchead .lede { margin:0; max-width:48ch }

.accstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px; margin-bottom:34px }
.accstat { background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:18px; text-align:center; position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.85,.3,1), border-color .25s, box-shadow .25s }
.accstat:hover { transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:0 12px 30px rgba(0,0,0,.05) }
.accstat b { display:block; font-size:27px; line-height:1.1; margin-bottom:5px }
.accstat span { font-size:11.5px; color:var(--ink-3) }
.accstat--live b { color:var(--online, #2f9e6b) }
.accstat--live::after { content:""; position:absolute; inset-inline-end:14px; top:14px;
  width:7px; height:7px; border-radius:50%; background:var(--online, #2f9e6b);
  animation:accPulse 2.2s ease-in-out infinite }
@keyframes accPulse { 50% { opacity:.35; transform:scale(.8) } }

.acc h2 { font-size:17px; margin:8px 0 14px; display:flex; align-items:center; gap:9px }
.acc h2::before { content:""; width:4px; height:17px; border-radius:3px;
  background:var(--brand) }
.acc .card { border-radius:20px; transition:border-color .25s, box-shadow .25s }
.acc .card:hover { border-color:var(--line-2); box-shadow:0 14px 34px rgba(0,0,0,.05) }
.acc .stack > * { animation:accIn .5s cubic-bezier(.2,.85,.3,1) both }
.acc .stack > *:nth-child(2) { animation-delay:.06s }
.acc .stack > *:nth-child(3) { animation-delay:.12s }
.acc .stack > *:nth-child(n+4) { animation-delay:.18s }
@keyframes accIn { from { opacity:0; transform:translateY(12px) } }

.subname .input { border-radius:12px }
.device { border-radius:12px; padding:9px 10px; margin-bottom:2px;
  transition:background .2s }
.device:hover { background:var(--paper-2) }

/* ================================================= پینگ‌واچ */
.pwstats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin-top:26px }
.pwstat { background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:18px; text-align:center;
  transition:transform .25s cubic-bezier(.2,.85,.3,1), border-color .25s, box-shadow .25s }
.pwstat:hover { transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:0 12px 30px rgba(0,0,0,.05) }
.pwstat b { display:block; font-size:26px; line-height:1.15 }
.pwstat b small { font-size:14px; color:var(--ink-3); font-weight:600 }
.pwstat span { font-size:11.5px; color:var(--ink-3) }

.pwnode { background:var(--paper); border:1px solid var(--line); border-radius:18px;
  padding:16px; margin-bottom:12px;
  transition:transform .25s cubic-bezier(.2,.85,.3,1), border-color .25s, box-shadow .25s }
.pwnode:hover { transform:translateY(-2px); border-color:var(--line-2);
  box-shadow:0 12px 30px rgba(0,0,0,.05) }
.pwnode__row { display:flex; align-items:center; gap:12px }
.pwnode__txt { flex:1; min-width:0 }
.pwnode__txt b { display:block; font-size:14.5px }
.pwnode__txt span { font-size:11.5px; color:var(--ink-3) }
.pwnode__note { margin:10px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.9 }

.pwstate { display:inline-flex; align-items:center; gap:6px; flex:none;
  font-size:11.5px; color:var(--ink-3); padding:5px 11px; border-radius:99px;
  border:1px solid var(--line); background:#fff }
.pwstate i { width:7px; height:7px; border-radius:50%; background:var(--line-2) }
.pwstate[data-up="1"] { color:var(--online,#2f9e6b); border-color:rgba(47,158,107,.28) }
.pwstate[data-up="1"] i { background:var(--online,#2f9e6b);
  animation:pwPulse 2.2s ease-in-out infinite }
@keyframes pwPulse { 50% { opacity:.35; transform:scale(.75) } }

.pwload { display:flex; align-items:center; gap:11px; margin-top:13px }
.pwload__bar { flex:1; height:7px; border-radius:99px; background:var(--paper-2);
  overflow:hidden }
.pwload__bar i { display:block; height:100%; width:0; border-radius:99px;
  background:var(--online,#2f9e6b);
  animation:pwFill 1.1s cubic-bezier(.2,.85,.3,1) forwards;
  animation-delay:calc(var(--i,0) * 70ms + 150ms) }
.pwload__bar[data-l="2"] i { background:#e9b949 }
.pwload__bar[data-l="3"] i { background:#e2685f }
@keyframes pwFill { to { width:var(--w) } }
.pwload__txt { font-size:11px; color:var(--ink-3); flex:none }
@media (prefers-reduced-motion: reduce) {
  .pwload__bar i { animation:none; width:var(--w) }
  .pwstate[data-up="1"] i { animation:none }
}

/* ---------------------------------------- کارت اشتراک در حساب کاربری */
.subcard {
  background:var(--paper); border:1px solid var(--line); border-radius:22px;
  padding:22px; position:relative; overflow:hidden;
  transition:transform .28s cubic-bezier(.2,.85,.3,1), border-color .28s, box-shadow .28s;
}
.subcard::before {
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg, var(--brand), transparent);
}
.subcard:hover { transform:translateY(-3px); border-color:var(--line-2);
  box-shadow:0 18px 40px rgba(0,0,0,.06) }
.subcard--off::before { background:var(--line-2) }
.subcard--off { opacity:.82 }

.subcard__head { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.subcard__id { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1 }
.subcard__id b { font-size:17px }
.subcard .copy { font-family:var(--mono, monospace); direction:ltr; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line); border-radius:8px;
  padding:3px 10px; font-size:12px; color:var(--ink-2); transition:all .2s }
.subcard .copy:hover { border-color:var(--brand); color:var(--brand);
  transform:translateY(-1px) }

.subcard__meter { margin:18px 0 16px }
.meter { height:9px; border-radius:99px; background:var(--paper-2); overflow:hidden }
.meter i { display:block; height:100%; width:0; border-radius:99px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2, var(--brand)));
  animation:meterFill 1s cubic-bezier(.2,.85,.3,1) .2s forwards }
.meter i[data-hot="1"] { background:linear-gradient(90deg,#e2685f,#f0a03c) }
@keyframes meterFill { to { width:var(--w) } }
.subcard__nums { display:flex; justify-content:space-between; gap:12px;
  margin-top:10px; font-size:12.5px; color:var(--ink-3); flex-wrap:wrap }
.subcard__nums b { color:var(--ink) }

.subcard__facts { display:grid; grid-template-columns:repeat(3,1fr); gap:10px;
  padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line) }
.subcard__facts div { text-align:center }
.subcard__facts b { display:block; font-size:17px }
.subcard__facts span { font-size:11px; color:var(--ink-3) }

.subcard__acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px }
.subcard__more { margin-top:14px }
.subcard__more > summary { cursor:pointer; font-size:12.5px; color:var(--ink-3);
  list-style:none; display:inline-flex; align-items:center; gap:6px }
.subcard__more > summary::-webkit-details-marker { display:none }
.subcard__more > summary::after { content:"⌄"; transition:transform .25s }
.subcard__more[open] > summary::after { transform:rotate(180deg) }
.subcard__more > *:not(summary) { animation:accIn .3s ease both }
@media (prefers-reduced-motion: reduce) { .meter i { animation:none; width:var(--w) } }

/* تایید شماره‌ی تازه در حساب کاربری */
.phoneverify { margin-top:16px; padding:16px; border-radius:16px;
  border:1px dashed var(--brand-line, var(--line-2)); background:var(--brand-soft);
  animation:accIn .35s ease both }
.phoneverify b { display:block; font-size:13.5px; margin-bottom:4px }
.phoneverify p { margin:0 0 12px }
.phoneverify__row { display:flex; gap:8px; flex-wrap:wrap }
.phoneverify__row .input { flex:1 1 160px; text-align:center; letter-spacing:.4em;
  font-size:17px }

/* کارت سرور در پینگ‌واچ — فقط پرچم و اسم */
.pwnodes { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px }
.pwnode { display:flex; align-items:center; gap:12px; padding:16px 18px; margin:0 }
.pwnode b { font-size:15px }

/* ساعت و حالت شب داخل منوی موبایل */
/* قرص جمع‌وجور و تک‌خطی. قبلاً یه بلوک تمام‌عرض دوخطی بود که وسط
   منو مثل یه کارت غریبه می‌نشست و از خود آیتم‌های منو بزرگ‌تر بود. */
.mobclock {
  display:none; align-items:center; gap:9px; margin:4px 0 12px;
  width:auto; align-self:flex-start;
  padding:7px 14px 7px 10px; border-radius:99px; cursor:pointer;
  background:var(--paper-2); border:1px solid var(--line);
  font-family:inherit; color:var(--ink-2);
  transition:border-color .2s, background .2s, color .2s;
}
.mobclock:hover, .mobclock:active {
  border-color:var(--brand); background:var(--brand-soft); color:var(--ink);
}
.mobclock__ico { position:relative; width:17px; height:17px; flex:none; color:var(--brand) }
.mobclock__ico svg { position:absolute; inset:0; width:17px; height:17px }
.mobclock__time {
  font-family:var(--mono); font-size:13px; font-weight:600;
  direction:ltr; letter-spacing:.02em;
}
.mobclock__label {
  font-size:11.5px; color:var(--ink-3); padding-inline-start:9px;
  border-inline-start:1px solid var(--line-2);
}
.mobclock:hover .mobclock__label { color:var(--ink-2) }


/* کد اشتراک — پیش‌فرض پنهان */
.secret { display:inline-flex; align-items:center; gap:6px;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  padding:4px 6px 4px 10px; transition:border-color .2s, background .2s }
.secret--on { border-color:var(--brand-line, var(--brand)); background:var(--brand-soft) }
.secret__val { font-family:var(--mono, monospace); direction:ltr; font-size:12.5px;
  letter-spacing:.08em; color:var(--ink-2); min-width:104px; text-align:center }
.secret--on .secret__val { color:var(--ink); letter-spacing:.02em }
.secret button { background:none; border:0; cursor:pointer; font-family:inherit;
  font-size:11px; color:var(--ink-3); padding:2px 6px; border-radius:7px;
  transition:color .18s, background .18s }
.secret button:hover { color:var(--brand); background:rgba(0,0,0,.04) }

/* ================================================= پلن دلخواه */
.cbuild { margin-top:34px; border-radius:26px; background:var(--paper);
  border:1px solid var(--line); position:relative; overflow:hidden }
.cbuild::after { content:""; position:absolute; inset-inline-start:-30%; top:-70%;
  width:70%; height:240%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(var(--brand-rgb),.10), transparent) }

.cbuild__grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);
  gap:clamp(20px,3vw,38px); padding:clamp(22px,3vw,34px); position:relative }
@media (max-width: 880px) { .cbuild__grid { grid-template-columns:1fr } }

.cbuild__controls { display:grid; gap:22px; align-content:start }
.cbuild__controls h3 { font-size:clamp(18px,2.2vw,23px); margin:8px 0 4px }

.cbuild__side { display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:clamp(20px,2.4vw,26px);
  border-radius:22px; background:var(--brand-soft);
  border:1px solid var(--brand-line, var(--line-2)) }
.cbuild__label { font-size:11.5px; color:var(--ink-3) }
.cbuild__num { font-size:clamp(26px,3.6vw,38px); line-height:1.1; color:var(--brand);
  font-variant-numeric:tabular-nums; margin:6px 0 2px }
.cbuild__unit { font-size:12px; color:var(--ink-3); margin-bottom:18px }
.cbuild__sum { width:100%; display:grid; gap:8px; margin:0 0 18px; padding:14px 0 0;
  border-top:1px dashed var(--brand-line, var(--line-2)); list-style:none }
.cbuild__sum li { display:flex; justify-content:space-between; font-size:12.5px;
  color:var(--ink-3) }
.cbuild__sum b { color:var(--ink); font-size:13.5px }
.cbuild__sum i { font-style:normal }
.cbuild__note { margin:12px 0 0; font-size:11px; color:var(--ink-3) }

.crange { display:block }
.crange__top { display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:12px }
.crange__top b { font-size:14px }
.crange__top em { font-style:normal; font-size:13px; color:var(--ink-2) }
.crange__top i { font-style:normal; font-size:18px; font-weight:800; color:var(--brand) }
.crange__ends { display:flex; justify-content:space-between; margin-top:7px;
  font-size:10.5px; color:var(--ink-3) }
.crange__ends i { font-style:normal }

.crange input[type="range"] { -webkit-appearance:none; appearance:none; width:100%;
  height:8px; border-radius:99px; outline:0; cursor:pointer;
  background:linear-gradient(to left, var(--brand) var(--fill,50%),
             var(--paper-2) var(--fill,50%)) }
.crange input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none;
  width:24px; height:24px; border-radius:50%; background:#fff;
  border:3px solid var(--brand); box-shadow:0 4px 14px rgba(0,0,0,.16);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s }
.crange input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.14) }
.crange input[type="range"]:active::-webkit-slider-thumb { transform:scale(1.22);
  box-shadow:0 0 0 8px rgba(var(--brand-rgb),.16) }
.crange input[type="range"]::-moz-range-thumb { width:22px; height:22px;
  border-radius:50%; background:#fff; border:3px solid var(--brand); cursor:pointer }
.cbuild__fixed { margin:0; padding:12px 14px; border-radius:14px; font-size:12.5px;
  color:var(--ink-2); background:var(--paper-2); border:1px dashed var(--line-2) }

/* ================================= ویترین بازی‌ها */
.showcase { padding: 62px 0 66px; background: var(--paper-2); overflow: hidden; }

.showcase__head { text-align: center; margin-bottom: 30px; }
.showcase__head .eyebrow { justify-content: center; }
.showcase__head h2 { font-size: clamp(20px, 3vw, 30px); margin-top: 10px; }
.showcase__lede { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }
.showcase__foot { display: flex; justify-content: center; margin-top: 34px; }
.showcase__foot .btn { gap: 8px; }

/* ---------------------------------------------- نوارهای متحرک

   دو نوار که خلاف هم می‌لغزن. هر نوار دو بار چیده شده و انیمیشن دقیقاً
   ۵۰٪ جابه‌جا می‌کنه، پس لحظه‌ی برگشت دیده نمی‌شه.
   با hover می‌ایسته تا کاربر بتونه یه بازی رو نگاه کنه یا کلیک کنه. */
.belt {
  position: relative;
  /* صفحه راست‌چینه. توی یه کادر راست‌چین، محتوایی که پهن‌تر از کادره از
     سمت *چپ* سرریز می‌کنه — یعنی چیزی که می‌بینی انتهای نواره، نه اولش.
     انیمیشن هم محتوا رو به چپ می‌بره، پس سمت راست خالی می‌شد و هر دور
     یه پرش داشت. کادر رو چپ‌چین می‌کنیم تا سرریز و جهت حرکت هم‌سو شن؛
     متن داخل کاشی‌ها پایین‌تر دوباره راست‌چین می‌شه. */
  direction: ltr;
  /* خود نوار هم مهار می‌شه، نه فقط بخش بیرونی — track عرضش max-content
     است و اگه جایی بدون .showcase استفاده شه، صفحه رو می‌کشید. */
  overflow: hidden;
  /* لبه‌ها محو می‌شن تا کارت‌ها یهو بریده نشن */
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.belt + .belt { margin-top: 14px; }
.belt { margin-inline: auto; }
/* آیتم کم = حرکت بی‌معنیه، چون فقط تکرار نشون می‌ده */
.belt--still .belt__track { animation: none; }
.belt--still .belt__row:nth-child(2) { display: none; }
.belt--still .belt__row { padding-inline-end: 0; }
.belt--still { mask-image: none; -webkit-mask-image: none; }

.belt__track {
  display: flex; width: max-content;
  animation: beltRun var(--speed, 45s) linear infinite;
  will-change: transform;
}
.gtile, .stile { direction: rtl; }
.belt__track--rev { animation-direction: reverse; }
.belt:hover .belt__track { animation-play-state: paused; }

.belt__row { display: flex; gap: 14px; padding-inline-end: 14px; }

@keyframes beltRun { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ------------------------------------- کارت بازی: عکس تمام‌کادر */
.gtile {
  position: relative; flex: none;
  width: 258px; aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-soft), var(--paper-3));
  border: 1px solid var(--line);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.gtile:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--brand);
  box-shadow: 0 22px 40px -22px rgba(var(--brand-rgb), .6);
  z-index: 2;
}
.gtile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .35s;
}
.gtile:hover img { transform: scale(1.07); }
.gtile__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 34px; font-weight: 800; color: var(--brand); opacity: .5;
}
.gtile__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 55%);
}
.gtile__name {
  position: absolute; inset-inline: 12px; bottom: 10px;
  font-size: 13px; color: #fff; line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ------------------------------ کاشی اپلیکیشن: فقط لوگو، بدون اسم */
.stile {
  position: relative; flex: none; width: 116px; height: 116px;
  border-radius: 20px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--paper);
  border: 1px solid var(--line);
  transition: transform .22s, border-color .22s, box-shadow .22s;
}
.stile:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  box-shadow: 0 16px 30px -18px rgba(var(--brand-rgb), .65);
}
.stile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .3s;
}
.stile:hover img { transform: scale(1.07); }
.stile__mono { font-size: 25px; font-weight: 800; color: var(--brand); opacity: .55; }

/* کسی که انیمیشن براش اذیت‌کننده‌ست، نوار ثابت و فقط یک نسخه می‌بینه */
@media (prefers-reduced-motion: reduce) {
  .belt__track { animation: none; }
  .belt__row:nth-child(2) { display: none; }
  .belt { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}

@media (max-width: 620px) {
  .gtile { width: 160px; }
  .stile { width: 74px; height: 74px; border-radius: 17px; }
  .belt__row { gap: 10px; padding-inline-end: 10px; }
}

.showcase__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 20px;
}
.showcase__head h2 { font-size: clamp(19px, 2.6vw, 25px); }
.showcase__count { font-size: 13px; color: var(--ink-3); font-weight: 600; white-space: nowrap; }

/* صفحه‌ی /games — همون زبان بصری ویترین، ولی شبکه‌ای و ثابت */
.vgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 16px;
}
/* اپلیکیشن‌ها فقط لوگو دارن، پس کاشی‌شون کوچیک‌تر و مربعیه */
.vgrid--dev { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }

.vcard { display: block; }
.vcard__art {
  position: relative; display: block; aspect-ratio: 16 / 10;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(150deg, var(--brand-soft), var(--paper-3));
  border: 1px solid var(--line);
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.vgrid--dev .vcard__art { aspect-ratio: 1 / 1; background: var(--paper); }

.vcard:hover .vcard__art {
  transform: translateY(-4px); border-color: var(--brand);
  box-shadow: 0 22px 40px -24px rgba(var(--brand-rgb), .6);
}
.vcard__art img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transition: transform .3s;
}
/* لوگوهایی که آپلود می‌شن پس‌زمینه‌ی خودشون رو دارن، پس کل کاشی رو
   پر می‌کنن؛ شناور موندن وسط کادر فقط ریزشون می‌کرد. */
.vcard:hover .vcard__art img { transform: scale(1.06); }

.vcard__mono {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 30px; font-weight: 800; color: var(--brand); opacity: .5;
}
.vcard__shade {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.05) 55%);
}
.vgrid--dev .vcard__shade { display: none; }

.vcard__name {
  position: absolute; inset-inline: 12px; bottom: 10px;
  font-size: 13px; color: #fff; line-height: 1.35;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* اسم اپلیکیشن زیر کاشی می‌شینه، نه روش */
.vgrid--dev .vcard__name {
  position: static; display: block; margin-top: 9px;
  color: var(--ink-3); font-size: 11.5px; text-align: center; text-shadow: none;
}

@media (max-width: 620px) {
  .vgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .vgrid--dev { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
}

/* ================================= پیشنهاد و انتقاد */
.fbwrap { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr);
  gap:24px; padding-bottom:90px; align-items:start }
@media (max-width:860px) { .fbwrap { grid-template-columns:1fr } }
.fbnote { grid-column:1/-1 }
.fbcard { background:var(--paper); border:1px solid var(--line); border-radius:24px;
  padding:clamp(22px,3vw,32px); display:grid; gap:18px }
.fbkinds { display:flex; gap:9px; flex-wrap:wrap }
.fbkind input { position:absolute; opacity:0; pointer-events:none }
.fbkind span { display:inline-block; padding:9px 16px; border-radius:99px;
  border:1px solid var(--line); background:var(--paper-2); font-size:12.5px;
  color:var(--ink-2); cursor:pointer;
  transition:border-color .2s, background .2s, color .2s, transform .2s }
.fbkind span:hover { transform:translateY(-2px) }
.fbkind input:checked + span { border-color:var(--brand); background:var(--brand-soft);
  color:var(--brand); font-weight:700 }
.fbcard textarea.input { resize:vertical; line-height:2 }
.fbside { display:grid; gap:12px }
.fbside__item { background:var(--paper-2); border:1px solid var(--line);
  border-radius:18px; padding:16px 18px;
  transition:transform .25s cubic-bezier(.2,.85,.3,1), border-color .25s }
.fbside__item:hover { transform:translateY(-2px); border-color:var(--line-2) }
.fbside__item b { display:block; font-size:13.5px; margin-bottom:6px }
.fbside__item p { margin:0; font-size:12.5px; color:var(--ink-3); line-height:2 }
.fbbody { white-space:pre-wrap; line-height:2; font-size:13px; margin:10px 0 }

/* ================================= مرحله‌های ثبت‌نام */
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  list-style:none; margin:0 0 26px; padding:0; position:relative }
.steps::before { content:""; position:absolute; top:17px; inset-inline:16%;
  height:2px; background:var(--line); border-radius:2px }
.steps::after { content:""; position:absolute; top:17px; inset-inline-start:16%;
  height:2px; border-radius:2px; background:var(--brand);
  width:calc((var(--at) - 1) * 34%);
  transition:width .5s cubic-bezier(.2,.85,.3,1) }
.steps li { display:flex; flex-direction:column; align-items:center; gap:8px;
  position:relative; z-index:1 }
.steps b { width:36px; height:36px; border-radius:50%; display:grid;
  place-items:center; font-size:13.5px; background:var(--paper);
  border:2px solid var(--line); color:var(--ink-3);
  transition:background .35s, border-color .35s, color .35s, transform .35s }
.steps span { font-size:11px; color:var(--ink-3); transition:color .35s }
.steps .on b { border-color:var(--brand); color:var(--brand);
  box-shadow:0 0 0 5px rgba(var(--brand-rgb),.14);
  animation:stepPulse 2.4s ease-in-out infinite }
.steps .on span { color:var(--ink); font-weight:700 }
.steps .done b { background:var(--brand); border-color:var(--brand); color:#fff;
  transform:scale(.94) }
@keyframes stepPulse { 50% { box-shadow:0 0 0 9px rgba(var(--brand-rgb),.07) } }
@media (prefers-reduced-motion: reduce) { .steps .on b { animation:none } }


/* ==================================================================
   نقطه‌ی شکست هدر — همه‌ی قانون‌هاش عمداً این‌جا و کنار هم

   قبلاً این چهار تا در چهار جای فایل پخش بودن و از هم جدا افتاده
   بودن: منوی افقی تا ۹۰۰ می‌موند، همبرگری از ۹۸۰ روشن می‌شد، ساعت
   منو از ۸۶۰، و ساعت هدر اصلاً مخفی نمی‌شد چون قانون مخفی‌کردنش
   *بالاتر* از تعریف خودش نوشته شده بود و هم‌وزن که باشن، دیرتر
   برنده‌ست. نتیجه: ساعت تکراری، همبرگری و منو با هم، و هدری که از
   لبه‌ی صفحه می‌زد بیرون.

   این بلوک آخر فایله تا مطمئن باشیم چیزی خنثیش نمی‌کنه. عدد ۱۰۶۰ از
   اندازه‌گیری اومده: منوی افقی با هفت لینک، لوگو و دکمه‌ها زیر این
   عرض دیگه جا نمی‌شه و صفحه اسکرول افقی می‌گیره.
   ================================================================== */

@media (max-width: 1060px) {
  .nav { display: none; }
  .burger { display: inline-flex; }
  .clock { display: none; }      /* نسخه‌ی داخل منوی کناری جاش رو می‌گیره */
  .mobclock { display: inline-flex; }

  /* چیدمان موبایل: منو سمت راست، لوگو وسط، خرید سمت چپ.
     گرید سه‌ستونه‌ست نه فلکس، چون فقط با گرید می‌شه لوگو رو دقیقاً وسط
     نگه داشت وقتی دو طرفش پهنای متفاوت دارن. justify-self راست‌چین رو
     خودش می‌فهمه: start یعنی راست. */
  .header__in {
    /* ۱fr در دو طرف، نه auto: با auto ستون وسط بین دو طرفِ نابرابر
       می‌نشست و لوگو چند پیکسل از مرکز صفحه در می‌رفت. حالا دو طرف
       دقیقاً هم‌عرضن، پس وسط واقعاً وسطه. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 8px;
  }
  .burger { order: 1; justify-self: start; }
  .logo { order: 2; justify-self: center; }
  .header__cta { order: 3; justify-self: end; margin: 0; }
}

/* گوشی‌های باریک (۳۶۰ و پایین‌تر): لوگو و دکمه‌ی خرید با هم دقیقاً
   اندازه‌ی عرض صفحه می‌شدن و لوگو می‌چسبید به لبه. */
@media (max-width: 380px) {
  .logo { gap: 8px; }
  .logo { --mark-w:48px; --mark-h:33px; }
  .logo__text { font-size: 15px; }
  .header__cta .btn--sm { padding: 0 11px; font-size: 12.5px; }
  .burger { width: 38px; height: 38px; }
}


/* ================================ انتخاب روش پرداخت (صفحه‌ی خرید) */

.paypick { display: grid; gap: 10px; margin-bottom: 18px; }

.paypick__opt {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 15px; cursor: pointer;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r2);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.paypick__opt:hover { border-color: var(--line-2); }
.paypick__opt input { margin-top: 3px; accent-color: var(--brand); flex: none; }

/* :has اینجا امنه — مرورگری که نداشته باشه فقط حاشیه‌ی برجسته رو
   نمی‌بینه، ولی دکمه‌ی رادیو خودش همچنان علامت خورده‌ست. */
.paypick__opt:has(input:checked) {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 10px 24px -20px rgba(var(--brand-rgb), .7);
}

.paypick__body { display: block; }
.paypick__body b { display: block; font-size: 14.5px; }
.paypick__body i {
  display: block; font-style: normal; font-size: 12.5px;
  color: var(--ink-3); margin-top: 3px; line-height: 1.6;
}

/* حلقه‌ی چرخان صفحه‌ی «رفتن به درگاه» */
.spin {
  width: 42px; height: 42px; border-radius: 50%;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  animation: spinRun .8s linear infinite;
}
@keyframes spinRun { to { transform: rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s } }

/* روش پرداخت شخصی، توی کارت هر کاربر در پنل */
.paywaypick {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 10px 12px;
  background: var(--paper-2); border: 1px solid var(--line);
  border-radius: var(--r2);
}
.paywaypick select { width: auto; min-width: 190px; height: 34px; font-size: 13px; }


/* ==================================== فاکتور و نتیجه‌ی پرداخت درگاه */

.invoice {
  max-width: 480px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r3); padding: 26px 24px 22px;
  box-shadow: var(--shadow-m);
}
.invoice__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; padding-bottom: 18px; border-bottom: 1px dashed var(--line-2);
}
.invoice__code {
  font-size: 12.5px; padding: 6px 10px; border-radius: 9px;
  background: var(--paper-2); color: var(--ink-2); white-space: nowrap;
}
.invoice__rows { padding: 16px 0 4px; display: grid; gap: 11px; }
.invoice__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.invoice__row span { font-size: 13.5px; color: var(--ink-3); }
.invoice__row b { font-size: 15px; }

.invoice__timer {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2);
  font-size: 13px; color: var(--ink-3);
}
.invoice__timer b { font-size: 15px; color: var(--ink-2); }
.invoice__timer--soon b { color: var(--brand); }
.invoice__timer--out b { color: var(--danger, #c0392b); }

/* هشدار VPN */
.vpnwarn {
  display: flex; gap: 13px; margin-top: 20px; padding: 16px 15px;
  background: #fdf5e3; border: 1px solid #ecdcb1; border-radius: var(--r2);
  color: #7a5a10;
}
.vpnwarn__ico { flex: none; width: 26px; height: 26px; color: #c9962a; }
.vpnwarn__ico svg { width: 100%; height: 100%; }
.vpnwarn b { color: #6b4e0c; }
.vpnwarn code { background: #f3e6c6; padding: 2px 7px; border-radius: 6px; }

/* صفحه‌ی نتیجه */
.payres {
  max-width: 500px; margin-inline: auto; text-align: center;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--r3); padding: 34px 26px 28px;
  box-shadow: var(--shadow-m);
}
.payres h1 { font-size: 21px; margin-bottom: 9px; }
.payres__lede { font-size: 14.5px; color: var(--ink-2); line-height: 2; }

.payres__badge {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto 18px;
  animation: payPop .45s cubic-bezier(.2,.9,.3,1.4);
}
.payres__badge svg { width: 30px; height: 30px; }
.payres--ok .payres__badge { background: var(--online-soft, #e6f6ec); color: #0f7a37; }
.payres--bad .payres__badge { background: #fdeaea; color: #c0392b; }
@keyframes payPop { from { transform: scale(.4); opacity: 0 } to { transform: none; opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .payres__badge { animation: none } }

.payres__rows {
  display: grid; gap: 10px; text-align: start;
  margin-top: 22px; padding: 16px 15px;
  background: var(--paper-2); border-radius: var(--r2);
}
.payres__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.payres__row span { font-size: 13px; color: var(--ink-3); }

.payres__vpn {
  display: flex; align-items: center; gap: 11px; text-align: start;
  margin-top: 16px; padding: 13px 14px;
  background: var(--brand-soft); border: 1px solid rgba(var(--brand-rgb), .28);
  border-radius: var(--r2); font-size: 13.5px; line-height: 1.9;
}
.payres__vpn svg { flex: none; width: 22px; height: 22px; color: var(--brand); }

.payres__cta {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px;
}
@media (max-width: 520px) {
  .payres__cta .btn { width: 100%; }
  .invoice, .payres { padding-inline: 18px; }
}

/* وضعیت «فعاله» توی فوتر */
.okdot { color: #0f7a37; }
.okdot::before {
  content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; background: currentColor;
  margin-inline-end: 5px; vertical-align: 1px;
}

/* ------------------------------------------- فیلتر پلتفرم کاتالوگ */

.platfilter { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.platfilter__btn {
  font-size: 13px; font-weight: 600; padding: 8px 18px; border-radius: 99px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-2);
  transition: border-color .2s, background .2s, color .2s;
}
.platfilter__btn:hover { border-color: var(--brand); color: var(--ink); }
.platfilter__btn.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}


/* راه برگشت از صفحه‌ی کد به صفحه‌ی شماره */
.authcard__alt { margin-top: 10px; text-align: center; }
.authcard__alt a {
  font-size: 12.5px; color: var(--ink3); text-decoration: none;
  border-bottom: 1px dashed currentColor; padding-bottom: 1px;
}
.authcard__alt a:hover { color: var(--ink); }


/* ───────────── کارت «آنلاین» زیر ویترین ─────────────

   نسخه‌ی اول این کارت رنگ‌های تیره‌ی برنامه‌ی دسکتاپ رو داشت — زمینه‌ی
   نیمه‌شفافِ روشن و عددِ سفید. ولی سایت تم *روشن* داره، پس عدد سفید
   روی زمینه‌ی سفید عملاً نامرئی بود. این نسخه فقط از توکن‌های خود
   سایت استفاده می‌کنه، پس با هر تمی (نارنجی، آبی، …) جور درمیاد. */

.livecard {
  position: relative;
  overflow: hidden;
  max-width: 440px;
  margin: 26px auto 0;
  padding: 26px 28px 20px;
  border-radius: var(--r3);
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m, 0 18px 40px -28px rgba(0,0,0,.25));
}

/* هاله‌ی رنگِ برند پشت عدد. ثابت و بدون انیمیشن — تار کردنِ متحرک
   روی موبایل گرون‌ترین چیز صفحه‌ست. */
.livecard__glow {
  position: absolute; inset-inline: 0; top: -60px; height: 170px;
  background: radial-gradient(circle at 50% 50%,
              rgba(var(--brand-rgb), .13), transparent 68%);
  pointer-events: none;
}

/* نقطه‌ی نبض‌دار. سبز می‌مونه چون «آنلاین» رو همه‌جا سبز می‌شناسن —
   حتی وقتی رنگ برند نارنجی یا آبیه. */
.livecard__pulse {
  position: absolute; top: 16px; inset-inline-end: 18px;
  width: 9px; height: 9px; border-radius: 50%; background: #16a34a;
  box-shadow: 0 0 0 0 rgba(22, 163, 74, .45);
  animation: livepulse 2.4s ease-out infinite;
}
@keyframes livepulse {
  0%   { box-shadow: 0 0 0 0 rgba(22, 163, 74, .4) }
  70%  { box-shadow: 0 0 0 11px rgba(22, 163, 74, 0) }
  100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0) }
}

.livecard__num { position: relative; }
.livecard__num b {
  display: block;
  font-size: clamp(40px, 8vw, 56px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.02em;
  color: var(--brand);
  /* عددهای هم‌عرض: موقع عوض شدن رقم‌ها کارت نمی‌لرزه */
  font-variant-numeric: tabular-nums;
  transition: opacity .25s;
}
.livecard__num span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.livecard__note {
  margin: 12px auto 0;
  max-width: 320px;
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-3);
}

/* لحظه‌ی عوض شدن عدد یه پلک کوتاه می‌زنه، تا معلوم شه زنده‌ست نه عکس */
.livecard__num b.is-bump { opacity: .4; }

@media (max-width: 560px) {
  .livecard { margin-inline: 4px; padding: 22px 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .livecard__pulse { animation: none }
  .livecard__num b { transition: none }
}


/* ═══════════ لایه‌ی موبایل (بازنویسی) ═══════════

   طرح دسکتاپ درسته؛ چیزی که روی گوشی می‌شکنه، *اندازه‌ها*ست. سه تا
   ایراد واقعی که با اندازه‌گیری روی ۳۷۵ پیکسل پیدا شدن:

     ۱. دکمه‌های هیرو ۱۶۵ پیکسل عرض داشتن و کنارشون ۱۹۰ پیکسل جای
        خالی می‌موند — از بیرون شبیه چیزی بود که وسط بارگذاری گیر کرده.
     ۲. فاصله‌ی خطوط متن ۲.۰۵ بود. روی صفحه‌ی باریک همون پاراگراف
        چهار خط می‌شد با درزهای بزرگ، و کل هیرو ۱۳۱۰ پیکسل — یعنی یک
        و نیم برابر ارتفاع صفحه، فقط برای بخش اول.
     ۳. دکمه‌ی «خرید اشتراک» توی هدر ۲۶ پیکسل ارتفاع داشت. کمترین
        اندازه‌ای که انگشت راحت می‌زنه ۴۴ پیکسله.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 560px) {

  /* ─── هدر ─── */

  .header__in { gap: 10px; }

  /* دکمه‌ی هدر باید با انگشت زده شه، نه با نوک ماوس */
  .header__cta .btn {
    min-height: 40px;
    padding-inline: 14px;
    font-size: 13.5px;
  }

  .burger { width: 44px; height: 44px; }
  .mob__x { width: 44px; height: 44px; }

  /* اسم برند روی صفحه‌ی باریک جا رو می‌گیره و لوگو خودش گویاست */
  .logo__sub { display: none; }

  /* ─── هیرو ─── */

  .hero { padding: 28px 0 40px; }
  .hero__grid { gap: 28px; }

  .hero h1 {
    margin-top: 0;
    font-size: clamp(26px, 7.4vw, 32px);
    line-height: 1.28;
    letter-spacing: -.015em;
  }

  /* ۱.۷ به‌جای ۲.۰۵: هنوز خواناست، ولی پاراگراف نصف ارتفاع قبل رو
     می‌گیره و متن یه بلوک به‌هم‌پیوسته دیده می‌شه نه چند خط پراکنده. */
  .lede {
    font-size: 16.5px;
    line-height: 1.75;
  }

  /* ─── دکمه‌های هیرو: تمام‌عرض و روی هم ─── */

  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 22px;
  }
  .hero__actions .btn {
    width: 100%;
    min-height: 52px;
    padding-block: 14px;
  }

  /* ─── نوار «تست رایگان» ─── */

  .freetag,
  .hero .tag {
    width: 100%;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* ─── هدف‌های لمسی کوچیک در کل صفحه ─── */

  /* لینک‌هایی که نقش دکمه دارن ولی قدشون کوتاه بود */
  .sec__head .link,
  .blogsec .link,
  .more,
  .quiet {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ─── فاصله‌ی بخش‌ها ─── */

  /* روی گوشی فاصله‌ی دسکتاپ باعث می‌شه کاربر بین دو بخش، یه صفحه‌ی
     خالی رد کنه و فکر کنه ته صفحه‌ست. */
  .sec { padding-block: 48px; }
  .sec__head { margin-bottom: 24px; }

  /* ─── کارت‌ها ─── */

  .card { padding: 20px; }
  .cards { gap: 14px; }
}

/* گوشی‌های باریک‌تر */
@media (max-width: 380px) {
  .header__cta .btn { padding-inline: 11px; font-size: 12.5px; }
  .hero h1 { font-size: 25px; }
  .lede { font-size: 16px; }
  .wrap { padding-inline: 14px; }
}


/* ═══════════ منوی کناری وقتی بسته‌ست ═══════════

   منوی بسته نباید هیچ ردی بذاره. دو تا ایراد داشت:

   ۱. با translateX(101%) فقط ۳ پیکسل از لبه رد می‌شد، ولی سایه‌ش
      (‎-24px افقی با ۶۰ بلور) حدود ۲۶ پیکسل به چپ کشیده می‌شد و
      همون یه نوار خاکستری روی لبه‌ی راست صفحه می‌ساخت.

   ۲. با اینکه دیده نمی‌شد، هنوز visible و کلیک‌پذیر بود — یعنی یه
      پنل نامرئی می‌تونست ضربه‌های لبه‌ی راست صفحه رو بدزده.

   visibility هم مخفی می‌کنه هم سایه رو می‌بره. تاخیرش برابر مدت
   انیمیشنه تا موقع بسته شدن، منو وسط راه ناپدید نشه. */

.mob {
  visibility: hidden;
  pointer-events: none;
  transition: transform .36s cubic-bezier(.22,.9,.28,1), visibility 0s .36s;
}
.mob.open {
  visibility: visible;
  pointer-events: auto;
  transition: transform .36s cubic-bezier(.22,.9,.28,1), visibility 0s 0s;
}


/* ═══════════ آخرین صیقل‌های موبایل ═══════════ */

@media (max-width: 560px) {

  /* حباب چت روی محتوای ته صفحه می‌افتاد و دکمه‌های فوتر رو می‌پوشوند.
     یه فضای خالی ته صفحه یعنی همیشه می‌شه از زیرش ردش کرد. */
  .footer { padding-bottom: 92px; }

  /* فاصله‌ی بین نوار «تست رایگان» و دکمه‌ها زیادی باز بود؛ روی صفحه‌ی
     باریک این درز شبیه ته بخش دیده می‌شد. */
  .freetag { margin-bottom: 10px; }
  .hero__actions { margin-top: 14px; }
}


/* ═══════════ هدر موبایل: باگ همپوشانی آواتار روی لوگو ═══════════

   وقتی کاربر وارد بود، `.usermenu__btn` آواتار + اسم کامل + فلش رو
   با هم نشون می‌داد (تا ۱۳۱ پیکسل عرض). چیدمان هدر موبایل سه‌ستونیه
   با دو ستون کناریِ `minmax(0,1fr)` که برای دکمه‌ی کوتاهِ «خرید
   اشتراک» (۸۸ پیکسل) حساب شده بود. آیتم‌های گرید به‌طور پیش‌فرض از
   محتواشون باریک‌تر نمی‌شن، پس دکمه‌ی حساب از ستون خودش بیرون می‌زد و
   دقیقاً روی لوگوی وسط‌چین می‌نشست.

   راه‌حل: روی موبایل این دکمه یه دایره‌ی ثابت و کوچیکه — دقیقاً
   هم‌قد برگر. اسم و فلش می‌رن، فقط حرف اول اسم می‌مونه. دیگه امکان
   نداره از حدش بیرون بزنه، چون دیگه به عرض محتوا وابسته نیست. */

@media (max-width: 1060px) {
  .usermenu__btn {
    width: 42px; height: 42px; padding: 0; gap: 0;
    justify-content: center; border-radius: 50%;
    border-color: var(--line);
  }
  .usermenu__name,
  .usermenu__btn > svg { display: none; }
  .usermenu__av { width: 100%; height: 100%; font-size: 15px; }

  /* زدن آواتار روی موبایل کشوی اصلی رو باز می‌کنه (main.js)، پس این
     دراپ‌داون معمولاً اصلاً دیده نمی‌شه. ولی اگه یه جایی جاوااسکریپت
     بار نشد، حداقل قابل لمس بمونه — نه یه لیست فشرده‌ی ریز. */
  .usermenu__drop { min-width: 190px; }
  .usermenu__drop a {
    display: flex; align-items: center; min-height: 44px;
    padding: 0 14px; font-size: 14.5px;
  }
}

/* ═══════════ کارت هویت بالای کشو ═══════════

   آواتار توی هدر دیگه اسم نشون نمی‌ده، پس اولین چیزی که کاربر بعد از
   باز کردن کشو می‌بینه باید بگه «با کدوم حساب واردی» — همون کاری که
   اپ‌های خوب بالای منوی کناری‌شون می‌کنن. */

.mob__user {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 14px 6px; padding: 12px 13px;
  border-radius: 15px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  transition: border-color .18s, background .18s;
}
.mob__user:hover { border-color: var(--line-2); }
.mob__user__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-weight: 800; font-size: 15px;
}
.mob__user__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.mob__user__txt b {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mob__user__txt i { font-style: normal; font-size: 12px; color: var(--ink-3); }
.mob__user > svg { width: 17px; height: 17px; color: var(--ink-3); flex: none; }
html[dir="rtl"] .mob__user > svg { transform: scaleX(-1); }

/* دکمه‌ی «مشاهده همه» — سه بخشی: آیکن، دو خط متن، فلش.

   قبلاً یه دکمه‌ی تک‌خطی ساده بود. حالا تعداد واقعی کاتالوگ زیرش
   نوشته می‌شه، چون ویترین بالا فقط بخشی رو می‌چرخونه و کاربر باید
   بدونه پشتش چقدر بیشتر هست. */
.seeall {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 14px;
  border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--paper);
  text-decoration: none; color: inherit;
  transition: border-color .18s, box-shadow .18s, transform .18s, background .18s;
  max-width: 100%;
}
.seeall:hover {
  border-color: var(--brand);
  background: var(--brand-soft);
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), .13);
  transform: translateY(-2px);
}

.seeall__ico {
  flex: none; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand);
  border: 1px solid var(--brand-line);
}
.seeall:hover .seeall__ico { background: var(--paper); }

.seeall__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.seeall__text b {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  line-height: 1.35;
}
/* عدد کاتالوگ عمداً ریزه: خبر دوم صفحه‌ست، نه عنوان دکمه */
.seeall__text small {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
}

.seeall__arrow {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; color: var(--ink-3);
  transition: transform .18s, color .18s;
}
.seeall:hover .seeall__arrow { color: var(--brand); transform: translateX(-3px); }

@media (max-width: 560px) {
  /* روی موبایل تمام‌عرض می‌شه تا هدف لمس بزرگ بمونه */
  .seeall { width: 100%; gap: 12px; padding: 11px 13px; }
  .seeall__text b { font-size: 13.5px; }
  .seeall__text small { font-size: 11px; }
  .seeall__arrow { margin-inline-start: auto; }
}

/* ردیف دوم فیلتر (پلتفرم) — کوچیک‌تر و کم‌رنگ‌تر از ردیف اول.

   ردیف اول تصمیم اصلیه (بازی یا اپلیکیشن)، این یکی محدودترش می‌کنه.
   هم‌وزن بودنشون کاربر رو گیج می‌کرد که کدوم مهم‌تره. */
.platfilter--sub { margin-top: 8px; }
.platfilter--sub .platfilter__btn {
  padding: 6px 13px; font-size: 12px; opacity: .85;
}
.platfilter--sub .platfilter__btn.on { opacity: 1; }

/* عدد کنار اسم فیلتر — قبل از کلیک معلوم باشه چندتاست */
.platfilter__btn b {
  font-weight: 800; font-size: 11px;
  padding: 1px 6px; margin-inline-start: 5px; border-radius: 999px;
  background: var(--paper-2); color: var(--ink-3);
}
.platfilter__btn.on b { background: rgba(255,255,255,.22); color: inherit; }

/* روی موبایل هدف لمس باید راحت باشه — ۳۷ پیکسل کمه.
   ردیف دوم روی دسکتاپ عمداً ریزتره، ولی اون‌جا با ماوس کلیک می‌شه. */
@media (max-width: 560px) {
  .platfilter { gap: 6px; }
  .platfilter__btn { padding: 11px 14px; font-size: 12.5px; }
  .platfilter--sub .platfilter__btn { padding: 10px 13px; font-size: 12px; }
}

/* ═══════════ هسته‌ی هوشمند — بخش درخواست بازی و رفع مشکل ═══════════

   این بخش جای «پیشنهاد و انتقاد» قبلی رو گرفته. فرق مهمش اینه که
   کاربر باید *حس کنه* درخواستش وارد یه فرایند شده، نه اینکه توی یه
   صندوق افتاده. برای همین یه هسته‌ی متحرک بالای هر کارت هست.

   انیمیشن‌ها با transform و opacity کار می‌کنن (نه width/top)، پس
   روی موبایل ضعیف هم روی GPU می‌رن و کند نمی‌کنن. */

.pwlede {
  font-size: 13.5px; color: var(--ink-3); line-height: 1.9;
  margin: -4px 0 18px; max-width: 62ch;
}

.ainote {
  border-radius: 12px; padding: 12px 15px; font-size: 13px;
  line-height: 1.8; margin-bottom: 16px; border: 1px solid;
}
.ainote--ok   { background: #2a9d5c0f; border-color: #2a9d5c3d; color: #1f7d47; }
.ainote--warn { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

.aigrid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.aicard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 13px;
  padding: 20px; border-radius: 18px;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .2s, box-shadow .2s;
}
.aicard:hover { border-color: var(--brand-line); box-shadow: 0 10px 30px -18px rgba(var(--brand-rgb), .5); }

/* هاله‌ی پس‌زمینه که آرام نفس می‌کشه */
.aicard__glow {
  position: absolute; inset-inline-start: -20%; top: -60%;
  width: 90%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .13), transparent 68%);
  animation: aiBreathe 7s ease-in-out infinite;
}
@keyframes aiBreathe {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .75 }
  50%      { transform: scale(1.22) translate3d(6%, 5%, 0); opacity: 1 }
}

.aicard__top { display: flex; align-items: center; gap: 14px; margin-bottom: 2px; }
.aicard__ttl b { display: block; font-size: 15px; font-weight: 800; }
.aicard__ttl i {
  display: block; font-style: normal; font-size: 12px;
  color: var(--ink-3); margin-top: 3px; line-height: 1.6;
}

/* ── هسته: دو حلقه‌ی چرخان، مغز تپنده، و ذره‌هایی که دورش می‌گردن ── */
.aiorb {
  position: relative; flex: none;
  width: 52px; height: 52px; display: grid; place-items: center;
}
.aiorb__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--brand);
  border-inline-end-color: rgba(var(--brand-rgb), .35);
  animation: aiSpin 3.2s linear infinite;
}
.aiorb__ring--2 {
  inset: 8px; border-top-color: transparent;
  border-bottom-color: rgba(var(--brand-rgb), .55);
  animation: aiSpin 2.1s linear infinite reverse;
}
@keyframes aiSpin { to { transform: rotate(360deg) } }

.aiorb__core {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .55);
  animation: aiPulse 2.4s ease-out infinite;
}
@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .5); transform: scale(1) }
  55%  { box-shadow: 0 0 0 13px rgba(var(--brand-rgb), 0); transform: scale(.88) }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); transform: scale(1) }
}

/* شش ذره روی مدار — هرکدوم با تأخیر خودش، مثل داده‌ای که پردازش می‌شه */
.aiorb__dots { position: absolute; inset: 0; }
.aiorb__dots i {
  position: absolute; inset-inline-start: 50%; top: 50%;
  width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px;
  border-radius: 50%; background: var(--brand); opacity: .75;
  animation: aiOrbit 3.6s linear infinite;
}
.aiorb__dots i:nth-child(1) { animation-delay: 0s }
.aiorb__dots i:nth-child(2) { animation-delay: -.6s }
.aiorb__dots i:nth-child(3) { animation-delay: -1.2s }
.aiorb__dots i:nth-child(4) { animation-delay: -1.8s }
.aiorb__dots i:nth-child(5) { animation-delay: -2.4s }
.aiorb__dots i:nth-child(6) { animation-delay: -3s }
@keyframes aiOrbit {
  from { transform: rotate(0deg) translateX(23px) rotate(0deg); opacity: .2 }
  50%  { opacity: .95 }
  to   { transform: rotate(360deg) translateX(23px) rotate(-360deg); opacity: .2 }
}

/* کارت «رفع مشکل» به‌جای ذره، یه خط اسکن داره */
.aiorb--fix .aiorb__scan {
  position: absolute; inset-inline: 6px; top: 50%; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: aiScan 2.6s ease-in-out infinite;
}
@keyframes aiScan {
  0%, 100% { transform: translateY(-17px); opacity: 0 }
  15%, 85% { opacity: 1 }
  50%      { transform: translateY(17px) }
}

.aifield { display: flex; flex-direction: column; gap: 6px; }
.aifield > span { font-size: 12.5px; font-weight: 700; }
.aifield > span i {
  font-style: normal; font-weight: 500; font-size: 11px;
  color: var(--ink-3); margin-inline-start: 4px;
}
.aicard textarea.input { resize: vertical; min-height: 74px; line-height: 1.8; }

.aicard__go { margin-top: 4px; justify-content: center; }

/* شمارنده‌ی بالای صفحه که حالا لینکه */
a.pwstat { text-decoration: none; color: inherit; transition: border-color .18s, transform .18s; }
a.pwstat:hover { border-color: var(--brand); transform: translateY(-2px); }

@media (max-width: 560px) {
  .aigrid { grid-template-columns: 1fr; gap: 13px; }
  .aicard { padding: 16px; border-radius: 15px; }
  .aiorb { width: 44px; height: 44px; }
  .aiorb__dots i { animation-name: aiOrbitSm }
  @keyframes aiOrbitSm {
    from { transform: rotate(0deg) translateX(19px) rotate(0deg); opacity: .2 }
    50%  { opacity: .95 }
    to   { transform: rotate(360deg) translateX(19px) rotate(-360deg); opacity: .2 }
  }
}

/* کسی که انیمیشن براش اذیت‌کننده‌ست، همه‌چی ساکن می‌مونه */
@media (prefers-reduced-motion: reduce) {
  .aicard__glow, .aiorb__ring, .aiorb__core,
  .aiorb__dots i, .aiorb--fix .aiorb__scan { animation: none }
}

/* خط «بازی‌ای که نیست رو بگو» زیر دکمه‌ی مشاهده‌ی همه */
.askline {
  margin: 14px 0 0; text-align: center;
  font-size: 12.5px; line-height: 1.9; color: var(--ink-3);
}
.askline a {
  color: var(--brand); font-weight: 700; text-decoration: none;
  border-bottom: 1px dashed var(--brand-line); padding-bottom: 1px;
}
.askline a:hover { border-bottom-style: solid; }
@media (max-width: 560px) { .askline { font-size: 12px; padding-inline: 6px } }

/* کارت‌هایی که هنوز نوبتشون نشده */
.vcard--hold { display: none; }

/* نشانه‌ی «داره میاد» ته شبکه */
.vmore {
  display: flex; justify-content: center; align-items: center; gap: 6px;
  padding: 22px 0 6px;
}
.vmore span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line-2); animation: vmoreBob 1.2s ease-in-out infinite;
}
.vmore span:nth-child(2) { animation-delay: .15s }
.vmore span:nth-child(3) { animation-delay: .3s }
@keyframes vmoreBob {
  0%, 100% { transform: translateY(0); opacity: .45 }
  50%      { transform: translateY(-5px); opacity: 1 }
}
@media (prefers-reduced-motion: reduce) { .vmore span { animation: none } }


/* ═══════════════ پینگ‌واچ ═══════════════ */

.pwlede {
  font-size: 13px; color: var(--ink-3); line-height: 1.9;
  margin: -2px 0 16px; max-width: 64ch;
}
.pwlede--tight { margin: 4px 0 0; }
.pwh--flush { margin: 0; }

/* ── کارت سرور ─────────────────────────────
   قبلاً فقط پرچم و اسم بود و کارت‌ها خالی به‌نظر می‌رسیدن. حالا
   پروتکل، پینگ و وضعیت هم داخلشه و ردیف پر و خواناست. */
.pwnodes { display: grid; gap: 9px; }
.pwnode {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--paper);
  transition: border-color .18s, transform .18s;
}
.pwnode:hover { border-color: var(--brand-line); transform: translateY(-1px); }

.pwnode__flag {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--paper-2); font-size: 17px;
}
.pwnode__flag img { width: 100%; height: 100%; object-fit: cover; }

.pwnode__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.pwnode__txt b { font-size: 13.5px; font-weight: 700; }
.pwnode__txt i {
  font-style: normal; font-size: 11px; color: var(--ink-3);
}

.pwnode__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: #2a9d5c; box-shadow: 0 0 0 3px #2a9d5c24;
}
.pwnode__dot[data-up="0"] { background: #c0392b; box-shadow: 0 0 0 3px #c0392b24; }


/* ═══════════════ AI GameWatch ═══════════════

   قبلاً دو تا کارت جدا بود که هرکدوم هسته‌ی متحرک خودش رو داشت —
   شلوغ و تکراری. حالا یه بخشه با یه هسته و دو تا تب. */

.aiwrap {
  position: relative; overflow: hidden;
  padding: 22px; border-radius: 20px;
  border: 1px solid var(--line); background: var(--paper);
}
.aiwrap__field {
  position: absolute; inset-inline-start: -15%; top: -70%;
  width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(var(--brand-rgb), .12), transparent 68%);
  animation: aiField 8s ease-in-out infinite;
}
@keyframes aiField {
  0%, 100% { transform: scale(1) translate3d(0, 0, 0); opacity: .7 }
  50%      { transform: scale(1.25) translate3d(8%, 6%, 0); opacity: 1 }
}

.aihead {
  position: relative; display: flex; align-items: flex-start;
  gap: 15px; margin-bottom: 18px;
}

/* هسته: دو حلقه‌ی مخالف‌گرد، مغز تپنده، شش ذره روی مدار */
.aimark { position: relative; flex: none; width: 56px; height: 56px;
  display: grid; place-items: center; }
.aimark__ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid transparent; border-top-color: var(--brand);
  border-inline-end-color: rgba(var(--brand-rgb), .32);
  animation: aiSpin 3.4s linear infinite;
}
.aimark__ring--2 {
  inset: 9px; border-top-color: transparent;
  border-bottom-color: rgba(var(--brand-rgb), .5);
  animation: aiSpin 2.2s linear infinite reverse;
}
@keyframes aiSpin { to { transform: rotate(360deg) } }

.aimark__core {
  width: 16px; height: 16px; border-radius: 50%; background: var(--brand);
  animation: aiPulse 2.4s ease-out infinite;
}
@keyframes aiPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .5); transform: scale(1) }
  55%  { box-shadow: 0 0 0 14px rgba(var(--brand-rgb), 0); transform: scale(.86) }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0); transform: scale(1) }
}

.aimark__dots { position: absolute; inset: 0 }
.aimark__dots i {
  position: absolute; inset-inline-start: 50%; top: 50%;
  width: 3.5px; height: 3.5px; margin: -1.75px 0 0 -1.75px;
  border-radius: 50%; background: var(--brand);
  animation: aiOrbit 3.8s linear infinite;
}
.aimark__dots i:nth-child(1) { animation-delay: 0s }
.aimark__dots i:nth-child(2) { animation-delay: -.63s }
.aimark__dots i:nth-child(3) { animation-delay: -1.26s }
.aimark__dots i:nth-child(4) { animation-delay: -1.9s }
.aimark__dots i:nth-child(5) { animation-delay: -2.53s }
.aimark__dots i:nth-child(6) { animation-delay: -3.16s }
@keyframes aiOrbit {
  from { transform: rotate(0deg) translateX(25px) rotate(0deg); opacity: .18 }
  50%  { opacity: .95 }
  to   { transform: rotate(360deg) translateX(25px) rotate(-360deg); opacity: .18 }
}

/* ── جعبه‌ی فرم با دو تب ── */
.aibox {
  position: relative;
  transition: opacity .35s ease, transform .35s ease;
}
/* موقع ارسال محو می‌شه، و بعد کاملاً از جریان صفحه در میاد تا
   جای خالی پشت سرش نمونه. */
.aibox.gone {
  opacity: 0; transform: scale(.97) translateY(-6px);
  pointer-events: none; height: 0; overflow: hidden; margin: 0;
}

.aitabs {
  display: inline-flex; gap: 4px; padding: 3px; margin-bottom: 15px;
  border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line);
}
.aitab {
  border: 0; cursor: pointer; font-family: inherit;
  padding: 8px 15px; border-radius: 9px; background: none;
  font-size: 12.5px; font-weight: 700; color: var(--ink-3);
  transition: background .18s, color .18s;
}
.aitab:hover { color: var(--ink); }
.aitab.on { background: var(--brand); color: #fff; }

.aipane { display: none; flex-direction: column; gap: 13px; }
.aipane.on { display: flex; }

.aifield { display: flex; flex-direction: column; gap: 6px; }
.aifield > span { font-size: 12.5px; font-weight: 700; }
.aifield > span i {
  font-style: normal; font-weight: 500; font-size: 11px;
  color: var(--ink-3); margin-inline-start: 4px;
}
.aiwrap textarea.input { resize: vertical; min-height: 74px; line-height: 1.8; }
.aigo { justify-content: center; margin-top: 2px; }


/* ── «در حال بررسی» ──
   جای فرم رو می‌گیره. باید حس کنه یه چیزی *داره کار می‌کنه*، نه
   اینکه پیام «ثبت شد» خشک باشه. */
.aidone {
  display: none; position: relative; overflow: hidden;
  text-align: center; padding: 30px 20px 26px;
  border-radius: 16px; border: 1px solid var(--brand-line);
  background: var(--brand-soft);
  animation: aiDoneIn .45s cubic-bezier(.2, .9, .3, 1.2) both;
}
.aidone.on { display: block; }
@keyframes aiDoneIn {
  from { opacity: 0; transform: scale(.95) translateY(10px) }
  to   { opacity: 1; transform: none }
}

/* خط اسکنی که مدام از بالا تا پایین رد می‌شه */
.aidone__scan {
  position: absolute; inset-inline: 0; top: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand), transparent);
  animation: aiDoneScan 2.4s ease-in-out infinite;
}
@keyframes aiDoneScan {
  0%, 100% { transform: translateY(0); opacity: 0 }
  12%, 88% { opacity: .9 }
  50%      { transform: translateY(150px) }
}

/* سه حلقه که پشت سر هم بیرون می‌زنن */
.aidone__orb {
  position: relative; display: block; width: 54px; height: 54px;
  margin: 0 auto 14px;
}
.aidone__orb::after {
  content: ''; position: absolute; inset-inline-start: 50%; top: 50%;
  width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
  border-radius: 50%; background: var(--brand);
}
.aidone__orb i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid var(--brand); opacity: 0;
  animation: aiRipple 2.6s ease-out infinite;
}
.aidone__orb i:nth-child(2) { animation-delay: .85s }
.aidone__orb i:nth-child(3) { animation-delay: 1.7s }
@keyframes aiRipple {
  0%   { transform: scale(.28); opacity: .85 }
  100% { transform: scale(1);   opacity: 0 }
}

.aidone__ttl { display: block; font-size: 15.5px; font-weight: 800; }
.aidone__txt { font-size: 13px; color: var(--ink-2, var(--ink-3)); line-height: 1.9; margin: 7px 0 0; }
.aidone__txt span { display: none }
.aidone[data-kind="add"] .aidone__txt span[data-for="add"],
.aidone[data-kind="fix"] .aidone__txt span[data-for="fix"] { display: inline }

/* نوار پیشرفتِ بی‌پایان — عمداً به هیچ درصدی وصل نیست، فقط
   می‌گه کاری در جریانه */
.aidone__bar {
  display: block; width: 150px; height: 3px; margin: 16px auto 0;
  border-radius: 99px; background: rgba(var(--brand-rgb), .18); overflow: hidden;
}
.aidone__bar i {
  display: block; width: 40%; height: 100%; border-radius: 99px;
  background: var(--brand); animation: aiBar 1.5s ease-in-out infinite;
}
@keyframes aiBar {
  0%   { transform: translateX(-100%) }
  100% { transform: translateX(250%) }
}

.aidone__again {
  margin-top: 16px; border: 0; cursor: pointer; font-family: inherit;
  background: none; color: var(--brand); font-size: 12.5px; font-weight: 700;
  text-decoration: underline dotted; text-underline-offset: 4px;
}

.ainote {
  border-radius: 12px; padding: 12px 15px; font-size: 13px;
  line-height: 1.8; margin-top: 14px; border: 1px solid;
}
.ainote--warn { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); }

a.pwstat { text-decoration: none; color: inherit; transition: border-color .18s, transform .18s; }
a.pwstat:hover { border-color: var(--brand); transform: translateY(-2px); }

@media (max-width: 560px) {
  .aiwrap { padding: 16px; border-radius: 16px; }
  .aibox.gone { inset-inline: 16px; }
  .aihead { gap: 12px; }
  .aimark { width: 46px; height: 46px }
  .aimark__dots i { animation-name: aiOrbitSm }
  @keyframes aiOrbitSm {
    from { transform: rotate(0deg) translateX(20px) rotate(0deg); opacity: .18 }
    50%  { opacity: .95 }
    to   { transform: rotate(360deg) translateX(20px) rotate(-360deg); opacity: .18 }
  }
  .aitabs { display: grid; grid-template-columns: 1fr 1fr; width: 100% }
  .aitab { padding: 11px 8px; font-size: 12px }
  .pwnode { padding: 11px 12px; gap: 10px }
  .pwnode__txt b { font-size: 13px }
}

@media (prefers-reduced-motion: reduce) {
  .aiwrap__field, .aimark__ring, .aimark__core, .aimark__dots i,
  .aidone, .aidone__scan, .aidone__orb i, .aidone__bar i { animation: none }
  .aidone__bar i { width: 100% }
}

/* ── «بازی‌ای که می‌خوای نیست؟» زیر دکمه‌ی مشاهده‌ی همه ──

   قبلاً یه خط متنی کنار دکمه بود و باهاش قاطی می‌شد. حالا خودش یه
   کارت کم‌ارتفاعه که *زیر* دکمه می‌شینه — پس معلومه خبر دومه، نه
   هم‌وزنِ دکمه. */
.showcase__foot { flex-direction: column; align-items: center; gap: 12px; }

.askline {
  display: inline-flex; align-items: center; gap: 11px;
  max-width: 100%; padding: 10px 14px; border-radius: 14px;
  border: 1px dashed var(--line-2); background: transparent;
  text-decoration: none; color: inherit;
  transition: border-color .18s, background .18s, transform .18s;
}
.askline:hover {
  border-color: var(--brand); border-style: solid;
  background: var(--brand-soft); transform: translateY(-2px);
}

.askline__spark {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--brand); animation: askPulse 2.6s ease-out infinite;
}
@keyframes askPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .45) }
  60%  { box-shadow: 0 0 0 9px rgba(var(--brand-rgb), 0) }
  100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), 0) }
}

.askline__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.askline__txt b { font-size: 13px; font-weight: 700; }
.askline__txt i {
  font-style: normal; font-size: 11.5px; color: var(--ink-3); line-height: 1.6;
}
.askline__go { flex: none; color: var(--ink-3); transition: color .18s, transform .18s; }
.askline:hover .askline__go { color: var(--brand); transform: translateX(-3px); }

@media (max-width: 560px) {
  .askline { width: 100%; padding: 11px 13px; }
  .askline__txt b { font-size: 12.5px }
  .askline__txt i { font-size: 11px }
  .askline__go { margin-inline-start: auto }
}
@media (prefers-reduced-motion: reduce) { .askline__spark { animation: none } }

/* Header refinement — scoped to the header and its navigation drawer. */
.header {
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
}
.header::after {
  content: ''; position: absolute; bottom: -1px; inset-inline: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brand-mid), transparent);
  opacity: .45; pointer-events: none;
}
.header .header__in { gap: 24px; }
.header .logo { flex: none; gap: 10px; --mark-w: 48px; --mark-h: 34px; }
.header .logo__text { font-size: 16px; letter-spacing: -.5px; }
.header .logo__text small { margin-top: 4px; font-size: 9px; letter-spacing: .8px; }
.header .nav { gap: 3px; margin-inline: auto; font-size: 13px; white-space: nowrap; }
.header .nav > a, .header .nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 11px; border-radius: 12px;
  color: var(--ink-2); font-weight: 600;
  transition: background .2s, color .2s;
}
.header .nav > a::after { inset-inline: 12px; bottom: 4px; }
.header .nav > a:hover, .header .nav__toggle:hover,
.header .nav a[aria-current], .header .nav__more.open > button {
  background: var(--brand-soft); color: var(--brand);
}
.header .nav a[aria-current]::after { transform: scaleX(1); }
.header .nav__ping { background: var(--brand-soft); }
.header .nav__signal { display: flex; align-items: end; gap: 2px; height: 14px; }
.header .nav__signal i { width: 3px; height: 5px; border-radius: 2px; background: currentColor; }
.header .nav__signal i:nth-child(2) { height: 9px; opacity: .75; }
.header .nav__signal i:nth-child(3) { height: 13px; opacity: .5; }
.header .nav__more { position: relative; }
.header .nav__toggle { font: inherit; font-weight: 600; cursor: pointer; border: 0; background: transparent; }
.header .nav__toggle svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .22s; }
.header .nav__more.open .nav__toggle svg { transform: rotate(180deg); }
.header .nav__panel, .header .usermenu__drop {
  position: absolute; top: calc(100% + 13px); inset-inline-end: 0; z-index: 90;
  width: 268px; padding: 10px; background: var(--paper);
  border: 1px solid var(--line); border-radius: 18px;
  box-shadow: 0 18px 50px -16px rgba(var(--maroon-rgb), .24);
  display: block; visibility: hidden; opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.header .nav__more.open .nav__panel, .header .usermenu.open .usermenu__drop {
  visibility: visible; opacity: 1; transform: translateY(0); pointer-events: auto;
  transition-delay: 0s;
}
.header .nav__caption, .mob .mob__caption {
  display: block; padding: 6px 12px 10px; color: var(--ink-3); font-size: 11px; font-weight: 500;
}
.header .nav__panel a { display: block; padding: 10px 12px; border-radius: 10px; white-space: normal; }
.header .nav__panel a::after { display: none; }
.header .nav__panel a:hover, .header .usermenu__drop a:hover { background: var(--paper-2); color: var(--brand); }
.header .nav__panel a span { display: block; font-size: 13px; }
.header .nav__panel a small { display: block; color: var(--ink-3); font-size: 11px; font-weight: 400; margin-top: 2px; }
.header .header__cta { flex: none; gap: 7px; }
.header .header__cta > .btn { min-height: 44px; border-radius: 12px; padding: 9px 15px; font-size: 12.5px; }
.header .header__cta > .btn--brand { box-shadow: 0 5px 14px -7px rgba(var(--brand-rgb), .6); }
.header .header__cta > .btn--ghost { border-color: transparent; }
.header .clock { width: 44px; height: 44px; min-height: 44px; padding: 0; justify-content: center; border-radius: 12px; }
.header .clock b { display: none; }
.header .clock svg { width: 18px; height: 18px; }
.header .usermenu__btn { min-height: 44px; border-radius: 12px; border-color: var(--line); }
.header .usermenu__drop { width: 210px; }
.header .usermenu__drop a { min-height: 44px; }
.header :is(a, button):focus-visible, .mob :is(a, button):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
.header .burger { width: 44px; height: 44px; border-radius: 13px; background: var(--paper-2); }
.mob {
  width: min(380px, calc(100vw - 20px)); background: var(--paper);
  border-radius: 24px 0 0 24px; overflow: hidden;
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom);
}
.mob .mob__head { padding: 20px; flex: none; }
.mob .mob__head .logo { --mark-w: 46px; --mark-h: 32px; }
.mob .mob__x { width: 44px; height: 44px; background: var(--paper-2); border-radius: 14px; }
.mob .mob__nav { min-height: 0; padding: 12px; overscroll-behavior: contain; }
.mob .mob__nav a { position: relative; padding: 11px 14px 11px 36px; min-height: 66px; border: 1px solid transparent; margin-bottom: 3px; border-radius: 14px; }
.mob .mob__nav a span { font-size: 14px; }
.mob .mob__nav a i { font-size: 11.5px; margin-top: 1px; }
/* Expanding hover surface + translating arrow inspired by alexmaracinaru,
   https://uiverse.io/alexmaracinaru/brown-bobcat-65 (MIT).
   Reimplemented with GameWatch tokens and RTL navigation markup. */
.mob .mob__nav a::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: rgba(var(--brand-rgb), .055); transform: scaleX(0); transform-origin: right;
  transition: transform .24s ease; pointer-events: none;
}
.mob .mob__nav a::after {
  content: '←'; position: absolute; left: 15px; top: 50%; margin-top: -12px;
  color: var(--brand); opacity: .45; transition: transform .24s, opacity .24s;
}
.mob .mob__nav a:hover::before, .mob .mob__nav a[aria-current]::before { transform: scaleX(1); }
.mob .mob__nav a:hover::after { transform: translateX(-3px); opacity: 1; }
.mob .mob__nav a:hover { transform: none; background: transparent; }
.mob .mob__nav a[aria-current] { border-color: var(--brand-line); color: var(--brand); }
.mob .mob__foot { flex: none; grid-template-columns: 1fr 1fr; padding: 14px 18px 18px; background: var(--paper-2); }
.mob .mob__foot .btn { min-height: 44px; font-size: 13px; padding: 10px; border-radius: 12px; }
.mob .mobclock { flex: none; margin: 8px 18px 12px; min-height: 44px; }
.mob .mob__user { flex: none; margin: 12px 18px 0; }
.mob.open .mob__nav a { animation: headerLinkIn .3s ease-out both; }
.mob.open .mob__nav a:nth-of-type(2) { animation-delay: .025s; }
.mob.open .mob__nav a:nth-of-type(3) { animation-delay: .05s; }
.mob.open .mob__nav a:nth-of-type(n+4) { animation-delay: .075s; }
@keyframes headerLinkIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
@media (min-width: 1061px) {
  .header .header__in { gap: clamp(12px, 1.8vw, 24px); }
  .header .nav { display: flex; }
  .header .burger { display: none; }
}
@media (max-width: 1060px) {
  .header .header__in { display: flex; gap: 12px; padding-inline: 20px; }
  .header .burger { order: 1; flex: none; }
  .header .logo { order: 2; }
  .header .header__cta { order: 3; margin-inline-start: auto; }
  .header .nav, .header .clock { display: none; }
}
@media (max-width: 560px) {
  .header .header__in { padding-inline: 12px; gap: 9px; }
  .header .logo { --mark-w: 36px; --mark-h: 28px; gap: 6px; }
  .header .logo__text { font-size: 14px; }
  .header .header__cta > .btn { padding-inline: 12px; font-size: 12px; }
}
@media (max-width: 350px) {
  .header .header__in { gap: 7px; padding-inline: 10px; }
  .header .logo { --mark-w: 30px; --mark-h: 24px; }
  .header .logo__text { font-size: 12px; }
  .header .header__cta > .btn { padding-inline: 9px; font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .header *, .header *::before, .header *::after,
  .mob, .mob *, .mob *::before, .mob *::after, .mobscrim {
    animation: none !important; transition: none !important;
  }
}


/* ═══════════════ دعوت دوستان ═══════════════ */

.refpage { max-width: 760px; padding-block: var(--s7) var(--s8); }
.refpage > * + * { margin-top: var(--s5); }

.reflink__lab { display:block; font-size:13px; font-weight:600;
  color:var(--ink-2); margin-bottom:8px; }
.reflink__row { display:flex; gap:8px; }
.reflink__in {
  flex:1; min-width:0; font-family:ui-monospace,Menlo,monospace; font-size:13.5px;
  padding:0 12px; height:44px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--paper-2); color:var(--ink);
}
.reflink__code { margin-top:10px; }

.refstats { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); margin-top:var(--s5); }
.refstat { text-align:center; padding:var(--s5) var(--s3); }
.refstat b { display:block; font-size:24px; font-weight:800; line-height:1.2; }
.refstat span { font-size:13px; color:var(--ink-3); }
.refstat--win b { color:var(--brand); }

.refnext__bar { height:8px; border-radius:99px; background:var(--paper-3); overflow:hidden; margin-bottom:12px; }
.refnext__bar i { display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2)); transition:width .4s ease; }
.refnext p, .refhow p { font-size:14.5px; }
.refnext--top p { margin:0; }

.refhow h2, .reflist h2 { font-size:17px; margin-bottom:12px; }
.refhow ol { margin:0 0 12px; padding-inline-start:20px; display:grid; gap:8px; font-size:14.5px; }

.reftab { width:100%; border-collapse:collapse; }
.reftab td { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; }
.reftab tr:last-child td { border-bottom:0; }
.reftab td:last-child { text-align:end; }
.pill { display:inline-block; padding:3px 10px; border-radius:99px;
  font-size:12px; background:var(--paper-3); color:var(--ink-3); }
.pill--ok { background:var(--brand-soft); color:var(--brand); font-weight:600; }

/* کد تست رایگان + دکمه‌ی کپی کنارش */
.trialcode__row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }

@media (max-width: 560px) {
  .refstats { grid-template-columns:1fr; }
  .refstat { display:flex; align-items:baseline; justify-content:space-between;
    text-align:start; padding:var(--s4) var(--s5); }
  .refstat b { font-size:20px; }
}


/* ═══════════ «بازیت نیست؟» ═══════════

   تا امروز این قابلیت ته یک صفحه‌ی دیگر قایم بود و کاربر نمی‌دانست
   کجا باید بگوید. حالا اولین چیزی است که توی صفحه‌ی بازی‌ها می‌بیند. */
.askbox {
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); margin-top:var(--s5);
  border-radius:16px; border:1px solid var(--brand-line);
  background:linear-gradient(100deg, var(--brand-soft), var(--paper));
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.askbox:hover {
  transform:translateY(-2px);
  border-color:var(--brand-2);
  box-shadow:0 10px 30px -14px rgba(var(--brand-rgb), .5);
}
.askbox__ic {
  flex:none; width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; color:#fff; background:var(--brand);
}
.askbox__ic svg { width:20px; height:20px; }
.askbox__txt { flex:1; min-width:0; }
.askbox__txt b { display:block; font-size:15px; font-weight:700; }
.askbox__txt i { font-style:normal; font-size:13px; color:var(--ink-3); }
.askbox__go { flex:none; color:var(--brand); }
.askbox__go svg { width:20px; height:20px; transition:transform .18s ease; }
.askbox:hover .askbox__go svg { transform:translateX(-3px); }

/* دو مورد منو که باید بیشتر از بقیه دیده شوند */
/* تنها موردی که برای کاربر سود مستقیم دارد، پس کمی پررنگ‌تر —
   ولی بدون ایموجی. */
.nav__gift { font-weight:700; color:var(--brand); }
.nav__gift::after { background:var(--brand); }

@media (max-width: 560px) {
  .askbox { gap:var(--s3); padding:var(--s4); }
  .askbox__txt b { font-size:14px; }
  .askbox__txt i { font-size:12px; }
}


/* ═══════════ نوار دعوت دوستان، صفحه‌ی اصلی ═══════════

   عمداً یک نوارِ باریک است نه یک بخشِ کامل: صفحه‌ی اصلی از قبل هفت
   بخش دارد و شلوغ نشدنش مهم‌تر از بزرگ دیده شدنِ این یکی است. */
.sec--tight { padding-block: 0 }
.refband {
  display:flex; align-items:center; gap:var(--s4);
  padding:var(--s4) var(--s5); border-radius:18px;
  border:1px solid var(--brand-line);
  background:linear-gradient(100deg, var(--brand-soft), var(--paper) 70%);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.refband:hover {
  transform:translateY(-2px); border-color:var(--brand-2);
  box-shadow:0 12px 32px -16px rgba(var(--brand-rgb), .5);
}
.refband__ic {
  flex:none; width:44px; height:44px; border-radius:13px;
  display:grid; place-items:center; color:#fff; background:var(--brand);
}
.refband__ic svg { width:22px; height:22px }
.refband__txt { flex:1; min-width:0 }
.refband__txt b { display:block; font-size:15.5px; font-weight:700 }
.refband__txt i { font-style:normal; font-size:13px; color:var(--ink-3) }
.refband__go { flex:none; color:var(--brand) }
.refband__go svg { width:20px; height:20px; transition:transform .18s ease }
.refband:hover .refband__go svg { transform:translateX(-3px) }

@media (max-width: 560px) {
  .refband { gap:var(--s3); padding:var(--s4) }
  .refband__ic { width:38px; height:38px; border-radius:11px }
  .refband__txt b { font-size:14px }
  .refband__txt i { font-size:12px }
}

/* همان نوار، ولی داخل صفحه‌ی حساب که فضایش تنگ‌تر است */
.refband--acc { margin-bottom: 34px }

/* «بازیت نیست؟» بالای پنلِ «بیشتر» — بیشترین سؤالی که کاربر دارد،
   پس با رنگ برند از بقیه‌ی گزینه‌ها جدا می‌شود. */
.nav__panel-hot span { color: var(--brand) }
.nav__panel-hot::after {
  content: ''; display: block; height: 1px; margin: 8px 0 2px;
  background: var(--line);
}

/* برچسب «اختیاری» کنار عنوان فیلد */
.field__opt {
  font-size:11px; font-weight:500; color:var(--ink-3);
  background:var(--paper-3); border-radius:5px; padding:1px 6px;
  margin-inline-start:6px;
}

/* ───────────── جست‌وجوی صفحه‌ی بازی‌ها ─────────────
   کوچک و بی‌ادعا، هم‌قدِ دکمه‌های فیلترِ زیرش. */
.gsearch {
  position: relative; display: flex; align-items: center;
  max-width: 420px; margin-top: 22px;
}
.gsearch__ic {
  position: absolute; inset-inline-start: 14px; width: 17px; height: 17px;
  color: var(--ink-3); pointer-events: none;
}
.gsearch__in {
  width: 100%; height: 42px; padding: 0 44px; font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line); border-radius: 99px;
  transition: border-color .18s, box-shadow .18s;
}
.gsearch__in::placeholder { color: var(--ink-3); }
.gsearch__in:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .12);
}
/* دکمه‌ی ضربدرِ خودِ مرورگر؛ مالِ خودمان را داریم */
.gsearch__in::-webkit-search-cancel-button { display: none; }
.gsearch__n {
  position: absolute; inset-inline-end: 44px; font-size: 12px; color: var(--ink-3);
  pointer-events: none; white-space: nowrap;
}
.gsearch__x {
  position: absolute; inset-inline-end: 8px; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-3); cursor: pointer;
}
.gsearch__x:hover { background: var(--paper-2); color: var(--ink); }
.gsearch__x svg { width: 15px; height: 15px; }
.gsearch__x[hidden] { display: none; }

.vcard--miss { display: none; }
.gsec[hidden] { display: none; }

.gnone {
  text-align: center; padding: 40px 16px; color: var(--ink-2);
  border: 1px dashed var(--line-2); border-radius: 16px;
}
.gnone[hidden] { display: none; }
.gnone b { display: block; font-size: 15px; margin-bottom: 8px; color: var(--ink); }
.gnone a { font-size: 13.5px; color: var(--brand); font-weight: 600; }

@media (max-width: 560px) {
  .gsearch { max-width: none; }
}

/* ================================= پلنِ دلخواه: کارتِ سوم، هم‌قد و هم‌شکلِ پلن‌ها */
.pcards { max-width:1120px; }
.pcard--custom { border:1.5px solid transparent;
  background: linear-gradient(var(--paper),var(--paper)) padding-box,
              linear-gradient(160deg, rgba(var(--brand-rgb),.6), rgba(var(--brand-rgb),.1) 45%, var(--line)) border-box; }
.pcard--custom::before { content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background: radial-gradient(90% 45% at 50% 0%, rgba(var(--brand-rgb),.09), transparent 70%); }
.pcard--custom > * { position:relative; }
.pcust { display:flex; flex-direction:column; flex:1; }
.pcard__badge--soft { background: var(--brand-soft); color: var(--brand); box-shadow:none; }
.pcard--custom .pcard__price b { color: var(--brand); }
.pcust__rows { display:grid; gap:18px; margin: var(--s5) 0; padding-top: var(--s4); border-top:1px solid var(--line); }
.pcust .crange__top { margin-bottom:9px; }
.pcust .crange__top b { font-size:13px; }
.pcust .crange__top i { font-size:16px; }
.pcust .crange input[type="range"] { height:6px; }
.pcust .crange input[type="range"]::-webkit-slider-thumb { width:20px; height:20px; }
.pcust .btn { margin-top:auto; }
.pcust__note { margin:10px 0 0; font-size:11px; color:var(--ink-3); text-align:center; }

/* =================================================== پلن‌ها روی گوشی (مهر ۱۴۰۵)
   کارت‌ها زیرِ هم بودند و کاربر فکر می‌کرد فقط یک پلن هست و پلنِ دلخواه را نمی‌دید؛ حالا
   یک ردیفِ کشیدنی‌اند. جای بخش همان قبلی است (بالا آوردنش را کاربر نخواست). */
.pswitch, .pdots { display: none; }
@media (max-width: 640px) {
  #plans .sec__head { margin-bottom: 16px !important; }
  #plans .sec__head .lede { font-size: 13.5px; }
  #plans .tryfree { margin-bottom: 14px; }

  /* یک ردیفِ کشیدنی: کارتِ بعدی از لبه پیداست */
  .pswitch { display: flex; gap: 6px; padding: 4px; margin: 0 auto 12px; width: fit-content; border-radius: 14px;
    background: var(--paper-2); border: 1px solid var(--line); }
  .pswitch button { border: 0; background: none; font: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2);
    padding: 7px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
  .pswitch button i { font-style: normal; font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px;
    display: inline-grid; place-items: center; background: var(--line); }
  .pswitch button.on { background: var(--paper); color: var(--ink); box-shadow: var(--shadow-s); }
  .pswitch button.on i { background: var(--brand); color: #fff; }
  .pcards { display: flex; align-items: stretch; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(50% - 50vw); padding: 6px calc(50vw - 50%) 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pcards::-webkit-scrollbar { display: none; }
  .pcards > .pcard { flex: 0 0 84%; scroll-snap-align: center; transform: none !important; padding: var(--s4); }
  .pdots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
  .pdots i { width: 7px; height: 7px; border-radius: 99px; background: var(--line-2); transition: width .2s, background .2s; cursor: pointer; }
  .pdots i.on { width: 20px; background: var(--brand); }

  /* «چی به‌دست میاری»: دو ستونه و کوتاه */
  .whys { grid-template-columns: 1fr 1fr; gap: 10px; }
  .why { padding: 14px 12px; }
  .why__ico { width: 34px; height: 34px; border-radius: 11px; margin-bottom: 8px; }
  .why__ico svg { width: 18px; height: 18px; }
  .why h3 { font-size: 13.5px; margin-bottom: 4px; }
  .why p { font-size: 12px; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* ============================================ پیش‌نمایشِ برنامه و «چطور کار می‌کنه» */
/* پیش‌نمایشِ هیرو: همان صفحه‌ی بوستِ برنامه — همیشه تیره، مثلِ خودِ برنامه */
.app2 {
  background: #0a0e17; border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  padding: 10px; box-shadow: var(--shadow-l); color: #e8edf7; display: grid; gap: 10px; min-width: 0;
}
html.night .app2 { filter: brightness(1.06); }
.app2__bar { display: flex; align-items: center; gap: 9px; padding: 3px 6px; }
.app2__nav { display: flex; gap: 3px; margin-inline-start: 8px; }
.app2__nav i { font-style: normal; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 8px; color: #8e98ab; border: 1px solid transparent; }
.app2__nav i.on { color: #fff; background: rgba(242,112,42,.14); border-color: rgba(242,112,42,.4); }
.app2__stage {
  position: relative; isolation: isolate; overflow: hidden; border-radius: 16px;
  display: grid; gap: 9px; padding: 92px 11px 11px; background: #11151f;
}
.app2__bg { position: absolute; inset: 0; z-index: -1; }
.app2__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; opacity: .7; transition: opacity .35s; }
.app2__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,23,.1) 0%, rgba(10,14,23,.6) 32%, rgba(10,14,23,.94) 62%, #0a0e17 100%); }
.app2__fade { transition: opacity .28s; }
.app2.swap .app2__fade, .app2.swap .app2__bg img { opacity: 0; }
.app2__stats > div, .app2__route, .app2__chart {
  background: rgba(14,18,29,.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08); border-radius: 13px;
}
.app2__game { display: flex; align-items: center; gap: 10px; }
.app2__cover { width: 46px; height: 46px; flex: none; border-radius: 12px; object-fit: cover; border: 1px solid rgba(255,255,255,.18); }
.app2__gt { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.app2__gt b { font-size: 18px; font-weight: 800; color: #fff; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app2__timer { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums;
  background: rgba(14,18,29,.8); border: 1px solid rgba(47,189,126,.35); border-radius: 99px; padding: 2px 9px; }
.app2__timer i { width: 6px; height: 6px; border-radius: 50%; background: #2fbd7e; box-shadow: 0 0 0 3px rgba(47,189,126,.22); animation: a2led 2s ease-in-out infinite; }
@keyframes a2led { 50% { box-shadow: 0 0 0 5px rgba(47,189,126,.05); } }
.app2__cut { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #ffb3b3;
  background: rgba(224,82,82,.12); border: 1px solid rgba(224,82,82,.38); border-radius: 10px; padding: 6px 11px; }
.app2__cut svg { width: 13px; height: 13px; }
.app2__stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
.app2__stats > div { padding: 8px 11px; min-width: 0; }
.app2__stats small { display: block; font-size: 10.5px; color: #a3adc1; }
.app2__ping b { display: inline-flex; align-items: baseline; gap: 4px; direction: ltr; font-size: 32px; font-weight: 800; line-height: 1.15; color: #5ef0a6; font-variant-numeric: tabular-nums; }
.app2__ping b.mid { color: #f2c94c; } .app2__ping b.bad { color: #ff6b6b; }
.app2__ping em { font-style: normal; font-size: 12px; font-weight: 600; color: #a3adc1; }
.app2__mini { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.app2__mini b { font-size: 16px; color: #fff; direction: ltr; font-variant-numeric: tabular-nums; }
.app2__route { display: flex; align-items: flex-start; gap: 2px; padding: 10px 6px 9px; }
.app2__node { flex: 0 0 29%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.app2__node b { font-size: 11.5px; line-height: 1.45; color: #fff; max-width: 100%; margin-top: 3px; overflow: hidden;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.app2__node small { font-size: 9.5px; color: #6b7688; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app2__ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); color: #dfe4ee; }
.app2__ic svg { width: 17px; height: 17px; }
.app2__ic img { width: 100%; height: 100%; object-fit: cover; }
.app2__node--gw .app2__ic { width: 38px; height: 38px; border-color: rgba(242,112,42,.6); box-shadow: 0 0 0 4px rgba(242,112,42,.14); }
.app2__leg { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 6px; }
.app2__leg b { font-size: 11px; font-weight: 800; color: #5ef0a6; direction: ltr; font-variant-numeric: tabular-nums; }
.app2__leg b.mid { color: #f2c94c; } .app2__leg b.bad { color: #ff6b6b; }
.app2__leg i { position: relative; width: 100%; height: 2px; border-radius: 2px; background: rgba(255,255,255,.12); overflow: hidden; }
.app2__leg i::after { content: ""; position: absolute; inset: 0; width: 45%;
  background: linear-gradient(90deg, transparent, #f2702a, transparent); animation: a2flow 1.5s linear infinite; }
@keyframes a2flow { from { transform: translateX(-100%); } to { transform: translateX(230%); } }
.app2__chart { padding: 7px 10px 6px; }
.app2__chart header { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; color: #6b7688; margin-bottom: 3px; }
.app2__chart svg { display: block; width: 100%; height: 54px; }
.app2__chart .l { fill: none; stroke: #f2702a; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app2__chart .a { fill: url(#a2g); }
@media (max-width: 560px) {
  .app2__stage { padding-top: 76px; }
  .app2__nav { display: none; }
  .app2__ping b { font-size: 28px; }
  .app2__stats { gap: 6px; }
  .app2__stats > div { padding: 7px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .app2__leg i::after, .app2__timer i { animation: none; }
}

/* سه قدمِ «چطور کار می‌کنه» — داخلِ بخشِ تیره‌ی امکانات */
.nsteps { list-style: none; margin: 0 0 var(--s6); padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.nsteps li { display: flex; align-items: flex-start; gap: 12px; border-radius: var(--r3); padding: var(--s4) var(--s5);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.nsteps li > b { flex: none; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 16px;
  color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-2)); box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb), .8); }
.nsteps h3 { font-size: 15.5px; margin-bottom: 3px; color: #fff; }
.nsteps p { font-size: 13.5px; color: var(--on-dark-2); margin: 0; }
.usegrid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
@media (max-width: 900px) { .nsteps, .usegrid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .nsteps { gap: 8px; margin-bottom: var(--s5); }
  .nsteps li { padding: 11px 14px; align-items: center; }
  .nsteps li > b { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; }
  .nsteps h3 { font-size: 14.5px; margin-bottom: 1px; }
  .nsteps p { font-size: 12.5px; line-height: 1.8; }
  .usegrid { gap: 10px; }
  .usegrid .usecase { padding: 16px; }
  .usegrid .usecase__icon { width: 38px; height: 38px; margin-bottom: 8px; }
  .usegrid .usecase h3 { font-size: 16px; }
  .usegrid .ticks { margin-top: 8px; gap: 6px; }
  .usegrid .ticks li { font-size: 13px; }
}

/* پیش‌نمایش وقتی اشتراکِ انتخاب‌شده‌ی کاربر وصل نیست */
.app2__go { display: none; flex: none; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, #f2702a, #ff9155); border-radius: 10px; padding: 6px 13px;
  box-shadow: 0 8px 18px -8px rgba(242,112,42,.8); }
.app2__go svg { width: 12px; height: 12px; }
.app2--off .app2__go { display: inline-flex; }
.app2--off .app2__cut, .app2--off #a2time, .app2--off .app2__ping em, .app2--off .app2__u { display: none; }
.app2__u { font-style: normal; }
#a2left:empty { display: none; }
.app2--off .app2__timer { color: #a3adc1; border-color: rgba(255,255,255,.15); }
.app2--off .app2__timer i { background: #6b7688; box-shadow: none; animation: none; }
.app2--off .app2__ping b, .app2--off .app2__leg b, .app2--off .app2__mini b { color: #6b7688; }
.app2--off .app2__leg i::after { animation: none; opacity: 0; }
.app2--off .app2__node--gw .app2__ic { box-shadow: none; border-color: rgba(255,255,255,.12); }
.app2--off .app2__bg img { filter: grayscale(.6) brightness(.8); }

/* ============================================ روحِ سرک‌کش (نادر، یک جمله) */
.sghost { position: fixed; bottom: 0; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px;
  translate: -50% 0; pointer-events: none; animation: sgpeek 8s cubic-bezier(.3,.7,.3,1) both; }
.sghost svg { width: 46px; height: 46px; pointer-events: auto; cursor: pointer; animation: sghop .5s linear infinite;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.22)); }
.sghost .gbody { fill: #f2702a; } .sghost--b .gbody { fill: #3f83f0; }
.sghost .fa { animation: sgfa .5s linear infinite; } .sghost .fb { animation: sgfb .5s linear infinite; }
.sghost .pu { animation: sglook 3s linear infinite; }
.sghost__say { position: relative; pointer-events: auto; width: max-content; max-width: min(240px, calc(100vw - 40px));
  background: #fff; color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; box-shadow: var(--shadow-m);
  padding: 8px 13px; font-size: 13px; font-weight: 700; line-height: 1.75; text-align: center; text-decoration: none;
  animation: sgsay 8s ease both; }
.sghost__say::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; translate: -50% 0; rotate: 45deg;
  background: #fff; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
a.sghost__say { color: var(--brand); }
a.sghost__say:hover { text-decoration: underline; }
.sghost.boo { animation: sgboo .55s ease-in both; }
@media (prefers-reduced-motion: reduce) { .sghost svg, .sghost .fa, .sghost .fb, .sghost .pu { animation: none; } }
.sghost.boo .sghost__say { animation: none; opacity: 0; transition: opacity .15s; }
@keyframes sgpeek { 0% { transform: translateY(105%); } 12%, 86% { transform: translateY(22%); } 17% { transform: translateY(28%); } 100% { transform: translateY(105%); } }
@keyframes sgsay { 0%, 14% { opacity: 0; transform: translateY(6px) scale(.94); } 20%, 80% { opacity: 1; transform: none; } 86%, 100% { opacity: 0; transform: translateY(4px); } }
@keyframes sgboo { 0% { transform: translateY(22%); } 35% { transform: translateY(0) scale(1.1); } 100% { transform: translateY(120%); } }
@keyframes sghop { 0%, 49.9% { transform: translateY(0); } 50%, 100% { transform: translateY(-4px); } }
@keyframes sgfa { 0%, 49.9% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sgfb { 0%, 49.9% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes sglook { 0%, 49.9% { transform: none; } 50%, 99.9% { transform: translateX(1px); } }
@media print { .sghost { display: none; } }

/* صفحه‌ی بازی‌ها: بنرِ کامل، اسم و پلتفرم زیرش */
.vgrid--games { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.vcard--game .vcard__name { position: static; display: block; margin-top: 10px; font-size: 15px; font-weight: 800;
  color: var(--ink); text-shadow: none; }
.vcard__plats { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.xp { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 99px; line-height: 1.6;
  color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line-2); }
.xp--pc { color: #c2410c; border-color: rgba(242,112,42,.45); background: rgba(242,112,42,.08); }
.xp--ps { color: #1d4ed8; border-color: rgba(63,131,240,.45); background: rgba(63,131,240,.08); }
.xp--xbox { color: #15803d; border-color: rgba(47,189,126,.45); background: rgba(47,189,126,.08); }
.xp--android { color: #4d7c0f; border-color: rgba(120,200,80,.5); background: rgba(120,200,80,.1); }
@media (max-width: 560px) { .vgrid--games { grid-template-columns: 1fr 1fr; gap: 14px; } .vcard--game .vcard__name { font-size: 13.5px; } }