/* Phoenix Guardian — تب گیمینگ (WebView2). توکن‌ها و پایه از دیزاینِ New Sections.
   بقیهٔ استایل‌ها inline در app.js تولید می‌شوند (عیناً همان style-stringهای دیزاین). */

/* ── فونت‌های برند (همان .ttfهای امبدشدهٔ اپ) ── */
@font-face{font-family:'IRANYekanX';font-weight:400;font-style:normal;src:url('fonts/IRANYekanX-Regular.ttf') format('truetype');}
@font-face{font-family:'IRANYekanX';font-weight:500;font-style:normal;src:url('fonts/IRANYekanX-Medium.ttf') format('truetype');}
@font-face{font-family:'IRANYekanX';font-weight:600;font-style:normal;src:url('fonts/IRANYekanX-DemiBold.ttf') format('truetype');}
@font-face{font-family:'IRANYekanX';font-weight:700;font-style:normal;src:url('fonts/IRANYekanX-Bold.ttf') format('truetype');}
@font-face{font-family:'IRANYekanX';font-weight:800;font-style:normal;src:url('fonts/IRANYekanX-ExtraBold.ttf') format('truetype');}
@font-face{font-family:'IRANYekanX';font-weight:900;font-style:normal;src:url('fonts/IRANYekanX-Black.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;src:url('fonts/Poppins-Regular.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;src:url('fonts/Poppins-SemiBold.ttf') format('truetype');}
@font-face{font-family:'Poppins';font-weight:700;font-style:normal;src:url('fonts/Poppins-Bold.ttf') format('truetype');}

/* ═══════════════ توکن‌های رنگ ═══════════════
   دو پوسته: تیره (پیش‌فرض، روی :root) و روشن (روی :root[data-theme="light"]).
   قانونِ کار: هیچ رنگِ خنثایی (سفید/سیاهِ آلفادار) نباید inline هاردکد شود — چون در پوستهٔ
   روشن باید معکوس شود. هر رنگِ هاردکدی که در دو پوسته فرق می‌کند، این‌جا یک توکن دارد.

   سه خانوادهٔ توکن که تازه‌اند و در پوستهٔ تیره دقیقاً همان مقادیرِ قبلیِ inline‌اند
   (پس تیره پیکسل‌به‌پیکسل بدون تغییر مانده است):
     • --gc-tint-* / --gc-track / --gc-inset-*  → پرده‌های خنثی (هاور، شیار، پنلِ فرورفته)
     • --gc-shadow-* / --gc-scrim               → سایه و پردهٔ مودال
     • --gc-*-ink                               → رنگِ «متن/آیکنِ» هر لهجه روی زمینهٔ خودِ برنامه.
       در تیره روشن‌اند (#b79aff) و در روشن تیره (#6034e0) — همان نقش، خوانا در هر دو.
   --gc-on-accent = متن روی پُرشدگیِ اشباع (بنفش/طلایی/قرمز) و در هر دو پوسته سفید می‌ماند،
   چون خودِ آن پُرشدگی در پوستهٔ روشن هم اشباع می‌ماند. */
:root{
  --font-persian:'IRANYekanX','Segoe UI',sans-serif;
  --font-latin:'Poppins','Segoe UI',sans-serif;
  --gc-base:#08080a;--gc-surface:#121216;--gc-elevated:#1b1b21;
  --gc-hairline:rgba(255,255,255,.09);--gc-hairline-strong:rgba(255,255,255,.16);
  --gc-text:#fff;--gc-text-mid:rgba(255,255,255,.64);--gc-text-low:rgba(255,255,255,.40);
  --gc-text-low2:rgba(255,255,255,.56);/* برچسب‌های کوچکِ داشبورد — کنتراستِ بهتر از low برای متنِ ۱۱–۱۳px */
  --gc-success:#1fbf9c;--gc-success-dim:rgba(31,191,156,.14);
  --gc-warning:#e08a00;--gc-warning-dim:rgba(224,138,0,.14);
  --gc-danger:#e8352c;--gc-danger-dim:rgba(232,53,44,.14);
  --gc-violet:#6734ff;--gc-violet-dim:rgba(103,52,255,.16);
  --gc-gold:#fedb29;--gc-gold-dim:rgba(254,219,41,.13);
  /* کانالِ RGBِ هر لهجه — برای ~۴۳۰ مقدارِ rgba(...) با آلفاهای رنگارنگ. یک توکن به‌ازای
     هر خانواده، آلفا سرِ جایش می‌ماند: rgba(var(--gc-gold-rgb),.45). ساختنِ توکنِ جدا برای
     هر آلفا یعنی ۲۶ توکن فقط برای طلایی. */
  --gc-chart-halo:rgba(6,4,12,.9);   /* هالهٔ پشتِ برچسبِ نمودار — هم‌رنگِ زمینه */
  --gc-gold-rgb:254,219,41;--gc-violet-rgb:103,52,255;--gc-success-rgb:31,191,156;
  --gc-danger-rgb:232,53,44;--gc-warning-rgb:224,138,0;--gc-blue-rgb:111,180,255;--gc-cyan-rgb:111,208,255;
  /* پرده‌های خنثی */
  --gc-tint-1:rgba(255,255,255,.06);   /* هاورِ ملایم */
  --gc-tint-2:rgba(255,255,255,.12);   /* هاورِ محسوس‌تر / لبهٔ روشن */
  --gc-tint-3:rgba(255,255,255,.22);   /* حالتِ فعالِ چیپ، انگشتِ اسکرول‌بار */
  --gc-tint-0:rgba(255,255,255,.03);   /* نوازشِ خیلی کم‌رنگ (ردیفِ زبراوار) */
  --gc-track:rgba(255,255,255,.07);    /* شیارِ نوارهای پیشرفت روی surface */
  --gc-inset:rgba(0,0,0,.28);          /* پنلِ فرورفته داخلِ کارت */
  --gc-inset-2:rgba(0,0,0,.20);        /* فرورفتگیِ ملایم‌تر */
  --gc-inset-3:rgba(0,0,0,.38);        /* گودترین (پس‌زمینهٔ نمودار/بومِ پیش‌نمایش) */
  /* کارت‌های وایتال داخلِ هیروِ مانیتورینگ. آن هیرو یک «پردهٔ» کم‌رنگِ بنفش است، نه بنفشِ
     پُر، پس در پوستهٔ روشن یک پردهٔ مشکی رویش فقط خاکستریِ گِلی می‌سازد؛ آن‌جا کارت‌ها
     باید سفید باشند تا مثل بقیهٔ برنامه «کارت روی زمینهٔ رنگی» خوانده شوند. */
  --gc-inset-hero:rgba(0,0,0,.30);
  /* سایه و پرده */
  --gc-shadow-sm:rgba(0,0,0,.40);
  --gc-shadow-md:rgba(0,0,0,.55);
  --gc-shadow-lg:rgba(0,0,0,.70);
  --gc-scrim:rgba(3,4,6,.72);
  /* متن روی پُرشدگیِ اشباع */
  --gc-on-accent:#fff;
  --gc-on-accent-mid:rgba(255,255,255,.72);
  --gc-on-accent-low:rgba(255,255,255,.55);
  /* جوهرِ لهجه‌ها — روی زمینهٔ برنامه خوانده می‌شوند */
  --gc-violet-ink:#b79aff;--gc-violet-ink2:#c9b8ff;--gc-violet-ink3:#a98aff;
  --gc-success-ink:#3fd6b4;--gc-danger-ink:#ff6b63;--gc-warning-ink:#ff9a3d;
  --gc-gold-ink:#fedb29;
  --gc-blue:#6fb4ff;--gc-blue-dim:rgba(111,180,255,.14);--gc-cyan:#6fd0ff;
  /* کارتِ «ویژه» با قابِ گرادیانی (بخش‌های شاه‌پَر) */
  --gc-prem-1:#1c1526;--gc-prem-2:#14101d;--gc-prem-glow:rgba(103,52,255,.3);
  /* تویِ کارت‌هایی که قابِ گرادیانی دارند (ترفندِ padding-box/border-box) — این پُرشدگی
     همان زمینهٔ کارت است و باید با پوسته عوض شود. */
  --gc-card-alt:#0d0b13;
  /* سطحِ بخش‌های شاه‌پَر. در تیره خودش عمقِ کافی دارد؛ در روشن اگر سفیدِ ساده بماند از یک
     کارتِ معمولی جدا نمی‌شود، پس عاجِ گرم می‌شود تا «ویژه‌بودن» بدونِ حرف خوانده شود. */
  --gc-prem-surface:#0d0b13;
  --gc-prem-halo:rgba(103,52,255,.16);   /* هالهٔ بالای مودال */
  --gc-prem-fill:rgba(254,219,41,.07);   /* پُرشدگیِ پلنِ انتخاب‌شده */
  --gc-prem-cardglow:rgba(254,219,41,.12);
  /* قابِ نازکِ دکمه‌های ویژه. روی زمینهٔ تیره یک آلفای کم کافی است؛ روی سفید همان آلفا
     تقریبا ناپدید می‌شود، پس در پوستهٔ روشن خیلی پررنگ‌تر است. */
  --gc-prem-ring:rgba(254,219,41,.3);
  /* نوارِ خاموشِ توگل — قرص در هر دو پوسته سفید می‌ماند (قراردادِ آشنای موبایل)، پس نوار
     باید در پوستهٔ روشن خاکستریِ محسوس باشد وگرنه قرصِ سفید رویش گم می‌شود. */
  --gc-sw-off:rgba(0,0,0,.32);
  /* نوارهای مصرفِ آپلود/دانلودِ پایداری پینگ */
  --gc-up:#ff8a83;--gc-up-soft:rgba(255,138,131,.5);--gc-dn:#6f9dff;--gc-dn-soft:rgba(111,157,255,.5);

  /* ── رنگ‌های «روی تصویر» (on-media) ──
     هرچه روی کادرِ ویدیو می‌نشیند — چیپِ «هایلایت ذخیره‌شده»/«خام»/«پردازش‌نشده»، روکشِ
     پردازش، حلقه، تیک، نوارِ لبه — زمینه‌اش همیشه تیره است، چه پوستهٔ روشن باشد چه تیره.
     پس نباید از جوهرِ پوسته استفاده کند: در پوستهٔ روشن آن جوهرها عمداً تیره می‌شوند
     (‎#fedb29 → #8a6200‎) و متنِ تیره روی زمینهٔ تیره می‌افتد. اندازه‌گیری‌شده: کنتراستِ
     «در حال پردازش» در پوستهٔ روشن ۲٫۲۹ بود (زیرِ کفِ ۳)، با این توکن‌ها ۱۰٫۷ شد.
     ⚠ این چهارتا عمداً در پوستهٔ روشن override نمی‌شوند. */
  --gc-om-gold:#fedb29;--gc-om-violet:#c9b8ff;--gc-om-green:#3fd6b4;--gc-om-red:#ff6b63;
  --gc-om-line:rgba(255,255,255,.24);
}
/* ── پوستهٔ روشن ──
   دو نکتهٔ سنجیده:
   ۱) زمینهٔ صفحه خاکستریِ ملایم است نه سفید، تا کارت‌های سفید روی آن «بلند» دیده شوند.
      با base سفید، مرزِ کارت و صفحه گم می‌شد و کلِ رابط تخت می‌شد.
   ۲) لهجه‌ها (سبز/نارنجی/قرمز/بنفش/طلایی) عمداً تیره‌تر از پوستهٔ تیره‌اند: #1fbf9c روی
      سفید نسبتِ کنتراستِ ۲ دارد و برای متن ناخواناست، ولی روی مشکی عالی است. */
:root[data-theme="light"]{
  --gc-base:#eceef3;--gc-surface:#ffffff;--gc-elevated:#e6e9f0;
  --gc-hairline:rgba(18,22,40,.12);--gc-hairline-strong:rgba(18,22,40,.24);
  --gc-text:#11131a;--gc-text-mid:rgba(17,19,26,.72);--gc-text-low:rgba(17,19,26,.55);
  --gc-text-low2:rgba(17,19,26,.60);
  --gc-success:#077a63;--gc-success-dim:rgba(7,122,99,.13);
  --gc-warning:#9c5c00;--gc-warning-dim:rgba(156,92,0,.14);
  --gc-danger:#cf2a20;--gc-danger-dim:rgba(207,42,32,.11);
  /* ⚠ بنفش عمداً در هر دو پوسته یکی است: زبانِ «سوییچِ فعال = بنفشِ پُر + متنِ سفید» کلِ
     برنامه را می‌بندد و مالک خواست دست‌نخورده بماند. سفید روی #6734ff نسبتِ ۵٫۹۸ می‌دهد. */
  --gc-violet:#6734ff;--gc-violet-dim:rgba(103,52,255,.12);
  --gc-gold:#e0a500;--gc-gold-dim:rgba(224,165,0,.16);
  --gc-chart-halo:rgba(255,255,255,.92);
  --gc-gold-rgb:224,165,0;--gc-violet-rgb:103,52,255;--gc-success-rgb:7,122,99;
  --gc-danger-rgb:207,42,32;--gc-warning-rgb:156,92,0;--gc-blue-rgb:21,102,201;--gc-cyan-rgb:10,111,149;
  --gc-tint-1:rgba(18,22,40,.055);
  --gc-tint-2:rgba(18,22,40,.10);
  --gc-tint-3:rgba(18,22,40,.26);
  --gc-tint-0:rgba(18,22,40,.03);
  --gc-track:rgba(18,22,40,.10);
  --gc-inset:rgba(18,22,40,.05);
  --gc-inset-2:rgba(18,22,40,.035);
  --gc-inset-3:rgba(18,22,40,.07);
  --gc-inset-hero:rgba(255,255,255,.82);
  --gc-shadow-sm:rgba(24,28,45,.18);
  --gc-shadow-md:rgba(24,28,45,.16);
  --gc-shadow-lg:rgba(24,28,45,.20);
  --gc-scrim:rgba(30,34,50,.42);
  --gc-violet-ink:#6734ff;--gc-violet-ink2:#5326cc;--gc-violet-ink3:#6a3ee8;
  --gc-success-ink:#067060;--gc-danger-ink:#c4241b;--gc-warning-ink:#955800;
  --gc-gold-ink:#8a6200;
  --gc-blue:#1566c9;--gc-blue-dim:rgba(21,102,201,.12);--gc-cyan:#0a6f95;
  --gc-prem-1:#fff9ec;--gc-prem-2:#ffeed2;--gc-prem-glow:rgba(224,165,0,.28);
  --gc-card-alt:#ffffff;
  /* سایه و هاله در پس‌زمینهٔ روشن ضعیف‌تر خوانده می‌شوند، پس عمداً پررنگ‌ترند. */
  --gc-prem-surface:#fffaf2;
  --gc-prem-halo:rgba(224,165,0,.26);
  --gc-prem-fill:rgba(224,165,0,.20);
  --gc-prem-cardglow:rgba(224,165,0,.42);
  --gc-prem-ring:rgba(224,165,0,.75);
  --gc-sw-off:#c3cad9;
  --gc-up:#e0554c;--gc-up-soft:rgba(224,85,76,.45);--gc-dn:#3372e6;--gc-dn-soft:rgba(51,114,230,.45);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;height:100%;}
body{
  background:var(--gc-base);
  font-family:var(--font-persian);
  color:var(--gc-text);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}
/* شِلِ کلِ پنجره: تایتل‌بار + ناوبری ثابت، محتوا اسکرول.
   V10: پنجره آزادانه ریسایز می‌شود و محتوا reflow می‌کند (مدلِ تلگرام/مرورگر) — بومِ ثابتِ
   ۱۱۵۰ و کلِ ماشینِ scale حذف شد. */
#app{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--gc-base);}
/* در پنجره‌های خیلی پهن، ستونِ محتوا وسط می‌ماند و بی‌نهایت کش نمی‌آید (مثل Claude/تلگرام).
   تایتل‌بار و ناوبری تمام‌عرض می‌مانند؛ فقط محتوای تب سقف دارد. */
#pg-content>div{max-width:1280px;margin:0 auto;}

/* V9 — دستگیره‌های تغییرِ اندازه.
   وب‌ویو کلِ ناحیهٔ clientِ پنجره را می‌پوشاند، پس WM_NCHITTEST هیچ‌وقت به فرم نمی‌رسد و
   لبه‌های واقعیِ ویندوز قابلِ گرفتن نیستند. این نوارها mousedown را می‌گیرند و C# حلقهٔ
   تغییرِ اندازهٔ خودِ ویندوز را شروع می‌کند (نسبتِ ابعاد آن‌جا قفل می‌شود).
   ضخامت با vw داده شده تا با زومِ صفحه ثابت بماند (زوم روی px اثر می‌گذارد). */
.pg-rz{position:fixed;z-index:9999;}
.pg-rz-l{left:0;top:0;bottom:0;width:5px;cursor:ew-resize;}
.pg-rz-r{right:0;top:0;bottom:0;width:5px;cursor:ew-resize;}
.pg-rz-t{top:0;left:0;right:0;height:5px;cursor:ns-resize;}
.pg-rz-b{bottom:0;left:0;right:0;height:5px;cursor:ns-resize;}
.pg-rz-tl{top:0;left:0;width:14px;height:14px;cursor:nwse-resize;}
.pg-rz-tr{top:0;right:0;width:14px;height:14px;cursor:nesw-resize;}
.pg-rz-bl{bottom:0;left:0;width:14px;height:14px;cursor:nesw-resize;}
.pg-rz-br{bottom:0;right:0;width:14px;height:14px;cursor:nwse-resize;}
/* scrollbar-gutter:stable = جای نوارِ اسکرول همیشه رزرو می‌ماند، حتی وقتی محتوا کوتاه است.
   بدونِ این، تبِ کوتاه (مثلاً «مانیتورینگ FPS» با چند نشست) نوار نداشت و به‌اندازهٔ عرضِ نوار
   پهن‌تر از تبِ بلند می‌شد؛ سوییچ بینِ تب‌ها عرضِ کارت‌ها را کم و زیاد می‌کرد. */
.pg-content{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;background:var(--gc-base);}
/* دکمه‌ها فونتِ سند را به ارث نمی‌برند (پیش‌فرضِ مرورگر) — بدونِ این، هر دکمه‌ای که
   font-family صریح ندارد (مثل کاشی‌های کنترلِ سیستم) با فونتِ سیستمی رندر می‌شد. */
button{font-family:var(--font-persian);}
/* دکمه‌های چراغ‌راهنمای پنجره: هاورِ ملایم. */
.pg-win{transition:filter .12s ease;}
.pg-win:hover{filter:brightness(1.18);}
.pg-win:active{filter:brightness(.92);}
a{color:var(--gc-violet-ink);text-decoration:none;}
a:hover{color:var(--gc-violet-ink2);}

@keyframes gcPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
/* تکانِ نوارِ «تست در حال اجراست» وقتی کاربر روی چیزِ قفل‌شده کلیک می‌کند — پاسخِ بصری
   به کلیکی که عمداً بی‌اثر مانده، تا سکوت به‌جای «برنامه هنگ کرده» تعبیر نشود. */
@keyframes gcNudge{0%,100%{transform:translateX(0);}25%{transform:translateX(-5px);}75%{transform:translateX(5px);}}
@keyframes ngRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes ngBar{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes ngSpin{to{transform:rotate(360deg);}}
@keyframes bugPop{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
.bug-ta{width:100%;height:190px;resize:none;background:var(--gc-base);border:1px solid var(--gc-hairline-strong);border-radius:12px;padding:15px 16px;color:var(--gc-text);font-family:var(--font-persian);font-size:14.5px;line-height:1.9;outline:none;transition:border-color .15s ease;}
.bug-ta:focus{border-color:var(--gc-violet);}
.bug-ta::placeholder{color:var(--gc-text-low);}
.bug-pick:hover{border-color:var(--gc-violet);color:var(--gc-text);}
.bug-clear:hover{background:var(--gc-danger-dim);color:var(--gc-danger);border-color:var(--gc-danger);}
@keyframes ngShimmer{0%{transform:translateX(120%);}100%{transform:translateX(-120%);}}
@keyframes dlgIn{from{opacity:0;transform:translateY(10px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
@keyframes shSpin{to{transform:rotate(360deg);}}
@keyframes shShimmer{0%{transform:translateX(120%);}100%{transform:translateX(-120%);}}
@keyframes shRise{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
@keyframes uvTrain{0%{right:2px;opacity:0;}10%{opacity:1;}78%{right:calc(100% - 4px);opacity:1;}92%{right:calc(100% - 4px);opacity:1;}100%{right:calc(100% - 4px);opacity:0;}}
@keyframes uvPulse{0%,100%{box-shadow:0 0 0 0 rgba(var(--gc-success-rgb),.45);}50%{box-shadow:0 0 0 6px rgba(var(--gc-success-rgb),0);}}
@keyframes dlgFade{from{opacity:0;}to{opacity:1;}}
/* پاپِ انتخاب — چون render کلِ DOM را با innerHTML از نو می‌سازد، transitionها اجرا نمی‌شوند؛
   این keyframe روی المانِ تازه‌انتخاب‌شده (فلگ _pop، فقط یک render بعد از کلیک) پخش می‌شود. */
@keyframes pgPopIn{from{transform:scale(.9);opacity:.5;}}

/* اسکرول‌بارِ نازکِ دیزاین */
body{scrollbar-width:thin;scrollbar-color:transparent transparent;overscroll-behavior:contain;}
body:hover{scrollbar-color:var(--gc-tint-3) transparent;}
body::-webkit-scrollbar{width:9px;}
body::-webkit-scrollbar-track{background:transparent;}
body::-webkit-scrollbar-thumb{background:transparent;border-radius:99px;border:2px solid transparent;background-clip:content-box;}
body:hover::-webkit-scrollbar-thumb{background:var(--gc-tint-3);background-clip:content-box;}

.ng-card{transition:border-color .16s ease, background .16s ease, transform .16s ease;}

/* بازخوردِ لمسیِ دکمه‌ها (فشار) — حسِ تعاملیِ نرم */
button:active{transform:scale(.97);}

/* هاورِ دکمه‌های سایدبار (پورتِ style-hoverِ دیزاینِ New Menu) — فقط دکمه‌های غیرفعال
   کلاسِ pg-sbtn دارند، پس هاور پس‌زمینهٔ بنفشِ دکمهٔ فعال را نمی‌پوشاند. */
.pg-sbtn:hover{background:var(--gc-tint-1)!important;color:var(--gc-text)!important;}

/* تولتیپِ آیکنِ «i» — با :hover ناب (بدون re-render) */
.pg-profbtn:hover{border-color:var(--gc-violet)!important;background:rgba(var(--gc-violet-rgb),.10)!important;}
/* اسکرول‌بارِ خاکستریِ هم‌رنگِ برنامه برای ناحیه‌های اسکرول‌دارِ داخلی (نه سفیدِ پیش‌فرض) */
.gc-scroll{scrollbar-width:thin;scrollbar-color:var(--gc-hairline-strong) transparent;}
.gc-scroll::-webkit-scrollbar{width:10px;height:10px;}
.gc-scroll::-webkit-scrollbar-track{background:transparent;}
.gc-scroll::-webkit-scrollbar-thumb{background:var(--gc-hairline-strong);border-radius:99px;border:2px solid transparent;background-clip:content-box;}
.gc-scroll::-webkit-scrollbar-thumb:hover{background:var(--gc-tint-3);background-clip:content-box;}
.pg-info{transition:all .14s ease;}
.pg-info .pg-tip{opacity:0;visibility:hidden;transition:opacity .12s ease;}
.pg-info:hover{border-color:var(--gc-violet)!important;color:var(--gc-violet)!important;}
.pg-info:hover .pg-tip{opacity:1;visibility:visible;}

/* ═══ مودالِ پاکسازی («بررسی» → فهرست → پاک‌کردن) ═══
   حالت‌های ردیف (تیک‌دار/بی‌تیک، باز/بسته) این‌جا کلاس‌اند نه inline، چون morph فقط کلاس را
   عوض می‌کند و ترنزیشنِ چک‌باکس/فلش واقعا اجرا می‌شود. RTL: اولین فرزندِ ردیف (چک‌باکس)
   سمتِ راست می‌نشیند و حجم سمتِ چپ — ترتیبِ DOM همان ترتیبِ دیداری است. */
.pgcl-row{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:11px;cursor:pointer;transition:background .14s ease;}
.pgcl-row:hover{background:var(--gc-tint-0);}
.pgcl-cbx{width:20px;height:20px;flex:none;border-radius:6px;border:1.5px solid var(--gc-hairline-strong);display:flex;align-items:center;justify-content:center;transition:background .15s ease,border-color .15s ease;}
.pgcl-cbx svg{opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .18s cubic-bezier(.33,.9,.3,1);}
.pgcl-row.on .pgcl-cbx{background:var(--gc-violet);border-color:var(--gc-violet);}
.pgcl-row.on .pgcl-cbx svg{opacity:1;transform:none;}
.pgcl-ic{width:32px;height:32px;flex:none;border-radius:9px;display:flex;align-items:center;justify-content:center;transition:filter .15s ease,opacity .15s ease;}
.pgcl-row:not(.on) .pgcl-ic{filter:grayscale(.85);opacity:.45;}
.pgcl-name{font-size:13.5px;font-weight:700;color:var(--gc-text);transition:color .15s ease;}
.pgcl-meta{font-size:11px;color:var(--gc-text-low);margin-top:3px;display:flex;align-items:center;gap:7px;}
.pgcl-dot{width:3px;height:3px;border-radius:50%;background:var(--gc-text-low);flex:none;}
.pgcl-size{flex:none;font-size:13px;font-weight:800;color:var(--gc-text);text-align:left;min-width:92px;transition:color .15s ease;}
.pgcl-row:not(.on) .pgcl-name,.pgcl-row:not(.on) .pgcl-size{color:var(--gc-text-low);}
.pgcl-chev{flex:none;width:22px;height:22px;padding:0;border:none;border-radius:6px;background:transparent;color:var(--gc-text-low);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.33,.9,.3,1),color .15s ease;}
.pgcl-chev:hover{color:var(--gc-text-mid);}
.pgcl-row.open .pgcl-chev{transform:rotate(-90deg);}
/* مسیرهای واقعیِ هر ردیف — تا کلیک نشود بسته‌اند (لیستِ خامِ مسیر برای همه مفید نیست). */
.pgcl-paths{display:none;padding:0 52px 8px 10px;}
.pgcl-row.open + .pgcl-paths{display:block;}
.pgcl-paths div{font-family:var(--font-latin);direction:ltr;text-align:left;font-size:10.5px;color:var(--gc-text-low);line-height:2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pgcl-btn:hover,.pgcl-x:hover{border-color:var(--gc-tint-3)!important;color:var(--gc-text)!important;}
.pgcl-btn:hover{background:var(--gc-tint-0)!important;}
.pgcl-link:hover{text-decoration:underline;}
@keyframes pgclShim{0%{background-position:100% 0;}100%{background-position:-100% 0;}}
.pgcl-skel{height:13px;border-radius:6px;background:linear-gradient(90deg,var(--gc-tint-0),var(--gc-tint-2),var(--gc-tint-0));background-size:200% 100%;animation:pgclShim 1.2s linear infinite;}

/* کارت‌های بازشوندهٔ هیروِ گیمینگ (سخت‌افزار/اینترنت): کارتِ فعال ۱.۳۵ برابر باز می‌شود.
   flex و حالت‌ها این‌جاست نه inline، تا هاور بدون !important برنده شود و morph با عوض‌کردنِ
   کلاس ترنزیشن‌ها را واقعا اجرا کند. لایه‌های داخلی (کامل/جمع) را خودِ رندر با opacity
   می‌گرداند؛ گرادیانِ پس‌زمینه انیمیت نمی‌شود (رفتار مرورگر) و همان پرشِ تاییدشدهٔ ماکاپ است. */
.pg-excard{position:relative;flex:1;min-width:0;border-radius:14px;border:1px solid var(--gc-hairline);background:var(--gc-surface);cursor:pointer;overflow:hidden;transition:flex .34s cubic-bezier(.33,.9,.3,1),background .3s ease,border-color .3s ease,box-shadow .3s ease;}
.pg-excard.pg-exon{flex:1.35;border-color:transparent;background:linear-gradient(120deg,#7c49ff,var(--gc-violet) 60%,#5a2bd6);box-shadow:0 12px 28px rgba(var(--gc-violet-rgb),.30);cursor:default;}
.pg-excard:not(.pg-exon):hover{border-color:var(--gc-hairline-strong);flex:1.1;}
.hx-lay{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;transition:opacity .22s ease,visibility .22s ease;}
.hx-full{gap:12px;padding:0 18px;}
.hx-mini{justify-content:center;gap:10px;}
.hx-ic{width:40px;height:40px;flex:none;border-radius:10px;background:var(--gc-inset);display:flex;align-items:center;justify-content:center;color:var(--gc-on-accent);}
.hx-tt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.hx-t{font-size:19px;font-weight:800;color:var(--gc-on-accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-tshort{display:none;}
.hx-sub{font-size:12px;color:var(--gc-on-accent-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hx-mic{width:32px;height:32px;flex:none;border-radius:10px;background:var(--gc-violet-dim);display:flex;align-items:center;justify-content:center;color:var(--gc-violet-ink2);}
.hx-mname{font-size:15.5px;font-weight:800;color:var(--gc-text);white-space:nowrap;}
.hx-chip{font-size:11px;font-weight:700;color:var(--gc-text-mid);border:1px solid var(--gc-hairline-strong);border-radius:999px;padding:3px 9px;white-space:nowrap;}
/* پنجرهٔ باریک: عنوانِ کامل (۱۷۳px) در کارتِ فعالِ ۱.۳۵ جا نمی‌شود؛ زیر این عرض عنوانِ
   کوتاه + زیرنویس مخفی + نسبتِ بازتر ۱.۸ می‌نشیند (اندازه‌ها با متنِ واقعی محاسبه شده). */
@media (max-width:1200px){
  .pg-excard.pg-exon{flex:1.8;}
  .hx-full{gap:10px;padding:0 14px;}
  .hx-ic{width:34px;height:34px;}
  .hx-t{font-size:16.5px;}
  .hx-tfull{display:none;}
  .hx-tshort{display:inline;}
  .hx-sub{display:none;}
  .hx-mic{width:28px;height:28px;}
  .hx-mname{font-size:14px;}
  .hx-chip{padding:3px 7px;}
}

/* placeholderِ فیلدِ جستجو */
input::placeholder{color:var(--gc-text-low);opacity:1;}
input{outline:none;}

/* یک‌دست‌سازیِ گوشه‌های همهٔ باکس‌های طوسی (surface) در کل برنامه — شعاع ۱۴px (ریفرشِ دیزاین).
   inline‌های کارت‌ها border-radius ندارند، پس این قانون بی‌تداخل روی همه اعمال می‌شود. */
[style*="var(--gc-surface)"]{border-radius:14px;}

/* نوار شفافیتِ اورلی — ضخیم و کوتاه، با پُرشدنِ رنگی (گرادیانِ inline از روی مقدار) */
.pg-op-range{-webkit-appearance:none;appearance:none;height:12px;border-radius:99px;cursor:pointer;outline:none;padding:0;}
.pg-op-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gc-on-accent);border:3px solid var(--gc-violet);box-shadow:0 1px 4px var(--gc-shadow-sm);cursor:pointer;}

/* ورودیِ عددیِ «تازه‌سازی» — بدونِ فلش‌های پیش‌فرضِ کرومیوم (طراحی دکمه‌های −/+ خودش را دارد) */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* ── ریکوردر (پورتِ دیزاین 1a): اسلایدر و سلکتِ اختصاصی ── */
/* ⚠ margin:0 عمدی است: استایل‌شیتِ خودِ کرومیوم به input[type=range] دو پیکسل مارجین می‌دهد،
   و با width:100% ریل دو پیکسل از ظرفش تو می‌رفت و دو پیکسل از طرفِ دیگر بیرون می‌زد. تا وقتی
   اسلایدر تنها بود دیده نمی‌شد؛ در کارتِ «کیفیت و حجم» که سگمنت دقیقاً بالای ریل و هم‌عرضِ آن
   می‌نشیند، همین ۲px دو لبه را پله‌ای می‌کرد. */
.rec-range{-webkit-appearance:none;appearance:none;height:10px;border-radius:999px;outline:none;cursor:pointer;border:none;width:100%;display:block;margin:0;}
.rec-range::-webkit-slider-runnable-track{height:10px;border-radius:999px;background:transparent;}
.rec-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gc-on-accent);border:3px solid var(--gc-violet);margin-top:-5px;box-shadow:0 1px 5px var(--gc-shadow-sm);}
/* فلشِ پیش‌فرضِ ویندوز (مثلثِ توپُرِ خاکستری) با پوستهٔ تیرهٔ اپ جور نیست → شِوِرونِ نازکِ خودمان.
   جهتِ فلش با dir المان عوض می‌شود تا در select فارسی سمتِ چپ و در لاتین سمتِ راست بنشیند. */
select.rec-sel{-webkit-appearance:none;appearance:none;background-color:var(--gc-elevated);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:left 10px center;
  border:1px solid var(--gc-hairline-strong);border-radius:8px;color:var(--gc-text);
  padding:6px 10px 6px 30px;font-size:13px;outline:none;cursor:pointer;font-family:var(--font-latin),var(--font-persian);}
select.rec-sel[dir="ltr"]{background-position:right 10px center;padding:6px 30px 6px 10px;}
select.rec-sel:hover{border-color:var(--gc-tint-3);}
/* شِوِرونِ سلکت داخلِ یک data-URI است و نمی‌تواند از توکن رنگ بگیرد؛ پس در پوستهٔ روشن
   کلِ تصویر با نسخهٔ تیره‌اش عوض می‌شود. بدونِ این، فلش سفید روی سلکتِ روشن ناپدید می‌شد. */
:root[data-theme="light"] select.rec-sel{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='rgba(17,19,26,0.62)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");}
select.rec-sel option{font-family:var(--font-latin),var(--font-persian);background:var(--gc-elevated);color:var(--gc-text);}
select.rec-sel:focus{border-color:var(--gc-violet);}
/* هاورِ دکمه‌های آیکنیِ کتابخانه (پورتِ style-hoverِ دیزاین) */
.rec-act:hover{color:var(--gc-text)!important;border-color:var(--gc-tint-3)!important;}
.rec-del:hover{background:var(--gc-danger-dim)!important;}

/* ── دکمهٔ «گرافیک پیشرفته» — انیمیشنیِ جلب‌توجه (قفل) / مالک (باز) ── */
/* چیپِ فیلترِ بازی در تبِ مانیتورینگ */
.mon-gchip{font-family:var(--font-persian);font-size:12px;font-weight:600;padding:6px 13px;border-radius:999px;border:1px solid var(--gc-hairline);background:transparent;color:var(--gc-text-low);cursor:pointer;white-space:nowrap;transition:border-color .14s ease,color .14s ease,background .14s ease;}
.mon-gchip:hover{border-color:var(--gc-hairline-strong);color:var(--gc-text);}
.mon-gchip.on{background:var(--gc-violet);border-color:var(--gc-violet);color:var(--gc-on-accent);}

/* ══════════ ترافیک اینترنت — بازهٔ دلخواه و تقویمِ شمسی ══════════
   طرحِ مرجع: phoenix_guardian/TRAFFIC_RANGE_MOCKUP.html (تأییدشده). عددها از همان‌جاست. */
/* چیپِ بازهٔ انتخاب‌شده، کنارِ سوییچِ بازه. عمداً بیرونِ pg-seg است: عرضِ سگمنت برابرِ
   محتوایش است و با متنِ متغیرِ تاریخ، کلِ کنترل هر بار قد می‌کشید. */
.tr-rangechip{display:inline-flex;align-items:center;gap:7px;background:var(--gc-violet-dim);border:1px solid rgba(var(--gc-violet-rgb),.45);color:var(--gc-violet-ink);border-radius:999px;padding:6px 13px 6px 11px;font-family:var(--font-persian);font-size:12px;font-weight:700;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
.tr-rangechip:hover{background:rgba(var(--gc-violet-rgb),.24);border-color:rgba(var(--gc-violet-rgb),.7);}
.tr-rangechip svg{flex:none;opacity:.9;}

.cal-back{position:fixed;inset:0;z-index:44;display:flex;align-items:center;justify-content:center;padding:32px;background:var(--gc-scrim);backdrop-filter:blur(6px);animation:dlgFade .16s ease;}
.cal-card{width:580px;max-width:100%;max-height:calc(100vh - 64px);background:var(--gc-surface);border:1px solid var(--gc-hairline-strong);border-radius:16px;box-shadow:0 34px 90px var(--gc-shadow-lg);display:flex;flex-direction:column;overflow:hidden;animation:dlgIn .22s cubic-bezier(.2,.8,.2,1);}
.cal-head{padding:15px 20px 14px;border-bottom:1px solid var(--gc-hairline);display:flex;align-items:center;gap:12px;}
.cal-ic{width:38px;height:38px;flex:none;border-radius:11px;background:var(--gc-gold-dim);box-shadow:0 0 0 1px var(--gc-prem-ring) inset;display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:11px;color:var(--gc-gold-ink);}
.cal-ic i{display:block;width:3px;border-radius:99px;background:currentColor;}
.cal-t{font-size:16px;font-weight:800;color:var(--gc-text);}
.cal-x{width:30px;height:30px;flex:none;border-radius:8px;border:1px solid var(--gc-hairline);background:transparent;color:var(--gc-text-low);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease;}
.cal-x:hover{color:var(--gc-text);border-color:var(--gc-hairline-strong);background:var(--gc-tint-1);}
.cal-presets{display:flex;gap:7px;flex-wrap:wrap;padding:13px 20px 12px;border-bottom:1px solid var(--gc-hairline);background:var(--gc-inset-2);}
.cal-body{padding:16px 20px 14px;overflow:auto;}
.cal-panes{display:flex;gap:24px;justify-content:center;}
.cal-pane{width:252px;flex:none;}
.cal-mh{display:flex;align-items:center;height:30px;margin-bottom:8px;}
.cal-mt{flex:1;text-align:center;font-size:13.5px;font-weight:800;color:var(--gc-text);}
.cal-nav{width:28px;height:28px;flex:none;border-radius:8px;border:1px solid var(--gc-hairline);background:transparent;color:var(--gc-text-mid);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .14s ease;}
.cal-nav:hover:not(:disabled){color:var(--gc-text);border-color:var(--gc-hairline-strong);background:var(--gc-tint-1);}
.cal-nav:disabled{opacity:.3;cursor:not-allowed;}
.cal-nav.ph{border-color:transparent;pointer-events:none;opacity:0;}
.cal-w{display:grid;grid-template-columns:repeat(7,1fr);margin-bottom:4px;}
.cal-w span{text-align:center;font-size:11px;font-weight:700;color:var(--gc-text-low);padding:4px 0;}
.cal-w span.fri{color:var(--gc-danger-ink);opacity:.75;}
.cal-g{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;}
/* نوارِ بازه عرضِ کاملِ سلول را می‌گیرد و بینِ ستون‌ها هیچ فاصله‌ای نیست، پس در طولِ هفته
   پیوسته دیده می‌شود — همان چیزی که در سایت‌های رزرو می‌بینی. */
.cal-d{position:relative;height:38px;border:none;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:var(--font-persian);}
.cal-d .band{position:absolute;inset:3px 0;background:var(--gc-violet-dim);pointer-events:none;display:none;}
.cal-d.in .band{display:block;}
.cal-d.pv .band{background:rgba(var(--gc-violet-rgb),.09);}
/* سرِ بازه در RTL سمتِ راست است — با propertyهای منطقی نوشته شده تا در LTR خودش برعکس شود. */
.cal-d.s .band{border-start-start-radius:999px;border-end-start-radius:999px;}
.cal-d.e .band{border-start-end-radius:999px;border-end-end-radius:999px;}
.cal-d .n{position:relative;z-index:1;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:var(--gc-text-mid);transition:background .14s ease,color .14s ease,box-shadow .14s ease;}
.cal-d:not(.off):hover .n{background:var(--gc-tint-1);color:var(--gc-text);}
.cal-d.in .n{color:var(--gc-text);}
.cal-d.cap .n,.cal-d.cap:hover .n{background:var(--gc-violet);color:var(--gc-on-accent);font-weight:800;box-shadow:0 3px 10px rgba(var(--gc-violet-rgb),.45);}
.cal-d.pvend .n{box-shadow:inset 0 0 0 1.5px var(--gc-violet-ink);color:var(--gc-text);}
.cal-d.today::after{content:'';position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--gc-gold-ink);z-index:2;}
.cal-d.today.cap::after{background:var(--gc-on-accent);}
.cal-d.off{cursor:not-allowed;}
.cal-d.off .n{color:var(--gc-text-low);opacity:.42;}
.cal-d.off:hover .n{background:transparent;}
.cal-d.blank{pointer-events:none;}
.cal-foot{display:flex;align-items:center;gap:10px;padding:13px 20px 16px;border-top:1px solid var(--gc-hairline);background:var(--gc-inset-2);}
.cal-sum{flex:1;min-width:0;font-size:12.5px;line-height:1.75;color:var(--gc-text-mid);}
.cal-sum b{color:var(--gc-text);font-weight:800;}
.cal-sum .hint{color:var(--gc-text-low);font-weight:600;}
.cal-go{flex:none;border:none;border-radius:10px;font-family:var(--font-persian);font-size:14px;font-weight:800;padding:11px 26px;background:var(--gc-violet);color:var(--gc-on-accent);cursor:pointer;}
.cal-go:disabled{background:var(--gc-elevated);color:var(--gc-text-low);cursor:not-allowed;}
.cal-cancel{flex:none;background:transparent;border:1px solid var(--gc-hairline-strong);border-radius:10px;color:var(--gc-text-mid);font-family:var(--font-persian);font-size:13px;font-weight:600;padding:11px 18px;cursor:pointer;transition:all .14s ease;}
.cal-cancel:hover{color:var(--gc-text);background:var(--gc-tint-1);}
/* پنجرهٔ باریک (زومِ بالا روی کفِ ۹۰۰px): تقویم تک‌ماهه می‌شود و پنلِ *تازه‌تر* می‌ماند —
   وگرنه با سقفِ «حداکثر ماهِ قبل»، ماهِ جاری اصلاً دیده نمی‌شد. فلشِ «ماه قبل» برمی‌گردد. */
@media (max-width:700px){
  .cal-card{width:340px;}
  .cal-panes{gap:0;}
  .cal-pane.p1{display:none;}
  .cal-pane.p2 .cal-nav.ph{opacity:1;pointer-events:auto;border-color:var(--gc-hairline);}
}

/* «دما و مصرف» — غلطکِ حساسیت، استپرِ آستانه، چیپ‌های فاصلهٔ هشدار (از ماک‌آپ) */
input[type=range].mon-rng{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--gc-elevated);outline:none;border:1px solid var(--gc-hairline);}
input[type=range].mon-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--gc-on-accent);border:3px solid var(--gc-violet);box-shadow:0 1px 5px var(--gc-shadow-sm);cursor:pointer;}
/* اسلایدرِ کشیدنیِ آستانه روی نوارِ هشدار — track شفاف (نوارِ مصرفِ زیرش دیده می‌شود)، thumb = «قرصِ» سفید. */
input[type=range].thr-rng{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;height:26px;margin:0;background:transparent;outline:none;cursor:pointer;z-index:3;}
input[type=range].thr-rng::-webkit-slider-runnable-track{background:transparent;border:none;height:26px;}
/* transform:scale روی thumbِ بومی کار نمی‌کند؛ بزرگ‌شدن را با پهن‌ترشدنِ قرص + هالهٔ درخشان‌تر می‌سازیم. */
input[type=range].thr-rng::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:26px;border-radius:7px;background:var(--gc-on-accent);border:none;box-shadow:0 0 0 2px var(--c),0 2px 6px var(--gc-shadow-md);cursor:ew-resize;transition:box-shadow .15s ease,width .13s ease;}
/* بزرگ/پررنگ‌شدن فقط وقتی موس روی خودِ قرص است (نه هر جای نوار) یا در حالِ کشیدن. */
input[type=range].thr-rng::-webkit-slider-thumb:hover,input[type=range].thr-rng:active::-webkit-slider-thumb{width:19px;box-shadow:0 0 0 3px var(--c),0 0 14px 2px var(--c),0 2px 9px var(--gc-shadow-lg);}
.thr-bubble{position:absolute;bottom:calc(100% + 9px);transform:translateX(-50%);white-space:nowrap;font-family:var(--font-latin);font-size:12px;font-weight:700;padding:3px 7px;border-radius:7px;color:#0c0c10;opacity:0;transition:opacity .12s ease;pointer-events:none;z-index:4;}
.thr-bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:inherit;}
/* فقط حینِ کشیدن. نه هاورِ نوار، نه :focus-within (وگرنه بعد از رها کردن باقی می‌ماند). */
.thr-rng:active ~ .thr-bubble{opacity:1;}
/* هشدارِ «آستانه از مقدارِ فعلی کمتر است» — زیرِ نوار، absolute تا جای نوار را عوض نکند. */
.thr-warn{position:absolute;top:calc(100% + 12px);left:0;right:0;direction:rtl;text-align:right;color:var(--gc-danger);font-size:11.5px;font-weight:600;white-space:nowrap;pointer-events:none;}
.mon-step{display:inline-flex;align-items:center;gap:2px;background:var(--gc-elevated);border:1px solid var(--gc-hairline);border-radius:8px;padding:3px;flex:none;}
.mon-step button{width:26px;height:26px;border:none;border-radius:6px;background:transparent;color:var(--gc-text-mid);font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-latin);}
.mon-step button:hover{background:var(--gc-tint-1);color:var(--gc-text);}
/* ‏.cd-chip حذف شد — «فاصلهٔ بین هشدارها» حالا .pg-seg است. */

/* «ترافیک اینترنت» — چیپ‌های مرتب‌سازی، دکمهٔ بلاک، ستون‌های نمودار، برچسبِ VPN */
.srt{font-family:var(--font-persian);font-size:12px;font-weight:600;padding:6px 13px;border-radius:7px;border:1px solid var(--gc-hairline);background:transparent;color:var(--gc-text-mid);cursor:pointer;transition:all .14s ease;}
.srt:hover{border-color:var(--gc-hairline-strong);color:var(--gc-text);}
.srt.on{background:var(--gc-violet);border-color:var(--gc-violet);color:var(--gc-on-accent);}
.blk{font-family:var(--font-persian);font-size:11.5px;font-weight:600;padding:5px 11px;border-radius:7px;border:1px solid var(--gc-hairline-strong);background:transparent;color:var(--gc-text-low);cursor:pointer;flex:none;white-space:nowrap;transition:all .14s ease;}
.blk:hover{border-color:var(--gc-danger);color:var(--gc-danger);}
/* ستونِ نمودار: tooltip فقط با هاور. position:relative لازم است تا برچسب سرِ جایش بنشیند. */
.hbar{position:relative;transition:opacity .14s ease;}
.hbar:hover{opacity:.75 !important;}
/* برچسبِ «VPN» — همان زبانِ رنگیِ بخشِ ویژه، ولی ریز و بی‌سروصدا */
.tr-vpn{font-family:var(--font-persian);font-size:10.5px;font-weight:700;color:var(--gc-violet-ink);background:var(--gc-violet-dim);border:1px solid rgba(var(--gc-violet-rgb),.45);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none;}
/* دکمهٔ صریحِ «نمایشِ همه» — نوارِ کم‌رنگِ قبلی را کاربر پیدا نمی‌کرد */
.tr-more{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:11px;font-family:var(--font-persian);font-size:12px;font-weight:700;color:var(--gc-violet-ink);background:var(--gc-violet-dim);border:1px solid rgba(var(--gc-violet-rgb),.45);border-radius:9px;padding:8px 12px;cursor:pointer;transition:background .14s ease,border-color .14s ease;}
.tr-more:hover{background:rgba(var(--gc-violet-rgb),.26);border-color:rgba(var(--gc-violet-rgb),.7);}
/* چیپِ وضعیتِ بلاک/آزاد — در همین تب دیده می‌شود، بدونِ رفتن به تبِ اینترنت */
.tr-blocked{font-family:var(--font-persian);font-size:10.5px;font-weight:700;color:var(--gc-danger);background:var(--gc-danger-dim);border:1px solid rgba(var(--gc-danger-rgb),.5);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none;}
/* برچسبِ «چند سرویس داخلِ این دسته است» */
.tr-cat{font-family:var(--font-persian);font-size:10.5px;font-weight:600;color:var(--gc-text-low);background:var(--gc-elevated);border:1px solid var(--gc-hairline);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none;}
.tr-free{font-family:var(--font-persian);font-size:10.5px;font-weight:600;color:var(--gc-text-low);background:transparent;border:1px solid var(--gc-hairline);padding:2px 8px;border-radius:999px;white-space:nowrap;flex:none;}
.blk.on{border-color:var(--gc-danger);color:var(--gc-danger);}
.blk.on:hover{border-color:var(--gc-success);color:var(--gc-success);}
@keyframes gcSpin{to{transform:rotate(360deg);}}

/* ── روکشِ «در حال پردازش» روی کارتِ ویدیو (تبِ ریکوردر) ──
   حرکتِ اصلی (پرشدنِ حلقه و نوارِ لبه) transition است نه انیمیشن، چون C# هر ۱ ثانیه
   وضعیت را پوش می‌کند و هر بار باید از همان‌جا که هست نرم برود جلو، نه از اول. */
@keyframes gcFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes gcRingIn{from{opacity:0;transform:scale(.84);}to{opacity:1;transform:scale(1);}}
@keyframes gcCardIn{from{opacity:0;transform:translateY(10px) scale(.975);}to{opacity:1;transform:none;}}
@keyframes gcDraw{to{stroke-dashoffset:0;}}
/* ویدیوی تازه‌ساخته‌شده اولین خانهٔ گرید (سمتِ راست) را می‌گیرد و از بیرونِ قاب سُر می‌خورد تو؛
   کارت‌های قبلی یک خانه به چپ می‌روند و بدونِ این انیمیشن، ناگهانی می‌پرند. */
@keyframes gcSpawnIn{0%{opacity:0;transform:translateX(64px) scale(.94);}55%{opacity:1;}100%{opacity:1;transform:none;}}
@keyframes gcShiftLeft{from{transform:translateX(26px);}to{transform:none;}}
.rec-spawn{animation:gcSpawnIn .5s cubic-bezier(.2,.8,.2,1);}
.rec-shift{animation:gcShiftLeft .5s cubic-bezier(.2,.8,.2,1);}

.pgprem{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-persian);font-size:13px;font-weight:700;padding:11px 10px;border-radius:9px;border:none;cursor:pointer;transition:transform .12s ease;}
.pgprem:active{transform:scale(.97);}
/* استریکِ نور که روی دکمه می‌کشد (فقط با انیمیشنِ حالت‌ها حرکت می‌کند) */
/* استریکِ نور عمداً در هر دو پوسته سفید است: روی پُرشدگیِ اشباعِ طلایی/بنفش می‌کشد که خودش
   در پوستهٔ روشن هم اشباع می‌ماند. توکن‌کردنش استریک را در پوستهٔ روشن به یک لکهٔ تیره بدل می‌کرد. */
.pgprem::before{content:'';position:absolute;top:0;bottom:0;width:45%;pointer-events:none;background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.32) 50%,transparent 100%);transform:translateX(-260%) skewX(-14deg);}
/* حالتِ قفل (بدون اشتراک): طلاییِ کم‌رنگ + هالهٔ تپنده + استریک + لرزشِ قفل */
.pgprem-locked{color:var(--gc-gold-ink);background:var(--gc-gold-dim);box-shadow:0 0 0 1px var(--gc-prem-ring) inset;animation:pgpremGlow 2.4s ease-in-out infinite;}
.pgprem-locked::before{animation:pgpremSweep 3.2s ease-in-out infinite;}
.pgprem-locked .pgprem-lock{font-size:11px;display:inline-block;animation:pgpremLock 3.2s ease-in-out infinite;}
/* حالتِ باز (با اشتراک): طلاییِ پُر + برقِ آرام + تیک، بدونِ قفل */
.pgprem-owned{color:#1a1200;background:linear-gradient(120deg,var(--gc-gold),#ffc659);box-shadow:0 5px 18px rgba(var(--gc-gold-rgb),.28);}
.pgprem-owned::before{background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);animation:pgpremSweep 5.5s ease-in-out infinite;}
.pgprem-owned .pgprem-chk{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(26,18,0,.18);font-size:10px;font-weight:900;}
/* قفل + انتخاب‌شده (کاربر واردِ تب شده): طلاییِ پُر، بدونِ انیمیشنِ مزاحم — باید بعد از -locked بیاید */
.pgprem-sel{color:#1a1200;background:linear-gradient(120deg,var(--gc-gold),#ffc659);box-shadow:0 5px 18px rgba(var(--gc-gold-rgb),.28);animation:none;}
.pgprem-sel::before{animation:none;}
.pgprem-sel .pgprem-lock{animation:none;}
/* با اشتراک ولی روی تبِ دیگر (غیرفعال): طلاییِ «تُهی» — قابِ طلایی، بدونِ پُرشدگی و سایه — تا
   «داخلِ این تب نیستید» خوانده شود. باید بعد از -owned بیاید تا رویش را بگیرد. */
.pgprem-idle{color:var(--gc-gold-ink);background:transparent;box-shadow:0 0 0 1.5px var(--gc-prem-ring) inset;}
.pgprem-idle::before{animation:none;}
.pgprem-idle .pgprem-chk{background:rgba(var(--gc-gold-rgb),.18);color:var(--gc-gold-ink);}
@keyframes pgpremSweep{0%{transform:translateX(-260%) skewX(-14deg);}22%,100%{transform:translateX(260%) skewX(-14deg);}}
@keyframes pgpremGlow{0%,100%{box-shadow:0 0 0 1px rgba(var(--gc-gold-rgb),.3) inset,0 0 0 0 rgba(var(--gc-gold-rgb),0);}50%{box-shadow:0 0 0 1px rgba(var(--gc-gold-rgb),.6) inset,0 0 18px 0 rgba(var(--gc-gold-rgb),.28);}}
@keyframes pgpremLock{0%,86%,100%{transform:rotate(0);}90%{transform:rotate(-12deg);}94%{transform:rotate(10deg);}98%{transform:rotate(-4deg);}}

/* ══ هایلایت هوشمند (زیرتب طلایی ریکوردر) ══ */
/* اسلایدرهای طلایی بافر — همان rec-range با انگشتی طلایی و جهت چپ‌به‌راست */
.rec-range.gold{direction:ltr;}
.rec-range.gold::-webkit-slider-thumb{border-color:var(--gc-gold-ink);}
.rec-range:disabled{opacity:.55;cursor:default;}
/* چیپ مقدار (ثانیه/مگابایت) — فونت فارسی چون رقم‌ها فارسی‌اند */
.rp-chip{font-family:var(--font-persian);font-size:12.5px;font-weight:700;padding:7px 0;border-radius:7px;border:1px solid var(--gc-hairline);background:transparent;color:var(--gc-text-mid);cursor:pointer;flex:1;transition:all .14s ease;}
.rp-chip:hover{border-color:var(--gc-hairline-strong);color:var(--gc-text);}
.rp-chip.on{background:var(--gc-gold);border-color:var(--gc-gold-ink);color:#1a1200;}
/* حالت دمو: دیده می‌شود، کار نمی‌کند */
.rp-dz{opacity:.55;pointer-events:none;}
/* کاشی تنظیم رفتار */
.rp-tile{display:flex;flex-direction:column;background:var(--gc-inset);border:1px solid var(--gc-hairline);border-radius:13px;padding:15px 16px;transition:border-color .16s ease,background .16s ease,transform .16s ease;}
.rp-tile:hover{background:var(--gc-tint-0);transform:translateY(-1px);}
.rp-ico{width:34px;height:34px;flex:none;border-radius:10px;border:1px solid;display:flex;align-items:center;justify-content:center;}
.rp-tile .rp-chip{flex:none;padding:6px 11px;font-size:11.5px;}
/* نمودار مسیر داده */
.fl{background:var(--gc-inset);border:1px solid var(--gc-hairline);border-radius:13px;padding:4px 18px;}
.fl-lane{display:flex;align-items:center;gap:16px;padding:30px 0 18px;}
.fl-lane+.fl-lane{border-top:1px solid var(--gc-hairline);}
.fl-tag{width:104px;flex:none;font-size:12px;font-weight:800;line-height:1.6;}
.fl-tag small{display:block;font-size:10.5px;font-weight:600;color:var(--gc-text-low);margin-top:3px;}
.fl-body{flex:1;display:flex;align-items:center;gap:10px;min-width:0;}
.fl-node{width:46px;height:46px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;background:var(--gc-elevated);border:1px solid var(--gc-hairline-strong);color:var(--gc-text-mid);}
.fl-node.bad{border-color:rgba(var(--gc-danger-rgb),.55);color:var(--gc-danger);background:var(--gc-danger-dim);animation:flHeat 1.8s ease-in-out infinite;}
.fl-node.safe{border-color:rgba(var(--gc-success-rgb),.45);color:var(--gc-success);background:var(--gc-success-dim);}
@keyframes flHeat{0%,100%{box-shadow:0 0 0 0 rgba(var(--gc-danger-rgb),0);}50%{box-shadow:0 0 16px 0 rgba(var(--gc-danger-rgb),.35);}}
.fl-wire{position:relative;flex:1;min-width:34px;height:3px;border-radius:99px;background:var(--gc-track);overflow:hidden;}
.fl-wire i{position:absolute;inset:0;background:repeating-linear-gradient(to right,currentColor 0 7px,transparent 7px 18px);animation:flFlow .85s linear infinite;}
.fl-wire.red{color:var(--gc-danger);}
.fl-wire.teal{color:var(--gc-success);}
@keyframes flFlow{to{transform:translateX(-18px);}}
.fl-wire.dash{background:repeating-linear-gradient(to right,var(--gc-hairline-strong) 0 5px,transparent 5px 13px);overflow:visible;}
.fl-wire.dash b{position:absolute;top:-2.5px;right:0;width:8px;height:8px;border-radius:50%;background:var(--gc-gold);box-shadow:0 0 10px 2px rgba(var(--gc-gold-rgb),.7);opacity:0;animation:flSave 4.5s ease-in-out infinite;}
@keyframes flSave{0%,62%{right:0;opacity:0;}68%{opacity:1;}96%{right:calc(100% - 8px);opacity:1;}100%{right:calc(100% - 8px);opacity:0;}}
.fl-ring{position:relative;width:58px;height:58px;flex:none;}
.fl-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 55%,rgba(var(--gc-gold-rgb),.25) 72%,var(--gc-gold) 92%,transparent 100%);animation:flSpin 2.4s linear infinite;}
.fl-ring::after{content:'';position:absolute;inset:5px;border-radius:50%;background:var(--gc-surface);border:1px solid rgba(var(--gc-gold-rgb),.22);}
.fl-ring u{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:800;color:var(--gc-gold-ink);text-decoration:none;}
@keyframes flSpin{to{transform:rotate(360deg);}}
.fl-chip{position:absolute;top:-24px;right:50%;transform:translateX(50%);white-space:nowrap;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;}
/* نوارهای مقایسه نوشتن روی SSD */
.wear{display:flex;align-items:center;gap:12px;}
.wear-track{flex:1;display:flex;height:16px;border-radius:99px;background:var(--gc-tint-0);border:1px solid var(--gc-hairline);overflow:hidden;}
.wear-fill{display:block;height:100%;animation:wearGrow 1s cubic-bezier(.2,.8,.2,1) both;}
@keyframes wearGrow{from{transform:scaleX(0);transform-origin:left;}}
.wear-keep{background:linear-gradient(90deg,#b8981c,var(--gc-gold));}
.wear-glow{position:relative;animation:wearGrow 1s cubic-bezier(.2,.8,.2,1) both,wearPulse 2.4s ease-in-out 1s infinite;}
@keyframes wearPulse{0%,100%{box-shadow:0 0 10px 1px rgba(var(--gc-gold-rgb),.45);}50%{box-shadow:0 0 20px 4px rgba(var(--gc-gold-rgb),.85);}}
.zero-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;color:var(--gc-gold-ink);background:var(--gc-gold-dim);border:1px solid rgba(var(--gc-gold-rgb),.45);border-radius:999px;padding:4px 11px;white-space:nowrap;animation:zeroGlow 2.4s ease-in-out 1s infinite;}
@keyframes zeroGlow{0%,100%{box-shadow:0 0 0 0 rgba(var(--gc-gold-rgb),0);}50%{box-shadow:0 0 14px 0 rgba(var(--gc-gold-rgb),.4);}}

/* استپر عددی دستی (حجم هدف در تب ضبط) — دکمه‌های خودمان، نه فلش‌های پیش‌فرض مرورگر */
.numbox{display:inline-flex;align-items:center;gap:2px;background:var(--gc-elevated);border:1px solid var(--gc-hairline-strong);
  border-radius:9px;padding:3px;flex:none;transition:border-color .15s ease,box-shadow .15s ease;}
.numbox:focus-within{border-color:var(--gc-violet);box-shadow:0 0 0 3px var(--gc-violet-dim);}
.numbox button{width:27px;height:27px;border:none;border-radius:7px;background:transparent;color:var(--gc-text-mid);
  font-family:var(--font-latin);font-size:16px;font-weight:700;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.numbox button:hover{background:var(--gc-tint-1);color:var(--gc-text);}
.numbox input{width:62px;background:transparent;border:none;outline:none;color:var(--gc-text);text-align:center;
  font-family:var(--font-latin);font-size:13.5px;font-weight:700;padding:0;}
.numbox input::-webkit-inner-spin-button,.numbox input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}

/* ── مودال ارسال به تلگرام ── */
.tgdlg{position:fixed;inset:0;background:var(--gc-scrim);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:60;animation:dlgFade .2s ease;}
.tgpanel{width:min(430px,92vw);background:var(--gc-surface);border:1px solid var(--gc-hairline-strong);border-radius:16px;overflow:hidden;box-shadow:0 24px 60px var(--gc-shadow-md);animation:dlgIn .22s cubic-bezier(.2,.8,.2,1);}
.tgbtn{flex:1;font-family:var(--font-persian);font-size:13.5px;font-weight:800;padding:11px 16px;border-radius:9px;border:none;cursor:pointer;}
.tgbtn-gold{background:linear-gradient(120deg,var(--gc-gold),#ffc659);color:#1a1200;box-shadow:0 5px 18px rgba(var(--gc-gold-rgb),.22);display:inline-flex;align-items:center;justify-content:center;gap:7px;}
.tgbtn-ghost{background:transparent;border:1px solid var(--gc-hairline-strong);color:var(--gc-text-mid);flex:none;padding:11px 20px;}
.tgstep{display:flex;align-items:flex-start;}
.tgstep>div{flex:1;text-align:center;position:relative;}
/* رابطِ بین پله‌ها: هر پله خط را به پلهٔ «قبلی» می‌کشد. در RTL پلهٔ قبلی سمتِ راست است،
   پس باید از مرکز به راست کشیده شود (left:50% + right:-50%). با نسخهٔ آینه‌شده، خط‌ها یک
   خانه جابه‌جا می‌افتادند و بینِ دو پلهٔ اول شکاف می‌ماند. */
.tgstep>div::before{content:'';position:absolute;top:13px;left:50%;right:-50%;height:2px;background:var(--gc-hairline);}
.tgstep>div:first-child::before{display:none;}
.tgstep>div.done::before,.tgstep>div.now::before{background:var(--gc-gold);}
.tgdot{position:relative;z-index:1;width:27px;height:27px;margin:0 auto 8px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--gc-elevated);border:1px solid var(--gc-hairline-strong);color:var(--gc-text-low);font-size:11.5px;font-weight:800;}
.done .tgdot{background:var(--gc-gold);border-color:var(--gc-gold-ink);color:#1a1200;animation:tgPop .25s cubic-bezier(.2,.8,.2,1);}
.now .tgdot{border-color:var(--gc-gold-ink);color:var(--gc-gold-ink);}
.now .tgdot::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--gc-gold-ink);animation:tgSpin .8s linear infinite;}
.tgstep .lbl{font-size:11px;color:var(--gc-text-low);line-height:1.6;}
.done .lbl,.now .lbl{color:var(--gc-text);font-weight:700;}
.tgbar{height:8px;border-radius:99px;background:var(--gc-elevated);border:1px solid var(--gc-hairline);overflow:hidden;}
.tgbar>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#ffc659,var(--gc-gold));transition:width .25s linear;}
@keyframes tgSpin{to{transform:rotate(360deg);}}
@keyframes tgPop{from{transform:scale(.6);opacity:0;}}

/* داشبورد · بخشِ «وضعیت» — چیدمانِ قهرمان‌محور: «حالت گیمینگ» (تنها کارتِ تعاملی) قهرمانِ
   پهنِ راست، و دو وضعیتِ فقط‌خواندنی («بازی فعال» + «آخرین هشدار») روی‌هم در ستونِ باریکِ چپ.
   کانتینر-کوئری (نه مدیا) تا با پهنای واقعیِ محتوا واکنش دهد، نه پهنای پنجره. */
.pg-st{container-type:inline-size;}
/* minmax(0,..) روی ستون‌ها لازم است؛ وگرنه پیش‌فرضِ 1fr برابرِ minmax(auto,1fr) است و یک
   نامِ بازیِ بلندِ بی‌شکست، ستون را از هم باز می‌کند و ellipsis هرگز فعال نمی‌شود. */
.pg-st-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:12px;align-items:stretch;}
.pg-st-stack{display:grid;grid-template-rows:1fr 1fr;gap:12px;min-height:0;min-width:0;}
@container (max-width:560px){
  .pg-st-grid{grid-template-columns:minmax(0,1fr);}
  .pg-st-stack{grid-template-rows:auto auto;}
}

/* ══════════ سگمنتِ یک‌دستِ برنامه (تنها سوییچِ چندگزینه‌ای) ══════════
   مرجعِ طراحی: سگمنتِ «فقط هنگام بازی / همیشه» در کارتِ هیروِ گیمینگ — نوارِ فرورفتهٔ تیره
   + قرصِ سفیدی که روی گزینه‌ها سُر می‌خورد. الگوی قدیمیِ «دکمهٔ فعال = پُرِ بنفش» (داشبورد،
   اورلی، ریکوردر، گزارش، تایم‌پلی، کنترلِ سیستم) کاملاً برداشته شد؛ هیچ‌جای برنامه دیگر
   نباید سگمنتِ دست‌ساز بسازد — PG.seg در app.js تنها سازنده است.
   ⚠ قرص با transform حرکت می‌کند نه با right/left: morph فقط attributeها را وصله می‌کند و
   المان را زنده نگه می‌دارد، پس ترنزیشنِ transform واقعاً اجرا می‌شود و روی لایهٔ compositor
   می‌افتد (با right/left هر قدم یک layout بود و روی سیستمِ ضعیف می‌پرید). */
/* ⚠ حلقهٔ ۱px با hairline-strong (نه hairline): مرجعِ طراحی روی کارتِ بنفشِ هیرو نشسته و
   آن‌جا نوارِ سیاهِ ۳۲٪ خودش دیده می‌شد، ولی روی کارتِ تیرهٔ ‎--gc-surface اختلافِ روشنایی
   تقریباً صفر است و بدونِ حلقه، گزینه‌های خاموش «متنِ شناور» دیده می‌شدند نه یک کنترلِ
   کلیک‌پذیر — دقیقاً همان قابی که کنترل‌های قبلی داشتند. */
.pg-seg{position:relative;display:inline-grid;flex:none;padding:3px;border-radius:9px;background:var(--gc-inset);box-shadow:inset 0 0 0 1px var(--gc-hairline-strong);}
/* قرصِ سُرنده — رنگ‌بندیِ آشنای برنامه: قرصِ بنفش، متنِ سفید. (مرجعِ حرکت کارتِ هیروِ
   گیمینگ است که قرصش سفید بود، چون آن‌جا روی کارتِ بنفش می‌نشیند؛ رنگ عمداً به بنفشِ
   برند برگشت تا همهٔ برنامه یک رنگ‌بندی داشته باشد.)
   عرض و جابه‌جایی inline می‌آیند — به تعدادِ گزینه‌ها و گزینهٔ فعال بستگی دارند. */
.pg-seg>i{position:absolute;top:3px;bottom:3px;right:3px;border-radius:7px;background:var(--gc-violet);box-shadow:0 2px 10px rgba(var(--gc-violet-rgb),.35);transition:transform .28s cubic-bezier(.33,.9,.3,1);}
.pg-seg[dir=ltr]>i{right:auto;left:3px;}
.pg-seg>button{position:relative;z-index:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;background:transparent;cursor:pointer;white-space:nowrap;font-family:var(--font-persian);font-size:13px;font-weight:700;padding:7px 14px;color:var(--gc-text-mid);transition:color .25s ease;}
.pg-seg>button:hover{color:var(--gc-text);}
.pg-seg>button.on,.pg-seg>button.on:hover{color:var(--gc-on-accent);}
/* چگالیِ فشرده — فقط جایی که ردیف عرض ندارد (کارتِ هیروِ گیمینگ، ۱۷۶px برای دو گزینه). */
.pg-seg.sm>button{font-size:11.5px;padding:6px 2px;}
/* چگالیِ چیپ — همان ۱۱٫۵px/۶×۱۱ چیپ‌های قبلی (rp-chip داخلِ کاشی). جایی لازم است که سگمنت
   جای یک ردیفِ چیپِ ریز را گرفته و با اندازهٔ عادی، ستونِ متنِ کنارش را له می‌کند. */
.pg-seg.xs>button{font-size:11.5px;padding:6px 11px;}
/* عرضِ خودکار: ستون‌ها به اندازهٔ متنِ خودشان (نه ۱fr). عرضِ قرص را segFit می‌نویسد، پس
   مثلِ جایش باید نرم عوض شود وگرنه پهنای قرص وسطِ حرکت «تِق» می‌کند. */
.pg-seg.auto>i{transition:transform .28s cubic-bezier(.33,.9,.3,1),width .28s cubic-bezier(.33,.9,.3,1);}
/* دوخطی (رزولوشنِ بافر) — سطرِ اول برچسب، سطرِ دوم ابعادِ واقعی. اعداد و رنگ‌ها از
   RES_BUTTON_MOCKUP.html (طرحِ تأییدشده) می‌آیند، نه انتخابی. */
.pg-seg.two>button{flex-direction:column;gap:2px;line-height:1.15;padding:7px 15px;}
.pg-seg.two>button>.segsub{font-family:var(--font-latin);font-size:9.5px;font-weight:600;color:var(--gc-text-low);transition:color .25s ease;}
.pg-seg.two>button.on>.segsub{color:rgba(26,18,0,.72);}
/* واریانتِ طلایی — فقط زیرتبِ «هایلایت هوشمند»، جایی که کلِ بخش (چیپ‌ها، ریلِ اسلایدر،
   بَجِ رم) طلایی است و قرصِ بنفشِ پیش‌فرض وسطش وصله می‌زد. این یک تمِ دوم نیست: بقیهٔ
   برنامه همان بنفش می‌ماند. */
.pg-seg.gold>i{background:linear-gradient(120deg,var(--gc-gold),#ffc659);box-shadow:0 2px 10px rgba(var(--gc-gold-rgb),.26);}
.pg-seg.gold>button.on,.pg-seg.gold>button.on:hover{color:#1a1200;}
.pg-seg.gold>button.on .segn{background:rgba(26,18,0,.16);color:#1a1200;}
/* هیرو استثناست: کارتِ زیرش خودش بنفشِ پُر است، پس قرصِ بنفش روی آن گم می‌شود. تنها
   جایی از برنامه که قرص سفید می‌ماند — همان چیزی که از اول آن‌جا بود. */
.pg-seg.onviolet>i{background:var(--gc-on-accent);box-shadow:0 2px 8px var(--gc-shadow-sm);}
/* این سگمنت روی کارتِ بنفش می‌نشیند که در هر دو پوسته بنفش می‌ماند — پس سفید درست است. */
.pg-seg.onviolet>button{color:rgba(255,255,255,.8);}
.pg-seg.onviolet>button.on,.pg-seg.onviolet>button.on:hover{color:#4a21c9;}
/* غیرفعال: مثلاً «کیفیت صدا» وقتی هر دو منبعِ صدا خاموش‌اند. */
.pg-seg.off{opacity:.45;pointer-events:none;}
/* بَجِ شمارنده داخلِ گزینه (نوارِ «مدیریت برنامه‌ها») — همان دو رنگِ قبلیِ خودش. */
.pg-seg .segn{font-size:11px;font-weight:700;min-width:18px;height:18px;padding:0 5px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--gc-inset);color:var(--gc-text);transition:background .25s ease;}
.pg-seg>button.on .segn{background:var(--gc-tint-3);color:var(--gc-on-accent);}

/* ══════════ دراپ‌داونِ درون‌صفحه (PG.dd) ══════════
   دکمه‌اش عمداً مو‌به‌مو شبیهِ select.rec-sel است (همان زمینه، قاب، شعاع، پدینگ و شِوِرون)،
   چون جایگزینِ آن است و نباید در کنارِ بقیهٔ فرم‌ها ناجور بزند. فرقش این است که منو یک
   پنجرهٔ ویندوزیِ جدا نیست؛ همین باعث می‌شود پرشِ «بارِ اولِ هر اجرا»ی پاپ‌آپِ بومیِ WebView2
   اصلاً پیش نیاید. */
.pg-dd{position:relative;display:inline-flex;flex-direction:column;min-width:0;}
.pg-ddb{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--gc-elevated);border:1px solid var(--gc-hairline-strong);border-radius:8px;
  color:var(--gc-text);font-family:var(--font-latin),var(--font-persian);font-size:13px;
  padding:6px 10px;cursor:pointer;outline:none;transition:border-color .14s ease;}
.pg-ddb:hover{border-color:var(--gc-tint-3);}
.pg-dd.open>.pg-ddb{border-color:var(--gc-violet);}
.pg-ddv{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pg-ddb>svg{flex:none;opacity:.55;transition:transform .18s ease;}
.pg-dd.open>.pg-ddb>svg{transform:rotate(180deg);}
/* منو روی همان عرضِ دکمه باز می‌شود ⇒ چیدمان با کم و زیاد شدنِ گزینه‌ها تکان نمی‌خورد. */
.pg-ddm{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;padding:4px;
  background:var(--gc-elevated);border:1px solid var(--gc-hairline-strong);border-radius:9px;
  box-shadow:0 14px 34px var(--gc-shadow-md);max-height:264px;overflow-y:auto;
  animation:ddIn .14s cubic-bezier(.2,.8,.2,1);}
.pg-ddm>button{display:block;width:100%;background:transparent;border:none;border-radius:6px;
  color:var(--gc-text-mid);font-family:var(--font-latin),var(--font-persian);font-size:13px;
  padding:7px 10px;cursor:pointer;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pg-dd[dir=ltr] .pg-ddm>button{text-align:left;}
.pg-ddm>button:hover{background:var(--gc-tint-1);color:var(--gc-text);}
.pg-ddm>button.on{background:var(--gc-violet-dim);color:var(--gc-violet-ink2);font-weight:700;}
.pg-ddm>button.dis{color:var(--gc-text-low);cursor:default;}
.pg-ddm>button.dis:hover{background:transparent;color:var(--gc-text-low);}
/* ══════════ لودینگ اولِ تب ضبط ══════════
   طرحِ تاییدشده: `phoenix_guardian/RECORDER_LOADING_MOCKUP.html` — ایدهٔ ۲ (نوار فیلم).
   وسطِ تب می‌نشیند، بدونِ کارت و بدونِ نامِ فنی. فقط چند لحظهٔ اول دیده می‌شود.
   ⚠ ارتفاعِ ثابت دارد تا وقتی بررسی تمام شد و محتوای واقعی آمد، صفحه بالا-پایین نپرد. */
.rec-boot{min-height:340px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:20px;}
.rec-boot .film{display:flex;flex-direction:column;align-items:center;gap:5px;}
.rec-boot .holes{display:flex;gap:11px;}
.rec-boot .holes i{width:6px;height:4px;border-radius:1.5px;background:rgba(255,255,255,.13);}
.rec-boot .cells{display:flex;gap:7px;}
/* هر خانه با کمی تاخیر روشن می‌شود ⇒ موجی که از یک سرِ نوار به سرِ دیگر می‌رود. */
.rec-boot .cells i{width:26px;height:34px;border-radius:5px;background:var(--gc-elevated);
  border:1px solid var(--gc-hairline);animation:recBootCell 1.5s ease-in-out infinite;}
.rec-boot .cells i:nth-child(2){animation-delay:.12s;}
.rec-boot .cells i:nth-child(3){animation-delay:.24s;}
.rec-boot .cells i:nth-child(4){animation-delay:.36s;}
.rec-boot .cells i:nth-child(5){animation-delay:.48s;}
.rec-boot .cap{font-size:14.5px;font-weight:700;color:var(--gc-text);}
@keyframes recBootCell{
  0%,55%,100%{background:var(--gc-elevated);border-color:var(--gc-hairline);box-shadow:none;}
  22%{background:rgba(var(--gc-violet-rgb),.30);border-color:rgba(var(--gc-violet-rgb),.75);
      box-shadow:0 0 16px rgba(var(--gc-violet-rgb),.35);}
}

/* گزینه‌های فارسی: پشتهٔ فونت برعکس می‌شود. پیش‌فرضِ بالا لاتین‌اول است چون بیشترِ
   دراپ‌داون‌های برنامه محتوای لاتین دارند («1920×1080»، «144 fps»، نامِ میکروفون)؛ اگر آن را
   سراسری برعکس کنیم همان‌ها با فونت فارسی رندر می‌شوند. پس این حالت با o.fa فعال می‌شود. */
.pg-dd.fa .pg-ddb,
.pg-dd.fa .pg-ddm>button{font-family:var(--font-persian);}
/* نبودِ جا در پایین ⇒ منو رو به بالا باز می‌شود (ddFit این کلاس را می‌گذارد). */
.pg-dd.up>.pg-ddm{top:auto;bottom:calc(100% + 5px);animation-name:ddInUp;}
@keyframes ddIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}
@keyframes ddInUp{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

/* ══════════ پایداری پینگ (V13) ══════════ */
.ps-orb{position:relative;width:104px;height:104px;flex:none;}
.ps-orb .ring{position:absolute;inset:0;transform:rotate(-90deg);}
.ps-orb .pulse{position:absolute;inset:12px;border-radius:50%;border:1.5px solid var(--gc-success);animation:psPulse 2.6s ease-out infinite;}
.ps-orb.off .pulse{display:none;}
.ps-orb .core{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
@keyframes psPulse{0%{transform:scale(.86);opacity:.6}100%{transform:scale(1.18);opacity:0}}
/* توگلِ پایداری پینگ — هم‌زبانِ بقیهٔ توگل‌ها شد: روشن = قرص سمتِ چپ (سمتِ «پایانِ» RTL).
   پیش‌تر تنها توگلِ برنامه بود که برعکس حرکت می‌کرد (روشن = راست) و easing و مدتش هم فرق
   داشت. حالا دقیقاً همان ۰٫۲۸s و همان cubic-bezierِ قرصِ سگمنت. */
.ps-sw{width:48px;height:27px;border-radius:999px;border:none;cursor:pointer;position:relative;flex:none;background:linear-gradient(90deg,var(--gc-violet),#8a63ff);box-shadow:0 0 0 1px var(--gc-violet) inset,0 4px 16px rgba(var(--gc-violet-rgb),.4);transition:background .28s ease,box-shadow .28s ease;}
.ps-sw i{position:absolute;top:3px;right:3px;width:21px;height:21px;border-radius:50%;background:var(--gc-on-accent);transform:translateX(-21px);box-shadow:0 2px 8px var(--gc-shadow-sm);transition:transform .28s cubic-bezier(.33,.9,.3,1);}
.ps-sw.off{background:var(--gc-sw-off);box-shadow:0 0 0 1px var(--gc-hairline) inset;}
.ps-sw.off i{transform:translateX(0);}

.ps-slider{position:relative;height:34px;margin-top:14px;direction:ltr;}
.ps-slider .track{position:absolute;top:50%;left:0;right:0;height:10px;transform:translateY(-50%);border-radius:7px;background:var(--gc-elevated);box-shadow:inset 0 0 0 1px var(--gc-hairline);overflow:hidden;}
.ps-slider .usage{position:absolute;top:0;bottom:0;left:0;border-radius:7px;transition:width .5s ease;}
.ps-slider .usage.up{background:linear-gradient(90deg,var(--gc-up-soft),var(--gc-up));}
.ps-slider .usage.dn{background:linear-gradient(90deg,var(--gc-dn-soft),var(--gc-dn));}
.ps-slider input[type=range]{position:absolute;top:0;left:0;width:100%;height:100%;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;}
.ps-slider input[type=range]:focus{outline:none;}
.ps-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gc-on-accent);border:3px solid var(--gc-violet);box-shadow:0 0 0 4px rgba(var(--gc-violet-rgb),.22),0 3px 10px var(--gc-shadow-md);cursor:grab;transition:box-shadow .12s,transform .12s;}
.ps-slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 6px rgba(var(--gc-violet-rgb),.26),0 3px 10px var(--gc-shadow-md);}
.ps-slider input[type=range]:active::-webkit-slider-thumb{cursor:grabbing;transform:scale(1.12);box-shadow:0 0 0 8px rgba(var(--gc-violet-rgb),.3);}
.ps-capnum{width:auto;min-width:48px;max-width:96px;background:transparent;border:none;outline:none;font-family:var(--font-latin);font-size:38px;font-weight:800;color:var(--gc-text);letter-spacing:-.02em;padding:0;text-align:right;direction:ltr;border-bottom:2px solid transparent;transition:border-color .15s,color .15s;}
.ps-capnum:hover{border-bottom-color:var(--gc-hairline-strong);}
.ps-capnum:focus{border-bottom-color:var(--gc-violet);color:var(--gc-violet-ink2);}
.ps-blk{flex:none;font-family:var(--font-persian);font-size:11.5px;font-weight:700;padding:8px 16px;border-radius:8px;cursor:pointer;background:transparent;border:1px solid var(--gc-hairline-strong);color:var(--gc-text-mid);transition:all .15s;}
.ps-blk:hover{border-color:var(--gc-danger);color:var(--gc-danger-ink);}
.ps-blk:active{transform:scale(.95);}
.ps-blk.on{background:var(--gc-danger-dim);border-color:var(--gc-danger);color:var(--gc-danger-ink);}
.ps-ubar{height:4px;border-radius:3px;background:var(--gc-elevated);overflow:hidden;margin-top:8px;display:flex;gap:2px;}
.ps-ubar i{display:block;height:100%;border-radius:3px;transition:width .5s;}
.ps-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:stretch;}
.ps-hgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
@container (max-width:720px){.ps-cols{grid-template-columns:1fr;}.ps-hgrid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){.ps-orb .pulse{animation:none}}

/* ══════════ کارتِ یک‌بارهٔ تبِ اورلی («چرا روی Fullscreen دیده نمی‌شه») ══════════
   فقط اولین ورود به تب نشان داده می‌شود؛ «متوجه شدم» فلگِ OverlayIntroSeen را ذخیره
   می‌کند. راهِ برگشت = آیکنِ ‎.ovi-help کنارِ عنوانِ «فعال‌سازی Overlay». */
/* 🔴 پوششِ باز/بسته‌شدن جداست از خودِ کارت. دلیل: کارت انیمیشنِ حلقهٔ بی‌نهایتِ خودش را
   دارد و اگر باز/بسته‌شدن هم روی همان المان می‌نشست، شورتهندِ animation یکی دیگری را
   پاک می‌کرد. margin-bottom هم اینجاست تا موقعِ جمع‌شدن با ارتفاع جمع شود. */
.ovi-wrap{overflow:hidden;margin-bottom:22px;}
.ovi{position:relative;background:var(--gc-surface);border:1px solid rgba(var(--gc-violet-rgb),.5);
  border-radius:14px;padding:18px 20px 16px;overflow:hidden;
  animation:oviRing 2.6s ease-in-out infinite;}
/* ورود و خروج. ارتفاعِ واقعی موقعِ کلیک اندازه گرفته و با --oviH تزریق می‌شود، چون
   max-height ثابتِ بزرگ باعث می‌شود منحنیِ حرکت زودتر «تمام» شود و پرش حس شود. */
@keyframes oviIn{
  from{opacity:0;transform:translateY(-10px);max-height:0;margin-bottom:0;}
  to  {opacity:1;transform:none;max-height:var(--oviH,1200px);margin-bottom:22px;}
}
@keyframes oviOut{
  from{opacity:1;transform:none;max-height:var(--oviH,1200px);margin-bottom:22px;}
  to  {opacity:0;transform:translateY(-10px);max-height:0;margin-bottom:0;}
}
@keyframes oviRing{
  0%,100%{box-shadow:0 0 0 0 rgba(var(--gc-violet-rgb),.30),0 0 22px -6px rgba(var(--gc-violet-rgb),.35);}
  50%    {box-shadow:0 0 0 5px rgba(var(--gc-violet-rgb),0),0 0 36px -4px rgba(var(--gc-violet-rgb),.55);}
}
/* برقِ عبوری: تایمینگ linear (سرعتِ ثابت) و بیرونِ بازهٔ عبور opacity:0، وگرنه هم وسطِ راه
   کُند می‌شود هم تهِ لوپ جلوی چشم می‌پرد. left:0 صریح، تا نقطهٔ شروع در RTL قطعی باشد. */
.ovi::after{content:'';position:absolute;top:0;bottom:0;left:0;width:52%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(var(--gc-violet-rgb),.18),transparent);
  animation:oviSheen 7s linear infinite;}
@keyframes oviSheen{
  0%      {transform:translateX(-100%);opacity:0;}
  3%      {opacity:.85;}
  17%     {opacity:.85;}
  20%,100%{transform:translateX(200%);opacity:0;}
}
.ovi-eyebrow{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  color:var(--gc-violet-ink2);background:var(--gc-violet-dim);border:1px solid rgba(var(--gc-violet-rgb),.45);
  border-radius:999px;padding:3px 11px;margin-bottom:11px;}
.ovi-h{font-size:16px;font-weight:800;color:var(--gc-text);line-height:1.6;margin-bottom:9px;}
.ovi-bd{font-size:13px;color:var(--gc-text-mid);line-height:2.15;}
.ovi-bd p{margin:0 0 7px;}
.ovi-kw{font-family:var(--font-latin);font-weight:700;color:var(--gc-violet-ink2);}
.ovi-kw.ok{color:var(--gc-success-ink);}
/* اسمِ خودِ قابلیت است، نه مقدارِ یک تنظیم — فقط فونتِ لاتین، بدونِ رنگِ کلیدواژه. */
.ovi-lt{font-family:var(--font-latin);font-weight:700;}
.ovi-ok{width:100%;margin-top:16px;font-family:var(--font-persian);font-size:14px;font-weight:800;
  color:var(--gc-on-accent);background:var(--gc-violet);border:none;border-radius:10px;padding:13px 26px;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
  box-shadow:0 4px 14px -4px rgba(var(--gc-violet-rgb),.7);transition:transform .12s,filter .12s;}
.ovi-ok:hover{filter:brightness(1.1);}
.ovi-ok:active{transform:translateY(1px);}

/* ── نمایشِ زنده ──
   🔴 max-width لازم است: بدونِ آن، aspect-ratio:16/9 روی عرضِ کاملِ تب (~۱۴۵۰px) یک تصویرِ
   ۱۴۵۰×۸۱۵ می‌سازد که کلِ صفحه را می‌بلعد. نصفِ عرض هم چشم را اذیت نمی‌کند و هم همان
   نسبتی است که ماک‌آپ روی آن تایید شد (HUD ≈ ۳۰٪ عرضِ کادر). وسط‌چین تا زیرِ متنِ
   تمام‌عرض بالای آن، عمدی به‌نظر برسد نه بریده. */
.ovi-scr{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;margin-top:14px;
  max-width:50%;margin-inline:auto;
  border:1px solid var(--gc-om-line);background:linear-gradient(170deg,#241a3d,#3a2560 42%,#150f26 100%);}
.ovi-sky{position:absolute;inset:0;background:
  radial-gradient(120% 80% at 78% 12%,rgba(254,219,41,.20),transparent 55%),
  radial-gradient(90% 60% at 18% 92%,rgba(103,52,255,.35),transparent 60%);}
.ovi-sun{position:absolute;top:13%;left:74%;width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle,rgba(254,219,41,.85),rgba(254,219,41,0) 68%);}
.ovi-ridge{position:absolute;left:0;right:0;bottom:0;height:44%;
  background:linear-gradient(180deg,rgba(8,6,16,.15),rgba(8,6,16,.78));
  clip-path:polygon(0 42%,14% 20%,27% 46%,42% 14%,58% 44%,73% 24%,88% 50%,100% 30%,100% 100%,0 100%);}

/* HUD — بازسازیِ طرح۲ (کارتی) از روی OverlayService. dir=ltr واجب است: اورلیِ واقعی
   چپ‌به‌راست است و داخلِ این سندِ RTL هر flexِ space-between آینه می‌شود (عددِ FPS می‌رود
   راست و 1%low می‌رود چپ). اندازه عمداً ~۲برابرِ نسبتِ واقعی، وگرنه خوانا نیست. */
.ovi-hud{position:absolute;top:11px;left:11px;width:216px;direction:ltr;
  font-family:var(--font-latin);background:rgba(9,9,12,.88);
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:9px 11px;
  font-variant-numeric:tabular-nums;
  animation:oviHudIn 8s ease-in-out infinite,oviHudGlow 8s ease-in-out infinite;}
.ovi-hud .hd{display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.ovi-hud .fb{display:flex;align-items:baseline;gap:5px;}
.ovi-hud .fn{font-size:30px;font-weight:800;line-height:1;color:#4ee3aa;text-shadow:0 0 14px rgba(78,227,170,.35);}
.ovi-hud .fu{font-size:8px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.62);}
.ovi-hud .st{display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.ovi-hud .sr{display:flex;align-items:baseline;gap:4px;}
.ovi-hud .sv{font-size:10.5px;font-weight:800;color:#fff;line-height:1.1;}
.ovi-hud .sl{font-size:7px;font-weight:700;letter-spacing:.06em;color:rgba(255,255,255,.55);}
.ovi-hud .sp{display:flex;align-items:flex-end;gap:1.5px;height:26px;margin-top:8px;}
.ovi-hud .sp i{flex:1;border-radius:2px 2px 0 0;display:block;}
.ovi-hud .bd{display:grid;grid-template-columns:1fr 1fr;gap:0 13px;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(255,255,255,.14);}
.ovi-hud .gp+.gp{margin-top:7px;}
.ovi-hud .gh{font-size:7.5px;font-weight:800;letter-spacing:.1em;padding-bottom:3px;margin-bottom:5px;
  border-bottom:1px solid rgba(255,255,255,.13);}
.ovi-hud .it{margin-bottom:5px;}
.ovi-hud .ir{display:flex;align-items:baseline;justify-content:space-between;gap:5px;}
.ovi-hud .il{font-size:7.5px;font-weight:500;color:rgba(255,255,255,.72);}
.ovi-hud .iv{font-size:9.5px;font-weight:800;color:#fff;}
.ovi-hud .iu{font-size:7px;font-weight:700;margin-inline-start:2px;}
.ovi-hud .tk{height:3px;border-radius:2px;background:rgba(255,255,255,.13);margin-top:3px;overflow:hidden;}
.ovi-hud .fl{height:100%;border-radius:2px;}

.ovi-setbar{position:absolute;left:11px;bottom:11px;display:flex;align-items:center;gap:8px;
  background:rgba(8,8,10,.78);border:1px solid var(--gc-om-line);border-radius:8px;padding:6px 10px;}
.ovi-setbar .lb{font-size:10px;font-weight:700;color:rgba(255,255,255,.60);}
.ovi-vbox{position:relative;min-width:78px;height:20px;}
.ovi-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-latin);font-size:10.5px;font-weight:700;border-radius:5px;white-space:nowrap;}
.ovi-val.fs{color:rgba(255,255,255,.85);background:rgba(255,255,255,.10);animation:oviValFs 8s ease-in-out infinite;}
.ovi-val.bl{color:#0b0910;background:#4ee3aa;animation:oviValBl 8s ease-in-out infinite;}
.ovi-stat{position:absolute;right:11px;bottom:11px;display:flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:800;border-radius:999px;padding:4px 11px;
  background:rgba(8,8,10,.78);white-space:nowrap;}
.ovi-stat.no{color:rgba(255,255,255,.66);border:1px solid var(--gc-om-line);animation:oviStatNo 8s ease-in-out infinite;}
.ovi-stat.yes{color:#4ee3aa;border:1px solid rgba(78,227,170,.6);animation:oviStatYes 8s ease-in-out infinite;}

/* تایم‌لاینِ ۸ ثانیه: ۰→۲٫۶ Fullscreen و اورلی نیست · ۲٫۶→۳٫۴ گزینه عوض می‌شود ·
   ۳٫۴→۷٫۴ اورلی با هاله می‌آید · ۷٫۴→۸ محو و برگشت. */
@keyframes oviHudIn{
  0%,40%  {opacity:0;transform:translateY(-8px) scale(.955);}
  46%     {opacity:1;transform:translateY(0) scale(1.035);}
  50%,92% {opacity:1;transform:translateY(0) scale(1);}
  100%    {opacity:0;transform:translateY(-8px) scale(.955);}
}
@keyframes oviHudGlow{
  0%,40%,100%{box-shadow:0 0 0 0 rgba(78,227,170,0);}
  47%        {box-shadow:0 0 0 3px rgba(78,227,170,.35),0 0 28px 2px rgba(78,227,170,.5);}
  62%,92%    {box-shadow:0 0 0 0 rgba(78,227,170,0),0 0 16px 0 rgba(78,227,170,.22);}
}
@keyframes oviValFs {0%,32%{opacity:1;transform:translateY(0);}40%,100%{opacity:0;transform:translateY(9px);}}
@keyframes oviValBl {0%,32%{opacity:0;transform:translateY(-9px);}40%,92%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-9px);}}
@keyframes oviStatNo {0%,32%{opacity:1;}38%,100%{opacity:0;}}
@keyframes oviStatYes{0%,44%{opacity:0;}50%,92%{opacity:1;}100%{opacity:0;}}

/* ── آیکنِ راهنما (راهِ همیشگیِ برگشت) ──
   یک دایره فقط (قابِ خودِ دکمه) و «?» به‌صورتِ حرفِ واقعیِ Poppins؛ نسخهٔ اولْ یک SVG با
   دایرهٔ دوم داشت که «؟» را وسطِ دو حلقه گم می‌کرد. */
.ovi-help{width:27px;height:27px;flex:none;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;padding:0;cursor:pointer;
  font-family:var(--font-latin);font-size:15px;font-weight:700;line-height:1;
  background:var(--gc-violet);border:none;color:var(--gc-on-accent);
  box-shadow:0 2px 8px -2px rgba(var(--gc-violet-rgb),.8);transition:filter .14s,box-shadow .14s;}
.ovi-help:hover{filter:brightness(1.12);}
.ovi-help span{transform:translateY(-.5px);}
/* تا کارت بسته می‌شود سه بار نبض می‌زند: چشمِ کسی که اشتباهی زده، دنبالِ کارتِ در حالِ
   جمع‌شدن پایین می‌آید و همان‌جا راهِ برگشت را می‌بیند. فقط box-shadow/scale — رنگ را
   دست نمی‌زند تا با حالتِ خودِ دکمه نجنگد. */
@keyframes oviPing{
  0%  {box-shadow:0 0 0 0 rgba(var(--gc-violet-rgb),.6);transform:scale(1);}
  60% {box-shadow:0 0 0 9px rgba(var(--gc-violet-rgb),0);transform:scale(1.12);}
  100%{box-shadow:0 0 0 0 rgba(var(--gc-violet-rgb),0);transform:scale(1);}
}
.ovi-help.ping{animation:oviPing 1.1s ease-out 3;}

/* «کاهش حرکت» ویندوز ⇒ همه‌چیز روی حالتِ آخر (اورلیِ روشن) قفل، نه صفحهٔ خالی. */
@media (prefers-reduced-motion:reduce){
  .ovi,.ovi::after,.ovi-wrap,.ovi-hud,.ovi-val,.ovi-stat,.ovi-help.ping{animation:none;}
  .ovi-val.fs,.ovi-stat.no{opacity:0;}
  .ovi-val.bl,.ovi-stat.yes{opacity:1;}
  .ovi-hud{opacity:1;transform:none;}
}

/* ═══════════════ سطح پایداری کارت‌گرافیک (مرحله ۱۷) ═══════════════
   طرحِ تاییدشده در `Design/Stability Level Switch (mockup).html` — آن فایل سندِ طراحی است.
   چهار قاعده‌ای که مالک صریحاً خواست و نباید بی‌صدا برگردند:
     ۱) کاملاً تخت. نه گرادیان، نه سایهٔ برجسته، نه های‌لایتِ داخلی.
     ۲) هیچ بزرگ‌نمایی/تغییرِ اندازه‌ای روی محتوای گزینه‌ها، نه با هاور نه موقعِ تعویض.
     ۳) هر سه چراغِ «فشار روی کارت» هم‌اندازه.
     ۴) عرضِ ستون‌های نتیجه ثابت — وگرنه با هر تعویضِ سطح، بلوکِ کناری چند پیکسل می‌لرزید.
   یک ردیف است، نه دو: عنوان و نتیجه‌ها راست، کنترل چسبیده به چپ، فاصله‌ها همه ۲۰px ثابت. */
/* 🔴 nowrap عمدی است. با wrap، شکستنِ خط بر اساسِ flex-basisِ ریل (۴۳۰px) تصمیم گرفته
   می‌شود — یعنی **قبل از** این‌که اجازهٔ کوچک‌شدن پیدا کند — و کلِ کنترل به خطِ دوم
   می‌پرید، همان دو-ردیفی که قرار بود حذف شود. با nowrap ریل تا min-width کوتاه می‌آید. */
.gc-lvl{--acc:var(--gc-violet-ink3);--accRgb:var(--gc-violet-rgb);
  display:flex;align-items:center;gap:20px;flex-wrap:nowrap;
  border:1px solid var(--gc-hairline);border-radius:14px;padding:14px 16px;
  background:var(--gc-inset);margin-bottom:12px;}
.gc-lvl[data-v="1"]{--acc:var(--gc-success);--accRgb:var(--gc-success-rgb);}
.gc-lvl[data-v="3"]{--acc:var(--gc-gold);--accRgb:var(--gc-gold-rgb);}

.gc-lvl .lvl-title{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:800;
  white-space:nowrap;}
.gc-lvl .lvl-tag{font-size:10px;font-weight:700;color:var(--gc-text-low);
  border:1px solid var(--gc-hairline);border-radius:999px;padding:2px 9px;}
.gc-lvl .lvl-spin{width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid rgba(var(--accRgb),.28);border-top-color:var(--acc);
  animation:lvlSpin .7s linear infinite;}
@keyframes lvlSpin{to{transform:rotate(360deg);}}

.gc-lvl .lvl-out{display:flex;align-items:center;gap:20px;transition:opacity .35s ease;}
.gc-lvl.testing .lvl-out{opacity:.4;}
.gc-lvl .lvl-cell{display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  width:82px;flex:none;}
.gc-lvl .lvl-cell u{text-decoration:none;font-size:10.5px;color:var(--gc-text-low);letter-spacing:.2px;}
.gc-lvl .lvl-cell b{font-family:var(--font-latin);font-size:19px;font-weight:700;color:var(--acc);
  direction:ltr;line-height:1;transition:color .45s ease;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;}
.gc-lvl .lvl-cell b i{font-style:normal;font-size:11px;font-weight:600;margin-inline-start:1px;}
.gc-lvl .lvl-roll{display:inline-block;animation:lvlRoll .42s cubic-bezier(.2,.8,.2,1);}
@keyframes lvlRoll{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.gc-lvl .lvl-press{display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  width:92px;flex:none;}
.gc-lvl .lvl-press u{text-decoration:none;font-size:10.5px;color:var(--gc-text-low);white-space:nowrap;}
.gc-lvl .lvl-bars{display:flex;flex-direction:row-reverse;gap:4px;align-items:center;}
.gc-lvl .lvl-bars i{width:26px;height:8px;border-radius:4px;background:var(--gc-hairline);
  transition:background .4s ease;}
.gc-lvl .lvl-bars i.f{background:var(--acc);}

/* 🔴 حاشیهٔ خودکار عمدی است: کنترل به لبهٔ چپ می‌چسبد و فاصله‌اش تا «فشار روی کارت» باز
   می‌ماند. لرزشی که یک‌بار دیده شد از این حاشیه نبود، از عرضِ متغیرِ خودِ اعداد بود — که با
   عرضِ ثابتِ ستون‌ها و ارقامِ هم‌عرض حل شد. */
/* ⚠ min-width عمداً پایین است: عرضِ واقعیِ پنلِ گیمینگ از ماک‌آپ کمتر است و با ۳۵۲px
   کلِ ردیف به خطِ دوم می‌پرید — یعنی دقیقاً همان دو-ردیفی که قرار بود حذف شود. */
.gc-lvl .lvl-rail{position:relative;flex:0 1 430px;min-width:296px;margin-inline-start:auto;
  height:58px;border-radius:12px;
  background:var(--gc-inset-2);border:1px solid var(--gc-hairline);padding:4px;
  display:flex;overflow:hidden;}
.gc-lvl .lvl-notch{position:absolute;top:14px;bottom:14px;width:1px;background:var(--gc-hairline);
  pointer-events:none;}
.gc-lvl .lvl-thumb{position:absolute;top:4px;bottom:4px;width:calc((100% - 8px)/3);border-radius:9px;
  background:rgba(var(--accRgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--accRgb),.55);
  transition:right .5s cubic-bezier(.33,1.2,.4,1),background .4s ease,box-shadow .4s ease;}
.gc-lvl .lvl-thumb::after{content:'';position:absolute;inset:auto 14px 0 14px;height:2px;
  border-radius:2px;background:var(--acc);transition:background .4s ease;}
.gc-lvl[data-v="1"] .lvl-thumb{right:4px;}
.gc-lvl[data-v="2"] .lvl-thumb{right:calc(4px + (100% - 8px)/3);}
.gc-lvl[data-v="3"] .lvl-thumb{right:calc(4px + 2*(100% - 8px)/3);}

.gc-lvl .lvl-rail button{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;font-size:11.5px;font-weight:700;
  color:var(--gc-text-low2);cursor:pointer;background:none;border:0;border-radius:9px;
  font-family:var(--font-persian);transition:color .3s ease;}
.gc-lvl .lvl-rail button svg{width:19px;height:19px;flex:none;overflow:visible;}
.gc-lvl .lvl-rail button:hover{color:var(--gc-text-mid);}
.gc-lvl .lvl-rail button.on{color:var(--acc);font-weight:800;}
.gc-lvl .lvl-rail button[disabled]{cursor:not-allowed;color:var(--gc-text-low);opacity:.42;}
/* تنها حرکتِ آیکن‌ها: چرخشِ عقربه به وسط. چرخش است، نه تغییرِ اندازه. */
.gc-lvl .lvl-needle{transform-origin:12px 16.8px;transform:rotate(-52deg);
  transition:transform .55s cubic-bezier(.33,1.4,.4,1);}
.gc-lvl .lvl-rail button.on .lvl-needle{transform:rotate(0deg);}

/* نشانِ ریزِ روی خودِ گزینه، به‌جای یک پاراگرافِ توضیح زیرِ کنترل.
   ⚠ SVGِ تک‌رنگ و نه ایموجی: ایموجی رنگِ خودش را دارد و در ۱۲px به یک لکه تبدیل می‌شود. */
.gc-lvl .lvl-badge{position:absolute;top:6px;left:8px;width:12px;height:12px;line-height:0;
  color:var(--gc-text-low);}
.gc-lvl .lvl-badge svg{width:12px;height:12px;}

.gc-lvl.testing .lvl-rail{pointer-events:none;}
.gc-lvl.testing .lvl-thumb{background:rgba(var(--accRgb),.10);}
.gc-lvl .lvl-sweep{position:absolute;inset:4px;border-radius:9px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(var(--accRgb),.30),transparent);
  transform:translateX(-100%);}
.gc-lvl.testing .lvl-sweep{opacity:1;animation:lvlSweep 1.15s linear infinite;}
@keyframes lvlSweep{to{transform:translateX(100%);}}

@media (prefers-reduced-motion:reduce){
  .gc-lvl .lvl-thumb,.gc-lvl .lvl-needle{transition:none;}
  .gc-lvl .lvl-roll,.gc-lvl .lvl-sweep,.gc-lvl .lvl-spin{animation:none;}
}

/* ═══════════════ کارتِ اشتراکِ داشبورد — «بال شاه‌پَر» ═══════════════
   طرحِ تاییدشده: phoenix_guardian/SUBCARD_MOCKUP.html (۸ مرداد ۱۴۰۵).
   هر شش حالتِ control.js یک اسکلت دارند: سرلوحه · عدد · بال · زیرنویس، و همه
   دقیقا ۱۸۰ پیکسل قد می‌گیرند تا عوض‌شدنِ وضعیت پرشِ چیدمانی نسازد.
   حالتِ «بدون اشتراک» عمدا همین کارت است ولی خاموش، نه یک کارتِ دیگر. */
/* ⚠ display:flex + .sub-in{flex:1} اجباری است: کارت در گریدِ داشبورد stretch می‌شود و
   اگر بدنه قدِ کارت را پر نکند، نوارِ خاکستریِ padding:1px (که نقشِ بوردر را بازی می‌کند)
   ته کارت به یک باندِ ضخیم تبدیل می‌شود. */
.sub{position:relative;display:flex;border-radius:14px;padding:1px;overflow:hidden;
  isolation:isolate;background:var(--gc-hairline);}
.sub .sub-in{position:relative;z-index:3;flex:1;min-width:0;border-radius:13px;padding:17px;
  overflow:hidden;background:var(--gc-surface);min-height:150px;display:flex;flex-direction:column;}

/* لبهٔ زنده: یک «دنباله‌دار» که دورِ قاب می‌چرخد. مخروطیِ عمدتا شفاف با سه کمانِ روشن،
   نه رنگین‌کمانِ کامل — آن یکی زرق‌وبرقش زیاد بود. */
.sub .sub-edge{position:absolute;inset:-150%;z-index:1;pointer-events:none;
  background:conic-gradient(from 0deg,transparent 0 52%,
    rgba(var(--gc-success-rgb),.55) 62%,rgba(var(--gc-violet-rgb),.95) 72%,
    rgba(var(--gc-gold-rgb),.9) 80%,transparent 90% 100%);
  animation:shOrbit 7s linear infinite;}
@keyframes shOrbit{to{transform:rotate(360deg);}}

/* هالهٔ پس‌زمینه: همان دو بلابِ رادیالِ پوستهٔ شاه‌پَر در تبِ گیمینگ، ولی متحرک */
.sub .sub-gA,.sub .sub-gB{position:absolute;border-radius:50%;filter:blur(34px);
  pointer-events:none;z-index:0;}
.sub .sub-gA{width:210px;height:210px;top:-96px;inset-inline-start:-54px;
  background:rgba(var(--gc-violet-rgb),.42);animation:shDriftA 11s ease-in-out infinite;}
.sub .sub-gB{width:170px;height:170px;bottom:-92px;inset-inline-end:-40px;
  background:rgba(var(--gc-success-rgb),.22);animation:shDriftB 13s ease-in-out infinite;}
@keyframes shDriftA{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(26px,16px) scale(1.14);}}
@keyframes shDriftB{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-22px,-14px) scale(1.1);}}

/* برقِ عبوری: هر ۷ ثانیه یک نوارِ نورِ مورب از روی کارت رد می‌شود */
.sub .sub-sheen{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.sub .sub-sheen::before{content:'';position:absolute;top:-60%;bottom:-60%;width:70px;left:-90px;
  background:linear-gradient(90deg,transparent,var(--gc-tint-2),transparent);
  transform:rotate(14deg);animation:shSweep 7s cubic-bezier(.4,0,.3,1) infinite;}
@keyframes shSweep{0%{left:-90px;}55%,100%{left:118%;}}

/* ⚠ «ذراتِ بالارونده» (پنج نقطهٔ ریزِ طلایی) اینجا بود و حذف شد — مالک، ۸ مرداد:
   روی زمینهٔ تیره به‌جای جرقه، یک نقطهٔ زردِ ناگهانی دیده می‌شد که روشن و خاموش می‌شد. */

/* سرلوحه: نشانِ سه‌پَر + لوگوتایپ · چیپِ وضعیت */
.sub .sub-hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
.sub .sub-lock{display:flex;align-items:center;gap:9px;min-width:0;}
.sub .sub-mark{width:30px;height:30px;flex:none;border-radius:9px;border:1px solid transparent;
  background:linear-gradient(140deg,var(--gc-prem-1),var(--gc-prem-2)) padding-box,
    conic-gradient(from 210deg,var(--gc-gold),var(--gc-violet),var(--gc-success),var(--gc-gold)) border-box;
  display:flex;align-items:flex-end;justify-content:center;gap:2px;padding-bottom:6px;}
.sub .sub-mark span{width:4px;border-radius:99px;transform-origin:bottom center;}
.sub .sub-mark .f1{height:9px;background:var(--gc-success-ink);--rot:16deg;transform:rotate(16deg);}
.sub .sub-mark .f2{height:14px;background:var(--gc-violet-ink3);--rot:0deg;}
.sub .sub-mark .f3{height:9px;background:var(--gc-gold);--rot:-16deg;transform:rotate(-16deg);}
.sub.alive .sub-mark .f1{animation:shBreath 3.4s ease-in-out infinite;}
.sub.alive .sub-mark .f2{animation:shBreath 3.4s ease-in-out .18s infinite;}
.sub.alive .sub-mark .f3{animation:shBreath 3.4s ease-in-out .36s infinite;}
@keyframes shBreath{0%,100%{transform:scaleY(1) rotate(var(--rot,0deg));}
                    50%{transform:scaleY(1.22) rotate(var(--rot,0deg));}}
.sub .sub-word{font-family:var(--font-latin);font-size:11.5px;font-weight:700;letter-spacing:.15em;
  line-height:1.3;background:linear-gradient(90deg,var(--gc-gold),var(--gc-violet-ink3) 60%,var(--gc-success-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.sub .sub-chip{font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;
  white-space:nowrap;flex:none;}

/* اسلاتِ عدد */
.sub .sub-fig{display:flex;align-items:center;gap:10px;margin-bottom:9px;}
.sub .sub-numgrp{display:flex;align-items:baseline;gap:7px;min-width:0;}
.sub .sub-num{font-size:36px;font-weight:800;line-height:1;letter-spacing:-.01em;}
.sub .sub-unit{font-size:13px;color:var(--gc-text-mid);}
/* ۱۶ و نه ۱۸: «در حال اتصال به سرور» در ۱۸ توی کارتِ ۲۹۰ پیکسلی دو خط می‌شد */
.sub .sub-title{font-size:16px;font-weight:800;color:var(--gc-text);line-height:1.4;}
.sub.alive .sub-num.brand{
  background:linear-gradient(120deg,var(--gc-gold),var(--gc-violet-ink3) 55%,var(--gc-success-ink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shNumPulse 3.6s ease-in-out infinite;}
@keyframes shNumPulse{0%,100%{filter:drop-shadow(0 0 12px rgba(var(--gc-violet-rgb),.35));}
                      50%{filter:drop-shadow(0 0 22px rgba(var(--gc-gold-rgb),.42));}}

/* ── «بال» = نوارِ پیشرفت ──
   ⚠ SVG است نه ۴۴ تا div — دلیلش در control.js کنارِ subWing نوشته شده: با div
   عرضِ پینت‌شدهٔ تیغه‌ها روی DPRهای کسری (۱.۲۵) بین ۱۲ و ۱۳ پیکسل بالا و پایین می‌شد.
   ⚠ کرسی روی ۳۶ است و بلندترین تیغه ۳۲: موجِ scaleY(1.1) تا ۳۵.۲ می‌رود و داخل می‌ماند.
   قدِ ۳۷ = ۳۶ کرسی + ۱ خطِ کف. */
.sub .sub-wing{display:block;width:100%;height:37px;overflow:visible;}
.sub .sub-wing .sub-base{fill:var(--gc-hairline);}
/* ارتفاعِ کاملِ هر تیغه در --h و رنگش در --c؛ حالت‌ها فقط همین دو را دستکاری می‌کنند.
   y و height از CSS می‌آیند (geometry properties) نه از attribute، تا transition بگیرند. */
.sub .sub-wing rect{y:calc(36px - var(--h));height:var(--h);rx:2px;fill:var(--gc-tint-1);
  transform-box:fill-box;transform-origin:bottom center;
  transition:height .45s cubic-bezier(.33,.9,.3,1),y .45s cubic-bezier(.33,.9,.3,1),
             fill .45s ease,opacity .45s ease;}
.sub.alive .sub-wing rect.on{fill:var(--c);animation:shRipple 2.8s ease-in-out infinite;}
@keyframes shRipple{0%,100%{transform:scaleY(1);}45%{transform:scaleY(1.1);}}
/* هالهٔ بال: یک فیلتر روی کلِ گروه، نه ۴۴ سایهٔ جدا (۴۴ سطحِ رندر روی
   WebView2ی که همیشه باز است). تیغه‌های خاموش تقریبا شفاف‌اند پس هاله‌شان دیده نمی‌شود. */
.sub.alive .sub-wing .wg{filter:drop-shadow(0 0 5px rgba(var(--gc-violet-rgb),.5));}
/* حالتِ سوم: اشتراک زنده است ولی طولِ پلن را نداریم ⇒ رنگِ برند با شفافیتِ کم.
   نه پُر (که دروغ بود) نه خاکستریِ مرده (که دروغِ برعکس بود). */
.sub.alive .sub-wing.unknown rect{fill:var(--c);opacity:.2;}
.sub.alive .sub-wing.unknown .wg{filter:none;}

.sub .sub-cap{font-size:11.5px;color:var(--gc-text-low);margin-top:8px;}
.sub .sub-foot{font-size:11.5px;color:var(--gc-text-low2);line-height:1.8;margin-top:8px;}

/* دکمهٔ خرید/تمدید — همان دکمهٔ طلاییِ شاه‌پَر (shBuyBtn تبِ گیمینگ) */
.sub .sub-buy{margin-inline-start:auto;flex:none;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-persian);font-size:12.5px;font-weight:800;color:#1a1200;
  border:none;border-radius:10px;padding:8px 15px;cursor:pointer;
  background:linear-gradient(120deg,var(--gc-gold),#ffc659);
  box-shadow:0 6px 22px rgba(var(--gc-gold-rgb),.25);
  transition:transform .16s ease,box-shadow .16s ease;}
.sub .sub-buy:hover{transform:translateY(-1px);box-shadow:0 9px 28px rgba(var(--gc-gold-rgb),.4);}
.sub .sub-buy .bm{display:inline-flex;align-items:flex-end;gap:1.5px;}
.sub .sub-buy .bm i{width:3px;border-radius:99px;background:#1a1200;display:block;}
.sub .sub-buy .bm i:nth-child(1){height:6px;opacity:.55;transform:rotate(16deg);}
.sub .sub-buy .bm i:nth-child(2){height:10px;}
.sub .sub-buy .bm i:nth-child(3){height:6px;opacity:.55;transform:rotate(-16deg);}

/* ── حالتِ خاموش: همان کارت، ولی مرده ── */
.sub.dead{background:var(--gc-hairline-strong);}
.sub.dead .sub-in{background:linear-gradient(160deg,var(--gc-tint-0),transparent 60%),var(--gc-surface);}
.sub.dead .sub-mark{filter:grayscale(1);opacity:.45;
  background:linear-gradient(140deg,var(--gc-elevated),var(--gc-surface)) padding-box,
    linear-gradient(140deg,var(--gc-hairline-strong),var(--gc-hairline)) border-box;}
.sub.dead .sub-word{background:none;color:var(--gc-text-low);-webkit-text-fill-color:currentColor;}
/* بالِ تاشده: یک‌سومِ ارتفاع و خاکستری. خودِ همین تاشدگی جای خالی را می‌رساند. */
.sub.dead .sub-wing rect{y:calc(36px - var(--h) * .34);height:calc(var(--h) * .34);
  fill:var(--gc-tint-1);opacity:.55;}
/* پرِ افتاده — تنها حرکتِ کارتِ خاموش، و عمدا حرکتِ ریزش */
.sub .sub-fall{position:absolute;z-index:2;width:5px;height:13px;border-radius:99px;
  background:var(--gc-tint-3);top:-14px;inset-inline-end:74px;
  animation:shFall 9s ease-in-out infinite;}
@keyframes shFall{0%{transform:translate(0,0) rotate(8deg);opacity:0;}8%{opacity:.5;}
  100%{transform:translate(26px,150px) rotate(150deg);opacity:0;}}
/* دکمهٔ طلایی تنها چیزِ زندهٔ کارت است ⇒ چشم خودبه‌خود همان‌جا می‌رود */
.sub.dead .sub-buy{animation:shBtnBreath 3.2s ease-in-out infinite;}
@keyframes shBtnBreath{0%,100%{box-shadow:0 6px 20px rgba(var(--gc-gold-rgb),.18);}
                       50%{box-shadow:0 8px 30px rgba(var(--gc-gold-rgb),.44);}}

/* هاور: بال یک لحظه باز و رنگی می‌شود، بدون هیچ متنی.
   فقط روی none و expired (کلاسِ tz) — روی «در حال اتصال» عمدا نیست، چون آنجا اصلا
   نمی‌دانیم اشتراکی هست یا نه و تبلیغ‌کردنش ادعای بی‌پشتوانه است. */
.sub.dead.tz:hover .sub-wing rect{y:calc(36px - var(--h));height:var(--h);fill:var(--c);opacity:.9;}

@media (prefers-reduced-motion:reduce){
  .sub,.sub *{animation:none!important;transition:none!important;}
}