/* ===================================================================
   SITE — صفحه‌ی اول + پنل «برنامه‌های من» + پایه‌ی صفحه‌های اطلاعاتی و مقاله‌ها (روی css/base.css سوار می‌شه)
   همه‌ی صفحه‌های سایت سفید و مشکی‌ان: رنگ‌هاشون توی بلوکِ .light (پایینِ فایل) و کلاسِ light روی <html>ِ صفحه‌ها،
   روی صفحه‌ی اول و پنل و پنجره‌ها. :root پایینِ همین خط همون پالتِ تیره‌ی نئونیِ قبلیه (پنل مدیریت هنوز همونه)
=================================================================== */

:root{
  --ink:#050609;
  --ink-2:#0A0C16;
  --panel:#0D1020;
  --panel-2:#12162E;
  --panel-3:#171B38;
  --line:rgba(237,239,247,0.10);
  --line-strong:rgba(237,239,247,0.20);
  --text:#EDEFF7;
  --text-dim:rgba(237,239,247,0.62);
  --text-dimmer:rgba(237,239,247,0.42);

  --accent:#00E5FF;
  --accent-2:#B24BFF;
  --accent-3:#6BFFB8;
  --accent-ink:#04050A;
  --accent-soft:rgba(0,229,255,0.12);
  --accent-line:rgba(0,229,255,0.32);
  --accent-tint:rgba(0,229,255,0.05);
  --accent-ring:rgba(0,229,255,0.16);
  --grad-brand:linear-gradient(135deg, var(--accent), var(--accent-2));
  --grad-soft:linear-gradient(135deg, rgba(0,229,255,0.14), rgba(178,75,255,0.14));
  --grad-text:linear-gradient(100deg, var(--accent), var(--accent-2) 65%, var(--accent-3));
  --mint-soft:rgba(107,255,184,0.14);
  --violet-soft:rgba(178,75,255,0.16);
  --warn:#FFC94D;
  --warn-soft:rgba(255,201,77,0.12);
  --danger:#FF5C7A;
  --danger-soft:rgba(255,92,122,0.13);
  /* زمینه‌ی کم‌رنگِ ردیف‌های داخلِ کارت، و خطِ دورِ حالت‌های «انجام شد»، «انجام نشد» و «چند روز مونده» */
  --fill:rgba(237,239,247,0.03);
  --fill-strong:rgba(237,239,247,0.07);
  --ok-line:rgba(107,255,184,0.32);
  --ok-tint:rgba(107,255,184,0.05);
  --danger-line:rgba(255,92,122,0.42);
  --warn-line:rgba(255,201,77,0.35);

  --shadow-lift:0 1px 0 rgba(255,255,255,0.04) inset, 0 28px 64px -28px rgba(0,0,0,0.8);
  --shadow-accent:0 12px 34px -12px rgba(178,75,255,0.5);

  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --z-nav:40; --z-sheet:60; --z-modal:80; --z-toast:100;
  --container:1180px;
  --gutter:clamp(16px, 4vw, 32px);
  --spring:cubic-bezier(.2,.9,.25,1.15);
}

html{ scroll-padding-top:96px; scrollbar-gutter:stable; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
html.is-locked, html.is-locked body{ overflow:hidden; }
body{ background:var(--ink); }
::selection{ background:rgba(0,229,255,0.28); color:#fff; }
p{ text-wrap:pretty; }
.nowrap{ white-space:nowrap; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

#app{ position:relative; z-index:2; }
#main:focus{ outline:none; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); position:relative; }

/* ---------- buttons ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 20px; border-radius:var(--r-sm);
  font-size:14.5px; font-weight:700; line-height:1; white-space:nowrap;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  transition:transform .22s var(--spring), background-color .2s, border-color .2s, box-shadow .2s, color .2s;
  -webkit-tap-highlight-color:transparent;
}
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0) scale(.97); }
.btn:disabled{ opacity:.6; pointer-events:none; }
.btn svg{ flex-shrink:0; }
/* دکمه‌ی اصلی: گرادیان فیروزه‌ای به بنفش با متن تیره */
.btn-accent{ background:var(--grad-brand); color:var(--accent-ink); box-shadow:0 0 0 1px rgba(255,255,255,0.12) inset, var(--shadow-accent); }
.btn-accent:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.18) inset, 0 16px 42px -12px rgba(178,75,255,0.62); }
.btn-quiet{ --btn-bg:rgba(237,239,247,0.05); --btn-bd:var(--line); }
.btn-quiet:hover{ --btn-bg:rgba(237,239,247,0.09); --btn-bd:var(--line-strong); }
.btn-outline{ --btn-bd:var(--line-strong); }
.btn-outline:hover{ --btn-bd:var(--accent); --btn-fg:var(--accent); }
.btn-lg{ min-height:54px; padding:0 26px; font-size:15.5px; border-radius:var(--r-md); }
.btn-sm{ min-height:38px; padding:0 14px; font-size:13px; border-radius:10px; }
.btn-block{ width:100%; }

.icon-btn{
  width:40px; height:40px; flex-shrink:0; display:inline-grid; place-items:center; border-radius:var(--r-sm);
  color:var(--text-dim); background:rgba(237,239,247,0.04); border:1px solid var(--line);
  transition:color .2s, background-color .2s, border-color .2s;
}
.icon-btn:hover{ color:var(--text); background:rgba(237,239,247,0.08); border-color:var(--line-strong); }
.icon-btn.sm{ width:34px; height:34px; border-radius:10px; }
.link-btn{ color:var(--accent); font-size:13.5px; font-weight:600; padding:6px 0; }
.link-btn:hover:not(:disabled){ text-decoration:underline; text-underline-offset:5px; }
.link-btn:disabled{ opacity:.55; cursor:default; }
.link-btn.muted{ color:var(--text-dim); }

.pill{ display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:6px; white-space:nowrap; vertical-align:middle; }
.pill-ok{ color:var(--accent-3); background:var(--mint-soft); }
.pill-indiv{ color:var(--accent-2); background:var(--violet-soft); }
.pill-bad{ color:var(--danger); background:var(--danger-soft); }

.spinner{ display:inline-block; width:36px; height:36px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin .8s linear infinite; flex-shrink:0; }
.spinner.sm{ width:16px; height:16px; border-width:2px; }
.btn .spinner{ border-color:rgba(4,5,10,0.22); border-top-color:currentColor; }

.skel{
  display:block; border-radius:var(--r-md);
  background:linear-gradient(90deg, rgba(237,239,247,0.04) 25%, rgba(237,239,247,0.09) 37%, rgba(237,239,247,0.04) 63%);
  background-size:400% 100%;
}
@media (prefers-reduced-motion: no-preference){ .skel{ animation:shimmer 1.4s ease infinite; } }
@keyframes shimmer{ from{ background-position:100% 50% } to{ background-position:0 50% } }

.ring{
  --p:0; width:58px; height:58px; flex-shrink:0; border-radius:50%; position:relative; display:grid; place-items:center;
  background:conic-gradient(var(--accent-3) calc(var(--p) * 1%), var(--fill-strong) 0);
}
.ring::before{ content:''; position:absolute; inset:6px; border-radius:50%; background:var(--panel); }
.ring span{ position:relative; font-size:13px; font-weight:800; }

/* ---------- لوگو و اسمِ سایت (بالای صفحه‌های اطلاعاتی و مقاله‌ها) ---------- */
.brand{ position:relative; display:inline-flex; align-items:center; gap:10px; font-weight:850; font-size:16.5px; color:var(--text); }
/* لوگوی سایت (public/img/logo-*.webp، دایره‌ای با گوشه‌های شفاف) */
.brand-logo{
  display:block; width:44px; height:44px; flex-shrink:0; border-radius:50%;
  box-shadow:0 0 0 1px var(--line);
  transition:scale .35s var(--spring), box-shadow .35s;
}
.brand:hover .brand-logo{ scale:1.06; box-shadow:0 0 0 1px var(--line-strong); }
.show-xs{ display:none; }

/* حرفِ اولِ اسمِ بازیکن (پروفایل من) */
.avatar{
  width:40px; height:40px; flex-shrink:0; border-radius:12px; display:grid; place-items:center;
  font-weight:850; font-size:16px; background:var(--grad-brand); color:var(--accent-ink);
  border:1px solid transparent; box-shadow:0 1px 0 rgba(255,255,255,0.3) inset;
}
@media (max-width: 420px){
  .hide-xs{ display:none; }
  .show-xs{ display:inline; }
  .brand{ gap:8px; font-size:15.5px; }
  .page-top .brand-logo{ width:40px; height:40px; }
}

/* ---------- انتخابِ گزینه (مدتِ اشتراک، ورود/ثبت‌نام، جنسیت) ---------- */
.seg{ display:inline-flex; gap:4px; padding:4px; border-radius:14px; background:var(--panel); border:1px solid var(--line); }
.seg-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:42px; padding:0 16px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--text-dim); white-space:nowrap; transition:background-color .2s, color .2s, box-shadow .2s;
}
.seg-btn:hover{ color:var(--text); }
.seg-btn.is-on{ background:var(--panel-3); color:var(--text); box-shadow:0 0 0 1px var(--accent-line) inset; }
.seg-save{ font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:3px 6px; border-radius:5px; }
.seg-scroll{ max-width:100%; overflow-x:auto; scrollbar-width:none; margin-bottom:28px; }
.seg-scroll::-webkit-scrollbar{ display:none; }
.seg-full{ display:flex; width:100%; }
.seg-full .seg-btn{ flex:1; }
.seg-full .seg-btn.is-on{ background:var(--grad-brand); color:var(--accent-ink); box-shadow:none; }

