/* ══════════ ۴۰٫۲۲۲ — «ظاهرِ رنگی» برای کلِ نرم‌افزار (body.vivid؛ پس از formal.css) ══════════
   کاربر: «تمِ رنگی را برای کلِ نرم‌افزار و صفحه‌ها طراحی و اجرا کنیم». یک جفت‌رنگ — طیفِ انتخابیِ کاربر (`HT_PALS_V` ← --hc1/--hc2؛
   «یک‌رنگ» = رنگِ بخش) — همه‌جا: نوارِ کناری، سربرگ، دکمه، زبانه، کارت، جدول، نمودار، تقویم، پنجره و خانه.
   کارت‌های عددی چهار رنگِ همراه دارند (--v3..--v6). چیدمان دست نمی‌خورد؛ ظاهرِ رسمی (html.formal) از این پرونده اثر نمی‌گیرد. */
body.vivid{--x1:var(--hc1,var(--modc,#4f46e5));--x2:var(--hc2,color-mix(in srgb,var(--x1) 45%,#a855f7));
  --v1:var(--x1);--v2:var(--x2);--v3:#0d9488;--v4:#d97706;--v5:#db2777;--v6:color-mix(in srgb,var(--x1) 70%,#2563eb);
  --brand:var(--x1);--brand2:var(--x2);--brand-ink:color-mix(in srgb,var(--x1) 80%,#000);
  --brand-soft:color-mix(in srgb,var(--x1) 11%,var(--card));
  --xg:linear-gradient(135deg,var(--x1),var(--x2));--xs:color-mix(in srgb,var(--x1) 7%,var(--card))}
body.vivid[data-dayp]{--v2:var(--x2);--v3:#0d9488}
[data-theme="dark"] body.vivid{--brand:color-mix(in srgb,var(--x1) 70%,#fff);--brand-ink:color-mix(in srgb,var(--x1) 60%,#fff);
  --brand-soft:color-mix(in srgb,var(--x1) 18%,var(--card));--xs:color-mix(in srgb,var(--x1) 12%,var(--card))}

/* ── نوارِ کناری و سربرگ ── */
body.vivid.skin2{--sb-bg:color-mix(in srgb,var(--x1) 58%,#0a0f1f);--sb-hi:rgba(255,255,255,.16);--sb-acc:#fff}
[data-theme="dark"] body.vivid.skin2{--sb-bg:color-mix(in srgb,var(--x1) 38%,#05080f)}
@media(min-width:1001px){
  body.vivid.skin2:not(.navm) #menubar nav{background:linear-gradient(175deg,var(--sb-bg),color-mix(in srgb,var(--x2) 55%,#0a0f1f))}
  body.vivid.skin2:not(.navm) #menubar .mb-brand{background:color-mix(in srgb,var(--sb-bg) 85%,#000)}
  body.vivid.skin2:not(.navm) #nav a,body.vivid.skin2:not(.navm) #nav .ic,body.vivid.skin2:not(.navm) #nav summary{color:rgba(255,255,255,.9)}
  body.vivid.skin2:not(.navm) #nav .mb-drop a:not(.active){color:rgba(255,255,255,.72)}
  body.vivid.skin2 #nav > a.mb-top.active,body.vivid.skin2 #nav .hub-a.active,body.vivid.skin2 #nav .mb-drop a.active{
    background:rgba(255,255,255,.17);box-shadow:inset -3px 0 0 #fff;color:#fff}
  body.vivid.skin2 #nav .mb-drop a.active .ic{color:#fff;filter:none}
}
body.vivid .topbar{border-bottom:0!important;background:linear-gradient(90deg,var(--x1),var(--x2)) bottom/100% 2px no-repeat,
  color-mix(in srgb,var(--bg) 72%,transparent)!important}
body.vivid #modtabs .mt-tab.on{background:var(--xg)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 8px 18px -12px var(--x1)}
@media(max-width:1000px){body.vivid #menubar{background:var(--xg)!important}}

/* ── دکمه‌ها و زبانه‌ها ── */
body.vivid .btn.primary,body.vivid .hq-chip.p,body.vivid button.p{background:var(--xg)!important;border-color:transparent!important;color:#fff!important;
  box-shadow:0 10px 20px -12px var(--x1)}
body.vivid .hq-chip:not(.p):hover{border-color:var(--x1);color:var(--x1)}
body.vivid .hubtabs a.on,body.vivid .hubtabs button.on,body.vivid .rp-seg button.on,body.vivid .seg button.on,
body.vivid .st-tab.on,body.vivid .set-cat-btn.on{background:var(--xg)!important;color:#fff!important;border-color:transparent!important;
  box-shadow:0 8px 18px -12px var(--x1)}
body.vivid .rp-seg,body.vivid .seg{background:color-mix(in srgb,var(--x1) 8%,var(--card))}

/* ── کارت‌ها و پنل‌ها: نوارِ رنگیِ بالای هر کادر ── */
body.vivid .panel,body.vivid .hq-today,body.vivid .hq-feed,body.vivid .hq-w,body.vivid .hq-cal{
  background:linear-gradient(90deg,var(--x1),var(--x2)) top/100% 3px no-repeat,var(--card);
  border-color:color-mix(in srgb,var(--x1) 14%,var(--line));
  box-shadow:0 1px 2px rgba(16,24,40,.04),0 16px 34px -24px color-mix(in srgb,var(--x1) 55%,transparent)}
body.vivid .hq-ask{background:linear-gradient(135deg,color-mix(in srgb,var(--x1) 10%,var(--card)),color-mix(in srgb,var(--x2) 10%,var(--card)));
  border-color:color-mix(in srgb,var(--x1) 22%,var(--line));box-shadow:0 18px 36px -26px var(--x1)}
body.vivid .hq-box{background:var(--card)}
body.vivid .hq-box:focus-within{border-color:var(--x1);box-shadow:0 0 0 4px color-mix(in srgb,var(--x1) 16%,transparent)}
body.vivid .hq-ri{background:var(--xg);color:#fff}
body.vivid .hq-big{color:var(--brand-ink)}
[data-theme="dark"] body.vivid .hq-big{color:var(--ink)}
body.vivid .hx-dot{background:var(--x1)}
body.vivid .hq-chart .c{stroke:var(--x1)}body.vivid .hq-chart .a{fill:var(--x2);opacity:.14}
body.vivid .hq-lg i{border-top-color:var(--x1)}
body.vivid .panel > h3:first-child::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;
  background:var(--xg);vertical-align:2px}

/* ── تقویم ── */
body.vivid .hc-top{background:var(--xg)!important;color:#fff!important;border:0!important}
body.vivid .hc-top *{color:inherit}
body.vivid .hc-d.today,body.vivid .hq-cal .hc-d.today{background:var(--xg)!important;color:#fff!important}
body.vivid .hq-cal .hc-d.sel:not(.today){box-shadow:inset 0 0 0 1.5px var(--x1)}

/* ── جدول‌ها ── */
body.vivid .panel table thead th,body.vivid table.rt thead th{background:color-mix(in srgb,var(--x1) 10%,var(--card));
  color:color-mix(in srgb,var(--x1) 65%,var(--ink));border-color:color-mix(in srgb,var(--x1) 16%,var(--line))}
body.vivid table tbody tr:hover > td{background:var(--xs)}
body.vivid table tbody tr:hover > td:first-child{box-shadow:inset -3px 0 0 var(--x1)}

/* ── نمودارها ── */
body.vivid .viz{--s1:var(--x1);--s2:var(--x2);--s3:#0d9488}

/* ── نشان‌ها، پیوندها و فرم ── */
body.vivid a:not(.btn):not(.mb-top):not(.hub-a):not([class*="tab"]){color:var(--brand-ink)}
[data-theme="dark"] body.vivid a:not(.btn):not(.mb-top):not(.hub-a):not([class*="tab"]){color:var(--brand)}
body.vivid #menubar a,body.vivid #nav a{color:inherit}
body.vivid input:not([type=checkbox]):not([type=radio]):not([type=range]):focus,body.vivid select:focus,body.vivid textarea:focus{
  border-color:var(--x1);box-shadow:0 0 0 4px color-mix(in srgb,var(--x1) 16%,transparent)}
body.vivid input[type=checkbox],body.vivid input[type=radio],body.vivid input[type=range]{accent-color:var(--x1)}
body.vivid #modal h3:first-child{border-bottom:2px solid transparent;
  border-image:linear-gradient(90deg,var(--x1),var(--x2)) 1;padding-bottom:8px}
body.vivid #modal-top{box-shadow:0 2px 0 color-mix(in srgb,var(--x1) 45%,transparent)}

/* ── پروندهٔ تعمیر و کارت‌های تابلو ── */
body.vivid .rfs-bar .on,body.vivid .rfs-bar .cur{background:var(--xg)!important;color:#fff!important;border-color:transparent!important}
body.vivid .rfp-who{background:linear-gradient(135deg,color-mix(in srgb,var(--x1) 8%,var(--card)),color-mix(in srgb,var(--x2) 8%,var(--card)))}

/* ── گوشی: فیلترها، نوارِ پایین و دکمهٔ ＋ ── */
body.vivid .m-chip.on{background:var(--xg)!important;color:#fff!important;border-color:transparent!important}
body.vivid #tabbar a.on,body.vivid .tb-hub a.on{background:color-mix(in srgb,var(--x1) 13%,transparent)!important;color:var(--x1)!important}
body.vivid .tb-plus,body.vivid .tb-plus .tb-pi{background:var(--xg)!important;color:#fff!important}
body.vivid #nav .hub-a.active,body.vivid #nav .hub-p.active{background:color-mix(in srgb,var(--x1) 13%,transparent)}

/* ── ۴۰٫۲۲۳ (کاربر: «رنگِ کلِ نرم‌افزار از یک جا»): کارت‌ها و کاشی‌های بالای صفحه هم یک رنگ، نه رنگین‌کمان ── */
body.vivid .cards > .card:not(.cd-ok):not(.cd-warn):not(.cd-bad){--cd-fg:var(--x1)!important}
body.vivid .ltile:not(.warn){--t:var(--x1)!important}

@media print{body.vivid .panel,body.vivid .hq-w{background:#fff;box-shadow:none}body.vivid .topbar::after{display:none}}