/* ══════════ ظاهرِ رنگی (۴۰٫۱۸۰) — body.vivid ══════════
   کاربر: «کلاً نرم‌افزار بی‌رنگ و لعاب است؛ کمی روی جذابیتِ بصری‌اش کار کن». فقط رنگ و عمق، بی دست‌زدن به چیدمان:
   زمینهٔ نرمِ رنگیِ همان بخش، کارت‌های عددی با نوارِ رنگی و نشانهٔ پررنگ، کاشی‌های بالای صفحه هر کدام با یک رنگ،
   دکمهٔ اصلیِ شیبی، سربرگِ شیشه‌ای. رنگِ پایه رنگِ همان بخش است (--modc) و تاریک/روشن هر دو از متغیرهای پوسته می‌آیند.
   «ظاهرِ ساده» در انتخابگرِ «شکلِ منو» خاموشش می‌کند (navmVivid). */
body.vivid{--v1:var(--modc,var(--brand));--v2:#7c5cff;--v3:#0d9488;--v4:#d97706;--v5:#db2777;--v6:#2563eb;
  background-color:var(--bg);
  background-image:radial-gradient(1100px 520px at 100% -8%,color-mix(in srgb,var(--v1) 20%,transparent),transparent 70%),
    radial-gradient(800px 460px at -6% 12%,color-mix(in srgb,var(--v2) 12%,transparent),transparent 70%),
    radial-gradient(900px 600px at 40% 110%,color-mix(in srgb,var(--v3) 7%,transparent),transparent 70%);
  background-attachment:fixed}
[data-theme="dark"] body.vivid{background-image:radial-gradient(1100px 520px at 100% -8%,color-mix(in srgb,var(--v1) 22%,transparent),transparent 70%),
    radial-gradient(800px 460px at -6% 12%,color-mix(in srgb,var(--v2) 14%,transparent),transparent 70%),
    radial-gradient(900px 600px at 40% 110%,color-mix(in srgb,var(--v3) 10%,transparent),transparent 70%)}
body.vivid main,body.vivid #app{background:transparent}

/* سربرگ و عنوانِ صفحه: شیشه‌ای روی همان زمینهٔ رنگی */
/* بی backdrop-filter: نوارِ کناری و کشوی گوشی (fixed) درونِ #menubar‌اند و فیلتر جایشان را به هم می‌ریخت */
@media(min-width:1001px){body.vivid #menubar{background:color-mix(in srgb,var(--card) 92%,transparent)}}   /* گوشی: سربرگِ رنگیِ همیشگی */
body.vivid .topbar{background:color-mix(in srgb,var(--bg) 72%,transparent)!important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
body.vivid #page-title{background:linear-gradient(90deg,var(--ink) 40%,color-mix(in srgb,var(--v1) 85%,var(--ink)));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* پنل‌ها و کارت‌ها: لبهٔ نرم، سایهٔ رنگی */
body.vivid .panel,body.vivid .card{border-color:color-mix(in srgb,var(--line) 55%,transparent);
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 14px 32px -20px color-mix(in srgb,var(--v1) 45%,transparent)}
body.vivid .card{position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s}
body.vivid .card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--cd-fg,var(--v1)),color-mix(in srgb,var(--cd-fg,var(--v1)) 35%,var(--v2)))}
body.vivid .card.click:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(16,24,40,.05),0 20px 40px -20px color-mix(in srgb,var(--cd-fg,var(--v1)) 60%,transparent)}
body.vivid .card .cd-ic{background:linear-gradient(140deg,var(--cd-fg,var(--v1)),color-mix(in srgb,var(--cd-fg,var(--v1)) 50%,var(--v2)));color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--cd-fg,var(--v1)) 80%,transparent)}
body.vivid .cards > .card:nth-child(4n+1):not(.cd-ok):not(.cd-warn):not(.cd-bad){--cd-fg:var(--v6)}
body.vivid .cards > .card:nth-child(4n+2):not(.cd-ok):not(.cd-warn):not(.cd-bad){--cd-fg:var(--v2)}
body.vivid .cards > .card:nth-child(4n+3):not(.cd-ok):not(.cd-warn):not(.cd-bad){--cd-fg:var(--v3)}
body.vivid .cards > .card:nth-child(4n+4):not(.cd-ok):not(.cd-warn):not(.cd-bad){--cd-fg:var(--v5)}

/* کاشی‌های بالای صفحه: هر کدام یک رنگ */
body.vivid .ltile{border-color:transparent;background:color-mix(in srgb,var(--t,var(--v1)) 11%,var(--card))}
body.vivid .ltile .lt-i{color:var(--t,var(--v1))}
body.vivid .ltile:nth-child(6n+1){--t:var(--v6)}
body.vivid .ltile:nth-child(6n+2){--t:var(--v2)}
body.vivid .ltile:nth-child(6n+3){--t:var(--v3)}
body.vivid .ltile:nth-child(6n+4){--t:var(--v4)}
body.vivid .ltile:nth-child(6n+5){--t:var(--v5)}
body.vivid .ltile:nth-child(6n){--t:var(--v1)}
body.vivid .ltile.warn{--t:var(--warn)}