/* ---------- فوتر: پایینِ همه‌ی صفحه‌ها (lib/footer.js)؛ مشکی، با لوگو، لینک‌ها و راهِ ارتباط ---------- */
.site-foot{
  --foot-dim:rgba(255,255,255,0.64);
  position:relative; z-index:2; background:#0A0A0C; color:#fff; color-scheme:dark;
  padding:clamp(44px, 6vw, 68px) var(--gutter) max(24px, env(safe-area-inset-bottom));
}
.foot-inner{
  max-width:1180px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap:clamp(28px, 4vw, 56px);
}
.foot-logo{ display:inline-flex; align-items:center; gap:12px; font-size:17px; font-weight:850; color:#fff; }
.foot-logo img{ width:48px; height:48px; flex-shrink:0; border-radius:50%; box-shadow:0 0 0 1px rgba(255,255,255,0.18); }
.foot-brand p{ max-width:36ch; margin-top:16px; font-size:14px; line-height:2; color:var(--foot-dim); }
.foot-col h2{ margin-bottom:14px; font-size:13.5px; font-weight:800; color:#fff; }
.foot-col ul{ list-style:none; display:grid; gap:10px; }
.foot-col li{ font-size:14px; line-height:1.8; color:var(--foot-dim); overflow-wrap:anywhere; }
.foot-col a{ color:var(--foot-dim); transition:color .2s; }
.foot-col a:hover, .foot-col a[aria-current="page"]{ color:#fff; }
.foot-col a[aria-current="page"]{ text-decoration:underline; text-underline-offset:6px; text-decoration-thickness:1px; }
.foot-bottom{
  max-width:1180px; margin:clamp(32px, 5vw, 52px) auto 0; padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.12); font-size:13px; color:rgba(255,255,255,0.5);
}
.site-foot :focus-visible{ outline-color:#fff; }
/* تبلت: لوگو بالا و سه ستون زیرش. گوشی: «سایت» و «قوانین» کنار هم و راهِ ارتباط زیرشون */
@media (max-width: 899px){
  .foot-inner{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .foot-brand{ grid-column:1 / -1; }
}
@media (max-width: 599px){
  .foot-inner{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:30px 20px; }
  .foot-contact{ grid-column:1 / -1; }
}

/* ===================================================================
   پنل «برنامه‌های من» و «پروفایل من»: سفید و مشکی، هم‌رنگِ صفحه‌ی اول (site.js کلاسِ light رو روی
   .sheet-layer می‌ذاره). مشکی برای انتخاب و دکمه‌ها، سبز برای «انجام شد» و اشتراکِ فعال، کهربایی برای
   «چند روز مونده» و قرمز برای «انجام نشد» و تموم‌شده
=================================================================== */
.sheet-layer{ position:fixed; inset:0; z-index:var(--z-sheet); }
.sheet-backdrop{ position:absolute; inset:0; background:rgba(10,10,12,0.34); }
/* بالای پنل (عنوان و دکمه‌ی بستن) سفید، و زیرش زمینه‌ی خاکستریِ روشن تا کارت‌های سفید ازش جدا دیده بشن */
.sheet{
  position:absolute; top:0; bottom:0; inset-inline-end:0; width:min(640px, 100%);
  display:flex; flex-direction:column; outline:none;
  background:var(--panel); border-inline-start:1px solid var(--line); box-shadow:30px 0 80px -20px rgba(10,10,12,0.3);
}
.sheet-content{ display:flex; flex-direction:column; min-height:0; flex:1; }
.sheet-grab{ display:none; }
.sheet-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 22px; border-bottom:1px solid var(--line); flex-shrink:0; }
.sheet-title{ display:flex; align-items:center; gap:10px; font-size:18px; font-weight:850; }
.sheet-body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  display:grid; gap:16px; align-content:start; padding:20px 22px calc(40px + env(safe-area-inset-bottom));
  background:var(--panel-2);
}
@media (min-width: 601px){ .sheet-backdrop{ backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); } }
@media (prefers-reduced-motion: no-preference){
  .sheet-backdrop{ animation:fadeIn .25s ease both; }
  .sheet{ animation:sheetIn .4s var(--ease-out) both; }
  .sheet-layer.is-closing .sheet-backdrop{ animation:fadeOut .24s ease both; }
  .sheet-layer.is-closing .sheet{ animation:sheetOut .26s ease-in both; }
}
@keyframes sheetIn{ from{ transform:translateX(-104%); } }
@keyframes sheetOut{ to{ transform:translateX(-104%); } }
@keyframes sheetUp{ from{ transform:translateY(100%); } }
@keyframes sheetDown{ to{ transform:translateY(100%); } }
@keyframes fadeIn{ from{ opacity:0; } }
@keyframes fadeOut{ to{ opacity:0; } }

/* روی گوشی، پنل از پایین بالا میاد و یه باریکه از صفحه‌ی اصلی بالاش پیدا می‌مونه */
@media (max-width: 600px){
  .sheet{
    top:auto; inset-inline:0; width:100%; height:94vh; height:94dvh;
    border-inline-start:0; border-top:1px solid var(--line); border-radius:24px 24px 0 0;
    box-shadow:0 -20px 60px rgba(10,10,12,0.22);
  }
  .sheet-grab{ display:block; width:40px; height:4px; border-radius:4px; background:var(--line-strong); margin:10px auto 0; flex-shrink:0; }
  .sheet-head{ padding:10px 16px 14px; }
  .sheet-body{ padding:16px 16px calc(32px + env(safe-area-inset-bottom)); gap:14px; }
  .sheet{ animation-name:sheetUp; }
  .sheet-layer.is-closing .sheet{ animation-name:sheetDown; }
}

/* ---------- پروفایل من (دکمه‌ی حساب بالای صفحه؛ site.js → profileBodyHtml) ---------- */
.pf-head{ display:flex; align-items:center; gap:14px; padding:18px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--panel); }
.pf-avatar{ width:58px; height:58px; border-radius:18px; font-size:24px; }
.pf-head-text{ flex:1; min-width:0; }
.pf-name{ font-size:18px; font-weight:850; line-height:1.6; overflow-wrap:anywhere; }
.pf-since{ font-size:13px; color:var(--text-dim); margin-top:2px; }
.pf-card{ padding:18px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); }
.pf-title{ display:flex; align-items:center; gap:8px; font-size:15px; font-weight:800; margin-bottom:12px; }
.pf-title svg{ color:var(--accent); flex-shrink:0; }
.pf-note{ font-size:13px; line-height:1.9; color:var(--text-dim); margin-top:10px; }
.pf-title + .pf-note{ margin-top:0; }
/* مشخصات */
.pf-dl > div{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--line); }
.pf-dl dt{ font-size:13px; color:var(--text-dim); flex-shrink:0; }
.pf-dl dd{ font-size:14.5px; font-weight:700; text-align:left; min-width:0; overflow-wrap:anywhere; }
/* اشتراک‌ها */
.pf-subs{ display:grid; gap:8px; }
.pf-sub{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); }
.pf-sub.is-on{ border-color:var(--ok-line); background:var(--ok-tint); }
.pf-sub-icn{ width:38px; height:38px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.pf-sub.is-on .pf-sub-icn{ color:var(--accent-3); background:var(--mint-soft); }
.pf-sub-text{ flex:1; min-width:0; display:grid; gap:2px; }
.pf-sub-text b{ font-size:14px; font-weight:800; }
.pf-sub-text span{ font-size:12.5px; line-height:1.7; color:var(--text-dim); }
.pf-sub .btn{ flex-shrink:0; }
/* فعالیت */
.pf-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.pf-tile{ display:grid; gap:4px; align-content:start; padding:12px; border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); }
.pf-tile b{ font-size:20px; font-weight:850; }
.pf-tile span{ font-size:11.5px; line-height:1.6; color:var(--text-dim); }
.pf-days{ display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); gap:6px; margin-top:14px; align-items:end; }
.pf-day{ display:grid; justify-items:center; gap:6px; }
.pf-bar{ position:relative; width:100%; max-width:28px; height:64px; border-radius:8px; overflow:hidden; background:var(--fill-strong); }
.pf-bar i{ position:absolute; inset-inline:0; bottom:0; height:var(--p); border-radius:8px; background:var(--grad-brand); }
.pf-day.is-empty .pf-bar{ opacity:.45; }
.pf-day.is-today .pf-bar{ outline:1px solid var(--accent-line); outline-offset:2px; }
.pf-day-label{ font-size:11px; color:var(--text-dimmer); white-space:nowrap; }
.pf-day.is-today .pf-day-label{ color:var(--accent); font-weight:700; }
.pf-act-foot{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 14px; margin-top:12px; font-size:12.5px; color:var(--text-dim); }
/* سوابق پرداخت */
.pf-pays{ display:grid; gap:8px; }
.pf-pay{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px; border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); }
.pf-pay-main{ display:grid; gap:2px; min-width:0; }
.pf-pay-main b{ font-size:14px; font-weight:800; overflow-wrap:anywhere; }
.pf-pay-main span{ font-size:12px; line-height:1.8; color:var(--text-dim); }
.pf-pay-side{ display:grid; justify-items:end; gap:6px; flex-shrink:0; }
.pf-pay-side b{ font-size:14px; font-weight:800; white-space:nowrap; }
.pf-pay-side small{ font-size:11px; font-weight:600; color:var(--text-dim); }
.pill-warn{ color:var(--warn); background:var(--warn-soft); }
.pill-muted{ color:var(--text-dim); background:var(--fill-strong); }
/* تاریخچه */
.pf-tl-item{ display:grid; grid-template-columns:auto minmax(0, 1fr); align-items:start; gap:10px; padding:10px 0; }
.pf-tl-item + .pf-tl-item{ border-top:1px dashed var(--line); }
.pf-tl-icn{ width:30px; height:30px; border-radius:10px; display:grid; place-items:center; color:var(--accent); background:var(--accent-soft); }
.pf-tl-item.is-payment .pf-tl-icn{ color:var(--accent-3); background:var(--mint-soft); }
.pf-tl-item.is-request .pf-tl-icn{ color:var(--warn); background:var(--warn-soft); }
.pf-tl-item.is-joined .pf-tl-icn, .pf-tl-item.is-team .pf-tl-icn{ color:var(--accent-2); background:var(--violet-soft); }
.pf-tl-text{ display:grid; gap:2px; min-width:0; }
.pf-tl-text b{ font-size:13.5px; font-weight:700; line-height:1.7; overflow-wrap:anywhere; }
.pf-tl-text span{ font-size:12px; color:var(--text-dim); overflow-wrap:anywhere; }
.pf-tl time{ font-size:11.5px; color:var(--text-dimmer); }
.pf-card .link-btn{ margin-top:4px; }
.pf-logout{ display:flex; justify-content:center; }
.pf-logout .btn{ color:var(--danger); }
@media (max-width: 420px){
  .pf-head{ padding:16px; }
  .pf-card{ padding:16px; }
  .pf-tile{ padding:10px; }
  .pf-tile b{ font-size:18px; }
}
.body-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) auto; gap:8px; margin-top:16px; align-items:center; }
.bstat{ display:grid; gap:1px; padding:10px 12px; border-radius:var(--r-sm); background:var(--fill); border:1px solid var(--line); }
.bstat span{ font-size:11.5px; color:var(--text-dimmer); }
.bstat b{ font-size:17px; font-weight:800; }
.bstat b.sm{ font-size:14px; line-height:1.75; }
.bstat em{ font-style:normal; font-size:11px; color:var(--text-dimmer); }
.edit-stats{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-top:16px; }
.mini-field{ flex:1; min-width:120px; display:grid; gap:6px; font-size:12.5px; color:var(--text-dim); }
.mini-field input{
  width:100%; min-height:44px; padding:0 12px; border-radius:var(--r-sm); outline:none; text-align:right;
  background:var(--panel); border:1px solid var(--line-strong); color:var(--text); font-size:16px;
  transition:border-color .15s, box-shadow .15s;
}
.mini-field input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }
.edit-actions{ display:flex; gap:8px; }
.edit-stats .form-error{ width:100%; margin:0; }

