/* ═══ فونتِ محلی (مسیر B19) ══════════════════════════════════════
   پیش از این فونت از fonts.googleapis.com می‌آمد و سه هزینه داشت:
     ۱) @import داخلِ CSS بلوکه‌کنندهٔ رندر است — تا جوابِ گوگل نرسد،
        متن با فونتِ fallback کشیده می‌شود و بعد می‌پرد (پرشِ چشمی).
     ۲) هر بارِ بازدید یک رفت‌وبرگشت به سرورِ بیرونی؛ اگر کند یا مسدود
        باشد (تلگرام/فیلتر/قطعی)، کلِ ظاهرِ برنامه معلق می‌ماند.
     ۳) داده‌ی کاربر به یک سرویسِ شخصِ ثالث می‌رود.

   حالا فونت از همان دامنه سرو می‌شود (public/fonts/) — یعنی CDN
   خودِ Cloudflare، بدون درخواستِ شخصِ ثالث.
   نکتهٔ مهم: Vazirmatn متغیر است، پس هر سه فایل هفت وزن را دارند؛
   font-weight یک بازهٔ عددی است نه تک‌مقدار، وگرنه مرورگر هفت بار
   دانلود می‌کند و باز هم وزنِ درست را نمی‌آورد.
   font-display:swap یعنی متن زودتر با فونتِ محلی می‌آید و بعد
   عوض می‌شود — بهتر از متنِ نامرئی (block) یا پرشِ شدید (auto). */
