/* =================================================================
   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;
  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 { display:flex; align-items:center; gap:11px; }
.logo__svg { width:34px; height:34px; flex: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); }

/* سوالات */
.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); }
.footer__grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; 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; }
  .burger { display:block; }
  .header { position:sticky; }
}

@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 { max-width: 430px; margin-inline:auto; padding: 72px 24px 110px; }
.authcard { background:#fff; border:1px solid var(--line); border-radius:var(--r4);
  padding: var(--s6); box-shadow: var(--shadow-m); }
.authcard__head { margin-bottom: var(--s5); }
.authcard__head h1 { font-size:26px; margin-bottom:6px; }
.authcard__foot { margin-top: var(--s5); padding-top: var(--s4);
  border-top:1px solid var(--line); text-align:center; font-size:14px; color:var(--ink-3); }
.authcard__foot a { color: var(--brand); font-weight:700; }
.center { text-align:center; }
.authcard h1 { font-size:26px; margin-bottom:6px; }
.authcard__lede { font-size:14px; color:var(--ink-3); margin-bottom:var(--s5); line-height:1.75; }
.authcard__lede b { color:var(--ink); font-weight:700; }
.authcard__resend { margin-top:var(--s3); text-align:center; }

.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); }

/* ورود */
.authpage { max-width: 380px; margin-inline:auto; padding: 80px 24px 120px; }
.authcard { background:#fff; border:1px solid var(--line); border-radius:var(--r4); padding: var(--s6); }
.authcard h1 { font-size:22px; margin-bottom: var(--s5); }

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

.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; }

/* از سمت چپ میاد بیرون — هم توی فارسی هم انگلیسی، ثابت و قابل‌پیش‌بینی */
.mob {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 99;
  width: min(330px, 88vw); display: flex; flex-direction: column;
  background: #fff; border-right: 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: 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; }
.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; }

.bloglist { display:grid; 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; }

/* حالت شب — چشم رو اذیت نکنه، ولی تیره هم نشه.
   کاغذ گرم‌تر و کم‌نورتر می‌شه و کنتراست متن یه پله میاد پایین. */
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; }

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

.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; } }

.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); }

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

.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); }