.notice{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--r-md); border:1px solid; }
.notice > div{ flex:1; }
.notice b{ font-size:14.5px; }
.notice p{ font-size:13px; line-height:1.85; color:var(--text-dim); margin-top:3px; }
.notice.is-ok{ background:var(--mint-soft); border-color:var(--ok-line); }
.notice.is-ok .notice-icn{ color:var(--accent-3); }
.notice.is-bad{ background:var(--danger-soft); border-color:var(--danger-line); }
.notice.is-bad .notice-icn{ color:var(--danger); }

/* پیشنهادِ «دسترسی کامل»؛ مثلِ بقیه‌ی کارت‌ها سفید و وقتی روشی مشکی */
.bundle{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line);
}
.bundle > div{ flex:1; min-width:200px; }
.bundle b{ font-size:15px; font-weight:850; }
.bundle p{ font-size:13px; line-height:1.8; color:var(--text-dim); margin-top:2px; }

.tabs{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.tab{
  display:grid; justify-items:center; gap:4px; padding:12px 4px 10px; border-radius:var(--r-md); text-align:center;
  background:var(--panel); border:1px solid var(--line); color:var(--text-dim);
  transition:border-color .2s, background-color .2s, color .2s, box-shadow .2s;
}
.tab:hover, .tab.is-on{ color:var(--text); }
.tab-icn{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:var(--fill-strong); transition:background-color .2s, color .2s; }
.tab-label{ font-size:13.5px; font-weight:700; }
.tab-status{ font-size:11.5px; color:var(--text-dimmer); }
.tab.st-ok .tab-status{ color:var(--accent-3); }
.tab.st-warn .tab-status{ color:var(--warn); }
.tab.st-expired .tab-status{ color:var(--danger); }
.tab.is-on .tab-icn{ background:var(--grad-brand); color:var(--accent-ink); }
@media (max-width: 380px){ .tab-label{ font-size:12px; } .tab{ padding-inline:2px; } }

.tabpanel{ display:grid; gap:12px; }
.subbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px; padding-inline-start:14px;
  border-radius:var(--r-md); background:var(--panel); border:1px solid var(--line); font-size:13.5px; color:var(--text-dim);
}
.subbar > div{ display:flex; align-items:center; gap:8px; }
.subbar svg{ color:var(--accent-3); flex-shrink:0; }
.subbar.is-warn{ background:var(--warn-soft); border-color:var(--warn-line); color:var(--warn); }
.subbar.is-warn svg{ color:var(--warn); }

.items{ display:grid; gap:12px; }
.item{ padding:18px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); }
.item-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:12px; }
.item-icn{ width:40px; height:40px; flex-shrink:0; border-radius:11px; display:grid; place-items:center; background:var(--fill-strong); color:var(--accent); }
.item-titles{ min-width:0; }
.item h3{ font-size:16px; font-weight:800; line-height:1.6; overflow-wrap:anywhere; }
.item-meta{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:2px; font-size:12.5px; color:var(--text-dimmer); }
.item-body{ font-size:14.5px; line-height:2.05; color:var(--text-dim); white-space:pre-wrap; overflow-wrap:anywhere; }
.item-body.is-clamped{
  max-height:calc(14.5px * 2.05 * 6); overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 55%, transparent); mask-image:linear-gradient(#000 55%, transparent);
}
.item .link-btn{ margin-top:6px; }
.item img{ width:100%; margin-top:14px; border-radius:var(--r-sm); border:1px solid var(--line); }