/* عربی/فارسی — شاملِ نیم‌فاصلهٔ U+200C و ی/ک عربی */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/fonts/vazirmatn-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
/* لاتینِ پایه — ارقام و متنِ کوتاهِ انگلیسی (کدِ تسک، ماه) */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/fonts/vazirmatn-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* لاتینِ گسترده — کمتر استفاده می‌شود، پس دیرتر می‌آید */
@font-face{font-family:'Vazirmatn';font-style:normal;font-weight:300 900;font-display:swap;
  src:url('/fonts/vazirmatn-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
/* ═══ ۵-۲۱ لایهٔ توکن (مسیر B) ═══
   یک منبعِ واحد برای رنگ. پیش از این، رنگ‌های مشتق در ۲۵ جایِ
   public/js/pages/*.js هاردکد بودند (#5BE49B، #B3A8FF، #7C6CFF) و
   در CSS هم بی‌نام — پس عوض کردنِ تم یعنی ویرایشِ ۱۳ فایل.
   حالا هر رنگ یک نام دارد و JS همین نام‌ها را می‌خواند (var(--ok)). */
:root{
/* پایه — سطوحِ پس‌زمینه از تیره‌ترین تا کارت */
--bg:#07070D;--surf-1:#0C0C15;--surf-2:#12121D;--surf-3:#181826;
/* متن — چهار سطحِ خوانایی. --dim روی پس‌زمینهٔ کارت ۲٫۵۴:۱ بود
   (زیر آستانهٔ WCAGِ ۴٫۵) ⇒ روشن‌تر شد تا متنِ ثانویه خوانا باشد. */
--ink:#F4F3FF;--mut:#A3A1BD;--dim:#84819F;
/* برند و معنا — رنگِ اصلی و رنگ‌های وضعیت */
--vio:#7C6CFF;--cy:#4FE3C1;--pk:#FF6EC7;--gold:#FFD166;--er:#FF6B6B;
/* رنگ‌های مشتق (۵-۲۱): نسخهٔ روشن‌ترِ هر رنگِ معنایی برای متن روی
   پس‌زمینهٔ تیره. پیش از این در CSS و JS تکرار شده بودند. */
--vio-lt:#B3A8FF;   /* بنفشِ روشن — متنِ روی پس‌زمینهٔ بنفشِ کم‌رنگ */
--ok-lt:#5BE49B;    /* سبزِ روشن — موفق/تأیید */
--er-lt:#FF8A8A;    /* قرمزِ روشن — خطا (خواناتر از --er روی تیره) */
--warn-lt:#FFD98A;  /* طلاییِ روشن — هشدار */
/* ۵-۲۲: متنِ «روی سطحِ برند». در تم تیره سطحِ فعال تیره است ⇒ متن
   سفید. در تم روشن سطحِ فعال روشن است ⇒ متن باید تیره باشد، وگرنه
   کنتراست ۱٫۰۲ می‌شود و متن عملاً نامرئی (باگِ دیده‌شده در تم روشن). */
--on-vio:#fff; --on-vio-bg:linear-gradient(90deg,rgba(124,108,255,.28),rgba(124,108,255,.08));
/* سطوحِ شیشه‌ای و خطوط */
--glass:rgba(255,255,255,.045);--brd:rgba(255,255,255,.09);
/* ۵-۲۲ (مسیر B): توکن‌های وابسته به تم.
   ۴۴ جای rgba خام در این فایل به تیرگی وابسته بودند (سیاه برای سایه،
   سفید برای شیشه/خط) ⇒ با عوض کردن تم همه بی‌اثر می‌شدند. حالا همه
   از این توکن‌ها می‌خوانند و تمِ روشن فقط همین‌ها را بازنویسی می‌کند. */
--shade:0,0,0;            /* رنگِ سایه — تیره: سیاه، روشن: قهوه‌ایِ تیره */
--tint:255,255,255;       /* رنگِ شیشه و خط — تیره: سفید، روشن: مشکی */
--tint-a:0;               /* شدتِ پایهٔ --tint (تمِ تیره) */
--panel:rgba(var(--pal-rgb),.92);/* پس‌زمینهٔ مودال/دراور/منو */
--pal-rgb:18,18,28;       /* نسخهٔ RGB برای ترکیب با alpha */
--shade-1:rgba(var(--shade),.4);--shade-2:rgba(var(--shade),.65);
--shade-3:rgba(var(--shade),.28);--shade-4:rgba(var(--shade),.5);
--hair:rgba(var(--tint),.06);        /* خطِ مویی */
--lift:rgba(var(--tint),.05);        /* hover روی سطر */
--lift-vio:rgba(var(--tint),.05);    /* hover بنفشی */
/* پس‌زمینه‌های وضعیت (پررنگِ کم) — برای پیل‌ها */
--bg-ok:rgba(63,185,80,.12);--bg-run:rgba(79,227,193,.12);--bg-q:rgba(124,108,255,.14);
--bg-wait:rgba(255,209,102,.11);--bg-er:rgba(255,107,107,.12);--bg-n:rgba(255,255,255,.06);
/* ۵-۱۱ توکنهای حرکت (transitions.dev): یک منبع واحد برای مدت/منحنی/فاصله.
   همهٔ انیمیشنها باید از این توکنها استفاده کنند، نه مقدارهای پراکنده. */
--dur-1:.12s;--dur-2:.18s;--dur-3:.24s;--dur-4:.32s;          /* تند → آرام */
--ease-out:cubic-bezier(.22,1,.36,1);                          /* استانداردِ ورود */
--ease-in-out:cubic-bezier(.32,.72,0,1);                       /* حرکتهای بزرگ (modal/drawer) */
--ease-spring:cubic-bezier(.34,1.56,.64,1);                    /* پرشِ ملایم (pop/badge) */
/* ۵-۳۰ گامِ پلکان: فاصلهٔ زمانیِ ورودِ هر فرزند از --i. هر ظرف می‌تواند
   ریتمِ خودش را بگذارد (جدول تندتر از کارت)؛ این مقدار، پیش‌فرض است. */
--stagger-step:45ms;
--sb-w:8px;                                                     /* ۵-۱۴: پهنای scrollbar */
--sb-thumb:rgba(255,255,255,.16);                               /* رنگِ ریل در حالت idle */
--sb-thumb-hi:rgba(124,108,255,.55);                            /* رنگِ ریل هنگام hover/درگ */
/* ۵-۱۵ عمق و خطوط: --line خطِ موییِ ظریف‌تر از --brd (سطرها/کارتها/روزهای تقویم).
   --sh-* طبقِ سایه: تیره + نوارِ رنگی برای عناصرِ فعال. */
--line:rgba(var(--tint),.06);
--sh-sm:0 2px 8px var(--shade-3);
--sh-md:0 10px 30px var(--shade-1);
--sh-lg:0 22px 60px var(--shade-4);
--sh-vio:0 12px 34px rgba(124,108,255,.4)}

/* ═══ ۵-۲۲ تمِ روشن ═══
   فعال‌سازی: <html class="light"> یا data-theme="light".
   فقط توکن‌ها را بازنویسی می‌کند — هیچ قاعده‌ای دست نمی‌خورد، برای
   همین روشن/خاموش کردن آن ارزان است و ریسکِ شکست ندارد.
   نکتهٔ کلیدی: --shade و --tint عوض می‌شوند (نه رنگ‌های تک‌تک)، پس
   هر قاعده‌ای که از این‌ها استفاده کند خودش با تم جابه‌جا می‌شود. */
:root.light,html[data-theme=light]{
  color-scheme:light;
  /* سطوح: سفیدِ خالص برای پس‌زمینه، کارت‌ها کمی تیره‌تر از آن */
  --bg:#F6F6FB;--surf-1:#FFFFFF;--surf-2:#F0F0F7;--surf-3:#E7E7F0;
  /* متن: مشکیِ گرم. نکتهٔ خوانایی روی روشن، متن باید تیره‌تر از
     نسخهٔ تیره باشد چون کنتراست وارونه است.
     --dim در تم تیره ۲٫۵۴:۱ بود (زیر آستانهٔ WCAG) ⇒ اینجا روشن‌ترش
     می‌کنیم تا به ۴٫۵ برسد. */
  --ink:#16161F;--mut:#4C4A68;--dim:#605D80;
  /* رنگ‌های مشتق باید تیره‌تر شوند تا روی سفید خوانا بمانند.
     --ok-lt پررنگ‌تر شد چون متنِ پیل روی پس‌زمینهٔ سبزِ کم‌رنگِ
     تم روشن به ۴٫۵ نمی‌رسید (۳٫۹۳). */
  --vio-lt:#4A38CC;--ok-lt:#136430;--er-lt:#B02222;--warn-lt:#8A5C00;
  /* شیشه و خط: سفید روی سفید کار نمی‌کند ⇒ سیاهِ کم‌رنگ */
  --glass:rgba(255,255,255,.72);--brd:rgba(20,20,40,.10);
  --tint:15,15,30;--tint-a:1;
  /* سایه روی پس‌زمینهٔ روشن باید قهوه‌ایِ سرد باشد نه سیاهِ مطلق */
  --shade:30,28,60;
  --shade-1:rgba(var(--shade),.12);--shade-2:rgba(var(--shade),.20);
  --shade-3:rgba(var(--shade),.08);--shade-4:rgba(var(--shade),.16);
  --hair:rgba(var(--tint),.07);
  --lift:rgba(var(--tint),.035);
  --lift-vio:rgba(124,108,255,.07);
  --panel:rgba(255,255,255,.94);--pal-rgb:252,252,255;
  /* پس‌زمینه‌های وضعیت در تم روشن باید کم‌رنگ‌تر باشند */
  --bg-ok:rgba(30,135,72,.10);--bg-run:rgba(16,140,120,.10);
  --bg-q:rgba(90,72,214,.10);--bg-wait:rgba(154,106,0,.10);
  --bg-er:rgba(196,43,43,.09);--bg-n:rgba(var(--tint),.05);
  --sb-thumb:rgba(20,20,40,.18);--sb-thumb-hi:rgba(124,108,255,.45);
  --sh-vio:0 12px 34px rgba(90,72,214,.22);
  /* ۵-۲۲: روی سطحِ فعال در تم روشن، متن باید تیره باشد نه سفید —
     همان باگِ کنتراستِ ۱٫۰۲ که اسکریپتِ verify-theme گرفت. */
  --on-vio:#1B1440;
  --on-vio-bg:linear-gradient(90deg,rgba(124,108,255,.16),rgba(124,108,255,.05))
}
/* تم روشن: شیشه باید روی پس‌زمینهٔ روشن «شیشه» بماند نه لکهٔ سفید */
:root.light .glass{background:var(--glass);backdrop-filter:blur(20px) saturate(180%)}
:root.light .mesh{background:radial-gradient(700px 500px at 85% -10%,rgba(124,108,255,.10),transparent 60%),radial-gradient(600px 500px at -10% 30%,rgba(79,227,193,.07),transparent 60%),radial-gradient(500px 400px at 60% 110%,rgba(255,110,199,.05),transparent 60%),#F6F6FB}
/* متنِ روی رنگِ پر (پیل‌ها، دکمه‌ها) در تم روشن تیره می‌شود تا خوانا بماند */
:root.light .pill{filter:saturate(1.15)}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:'Vazirmatn',Tahoma,sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden}
.mesh{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(700px 500px at 85% -10%,rgba(124,108,255,.20),transparent 60%),radial-gradient(600px 500px at -10% 30%,rgba(79,227,193,.08),transparent 60%),radial-gradient(500px 400px at 60% 110%,rgba(255,110,199,.07),transparent 60%),#07070D}
.noise{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
#app{position:relative;z-index:2}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border:1px solid var(--brd);border-radius:22px;position:relative;overflow:hidden}
.glass::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(var(--tint),.15),transparent 40%,transparent 60%,rgba(124,108,255,.16));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
/* ۵-۱۵ حلقهٔ کانونِ سراسری: کاربرانِ کیبورد باید بدانند کجا هستند.
   فقط روی focus از کیبورد نشان داده میشود (نه کلیکِ موس)، و با ringِ
   دو-لایه (داخلیِ تیره + بیرونیِ بنفشی) روی هر پسزمینه‌ای دیده میشود. */
:focus{outline:none}
:focus-visible{outline:2px solid rgba(124,108,255,.9);outline-offset:2px;border-radius:8px}
.ni:focus-visible,.mnav button:focus-visible{outline-offset:-2px;border-radius:11px}
kbd{font-size:9.5px;border:1px solid var(--brd);border-radius:6px;padding:1px 8px;color:var(--dim)}
/* ۵-۲۶ نقطهٔ رنگیِ پیل: رنگِ وضعیت از خودِ currentColor می‌آید، پس یک
   قاعده برای همهٔ شش حالت کافی است. نقطه کمک می‌کند وضعیت از فاصله
   تشخیص داده شود (نه فقط از رنگِ متن) — برای کسانی که رنگ را دیر
   پردازش می‌کنند. */
.pill .pd{width:5px;height:5px;border-radius:99px;background:currentColor;flex:none}
.pill{padding:3px 11px;border-radius:99px;font-size:10.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;transition:filter var(--dur-1)}
.pill:hover{filter:brightness(1.15)}
.p-run{background:var(--bg-run);color:var(--cy)} .p-wait{background:var(--bg-wait);color:var(--gold)}
.p-q{background:var(--bg-q);color:var(--vio-lt)} .p-ok{background:var(--bg-ok);color:var(--ok-lt)}
.p-er{background:var(--bg-er);color:var(--er-lt)} .p-n{background:var(--bg-n);color:var(--mut)}
/* ۵-۲۶: پیلِ خنثی (بدون وضعیت) نقطه نمی‌گیرد — عدد/متنِ ساده است نه وضعیت */
.pill:not([class*="p-"]) .pd{display:none}
.delta{font-size:11px;font-weight:700}.up{color:var(--cy)}.dn{color:var(--pk)}
.tk{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:rgba(124,108,255,.13);border:1px solid rgba(124,108,255,.25)}
.tk.g{background:rgba(79,227,193,.1);border-color:rgba(79,227,193,.22)}.tk.p{background:rgba(255,110,199,.1);border-color:rgba(255,110,199,.22)}.tk.y{background:rgba(255,209,102,.1);border-color:rgba(255,209,102,.22)}
.bar{flex:1;height:5px;border-radius:99px;background:rgba(var(--tint),.07);overflow:hidden}.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--vio),var(--cy));position:relative}
/* ۵-۲۶ درخششِ روی نوارِ پیشرفت: یک نوارِ روشن که از چپ به راست می‌گذرد.
   این «میزانِ کار» است نه «کارِ در جریان» — نوارِ تمام‌شده هم می‌درخشد،
   چون نشانهٔ «این سنجه زنده است» است نه «این کار باز است». */