/* دکمهٔ اصلی و زبانه‌ها */
body.vivid .btn.primary{background:linear-gradient(135deg,var(--v1),color-mix(in srgb,var(--v1) 55%,var(--v2)));border-color:transparent;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--v1) 85%,transparent)}
body.vivid .btn.primary:hover{filter:brightness(1.07)}
body.vivid .hubtabs a.on{background:linear-gradient(135deg,color-mix(in srgb,var(--v1) 14%,var(--card)),var(--card));color:var(--v1);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--v1) 30%,transparent)}
body.vivid h3.sech::before{content:"";display:inline-block;width:9px;height:9px;margin-inline-end:8px;border-radius:50% 50% 50% 0;
  background:linear-gradient(135deg,var(--v1),var(--v2));vertical-align:1px}
body.vivid .panel table thead th{background:color-mix(in srgb,var(--v1) 7%,var(--card))}

/* نوارِ کناریِ رایانه: شیبِ رنگیِ همان بخش */
@media(min-width:1001px){
  body.vivid.skin2 #menubar nav{background:linear-gradient(180deg,var(--sb-bg),color-mix(in srgb,var(--sb-bg) 72%,var(--v2)))}
  body.vivid.skin2 #menubar .mb-brand{background:var(--sb-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
/* گوشی: نوارِ پایین شیشه‌ای */
@media(max-width:900px){
  body.vivid #tabbar{background:color-mix(in srgb,var(--card) 78%,transparent);-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%)}
}
@media print{body.vivid{background:#fff}body.vivid #page-title{color:#000;background:none}}

/* ══ ۴۰٫۱۸۰ — کمی خلاقیت (کاربر: «یه کم خلاقیت به خرج بده») ══ */
/* ریتمِ روز: دو رنگِ همراه با ساعت عوض می‌شوند (navmDayPart ← body[data-dayp]) */
body.vivid[data-dayp="morning"]{--v2:#f59e0b;--v3:#0ea5e9}
body.vivid[data-dayp="noon"]{--v2:#7c5cff;--v3:#0d9488}
body.vivid[data-dayp="evening"]{--v2:#e11d48;--v3:#8b5cf6}
body.vivid[data-dayp="night"]{--v2:#6366f1;--v3:#0f766e}
/* بافتِ نقطه‌ایِ بسیار کم‌رنگ — حسِ «شبکهٔ به‌هم‌پیوسته» ِ اکوسیستم */
body.vivid::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.2px);background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 75%);mask-image:linear-gradient(180deg,#000,transparent 75%)}
/* سلام: یک گویِ کوچکِ خورشید/ماه کنارِ خوش‌آمد — همان یک خط، بی کارتِ بزرگ */
body.vivid .home-hello .hh-t{position:relative;padding-inline-start:46px}
body.vivid .home-hello .hh-t::before{content:"";position:absolute;inset-inline-start:0;top:50%;width:34px;height:34px;margin-top:-17px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7d6,#fbbf24 45%,#f97316);box-shadow:0 0 0 6px color-mix(in srgb,#fbbf24 18%,transparent),0 8px 20px -6px #f97316}
body.vivid[data-dayp="evening"] .home-hello .hh-t::before{background:radial-gradient(circle at 35% 30%,#ffe4e6,#fb7185 45%,#a855f7);
  box-shadow:0 0 0 6px color-mix(in srgb,#fb7185 18%,transparent),0 8px 20px -6px #a855f7}
body.vivid[data-dayp="night"] .home-hello .hh-t::before{background:radial-gradient(circle at 65% 35%,transparent 38%,#e0e7ff 40%,#a5b4fc 70%);
  box-shadow:0 0 0 6px color-mix(in srgb,#6366f1 16%,transparent),0 8px 20px -6px #6366f1}
body.vivid .home-hello h2{background:linear-gradient(90deg,var(--ink) 30%,color-mix(in srgb,var(--v2) 75%,var(--ink)));
  -webkit-background-clip:text;background-clip:text;color:transparent}
/* دکمهٔ اصلی: برقِ گذرا هنگامِ رفتنِ موشواره */
body.vivid .btn.primary{position:relative;overflow:hidden}
body.vivid .btn.primary::after{content:"";position:absolute;top:0;bottom:0;width:40%;inset-inline-start:-60%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transition:inset-inline-start .5s}
body.vivid .btn.primary:hover::after{inset-inline-start:120%}
/* کارتِ عددی: نشانه هنگامِ اشاره کمی می‌چرخد */
body.vivid .card .cd-ic{transition:transform .2s}
body.vivid .card.click:hover .cd-ic{transform:rotate(-8deg) scale(1.08)}
body.vivid .ltile{transition:transform .15s}
body.vivid .ltile:hover{transform:translateY(-1px)}
/* نوارِ کناری: صفحهٔ باز با قرصِ شیبیِ درخشان */
@media(min-width:1001px){
  body.vivid.skin2 #nav > a.mb-top.active,body.vivid.skin2 #nav .hub-a.active{
    background:linear-gradient(90deg,color-mix(in srgb,var(--v2) 35%,transparent),color-mix(in srgb,var(--v1) 25%,transparent));
    box-shadow:inset -3px 0 0 var(--v2),0 8px 20px -14px var(--v2)}
}
@media(prefers-reduced-motion:reduce){body.vivid .btn.primary::after{display:none}body.vivid .card .cd-ic,body.vivid .ltile{transition:none}}