/* ---------- جدول هفتگیِ برنامه‌ها ---------- */
.plan-note{ font-size:14px; line-height:2; color:var(--text-dim); white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:14px; }
/* روی صفحه‌ی باریک، اسم کامل روزها جا نمی‌شه و حرف اولشون نمایش داده می‌شه (ش ی د س چ پ ج) */
.week-wrap{ container-type:inline-size; margin-bottom:12px; }
.week{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:5px; }
.pday{
  position:relative; display:grid; justify-items:center; align-content:center; gap:2px; min-height:48px; padding:6px 2px;
  border-radius:12px; border:1px solid var(--line); background:var(--fill);
  font-size:12.5px; font-weight:700; color:var(--text-dim); transition:background .2s, border-color .2s, color .2s;
}
.pday:hover{ border-color:var(--line-strong); color:var(--text); }
.pday.is-empty{ color:var(--text-dimmer); }
.pday em{ font-style:normal; font-size:10px; font-weight:700; color:var(--accent-3); }
/* روزی که بازش کردی: مشکی، مثلِ گزینه‌های انتخاب‌شده‌ی صفحه‌ی اول */
.pday.is-on{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.pday.is-on em{ color:inherit; opacity:.8; }
.pday-short{ display:none; font-size:15px; }
@container (max-width: 470px){
  /* اسمِ کاملِ روز فقط از دید پنهان می‌شه؛ صفحه‌خوان هنوز «شنبه» می‌خونه، نه یه دکمه‌ی بی‌اسم */
  .pday-full{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .pday-short{ display:inline; }
}

.day-list{ list-style:none; display:grid; gap:8px; }
.day-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--fill); border:1px solid var(--line);
}
.day-row.has-video{ flex-wrap:wrap; }
.day-main{ flex:1; min-width:0; }
.day-col{ display:block; font-size:12px; font-weight:800; color:var(--text-dim); margin-bottom:2px; }
.day-text{ font-size:14.5px; line-height:1.95; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; }
.move-thumb{
  position:relative; flex-shrink:0; width:64px; height:64px; border-radius:12px; overflow:hidden;
  background:#000; border:1px solid var(--line-strong); transition:transform .2s var(--spring), box-shadow .2s;
}
.move-thumb:hover{ transform:scale(1.04); box-shadow:0 0 0 3px var(--accent-ring); }
.move-thumb img{ width:100%; height:100%; object-fit:cover; margin:0; border:0; border-radius:0; opacity:.8; }
.move-play{
  position:absolute; inset:0; display:grid; place-items:center; color:#fff;
  background:radial-gradient(circle, rgba(0,0,0,0.45) 30%, transparent 70%);
}
.move-video-wrap{ flex-basis:100%; display:flex; justify-content:center; }
.move-video{ display:block; max-width:100%; max-height:min(420px, 60vh); border-radius:var(--r-sm); background:#000; }
.day-empty{
  display:flex; align-items:center; gap:10px; padding:16px; border-radius:var(--r-md);
  border:1px dashed var(--line-strong); font-size:14px; color:var(--text-dim);
}
.day-empty svg{ flex-shrink:0; color:var(--accent); }

/* ---------- تیکِ «انجام دادم» (برنامه‌های هفتگی و چک‌لیست روزانه) ---------- */
.tick{
  flex-shrink:0; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
  border:1.5px solid var(--line-strong); background:var(--panel); color:transparent;
  transition:background .2s, border-color .2s, color .2s, transform .15s var(--spring);
}
.tick:hover{ border-color:var(--accent-3); }
.tick:active{ transform:scale(.9); }
.tick:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.tick.is-on{ background:var(--accent-3); border-color:var(--accent-3); color:#fff; }
.day-row.is-done{ border-color:var(--ok-line); background:var(--ok-tint); }
.day-row.is-done .day-text{ color:var(--text-dim); }
.day-progress{ display:grid; gap:7px; margin-bottom:10px; font-size:13px; font-weight:700; color:var(--text-dim); }
.day-progress span{ display:inline-flex; align-items:center; gap:6px; }
.day-progress i{ display:block; height:6px; border-radius:999px; background:linear-gradient(90deg, var(--accent-3) var(--p), var(--fill-strong) var(--p)); }
[dir="rtl"] .day-progress i{ background:linear-gradient(270deg, var(--accent-3) var(--p), var(--fill-strong) var(--p)); }
.day-progress.is-all{ color:var(--accent-3); }
.day-note{ display:flex; align-items:center; gap:8px; margin-bottom:10px; font-size:13px; color:var(--text-dim); }
.day-note svg{ flex-shrink:0; color:var(--accent); }
.pday.is-done::after{
  content:''; position:absolute; top:4px; inset-inline-start:4px; width:7px; height:7px; border-radius:50%; background:var(--accent-3);
}
.pday.is-on.is-done::after{ background:#86EFAC; }
.pill-week{ color:var(--accent); background:var(--accent-soft); }

/* هفته‌های قبلِ برنامه‌ها: فقط برای دیدن، جمع‌شده زیر برنامه‌ی این هفته */
.past-weeks{ margin-top:16px; display:grid; gap:12px; }
/* هنوز برنامه‌ی جاری‌ای نیست و اولین برنامه از یه روزِ بعد شروع می‌شه */
.next-weeks > .day-note{ margin:0; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--panel); color:var(--text); line-height:1.8; }
.past-toggle{
  display:flex; align-items:center; gap:8px; width:100%; padding:12px 14px; border-radius:var(--r-md);
  border:1px dashed var(--line-strong); background:none; font-size:14px; font-weight:700; color:var(--text-dim);
  transition:border-color .2s, color .2s;
}
.past-toggle:hover{ border-color:var(--accent-line); color:var(--text); }
.past-toggle svg:last-child{ margin-inline-start:auto; transition:transform .2s; }
.past-toggle[aria-expanded="true"] svg:last-child{ transform:rotate(180deg); }
.past-count{ font-size:12px; padding:1px 8px; border-radius:999px; background:var(--fill-strong); color:var(--text); }

.empty{
  display:grid; justify-items:center; gap:10px; padding:36px 22px; text-align:center;
  border-radius:var(--r-lg); background:var(--panel); border:1px dashed var(--line-strong);
}
.empty-icn{ width:56px; height:56px; border-radius:16px; display:grid; place-items:center; margin-bottom:4px; background:var(--fill-strong); color:var(--text-dim); }
.empty-icn.is-accent{ color:var(--accent); }
.empty h3{ font-size:17px; font-weight:800; }
.empty p{ font-size:14px; line-height:1.9; color:var(--text-dim); max-width:40ch; }
.empty-price{ font-size:13.5px; color:var(--text-dim); margin:2px 0 6px; }
.empty-price b{ font-size:17px; color:var(--text); }
.empty-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:6px; }

.checklist{ padding:18px; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); }
.cl-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cl-head h3{ font-size:16px; font-weight:800; }
.cl-head p{ font-size:12.5px; color:var(--text-dimmer); margin-top:2px; }
.cl-list{ list-style:none; display:grid; gap:8px; }
.cl-item{ padding:12px; border-radius:var(--r-md); background:var(--fill); border:1px solid var(--line); transition:border-color .2s, background-color .2s; }
.cl-item.is-yes{ border-color:var(--ok-line); background:var(--ok-tint); }
.cl-item.is-no{ border-color:var(--danger-line); }
.cl-row{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px 12px; }
.cl-title{ flex:1; min-width:150px; font-size:14.5px; font-weight:600; line-height:1.75; overflow-wrap:anywhere; }
/* «انجام نشد»: کنار تیک، برای وقتی که بازیکن می‌خواد به مربی بگه چرا نشد */
.cl-miss{
  display:inline-flex; align-items:center; gap:5px; min-height:34px; padding:0 12px; border-radius:10px;
  font-size:12.5px; font-weight:700; color:var(--text-dimmer); background:none; border:1px solid var(--line);
  transition:background-color .15s, color .15s, border-color .15s;
}
.cl-miss:hover{ color:var(--danger); border-color:var(--danger-line); }
.cl-miss.is-on{ background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); }
.cl-explain{ display:grid; justify-items:start; gap:8px; margin-top:12px; }
.cl-explain textarea{
  width:100%; min-height:76px; padding:10px 12px; border-radius:var(--r-sm); outline:none; resize:vertical;
  background:var(--panel); border:1px solid var(--line-strong); color:var(--text); font:inherit; font-size:15px; line-height:1.8;
  transition:border-color .15s, box-shadow .15s;
}
.cl-explain textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); }