.bar i::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(var(--tint),.30),transparent);
  background-size:200% 100%;animation:barShimmer 2.6s linear infinite;pointer-events:none}
:root.light .bar i::after{background-image:linear-gradient(90deg,transparent,rgba(var(--tint),.18),transparent)}
.trow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px;transition:background var(--dur-1)}
.trow:last-child{border:none}.trow:hover{background:rgba(124,108,255,.05)}
.tgrow{flex:1;min-width:0}.tgrow b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tgrow small{color:var(--dim);font-size:11px}
.btn{display:inline-flex;align-items:center;gap:7px;padding:9px 18px;border-radius:13px;font-size:13px;font-weight:700;background:linear-gradient(135deg,var(--vio),#5A8BFF);color:#fff;box-shadow:var(--sh-vio);
  transition:transform var(--dur-1),box-shadow var(--dur-2) var(--ease-out),filter var(--dur-1)}
.btn:hover{transform:translateY(-1px);box-shadow:0 16px 40px rgba(124,108,255,.5);filter:brightness(1.08)}
.btn:active{transform:scale(.96)}
.btn.ghost{background:var(--lift);border:1px solid var(--brd);box-shadow:none;color:var(--mut)}
.btn.ghost:hover{background:rgba(124,108,255,.12);border-color:rgba(124,108,255,.45);color:#fff;box-shadow:none;filter:none}
.btn.sm{padding:6px 13px;font-size:11.5px;border-radius:10px}
.inp{width:100%;padding:11px 14px;background:var(--lift);border:1px solid var(--brd);border-radius:13px;outline:none;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.inp:focus{border-color:var(--vio);box-shadow:0 0 0 3px rgba(124,108,255,.18)}
/* ۵-۱۳: safety net — popup بومیِ <option> در مرورگرها پسزمینهٔ سفید دارد و
   رنگِ select را به ارث میبرد (var(--ink) نزدیک‌به‌سفید) => سفید-رو-سفید.
   این قانون تا پیش از enhancing، هر select را قابل‌خواندن نگه میدارد. */
select.inp,select.inp option{background-color:#14141F;color:var(--ink)}
select.inp option:checked{background-color:rgba(124,108,255,.35);color:#fff}
/* سایدبار */
.side{position:fixed;top:12px;bottom:12px;right:12px;width:224px;padding:14px 10px;display:flex;flex-direction:column;gap:1px;z-index:40;overflow-y:auto;overflow-x:hidden}
.side .navlist{display:flex;flex-direction:column;gap:1px;flex:1;min-height:0;overflow-y:auto}
.gap{font-size:9.5px;color:var(--dim);padding:7px 8px 3px;letter-spacing:.4px;font-weight:700}
.ni{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:11px;font-size:12px;color:var(--mut);cursor:pointer;transition:all var(--dur-1);position:relative}
.ni:hover{color:var(--ink);background:var(--lift);transform:translateX(-3px)}
.ni.on{color:var(--on-vio);background:var(--on-vio-bg);font-weight:700}
/* ۵-۲۵ نشانگرِ فعال: نوارِ کناری که با تغییر صفحه از صفر رشد می‌کند.
   قبلاً همین نوار بود (inset 22٪) ولی آنیمیشن نداشت، پ�� در هر تغییرِ
   صفحه ناگهانی ظاهر می‌شد. scaleY از مرکز رشد می‌کند. */
.ni.on::before{content:'';position:absolute;right:0;top:50%;width:3px;height:20px;margin-top:-10px;border-radius:99px;background:linear-gradient(180deg,var(--vio),var(--cy));box-shadow:0 0 14px var(--vio);
  animation:barGrow var(--dur-3) var(--ease-spring) both}
.ni .ic{font-size:15px;width:20px;text-align:center;flex:none}
/* ۵-۲۵ شمارندهٔ کنارِ آیتمِ ناوبری. .hot وقتی عددش «فوری» است (مثلاً
   کارِ در انتظارِ تأیید) تا با چشم پیدا شود. */
.ni .cnt{margin-inline-start:auto;font-size:10px;font-weight:700;background:rgba(var(--tint),.07);padding:1px 8px;border-radius:99px;color:var(--mut);
  font-variant-numeric:tabular-nums;transition:background var(--dur-1),color var(--dur-1)}
.ni .cnt.hot{background:rgba(255,107,107,.16);color:var(--er-lt)}
.ni .cnt.zero{display:none}
.side .me{margin-top:auto;padding-top:8px}
.brand{display:flex;align-items:center;gap:10px;padding:2px 10px 16px}
.brand .l{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--vio),var(--cy));display:flex;align-items:center;justify-content:center;font-size:17px;box-shadow:var(--sh-vio)}
.me{margin-top:auto;display:flex;gap:9px;align-items:center;padding:10px;border-radius:14px;background:var(--bg-n);border:1px solid var(--brd);cursor:pointer;transition:border-color var(--dur-1)}
.me:hover{border-color:rgba(124,108,255,.4)}
.me .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--pk),var(--vio));display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px}
.me b{font-size:12.5px;display:block}.me small{font-size:10px;color:var(--mut)}
.main{margin-right:256px;padding:24px 16px 50px;min-height:100vh}
.top{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.hi{font-size:27px;font-weight:900;letter-spacing:-.5px}.hi small{display:block;font-size:13px;font-weight:400;color:var(--mut);margin-top:2px}
.search{margin-inline-start:auto;display:flex;align-items:center;gap:10px;background:var(--glass);border:1px solid var(--brd);border-radius:13px;padding:9px 15px;color:var(--dim);font-size:12.5px;min-width:210px;cursor:pointer;backdrop-filter:blur(14px);transition:border-color var(--dur-1),color var(--dur-1)}
.search:hover{border-color:rgba(124,108,255,.4);color:var(--mut)}
/* ۵-۲۲ دکمهٔ آیکون (تم). هم‌اندازهٔ زنگوله ولی بدون نقطهٔ خوانده‌نشده. */
.iconbtn{width:40px;height:40px;border-radius:13px;background:var(--glass);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;flex:none;
  transition:border-color var(--dur-1),transform var(--dur-1),background var(--dur-1)}
.iconbtn:hover{border-color:rgba(124,108,255,.4);transform:translateY(-1px);background:var(--lift)}
.iconbtn:active{transform:scale(.94)}
.bell{position:relative;width:40px;height:40px;border-radius:13px;background:var(--glass);border:1px solid var(--brd);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;flex:none;transition:border-color var(--dur-1),transform var(--dur-1)}
.bell:hover{border-color:rgba(124,108,255,.4);transform:translateY(-1px)}
.bell::after{content:'';position:absolute;top:8px;inset-inline-end:8px;width:8px;height:8px;border-radius:50%;background:var(--pk);box-shadow:0 0 10px var(--pk)}
.hero{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:13px;margin-bottom:13px}
.hero.hero2{grid-template-columns:1fr 1fr}
.hcard{padding:18px;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-2);position:relative}
.hcard:hover{transform:translateY(-2px);border-color:rgba(124,108,255,.28)}
/* ۵-۲۴ گلوی دنبال‌کنندهٔ اشاره‌گر.
   کارت باید .glowable داشته باشد؛ JS در util.js متغیرهای --mx/--my را
   از مختصاتِ اشاره‌گر پر می‌کند. این لایه روی محتوای کارت می‌نشیند
   ⇒ pointer-events:none تا کلیک/اسکرولِ کارت را نبَرد، و overflow:hidden
   در .glass گلو را به گوشه‌های کارت می‌بُرد. */
.glowable::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,0%),rgba(124,108,255,.16),transparent 42%);
  opacity:0;transition:opacity var(--dur-3) var(--ease-out)}