.skel-stack{ display:grid; gap:14px; }
.skel-card{ height:124px; border-radius:var(--r-lg); }
.skel-card.tall{ height:230px; }
.skel-tabs{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
.skel-tab{ height:92px; }

/* ===================================================================
   مودال‌ها
=================================================================== */
.modal-layer{
  position:fixed; inset:0; z-index:var(--z-modal); overflow-y:auto;
  display:grid; place-items:center; padding:20px 16px; background:rgba(3,4,8,0.78);
}
@media (min-width: 601px){ .modal-layer{ backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } }
.modal-box{
  position:relative; width:100%; max-width:430px; padding:34px 28px 28px;
  border-radius:var(--r-xl); background:var(--panel); border:1px solid rgba(0,229,255,0.18);
  box-shadow:0 0 0 1px rgba(255,255,255,0.03) inset, 0 24px 64px rgba(0,0,0,0.6), 0 0 70px rgba(0,229,255,0.07);
}
@media (max-width: 420px){ .modal-box{ padding:30px 20px 22px; border-radius:var(--r-lg); } }
@media (prefers-reduced-motion: no-preference){
  .modal-layer{ animation:fadeIn .2s ease; }
  .modal-box{ animation:popIn .3s var(--ease-out); }
  .modal-box.swap > *{ animation:stepIn .32s var(--ease-out) both; }
}
@keyframes popIn{ from{ opacity:0; transform:translateY(12px) scale(.97); } }
@keyframes stepIn{ from{ opacity:0; transform:translateX(-12px); } }
.modal-close{ position:absolute; top:16px; inset-inline-end:16px; }
.modal-head{ text-align:center; margin-bottom:26px; }
.modal-icn{ width:58px; height:58px; margin:0 auto 18px; border-radius:17px; display:grid; place-items:center; background:var(--grad-soft); border:1px solid var(--accent-line); color:var(--accent); }
.modal-head h2{ font-size:21px; font-weight:850; }
.modal-head p{ font-size:14px; line-height:1.9; color:var(--text-dim); margin-top:6px; }
.modal-head .dev-note{ display:inline-block; margin-top:12px; padding:6px 12px; border-radius:8px; font-size:13px; color:var(--warn); background:var(--warn-soft); }
.modal-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.modal-hint{ font-size:12.5px; line-height:1.8; color:var(--text-dimmer); text-align:center; margin-top:14px; }

.field{ margin-bottom:16px; }
.field label, .field .label{ display:block; font-size:13.5px; font-weight:600; color:var(--text-dim); margin-bottom:8px; }
.field label small{ font-weight:400; color:var(--text-dimmer); }
/* ۱۶ پیکسل کمترین اندازه‌ایه که سافاریِ آیفون موقع فوکوس، صفحه رو زوم نمی‌کنه */
.field input{ min-height:52px; font-size:16px; border-radius:var(--r-sm); }
.field input[dir="ltr"]{ text-align:right; }
.field input::placeholder{ color:var(--text-dimmer); }
.field input[aria-invalid="true"]{ border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-soft); }
.field input.otp-input{ text-align:center; font-family:'Space Mono', monospace; font-size:26px; letter-spacing:.45em; padding-inline-start:calc(14px + .45em); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-hint{ font-size:12.5px; line-height:1.8; color:var(--text-dimmer); margin:-6px 0 16px; }
.form-error{ display:flex; align-items:flex-start; gap:6px; font-size:13px; line-height:1.7; color:var(--danger); margin:-4px 0 14px; }
.form-error[hidden]{ display:none; }
.form-error svg{ margin-top:3px; }

.pay-head{ display:flex; align-items:center; gap:14px; margin-bottom:20px; padding-inline-end:48px; }
.kicker{ font-size:12.5px; color:var(--text-dimmer); }
.pay-head h2{ font-size:20px; font-weight:850; }
.renew-note{ display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; padding:10px 12px; border-radius:var(--r-sm); font-size:13px; line-height:1.8; color:var(--accent-3); background:var(--mint-soft); }
.renew-note svg{ margin-top:4px; flex-shrink:0; }
.dur-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:18px; }
.dur{
  display:grid; gap:4px; padding:12px 14px; border-radius:var(--r-md); text-align:right;
  background:rgba(237,239,247,0.03); border:1px solid var(--line); transition:border-color .2s, background-color .2s, box-shadow .2s;
}
.dur:hover{ border-color:var(--line-strong); }
.dur.is-on{ border-color:var(--accent); background:var(--accent-tint); box-shadow:0 0 0 1px var(--accent) inset; }
.dur-top{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.dur-top b{ font-size:14px; font-weight:800; }
.dur-top em{ font-style:normal; font-size:10.5px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:2px 6px; border-radius:5px; white-space:nowrap; }
.dur-price{ font-size:15px; font-weight:800; }
.dur-price small, .dur-sub{ font-size:11.5px; font-weight:500; color:var(--text-dimmer); }
.pay-total{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:16px 0 18px; border-top:1px dashed var(--line-strong); }
.pay-total span{ font-size:13.5px; color:var(--text-dim); }
.pay-total b{ font-size:26px; font-weight:900; }
.pay-total small{ font-size:13px; color:var(--text-dim); }
/* پذیرفتن قوانین قبل از پرداخت؛ کل متن قابل کلیکه (به‌جز دو لینک که توی تب جدید باز می‌شن) */
.terms-check{ display:flex; align-items:flex-start; gap:10px; margin-bottom:16px; font-size:13.5px; line-height:1.9; color:var(--text-dim); cursor:pointer; }
.terms-check input{ flex-shrink:0; width:19px; height:19px; margin:4px 0 0; accent-color:var(--accent); cursor:pointer; }
.terms-check input[aria-invalid="true"]{ outline:2px solid var(--danger); outline-offset:2px; }
.terms-check a{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* ورود/ثبت‌نام با کد ملی + رمز عبور */
.auth-switch{ margin:-6px 0 22px; }
.pass-wrap{ position:relative; }
/* فیلد رمز dir=ltr داره، پس فاصله‌ی دکمه‌ی چشم با جهت فیزیکی (سمت چپ) تعیین می‌شه */
.pass-wrap input{ padding-left:52px; }
.pass-toggle{
  position:absolute; left:6px; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:10px; display:grid; place-items:center; color:var(--text-dimmer); transition:color .15s;
}
.pass-toggle:hover, .pass-toggle[aria-pressed="true"]{ color:var(--accent); }
.pass-hint{ font-size:12.5px; line-height:1.8; color:var(--text-dimmer); margin-top:7px; }
.link-accent{ color:var(--accent); text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1px; }

/* بعد از ثبت درخواست خرید: پیام آماده برای پشتیبانی */
.support-lead{ font-size:14px; line-height:1.9; color:var(--text-dim); text-align:center; margin:2px 0 12px; }
.support-msg{
  white-space:pre-wrap; font-family:inherit; font-size:13.5px; line-height:2; color:var(--text); text-align:right;
  padding:12px 14px; margin-bottom:16px; border-radius:var(--r-sm); background:rgba(237,239,247,0.04); border:1px dashed var(--line-strong);
}
.support-actions{ display:grid; gap:10px; }
.state-box{ display:grid; justify-items:center; gap:10px; padding:30px 0 14px; text-align:center; }
.state-box b{ font-size:16px; }
.state-box p{ font-size:13.5px; color:var(--text-dim); }
.state-box.is-ok svg{ color:var(--accent-3); }

/* ---------- toast ---------- */
#toast-slot{
  position:fixed; z-index:var(--z-toast); inset-inline:0; bottom:calc(20px + env(safe-area-inset-bottom));
  display:grid; justify-items:center; gap:8px; padding-inline:16px; pointer-events:none;
}
.toast{
  pointer-events:auto; max-width:440px; display:flex; align-items:center; gap:10px; padding:12px 16px;
  border-radius:var(--r-md); background:var(--panel-3); border:1px solid var(--line-strong); box-shadow:var(--shadow-lift);
  font-size:14px; font-weight:600; line-height:1.7;
}
.toast svg{ flex-shrink:0; }
.toast.is-ok{ border-color:rgba(107,255,184,0.4); }
.toast.is-ok svg{ color:var(--accent-3); }
.toast.is-error{ border-color:rgba(255,92,122,0.45); }
.toast.is-error svg{ color:var(--danger); }
@media (prefers-reduced-motion: no-preference){
  .toast{ animation:toastIn .32s var(--ease-out); }
  .toast.is-out{ animation:toastOut .26s ease both; }
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px); } }
@keyframes toastOut{ to{ opacity:0; transform:translateY(8px); } }