.glowable:hover::after{opacity:1}
.hcard small{color:var(--mut);font-size:12px}
.hnum{font-size:29px;font-weight:900;letter-spacing:-1px;margin:5px 0 2px;font-variant-numeric:tabular-nums}.hnum small{font-size:12px;color:var(--dim);font-weight:400}
.glowline{height:3px;border-radius:99px;background:linear-gradient(90deg,var(--vio),var(--cy));box-shadow:0 0 16px var(--vio);margin-top:11px}
/* ۵-۲۹ نمودارِ هکارت: چهار لایه که با هم نمودار را «زنده» می‌کنند.
   ۱) ناحیهٔ زیرِ خط گرادیانی است (fill از رنگ تا شفاف)
   ۲) خط یک‌بار کشیده می‌شود و یک درخششِ رفت‌وبرگشتی رویش می‌ماند
   ۳) نقطهٔ پایانی با تأخیر می‌آید — «الان» کجاست
   ۴) کل نمودار آرام نفس می‌کشد (همان breathe که برای .glowline هست)
   همه از توکن‌های حرکت بالا می‌خوانند، پس ریتمِ همهٔ صفحه یکی است. */
.spark{position:absolute;bottom:0;inset-inline:0;height:48px;opacity:.85;pointer-events:none;
  animation:breathe 3.6s var(--ease-in-out) infinite;transform-origin:right}
/* ناحیه: هر کارت رنگِ خودش را می‌گیرد (--spark) و از آن به شفاف می‌رود.
   گرادیانِ عمودی لازم است — گرادیانِ مورب مثل .glass::before لبهٔ چپِ
   کارت‌های چسبیده را روشن می‌کند (همان هاله‌ای که دیده شد). */
.spark .fill{fill:url(#sparkFade)}
.spark .line{fill:none;stroke:var(--spark,var(--vio));stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* نقطهٔ پایانی: پس از آن‌که خط کشیده شد می‌آید، پس معنای «آخرین داده» دارد */
.spark .tip{fill:var(--spark,var(--vio));opacity:0}
.spark.draw .tip{animation:tipIn .5s var(--ease-spring) 1.2s forwards}
/* ۵-۲۹: در کاهش‌حرکت، انیمیشن با forwards به حالتِ آخر می‌رسد ولی
   چون «تأخیرِ صفر + مدتِ ~صفر» دارد، مرورگر ممکن است آن را اصلاً
   paint نکند و نقطه روی opacity:0 بماند — یعنی نمودار بی‌نقطه می‌ماند.
   راهِ صریح: در این حالت نقطه بدون انیمیشن دیده شود. */
@media (prefers-reduced-motion:reduce){.spark .tip{opacity:1}}
@keyframes tipIn{from{opacity:0;transform:scale(.3);transform-origin:center}to{opacity:1;transform:scale(1)}}
.mid{display:grid;grid-template-columns:1.65fr 1fr;gap:13px;margin-bottom:13px}
.pad{padding:18px}.pad h3{font-size:14.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.pad h3 .r{margin-inline-start:auto;font-size:10.5px;color:var(--dim);font-weight:400}
.ringwrap{display:flex;align-items:center;gap:15px}
.ring{width:80px;height:80px;position:relative;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900}
.feed .it{display:flex;gap:10px;padding:8px 0;font-size:12.5px;border-bottom:1px solid var(--lift)}.feed .it:last-child{border:none}
.feed .dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex-shrink:0}.feed small{color:var(--dim);display:block;font-size:10.5px}
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.qa button{background:var(--bg-n);border:1px solid var(--brd);border-radius:15px;padding:13px 6px;font-size:11px;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:6px;transition:transform var(--dur-2) var(--ease-out),border-color var(--dur-1),color var(--dur-1)}
.qa button:hover{border-color:rgba(124,108,255,.45);color:var(--ink);transform:translateY(-3px)}
.qa button b{font-size:19px}
.qa button.cta{background:linear-gradient(135deg,var(--vio),#5A8BFF);color:#fff;font-weight:800;border:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.gstat{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.gstat.g3{grid-template-columns:repeat(3,1fr)}
/* جدول */
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:right;padding:10px 12px;font-size:10.5px;color:var(--dim);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 12px;border-bottom:1px solid var(--bg-n)}
.tbl tbody tr{cursor:pointer;transition:background var(--dur-1)}.tbl tbody tr:hover{background:rgba(124,108,255,.07)}
.mono{font-variant-numeric:tabular-nums}
/* ۵-۲۸ سرستونِ چسبانِ جدول: در فهرست‌های بلند ستون‌ها از بالا می‌روند
   ولی سرستون باید بماند. position:sticky روی th و ظرفِ اسکرول (tblwrap)
   باید relative/overflow داشته باشد — وگرنه اصلاً نمی‌چسبد. */
.tblwrap{position:relative}
.tbl th{position:sticky;top:0;z-index:2;background:var(--surf-2);box-shadow:inset 0 -1px 0 var(--brd)}
/* تم روشن: پس‌زمینهٔ سرستون باید مات باشد وگرنه ردیف‌ها از زیرش دیده می‌شوند */
:root.light .tbl th{background:var(--surf-2)}
/* چاپ: سرستونِ چسبان در کاغذ بی‌معناست و می‌تواند سربرگ را ببرد */
@media print{.tbl th{position:static}}
/* کانبان */
.kan{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;align-items:start}
.kcol{background:rgba(var(--tint),.025);border:1px solid var(--brd);border-radius:15px;padding:9px;min-height:120px}
.kcol h5{font-size:11px;color:var(--mut);margin-bottom:7px;display:flex;justify-content:space-between}
.kcard{background:var(--lift);border:1px solid var(--line);border-radius:11px;padding:9px;font-size:11.5px;margin-bottom:6px;cursor:grab;transition:border-color var(--dur-1),transform var(--dur-1)}
.kcard:hover{border-color:rgba(124,108,255,.35);transform:translateY(-1px)}
.kcard .m{font-size:9.5px;color:var(--dim);margin-top:5px;display:flex;justify-content:space-between}
/* تقویم */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal .wk{font-size:9.5px;color:var(--dim);text-align:center;padding:3px 0}
.cal .d{aspect-ratio:1;border-radius:11px;background:rgba(var(--tint),.03);border:1px solid var(--line);font-size:11px;padding:5px;color:var(--mut);position:relative;cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1)}
.cal .d:hover{border-color:rgba(124,108,255,.45);background:rgba(124,108,255,.06)}
.cal .d .ev{position:relative;display:block;margin-top:3px;font-size:8.5px;padding:1px 5px;border-radius:6px;background:var(--bg-q);color:var(--vio-lt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .d .ev.g{background:rgba(79,227,193,.15);color:var(--cy)}
/* ۵-۱۸: شمارندهٔ رویدادهای بیشتر در یک روز */
.cal .d .ev.more{text-align:center;background:var(--hair);color:var(--dim)}
.cal .today{background:rgba(124,108,255,.2);border-color:var(--vio);color:var(--on-vio);font-weight:800}
/* مودال/دراور */
.ovl{position:fixed;inset:0;background:var(--shade-2);backdrop-filter:blur(8px);z-index:90;opacity:0;transition:opacity var(--dur-2)}
.ovl.show{opacity:1}
/* ═══ انتخابگر تاریخ جلالی ═══ */
.jdp{position:fixed;z-index:130;width:min(320px,94vw);background:rgba(var(--pal-rgb),.97);backdrop-filter:blur(28px);border:1px solid var(--brd);border-radius:18px;box-shadow:0 30px 80px var(--shade-2);padding:12px;animation:pop var(--dur-2) var(--ease-out)}
.jdp .jh{display:flex;align-items:center;gap:6px;margin-bottom:9px}
.jdp .jh b{font-size:13px;flex:1;text-align:center}
.jdp .jh button{width:28px;height:28px;border-radius:9px;background:var(--hair);color:var(--mut);font-size:13px;cursor:pointer}
.jdp .jh button:hover{color:#fff}
.jdp .jg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.jdp .jw{text-align:center;font-size:9.5px;color:var(--dim);padding:3px 0;font-weight:700}
.jdp .jd{text-align:center;font-size:11.5px;padding:6px 0;border-radius:9px;color:var(--ink);cursor:pointer;font-weight:600}
.jdp .jd:hover{background:rgba(124,108,255,.18)}
.jdp .jd.out{color:var(--dim);opacity:.35;cursor:default}
.jdp .jd.out:hover{background:none}
.jdp .jd.today{border:1px solid var(--vio)}
.jdp .jd.sel{background:linear-gradient(135deg,var(--vio),var(--cy));color:#fff}
.jdp .jf{display:flex;gap:6px;margin-top:10px;border-top:1px solid var(--brd);padding-top:9px}
.jdp .jf button{flex:1}
.jdp .jy{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.jdp .jy button{padding:3px 10px;font-size:10.5px;border-radius:8px;background:var(--hair);color:var(--mut);cursor:pointer}
.jdp .jy button.on{background:rgba(124,108,255,.25);color:var(--on-vio);font-weight:700}
.sheet{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:18px;pointer-events:none}
.sheet>*{pointer-events:auto}
.modal{background:rgba(var(--pal-rgb),.92);backdrop-filter:blur(26px) saturate(160%);border:1px solid var(--brd);border-radius:22px;width:min(540px,95vw);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 30px 80px var(--shade-2);transform:scale(.94) translateY(10px);opacity:0;transition:all var(--dur-3) var(--ease-in-out)}
.modal.show{transform:none;opacity:1}.modal.wide{width:min(760px,96vw)}
.mh{display:flex;align-items:center;gap:10px;padding:15px 18px;border-bottom:1px solid var(--brd)}
.mh h3{font-size:14.5px;flex:1}.mb{padding:18px;overflow-y:auto;flex:1}.mf{padding:13px 18px;border-top:1px solid var(--brd);display:flex;gap:8px;justify-content:flex-end}
.drawer{position:fixed;top:0;bottom:0;inset-inline-end:0;width:min(470px,96vw);background:rgba(var(--pal-rgb),.94);backdrop-filter:blur(26px);border-inline-start:1px solid var(--brd);z-index:95;display:flex;flex-direction:column;box-shadow:-20px 0 60px var(--shade-4);transform:translateX(-24px);opacity:0;transition:all var(--dur-4) var(--ease-in-out)}
[dir=rtl] .drawer{transform:translateX(24px)}
.drawer.show{transform:none;opacity:1}
/* توست */
#toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{background:var(--panel);backdrop-filter:blur(20px);border:1px solid var(--brd);border-radius:14px;padding:10px 20px;font-size:13px;box-shadow:var(--sh-lg);animation:tin var(--dur-2);position:relative;overflow:hidden}
/* ۵-۲۸ نوارِ عمرِ toast: به‌جای اینکه پیام بی‌دلیل غیب شود، می‌بینی چقدر
   از عمرش مانده. عرض از راست کم می‌شود (RTL). مدت‌اش با همان ۲۸۰۰ms
   هم‌خوان است که JS تایمرِ حذف دارد. */
.toast::after{content:'';position:absolute;bottom:0;right:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--cy),var(--vio));transform-origin:right;
  animation:toastLife 2.8s linear forwards}
@keyframes toastLife{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* پالت */
.pal{position:fixed;top:14vh;left:50%;transform:translateX(-50%);width:min(520px,92vw);z-index:120;background:rgba(var(--pal-rgb),.96);backdrop-filter:blur(28px);border:1px solid var(--brd);border-radius:20px;box-shadow:0 40px 100px var(--shade-2);overflow:hidden}
.notif{position:fixed;top:64px;left:16px;width:min(400px,92vw);z-index:120;background:rgba(var(--pal-rgb),.97);backdrop-filter:blur(28px);border:1px solid var(--brd);border-radius:18px;box-shadow:0 30px 80px var(--shade-2);max-height:64vh;display:flex;flex-direction:column;animation:pop var(--dur-2) var(--ease-out)}
.notif .nh{padding:14px 16px;border-bottom:1px solid var(--brd);display:flex;justify-content:space-between;align-items:center}
.notif .nh b{font-size:13.5px}
.notif .nl{overflow-y:auto;padding:8px;flex:1}
.nitem{display:flex;gap:10px;padding:10px;border-radius:12px;cursor:pointer}
.nitem:hover{background:var(--lift)}
.nitem.unread{background:rgba(124,108,255,.08)}
/* نقطهٔ «خوانده‌نشده» کنار هر آیتم — آرام پینگ می‌خورد */
.nitem.unread .ni-ic{box-shadow:0 0 0 2px rgba(124,108,255,.35);animation:breathe 2.8s var(--ease-in-out) infinite}
.nitem .ni-ic{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;flex:none;background:var(--hair)}
.nitem .ni-b{flex:1;min-width:0}
.nitem b{font-size:12.5px;display:block}
.nitem small{color:var(--dim);font-size:10.5px}
.nitem p{margin:3px 0 0;font-size:11.5px;color:var(--mut);line-height:1.5}
/* ═══ ویرایشگر پلن سناریو ═══ */
.pln{border:1px solid var(--brd);border-radius:13px;background:var(--bg-n);padding:10px;margin-bottom:10px}
.pln-h{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.pln-h b{font-size:12px;flex:1}
.pln-h .n{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--vio),var(--cy));display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:#fff;flex:none}
.pln .row3{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.pln textarea.inp{width:100%;box-sizing:border-box}
.pln-rm{width:26px;height:26px;border-radius:8px;background:rgba(239,68,68,.15);color:#f87171;font-size:13px;cursor:pointer;flex:none;border:1px solid transparent}
.pln-rm:hover{border-color:#f87171}
.pln-add{width:100%;padding:8px;border:1px dashed var(--brd);border-radius:11px;background:none;color:var(--mut);font-size:12px;cursor:pointer}
.pln-add:hover{color:#fff;border-color:var(--vio)}
.plan-read{border:1px solid var(--brd);border-radius:12px;padding:10px 12px;margin-bottom:8px;background:var(--bg-n)}
.plan-read .pr-h{display:flex;gap:8px;align-items:center;margin-bottom:6px}
.plan-read .pr-h .n{width:22px;height:22px;border-radius:7px;background:rgba(124,108,255,.22);display:flex;align-items:center;justify-content:center;font-size:10.5px;font-weight:800;flex:none}
.plan-read .pr-h b{font-size:12px;flex:1}
.plan-read p{margin:4px 0;font-size:11.5px;color:var(--mut);line-height:1.6}
.plan-read .dlg{margin:5px 0 0;padding:7px 10px;border-right:2px solid var(--cy);background:rgba(79,227,193,.07);border-radius:0 8px 8px 0;font-size:11.5px;color:#c9fff5;line-height:1.6}
.chipbox{display:flex;flex-wrap:wrap;gap:7px}
.chip{display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;border:1px solid var(--brd);background:var(--bg-n);font-size:11.5px;cursor:pointer;color:var(--mut);transition:all var(--dur-1)}
.chip:hover{color:#fff}
.chip.on{background:linear-gradient(135deg,rgba(124,108,255,.28),rgba(79,227,193,.14));border-color:var(--vio);color:var(--on-vio);font-weight:600}
.chip input{accent-color:var(--vio);width:13px;height:13px;cursor:pointer;margin:0}
/* ۵-۱۸: chip غیرفعال (سناریوی قبلاً استفاده‌شده در رویدادِ دیگر) */
.chip.op{opacity:.45;cursor:not-allowed}
.chip.op:hover{color:var(--mut)}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tin{from{transform:translateY(12px);opacity:0}}
/* ۵-۲۰ ادامه — keyframeهای اجزای باقی‌مانده (نمودار/کانبان/زنگوله).
   همه از --dur-*/--ease-* می‌خوانند تا یک منبع واحد بماند. */
@keyframes drawLine{from{stroke-dashoffset:var(--dash)}to{stroke-dashoffset:var(--dash-to,0)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes growX{from{width:0}to{width:var(--w,100%)}}
@keyframes bellPop{0%{transform:scale(1)}42%{transform:scale(1.32)}100%{transform:scale(1)}}
@keyframes ringPing{0%{transform:scale(1);opacity:.7}70%{transform:scale(2.1);opacity:0}100%{opacity:0}}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:.55;transform:scaleX(1)}50%{opacity:1;transform:scaleX(1.04)}}
@keyframes barGrow{from{height:0}to{height:var(--h,100%)}}
@keyframes sheen{from{transform:translateX(-120%) skewX(-18deg)}to{transform:translateX(220%) skewX(-18deg)}}
/* ۵-۲۳: ردِ کارت — وقتی رها کردن در ستونِ مقصد مجاز نبود */
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
/* ۵-۲۶: درخششِ نوارِ پیشرفت */
@keyframes barShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
/* ۵-۲۷ نشانِ «زنده»: حلقه‌ای که از برچسبِ ساعت بیرون می‌زند. */
.evlive{display:inline-flex;align-items:center;gap:5px}
.evlive .pd{position:relative}
.evlive .pd::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:currentColor;animation:ringPing 2s var(--ease-out) infinite}
.evlive .lt{font-size:9.5px;font-weight:700;letter-spacing:.3px;opacity:.9}
/* ═══ ۵-۲۰ انیمیشن‌های داده (مسیر A — افزودنی، بدون تغییر ظاهر) ═══
   چهار چیز که پروژه نداشت: شمارش بالا، کشیدن حلقهٔ پیشرفت، اسکلت بارگذاری،
   و ترنزیشن نرم بین صفحه‌ها. همه از توکن‌های بالا (--dur-*/--ease-*) می‌خوانند. */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(9px) scale(.985)}to{opacity:1;transform:none}}
@keyframes skShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes ringDraw{from{stroke-dashoffset:var(--dash,1000)}to{stroke-dashoffset:var(--dash-to,0)}}
/* چرخهٔ صفحه: go() دو فاز را عوض می‌کند — خروج کوتاه، ورود بلندتر */
#page{transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
#page.leave{opacity:0;transform:translateY(-6px)}
#page.enter{animation:pageIn var(--dur-3) var(--ease-out) both}
/* اسکلت بارگذاری (شکل‌ها هم‌اندازهٔ محتوای واقعی تا پرشی رخ ندهد) */
.sk{background:linear-gradient(90deg,var(--lift) 25%,rgba(var(--tint),.11) 50%,var(--lift) 75%);background-size:200% 100%;animation:skShimmer 1.5s linear infinite;border-radius:8px}
.sk-row{height:44px;margin-bottom:9px}.sk-txt{height:11px;margin-bottom:7px}
.sk-h{height:27px;width:56%;margin-bottom:13px}.sk-st{height:29px;width:64%;margin-bottom:9px}
.sk-av{width:42px;height:42px;border-radius:13px;flex:none}
/* ورود پلکانیِ ویجت‌ها — تأخیر از --i روی هر فرزند خوانده می‌شود.
   گامِ تأخیر یک متغیر است تا هر ظرف بتواند ریتمِ خودش را داشته باشد
   (جدول باید سریع‌تر از کارت بچیند تا صفحه دیر ظاهر نشود). */
.stagger>*{animation:cardIn var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*var(--stagger-step,45ms))}
.stagger{--stagger-step:45ms}
/* ── ۵-۳۰ کانتینرهای خودکار: صفحه‌هایی که .stagger ندارند هم پلکانی وارد
   شوند. یک قاعده برای هر چیدمانِ تکرارشونده، نه دست‌کاریِ تک‌تک صفحه‌ها:
   کارت‌های گریدی (.glass) و ردیف‌های جدول پرکاربردترین شکل‌های صفحه‌اند.
   سقفِ شماره‌گذاری در util.js است، پس اینجا فقط «شکلِ ورود» تعریف می‌شود. */
.grid2>*,.hero>*{animation:cardIn var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*var(--stagger-step,40ms))}
.grid2{--stagger-step:40ms}.hero{--stagger-step:45ms}
/* جدول‌ها: ورودِ سریع‌تر و تخت‌تر (بدون scale) — ۲۰ ردیف با تأخیرِ
   پلکانی مثلِ دریا موج می‌شود و خواندن را سخت می‌کند. */
.tblwrap tbody tr{animation:rowIn var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0)*26ms)}
.tblwrap{--stagger-step:26ms}
/* فهرست‌های عمودیِ کارت‌ها (کارکرد، جعبه‌های محتوا) که فرزندشان .trow است */
.tlist>*{animation:rowIn var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0)*34ms)}
/* نوار پیشرفت: عرض از صفر پر می‌شود (عرض نهایی را JS می‌گذارد) */
.bar i{width:0;transition:width var(--dur-4) var(--ease-out)}
/* حلقهٔ پیشرفت: dashoffset با JS مقدار می‌گیرد */
.ring svg{overflow:visible}
.ring .rf{transition:stroke-dashoffset 1s var(--ease-out)}

/* ── نمودارِ خطی (spark) ──────────────────────────────────────────
   فقط مسیرِ «خط» (.line) کشیده می‌شود؛ مسیرِ .fill ناحیهٔ زیرِ خط است و
   dash گرفتنش آن را به یک خطِ نقطه‌چین تبدیل می‌کرد. طولِ واقعیِ خط را
   JS می‌گذارد تا dashoffset از صفر شروع شود و به انتها برسد. */
.spark .line{stroke-dasharray:var(--dash);stroke-dashoffset:var(--dash-to)}
/* کشیدن یک‌باره + درخششِ رفت‌وبرگشتیِ بی‌نهایت. تأخیرِ ۱٫۱۵ ثانیه یعنی
   درخشش بعد از تمام‌شدنِ کشیدن شروع می‌شود. هر دو روی
   stroke-dashoffset کار می‌کنند ولی پشت‌سرهم‌اند نه رقیبِ هم‌زمان. */
.spark.draw .line{animation:drawLine 1.15s var(--ease-out) forwards,lineSweep 3.2s var(--ease-in-out) 1.15s infinite}
@keyframes lineSweep{0%{stroke-dashoffset:0}50%{stroke-dashoffset:calc(var(--dash) * .3)}100%{stroke-dashoffset:0}}
/* ناحیهٔ زیرِ خط، همراهِ خودِ خط پر می‌شود */
.spark .fill{opacity:0;transition:opacity var(--dur-4) var(--ease-out) .5s}
.spark.draw .fill{opacity:1}
/* خطِ درخشانِ پایینِ هکارت — آرام نوس می‌کند تا کارت «زنده» بماند */
.glowline{animation:breathe 3.6s var(--ease-in-out) infinite;transform-origin:right}

/* ── نمودارِ میله‌ای گزارش‌ها ────────────────────────────────────
   هر ماه دو میله دارد (درآمد/هزینه) که هرکدام نسبت به بیشینهٔ کلِ
   دوره سنجیده می‌شود؛ پس کنار هم گذاشتنشان جمعِ بیش از ۱۰۰٪ می‌داد و
   از کادر بیرون می‌زد (باگِ ۲۰۲۶/۰۷ در اسکرین‌شات). هر میله ردیفِ
   خودش را دارد ⇒ درصد خوانا و بدون سرریز. */
.mbarwrap{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.mbar{width:0;height:5px;border-radius:4px;transition:width .7s var(--ease-out);transition-delay:calc(var(--d,0)*80ms)}
.mbar.f{background:linear-gradient(90deg,var(--vio),var(--cy))}
.mbar.e{background:var(--er);opacity:.6}
.mrow{animation:cardIn var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*50ms)}

/* ── کانبان ──────────────────────────────────────────────────────
   کارت‌ها با تأخیرِ پلکانی می‌آیند و کلِ ستون هنگام hover بالا می‌آید. */
.kcol{transition:border-color var(--dur-2),transform var(--dur-2) var(--ease-out),background var(--dur-2)}
.kcol:hover{border-color:rgba(124,108,255,.3);transform:translateY(-2px)}
.kcol .klist{display:flex;flex-direction:column;min-height:4px}
.kcard{animation:cardIn var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*40ms)}
.kcard:active{cursor:grabbing;transform:scale(.97)}
/* جای خالی هنگام درگ: کارتِ جابه‌جاشونده باز می‌ماند و بقیه بالا می‌آیند */
.kcard.drag{opacity:.35;transform:scale(.97)}
.kcol.over{background:rgba(124,108,255,.09);border-color:var(--vio);box-shadow:inset 0 0 0 1px rgba(124,108,255,.3)}
/* ستونِ مقصدِ غیرمجاز: همان درگ، ولی با رنگِ خطا و بدون درخشش.
   .ok و .no هر دو با .over ست می‌شوند (HTML پررنگ‌تر می‌آید)، پس
   قاعدهٔ نهایی به ترتیبِ ظاهرشدن در این فایل بستگی دارد. */
.kcol.over.ok{background:rgba(79,227,193,.10);border-color:var(--cy);box-shadow:inset 0 0 0 1px rgba(79,227,193,.34)}
.kcol.over.no{background:rgba(255,107,107,.09);border-color:var(--er);box-shadow:inset 0 0 0 1px rgba(255,107,107,.3)}
/* ۵-۲۳ درگ: کارتِ شبح که زیرِ اشاره‌گر می‌آید (position:fixed ⇒ مستقل از اسکرول) */
.kghost{position:fixed;z-index:120;pointer-events:none;border-radius:11px;box-shadow:var(--sh-lg);opacity:.92;transform:rotate(1.6deg) scale(1.02);will-change:transform}
/* کشیدنِ کارت نباید متن را انتخاب کند (هایلایتِ آبیِ مرورگر وسطِ درگ) */
.kcard,.kghost{user-select:none;-webkit-user-select:none}
.kcard.dragging{opacity:.28}
.kph{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--vio),var(--cy));opacity:.75;animation:growX .32s var(--ease-out);margin:4px 0}
/* کارت در جای تازراست: تازه‌واردِ ستون، با همان stagger بقیه بالا می‌آید */
.kcard.landed{animation:cardIn var(--dur-3) var(--ease-out) both;animation-delay:0ms}
.kcard.reject{animation:shakeX .38s var(--ease-in-out)}