/* ===================================================================
   صفحه‌ی اول (index.html، site.js → guestHtml / memberHtml)
   به خواستِ صاحب سایت سفید و مشکی و تا جای ممکن ساده: مهمان فقط لوگو، اسم سایت و چهار دکمه می‌بینه و
   کاربرِ واردشده فقط پلن‌ها رو. رنگ‌های نئونیِ سایت توی پنل «برنامه‌های من» و صفحه‌های دیگه سر جاشه.
=================================================================== */
html.home{ color-scheme:light; }
.home body{ background:#fff; }
/* کسی که قبلاً وارد شده: تا site.js صفحه‌ی پلن‌ها رو بسازه، صفحه‌ی مهمان (ثبت‌نام و ورود) یه لحظه هم دیده نشه
   (کلاسِ has-token رو اسکریپتِ کوچیکِ <head> می‌ذاره). اگه site.js به هر دلیلی نرسید، بعد از سه ثانیه پیدا می‌شه */
.has-token .stage[data-mode="guest"]{ visibility:hidden; animation:showLate 0s 3s forwards; }
@keyframes showLate{ to{ visibility:visible; } }

/* رنگ‌های روشن: صفحه‌ی اول، پنلِ «برنامه‌های من» و مودال‌ها (ورود، ثبت‌نام، خرید). مشکی جای رنگِ تأکیدیِ فیروزه‌ای رو می‌گیره */
.light{
  --ink:#FFFFFF; --ink-2:#FAFAFA;
  --panel:#FFFFFF; --panel-2:#F4F4F5; --panel-3:#E9E9EB;
  --line:rgba(10,10,12,0.10); --line-strong:rgba(10,10,12,0.22);
  --text:#0A0A0C; --text-dim:rgba(10,10,12,0.64); --text-dimmer:rgba(10,10,12,0.46);
  --accent:#0A0A0C; --accent-ink:#FFFFFF;
  --accent-soft:rgba(10,10,12,0.06); --accent-line:rgba(10,10,12,0.20); --accent-tint:rgba(10,10,12,0.025); --accent-ring:rgba(10,10,12,0.12);
  --accent-2:#3F3F46; --violet-soft:rgba(10,10,12,0.06);
  --accent-3:#15803D; --mint-soft:rgba(21,128,61,0.10);
  --fill:rgba(10,10,12,0.03); --fill-strong:rgba(10,10,12,0.06);
  --ok-line:rgba(21,128,61,0.32); --ok-tint:rgba(21,128,61,0.05); --danger-line:rgba(212,42,73,0.35); --warn-line:rgba(154,91,0,0.32);
  --danger:#D42A49; --danger-soft:rgba(212,42,73,0.09);
  --warn:#9A5B00; --warn-soft:rgba(234,179,8,0.16);
  --grad-brand:linear-gradient(#0A0A0C, #0A0A0C);
  --grad-soft:linear-gradient(rgba(10,10,12,0.04), rgba(10,10,12,0.04));
  --shadow-accent:0 12px 26px -14px rgba(10,10,12,0.55);
  color:var(--text); color-scheme:light;
}
.light ::selection{ background:rgba(10,10,12,0.14); color:inherit; }
.light .btn-accent{ box-shadow:var(--shadow-accent); }
.light .btn-accent:hover{ background:#2A2A2E; box-shadow:0 16px 30px -14px rgba(10,10,12,0.6); }
.light .btn-quiet{ --btn-bg:rgba(10,10,12,0.04); }
.light .btn-quiet:hover{ --btn-bg:rgba(10,10,12,0.08); }
.light .icon-btn{ background:rgba(10,10,12,0.04); }
.light .icon-btn:hover{ background:rgba(10,10,12,0.08); }
.light .btn .spinner{ border-color:rgba(255,255,255,0.3); border-top-color:currentColor; }
.light .btn-quiet .spinner{ border-color:rgba(10,10,12,0.15); }
.light .skel{ background:linear-gradient(90deg, #F2F2F3 25%, #E8E8EA 37%, #F2F2F3 63%); background-size:400% 100%; }
.light .field input{ background:#fff; border-color:var(--line-strong); }
.light .field input:focus{ background:#fff; border-color:var(--text); }
.light .seg{ background:var(--panel-2); border-color:transparent; }
.light .seg-btn.is-on{ background:#fff; box-shadow:0 1px 3px rgba(10,10,12,0.12), 0 0 0 1px var(--line) inset; }
.light .seg-full .seg-btn.is-on{ background:var(--text); color:#fff; box-shadow:none; }
.light .dur{ background:#fff; }
.light .support-msg{ background:var(--panel-2); }
.modal-layer.light{ background:rgba(10,10,12,0.34); }
.light .modal-box{ background:#fff; border-color:transparent; box-shadow:0 0 0 1px rgba(10,10,12,0.05), 0 32px 80px -24px rgba(10,10,12,0.45); }
.light .modal-icn{ background:var(--panel-2); border-color:transparent; }
/* پیام‌های کوچیکِ پایینِ صفحه («خوش اومدی …») روی صفحه‌ی سفید، مشکی */
.home .toast{ background:#0A0A0C; border-color:#0A0A0C; color:#fff; box-shadow:0 18px 40px -18px rgba(10,10,12,0.6); }

.stage{ position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:#fff; }

/* دکمه‌های صفحه‌ی اول: مشکیِ پُر و دورخط */
.sbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; padding:0 22px; border-radius:16px;
  font-size:16px; font-weight:800; line-height:1; white-space:nowrap; -webkit-tap-highlight-color:transparent;
  transition:background-color .2s, color .2s, box-shadow .2s, transform .22s var(--spring);
}
.sbtn:active{ transform:scale(.97); }
.sbtn:focus-visible{ outline:2px solid #0A0A0C; outline-offset:3px; }
.sbtn-solid{ background:#0A0A0C; color:#fff; box-shadow:0 12px 26px -14px rgba(10,10,12,0.6); }
.sbtn-solid:hover{ background:#2A2A2E; }
.sbtn-line{ background:#fff; color:#0A0A0C; box-shadow:inset 0 0 0 1.5px #0A0A0C; }
.sbtn-line:hover{ background:#F2F2F3; }
.sbtn-sm{ min-height:42px; padding:0 16px; font-size:14px; border-radius:12px; }

/* ---------- مهمان: همه‌چیز وسطِ صفحه و توی یه نگاه، بدونِ اسکرول ---------- */
.stage.is-guest{
  align-items:center; justify-content:center; overflow:hidden; text-align:center;
  padding:max(24px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom));
}
.stage-ui{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; width:100%; }
.stage-mark{ position:relative; width:clamp(176px, min(52vw, 34vh), 300px); aspect-ratio:1; margin-bottom:clamp(22px, 4.2vh, 40px); }
.stage-mark img{ position:relative; z-index:1; width:100%; height:100%; border-radius:50%; }
/* سایه‌ی نرمِ زیرِ لوگو، انگار لوگو کمی بالاتر از صفحه معلقه */
.stage-mark::after{
  content:''; position:absolute; inset-inline:16%; bottom:-10%; height:10%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(10,10,12,0.2), transparent);
}
/* برقی که هر چند ثانیه آروم از روی لوگو رد می‌شه */
.stage-shine{ position:absolute; inset:0; z-index:2; border-radius:50%; overflow:hidden; pointer-events:none; }
.stage-shine::before{
  content:''; position:absolute; top:-20%; bottom:-20%; left:0; width:36%;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform:skewX(-16deg); translate:-150% 0;
}
.stage-name{ font-size:clamp(25px, 1.9vw + 17px, 40px); font-weight:900; line-height:1.35; white-space:nowrap; }
.stage-actions{ display:flex; gap:12px; width:min(100%, 360px); margin-top:clamp(22px, 4vh, 36px); }
.stage-actions .sbtn{ flex:1 1 0; min-width:0; }
.stage-links{ display:flex; align-items:center; gap:10px; margin-top:14px; }
.stage-links a{ position:relative; padding:10px 12px; border-radius:10px; font-size:15px; font-weight:700; color:var(--text-dim); transition:color .2s, background-color .2s; }
.stage-links a:hover{ color:var(--text); background:rgba(10,10,12,0.05); }
.stage-links a + a::before{
  content:''; position:absolute; inset-inline-start:-7px; top:50%; width:4px; height:4px; margin-top:-2px; border-radius:50%;
  background:var(--line-strong);
}
/* گوشیِ افقی یا صفحه‌ی خیلی کوتاه: لوگو کوچیک‌تر تا دکمه‌ها بدونِ اسکرول دیده بشن */
@media (max-height: 520px){ .stage-mark{ width:clamp(112px, 30vh, 176px); } }

/* ویدیوی پس‌زمینه (site.js → LANDING_VIDEO): کلِ صفحه رو پر می‌کنه و اسم و دکمه‌ها پایینش می‌شینن */
.stage-media{ position:absolute; inset:0; }
.stage-video{ display:block; width:100%; height:100%; object-fit:cover; background:#fff; }
/* آیفون وقتی پخشِ خودکار رو نگه داشته (حالتِ کم‌مصرف)، دکمه‌ی پخشِ بزرگِ خودش رو وسطِ ویدیو نذاره */
.stage-video::-webkit-media-controls-start-playback-button{ display:none !important; -webkit-appearance:none; }
.stage.has-video{ justify-content:flex-end; }
.stage.has-video .stage-ui{ padding-bottom:clamp(8px, 5vh, 56px); }
.stage-pause{
  position:absolute; z-index:2; bottom:max(16px, env(safe-area-inset-bottom)); inset-inline-end:16px;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--text-dim);
  background:rgba(255,255,255,0.75); box-shadow:inset 0 0 0 1px var(--line); transition:color .2s;
}
.stage-pause:hover{ color:var(--text); }

@media (prefers-reduced-motion: no-preference){
  .stage.intro .stage-mark{ animation:markIn 1.1s var(--ease-out) both; }
  .stage.intro .stage-name{ animation:riseIn .8s var(--ease-out) .3s both; }
  .stage.intro .stage-actions{ animation:riseIn .8s var(--ease-out) .45s both; }
  .stage.intro .stage-links{ animation:riseIn .8s var(--ease-out) .58s both; }
  /* بعدش لوگو آروم بالا و پایین می‌ره و سایه‌اش باهاش کوچیک و بزرگ می‌شه */
  .stage-mark img{ animation:markFloat 6.5s ease-in-out 1.1s infinite; }
  .stage-mark::after{ animation:shadowFloat 6.5s ease-in-out 1.1s infinite; }
  .stage-shine::before{ animation:markShine 7s ease-in-out 1.6s infinite; }
}
@keyframes markIn{ from{ opacity:0; scale:.9; filter:blur(12px); } }
@keyframes riseIn{ from{ opacity:0; translate:0 14px; } }
@keyframes markFloat{ 50%{ translate:0 -8px; } }
@keyframes shadowFloat{ 50%{ scale:.84; opacity:.7; } }
@keyframes markShine{ 0%, 62%{ translate:-150% 0; } 100%{ translate:330% 0; } }

/* ---------- واردشده: بالای صفحه لوگو و «برنامه‌های من»، زیرش فقط پلن‌ها ---------- */
.stage.is-member{ padding-inline:var(--gutter); padding-bottom:clamp(32px, 5vw, 64px); }
.stage-top, .plans{ width:100%; max-width:1180px; margin-inline:auto; }
.stage-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:max(16px, env(safe-area-inset-top)) 0 8px; }
.sbrand{ display:inline-flex; align-items:center; gap:10px; min-width:0; font-size:16px; font-weight:850; color:var(--text); white-space:nowrap; }
.sbrand img{ width:40px; height:40px; flex-shrink:0; border-radius:50%; }
.stage-top-end{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.savatar{
  width:42px; height:42px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; font-size:15px; font-weight:850;
  color:var(--text); background:var(--panel-2); box-shadow:inset 0 0 0 1px var(--line); transition:background-color .2s, box-shadow .2s;
}
.savatar:hover{ background:var(--panel-3); box-shadow:inset 0 0 0 1px var(--line-strong); }
.top-skel{ width:168px; height:42px; border-radius:12px; }

.plans{ flex:1; display:flex; flex-direction:column; align-items:center; padding:clamp(18px, 4vh, 48px) 0 28px; }
.plans-title{ font-size:clamp(24px, 1.4vw + 18px, 36px); font-weight:900; line-height:1.4; text-align:center; text-wrap:balance; }
#plans-slot{ width:100%; display:flex; flex-direction:column; align-items:center; }
.plans-seg{ max-width:100%; overflow-x:auto; scrollbar-width:none; margin:20px 0 26px; }
.plans-seg::-webkit-scrollbar{ display:none; }
.plans-grid{ width:100%; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; }

.plan{
  position:relative; display:flex; flex-direction:column; padding:24px 22px 22px; border-radius:24px;
  background:#fff; border:1px solid var(--line);
}
@media (hover: hover){ .plan:hover{ box-shadow:0 28px 56px -28px rgba(10,10,12,0.55); translate:0 -2px; } }
/* آیکونِ بخش (توی مودالِ خرید هم هست) */
.plan-icn{
  width:46px; height:46px; flex-shrink:0; border-radius:14px; display:grid; place-items:center;
  background:var(--grad-soft), var(--panel); border:1px solid var(--accent-line); color:var(--accent);
}
.plan .plan-icn{ background:var(--panel-2); border-color:transparent; }
.plan-head{ margin-top:18px; }
.plan-name{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; font-size:18px; font-weight:850; line-height:1.5; }
.plan-tag{ font-size:14px; line-height:1.8; color:var(--text-dim); margin-top:2px; }
.plan-feats{ list-style:none; display:grid; gap:8px; margin:16px 0 22px; }
.plan-feats li{ display:flex; align-items:flex-start; gap:8px; font-size:13.5px; line-height:1.75; color:var(--text-dim); }
.plan-feats svg{ flex-shrink:0; margin-top:4px; color:var(--text); }
.plan-bottom{ margin-top:auto; }
.plan-price{ display:flex; align-items:baseline; gap:6px; }
.plan-price b{ font-size:clamp(26px, .6vw + 20px, 31px); font-weight:900; }
.plan-price span{ font-size:13.5px; font-weight:600; color:var(--text-dim); }
/* «ماهی … تومان» زیرِ قیمت؛ وقتی نیست هم جاش می‌مونه تا قیمت و دکمه‌ی کارت‌های یه ردیف هم‌تراز بمونن */
.plan-sub{ min-height:1.8em; margin-top:2px; font-size:12.5px; line-height:1.8; color:var(--text-dimmer); }
.plan .sbtn{ width:100%; margin-top:14px; }
.plan-flag{ position:absolute; top:20px; inset-inline-end:20px; padding:5px 10px; border-radius:8px; font-size:12px; font-weight:800; background:var(--accent); color:var(--accent-ink); }
/* عضو تیم: به‌جای دکمه، فقط وضعیت؛ برنامه‌ها از «برنامه‌های من» بالای صفحه */
.plan-team{
  display:flex; align-items:center; justify-content:center; gap:7px; min-height:48px; margin-top:14px; padding:0 12px;
  border-radius:14px; font-size:13.5px; font-weight:700; white-space:nowrap; color:var(--accent-3); background:var(--mint-soft);
}

/* ---------- کارت‌ها: همه سفیدن و مشکی می‌شن وقتی موس روشونه، روی گوشی وقتی می‌زنی روشون، یا (تبِ پنل)
   انتخاب شده‌ان. همون رنگ‌ها برعکس، پس هر چی توی کارته (متن، آیکون، دکمه) خودش سفید می‌شه.
   روی گوشی :hover به کار نمی‌ره (بعد از لمس روی کارت «می‌چسبه» و دو کارت با هم مشکی می‌موندن): اونجا پلن با کلاسِ
   is-picked (site.js، فقط با لمسِ واقعی، نه با اسکرول) و بقیه با :active مشکی می‌شن. صفحه‌کلید: با :focus-visible ---------- */
.plan.is-picked, .plan:has(:focus-visible), .tab.is-on,
.article-card:active, .article-card:focus-visible,
.bundle:active, .bundle:has(:focus-visible), .article-cta:active, .article-cta:has(:focus-visible){
  --text:#FFFFFF; --text-dim:rgba(255,255,255,0.7); --text-dimmer:rgba(255,255,255,0.52);
  --line:rgba(255,255,255,0.14); --line-strong:rgba(255,255,255,0.28); --panel-2:rgba(255,255,255,0.1);
  --fill:rgba(255,255,255,0.06); --fill-strong:rgba(255,255,255,0.12);
  --accent:#FFFFFF; --accent-ink:#0A0A0C; --accent-soft:rgba(255,255,255,0.12); --accent-line:rgba(255,255,255,0.3);
  --grad-brand:linear-gradient(#fff, #fff); --grad-soft:linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)); --shadow-accent:none;
  --accent-3:#86EFAC; --mint-soft:rgba(134,239,172,0.14); --warn:#FCD34D; --warn-soft:rgba(252,211,77,0.14);
  --danger:#FDA4AF; --danger-soft:rgba(253,164,175,0.14);
  background:#0A0A0C; border-color:#0A0A0C; color:var(--text);
}
@media (hover: hover){
  .plan:hover, .tab:hover, .article-card:hover, .bundle:hover, .article-cta:hover{
    --text:#FFFFFF; --text-dim:rgba(255,255,255,0.7); --text-dimmer:rgba(255,255,255,0.52);
    --line:rgba(255,255,255,0.14); --line-strong:rgba(255,255,255,0.28); --panel-2:rgba(255,255,255,0.1);
    --fill:rgba(255,255,255,0.06); --fill-strong:rgba(255,255,255,0.12);
    --accent:#FFFFFF; --accent-ink:#0A0A0C; --accent-soft:rgba(255,255,255,0.12); --accent-line:rgba(255,255,255,0.3);
    --grad-brand:linear-gradient(#fff, #fff); --grad-soft:linear-gradient(rgba(255,255,255,0.08), rgba(255,255,255,0.08)); --shadow-accent:none;
    --accent-3:#86EFAC; --mint-soft:rgba(134,239,172,0.14); --warn:#FCD34D; --warn-soft:rgba(252,211,77,0.14);
    --danger:#FDA4AF; --danger-soft:rgba(253,164,175,0.14);
    background:#0A0A0C; border-color:#0A0A0C; color:var(--text);
  }
  .plan:hover .sbtn{ background:#fff; color:#0A0A0C; box-shadow:none; }
  .plan:hover .sbtn:hover, .light .bundle .btn-accent:hover, .light .article-cta .btn-accent:hover{ background:#E9E9EB; box-shadow:none; }
}
/* دکمه‌های سیاه و دورخطِ کارت، روی کارتِ مشکی سفید می‌شن */
:is(.plan.is-picked, .plan:has(:focus-visible)) .sbtn{ background:#fff; color:#0A0A0C; box-shadow:none; }
/* حلقه‌ی فوکوسِ صفحه‌کلید: دورِ خودِ کارت روی زمینه‌ی روشن مشکی، و دورِ دکمه‌ی داخلِ کارت (که حالا مشکیه) سفید */
.tab:focus-visible, .article-card:focus-visible{ outline:2px solid #0A0A0C; outline-offset:3px; }
:is(.plan, .bundle, .article-cta) :focus-visible{ outline-color:#fff; }
/* رنگِ متن و آیکون‌های داخلِ کارت هم‌زمان با خودِ کارت عوض بشه، نه یهو */
:is(.plan, .tab, .article-card, .bundle, .article-cta),
:is(.plan, .tab, .article-card, .bundle, .article-cta) *{
  transition:color .25s, background-color .25s, border-color .25s, box-shadow .3s, transform .22s var(--spring), translate .3s var(--ease-out);
}
:is(.plan, .tab, .article-card, .bundle, .article-cta){ -webkit-tap-highlight-color:transparent; }
@media (prefers-reduced-motion: reduce){
  :is(.plan, .tab, .article-card, .bundle, .article-cta), :is(.plan, .tab, .article-card, .bundle, .article-cta) *{ transition:none; }
}

.plans-skel{ width:100%; display:flex; flex-direction:column; align-items:center; }
.plans-skel .skel-seg{ width:min(440px, 100%); height:50px; margin:20px 0 26px; border-radius:14px; }
.skel-plan{ height:400px; border-radius:24px; }


@media (prefers-reduced-motion: no-preference){
  .stage.intro .plans-title{ animation:riseIn .7s var(--ease-out) both; }
  .stage.intro .plans-seg{ animation:riseIn .7s var(--ease-out) .06s both; }
  .stage.intro .plan{ animation:riseIn .7s var(--ease-out) both; animation-delay:calc(.12s + var(--i, 0) * 70ms); }
}

/* تبلت: دوتا دوتا. گوشی: زیرِ هم و جمع‌وجورتر (آیکون کنارِ اسم، قیمت و دکمه توی یه ردیف) */
@media (max-width: 1079px){ .plans-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px){
  .plans-grid{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  /* چهار مدت کنارِ هم جا بشن (بدونِ اسکرولِ افقی): درصدِ تخفیف زیرِ اسمِ هر مدت */
  .plans-seg{ display:flex; width:100%; overflow:visible; }
  .plans-seg .seg-btn{ flex:1 1 0; min-width:0; flex-direction:column; gap:3px; min-height:56px; padding:6px 2px; font-size:13.5px; }
  .plans-seg .seg-save{ font-size:10.5px; padding:1px 6px; }
  .plan{ display:grid; grid-template-columns:auto minmax(0, 1fr); column-gap:14px; align-items:center; padding:18px; border-radius:20px; }
  .plan-flag{ position:static; grid-column:1 / -1; justify-self:start; margin-bottom:14px; }
  .plan-icn{ width:44px; height:44px; border-radius:13px; }
  .plan-head{ margin-top:0; }
  .plan-name{ font-size:17px; }
  .plan-tag{ font-size:13px; margin-top:0; }
  .plan-feats{ grid-column:1 / -1; margin:14px 0 0; gap:6px; }
  .plan-feats li{ font-size:13px; }
  /* قیمت بالا و دکمه زیرش تمام‌عرض؛ کنارِ هم برای قیمت‌های بلند (مثلاً سالانه) یا «رایگان برای اعضای تیم» جا نمی‌شد */
  .plan-bottom{ grid-column:1 / -1; display:grid; gap:12px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); }
  .plan-price b{ font-size:24px; }
  .plan-sub{ min-height:0; }
  .plan-sub:empty{ display:none; }
  .plan .sbtn, .plan .plan-team{ width:100%; margin-top:0; }
  .skel-plan{ height:210px; }
}
@media (max-width: 420px){
  .sbrand{ gap:8px; font-size:15px; }
  .sbrand img{ width:36px; height:36px; }
}
@media (max-width: 359px){ .seg-save-word{ display:none; } }
@media (max-width: 340px){ .stage-top-end .sbtn svg{ display:none; } }

/* ---------- لودینگِ جابه‌جایی بین صفحه‌ها (js/loader.js): اسبی که روی خط از راست به چپ می‌دوه و درصد از ۰ تا ۱۰۰ ----------
   اسب یه نوارِ ۱۵ فریمیه (public/img/loader-horse.webp، از عکس‌های مایبریج، مالکیت عمومی) که با steps() ورق می‌خوره */
.pl{ position:fixed; inset:0; z-index:300; display:none; place-items:center; background:#fff; color:#0A0A0C; }
.pl.is-on{ display:grid; }
.pl.is-out{ opacity:0; transition:opacity .3s ease; }
.pl-box{ width:min(360px, 78vw); display:grid; justify-items:center; gap:16px; }
.pl-track{ position:relative; width:100%; height:68px; }
.pl-horse{
  position:absolute; bottom:2px; width:112px; aspect-ratio:224 / 127;
  inset-inline-start:calc((100% - 112px) * var(--p, 0) / 100);
  background:url(/img/loader-horse.webp) 0 0 / 1500% 100% no-repeat;
  animation:plGallop .6s steps(15, jump-none) infinite;
}
.pl-line{ position:absolute; inset-inline:0; bottom:0; height:3px; border-radius:3px; overflow:hidden; background:rgba(10,10,12,0.1); }
.pl-line i{ position:absolute; inset-block:0; inset-inline-start:0; width:calc((100% - 112px) * var(--p, 0) / 100 + 56px); border-radius:inherit; background:#0A0A0C; }
.pl-num{ font-size:16px; font-weight:850; letter-spacing:.02em; font-variant-numeric:tabular-nums; }
@keyframes plGallop{ to{ background-position:100% 0; } }
@media (prefers-reduced-motion: reduce){ .pl{ display:none !important; } }