/* ── فیدِ فعالیت/اعلان ─────────────────────────────────────────── */
.feed .it{animation:rowIn var(--dur-3) var(--ease-out) both;animation-delay:calc(var(--i,0)*45ms)}
.feed .dot{position:relative}
.feed .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;background:inherit;animation:ringPing 2.4s var(--ease-out) infinite;animation-delay:calc(var(--i,0)*200ms)}

/* ── زنگولهٔ اعلان ───────────────────────────────────────────────
   #bellDot شمارندهٔ خوانده‌نشده است (JS متنش را می‌گذارد). وقتی صفر شد
   display:none می‌شود و نقطهٔ ثابتِ .bell::after هم محو می‌شود. */
#bellDot{position:relative}
#bellDot.on{animation:bellPop var(--dur-4) var(--ease-spring)}
#bellDot.on::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--er);animation:ringPing 2s var(--ease-out) infinite}
.bell.mute::after{opacity:0;transition:opacity var(--dur-3)}

/* ── سایر ──────────────────────────────────────────────────────── */
/* درخششِ یک‌باره روی کارت‌های تازه‌رسیده (lazy) */
.fresh{position:relative;overflow:hidden}
.fresh::after{content:'';position:absolute;top:0;bottom:0;width:45%;background:linear-gradient(90deg,transparent,rgba(var(--tint),.13),transparent);animation:sheen 1.1s var(--ease-out) forwards;pointer-events:none}
/* برچسبِ وضعیت هنگام تغییرِ وضعیت (trow.js می‌خواند) */
.pill.flip{animation:pop var(--dur-2) var(--ease-spring)}
.pal input{width:100%;background:transparent;border:none;padding:16px 20px;font-size:15px;outline:none;color:var(--ink)}
.pal .list{max-height:46vh;overflow-y:auto;padding:6px}
.pal .pi{display:flex;gap:10px;padding:11px 14px;border-radius:12px;font-size:13.5px;cursor:pointer;color:var(--mut)}
.pal .pi:hover,.pal .pi.on{background:rgba(124,108,255,.15);color:var(--on-vio)}
/* نمودار */
.bars{display:flex;align-items:flex-end;gap:7px;height:120px;margin-top:10px}
.bars i{flex:1;border-radius:5px 5px 2px 2px;background:rgba(var(--tint),.1);display:block;position:relative}
.bars i.sel{background:linear-gradient(180deg,var(--vio),var(--cy));box-shadow:0 6px 20px rgba(124,108,255,.4)}
.bars i.hov::after{content:attr(data-v);position:absolute;top:-24px;right:50%;transform:translateX(50%);background:var(--vio);color:#fff;font-size:9.5px;font-weight:800;padding:2px 8px;border-radius:7px;white-space:nowrap}
/* موبایل */
.mnav{display:none}
.mfab{display:none;position:fixed;bottom:88px;inset-inline-end:16px;z-index:51;width:52px;height:52px;border-radius:50%;background:linear-gradient(135deg,var(--vio),var(--cy));color:#fff;font-size:25px;align-items:center;justify-content:center;box-shadow:0 12px 34px rgba(124,108,255,.5)}
@media(max-width:900px){
  .side{display:none}
  .main{margin:0;padding:16px 14px 100px}
  .hero{grid-template-columns:1fr 1fr;gap:9px}
  .hero .hcard:first-child{grid-column:1/-1}
  .hero .hcard{padding:13px}
  .hnum{font-size:20px;letter-spacing:-.5px}
  .hcard .delta{font-size:10px}
  .mid,.grid2{grid-template-columns:1fr}
  .kan{grid-template-columns:repeat(2,1fr)}
  .gstat{grid-template-columns:repeat(2,1fr)}
  .gstat.g3{grid-template-columns:repeat(3,1fr)}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tbl{min-width:640px}
  .mnav{display:flex;position:fixed;bottom:0;inset-inline:0;z-index:50;background:var(--panel);backdrop-filter:blur(24px);border-top:1px solid var(--brd);justify-content:space-around;padding:9px 6px calc(11px + env(safe-area-inset-bottom,0px))}
  .mnav button{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:9px;color:var(--dim);padding:2px 9px}
  .mnav button b{font-size:17px;font-weight:400}
  .mnav button.on{color:var(--ink)}.mnav button.on b{color:var(--cy)}
  .mfab{display:flex}
  .hi{font-size:21px}
  .search{display:none}
  .drawer{width:100vw}
  .mf{flex-wrap:wrap}
}
@media(max-width:560px){
  .hero{grid-template-columns:1fr}
  .hero .hcard:first-child{grid-column:auto}
  .kan{grid-template-columns:1fr}
  .qa{grid-template-columns:repeat(2,1fr)}
  .top{gap:8px;margin-bottom:14px}
  .bell{width:36px;height:36px}
  .seg{padding:8px}
  .seg button{padding:6px 10px;font-size:11px}
  .mh{padding:12px 14px}
  .mb{padding:14px}
  .mf{padding:11px 14px}
}
.drow{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px dashed rgba(var(--tint),.07);font-size:12.5px}
.drow span{color:var(--mut)}.drow b{font-weight:600}
.seg{display:flex;gap:5px;padding:10px 14px;border-bottom:1px solid var(--brd);flex-wrap:wrap}
.seg button{padding:6px 13px;border-radius:10px;font-size:11.5px;color:var(--mut);transition:background var(--dur-1),color var(--dur-1),transform var(--dur-1)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:rgba(124,108,255,.18);color:var(--on-vio);font-weight:700}
/* ۵-۳۰ تب‌ها: ورودِ پلکانیِ دکمه‌ها + پیکِ فعال که از دکمهٔ قبلی به
   این یکی می‌لغزد. جا و پهنا را JS از getBoundingClientRect می‌گذارد
   (پهنای هر دکمه به متنِ خودش است، پس CSS نمی‌تواند حدسش بزند). */
.seg.anim>button{animation:cardIn var(--dur-2) var(--ease-out) both;animation-delay:calc(var(--i,0)*30ms)}
.seg.anim{position:relative}
.seg.anim::after{content:'';position:absolute;bottom:var(--pip-y,-1px);inset-inline-start:var(--pip-x,0px);width:var(--pip-w,0px);height:2px;border-radius:99px;
  background:linear-gradient(90deg,var(--vio),var(--cy));box-shadow:0 0 10px var(--vio);opacity:0;
  transition:inset-inline-start var(--dur-3) var(--ease-out),width var(--dur-3) var(--ease-out),bottom var(--dur-3) var(--ease-out),opacity var(--dur-2)}
.seg.anim.on::after{opacity:1}
@media (prefers-reduced-motion:reduce){.seg.anim::after{transition:none}}
/* ═══ سیستم چاپ (کپی از index-legacy) ═══ */
#printOverlay{position:fixed;inset:0;background:#f0f0f0;color:#000;z-index:9999;overflow:auto;direction:rtl;-webkit-overflow-scrolling:touch}
.print-tool{position:sticky;top:0;background:linear-gradient(180deg,#1f2937 0%,#111827 100%);padding:12px 18px;display:flex;gap:12px;z-index:2;align-items:center;flex-wrap:wrap;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.print-tool .spacer{flex:1}
.doc{margin:20px auto;background:#fff;color:#111;font-family:Vazirmatn,Tahoma,sans-serif;position:relative;box-shadow:0 8px 40px rgba(0,0,0,.15);border-radius:4px}
.doc-a4{width:210mm;min-height:297mm;padding:14mm;font-size:11pt}
.doc-a5{width:148mm;min-height:210mm;padding:8mm;font-size:8pt}
.doc-a5 .doc-head{padding-bottom:4px;margin-bottom:6px}
.doc-a5 h1{font-size:12pt}.doc-a5 h2{font-size:11pt}.doc-a5 h3{font-size:10pt}
.doc-a5 th,.doc-a5 td{padding:3px 5px;font-size:7.5pt}
.doc-a5 .doc-box{padding:5px 7px;margin-bottom:5px}
.doc-a5 .doc-sign{margin-top:14px}
.doc h1,.doc h2,.doc h3{color:#111;line-height:1.4}
.doc h1{font-size:18pt;margin-bottom:6px}
.doc h2{font-size:15pt;margin-bottom:5px}
.doc h3{font-size:12pt;margin-bottom:4px}
.doc table{width:100%;border-collapse:collapse;margin:8px 0}
.doc th,.doc td{border:1px solid #999;padding:6px 8px;color:#111;text-align:right}
.doc th{background:#e5e7eb;font-weight:700}
.doc-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px;gap:12px}
.doc-box{border:1px solid #999;border-radius:4px;padding:10px 12px;margin-bottom:10px;font-size:.95em}
.doc-box>b{display:block;padding-bottom:6px;margin-bottom:6px;border-bottom:1px solid #ccc;font-size:1.05em}
.doc-row{display:flex;gap:8px;padding:3px 0;font-size:.95em;align-items:flex-start;line-height:1.6}
.doc-row .doc-label{color:#555;font-weight:600;min-width:90px;flex-shrink:0}
.doc-row .doc-value{flex:1;word-break:break-word}
.doc-a5 .doc-row .doc-label{min-width:70px;font-size:.9em}
.doc-total td{font-weight:700;background:#f3f4f6}
.doc-sign{display:flex;justify-content:space-between;margin-top:32px;text-align:center;gap:20px}
.doc-sign div{flex:1;border-top:1px dashed #999;padding-top:8px;font-size:.9em}
.doc-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.print-size-selector{display:inline-flex;background:#374151;border-radius:8px;padding:3px;gap:2px}
.print-size-selector button{padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;color:#d1d5db;transition:all var(--dur-1)}
.print-size-selector button.active{background:#7c6cff;color:#fff}

/* ═══ ۵-۱۳ dropdown اختصاصی (dropdown.js آن را میسازد) ═══
   select بومی display:none میشود ولی value/onchange/gv() دست‌نخورده میمانند. */
.dd{position:relative;display:block;width:100%}
.dd-native{display:none!important}
.dd-btn{width:100%;display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--lift);border:1px solid var(--brd);border-radius:13px;outline:none;color:var(--ink);font-size:14px;text-align:start;cursor:pointer;
  transition:border-color var(--dur-1),background var(--dur-1)}
.dd-btn:hover,.dd-btn:focus-visible{border-color:var(--vio)}
.dd-btn.mono{font-family:monospace}
.dd-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd-arrow{flex-shrink:0;color:var(--mut);font-size:16px;line-height:1;transition:transform var(--dur-2) var(--ease-out)}
.dd.open .dd-arrow{transform:rotate(180deg)}
.dd-list{position:absolute;top:calc(100% + 6px);inset-inline:0;z-index:60;max-height:min(264px,42vh);overflow-y:auto;overscroll-behavior:contain;background:rgba(var(--pal-rgb),.97);backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);border:1px solid var(--brd);border-radius:14px;box-shadow:0 22px 60px var(--shade-2);padding:5px;
  opacity:0;transform:translateY(-6px) scale(.97);transform-origin:top center;visibility:hidden;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s linear var(--dur-2)}
.dd.open .dd-list{opacity:1;transform:none;visibility:visible;pointer-events:auto;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s}
.dd-list.up{top:auto;bottom:calc(100% + 6px);transform-origin:bottom center;transform:translateY(6px) scale(.97)}
.dd.open .dd-list.up{transform:none}
.dd-opt{padding:9px 11px;border-radius:9px;font-size:13px;color:var(--mut);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:background var(--dur-1),color var(--dur-1)}
.dd-opt:hover{background:rgba(124,108,255,.14);color:var(--on-vio)}
.dd-opt.sel{background:rgba(124,108,255,.2);color:var(--on-vio);font-weight:700}
.dd-opt.dis{opacity:.35;cursor:default;pointer-events:none}
.dd-grp{padding:9px 11px 4px;font-size:10px;color:var(--dim);font-weight:700;letter-spacing:.4px}

/* ═══ ۵-۱۴ scrollbar مدرن و یکپارچه ═══
   اصول: ریلِ نازک و محو (در حالت idle تقریباً نامرئی)، ظاهرتر شدن هنگام
   hover/درگ، بدون trackِ مشخص (فضای خالی، نه شیارِ تیره). Firefox با
   scrollbar-width/color، Chromium با ::-webkit-scrollbar. */

/* Firefox */
*{scrollbar-width:thin;scrollbar-color:var(--sb-thumb) transparent}
*:hover{scrollbar-color:var(--sb-thumb-hi) transparent}

/* Chromium / Safari */
::-webkit-scrollbar{width:var(--sb-w);height:var(--sb-w)}
::-webkit-scrollbar-track{background:transparent}
/* ریلِ ظریف: ۲px padding مجازی => عرضِ واقعی ۴px، لبه‌های گرد، فاصله از لبه */
::-webkit-scrollbar-thumb{background:var(--sb-thumb);border-radius:99px;border:2px solid transparent;background-clip:padding-box;
  transition:background var(--dur-2) var(--ease-out)}
::-webkit-scrollbar-thumb:hover{background:var(--sb-thumb-hi);background-clip:padding-box}
::-webkit-scrollbar-thumb:active{background:rgba(124,108,255,.7);background-clip:padding-box}
::-webkit-scrollbar-corner{background:transparent}
/* منوهای کشویی و پنلهای شناور: ریلِ باریک‌تر — جایشان تنگ است */
.dd-list,.notif .nl,.pal .list{scrollbar-width:thin}
.dd-list::-webkit-scrollbar,.notif .nl::-webkit-scrollbar,.pal .list::-webkit-scrollbar{width:5px}

/* محیط چاپ: scrollbar بلااستفاده است */
@media print{::-webkit-scrollbar{display:none}}

/* ۵-۱۱ (transitions.dev): دسترس‌پذیری — کاربرانی که حرکت را در سیستم‌عامل
   غیرفعال کردهاند، نباید هیچ انیمیشنی ببینند. این همهٔ keyframeها و
   transitionها را درجا بیاثر میکند. */
@media (prefers-reduced-motion:reduce){
  /* ۵-۲۹ animation-delay هم باید صفر شود. پیش از این فقط مدت و تکرار صفر
     می‌شدند، پس هر عنصرِ تأخیردار (نقطهٔ پایانیِ نمودار، .stagger،
     .mrow، .kcard، .feed .it) در حالتِ کاهش‌حرکت ۰٫۱ تا ۰٫۵ ثانیه
     «نامرئی» می‌ماند — و انیمیشنِ forwards بعد از آن دیده نمی‌شود.
     یعنی دقیقاً همان چیزی که کاربرِ کم‌حرکت نباید ببیند. */
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important;scroll-behavior:auto !important}
}
@media print{body>*:not(#printOverlay){display:none!important}#printOverlay{position:static;overflow:visible;background:#fff}.print-tool{display:none!important}.doc{box-shadow:none;border-radius:0;margin:0;padding:0;width:100%;min-height:auto}.doc-a4{@page{size:A4 portrait;margin:10mm}}.doc-a5{@page{size:A5 portrait;margin:6mm}}}