/* =========================================================
   Diaco Student Panel — Persian RTL BI Dashboard
   ========================================================= */

html.dashboard-live-pending #content>:not(.ds-loading-skeleton):not(.acc-page):not(.ds-empty-state){display:none!important}
.app-boot-screen{display:none}
.app-boot-screen__rail{border:1px solid var(--border,#e2e8f0);border-radius:22px;background:repeating-linear-gradient(180deg,transparent 0 48px,color-mix(in srgb,var(--border,#e2e8f0) 70%,transparent) 49px 50px),var(--surface,#fff)}
.app-boot-screen__main{display:flex;flex-direction:column;gap:18px;min-width:0}
.app-boot-screen__bar,.app-boot-screen__hero,.app-boot-screen__card{border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);border-radius:18px}
.app-boot-screen__bar{height:62px}.app-boot-screen__hero{height:180px;background:linear-gradient(110deg,var(--surface,#fff),color-mix(in srgb,var(--pastel-mint,#b8e6d3) 28%,var(--surface,#fff)))}
.app-boot-screen__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.app-boot-screen__card{height:132px}
.app-boot-screen__bar,.app-boot-screen__hero,.app-boot-screen__card{padding:18px;overflow:hidden;position:relative;box-sizing:border-box}
.app-boot-screen i{display:block;height:12px;margin-block-end:12px;border-radius:999px;background:linear-gradient(90deg,var(--skeleton-base,#edf1f4) 25%,var(--skeleton-shine,#f8fafb) 50%,var(--skeleton-base,#edf1f4) 75%);background-size:220% 100%;animation:app-boot-shimmer 1.25s ease-in-out infinite}
.app-boot-screen i:nth-child(1){width:42%}.app-boot-screen i:nth-child(2){width:72%}.app-boot-screen i:nth-child(3){width:58%}
.app-boot-screen__bar{display:flex;align-items:center;gap:14px}.app-boot-screen__bar i{width:18%!important;margin:0}.app-boot-screen__hero i:first-child{height:24px}.app-boot-screen__card i:first-child{height:18px}
@keyframes app-boot-shimmer{0%{background-position:100% 0}100%{background-position:-120% 0}}
.app-boot-screen__brand{position:absolute;left:50%;top:50%;width:154px;height:154px;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:2}.app-boot-screen__brand::before{content:"";position:absolute;width:92px;height:92px;border-radius:30px;background:color-mix(in srgb,var(--brand-300,#6fb98f) 20%,transparent);filter:blur(12px);animation:app-boot-halo 2.4s ease-in-out infinite}.app-boot-screen__brand::after{content:"";position:absolute;z-index:2;width:74px;height:74px;background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.95) 50%,rgba(184,230,211,.3) 60%,transparent 72%);background-size:260% 100%;-webkit-mask:url('../img/diaco/icon-192x192.png') center/contain no-repeat;mask:url('../img/diaco/icon-192x192.png') center/contain no-repeat;mix-blend-mode:screen;pointer-events:none;animation:app-boot-logo-scan 2.15s ease-in-out infinite}.app-boot-screen__logo{position:relative;z-index:1;width:74px;height:74px;object-fit:contain;border-radius:22px;filter:drop-shadow(0 12px 18px rgba(15,118,110,.22));transform:translateZ(0)}.app-boot-screen__orbit{position:absolute;opacity:.42;border:1px solid color-mix(in srgb,var(--brand-500,#0f766e) 35%,transparent);border-radius:50%;will-change:transform;animation:app-boot-orbit 3.6s linear infinite}.app-boot-screen__orbit--one{width:112px;height:112px}.app-boot-screen__orbit--two{width:146px;height:72px;rotate:-28deg;border-color:color-mix(in srgb,var(--pastel-purple,#cdbbff) 58%,transparent);animation-duration:4.8s;animation-direction:reverse}.app-boot-screen__spark{position:absolute;width:6px;height:6px;opacity:.68;border-radius:50%;background:var(--brand-500,#0f766e);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand-500,#0f766e) 10%,transparent);animation:app-boot-spark 2.2s ease-in-out infinite}.app-boot-screen__spark--one{inset-inline-end:8px;inset-block-start:25px}.app-boot-screen__spark--two{inset-inline-start:11px;inset-block-end:30px;background:var(--accent-purple,#8b5cf6);animation-delay:.5s}.app-boot-screen__label{display:none}
@keyframes app-boot-logo-scan{0%,18%{background-position:130% 0;opacity:0}30%{opacity:.95}58%{opacity:.8}72%,100%{background-position:-130% 0;opacity:0}}@keyframes app-boot-halo{0%,100%{opacity:.4;transform:scale(.9)}50%{opacity:.72;transform:scale(1.05)}}@keyframes app-boot-orbit{to{transform:rotate(1turn)}}@keyframes app-boot-spark{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:.75;transform:scale(1.08)}}
body.app-ready .app-boot-screen{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:700px){.app-boot-screen{grid-template-columns:1fr;padding:14px}.app-boot-screen__rail{display:none}.app-boot-screen__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.app-boot-screen i,.app-boot-screen__brand::before,.app-boot-screen__brand::after,.app-boot-screen__orbit,.app-boot-screen__spark{animation:none}.app-boot-screen__brand::after{display:none}}

:root {
  /* Brand — Diaco (official identity: "Intelligence That Leads" teal/green) */
  --brand-50:  #eef7f2;
  --brand-100: #d7ebe0;
  --brand-200: #b0d8c1;
  --brand-300: #6fb98f;     /* Greenery */
  --brand-400: #4a9686;     /* [crm-modular-system] diaco-qa fix — interpolated between 300/500; this token was referenced (ds-patterns.css .ds-pattern-wizard::before + 2 other call sites) but never defined, so every consumer's `var(--brand-400)` silently computed to `background-image:none` (confirmed via getComputedStyle) */
  --brand-500: #2c7873;     /* Rain — primary */
  --brand-600: #004445;     /* Cadet Blue */
  --brand-700: #021c1e;     /* Blue Black */

  --accent-300: #a1d2b6;
  --accent-500: #6fb98f;   /* Greenery accent */
  --accent-600: #2a726d;

  --pastel-mint:  #b8e6d3;
  --pastel-sky:   #b8d4f1;
  --pastel-rose:  #f5c2c7;
  --pastel-lemon: #fef3c7;
  --pastel-lilac: #ddd6fe;
  --pastel-peach: #ffe4cc;

  /* Status (pastel-balanced) */
  --green-500: #6dbf8f;
  --green-50:  #ecf9f1;
  --red-500:   #e8788c;
  --red-50:    #fcedef;
  --amber-500: #f0b86e;
  --amber-50:  #fff5e6;
  --purple-500:#a78bfa;

  /* Pipeline stage palette — governed Design System colors (solid + pastel). */
  --stage-solid-teal:#2c7873; --stage-solid-mint:#6fb98f; --stage-solid-blue:#3b82f6;
  --stage-solid-sky:#0ea5e9; --stage-solid-cyan:#06b6d4; --stage-solid-aqua:#14b8a6;
  --stage-solid-green:#22c55e; --stage-solid-lime:#84cc16; --stage-solid-yellow:#eab308;
  --stage-solid-amber:#f59e0b; --stage-solid-orange:#f97316; --stage-solid-red:#ef4444;
  --stage-solid-pink:#ec4899; --stage-solid-violet:#8b5cf6; --stage-solid-slate:#64748b;
  --stage-pastel-mint:#b8e6d3; --stage-pastel-sky:#b8d4f1; --stage-pastel-rose:#f5c2c7;
  --stage-pastel-lemon:#fef3c7; --stage-pastel-lilac:#ddd6fe; --stage-pastel-peach:#ffe4cc;
  --stage-pastel-blue:#dbeafe; --stage-pastel-cyan:#cffafe; --stage-pastel-aqua:#ccfbf1;
  --stage-pastel-green:#dcfce7; --stage-pastel-lime:#ecfccb; --stage-pastel-yellow:#fef9c3;
  --stage-pastel-orange:#ffedd5; --stage-pastel-pink:#fce7f3; --stage-pastel-slate:#e2e8f0;

  /* Light theme — modern clean (Linear/Stripe/Vercel inspired) */
  --bg:           #f7f8fa;
  --surface:      #ffffff;
  --surface-2:    #f5f6f9;
  --surface-3:    #eef0f5;
  --border:       rgba(15, 23, 42, .07);
  --border-strong:rgba(15, 23, 42, .12);
  --text:         #0f172a;
  --text-muted:   #6b7280;
  --text-faint:   #9ca3af;

  /* Modern stacked shadows */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, .04), 0 1px 2px rgba(16, 24, 40, .03);
  --shadow:    0 4px 6px -2px rgba(16, 24, 40, .03), 0 12px 16px -4px rgba(16, 24, 40, .06);
  --shadow-lg: 0 12px 24px -8px rgba(16, 24, 40, .10), 0 24px 40px -12px rgba(16, 24, 40, .08);

  /* Heatmap (navy gradient) */
  --hm-0: #f5e8ff;
  --hm-1: #e2bfff;
  --hm-2: #c98dff;
  --hm-3: #a020f0;
  --hm-4: #6a0dad;

  --radius-sm: 8px;
  --radius:    16px;
  --radius-lg: 24px;

  --sidebar-w: 320px;
  --sidebar-rail-w: 72px;
  --topbar-h:  64px;

  /* Font — overridden at runtime by DsFontPicker via localStorage */
  --ds-font: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Spacing scale — Progressive Disclosure/White-Space pass (ux-cognitive-load-review).
     Macro (between top-level sections) > meso (card head→body) > micro (rows inside a
     card) should read as visually distinct tiers, not one flat rhythm. */
  --space-micro: 8px;
  --space-meso:  20px;
  --space-macro: 26px;
}

[data-theme="dark"] {
  --bg:        #0a1530;
  --surface:   #0f1d3f;
  --surface-2: #16264f;
  --border:    #1f3160;
  --text:      #e6ecff;
  --text-muted:#94a3b8;
  --shadow:    0 6px 22px rgba(0,0,0,.35);
  --shadow-lg: 0 18px 40px rgba(0,0,0,.45);

  --hm-0: #2a1146;
  --hm-1: #4a1f7a;
  --hm-2: #7c2dbf;
  --hm-3: #a020f0;
  --hm-4: #d18bff;
}

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  font-family: var(--ds-font, 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif);
  background:
    radial-gradient(circle at 0% 0%,   rgba(111, 185, 143, .22) 0%, transparent 35%),
    radial-gradient(circle at 100% 0%, rgba(44, 120, 115, .16) 0%, transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(0, 68, 69, .12) 0%, transparent 40%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.005em;
  overflow-x: hidden;
  max-width: 100vw;
}
body { display: flex; min-height: 100vh; }
.main { min-width: 0; overflow-x: hidden; }
.content { min-width: 0; }
.card, .kpi { min-width: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; border-radius: 6px; }

/* [FE23-global-min-width-zero] Grid/flex items inside .content automatically
   get min-width:0 so they never block their parent track from shrinking.
   Without this, a grid item's intrinsic content size becomes the track's
   effective floor even when the track definition says minmax(0, Xpx).
   img excluded: explicit width/height on avatars already constrains them. */
.content * { min-width: 0; }
.content img { min-width: auto; }

body { font-feature-settings: 'ss02' on; }

/* ---------- App-wide selection & cursor defaults ---------- */
/* Dashboard surfaces should feel like a native app, not a document — no text-caret,
   no accidental selection. Allow opt-in selection on inputs and dialog/transcript
   content where users genuinely need to copy. */
body {
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
}
input, textarea {
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
select { cursor: pointer; user-select: none; }
:where(
  a[href], button:not(:disabled), summary,
  input[type="button"]:not(:disabled), input[type="submit"]:not(:disabled),
  input[type="reset"]:not(:disabled), input[type="checkbox"]:not(:disabled),
  input[type="radio"]:not(:disabled), input[type="file"]:not(:disabled),
  select:not(:disabled), label[for], label:has(input:not(:disabled)),
  [role="button"]:not([aria-disabled="true"]), [role="link"]:not([aria-disabled="true"]),
  [role="tab"]:not([aria-disabled="true"]), [role="menuitem"]:not([aria-disabled="true"]),
  [role="option"]:not([aria-disabled="true"]), [role="switch"]:not([aria-disabled="true"]),
  [onclick], [data-route], [data-action], [data-page], [data-href], [data-nav], [data-clickable]
) {
  cursor: pointer;
  z-index: 2;
}
:where(button, input, select, textarea):disabled,
[aria-disabled="true"], [inert], [inert] * {
  cursor: not-allowed !important;
}
/* Canonical RTL order for labelled switches: copy at the right, control at the left. */
.ds-switch { flex-direction: row-reverse; }
[contenteditable="true"], code, pre,
.allow-select, .allow-select *,
.call-transcript, .call-transcript *,
.msg-advisor, .msg-other, .msg-system, .msg-bubble {
  user-select: text;
  -webkit-user-select: text;
  cursor: text;
}

/* ---------- Animations (rich, polished) ---------- */
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUpLg { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInLeft  { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@keyframes popIn    { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shimmer {
  0%   { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(44, 120, 115, .4); }
  50%      { box-shadow: 0 0 0 14px rgba(44, 120, 115, 0); }
}
@keyframes pulseGlowRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 120, 140, .5); }
  50%      { box-shadow: 0 0 0 12px rgba(232, 120, 140, 0); }
}
@keyframes pulseGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(109, 191, 143, .5); }
  50%      { box-shadow: 0 0 0 12px rgba(109, 191, 143, 0); }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes floatSmall {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes shineGlide {
  0%   { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(300%) skewX(-20deg); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-4deg); }
  75%      { transform: rotate(4deg); }
}
@keyframes growBar {
  from { transform: scaleY(0); transform-origin: bottom; }
  to   { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes drawRing {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
  20%, 40%, 60%, 80%      { transform: translateX(2px); }
}
@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes flipIn {
  from { opacity: 0; transform: perspective(600px) rotateX(-30deg); }
  to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
}

/* Stagger children with attr-based delay */
.content > * { animation: slideUpLg .55s cubic-bezier(.22,.7,.16,1) both; }
.content > *:nth-child(1) { animation-delay: .02s; }
.content > *:nth-child(2) { animation-delay: .07s; }
.content > *:nth-child(3) { animation-delay: .12s; }
.content > *:nth-child(4) { animation-delay: .17s; }
.content > *:nth-child(5) { animation-delay: .22s; }
.content > *:nth-child(6) { animation-delay: .27s; }
.content > *:nth-child(7) { animation-delay: .32s; }
.content > *:nth-child(8) { animation-delay: .37s; }
.content > *:nth-child(9) { animation-delay: .42s; }
.content > *:nth-child(n+10) { animation-delay: .47s; }

/* KPI pop in with stagger */
.kpi      { animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.kpi:nth-child(1) { animation-delay: .08s; }
.kpi:nth-child(2) { animation-delay: .16s; }
.kpi:nth-child(3) { animation-delay: .24s; }
.kpi:nth-child(4) { animation-delay: .32s; }

/* Pulse cells stagger */
.pulse-cell { animation: scaleIn .45s cubic-bezier(.22,.7,.16,1) both; }
.pulse-cell:nth-child(1) { animation-delay: .05s; }
.pulse-cell:nth-child(2) { animation-delay: .10s; }
.pulse-cell:nth-child(3) { animation-delay: .15s; }
.pulse-cell:nth-child(4) { animation-delay: .20s; }
.pulse-cell:nth-child(5) { animation-delay: .25s; }
.pulse-cell:nth-child(6) { animation-delay: .30s; }

/* Goal items stagger */
.goal-item { animation: slideInRight .5s cubic-bezier(.22,.7,.16,1) both; }
.goal-item:nth-child(odd)  { animation-name: slideInRight; }
.goal-item:nth-child(even) { animation-name: slideInLeft; }
.goal-item:nth-child(1) { animation-delay: .05s; }
.goal-item:nth-child(2) { animation-delay: .12s; }
.goal-item:nth-child(3) { animation-delay: .19s; }
.goal-item:nth-child(4) { animation-delay: .26s; }
.goal-item:nth-child(5) { animation-delay: .33s; }
.goal-item:nth-child(6) { animation-delay: .40s; }

/* Alerts list */
.alert { animation: slideInLeft .4s cubic-bezier(.22,.7,.16,1) both; }
[dir="rtl"] .alert { animation-name: slideInRight; }
.alert:nth-child(1) { animation-delay: .04s; }
.alert:nth-child(2) { animation-delay: .10s; }
.alert:nth-child(3) { animation-delay: .16s; }
.alert:nth-child(4) { animation-delay: .22s; }
.alert:nth-child(5) { animation-delay: .28s; }
.alert:nth-child(6) { animation-delay: .34s; }
.alert:nth-child(7) { animation-delay: .40s; }
.alert:nth-child(8) { animation-delay: .46s; }

/* VIP / Hot leads list — wave pattern */
.vip-row { animation: slideUp .4s cubic-bezier(.22,.7,.16,1) both; }
.vip-row:nth-child(1) { animation-delay: .06s; }
.vip-row:nth-child(2) { animation-delay: .12s; }
.vip-row:nth-child(3) { animation-delay: .18s; }
.vip-row:nth-child(4) { animation-delay: .24s; }
.vip-row:nth-child(5) { animation-delay: .30s; }

/* Live feed entries */
.live-item { animation: slideInRight .4s cubic-bezier(.22,.7,.16,1) both; }
[dir="rtl"] .live-item { animation-name: slideInLeft; }
.live-item:nth-child(1) { animation-delay: .04s; }
.live-item:nth-child(2) { animation-delay: .09s; }
.live-item:nth-child(3) { animation-delay: .14s; }
.live-item:nth-child(4) { animation-delay: .19s; }
.live-item:nth-child(5) { animation-delay: .24s; }
.live-item:nth-child(6) { animation-delay: .29s; }
.live-item:nth-child(7) { animation-delay: .34s; }
.live-item:nth-child(8) { animation-delay: .39s; }
.live-item:nth-child(n+9) { animation-delay: .44s; }
.live-item:first-child .live-icon { animation: wiggle 2s ease-in-out infinite; }

/* Account cards */
.account-card { animation: flipIn .55s cubic-bezier(.22,.7,.16,1) both; }
.account-card:nth-child(1) { animation-delay: .06s; }
.account-card:nth-child(2) { animation-delay: .12s; }
.account-card:nth-child(3) { animation-delay: .18s; }
.account-card:nth-child(4) { animation-delay: .24s; }
.account-card:nth-child(5) { animation-delay: .30s; }
.account-card:nth-child(6) { animation-delay: .36s; }
.account-card:nth-child(7) { animation-delay: .42s; }

/* Priority cards — pop in with bounce */
.priority-card { animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.priority-card:nth-child(1) { animation-delay: .15s; }
.priority-card:nth-child(2) { animation-delay: .22s; }
.priority-card:nth-child(3) { animation-delay: .29s; }
.priority-card:nth-child(4) { animation-delay: .36s; }

/* Heatmap cells reveal in waves */
.hm-cell { animation: scaleIn .35s cubic-bezier(.22,.7,.16,1) both; }
.hm-col:nth-child(1) .hm-cell:nth-child(1) { animation-delay: .02s; }
.hm-col:nth-child(1) .hm-cell:nth-child(2) { animation-delay: .04s; }
.hm-col:nth-child(1) .hm-cell:nth-child(3) { animation-delay: .06s; }
.hm-col:nth-child(2) .hm-cell:nth-child(1) { animation-delay: .04s; }
.hm-col:nth-child(2) .hm-cell:nth-child(2) { animation-delay: .06s; }
.hm-col:nth-child(2) .hm-cell:nth-child(3) { animation-delay: .08s; }
.hm-col:nth-child(3) .hm-cell:nth-child(1) { animation-delay: .06s; }
.hm-col:nth-child(3) .hm-cell:nth-child(2) { animation-delay: .08s; }
.hm-col:nth-child(3) .hm-cell:nth-child(3) { animation-delay: .10s; }
.hm-col:nth-child(4) .hm-cell:nth-child(1) { animation-delay: .08s; }
.hm-col:nth-child(4) .hm-cell:nth-child(2) { animation-delay: .10s; }
.hm-col:nth-child(4) .hm-cell:nth-child(3) { animation-delay: .12s; }
.hm-col:nth-child(5) .hm-cell:nth-child(1) { animation-delay: .10s; }
.hm-col:nth-child(5) .hm-cell:nth-child(2) { animation-delay: .12s; }
.hm-col:nth-child(5) .hm-cell:nth-child(3) { animation-delay: .14s; }
.hm-col:nth-child(6) .hm-cell:nth-child(1) { animation-delay: .12s; }
.hm-col:nth-child(7) .hm-cell:nth-child(1) { animation-delay: .14s; }
.hm-col:nth-child(8) .hm-cell:nth-child(1) { animation-delay: .16s; }

/* Channel rows entrance */
.channel-row { animation: slideUp .5s cubic-bezier(.22,.7,.16,1) both; }
.channel-row:nth-child(1) { animation-delay: .04s; }
.channel-row:nth-child(2) { animation-delay: .10s; }
.channel-row:nth-child(3) { animation-delay: .16s; }
.channel-row:nth-child(4) { animation-delay: .22s; }
.channel-row:nth-child(5) { animation-delay: .28s; }
.channel-row:nth-child(6) { animation-delay: .34s; }
.channel-row:nth-child(7) { animation-delay: .40s; }
.channel-row:nth-child(n+8) { animation-delay: .46s; }

/* Course/scorecard grid items */
.course-card, .res-card, .cert-card, .job-card, .mk-card, .funnel-row {
  animation: scaleIn .5s cubic-bezier(.22,.7,.16,1) both;
}
.course-card:nth-child(1), .res-card:nth-child(1), .cert-card:nth-child(1), .job-card:nth-child(1), .mk-card:nth-child(1), .funnel-row:nth-child(1) { animation-delay: .05s; }
.course-card:nth-child(2), .res-card:nth-child(2), .cert-card:nth-child(2), .job-card:nth-child(2), .mk-card:nth-child(2), .funnel-row:nth-child(2) { animation-delay: .10s; }
.course-card:nth-child(3), .res-card:nth-child(3), .cert-card:nth-child(3), .job-card:nth-child(3), .mk-card:nth-child(3), .funnel-row:nth-child(3) { animation-delay: .15s; }
.course-card:nth-child(4), .res-card:nth-child(4), .cert-card:nth-child(4), .job-card:nth-child(4), .mk-card:nth-child(4), .funnel-row:nth-child(4) { animation-delay: .20s; }
.course-card:nth-child(5), .res-card:nth-child(5), .funnel-row:nth-child(5) { animation-delay: .25s; }
.course-card:nth-child(6), .res-card:nth-child(6), .funnel-row:nth-child(6) { animation-delay: .30s; }

/* Sidebar nav items glide in — uses nth-of-type so .nav-section <div> dividers don't break the count */
.nav > .nav-item { animation: slideInRight .35s cubic-bezier(.22,.7,.16,1) both; }
[dir="rtl"] .nav > .nav-item { animation-name: slideInLeft; }
.nav > .nav-item:nth-of-type(1)  { animation-delay: .04s; }
.nav > .nav-item:nth-of-type(2)  { animation-delay: .07s; }
.nav > .nav-item:nth-of-type(3)  { animation-delay: .10s; }
.nav > .nav-item:nth-of-type(4)  { animation-delay: .13s; }
.nav > .nav-item:nth-of-type(5)  { animation-delay: .16s; }
.nav > .nav-item:nth-of-type(6)  { animation-delay: .19s; }
.nav > .nav-item:nth-of-type(7)  { animation-delay: .22s; }
.nav > .nav-item:nth-of-type(8)  { animation-delay: .25s; }
.nav > .nav-item:nth-of-type(9)  { animation-delay: .28s; }
.nav > .nav-item:nth-of-type(10) { animation-delay: .31s; }
.nav > .nav-item:nth-of-type(n+11) { animation-delay: .34s; }

/* Card head shimmer on hover */
.card { position: relative; }
.card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transition: left .8s cubic-bezier(.22,.7,.16,1);
  pointer-events: none;
  border-radius: inherit;
}
.card:hover::after { left: 200%; }

/* KPI value — solid color first so short digits (۰) stay visible;
   gradient clip is progressive enhancement when the browser paints it. */
.kpi-value, .stat-value, .mk-value, .pulse-value {
  color: var(--text);
  background: linear-gradient(135deg, var(--text), var(--brand-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .kpi-value, .stat-value, .mk-value, .pulse-value {
    -webkit-text-fill-color: var(--text);
    background: none;
  }
}
[data-theme="dark"] .kpi-value, [data-theme="dark"] .stat-value, [data-theme="dark"] .mk-value, [data-theme="dark"] .pulse-value {
  background: linear-gradient(135deg, var(--text), #b8d4f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Mood ring accent rotation */
@keyframes moodRotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.mood-ring {
  background-size: 100% 100%;
  position: relative;
}
.mood-ring::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(transparent 0%, var(--accent-500) 30%, transparent 60%);
  z-index: -1;
  animation: moodRotate 8s linear infinite;
  opacity: .35;
}

/* Notif badge — blink + pulse ring */
.notif-dot { animation: notifBadgeBlink 1.6s ease-in-out infinite; }

/* Brand logo wiggle on hover */
.brand-logo:hover { animation: wiggle .6s ease-in-out; }

/* Active nav icon — kept subtle; SVG icons handle transform fine */
.nav-item.active .nav-icon { animation: floatSmall 3.2s ease-in-out infinite; }

/* Topbar avatar bounces gently (sidebar footer button avatar stays still — it's inside a clickable button) */
.topbar .user-mini .avatar { animation: floatSmall 4s ease-in-out infinite; }
/* The sidebar rail toggle is intentionally removed from the desktop chrome
   (the icon rail opens on hover/click). Phones and tablets have no rail, so
   there it is the only way into the menu. */
@media (min-width: 901px) {
  #sidebar-toggle,
  .sidebar-toggle,
  [data-sidebar-toggle] { display: none !important; }
}
@media (max-width: 900px) {
  #sidebar-toggle { flex: 0 0 auto; }
}
/* Notification UI remains functional in code, but the global header trigger
   is intentionally hidden for this product surface. */
#notif-toggle { display: none !important; }

/* Live dot pulses red-then-green */
.live-dot { animation: pulseGlowGreen 1.8s infinite; }

/* Score-pill subtle pop on hover */
.score-pill, .chip, .type-pill {
  transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease;
}
.score-pill:hover, .chip:hover, .type-pill:hover {
  transform: scale(1.08) translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .08);
}

/* Account card header icon floats */
.account-icon { animation: floatSmall 3s ease-in-out infinite; }

/* Drawer entrance */
.drawer.open .dsec, .drawer.open .drawer-hero, .drawer.open .drawer-score-row,
.drawer.open .power-card {
  animation: slideUp .5s cubic-bezier(.22,.7,.16,1) both;
}
.drawer.open .drawer-hero       { animation-delay: .05s; }
.drawer.open .drawer-score-row  { animation-delay: .12s; }
.drawer.open .power-card        { animation-delay: .19s; }
.drawer.open .dsec:nth-of-type(1) { animation-delay: .26s; }
.drawer.open .dsec:nth-of-type(2) { animation-delay: .31s; }
.drawer.open .dsec:nth-of-type(3) { animation-delay: .36s; }
.drawer.open .dsec:nth-of-type(4) { animation-delay: .41s; }
.drawer.open .dsec:nth-of-type(5) { animation-delay: .46s; }
.drawer.open .dsec:nth-of-type(n+6) { animation-delay: .51s; }

/* Roadmap steps slide in */
.roadmap-step { animation: slideInRight .4s cubic-bezier(.22,.7,.16,1) both; }
[dir="rtl"] .roadmap-step { animation-name: slideInLeft; }
.roadmap-step:nth-child(1) { animation-delay: .35s; }
.roadmap-step:nth-child(2) { animation-delay: .42s; }
.roadmap-step:nth-child(3) { animation-delay: .49s; }
.roadmap-step:nth-child(4) { animation-delay: .56s; }
.roadmap-step:nth-child(5) { animation-delay: .63s; }

/* Power bars fill in */
.power-bar::before { animation: shineGlide 2.5s ease-in-out infinite; }

/* Smooth scroll global */
html { scroll-behavior: smooth; }

/* =============================================================
   NOTIFICATION POPUP
   ============================================================= */
.notif-wrap { position: relative; overflow: visible; }
.notif-popup {
  position: absolute;
  top: calc(100% + 12px);
  inset-inline-end: 0;          /* RTL: anchor left edge to wrapper left → popup extends RIGHT into screen */
  inset-inline-start: auto;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(-10px) scale(.96);
  transform-origin: top left;
  pointer-events: none;
  transition: all .25s cubic-bezier(.22,.7,.16,1);
  z-index: 200;
  overflow: hidden;
}
.notif-popup.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.notif-popup-head {
  padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--pastel-sky), var(--pastel-lilac));
}
.notif-popup-head strong { font-size: 14px; }
/* [erp-menu-dual-views] Founder broadcast-announcements request — compose
   entry point, grouped with the title so .notif-popup-head keeps its
   two-slot (title-group / count) space-between layout. */
.notif-popup-head-left { display: flex; align-items: center; gap: 8px; }
.notif-compose-btn {
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--brand-300);
  background: var(--surface); color: var(--brand-600, var(--brand-500));
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, transform .1s ease;
}
.notif-compose-btn:hover { background: var(--brand-50); }
.notif-compose-btn:active { transform: scale(.97); }
/* RFC-0052 T5 ([erp-gaps-group-e-workspace]) — gear link to the personal
   notification-preference card in #profile-settings. */
.notif-settings-link {
  font-size: 14px; line-height: 1; text-decoration: none; opacity: .7;
  transition: opacity .15s ease, transform .15s ease;
}
.notif-settings-link:hover { opacity: 1; transform: rotate(20deg); }
.notif-popup-body { max-height: 380px; overflow-y: auto; padding: 6px; }
.notif-popup-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.notif-popup-foot a {
  font-size: 12px;
  color: var(--brand-500);
  font-weight: 600;
}
.notif-item {
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease;
}
.notif-item:hover { background: var(--surface-2); }
/* [erp-menu-dual-views] Founder broadcast-announcements request — a real
   admin-posted announcement (core.broadcast_announcements, GET /core/
   broadcasts) needs to visually read as "from an admin", not a generic
   auto-generated smart-alert: a filled pastel background + a slightly
   thicker inline-start accent bar reusing the SAME red/amber/green tone
   variables .notif-dot-color already keys off of. */
.notif-broadcast {
  background: var(--surface-2);
  border-inline-start: 3px solid var(--border);
  border-radius: 8px;
}
.notif-broadcast.notif-red    { border-inline-start-color: var(--red-500); background: color-mix(in srgb, var(--red-500) 8%, var(--surface-2)); }
.notif-broadcast.notif-amber  { border-inline-start-color: var(--amber-500); background: color-mix(in srgb, var(--amber-500) 8%, var(--surface-2)); }
.notif-broadcast.notif-green  { border-inline-start-color: var(--green-500); background: color-mix(in srgb, var(--green-500) 8%, var(--surface-2)); }
/* live-header-feed.js (RFC-0052 T4, [erp-gaps-group-e-workspace]) — a real
   Live Feed Engine item gets a THIRD grid column for its own dismiss button
   (`.notif-item`'s base grid-template-columns is only `10px 1fr`, sized for
   .notif-dot-color + .notif-info; a broadcast never needed a third slot). */
.notif-livefeed { grid-template-columns: 6px 38px minmax(0,1fr) auto; align-items: start; }
.notif-livefeed.is-actionable { cursor: pointer; }
.notif-livefeed.is-actionable:focus-visible { outline: 2px solid var(--brand-500); outline-offset: -2px; }
.lhf-icon { display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e8f3ff;color:#3478c7; }
.lhf-icon.is-green { background:#dff5e9;color:#23815b; }
.lhf-icon.is-rose,.lhf-icon.is-red { background:#ffe3e8;color:#bd3d55; }
.lhf-icon.is-amber { background:#fff0c9;color:#b66e13; }
.lhf-call-details { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 10px;margin-top:7px; }
.lhf-call-details span { display:flex;align-items:center;gap:5px;min-width:0;color:var(--text-muted);font-size:11px;line-height:1.55; }
.lhf-call-details span i { display:grid;place-items:center;flex:0 0 auto; }
.lhf-call-details span:first-child { direction:ltr;justify-content:flex-end;text-align:end;font-variant-numeric:tabular-nums; }
@media(max-width:520px){.lhf-call-details{grid-template-columns:1fr}}
.notif-livefeed-dismiss {
  border: none; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 4px 6px;
  border-radius: 6px; align-self: start;
}
.notif-livefeed-dismiss:hover { background: var(--surface-3); color: var(--text); }
.notif-livefeed-dismiss:disabled { opacity: .5; cursor: default; }
.notif-dot-color {
  width: 8px; height: 8px; border-radius: 50%;
  align-self: flex-start; margin-top: 5px;
}
.notif-red    .notif-dot-color { background: var(--red-500); animation: pulseGlowRed 2s infinite; }
.notif-amber  .notif-dot-color { background: var(--amber-500); }
.notif-green  .notif-dot-color { background: var(--green-500); }
.notif-title { font-weight: 600; font-size: 13px; line-height: 1.5; }
.notif-detail { font-size: 11px; color: var(--text-muted); margin-top: 2px; line-height: 1.6; }

/* =============================================================
   NAV-FEATURED (journey/workspace/automation)
   ============================================================= */
.nav-item.nav-featured {
  color: var(--text);
  font-weight: 600;
}
.nav-item.nav-featured .nav-icon {
  color: var(--accent-600);
  opacity: 1;
}
.nav-item.nav-featured.active {
  background: linear-gradient(135deg, rgba(244, 162, 97, .14), rgba(244, 162, 97, .04));
  color: var(--accent-700, var(--accent-600));
  box-shadow: inset 0 0 0 1px rgba(244, 162, 97, .22);
}
.nav-item.nav-featured.active::before {
  background: linear-gradient(180deg, var(--accent-500), var(--accent-600));
}
.nav-item.nav-featured.active .nav-icon { color: var(--accent-600); }

.nav-badge {
  margin-inline-start: auto;
  font-size: 9.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  letter-spacing: .4px;
  flex-shrink: 0;
  line-height: 1.4;
}
.nav-badge-new {
  background: rgba(34, 197, 94, .12);
  color: var(--green-600, #16a34a);
  border: 1px solid rgba(34, 197, 94, .22);
}
.nav-badge-star {
  background: rgba(244, 162, 97, .14);
  color: var(--accent-600);
  border: 1px solid rgba(244, 162, 97, .25);
  position: relative;
}
.nav-badge-star::before {
  content: '✦';
  margin-inline-end: 3px;
  font-size: 9px;
  opacity: .85;
}
.nav-item.nav-featured.active .nav-badge {
  background: rgba(255, 255, 255, .55);
  border-color: transparent;
}
[data-theme="dark"] .nav-badge-new {
  background: rgba(34, 197, 94, .14);
  color: #4ade80;
  border-color: rgba(34, 197, 94, .25);
}
[data-theme="dark"] .nav-badge-star {
  background: rgba(244, 162, 97, .16);
  color: #fbbf77;
  border-color: rgba(244, 162, 97, .3);
}

/* =============================================================
   SIDEBAR COLLAPSE (desktop)
   ============================================================= */
@media (min-width: 901px) {
  body.sidebar-collapsed .sidebar {
    width: 0;
    min-width: 0;
    overflow: hidden;
    border-inline-start: none;
    transition: width .25s cubic-bezier(.22,.7,.16,1);
  }
  body:not(.sidebar-collapsed) .sidebar {
    transition: width .25s cubic-bezier(.22,.7,.16,1);
  }
}

/* =============================================================
   JOURNEY HERO (full page)
   ============================================================= */
/* #journey-host (renderJourney() in app.js) appends a dozen-odd sections —
   hero, c360-strip/insights/vitals/timeline, identity graph, sales
   playbook, Diaco-attribution power-card, a closing grid-2 — as plain
   block children. Most carry their own ~14-16px margin, but the last
   three (playbook-card/power-card/grid-2, all shared classes used
   elsewhere with their own spacing context) don't, so they were rendering
   flush against each other with zero white space. A flex column + the
   site's macro gap fixes every gap at once, including ones that already
   have a margin (margin doesn't collapse between flex items, so those
   just get a bit more — matching the .dash-mc-hero/.dash-mc-tabs
   precedent inside .content). [ux-cognitive-load-review] */
#journey-host { display: flex; flex-direction: column; gap: var(--space-macro, 26px); }

.journey-hero {
  background: linear-gradient(135deg, rgba(184,212,241,.3), rgba(255,228,204,.25));
  border: 1px solid var(--border);
}
.journey-hero .score-ring {
  width: 100px; height: 100px;
  background: conic-gradient(var(--green-500) calc(var(--p) * 1%), var(--surface-2) 0);
}
.journey-hero .score-ring::before {
  background: var(--surface);
}
.journey-hero .score-ring .pct { font-size: 20px; }
.journey-hero .score-ring .lbl { font-size: 9px; }

/* =============================================================
   SALES PLAYBOOK (در CRM دیدار · راهنمای کارشناس)
   ============================================================= */
.playbook-card {
  background: linear-gradient(135deg, rgba(212,160,23,.06), rgba(184,212,241,.10));
  border: 1px solid var(--accent-300);
}
.playbook-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.playbook-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  padding: 12px 14px;
  background: var(--surface);
  border-radius: 10px;
  border-inline-start: 3px solid var(--accent-500);
  font-size: 13px;
  align-items: center;
}
@media (max-width: 800px) {
  .playbook-row { grid-template-columns: 1fr; }
}
.playbook-label {
  font-weight: 700;
  color: var(--text-muted);
  font-size: 12px;
}
.playbook-value { line-height: 1.7; }
.playbook-tip {
  background: linear-gradient(135deg, rgba(244,162,97,.10), transparent);
  padding: 10px 12px;
  border-radius: 8px;
  font-style: italic;
}

.playbook-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 700px) { .playbook-cols { grid-template-columns: 1fr; } }
.playbook-col {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
}
.playbook-col h5 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
}
.playbook-col ul {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 12px;
  line-height: 1.9;
}
.playbook-col li { padding: 4px 0; }
.playbook-do {
  border: 1px solid rgba(109, 191, 143, .35);
  background: linear-gradient(135deg, rgba(184,230,211,.18), transparent);
}
.playbook-do h5 { color: #2f8a5e; }
.playbook-dont {
  border: 1px solid rgba(232, 120, 140, .35);
  background: linear-gradient(135deg, rgba(245,194,199,.18), transparent);
}
.playbook-dont h5 { color: #b14458; }

/* =============================================================
   PEOPLE GRID (Customer Journey list)
   ============================================================= */
.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.person-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  cursor: pointer;
  transition: all .25s cubic-bezier(.22,.7,.16,1);
  position: relative;
  overflow: hidden;
}
.person-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  transform: scaleX(0);
  transform-origin: start;
  transition: transform .3s cubic-bezier(.22,.7,.16,1);
}
.person-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: var(--brand-300);
}
.person-card:hover::before { transform: scaleX(1); }
.person-card.active {
  border-color: var(--brand-500);
  box-shadow: 0 8px 24px rgba(44, 120, 115, .25);
}
.person-card.active::before { transform: scaleX(1); }

.person-head {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.avatar.anonymous {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  font-weight: 800;
}
.person-info { flex: 1; min-width: 0; }
.person-name { font-weight: 700; font-size: 14px; }
.person-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

.person-body {
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 12px 0;
}
.person-section {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 10px 12px;
}
.person-section-title {
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 6px;
  color: var(--brand-700);
}
.person-line {
  font-size: 11px;
  line-height: 1.7;
  color: var(--text);
  padding: 2px 0;
}

.person-foot {
  display: flex; gap: 12px; align-items: center;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  flex-wrap: wrap;
}
.person-stat { font-size: 11px; }
.person-cta { white-space: nowrap; }

/* =============================================================
   AUTOMATION BUILDER — n8n-style canvas (full clone)
   prefix: nx- (Node eXperience)
   ============================================================= */

.nx-shell {
  --nx-bg:        var(--surface-2);
  --nx-surface:   var(--surface);
  --nx-surface-2: var(--surface-3);
  --nx-border:    var(--border-strong);
  --nx-text:      var(--text);
  --nx-muted:     var(--text-muted);
  --nx-grid-dot:  rgba(15, 23, 42, .12);
  --nx-trigger:   #2c7873;
  --nx-condition: #f0b86e;
  --nx-action:    #6dbf8f;
  --nx-shadow:    0 1px 2px rgba(16,24,40,.05), 0 6px 18px rgba(16,24,40,.07);
  --nx-shadow-lg: 0 10px 30px rgba(16,24,40,.18);
  --nx-radius:    14px;

  position: fixed;
  inset: var(--topbar-h) 0 0 0;
  inset-inline-start: var(--sidebar-w);
  display: grid;
  grid-template-rows: 56px 1fr;
  background: var(--nx-bg);
  z-index: 30;
  font-size: 13px;
  color: var(--nx-text);
  transition: inset-inline-start .25s cubic-bezier(.22,.7,.16,1);
}
body.sidebar-collapsed .nx-shell {
  inset-inline-start: 0;
}
body.sidebar-rail-mode:not(.sidebar-collapsed) .nx-shell {
  inset-inline-start: var(--sidebar-rail-w);
}
.nx-shell[data-nx-theme="dark"] {
  --nx-bg:        #0a1226;
  --nx-surface:   #11193a;
  --nx-surface-2: #182253;
  --nx-border:    #243168;
  --nx-text:      #e6ecff;
  --nx-muted:     #94a3b8;
  --nx-grid-dot:  rgba(180, 200, 255, .10);
  --nx-shadow:    0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
  --nx-shadow-lg: 0 14px 40px rgba(0,0,0,.5);
}
@media (max-width: 900px) {
  .nx-shell { inset-inline-start: 0; }
}

/* ---------- TOPBAR ---------- */
.nx-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-border);
  gap: 16px;
  z-index: 5;
}
.nx-topbar-left, .nx-topbar-right {
  display: flex; align-items: center; gap: 8px;
}
.nx-topbar-right {
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--nx-border) 78%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--nx-surface-2) 72%, transparent);
}
.nx-brand {
  display: flex; align-items: center; gap: 10px;
  padding-inline-end: 12px;
}
.nx-brand-copy {
  display: grid;
  grid-template-rows: auto 22px;
  align-content: center;
  gap: 1px;
}
.nx-brand-mark {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #8064d8, #5b3db7);
  display: grid; place-items: center;
  line-height: 0;
  box-shadow: 0 4px 14px rgba(91,61,183,.34);
  color: #fff;
}
.nx-brand-mark > [data-ds-icon] {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff !important;
  line-height: 0;
}
.nx-brand-mark > [data-ds-icon] > .ds-ico {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  color: #fff !important;
}
.nx-brand-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.2;
}
.nx-brand-sub {
  font-size: 11px;
  color: var(--nx-muted);
  line-height: 1.2;
}
.nx-flow-name-input.ds-field__input {
  width: 160px;
  inline-size: 160px;
  height: 22px;
  min-height: 0;
  min-block-size: 0;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  padding: 2px 5px;
  font-family: inherit;
  font-size: 11px;
  line-height: 16px;
  box-shadow: none;
}
.nx-flow-name-input.ds-field__input:hover { border-color: var(--nx-border); }
.nx-flow-name-input.ds-field__input:focus { outline: 2px solid var(--brand-500); outline-offset: 1px; background: var(--nx-surface-2); box-shadow: none; }
.nx-divider {
  width: 1px; height: 24px;
  background: var(--nx-border);
}
.nx-topbar-actions {
  display: flex; gap: 4px;
}
.nx-tbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--nx-text);
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.nx-tbtn:hover {
  background: var(--nx-surface-2);
  border-color: var(--nx-border);
}
.nx-tbtn > [data-ds-icon] {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
.nx-tbtn[data-nx-act="undo"],
.nx-tbtn[data-nx-act="redo"],
.nx-tbtn[data-nx-act="theme"] {
  width: 32px;
  min-width: 32px;
  padding: 0;
  justify-content: center;
  border-color: var(--nx-border);
  background: var(--nx-surface);
}
.nx-tbtn[data-nx-act="undo"] { color: #5265b5; }
.nx-tbtn[data-nx-act="redo"] { color: #2c7873; }
.nx-tbtn[data-nx-act="theme"] { color: #7657c8; }
.nx-tbtn[data-nx-act="history"] {
  color: #7657c8;
  background: rgba(155,123,245,.1);
}
.nx-tbtn[data-nx-act="pause"] {
  background: linear-gradient(135deg, #f29aa9, #dc657b);
  box-shadow: 0 2px 8px rgba(220,101,123,.28);
}
.nx-tbtn[data-nx-act="activate"] {
  background: linear-gradient(135deg, #62bd8d, #318766);
  box-shadow: 0 2px 8px rgba(49,135,102,.3);
}
.nx-tbtn.nx-tbtn-sm { height: 26px; padding: 0 8px; font-size: 11px; }
.nx-tbtn.nx-tbtn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(44,120,115,.35);
}
.nx-tbtn.nx-tbtn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(44,120,115,.5);
}
.nx-tbtn.nx-tbtn-warn {
  background: linear-gradient(135deg, var(--accent-500), var(--accent-600));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(244,162,97,.35);
}
.nx-tbtn.nx-tbtn-warn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(244,162,97,.5);
}
.nx-status-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--nx-surface-2);
  border-radius: 99px;
  font-size: 11px; font-weight: 600;
  color: var(--nx-muted);
}
.nx-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(109,191,143,.25);
  animation: nxPulseDot 2.2s ease-in-out infinite;
}
.nx-status-pill.is-running .nx-status-dot { background: var(--accent-500); box-shadow: 0 0 0 3px rgba(244,162,97,.3); }
.nx-status-pill.is-error   .nx-status-dot { background: var(--red-500); box-shadow: 0 0 0 3px rgba(232,120,140,.3); }
@keyframes nxPulseDot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.25); opacity: .65; }
}

/* ---------- BODY LAYOUT ---------- */
.nx-body {
  position: relative;
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 0;
  overflow: hidden;
}
@media (max-width: 1080px) {
  .nx-body { grid-template-columns: 240px 1fr; }
}
@media (max-width: 800px) {
  .nx-body { grid-template-columns: 1fr; }
  .nx-palette { display: none; }
}

/* ---------- PALETTE ---------- */
.nx-palette {
  display: flex; flex-direction: column;
  background: var(--nx-surface);
  border-inline-end: 1px solid var(--nx-border);
  min-height: 0;
}
.nx-palette-search {
  position: relative;
  padding: 12px;
  border-bottom: 1px solid var(--nx-border);
}
.nx-palette-search-icon {
  position: absolute;
  inset-inline-start: 22px;
  top: 50%; transform: translateY(-50%);
  font-size: 13px;
  color: var(--nx-muted);
  pointer-events: none;
}
.nx-palette-search input {
  width: 100%;
  height: 34px;
  padding: 0 28px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface-2);
  border-radius: 8px;
  font-family: inherit;
  font-size: 12px;
  color: var(--nx-text);
  transition: all .15s ease;
}
.nx-palette-search input:focus {
  outline: none;
  border-color: var(--brand-500);
  background: var(--nx-surface);
  box-shadow: 0 0 0 3px rgba(44,120,115,.15);
}
.nx-palette-search-hint {
  position: absolute;
  inset-inline-end: 22px;
  top: 50%; transform: translateY(-50%);
  font-size: 10px;
  color: var(--nx-muted);
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 4px;
  padding: 1px 5px;
  pointer-events: none;
}
.nx-palette-tabs {
  display: flex; gap: 2px;
  padding: 8px;
  border-bottom: 1px solid var(--nx-border);
}
/* Tabs take the width of their own label so the longest one («چندشاخه») is
   never clipped in the narrow tablet palette. */
.nx-palette-tab {
  flex: 1 1 auto;
  padding: 0 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--nx-muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: all .15s ease;
}
/* Short explanation and guide button above a palette group. */
.nx-palette-help { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.nx-palette-help > .nx-cfield-help { margin: 0; }
.nx-palette-tab:hover { background: var(--nx-surface-2); color: var(--nx-text); }
.nx-palette-tab:not(.active) { border: 1px solid transparent; }
.nx-palette-tab:not(.active):hover { border-color: var(--nx-border); }
.nx-palette-tab[data-nx-tab="trigger"] > [data-ds-icon] { color: #5265b5; }
.nx-palette-tab[data-nx-tab="condition"] > [data-ds-icon] { color: #bd712e; }
.nx-palette-tab[data-nx-tab="action"] > [data-ds-icon] { color: #318766; }
.nx-palette-tab[data-nx-tab="flow"] > [data-ds-icon] { color: #6f56c9; }
.nx-palette-tab.active {
  background: var(--brand-500);
  color: #fff;
  box-shadow: 0 2px 6px rgba(44,120,115,.3);
}
.nx-palette-tab.active > [data-ds-icon] {
  color: #fff;
}
/* A glyph with a default semantic tone (bolt, share) gets that tone with
   !important on its inner svg; inside a tab it follows the tab's own icon
   colour instead, so it turns white on the active tab like the others. */
.nx-palette-tab > [data-ds-icon] > :is(.ds-ico, .material-symbols-rounded) {
  color: inherit !important;
}
.nx-palette-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}
.nx-palette-scroll::-webkit-scrollbar { width: 6px; }
.nx-palette-scroll::-webkit-scrollbar-thumb { background: var(--nx-border); border-radius: 4px; }
.nx-palette-scroll::-webkit-scrollbar-thumb:hover { background: var(--nx-muted); }

.nx-palette-section { margin-bottom: 18px; }
.nx-palette-section.is-hidden { display: none; }
.nx-palette-title {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--nx-muted);
  text-transform: none;
  letter-spacing: 0;
}
.nx-palette-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px currentColor;
  opacity: .9;
}
.nx-palette-list {
  display: flex; flex-direction: column;
  gap: 4px;
}
.nx-pnode {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: var(--nx-surface-2);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: grab;
  font-size: 12px;
  font-weight: 500;
  user-select: none;
  transition: all .15s ease;
  position: relative;
}
.nx-pnode:hover {
  background: var(--nx-surface);
  border-color: var(--nx-border);
  transform: translateX(-2px);
  box-shadow: var(--nx-shadow);
}
[dir="rtl"] .nx-pnode:hover { transform: translateX(2px); }
.nx-pnode:active, .nx-pnode.is-dragging {
  cursor: grabbing;
  opacity: .55;
  transform: scale(.98);
}
.nx-pnode.is-hidden { display: none; }
.nx-pnode-icon {
  width: 28px; height: 28px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.nx-pnode[data-kind="trigger"]   .nx-pnode-icon { background: rgba(44,120,115,.18); color: var(--brand-600); }
.nx-pnode[data-kind="condition"] .nx-pnode-icon { background: rgba(240,184,110,.22); color: var(--accent-600); }
.nx-pnode[data-kind="action"]    .nx-pnode-icon { background: rgba(109,191,143,.22); color: #2f8a5e; }
.nx-pnode-label { flex: 1; line-height: 1.4; }
.nx-pnode-grip {
  font-size: 12px;
  color: var(--nx-muted);
  opacity: 0;
  letter-spacing: -2px;
  transition: opacity .15s ease;
}
.nx-pnode:hover .nx-pnode-grip { opacity: .8; }

.nx-palette-foot {
  padding: 10px 12px;
  font-size: 11px;
  color: var(--nx-muted);
  border-top: 1px solid var(--nx-border);
  text-align: center;
}
.nx-palette-empty {
  margin: 18px 10px;
  padding: 14px 12px;
  border: 1px dashed var(--nx-border);
  border-radius: 10px;
  color: var(--nx-muted);
  background: var(--nx-surface-2);
  font-size: 12px;
  line-height: 1.8;
  text-align: center;
}
.nx-palette-tab > [data-ds-icon] {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

@media (max-width: 1180px) {
  .nx-topbar {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .nx-topbar-left,
  .nx-topbar-right,
  .nx-topbar-actions { flex: 0 0 auto; }
}
@media (min-width: 801px) and (max-width: 1180px) {
  .nx-shell { grid-template-rows: 96px 1fr; }
  .nx-topbar {
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between;
    overflow: visible;
    padding-block: 7px;
  }
  .nx-topbar-left,
  .nx-topbar-right { flex: 1 1 100%; justify-content: space-between; }
}
@media (max-width: 800px) {
  .nx-shell { grid-template-rows: 56px 1fr; }
  .nx-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(260px, 45vh) minmax(360px, 1fr);
    overflow-y: auto;
  }
  .nx-palette { display: flex; max-height: 45vh; border-inline-end: 0; border-bottom: 1px solid var(--nx-border); }
  .nx-canvas-wrap { min-height: 360px; }
}
@media (max-width: 520px) {
  .nx-topbar { padding-inline: 8px; gap: 8px; }
  .nx-brand { padding-inline-end: 4px; }
  .nx-brand-sub:not(.nx-flow-name-input),
  .nx-divider { display: none; }
  .nx-flow-name-input.ds-field__input { width: 112px; inline-size: 112px; }
  .nx-tbtn { padding-inline: 9px; }
  .nx-palette-search { padding: 8px 12px; }
  .nx-palette-scroll { padding: 10px 12px; }
  .nx-minimap { display: none; }
  .nx-canvas-empty { max-width: calc(100% - 96px); }
}

/* ---------- CANVAS WRAPPER ---------- */
.nx-canvas-wrap {
  position: relative;
  overflow: hidden;
  background: var(--nx-bg);
  min-width: 0;
}
.nx-canvas {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--nx-grid-dot) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  cursor: grab;
  overflow: hidden;
  user-select: none;
}
.nx-canvas.is-panning { cursor: grabbing; }
.nx-canvas.is-connecting { cursor: crosshair; }
.nx-canvas.is-drop-target {
  background-image:
    radial-gradient(circle, rgba(44,120,115,.4) 1.5px, transparent 1.5px),
    linear-gradient(rgba(44,120,115,.04), rgba(44,120,115,.04));
  background-size: 24px 24px, auto;
}

.nx-edges {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 1;
}
.nx-edges g { pointer-events: auto; }
.nx-edge-path {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 2.5;
  stroke-linecap: round;
  cursor: pointer;
  transition: stroke-width .15s ease;
  filter: drop-shadow(0 1px 2px rgba(44,120,115,.25));
}
.nx-edge-path:hover, .nx-edge-path.is-selected {
  stroke-width: 3.5;
  filter: drop-shadow(0 2px 4px rgba(44,120,115,.45));
}
.nx-edge-path.is-yes { stroke: var(--green-500); }
.nx-edge-path.is-no  { stroke: var(--red-500); }
.nx-edge-flow {
  fill: var(--accent-500);
  filter: drop-shadow(0 0 6px rgba(244,162,97,.6));
}
.nx-temp-edge {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  opacity: 0;
  pointer-events: none;
  animation: nxDash 1s linear infinite;
}
.nx-canvas.is-connecting .nx-temp-edge { opacity: 1; }
@keyframes nxDash {
  to { stroke-dashoffset: -24; }
}

/* ---------- NODES ---------- */
.nx-nodes {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  z-index: 2;
}
.nx-node {
  position: absolute;
  width: 240px;
  background: var(--nx-surface);
  border: 1.5px solid var(--nx-border);
  border-radius: var(--nx-radius);
  box-shadow: var(--nx-shadow);
  cursor: move;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
  animation: nxNodePop .35s cubic-bezier(.34,1.56,.64,1) both;
  user-select: none;
}
@keyframes nxNodePop {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: scale(1); }
}
.nx-node:hover {
  border-color: var(--brand-300);
  box-shadow: var(--nx-shadow-lg);
  z-index: 4;
}
.nx-node.is-selected {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(44,120,115,.25), var(--nx-shadow-lg);
  z-index: 5;
}
.nx-node.is-dragging {
  cursor: grabbing;
  box-shadow: var(--nx-shadow-lg);
  transform: scale(1.02);
  z-index: 6;
}
.nx-node.is-disabled { opacity: .4; }
.nx-node.is-running {
  border-color: var(--accent-500);
  box-shadow: 0 0 0 4px rgba(244,162,97,.3), 0 8px 24px rgba(244,162,97,.4);
  animation: nxRunPulse 1.2s ease-in-out infinite;
}
@keyframes nxRunPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(244,162,97,.3), 0 8px 24px rgba(244,162,97,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(244,162,97,.15), 0 12px 32px rgba(244,162,97,.5); }
}
.nx-node.is-success {
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(109,191,143,.25), var(--nx-shadow);
}
.nx-node.is-error {
  border-color: var(--red-500);
  box-shadow: 0 0 0 3px rgba(232,120,140,.25), var(--nx-shadow);
}

.nx-node-stripe {
  position: absolute;
  top: 0; bottom: 0;
  inset-inline-start: 0;
  width: 4px;
  border-start-start-radius: var(--nx-radius);
  border-end-start-radius: var(--nx-radius);
}
.nx-node[data-kind="trigger"]   .nx-node-stripe { background: linear-gradient(180deg, var(--brand-500), var(--brand-700)); }
.nx-node[data-kind="condition"] .nx-node-stripe { background: linear-gradient(180deg, var(--accent-500), var(--accent-600)); }
.nx-node[data-kind="action"]    .nx-node-stripe { background: linear-gradient(180deg, var(--green-500), #2f8a5e); }

.nx-node-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 8px;
  border-bottom: 1px dashed var(--nx-border);
}
.nx-node-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 17px;
  flex-shrink: 0;
}
.nx-node[data-kind="trigger"]   .nx-node-icon { background: rgba(44,120,115,.18); }
.nx-node[data-kind="condition"] .nx-node-icon { background: rgba(240,184,110,.22); }
.nx-node[data-kind="action"]    .nx-node-icon { background: rgba(109,191,143,.22); }
.nx-node-meta { flex: 1; min-width: 0; }
.nx-node-kind {
  font-size: 9px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.nx-node[data-kind="trigger"]   .nx-node-kind { color: var(--brand-600); }
.nx-node[data-kind="condition"] .nx-node-kind { color: var(--accent-600); }
.nx-node[data-kind="action"]    .nx-node-kind { color: #2f8a5e; }
.nx-node-title {
  font-weight: 700;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.nx-node-body {
  padding: 8px 12px 12px;
  font-size: 11px;
  color: var(--nx-muted);
  line-height: 1.6;
  min-height: 30px;
}
.nx-node-body .nx-node-config {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nx-node-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px dashed var(--nx-border);
  font-size: 10px;
  color: var(--nx-muted);
}
.nx-node-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--nx-surface-2);
  font-size: 9px;
  font-weight: 800;
  color: var(--nx-muted);
}

/* Node handles */
.nx-handle {
  position: absolute;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--nx-surface);
  border: 2.5px solid var(--brand-500);
  cursor: crosshair;
  transition: all .15s ease;
  z-index: 3;
}
.nx-handle:hover {
  transform: scale(1.4);
  background: var(--brand-500);
  box-shadow: 0 0 0 6px rgba(44,120,115,.2);
}
.nx-handle.is-target-valid {
  background: var(--green-500);
  border-color: var(--green-500);
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(109,191,143,.3);
}
/* Use direct left/right (geometric) — flow is L→R like n8n, regardless of RTL text */
.nx-handle-in {
  left: -8px;
  top: 50%; transform: translateY(-50%);
}
.nx-handle-out {
  right: -8px;
  top: 50%; transform: translateY(-50%);
}
.nx-handle-in:hover { transform: translateY(-50%) scale(1.4); }
.nx-handle-out:hover { transform: translateY(-50%) scale(1.4); }
.nx-handle-in.is-target-valid,
.nx-handle-out.is-target-valid { transform: translateY(-50%) scale(1.4); }

/* Condition node has 2 outputs on the right */
.nx-node[data-kind="condition"] .nx-handle-out-yes,
.nx-node[data-exits="2"] .nx-handle-out-yes {
  right: -8px;
  top: 35%;
  border-color: var(--green-500);
}
.nx-node[data-kind="condition"] .nx-handle-out-no,
.nx-node[data-exits="2"] .nx-handle-out-no {
  right: -8px;
  top: 65%;
  border-color: var(--red-500);
}
.nx-node[data-kind="condition"] .nx-handle-out-yes:hover,
.nx-node[data-exits="2"] .nx-handle-out-yes:hover { background: var(--green-500); box-shadow: 0 0 0 6px rgba(109,191,143,.25); }
.nx-node[data-kind="condition"] .nx-handle-out-no:hover,
.nx-node[data-exits="2"] .nx-handle-out-no:hover  { background: var(--red-500);   box-shadow: 0 0 0 6px rgba(232,120,140,.25); }

.nx-handle-label {
  position: absolute;
  font-size: 9px;
  font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  direction: rtl;
}
.nx-node[data-kind="condition"] .nx-handle-label.yes,
.nx-node[data-exits="2"] .nx-handle-label.yes {
  right: -28px;
  top: 30%;
  color: var(--green-500);
}
.nx-node[data-kind="condition"] .nx-handle-label.no,
.nx-node[data-exits="2"] .nx-handle-label.no {
  right: -28px;
  top: 60%;
  color: var(--red-500);
}

/* Trigger has only output, action/condition default has only input + output */
.nx-node[data-kind="trigger"] .nx-handle-in { display: none; }

/* Empty state */
.nx-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  pointer-events: none;
  color: var(--nx-muted);
  z-index: 1;
}
.nx-empty-art {
  position: relative;
  width: 110px; height: 110px;
  display: grid; place-items: center;
  margin-bottom: 14px;
}
.nx-empty-circle {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,120,115,.15), transparent 70%);
  animation: nxEmptyFloat 4s ease-in-out infinite;
}
.nx-empty-icon {
  font-size: 56px;
  filter: drop-shadow(0 4px 14px rgba(44,120,115,.35));
  animation: nxEmptyFloat 4s ease-in-out infinite reverse;
}
@keyframes nxEmptyFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.nx-empty-title {
  font-weight: 800;
  font-size: 16px;
  color: var(--nx-text);
  margin-bottom: 4px;
}
.nx-empty-sub {
  font-size: 12px;
  max-width: 360px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.nx-empty-hints {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: center;
  font-size: 11px;
}
.nx-kbd {
  display: inline-block;
  padding: 1px 6px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  font-family: monospace;
  color: var(--nx-text);
  box-shadow: 0 1px 0 var(--nx-border);
  margin-inline-end: 2px;
}
.nx-kbd-sep { color: var(--nx-muted); margin: 0 4px; }

/* ---------- ZOOM CONTROLS ---------- */
.nx-zoom {
  position: absolute;
  bottom: 16px; inset-inline-start: 16px;
  display: flex; flex-direction: column;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  box-shadow: var(--nx-shadow);
  overflow: hidden;
  z-index: 10;
}
.nx-zbtn {
  width: 36px; height: 32px;
  border: none;
  background: transparent;
  color: var(--nx-text);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
  font-family: inherit;
  border-bottom: 1px solid var(--nx-border);
}
.nx-zbtn:last-child { border-bottom: none; }
.nx-zbtn:hover { background: var(--nx-surface-2); color: var(--brand-500); }
.nx-zbtn-percent {
  font-size: 10px;
  font-weight: 700;
  color: var(--nx-muted);
  cursor: default;
}
.nx-zbtn-percent:hover { background: transparent; color: var(--nx-muted); }

/* ---------- MINIMAP ---------- */
.nx-minimap {
  position: absolute;
  bottom: 16px; inset-inline-end: 16px;
  width: 200px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  box-shadow: var(--nx-shadow);
  overflow: hidden;
  z-index: 10;
  transition: all .25s ease;
}
.nx-minimap.is-collapsed {
  width: 90px;
}
.nx-minimap.is-collapsed .nx-minimap-svg { display: none; }
.nx-minimap-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--nx-muted);
  border-bottom: 1px solid var(--nx-border);
  background: var(--nx-surface-2);
}
.nx-minimap-toggle {
  width: 18px; height: 18px;
  border: none;
  background: transparent;
  color: var(--nx-muted);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  font-family: inherit;
}
.nx-minimap-toggle:hover { background: var(--nx-surface); color: var(--nx-text); }
.nx-minimap-svg {
  display: block;
  width: 100%;
  height: 130px;
  background:
    radial-gradient(circle, var(--nx-grid-dot) 1px, transparent 1px) 0 0/12px 12px,
    var(--nx-bg);
}
.nx-minimap-node {
  fill: var(--brand-500);
  opacity: .75;
  stroke: var(--nx-surface);
  stroke-width: 1;
}
.nx-minimap-node.condition { fill: var(--accent-500); }
.nx-minimap-node.action    { fill: var(--green-500); }
.nx-minimap-viewport {
  fill: rgba(44,120,115,.12);
  stroke: var(--brand-500);
  stroke-width: 1.5;
  stroke-dasharray: 3 2;
  cursor: move;
}

/* ---------- EXEC LOG ---------- */
.nx-execlog {
  position: absolute;
  inset-inline-start: 16px; inset-inline-end: 232px;
  bottom: -300px;
  height: 220px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 12px;
  box-shadow: var(--nx-shadow-lg);
  display: flex; flex-direction: column;
  z-index: 11;
  transition: bottom .35s cubic-bezier(.22,.7,.16,1);
}
.nx-execlog.is-open { bottom: 16px; }
.nx-execlog-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--nx-border);
  font-size: 12px;
}
.nx-execlog-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px;
  font-family: 'SF Mono', Consolas, monospace;
  font-size: 11px;
  line-height: 1.7;
}
.nx-log-row {
  display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap;
  padding: 4px 0;
  animation: nxLogIn .25s ease;
}
.nx-log-action {
  border: 1px solid var(--nx-border);
  border-radius: 7px;
  background: var(--nx-surface);
  color: var(--nx-text);
  padding: 2px 7px;
  font: inherit;
  cursor: pointer;
}
.nx-log-action:focus-visible { outline: 2px solid var(--nx-primary); outline-offset: 2px; }
.nx-log-action:disabled { cursor: wait; opacity: .6; }
.nx-log-detail { flex: 0 0 100%; display: grid; gap: 4px; padding-inline-start: 72px; }
.nx-log-detail[hidden] { display: none; }
.nx-log-step { display: grid; grid-template-columns: minmax(120px,1fr) auto; gap: 4px 10px; padding: 5px 8px; border-inline-start: 3px solid var(--nx-border); background: var(--nx-surface-soft); }
.nx-log-step.success { border-inline-start-color: var(--green-500); }
.nx-log-step.error { border-inline-start-color: var(--red-500); }
.nx-log-step small { grid-column: 1 / -1; color: var(--nx-muted); white-space: normal; overflow-wrap: anywhere; }
@keyframes nxLogIn {
  from { opacity: 0; transform: translateX(8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.nx-log-time { color: var(--nx-muted); flex-shrink: 0; min-width: 64px; }
.nx-log-icon { flex-shrink: 0; }
.nx-log-text { flex: 1; }
.nx-log-row.success .nx-log-icon { color: var(--green-500); }
.nx-log-row.error   .nx-log-icon { color: var(--red-500); }
.nx-log-row.info    .nx-log-icon { color: var(--brand-500); }

/* ---------- CTX MENU ---------- */
.nx-ctxmenu {
  position: absolute;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  box-shadow: var(--nx-shadow-lg);
  padding: 4px;
  min-width: 170px;
  z-index: 100;
  display: none;
  animation: nxCtxIn .15s ease;
}
.nx-ctxmenu.is-open { display: block; }
@keyframes nxCtxIn {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}
.nx-ctxmenu button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  color: var(--nx-text);
  font-family: inherit;
  font-size: 12px;
  text-align: start;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s ease;
}
.nx-ctxmenu button:hover { background: var(--nx-surface-2); }
.nx-ctxmenu button.nx-ctxmenu-danger { color: var(--red-500); }
.nx-ctxmenu button.nx-ctxmenu-danger:hover { background: var(--red-50); }
.nx-shell[data-nx-theme="dark"] .nx-ctxmenu button.nx-ctxmenu-danger:hover { background: rgba(232,120,140,.15); }
.nx-ctxmenu-sep {
  height: 1px;
  background: var(--nx-border);
  margin: 4px 6px;
}

/* ---------- CONFIG PANEL (floating, slides in from inline-end side) ---------- */
.nx-config {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(340px, 90vw);
  background: var(--nx-surface);
  border-inline-start: 1px solid var(--nx-border);
  display: flex; flex-direction: column;
  min-height: 0;
  z-index: 8;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22, .7, .16, 1);
  box-shadow: 8px 0 24px rgba(0, 0, 0, .12);
  pointer-events: none;
}
.nx-config.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
.nx-config-card {
  flex: 1;
  display: flex; flex-direction: column;
  min-height: 0;
}
.nx-config-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  border-bottom: 1px solid var(--nx-border);
}
.nx-config-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 18px;
  flex-shrink: 0;
}
.nx-config-card[data-kind="trigger"]   .nx-config-icon { background: rgba(44,120,115,.18); }
.nx-config-card[data-kind="condition"] .nx-config-icon { background: rgba(240,184,110,.22); }
.nx-config-card[data-kind="action"]    .nx-config-icon { background: rgba(109,191,143,.22); }
.nx-config-meta { flex: 1; min-width: 0; }
.nx-config-kind {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.nx-config-card[data-kind="trigger"]   .nx-config-kind { color: var(--brand-600); }
.nx-config-card[data-kind="condition"] .nx-config-kind { color: var(--accent-600); }
.nx-config-card[data-kind="action"]    .nx-config-kind { color: #2f8a5e; }
.nx-config-title {
  font-weight: 800;
  font-size: 14px;
  margin-top: 2px;
}
.nx-config-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
}
.nx-cfield {
  margin-bottom: 14px;
}
.nx-cfield label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--nx-muted);
  margin-bottom: 6px;
}
.nx-cfield input,
.nx-cfield textarea,
.nx-cfield select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--nx-border);
  background: var(--nx-surface-2);
  border-radius: 7px;
  font-family: inherit;
  font-size: 12px;
  color: var(--nx-text);
  transition: all .15s ease;
  resize: vertical;
}
.nx-cfield textarea { min-height: 70px; line-height: 1.7; }
.nx-cfield input:focus,
.nx-cfield textarea:focus,
.nx-cfield select:focus {
  outline: none;
  border-color: var(--brand-500);
  background: var(--nx-surface);
  box-shadow: 0 0 0 3px rgba(44,120,115,.15);
}
.nx-cfield-help {
  margin-top: 4px;
  font-size: 10px;
  color: var(--nx-muted);
  line-height: 1.5;
}
.nx-cfield-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.nx-cswitch {
  display: grid; gap: 8px;
  padding: 10px 12px;
  background: var(--nx-surface-2);
  border-radius: 8px;
  font-size: 12px;
}
.nx-cswitch .ds-switch { margin: 0; }
.nx-financial-trigger { display: grid; gap: 2px; }
.nx-financial-trigger > .ds-field { margin-bottom: 14px; }
.nx-financial-trigger .ds-dropdown { width: 100%; }
.nx-financial-trigger__offset,
.nx-financial-trigger__time { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
@media (max-width: 560px) {
  .nx-financial-trigger__offset,
  .nx-financial-trigger__time { grid-template-columns: 1fr; }
}
.nx-config-foot {
  padding: 12px 14px;
  border-top: 1px solid var(--nx-border);
  display: flex; gap: 8px;
}
.nx-config-foot button {
  flex: 1;
}

/* ---------- MODAL ---------- */
.nx-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  z-index: 100;
}
.nx-modal.is-open { display: flex; }
.nx-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10,18,38,.45);
  backdrop-filter: blur(4px);
  animation: nxFadeIn .2s ease;
}
@keyframes nxFadeIn { from { opacity: 0; } to { opacity: 1; } }
.nx-modal-card {
  position: relative;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 16px;
  box-shadow: var(--nx-shadow-lg);
  width: min(800px, 92vw);
  max-height: 85vh;
  display: flex; flex-direction: column;
  animation: nxModalIn .3s cubic-bezier(.34,1.56,.64,1);
  overflow: hidden;
}
@keyframes nxModalIn {
  from { opacity: 0; transform: scale(.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.nx-modal-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 22px 20px 20px;
  background: linear-gradient(155deg, #9b7bf5 0%, #3d2a70 115%);
  border-radius: 16px 16px 0 0;
}
.nx-modal-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.nx-modal-head::before, .nx-modal-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(24px); pointer-events: none; z-index: -1;
}
.nx-modal-head::before { width: 130px; height: 130px; top: -60px; inset-inline-start: -30px; opacity: .16; }
.nx-modal-head::after { width: 90px; height: 90px; bottom: -45px; inset-inline-end: 60px; opacity: .12; }
.nx-modal-title {
  font-weight: 800;
  font-size: 16px;
  color: #fff;
}
.nx-modal-sub {
  font-size: 12px;
  color: rgba(255,255,255,.82);
  margin-top: 4px;
}
.nx-modal-head .nx-tbtn {
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px); color: #fff;
  border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: background .15s, transform .2s;
}
.nx-modal-head .nx-modal-close {
  flex: 0 0 36px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  display: inline-grid;
  place-items: center;
}
.nx-modal-head .nx-modal-close > [data-ds-icon] {
  width: 16px;
  height: 16px;
}
.nx-modal-head .nx-tbtn:hover { background: rgba(255,255,255,.34); transform: rotate(90deg); }
.nx-modal-body {
  padding: 20px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  min-height: 0;
}
.nx-template-empty {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  text-align: center;
  color: var(--nx-muted);
}
.nx-template-empty > [data-ds-icon] { width: 34px; height: 34px; color: #7657c8; }
.nx-template-empty strong { color: var(--nx-text); font-size: 14px; }
.nx-template-empty small { max-width: 360px; line-height: 1.8; }

@media (max-width: 620px) {
  .nx-modal-card { width: calc(100vw - 24px); max-height: calc(100vh - 32px); }
  .nx-modal-head { padding: 16px 14px; gap: 12px; }
  .nx-modal-body { grid-template-columns: 1fr; padding: 14px; }
}

.nx-tplcard {
  appearance: none;
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: start;
  background: var(--nx-surface-2);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 14px;
  cursor: pointer;
  transition: all .2s ease;
  position: relative;
}
.nx-tplcard:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-500) 38%, transparent);
  outline-offset: 2px;
  border-color: var(--brand-500);
}
.nx-tplcard:hover {
  border-color: var(--brand-500);
  background: var(--nx-surface);
  transform: translateY(-2px);
  box-shadow: var(--nx-shadow);
}
.nx-tplcard-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.nx-tplcard-name {
  font-weight: 700;
  font-size: 13px;
}
.nx-tplcard-badge {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}
.nx-tplcard-badge.is-active { background: rgba(109,191,143,.18); color: #2f8a5e; }
.nx-tplcard-badge.is-inactive { background: var(--nx-surface); color: var(--nx-muted); border: 1px solid var(--nx-border); }
.nx-tplcard-desc {
  font-size: 11px;
  color: var(--nx-muted);
  line-height: 1.7;
  margin-bottom: 10px;
  min-height: 38px;
}
.nx-tplcard-stats {
  display: flex; gap: 12px;
  font-size: 11px;
  color: var(--nx-muted);
  padding-top: 8px;
  border-top: 1px dashed var(--nx-border);
}
.nx-tplcard-stats strong { color: var(--nx-text); }
.flow-condition .branch-yes { background: var(--green-500); color: #fff; }
.flow-condition .branch-no  { background: var(--red-500); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="full"]) *,
  html:not([data-motion="full"]) *::before,
  html:not([data-motion="full"]) *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* =============================================================
   SIDEBAR · Modern redesign (2026-06-17)
   ============================================================= */
.sidebar {
  width: var(--sidebar-w);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; bottom: 0;
  inset-inline-start: 0;
  height: 100vh;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: -1px 0 0 0 rgba(15, 23, 42, .02);
}
[data-theme="dark"] .sidebar {
  background: var(--surface);
  box-shadow: -1px 0 0 0 rgba(255, 255, 255, .03);
}
.main {
  margin-inline-start: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
}
body.sidebar-collapsed .main {
  margin-inline-start: 0;
  width: 100%;
}

/* Desktop navigation shell: a persistent icon rail plus a temporary overlay.
   The main canvas always reserves only the rail, so opening navigation never
   reflows charts, grids or cards. */
@media (min-width:901px) {
  body.sidebar-rail-mode .sidebar {
    width:var(--sidebar-rail-w);
    min-width:var(--sidebar-rail-w);
    overflow:hidden;
    z-index:80;
    will-change:width,box-shadow;
    transition:
      width .34s cubic-bezier(.22,.78,.18,1),
      min-width .34s cubic-bezier(.22,.78,.18,1),
      box-shadow .3s ease,
      border-color .3s ease;
  }
  body.sidebar-rail-mode.sidebar-peek-open .sidebar {
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    border-inline-start-color:color-mix(in srgb,var(--brand-500) 18%,var(--border));
    box-shadow:-22px 0 52px -26px rgba(15,23,42,.34),-5px 0 18px -12px rgba(44,120,115,.2);
  }
  body.sidebar-rail-mode .main,
  body.sidebar-rail-mode.sidebar-peek-open .main,
  body.sidebar-rail-mode.sidebar-collapsed .main {
    margin-inline-start:var(--sidebar-rail-w);
    width:calc(100% - var(--sidebar-rail-w));
    transition:none;
  }

  body.sidebar-rail-mode .sidebar .brand {
    height:var(--topbar-h);
    min-height:var(--topbar-h);
    box-sizing:border-box;
    transition:padding .3s cubic-bezier(.22,.78,.18,1),gap .22s ease;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .brand {
    justify-content:center;
    gap:0;
    padding:16px 10px;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .brand-logo {
    width:44px;
    height:44px;
  }

  body.sidebar-rail-mode .sidebar .brand-text,
  body.sidebar-rail-mode .sidebar .nav-label,
  body.sidebar-rail-mode .sidebar .nav-caret,
  body.sidebar-rail-mode .sidebar .nav-badge,
  body.sidebar-rail-mode .sidebar .user-mini-text,
  body.sidebar-rail-mode .sidebar .user-chevron {
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    max-width:260px;
    transition:
      opacity .2s ease .1s,
      transform .28s cubic-bezier(.22,.78,.18,1) .08s,
      max-width .3s ease,
      visibility 0s linear 0s;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .brand-text,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-label,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-section span,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-caret,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-badge,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .user-mini-text,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .user-chevron {
    opacity:0;
    visibility:hidden;
    transform:translateX(10px);
    max-width:0;
    pointer-events:none;
    transition:
      opacity .1s ease,
      transform .16s ease,
      max-width .22s ease,
      visibility 0s linear .16s;
  }
  body.sidebar-rail-mode.sidebar-peek-open .sidebar .nav-group-head[aria-expanded="true"] .nav-caret,
  body.sidebar-rail-mode.sidebar-peek-open .sidebar .nav-pillar.is-open > .nav-pillar-head .nav-caret {
    transform: rotate(180deg) !important;
  }
  body.sidebar-rail-mode.sidebar-peek-open .sidebar .nav-group-head[aria-expanded="false"] .nav-caret {
    transform: rotate(0deg) !important;
  }

  body.sidebar-rail-mode .sidebar .sidebar-org-ctx,
  body.sidebar-rail-mode .sidebar .nav-quick {
    max-height:90px;
    opacity:1;
    overflow:visible;
    transform:translateY(0);
    transition:max-height .28s ease .05s,opacity .2s ease .1s,transform .28s ease .06s,padding .28s ease;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .sidebar-org-ctx,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-quick {
    max-height:0;
    opacity:0;
    overflow:hidden;
    transform:translateY(-6px);
    padding-block:0;
    pointer-events:none;
    transition:max-height .2s ease,opacity .12s ease,transform .16s ease,padding .2s ease;
  }

  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav {
    padding-inline:10px;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-item,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-pillar-head,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-group-head {
    justify-content:center;
    gap:0;
    padding-inline:0;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-pillar-head,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-group-head {
    /* Keep the closed rail on the exact expanded-row geometry. Otherwise
       opening the clicked pillar shrinks every row and moves its icon away
       from the pointer before the submenu appears. */
    min-height:31px;
    padding-block:7px;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-toplevel {
    width:52px;
    height:auto;
    min-height:0;
    margin:0 auto 8px;
    margin-inline:auto;
    padding:12px 14px;
    box-sizing:border-box;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr;
    place-items:center;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-toplevel > * {
    grid-area:1 / 1;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-toplevel > .nav-icon {
    place-self:center;
    animation:none;
    transform:none;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-item .nav-icon,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-group-head .nav-icon {
    width:20px;
    height:20px;
    margin:0;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-pillar-icon {
    width:17px;
    height:17px;
    margin:0;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-pillar-body,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-group-body {
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    opacity:0 !important;
    overflow:hidden !important;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-pillar::before,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-group::after,
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .nav-toplevel-flash {
    display:none;
  }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar-footer { padding-inline:10px; }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .user-mini { justify-content:center;gap:0;padding-inline:0; }
  body.sidebar-rail-mode:not(.sidebar-peek-open) .sidebar .avatar { width:40px;height:40px; }

  body.sidebar-rail-mode .sidebar::after {
    content:'';
    position:absolute;
    inset-block:0;
    inset-inline-end:0;
    width:1px;
    background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--brand-500) 30%,transparent),transparent);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
  }
  body.sidebar-rail-mode.sidebar-peek-open .sidebar::after { opacity:1; }
}

/* ---------- Brand ---------- */
.brand {
  display: flex; gap: 12px; align-items: center;
  padding: 18px 18px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.brand-logo {
  width: 42px; height: 42px;
  background: transparent;
  display: grid; place-items: center;
  position: relative;
  overflow: visible;
  box-shadow: none;
  flex-shrink: 0;
  transition: transform .3s ease;
}
.brand-logo:hover { transform: translateY(-1px) rotate(-2deg); }
.brand-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 0;
  display: block;
  transition: transform .3s ease;
}
.brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-title {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.2px;
  color: var(--text);
  white-space: nowrap;
}
.brand-sub {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.brand-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, .15);
  flex-shrink: 0;
  animation: pulseGlow 2.4s ease-in-out infinite;
}

/* ---------- Live KPI Ticker (rotating pulse strip) ---------- */
.nav-ticker {
  position: relative;
  margin: 10px 14px 0;
  padding: 7px 11px 7px 38px;
  border-radius: 11px;
  background:
    linear-gradient(135deg,
      rgba(111, 185, 143, .12) 0%,
      rgba(125, 211, 252, .08) 50%,
      rgba(94, 234, 212, .10) 100%);
  border: 1px solid rgba(111, 185, 143, .18);
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(111, 185, 143, .06);
}
[dir="rtl"] .nav-ticker { padding: 7px 38px 7px 11px; }

.nav-ticker-pulse {
  position: absolute;
  inset-inline-start: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .25);
  animation: tickerPulse 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.nav-ticker-stack {
  flex: 1;
  position: relative;
  min-height: 18px;
  overflow: hidden;
}
.nav-ticker-item {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1.25);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-ticker-item.is-on {
  opacity: 1;
  transform: translateY(0);
}
.nav-ticker-item.is-out {
  opacity: 0;
  transform: translateY(-8px);
}
.nav-ticker-icon {
  font-size: 13px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.08));
}
.nav-ticker-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-ticker-tag {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .5px;
  padding: 2px 6px;
  border-radius: 5px;
  background: linear-gradient(135deg, #ef4444, #f97316);
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(239, 68, 68, .35);
  animation: tickerTagBreathe 2.2s ease-in-out infinite;
}

@keyframes tickerPulse {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, .25);
    transform: translateY(-50%) scale(1);
  }
  50% {
    box-shadow: 0 0 0 5px rgba(239, 68, 68, .12);
    transform: translateY(-50%) scale(1.15);
  }
}
@keyframes tickerTagBreathe {
  0%, 100% { box-shadow: 0 1px 4px rgba(239, 68, 68, .35); }
  50%      { box-shadow: 0 1px 8px rgba(239, 68, 68, .55); }
}

[data-theme="dark"] .nav-ticker {
  background:
    linear-gradient(135deg,
      rgba(111, 185, 143, .14) 0%,
      rgba(125, 211, 252, .08) 50%,
      rgba(94, 234, 212, .10) 100%);
  border-color: rgba(111, 185, 143, .24);
}

/* ---------- Sidebar org context chip + dropdown [sidebar-org-ctx] ---------- */
.sidebar-org-ctx { padding: 0 12px 8px; }

/* Wrapper — dropdown anchor */
.soc-wrap { position: relative; }

/* Trigger chip */
.soc-chip {
  display: flex; align-items: center; gap: 7px;
  width: 100%; min-width: 0; min-height: 34px; padding: 5px 6px 5px 2px;
  background: transparent;
  border: 0; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; text-align: start;
  cursor: pointer; transition: background .18s, color .18s;
  color: var(--ink);
}
.soc-chip:hover { background: color-mix(in srgb, var(--accent, #635bff) 8%, transparent); color: var(--accent, #635bff); }
.soc-chip.is-open { background: color-mix(in srgb, var(--accent, #635bff) 10%, transparent); color: var(--accent, #635bff); }
.soc-icon { flex-shrink: 0; color: var(--accent, #635bff); }
.soc-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.soc-name.soc-empty-text { font-weight: 400; color: var(--muted); font-style: italic; }
.soc-chevron { flex-shrink: 0; color: var(--muted); transition: transform .2s ease; }
.soc-chip.is-open .soc-chevron { transform: rotate(180deg); }

/* Dropdown menu */
.soc-menu {
  position: absolute;
  inset-block-start: calc(100% + 4px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14), 0 2px 8px rgba(0,0,0,.08);
  z-index: 300;
  overflow: hidden;
  animation: socMenuIn .18s ease;
}
@keyframes socMenuIn {
  from { opacity: 0; transform: translateY(-6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.soc-menu-header {
  padding: 9px 12px 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); text-transform: uppercase;
  border-block-end: 1px solid var(--border);
}
.soc-menu-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 12.5px; text-align: start;
  cursor: pointer; color: var(--ink);
  transition: background .14s;
}
.soc-menu-item:hover { background: var(--surface-2); }
.soc-menu-item.soc-current { font-weight: 700; color: var(--accent, #635bff); }
.soc-menu-item.soc-current:hover { background: color-mix(in srgb, var(--accent, #635bff) 8%, transparent); }
.soc-menu-check { flex-shrink: 0; color: var(--accent, #635bff); opacity: 0; }
.soc-menu-item.soc-current .soc-menu-check { opacity: 1; }
.soc-menu-item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Collapsed sidebar: icon only, dropdown still works */
.sidebar.is-collapsed .sidebar-org-ctx { padding: 0 6px 8px; }
.sidebar.is-collapsed .soc-chip { justify-content: center; padding: 7px; }
.sidebar.is-collapsed .soc-name,
.sidebar.is-collapsed .soc-chevron { display: none; }
.sidebar.is-collapsed .soc-menu { inset-inline-start: calc(100% + 4px); inset-inline-end: auto; min-width: 200px; }

/* ---------- Command palette trigger (sidebar) ---------- */
.nav-quick {
  padding: 4px 12px 8px;
  flex-shrink: 0;
}
.palette-trigger {
  width: 100%;
  min-width: 0;
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-muted);
  font: inherit;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.palette-trigger:hover,
.palette-trigger:focus-visible {
  background: var(--surface);
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(44, 120, 115, .14);
  outline: none;
}
.palette-trigger-icon {
  width: 14px; height: 14px;
  flex-shrink: 0;
}
.palette-trigger-label {
  flex: 1;
  min-width: 0;
  text-align: start;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.palette-trigger-kbd {
  padding: 1px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 10px;
  font-family: ui-monospace, Menlo, monospace;
  color: var(--text-muted);
  font-weight: 600;
  flex-shrink: 0;
}


/* ---------- Nav scroll area ---------- */
.nav {
  padding: 4px 10px 32px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-padding-block: 10px 48px;
  overscroll-behavior: contain;
}
.nav::-webkit-scrollbar { width: 5px; }
.nav::-webkit-scrollbar-track { background: transparent; }
.nav::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 4px;
}
.nav:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }

/* ---------- Section header ---------- */
.nav-section {
  padding: 14px 12px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-section span {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .8px;
  text-transform: uppercase;
  opacity: .75;
}
.nav-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, transparent, var(--border) 30%, var(--border));
  opacity: .6;
}
[dir="rtl"] .nav-section::after {
  background: linear-gradient(to right, transparent, var(--border) 30%, var(--border));
}
.nav-section:first-child { padding-top: 4px; }

/* ---------- Nav item ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9.5px 11px;
  border-radius: 9px;
  color: var(--text-muted);
  font-weight: 400;
  font-size: 11.5px;
  line-height: 1.4;
  position: relative;
  margin-bottom: 1px;
  transition:
    background .22s cubic-bezier(.4,0,.2,1),
    color .18s ease,
    box-shadow .22s ease,
    transform .18s cubic-bezier(.2,.7,.3,1.25);
  text-decoration: none;
  isolation: isolate;
}
.nav-item:hover {
  background: var(--surface-2);
  color: var(--text);
  transform: translateX(-2px);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
[dir="rtl"] .nav-item:hover { transform: translateX(2px); }
.nav-item .nav-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: currentColor;
  opacity: .82;
  transition: opacity .18s ease, transform .25s cubic-bezier(.2,.7,.3,1.25);
}
.nav-item:hover .nav-icon { opacity: 1; transform: scale(1.08); }
.nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Active state — soft brand fill + animated indicator bar + sheen */
.nav-item.active {
  background: linear-gradient(135deg, rgba(44, 120, 115, .14), rgba(155, 175, 230, .06));
  color: var(--brand-700);
  font-weight: 500;
  box-shadow:
    inset 0 0 0 1px rgba(44, 120, 115, .2),
    0 4px 14px rgba(44, 120, 115, .12);
  transform: translateX(0);
}
[dir="rtl"] .nav-item.active:hover { transform: translateX(0); }
.nav-item.active .nav-icon { opacity: 1; color: var(--brand-600); }

/* Animated indicator bar — slides up + glows */
.nav-item::before {
  content: '';
  position: absolute;
  inset-inline-start: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 0;
  background: linear-gradient(180deg, var(--brand-500), var(--accent-500));
  border-radius: 0 4px 4px 0;
  transition: height .35s cubic-bezier(.22,.7,.16,1), box-shadow .35s ease;
  z-index: 2;
}
[dir="rtl"] .nav-item::before { border-radius: 4px 0 0 4px; }
.nav-item.active::before {
  height: 24px;
  box-shadow: 0 0 12px rgba(44, 120, 115, .5);
  animation: navIndicatorPulse 2.4s ease-in-out infinite;
}

/* Sheen — subtle moving highlight across active item */
.nav-item.active::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.18) 50%,
    transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
  animation: navSheen 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.nav-item.active .nav-label,
.nav-item.active .nav-icon,
.nav-item.active .nav-badge { position: relative; z-index: 2; }

@keyframes navIndicatorPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(44, 120, 115, .5); }
  50%      { box-shadow: 0 0 18px rgba(44, 120, 115, .75); }
}
@keyframes navSheen {
  0%   { background-position: 200% 0; }
  60%  { background-position: -100% 0; }
  100% { background-position: -100% 0; }
}

[data-theme="dark"] .nav-item.active {
  background: linear-gradient(135deg, rgba(120, 150, 230, .18), rgba(180, 200, 245, .06));
  color: #b8c8f5;
  box-shadow:
    inset 0 0 0 1px rgba(120, 150, 230, .28),
    0 4px 14px rgba(120, 150, 230, .12);
}
[data-theme="dark"] .nav-item.active .nav-icon { color: #b8c8f5; }
[data-theme="dark"] .nav-item.active::before { box-shadow: 0 0 14px rgba(120, 150, 230, .6); }
[data-theme="dark"] .nav-item.active::after {
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.08) 50%,
    transparent 70%);
  background-size: 200% 100%;
  background-position: 200% 0;
}

/* =========================================================================
   NAV GROUPS (collapsible parent + nested sub-items)
   ========================================================================= */
.nav-group {
  margin: 2px 0 2px;
  border-radius: 12px;
  position: relative;
  isolation: isolate;
  animation: slideInRight .35s cubic-bezier(.22,.7,.16,1) both;
}
[dir="rtl"] .nav-group { animation-name: slideInLeft; }
.nav-group:nth-of-type(1) { animation-delay: .04s; }
.nav-group:nth-of-type(2) { animation-delay: .09s; }
.nav-group:nth-of-type(3) { animation-delay: .14s; }
.nav-group:nth-of-type(4) { animation-delay: .19s; }
.nav-group:nth-of-type(5) { animation-delay: .24s; }
.nav-group:nth-of-type(6) { animation-delay: .29s; }
.nav-group:nth-of-type(7) { animation-delay: .34s; }
.nav-group:nth-of-type(8) { animation-delay: .39s; }

/* Parent button (the toggle head) */
.nav-group-head {
  box-sizing: border-box;
  min-height: 40px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px 10px 11px;
  border: 0;
  background: transparent;
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  text-align: start;
  position: relative;
  letter-spacing: .1px;
  transition:
    background .22s cubic-bezier(.4,0,.2,1),
    color .18s ease,
    box-shadow .22s ease;
}
.nav-group-head:hover {
  background: var(--surface-2);
  color: var(--brand-700);
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
.nav-group-head:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 1px;
}
.nav-group-head .nav-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
  opacity: .78;
  color: var(--brand-600);
  transition: transform .25s cubic-bezier(.2,.7,.3,1.25), opacity .18s ease;
}
.nav-group-head:hover .nav-icon { opacity: 1; transform: scale(1.08); }
.nav-group-head .nav-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
}

.nav-group-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 2px 7px;
  letter-spacing: .3px;
  font-feature-settings: "tnum";
  flex-shrink: 0;
  transition: background .22s ease, color .18s ease;
}
.nav-group-head:hover .nav-group-count {
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-700);
}

/* hide item-count badges from all nav groups (Founder instruction 2026-08-01) */
.nav-group-count { display: none !important; }

.nav-caret {
  width: 14px; height: 14px;
  flex-shrink: 0;
  color: var(--text-muted);
  opacity: .65;
  transition: transform .28s cubic-bezier(.2,.7,.3,1.25), opacity .18s ease;
}
.nav-group-head:hover .nav-caret { opacity: 1; }
/* When expanded, caret points up */
.nav-group-head[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

/* Nested menu disclosure state must remain distinct from the active-route
   highlight. Closed = neutral downward caret; open = branded surface,
   leading accent and a filled upward caret. */
.nav-group-head .nav-caret {
  box-sizing: content-box;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  transition: transform .28s cubic-bezier(.2,.7,.3,1.25), opacity .18s ease,
    color .18s ease, background .18s ease, box-shadow .18s ease;
}
.nav-group-head[aria-expanded="true"] {
  background: color-mix(in srgb, var(--brand-500) 11%, var(--surface));
  color: var(--brand-700);
  box-shadow: inset 3px 0 0 var(--brand-500), inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 28%, transparent);
  font-weight: 700;
}
.nav-group-head[aria-expanded="true"] .nav-caret {
  color: var(--surface);
  background: var(--brand-600);
  opacity: 1;
  box-shadow: 0 2px 7px color-mix(in srgb, var(--brand-600) 28%, transparent);
}
.nav-group-head[aria-expanded="true"] .nav-icon { color: var(--brand-700); opacity: 1; }

/* Group container hint when any child is active */
.nav-group.has-active > .nav-group-head {
  background: linear-gradient(135deg, rgba(44, 120, 115, .08), rgba(155, 175, 230, .03));
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px rgba(44, 120, 115, .12);
}
.nav-group.has-active > .nav-group-head .nav-icon { color: var(--brand-600); opacity: 1; }
.nav-group.has-active > .nav-group-head .nav-group-count {
  background: color-mix(in srgb, var(--brand-500) 14%, transparent);
  color: var(--brand-700);
}

/* Body (collapsible) — max-height transition. grid-template-rows:0fr only
   collapses the first grid track, so direct-child items would stay visible.
   max-height + overflow:hidden actually clips every child reliably. */
.nav-group-body {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    max-height .34s cubic-bezier(.22,.7,.16,1),
    opacity   .22s ease;
}
.nav-group[data-open="true"] > .nav-group-body {
  /* 1200px handles up to ~37 items (largest group: growth=20 items × 32px ≈ 640px). */
  max-height: 1200px;
  opacity: 1;
}

/* Sub-item (child link inside group) */
.nav-subitem {
  box-sizing: border-box;
  width: calc(100% - 14px);
  min-height: 32px;
  position: relative;
  margin-inline-start: 14px;
  padding: 7.5px 10px 7.5px 10px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-muted);
  border-radius: 8px;
}
.nav-subitem .nav-label {
  font-size: 11px;
  letter-spacing: .1px;
}

/* Vertical guide line for sub-items (only when group is open) */
.nav-group[data-open="true"] > .nav-group-body::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: 22px;
  width: 1px;
  background: linear-gradient(180deg,
    transparent,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 12%,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 88%,
    transparent);
  pointer-events: none;
}
/* Wait — the body has overflow:hidden + grid-template-rows. Use the group itself instead */
.nav-group > .nav-group-body::before { display: none; } /* disable */

.nav-group {
  /* host the guide line */
}
.nav-group[data-open="true"]::after {
  content: '';
  position: absolute;
  inset-inline-start: 22px;
  top: 42px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand-500) 18%, transparent),
    color-mix(in srgb, var(--brand-500) 18%, transparent) 90%,
    transparent);
  pointer-events: none;
  z-index: 0;
}

/* Sub-item dot (decorative bullet sitting on the guide line) */
.nav-sub-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  position: relative;
  margin-inline-end: 6px;
  margin-inline-start: -4px;
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}
.nav-subitem:hover .nav-sub-dot {
  background: var(--brand-500);
  transform: scale(1.4);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.nav-subitem.active .nav-sub-dot {
  background: var(--brand-600);
  transform: scale(1.5);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 22%, transparent);
}
.nav-sub-dot-report {
  background: var(--accent-500, #c9a86b);
}
.nav-subitem:hover .nav-sub-dot-report,
.nav-subitem.active .nav-sub-dot-report {
  background: var(--accent-600, #b08540);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-500, #c9a86b) 22%, transparent);
}

/* nav-subitem-live: leaves the mock demo panel for a real backend-connected
   tool (opens in a new tab) — TRFC-0001 P4c migration admin. Visually
   flagged so operators don't mistake it for another mock page.
 *
 * [erp-menu-dual-views] Founder feedback (live, 2026-07-17): the full-word
 * "واقعی" tag read as noisy repeated across many nav rows. Replaced with a
 * compact single-letter badge — "C" (Canonical/real backend) green, "D"
 * (Demo/mock data) amber — applied both to these 4 static items and
 * dynamically (nav-live-badges.js) to any nav item whose route is a known
 * real-ERP route (window.__erpLiveRoutes) or a known mock-only dual-view
 * route (window.__erpMockOnlyRoutes). ".is-new" adds an "N" suffix + a
 * brand-colored ring for items added to the menu this round (platform-users/
 * profile-settings, TRFC-0017) so they stand out from long-standing ones. */
.nav-live-badge, .nav-demo-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 6px;
  margin-inline-start: auto;
  white-space: nowrap;
}
.nav-live-badge {
  color: var(--ok-600, #1f8a4c);
  background: color-mix(in srgb, var(--ok-500, #2e8b57) 14%, transparent);
}
.nav-demo-badge {
  color: var(--warn-600, #a3690f);
  background: color-mix(in srgb, var(--warn-500, #d99416) 16%, transparent);
}
.nav-subitem-live:hover .nav-live-badge,
.nav-item:hover .nav-live-badge {
  background: color-mix(in srgb, var(--ok-500, #2e8b57) 24%, transparent);
}
.nav-item:hover .nav-demo-badge {
  background: color-mix(in srgb, var(--warn-500, #d99416) 26%, transparent);
}
.nav-live-badge.is-new, .nav-demo-badge.is-new {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--brand-500, #2c7873) 55%, transparent);
}
/* [erp-menu-dual-views] Founder: a "C" (canonical) row is, by definition,
   also an ERP row (both badges read window.__erpLiveRoutes) — merge into
   one purple "CE" badge instead of stacking the green "C" pill + the
   separate purple "ERP" pill (nav-live-badges.js decides when to apply
   .is-erp; see that file + erp-menu-mode.js's applyBadges()). */
.nav-live-badge.is-erp {
  color: var(--brand-700, #4c3f9e);
  background: color-mix(in srgb, var(--brand-500, #2c7873) 18%, transparent);
}

/* Demo presentation mode: technical source/ERP markers are implementation
   diagnostics, not part of the original customer-facing sidebar. */
.nav-live-badge,
.nav-demo-badge,
.nav-erp-badge {
  display: none !important;
}
.nav-item:hover .nav-live-badge.is-erp {
  background: color-mix(in srgb, var(--brand-500, #2c7873) 30%, transparent);
}

/* Sub-item hover/active styles override the bigger nav-item.active gradient */
.nav-subitem:hover {
  background: color-mix(in srgb, var(--brand-500) 6%, transparent);
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.nav-subitem.active {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--brand-500) 14%, transparent),
    color-mix(in srgb, var(--brand-500) 4%, transparent));
  color: var(--brand-700);
  font-weight: 500;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.nav-subitem.active::before,
.nav-subitem.active::after { display: none; }

/* sub-featured tweak */
.nav-subitem.nav-subfeatured .nav-sub-dot {
  background: var(--brand-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 14%, transparent);
}

/* Badge inside sub-item: keep compact */
.nav-subitem .nav-badge {
  font-size: 9.5px;
  padding: 1px 6px;
  height: 16px;
}

/* Sub-items that carry a badge: use a 2-row layout so the Persian label
   has the FULL width for word-boundary wrapping (never breaks mid-word),
   and the badge sits neatly on line 2 under the label — not competing for
   space. This preserves both the label AND the meaningful badge label
   (e.g. "مزیت دیاکو"), instead of shortening either. */
.nav-subitem {
  flex-wrap: wrap;
  row-gap: 3px;
}
.nav-subitem .nav-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: normal;   /* wrap only at word boundaries — no mid-word break */
  word-break: normal;
}
.nav-subitem .nav-badge {
  order: 3;
  flex-basis: 100%;
  margin-inline-start: 21px;   /* align with label baseline (past the 10px dot + 11px gap) */
  align-self: flex-start;
  width: fit-content;
  margin-inline-end: 0;
}

/* Dark theme overrides */
[data-theme="dark"] .nav-group-head {
  color: #e4e8f5;
}
[data-theme="dark"] .nav-group-head:hover {
  color: #c8d4f5;
  background: rgba(255,255,255,.04);
}
[data-theme="dark"] .nav-group.has-active > .nav-group-head {
  background: linear-gradient(135deg, rgba(120, 150, 230, .14), rgba(180, 200, 245, .04));
  color: #c8d4f5;
  box-shadow: inset 0 0 0 1px rgba(120, 150, 230, .22);
}
[data-theme="dark"] .nav-group-count {
  background: rgba(255,255,255,.06);
  color: var(--text-muted);
}
[data-theme="dark"] .nav-group.has-active > .nav-group-count {
  background: rgba(120, 150, 230, .18);
  color: #c8d4f5;
}
[data-theme="dark"] .nav-subitem.active {
  background: linear-gradient(90deg, rgba(120, 150, 230, .2), rgba(120, 150, 230, .04));
  color: #c8d4f5;
  box-shadow: inset 0 0 0 1px rgba(120, 150, 230, .26);
}
[data-theme="dark"] .nav-group[data-open="true"]::after {
  background: linear-gradient(180deg,
    rgba(120, 150, 230, .2),
    rgba(120, 150, 230, .2) 90%,
    transparent);
}

/* Sidebar collapsed mode: hide labels + caret, only icons */
.sidebar-collapsed .nav-group-head .nav-label,
.sidebar-collapsed .nav-group-head .nav-group-count,
.sidebar-collapsed .nav-group-head .nav-caret { display: none; }
.sidebar-collapsed .nav-group-body { display: none !important; }
.sidebar-collapsed .nav-subitem { display: none !important; }

/* Deep-link section flash — pulses target card briefly when arriving via #route/section */
@keyframes sectionFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-500) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand-500) 30%, transparent); }
  35%  { box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-500) 38%, transparent), 0 0 24px 6px color-mix(in srgb, var(--brand-500) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand-500) 0%, transparent), 0 0 0 0 color-mix(in srgb, var(--brand-500) 0%, transparent); }
}
.section-flash {
  animation: sectionFlash 1.8s cubic-bezier(.22,.7,.16,1);
  border-radius: 16px;
  scroll-margin-top: 90px;
}

/* ---------- Nav dot legend (color key for sub-item dots) ---------- */
.nav-dot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 8px 14px 10px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  color: var(--text-muted);
  line-height: 1.4;
  flex-shrink: 0;
}
.ndl-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ndl-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.ndl-dot-idle {
  background: var(--border);
}
.ndl-dot-hover {
  background: var(--brand-500);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-500) 18%, transparent);
}
.ndl-dot-active {
  background: var(--brand-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500) 22%, transparent);
}
.ndl-badge {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  line-height: 1.4;
}
.ndl-badge-soon {
  background: color-mix(in srgb, var(--purple-500, #a020f0) 14%, transparent);
  color: var(--purple-600, #7c17bd);
}
.sidebar-collapsed .nav-dot-legend { display: none; }
[data-theme="dark"] .nav-dot-legend { color: rgba(226, 232, 240, .55); }

/* ---------- Sidebar footer ---------- */
.sidebar-footer {
  border-top: 1px solid var(--border);
  padding: 10px 12px;
  flex-shrink: 0;
}
.user-mini {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 7px 9px;
  border-radius: 10px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
  font: inherit;
  text-align: start;
  transition: background .18s ease, box-shadow .18s ease;
}
.user-mini:hover {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--border);
}
.avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--purple-500), var(--brand-500));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(44, 120, 115, .25);
}
#user-mini .avatar [data-ds-icon],
#user-mini .avatar [data-ds-icon] > svg {
  color: #fff !important;
  fill: currentColor;
  stroke: currentColor;
}
#user-mini .avatar [data-ds-icon] {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  line-height: 0;
}
#user-mini .avatar [data-ds-icon] > svg {
  display: block;
  width: 18px;
  height: 18px;
  margin: 0;
  vertical-align: 0;
}
.user-mini-text { flex: 1; min-width: 0; }
.user-name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: 10.5px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.user-chevron {
  width: 14px; height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: transform .2s ease;
}
[dir="rtl"] .user-chevron { transform: rotate(180deg); }
.user-mini:hover .user-chevron { color: var(--text); }

/* ---------- Main ---------- */
.main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.topbar {
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
  padding: 0 28px;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 40;
  animation: slideDown .35s cubic-bezier(.22,.7,.16,1) both;
}
.icon-btn {
  box-sizing: border-box;
  width: 40px; height: 40px;
  padding: 0; margin: 0;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  display: grid; place-items: center; place-content: center;
  font-size: 0; line-height: 0;
  appearance: none; -webkit-appearance: none;
  position: relative;
  overflow: visible;
  transition: all .2s cubic-bezier(.22,.7,.16,1);
}
.icon-btn .ds-ico,
.icon-btn .ds-grid__ico,
.icon-btn svg,
.icon-btn [data-ds-icon] {
  display: block;
  width: 20px;
  height: 20px;
  margin: 0;
  line-height: 0;
  vertical-align: 0;
}
.icon-btn:hover {
  background: var(--brand-50); border-color: var(--brand-300);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.icon-btn:active { transform: translateY(0); }
[data-theme="dark"] .icon-btn:hover { background: var(--surface); }
.notif-dot {
  --notif-badge-size: 26px;
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  min-width: var(--notif-badge-size);
  height: var(--notif-badge-size);
  padding: 0 4px;
  border-radius: 999px;
  background: var(--red-500);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: grid;
  place-items: center;
  border: 0;
  box-shadow: 0 2px 8px -2px rgba(220, 38, 38, .45);
  pointer-events: none;
  transform: translate(-50%, -50%);
}

#notif-toggle .notif-bell { display:grid; place-items:center; width:20px; height:20px; }
#notif-toggle .notif-bell[hidden] { display:none !important; }

/* Live leads mode hides legacy demo analytics; author layout rules must not
   override the semantic hidden state. */
.leads-hub-page--operational [hidden] { display: none !important; }
#notif-toggle.has-unread { color:transparent; }

.notif-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(239, 68, 68, .52);
  animation: notifBadgeRing 1.8s ease-out infinite;
  pointer-events: none;
}

@keyframes notifBadgeBlink {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: .72; transform: translate(-50%, -50%) scale(.94); }
}

@keyframes notifBadgeRing {
  0% { opacity: .88; transform: scale(1); }
  75% { opacity: 0; transform: scale(1.75); }
  100% { opacity: 0; transform: scale(1.75); }
}

.search {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  position: relative;
}
.search input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 12px;
  padding: 0 16px;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.4;
}
.search input:focus { background: var(--surface); border-color: var(--brand-300); }
.search-key {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; color: var(--text-muted);
  background: var(--surface);
  padding: 3px 8px; border-radius: 6px;
  border: 1px solid var(--border);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 0 0 auto;
}
.topbar-actions > * { flex: 0 1 auto; min-width: 0; }
.topbar-actions > .date-pill,
.topbar-actions > .chip,
.topbar-actions > .topbar-org-ctx .soc-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  height: 40px;
  padding-block: 0;
  border-radius: 12px;
  vertical-align: middle;
}
.topbar-actions > .date-pill,
.topbar-actions > .chip { line-height: 1; }
.topbar-actions > .topbar-org-ctx .soc-chip { line-height: 1; }
@media (min-width: 901px) {
  /* Keep the utility cluster anchored to the physical left edge. The search
     owns every remaining pixel between the sidebar toggle and today's date. */
  .topbar > .search {
    flex: 1 1 auto;
    min-width: 160px;
    max-width: none;
  }
  .topbar > .topbar-actions {
    flex: 0 0 auto;
    margin-inline-start: auto;
    margin-left: 0;
  }
}
.topbar-org-ctx {
  flex:0 1 auto;
  min-width:0;
  max-width:max-content;
  padding:0;
}
.topbar-org-ctx .soc-chip {
  width:max-content;
  max-width:100%;
  min-height:40px;
  padding:6px 10px;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:12px;
}
.topbar-org-ctx .soc-menu {
  inset-block-start:calc(100% + 8px);
  inset-inline-start:auto;
  inset-inline-end:0;
  width:220px;
}
.topbar-palette-trigger {
  width:40px;
  min-width:40px;
  min-height:40px;
  padding:0;
  justify-content:center;
  flex:0 0 auto;
}
@media (max-width:1180px) and (min-width:901px) {
  .topbar-org-ctx { min-width:40px; flex-basis:40px; }
  .topbar-org-ctx .soc-chip { justify-content:center; padding-inline:8px; }
  .topbar-org-ctx .soc-name,
  .topbar-org-ctx .soc-chevron { display:none; }
}
.lang-pill {
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
}

/* ---------- Content ---------- */
.content {
  padding: 30px 28px;
  display: flex; flex-direction: column; gap: var(--space-macro);
  flex: 1;
}
.footer {
  padding: 18px 28px;
  display: flex; justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-top: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted);
  background: var(--surface);
}
.footer-product-version {
  appearance: none;
  font-family: inherit;
  cursor: pointer;
  direction: ltr;
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--accent, #6256d9));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft, #eeebff));
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: .025em;
  white-space: nowrap;
}
.footer-product-version:hover { color:var(--accent,#6256d9); border-color:color-mix(in srgb,var(--accent,#6256d9) 48%,var(--border)); transform:translateY(-1px); }
.footer-product-version:focus-visible { outline:2px solid var(--accent,#6256d9); outline-offset:3px; }
.pv-history { display:grid; gap:10px; direction:rtl; }
.pv-history__intro { margin:0 0 4px; color:var(--text-muted); font-size:12.5px; line-height:1.8; }
.pv-history__item { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:start; padding:13px 14px; border:1px solid color-mix(in srgb,var(--border) 82%,var(--pastel-lilac,#ddd6fe)); border-radius:14px; background:color-mix(in srgb,var(--surface) 94%,var(--pastel-sky,#bae6fd)); }
.pv-history__item.is-current { border-color:color-mix(in srgb,var(--brand-500,#2c7873) 46%,var(--border)); background:color-mix(in srgb,var(--pastel-mint,#a7f3d0) 23%,var(--surface)); }
.pv-history__version { direction:ltr; display:inline-flex; align-items:center; justify-content:center; min-width:72px; padding:4px 8px; border-radius:999px; background:var(--surface); color:var(--brand-700,#0f766e); font-size:11px; font-weight:800; box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand-500,#2c7873) 20%,var(--border)); }
.pv-history__copy>strong { display:block; margin-bottom:9px; color:var(--text); font-size:13.5px; }
.pv-history__changes { display:grid; gap:7px; }
.pv-change { display:grid; grid-template-columns:76px minmax(0,1fr); gap:9px; align-items:start; padding:8px 9px; border:1px solid color-mix(in srgb,var(--border) 76%,transparent); border-radius:10px; background:color-mix(in srgb,var(--surface) 88%,transparent); }
.pv-change__type { display:inline-flex; align-items:center; justify-content:center; min-height:24px; padding:3px 7px; border-radius:999px; font-size:9.5px; font-weight:800; white-space:nowrap; }
.pv-change__type.is-feature { background:var(--pastel-mint,#dcfce7); color:#166534; }
.pv-change__type.is-improvement { background:var(--pastel-sky,#e0f2fe); color:#075985; }
.pv-change__type.is-fix { background:var(--pastel-rose,#ffe4e6); color:#9f1239; }
.pv-change__area { display:block; margin-bottom:2px; color:var(--text); font-size:11px; font-weight:800; }
.pv-change p { margin:0; color:var(--text-muted); font-size:11px; line-height:1.8; }
@media (max-width:520px) { .pv-history__item { grid-template-columns:1fr; } .pv-history__version { justify-self:start; } }
@media (max-width:420px) { .pv-change { grid-template-columns:1fr; } .pv-change__type { justify-self:start; } }
@media (max-width: 640px) {
  .footer { padding: 14px 16px; gap: 10px; }
  .footer-product-version { padding: 4px 8px; font-size: 10px; }
}

/* ---------- Embed mode (chrome-less iframe embedding) ----------
   [crm-modular-system] ARFC-0043 §6.4.8 amendment (2026-08-01) — set on
   <html> by embed-mode.js (window.DiacoEmbedMode.activate()) once the CRM
   Embed Kit's SSO exchange succeeds. Hides every piece of panel chrome that
   makes sense standalone but not inside a host app's own <iframe>: the full
   nav sidebar, the topbar (search/notifications/branding/theme toggle), the
   footer, and the floating Diaco Pilot widget (#rp-root, diaco-pilot.js) — a
   generic class, not a CRM-specific one; any future embeddable module reuses
   it unchanged. The Diaco Financial ASP embed keeps DiaMate (#rp-root): it
   is the customer's only entry point and DiaMate scopes itself by the
   external menu permissions there. */
html.rlx-embed-mode .sidebar,
html.rlx-embed-mode .topbar,
html.rlx-embed-mode .footer,
html.rlx-embed-mode:not([data-asp-embed="true"]) #rp-root {
  display: none !important;
}
html.rlx-embed-mode .main {
  margin-inline-start: 0;
  width: 100%;
  background: var(--bg);
}
html.rlx-embed-mode .content {
  padding: 16px;
  background: var(--bg);
}

/* The ASP iframe owns the document scroller. Keep its chrome aligned with the
   shared green brand and visually attach the global-search tab to that gutter. */
html[data-asp-embed="true"] {
  --asp-scrollbar-track: rgb(15,118,110);
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, white 50%, transparent) var(--asp-scrollbar-track);
}
/* `scrollbar-color` is inherited. Stop the ASP document scrollbar theme at
   the viewport so modal, drawer and popover scrollers retain their original
   browser/component appearance. Component-specific scrollbar rules below can
   still opt in to their own appearance. */
html[data-asp-embed="true"] body { scrollbar-color: auto; }
html[data-asp-embed="true"]::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-asp-embed="true"]::-webkit-scrollbar-track { background: var(--asp-scrollbar-track); }
html[data-asp-embed="true"]::-webkit-scrollbar-button { width: 0; height: 0; background: transparent; }
html[data-asp-embed="true"]::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, white 50%, transparent);
  background-clip: padding-box;
}
html[data-asp-embed="true"]::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, white 68%, transparent);
  background-clip: padding-box;
}
html[data-asp-embed="true"] .crm-global-finder__tab { left: -6px; }

.page-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 16px;
}
.page-title { font-size: 26px; font-weight: 700; margin: 0 0 4px; }
.page-sub { color: var(--text-muted); margin: 0; }
.crm-taxonomy-head { align-items: center; margin: 0; }
.crm-taxonomy-head > div { min-width: 0; }
.crm-taxonomy-head .page-title { margin: 0 0 6px; }
.crm-taxonomy-head .page-sub { max-width: 760px; line-height: 1.8; }
.crm-taxonomy-head [data-tax-create] { flex: 0 0 auto; }
.crm-taxonomy-page { display: grid; gap: 16px; }
.crm-taxonomy-page > [data-crm-taxonomy-hero] { margin: 0; }
.crm-taxonomy-page > [data-crm-taxonomy-hero] .ds-page-hero__actions {
  justify-content: flex-start;
  margin-top: 16px;
}
.crm-taxonomy-page__grid-card { margin: 0; overflow: hidden; }
@media (max-width: 640px) {
  .crm-taxonomy-head { align-items: stretch; flex-direction: column; }
  .crm-taxonomy-head [data-tax-create] { align-self: flex-start; }
}

/* ---------- Buttons ---------- */
.btn {
  height: 40px; padding: 0 18px;
  border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 600; font-size: 13px;
  display: inline-flex; align-items: center; gap: 8px;
  transition: all .25s cubic-bezier(.22,.7,.16,1);
  position: relative;
  overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transition: left .5s;
}
.btn:hover::before { left: 100%; }
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); border-color: var(--border-strong); }
.btn:active { transform: translateY(0); }
.btn.primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff; border-color: transparent;
  box-shadow: 0 6px 16px rgba(44, 120, 115, .35);
}
.btn.primary:hover { box-shadow: 0 10px 24px rgba(44, 120, 115, .45); }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--red-500); border-color: var(--red-500); }

.chip {
  padding: 5px 11px; border-radius: 999px;
  background: var(--pastel-sky); color: var(--brand-700);
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  transition: transform .2s ease;
}
.chip:hover { transform: scale(1.04); }
.chip.green { background: var(--pastel-mint);  color: #2f8a5e; }
.chip.red   { background: var(--pastel-rose);  color: #b14458; }
.chip.amber { background: var(--pastel-peach); color: #c46920; }
.chip.purple{ background: var(--pastel-lilac); color: #6d50d4; }
/* Social chips · brand-tinted icons for Instagram/Telegram/WhatsApp */
.chip.social-ig { background: linear-gradient(135deg, #fce4ec, #fff3e0); color: #c13584; }
.chip.social-tg { background: #e3f2fd; color: #0088cc; }
.chip.social-wa { background: #e8f5e9; color: #25d366; }
.chip .social-ico { width: 13px; height: 13px; flex-shrink: 0; display: inline-block; vertical-align: -2px; }
.chip.lemon { background: var(--pastel-lemon); color: #a37919; }
.topbar-actions > .diaco-financial-source-status { cursor:default; }
.topbar-actions > .diaco-financial-source-status.is-checking,
.topbar-actions > .diaco-financial-source-status.is-local { color:#a86000;background:var(--pastel-amber,#fff4d6);border-color:color-mix(in srgb,#d97706 22%,transparent); }
.topbar-actions > .diaco-financial-source-status.is-main { color:#08794c;background:var(--pastel-mint,#e8f8ef);border-color:color-mix(in srgb,#16a34a 20%,transparent); }
.topbar-actions > .diaco-financial-source-status.is-main :is(.ds-ico,svg),
.topbar-actions > .diaco-financial-source-status.is-main [data-ds-icon-tone] { color:#08794c!important; }
.topbar-actions > .diaco-financial-source-status.is-unavailable { color:#b91c1c;background:var(--pastel-rose,#fff0f2);border-color:color-mix(in srgb,#ef4444 20%,transparent); }
.topbar-actions > .diaco-financial-source-status:is(.is-checking,.is-local) :is([data-ds-icon],.ds-ico,svg,path){color:#a86000!important;fill:currentColor!important}
.topbar-actions > .diaco-financial-source-status.is-main :is([data-ds-icon],.ds-ico,svg,path){color:#08794c!important;fill:currentColor!important}
.topbar-actions > .diaco-financial-source-status.is-unavailable :is([data-ds-icon],.ds-ico,svg,path){color:#b91c1c!important;fill:currentColor!important}
.topbar-actions > :has(> .diaco-financial-source-status) {
  box-sizing: border-box;
  display: inline-flex;
  align-items: stretch;
  min-height: 40px;
  height: 40px;
}
.topbar-actions > :has(> .diaco-financial-source-status) > .diaco-financial-source-status {
  height: 40px;
  min-height: 40px;
  padding-block: 0;
  border-radius: 12px !important;
}
.diaco-financial-source-status { flex:0 0 40px; }

[data-theme="dark"] .chip { background: rgba(30,109,255,.15); color: #8eb6ff; }
[data-theme="dark"] .chip.green { background: rgba(16,185,129,.15); color: #34d399; }
[data-theme="dark"] .chip.red   { background: rgba(239,68,68,.15);  color: #f87171; }
[data-theme="dark"] .chip.amber { background: rgba(245,158,11,.15); color: #fbbf24; }

.chip-btn {
  padding: 6px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12px; color: var(--text-muted); font-weight: 500;
}
.chip-btn.active {
  background: var(--brand-500); color: #fff; border-color: transparent;
}

/* ---------- Cards & Grids ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-xs);
  transition: transform .25s cubic-bezier(.22,.7,.16,1), box-shadow .25s ease, border-color .2s ease;
  position: relative;
}
.card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: var(--space-meso); gap: 12px; flex-wrap: wrap;
}
.card-title { font-weight: 700; font-size: 15px; letter-spacing: -.015em; }
.card-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; line-height: 1.5; }

/* [accounting-implementation-p17jan] — pastel section-header band for
   .card-head, opt-in via an extra class (does not change .card-head's
   default look anywhere else in the app). Set --pastel-tint per usage,
   e.g. style="--pastel-tint:var(--pastel-mint)", rotating through the
   existing --pastel-* palette (main.css §5) instead of introducing new
   colors, per the Founder's "پاستیلی نه طوسی" direction for boxed
   section headers on the #accounting page. */
.card-head--pastel {
  --pastel-tint: var(--pastel-sky);
  margin: -22px -22px var(--space-meso);
  padding: 14px 22px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: color-mix(in srgb, var(--pastel-tint) 38%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--pastel-tint) 55%, transparent);
}

/* CRM workbench — PL-03 operational dashboard consuming DS hero/cards/charts. */
.crm-workbench-page { display:grid; gap:var(--space-meso); }
.crm-global-finder { position:fixed; inset:0; z-index:1200; pointer-events:none; }
.crm-global-finder__tab { --crm-finder-tab-surface:rgb(15,118,110); position:fixed; left:0; top:82px; display:flex; align-items:center; justify-content:center; width:29px; min-height:0; padding:10px 4px; border:1px solid rgba(255,255,255,.3); border-left:0; border-radius:0 12px 12px 0; color:#fff; background:var(--crm-finder-tab-surface); box-shadow:0 8px 20px rgba(15,118,110,.24); font:700 12px/1.2 inherit; cursor:pointer; opacity:1; pointer-events:auto; transition:transform 320ms cubic-bezier(.22,1,.36,1),background-color 260ms ease,box-shadow 180ms ease,opacity 180ms ease; writing-mode:vertical-rl; }
.crm-global-finder__tab::before,.crm-global-finder__tab::after { content:""; position:absolute; left:0; z-index:-1; width:18px; height:18px; pointer-events:none; }
.crm-global-finder__tab::before { top:-18px; border-radius:0 0 0 18px; box-shadow:-9px 9px 0 9px var(--crm-finder-tab-surface); }
.crm-global-finder__tab::after { bottom:-18px; border-radius:18px 0 0 0; box-shadow:-9px -9px 0 9px var(--crm-finder-tab-surface); }
.crm-global-finder__tab:hover { box-shadow:0 12px 34px rgba(15,118,110,.42); opacity:1; transform:none; }
.crm-global-finder__tab:focus-visible,.crm-global-finder__close:focus-visible { outline:3px solid color-mix(in srgb,var(--brand) 32%,white); outline-offset:2px; }
.crm-global-finder__backdrop { position:absolute; inset:0; background:rgba(15,23,42,.28); opacity:0; pointer-events:none; transition:opacity 220ms ease; }
.crm-global-finder__panel { --crm-finder-content-width:min(1460px,calc(100% - 160px)); position:absolute; top:82px; left:0; right:calc(var(--sidebar-rail-w,72px) + 24px); z-index:1; display:block; height:75px; min-height:75px; max-height:none; box-sizing:border-box; padding:0; overflow:visible; visibility:hidden; pointer-events:none; transform:translateX(calc(-100% - 1px)); transition:transform 520ms cubic-bezier(.64,0,.78,0),visibility 0s linear 520ms; }
.crm-global-finder__panel.ds-governed-dialog { overflow:visible; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; }
.crm-global-finder__panel::before { content:""; position:absolute; inset:0; z-index:0; border:1px solid rgba(255,255,255,.96); border-left:0; border-radius:0 22px 22px 0; background:rgba(15,118,110,.8); box-shadow:0 7px 22px -16px rgba(15,23,42,.42); transition:background-color 520ms cubic-bezier(.64,0,.78,0),box-shadow 440ms ease; }
.crm-global-finder-open { overflow:hidden; }
.crm-global-finder.is-open { pointer-events:auto; }
.crm-global-finder.is-open .crm-global-finder__backdrop { opacity:1; pointer-events:auto; }
.crm-global-finder.is-open .crm-global-finder__panel { visibility:visible; pointer-events:auto; transform:translateX(0); transition:transform 520ms cubic-bezier(.22,1,.36,1),visibility 0s; }
.crm-global-finder.is-closing .crm-global-finder__panel { visibility:visible; pointer-events:none; transform:translateX(calc(-100% + 29px)); transition:transform 520ms cubic-bezier(.64,0,.78,0),visibility 0s; }
.crm-global-finder.is-open .crm-global-finder__panel::before { background:var(--surface); transition:background-color 520ms cubic-bezier(.22,1,.36,1),box-shadow 440ms ease; }
.crm-global-finder.is-closing .crm-global-finder__panel::before { background:rgba(15,118,110,.8); transition:background-color 520ms cubic-bezier(.64,0,.78,0),box-shadow 440ms ease; }
.crm-global-finder.is-open .crm-global-finder__tab { pointer-events:none; transform:translateX(-100%); background:var(--surface); }
.crm-global-finder.is-closing .crm-global-finder__tab { visibility:hidden; pointer-events:none; transform:none; }
.crm-global-finder.is-closed-snap .crm-global-finder__panel { transition:none; }
.crm-global-finder.is-closed-snap .crm-global-finder__tab { transition:none; }
.crm-global-finder__head { position:absolute; inset:0; z-index:2; display:block; margin:0; }
.crm-global-finder__head::before,.crm-global-finder__head::after { content:""; position:absolute; left:0; z-index:-1; width:22px; height:22px; pointer-events:none; }
.crm-global-finder__head::before { top:-22px; border-radius:0 0 0 22px; box-shadow:-11px 11px 0 11px var(--surface); }
.crm-global-finder__head::after { bottom:-22px; border-radius:22px 0 0 0; box-shadow:-11px -11px 0 11px var(--surface); }
.crm-global-finder__label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.crm-global-finder__label strong,.crm-global-finder__label small { display:block; }
.crm-global-finder__label small { margin-block-start:2px; color:var(--text-muted); font-size:11px; }
.crm-global-finder__close { position:absolute; left:18px; top:50%; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:0; color:var(--text-muted); background:transparent; box-shadow:none; cursor:pointer; pointer-events:auto; transform:translateY(-50%); }
.crm-global-finder__close:hover { color:var(--brand-strong); background:transparent; }
.crm-global-finder__control { position:absolute; left:50%; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; gap:8px; width:var(--crm-finder-content-width); box-sizing:border-box; padding:12px; border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border)); border-radius:22px; background:var(--surface); box-shadow:0 22px 48px -28px rgba(15,23,42,.56); transform:translate(-50%,-50%); }
.crm-global-finder__control .ds-grid__search-wrap { flex:1 1 auto; width:auto; min-width:220px; }
.crm-global-finder__control .ds-grid__search { width:100%; }
.crm-global-finder__control .ds-grid__search::-webkit-search-cancel-button { display:none; appearance:none; }
.crm-global-finder__clear { position:absolute; inset-inline-end:9px; top:50%; z-index:2; display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:7px; color:var(--text-muted); background:transparent; cursor:pointer; transform:translateY(-50%); }
.crm-global-finder__clear:hover { color:var(--brand-strong); background:color-mix(in srgb,var(--brand) 10%,transparent); }
.crm-global-finder__clear:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.crm-global-finder__clear[hidden],.crm-global-finder__control .ds-grid__field-icon[hidden] { display:none !important; }
.crm-global-finder__clear svg { display:block; width:16px; height:16px; }
.crm-global-finder__results-bridge { position:absolute; top:calc(50% + 32px); left:50%; z-index:2; width:var(--crm-finder-content-width); height:30px; pointer-events:none; opacity:0; background:linear-gradient(180deg,var(--surface) 0%,color-mix(in srgb,var(--surface) 82%,transparent) 48%,transparent 100%); transform:translateX(-50%) scaleY(0); transform-origin:top center; transition:opacity 150ms ease,transform 300ms cubic-bezier(.22,1,.36,1); }
.crm-global-finder__results-bridge::before,.crm-global-finder__results-bridge::after { content:""; position:absolute; top:0; width:22px; height:22px; pointer-events:none; }
.crm-global-finder__results-bridge::before { left:-22px; border-radius:0 22px 0 0; box-shadow:11px -11px 0 11px var(--surface); }
.crm-global-finder__results-bridge::after { right:-22px; border-radius:22px 0 0 0; box-shadow:-11px -11px 0 11px var(--surface); }
.crm-global-finder.is-open .crm-global-finder__results-bridge.has-results { opacity:1; transform:translateX(-50%) scaleY(1); }
.crm-global-finder__results { position:absolute; top:calc(50% + 32px); left:50%; z-index:1; width:var(--crm-finder-content-width); box-sizing:border-box; height:0; min-height:0; max-height:min(calc(100vh - 160px),720px); margin:0; padding:0 8px; border:0 solid var(--border); border-width:0 1px 1px; border-radius:0 0 22px 22px; clip-path:inset(0 round 0 0 22px 22px); background:var(--surface); box-shadow:var(--shadow-lg); display:grid; align-content:start; grid-template-columns:1fr; grid-auto-rows:max-content; gap:6px; overflow-x:hidden; overflow-y:auto; scrollbar-gutter:stable; opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-4px); transform-origin:top center; transition:height 340ms cubic-bezier(.22,1,.36,1),padding 340ms cubic-bezier(.22,1,.36,1),opacity 180ms ease,visibility 0s linear 340ms,transform 340ms cubic-bezier(.22,1,.36,1); }
.crm-global-finder__results::-webkit-scrollbar-track { margin-block:8px 18px; background:transparent; }
.crm-global-finder.is-open .crm-global-finder__results.has-results:not([hidden]) { height:var(--crm-finder-results-height,0px); padding:20px 8px 8px; opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,0); transition-delay:0s; }
.crm-global-finder.is-open.is-results-closing .crm-global-finder__results.has-results:not([hidden]) { height:0; padding:0 8px; opacity:1; visibility:visible; pointer-events:none; transform:translate(-50%,-4px); transition:height 340ms cubic-bezier(.22,1,.36,1),padding 340ms cubic-bezier(.22,1,.36,1),opacity 0s linear 340ms,visibility 0s linear 340ms,transform 340ms cubic-bezier(.22,1,.36,1); }
.crm-global-finder.is-open.is-results-closing .crm-global-finder__results-bridge.has-results { opacity:0; transform:translateX(-50%) scaleY(0); transition:opacity 340ms cubic-bezier(.22,1,.36,1),transform 340ms cubic-bezier(.22,1,.36,1); }
.crm-global-finder__results[hidden] { display:none !important; }
.crm-global-finder__result { width:100%; min-width:0; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) minmax(0,1.15fr) minmax(0,.85fr) minmax(0,1.2fr); align-items:center; gap:clamp(6px,1vw,12px); padding:11px 13px; border:1px solid transparent; border-radius:10px; color:var(--text); text-align:start; font-family:inherit; background:var(--surface-2); cursor:pointer; overflow:hidden; }
.crm-global-finder__result:hover { background:var(--pastel-mint); }
.crm-global-finder__result:focus-visible { outline:2px solid var(--brand); outline-offset:1px; }
.crm-global-finder__result > span { display:flex; flex-direction:column; min-width:0; gap:3px; }
.crm-global-finder__result small { color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.crm-global-finder__result b { color:var(--text); font-size:13px; overflow-wrap:anywhere; }
.crm-global-finder__person b { color:var(--brand-strong); font-size:14px; }
.crm-global-finder__empty { padding:10px; color:var(--text-muted); }
@media (max-width:1100px) { .crm-global-finder__result { grid-template-columns:minmax(0,1.25fr) repeat(2,minmax(0,1fr)); } .crm-global-finder__result > span:nth-child(4), .crm-global-finder__result > span:nth-child(5) { display:none; } }
@keyframes crm-finder-surface-morph { 0% { background:rgba(15,118,110,.8); } 58% { background:color-mix(in srgb,var(--pastel-mint) 55%,var(--surface)); } 100% { background:var(--surface); } }
@keyframes crm-finder-results-in { from { opacity:0; transform:translate(-50%,-10px) scale(.98); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@media (max-width:900px) { .crm-global-finder__panel { --crm-finder-content-width:calc(100% - 104px); top:82px; left:0; right:calc(var(--sidebar-rail-w,72px) + 16px); height:75px; min-height:75px; } .crm-global-finder__close { left:12px; } .crm-global-finder__control .ds-grid__search-wrap { flex:1; width:auto; } .crm-global-finder__result { grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); } .crm-global-finder__result > span:nth-child(3) { display:none; } }
@media (max-width:520px) { .crm-global-finder__tab { top:72px; width:29px; } .crm-global-finder__panel { --crm-finder-content-width:calc(100% - 104px); top:72px; left:0; right:8px; height:75px; min-height:75px; } .crm-global-finder__close { left:8px; width:36px; height:36px; } .crm-global-finder__control { align-items:stretch; flex-direction:column; padding:10px; border-radius:18px; } .crm-global-finder__control .btn { width:100%; } .crm-global-finder__results { top:calc(100% + 44px); border-radius:22px; } .crm-global-finder__result { grid-template-columns:1fr; } .crm-global-finder__result > span:not(:first-child) { display:none; } }
@media (prefers-reduced-motion:reduce) { .crm-global-finder__tab,.crm-global-finder__backdrop,.crm-global-finder__panel,.crm-global-finder__panel::before,.crm-global-finder__head,.crm-global-finder__control,.crm-global-finder__results-bridge,.crm-global-finder__results { transition:none; animation:none; } }
.crm-workbench-page .rich-statband { margin:0; }
.cwb-hero { margin:0; }
.cwb-hero-focus { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:min(100%,310px); padding:16px 18px; border-radius:14px; background:color-mix(in srgb,var(--surface) 78%,transparent); border:1px solid color-mix(in srgb,var(--brand) 14%,var(--border)); box-shadow:var(--shadow-xs); }
.cwb-hero-focus .cwb-focus-label { color:var(--text-muted); font-size:12px; }
.cwb-hero-focus strong { font-size:22px; color:var(--text); }
.cwb-hero-focus small { color:var(--text-muted); line-height:1.8; }
.cwb-analytics-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr) minmax(0,1.25fr); gap:var(--space-macro); align-items:stretch; }
.cwb-analytics-grid > .card { min-width:0; margin:0; overflow:hidden; container-type:inline-size; container-name:cwb-card; }
.cwb-analytics-grid .card-title { font-weight:500; }
.cwb-analytics-grid .card-sub { font-weight:400; }
.cwb-analytics-grid .rich-donut-wrap { min-height:210px; }
.cwb-analytics-grid .rich-donut-center b,
.cwb-analytics-grid .rich-dleg .n,
.cwb-analytics-grid .rich-dleg .v { font-weight:500; }
.cwb-analytics-grid .rich-bars { padding-block:4px; min-width:0; }
.cwb-analytics-grid .card-head { min-height:66px; align-items:flex-start; flex-wrap:nowrap; }
.cwb-card-link { width:36px; height:36px; min-width:36px; padding:0; display:grid; place-items:center; border-radius:10px; }
.cwb-card-link [data-ds-icon] { display:grid; place-items:center; }
.cwb-deal-link { white-space:nowrap; display:inline-flex; align-items:center; gap:5px; }
.cwb-deal-link .material-symbols-rounded { font-size:17px; }
.cwb-analytics-grid .rich-bar {
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(64px,18%,96px) max-content;
  align-items:center;
  min-width:0;
  gap:8px;
}
.cwb-analytics-grid .rich-bar-l {
  min-width:0;
  font-weight:400; font-size:clamp(11px, 3.2cqi, 13px);
  white-space:normal; overflow:visible; text-overflow:clip;
  text-align:start; overflow-wrap:anywhere;
}
.cwb-analytics-grid .rich-bar-t { min-width:0; width:100%; }
.cwb-analytics-grid .rich-bar-v {
  min-width:0;
  font-weight:400; font-size:clamp(10px, 3cqi, 12px);
  white-space:nowrap; line-height:1.45;
  direction:rtl; text-align:end; padding-inline-end:2px;
}
.cwb-analytics-grid [data-cwb-deal-status],
.cwb-analytics-grid [data-cwb-advisors],
.cwb-analytics-grid [data-cwb-activity-load] { min-height:210px; min-width:0; padding:4px 18px 18px; overflow:hidden; }
@media (max-width:1200px) { .cwb-analytics-grid { grid-template-columns:1fr 1fr; } .cwb-analytics-grid > :first-child { grid-column:1 / -1; } }
@media (max-width:760px) { .cwb-analytics-grid { grid-template-columns:1fr; } .cwb-analytics-grid > :first-child { grid-column:auto; } }
.crm-workbench-page .ws-split { margin-top:0; }
.cwb-followups-split .card { margin:0; }
.cwb-quality-card { overflow:hidden; margin:0; }
.cwb-quality-card .cwb-quality-band { border:none; border-radius:0; }
.cwb-activity-list { display:flex; flex-direction:column; gap:8px; padding:0 14px 14px; min-height:120px; }
.cwb-activity-row {
  display:flex; align-items:center; flex-wrap:nowrap; gap:12px;
  padding:12px 14px; border-radius:12px;
  border:1px solid var(--border); background:var(--surface);
  box-shadow:var(--shadow-xs);
}
.cwb-activity-row.is-overdue {
  background:linear-gradient(135deg, var(--surface) 58%, color-mix(in srgb,var(--pastel-rose) 36%,var(--surface)) 100%);
  border-color:color-mix(in srgb,var(--pastel-rose) 68%,var(--border));
  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--red-500) 32%,transparent);
}
.cwb-activity-row .cf-type-icon-wrap { flex-shrink:0; }
.cwb-activity-body { flex:1; min-width:0; }
.cwb-activity-title { font-size:13px; font-weight:400; color:var(--text); line-height:1.55; }
.cwb-activity-meta { font-size:11.5px; font-weight:400; color:var(--text-muted); margin-block-start:4px; gap:6px; flex-wrap:wrap; }
.cwb-activity-meta .cwb-activity-dot { color:var(--text-faint,#9aa3b0); }
.cwb-activity-meta .chip { font-weight:500; }
.cwb-activity-more { display:inline-flex; align-self:flex-start; margin-inline:2px; }
/* CRM workbench — opportunity-detail visual language */
.crm-workbench-page { --cwb-radius:var(--radius-xl,18px); gap:18px; }
.cwb-command-hero.ddp-hero { margin:0; padding:0; gap:0; overflow:hidden; border-radius:var(--cwb-radius); border-color:color-mix(in srgb,var(--brand-400) 22%,var(--border)); background:linear-gradient(135deg,color-mix(in srgb,var(--pastel-mint) 25%,var(--surface)) 0%,var(--surface) 48%,color-mix(in srgb,var(--pastel-sky) 20%,var(--surface)) 100%); box-shadow:0 18px 48px -32px color-mix(in srgb,var(--brand-700) 38%,transparent); }
.cwb-command-hero__top { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,390px); align-items:stretch; gap:22px; padding:24px; }
.cwb-command-hero__identity { display:flex; align-items:flex-start; gap:14px; min-width:0; }
.cwb-command-hero__icon { width:48px; height:48px; min-width:48px; border-radius:15px; }
.cwb-command-hero__icon .ds-ico { width:24px; height:24px; }
.cwb-command-hero__eyebrow { margin-bottom:5px; color:var(--brand-700); font-size:11px; font-weight:800; letter-spacing:.02em; }
.cwb-command-hero h1 { margin:0 0 7px; color:var(--text); font-size:clamp(22px,2.15vw,31px); font-weight:850; line-height:1.35; }
.cwb-command-hero__identity p { margin:0; color:var(--text-muted); font-size:13px; line-height:1.9; }
.cwb-hero-focus { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; min-width:0; padding:14px 16px; border:1px solid color-mix(in srgb,var(--brand-400) 18%,var(--border)); border-radius:15px; background:color-mix(in srgb,var(--surface) 88%,transparent); box-shadow:var(--shadow-xs); }
.cwb-hero-focus>.ds-ico-tile { width:42px; height:42px; border-radius:13px; }
.cwb-hero-focus>div { display:flex; flex-direction:column; min-width:0; gap:2px; }
.cwb-hero-focus .cwb-focus-label { color:var(--text-muted); font-size:10.5px; font-weight:700; }
.cwb-hero-focus strong { color:var(--text); font-size:17px; font-weight:850; line-height:1.5; }
.cwb-hero-focus small { color:var(--text-muted); font-size:10.5px; line-height:1.7; }
.cwb-hero-focus .btn { white-space:nowrap; }
.cwb-command-hero__facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border-top:1px solid color-mix(in srgb,var(--brand-400) 15%,var(--border)); background:color-mix(in srgb,var(--surface) 72%,transparent); }
.cwb-hero-fact { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; padding:14px 18px; }
.cwb-hero-fact+.cwb-hero-fact { border-inline-start:1px solid var(--border); }
.cwb-hero-fact>.ds-ico-tile { width:34px; height:34px; min-width:34px; border-radius:10px; }
.cwb-hero-fact>span:last-child { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cwb-hero-fact small { color:var(--text-muted); font-size:10.5px; font-weight:650; }
.cwb-hero-fact strong { color:var(--text); font-size:15px; font-weight:850; font-variant-numeric:tabular-nums; }
.cwb-kpi-section { margin:0; }
.cwb-command-kpis .kpi-grid,.cwb-quality-band .kpi-grid { display:grid; gap:12px; margin:0; }
.cwb-command-kpis .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.cwb-command-kpis .kpi,.cwb-quality-band .kpi { min-height:90px; margin:0; border:1px solid var(--border); border-radius:15px; box-shadow:0 12px 30px -26px color-mix(in srgb,var(--text) 38%,transparent); }
.cwb-command-kpis .kpi-icon,.cwb-quality-band .kpi-icon { width:42px; height:42px; border-radius:13px; }
.cwb-command-kpis .kpi-value,.cwb-quality-band .kpi-value { font-weight:850; }
.cwb-analytics-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.cwb-analytics-grid>.cwb-analytics-card { display:grid; grid-template-rows:auto 1fr; border-radius:var(--cwb-radius); border-color:color-mix(in srgb,var(--border) 78%,var(--tc,var(--brand-400))); box-shadow:0 16px 42px -34px color-mix(in srgb,var(--text) 44%,transparent); }
.cwb-analytics-grid .card-head,.cwb-quality-card .card-head,.cwb-plan-card .card-head { min-height:74px; padding:15px 16px; align-items:center; }
.cwb-section-heading { display:flex; align-items:center; gap:11px; min-width:0; }
.cwb-section-heading>.ds-ico-tile { width:39px; height:39px; min-width:39px; border-radius:12px; }
.cwb-section-heading>div { min-width:0; }
.cwb-section-heading .card-title { margin:0 0 3px; color:var(--text); font-size:13.5px; font-weight:800; }
.cwb-section-heading .card-sub { color:var(--text-muted); font-size:10.5px; line-height:1.7; }
.cwb-card-link { flex:0 0 auto; border:1px solid color-mix(in srgb,var(--tc,var(--brand-400)) 22%,var(--border)); background:color-mix(in srgb,var(--surface) 86%,transparent); }
.cwb-analytics-grid [data-cwb-deal-status],.cwb-analytics-grid [data-cwb-advisors],.cwb-analytics-grid [data-cwb-activity-load] { display:grid; width:100%; min-height:230px; padding:10px 18px 18px; place-items:center; align-content:center; }
.cwb-analytics-grid [data-cwb-deal-status] > *,
.cwb-analytics-grid [data-cwb-advisors] > *,
.cwb-analytics-grid [data-cwb-activity-load] > * { width:100%; }
.cwb-quality-card { border-radius:var(--cwb-radius); border-color:color-mix(in srgb,var(--brand-400) 18%,var(--border)); box-shadow:0 16px 42px -36px color-mix(in srgb,var(--brand-700) 40%,transparent); }
.cwb-quality-band { padding:14px 16px 16px; }
.cwb-quality-band .kpi-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.cwb-quality-band .kpi { min-height:82px; }
.cwb-followups-split { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.cwb-followups-split>.cwb-plan-card { min-width:0; margin:0; overflow:hidden; border-radius:var(--cwb-radius); box-shadow:0 16px 42px -36px color-mix(in srgb,var(--text) 42%,transparent); }
.cwb-plan-card--overdue { border-color:color-mix(in srgb,var(--rose-500,#e11d48) 20%,var(--border)); }
.cwb-plan-card--today { border-color:color-mix(in srgb,var(--lilac-500,#7c3aed) 18%,var(--border)); }
.cwb-activity-list { min-height:170px; padding:14px; }
.cwb-activity-row { padding:11px 12px; border-radius:12px; background:var(--surface); box-shadow:0 7px 20px -20px color-mix(in srgb,var(--text) 45%,transparent); }
.cwb-activity-title { font-weight:650; }
.cwb-plan-card .rui-empty { min-height:150px; border:1px dashed color-mix(in srgb,var(--border) 82%,var(--brand-300)); border-radius:14px; background:color-mix(in srgb,var(--surface-2) 55%,var(--surface)); }
@media(max-width:1180px){.cwb-command-hero__top{grid-template-columns:1fr}.cwb-analytics-grid{grid-template-columns:1fr 1fr}.cwb-analytics-grid>:first-child{grid-column:1/-1}.cwb-quality-band .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.cwb-command-hero__top{padding:18px}.cwb-hero-focus{grid-template-columns:auto minmax(0,1fr)}.cwb-hero-focus .btn{grid-column:1/-1;width:100%}.cwb-command-hero__facts,.cwb-command-kpis .kpi-grid,.cwb-analytics-grid,.cwb-followups-split{grid-template-columns:1fr}.cwb-analytics-grid>:first-child{grid-column:auto}.cwb-hero-fact{justify-content:flex-start}.cwb-hero-fact+.cwb-hero-fact{border-inline-start:0;border-top:1px solid var(--border)}}
@media(max-width:480px){.cwb-command-hero__identity{flex-direction:column}.cwb-quality-band .kpi-grid{grid-template-columns:1fr}}
/* CRM follow-ups — Design System KPI/pastel boxes (#dashboard sample) */
.cf-followups-page { display:grid; gap:var(--space-meso); }
.cf-followups-kpis { margin:0; }
.cf-followups-kpis .kpi-grid {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
}
.cf-followups-kpis .kpi {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  grid-template-areas:"icon label" "icon value";
  align-items:center;
  min-height:84px;
  padding:12px 14px;
  column-gap:10px;
  row-gap:2px;
}
.cf-followups-kpis .kpi::before { width:96px; height:96px; top:-28px; inset-inline-end:-20px; }
.cf-followups-kpis .kpi-icon { grid-area:icon; width:40px; height:40px; margin:0; }
.cf-followups-kpis .kpi-label { grid-area:label; align-self:end; }
.cf-followups-kpis .kpi-value { grid-area:value; align-self:start; margin:0; font-size:clamp(17px,1.35vw,22px); }
.cf-followups-hero-chips .cf-hero-chip { display:inline-flex; align-items:center; gap:6px; }
.cf-followups-hero-chips .cf-hero-chip .ds-ico { width:15px; height:15px; }
.cf-hero-chip--today { background:color-mix(in srgb,var(--pastel-mint) 62%,var(--surface)); border-color:color-mix(in srgb,var(--green-500) 32%,var(--border)); color:#18794e; }
.cf-hero-chip--today b { color:#18794e; }
.cf-hero-chip--overdue { background:color-mix(in srgb,var(--pastel-rose) 58%,var(--surface)); border-color:color-mix(in srgb,var(--red-500) 30%,var(--border)); color:#be334d; }
.cf-hero-chip--overdue b { color:#be334d; }
.cf-hero-chip--done { background:color-mix(in srgb,var(--pastel-sky) 58%,var(--surface)); border-color:color-mix(in srgb,var(--pastel-sky) 80%,var(--border)); color:#2c6cb0; }
.cf-hero-chip--done b { color:#2c6cb0; }
.cf-followups-hero-next {
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
  min-width:min(100%,248px); padding:18px 20px; border-radius:16px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--pastel-lilac) 58%,var(--surface)) 0%, var(--surface) 88%);
  border:1px solid color-mix(in srgb,var(--pastel-lilac) 72%,var(--border));
  box-shadow:var(--shadow-sm);
}
.cf-followups-hero-icon { display:grid; place-items:center; width:44px; height:44px; border-radius:13px; background:var(--pastel-lilac); margin-block-end:2px; box-shadow:0 6px 14px -8px color-mix(in srgb,var(--pastel-lilac) 80%,transparent); }
.cf-followups-hero-icon .ds-ico { width:22px; height:22px; }
.cf-followups-hero-next-label { font-size:12px; font-weight:700; color:#6d28d9; }
.cf-followups-hero-next strong { font-size:17px; font-weight:800; color:var(--text); line-height:1.5; }
.cf-followups-hero-next small { font-size:12px; color:var(--text-muted); }
.cf-followups-hero-next .btn { margin-top:8px; }
.cf-followups-card { margin:0; overflow:hidden; }
.cf-followups-card-head { flex-direction:column; align-items:stretch; gap:12px; }
.cf-followups-head-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; width:100%; }
.cf-followups-tabs { display:flex; gap:7px; flex-wrap:wrap; border:0 !important; margin:0; }
.cf-followups-tabs .ds-tab { display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:7px 13px; border:1px solid color-mix(in srgb,var(--pastel-sky) 40%,var(--border)); border-radius:10px; background:var(--surface); color:var(--text-secondary); font:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.cf-followups-tabs .ds-tab .ds-ico { width:16px; height:16px; }
.cf-followups-tabs .ds-tab.active[data-cf-tab="today"] { background:color-mix(in srgb,var(--pastel-mint) 62%,var(--surface)); border-color:color-mix(in srgb,var(--green-500) 42%,var(--border)); color:#18794e; }
.cf-followups-tabs .ds-tab.active[data-cf-tab="upcoming"] { background:color-mix(in srgb,var(--pastel-lilac) 62%,var(--surface)); border-color:color-mix(in srgb,var(--purple-500) 40%,var(--border)); color:#6d28d9; }
.cf-followups-tabs .ds-tab.active[data-cf-tab="overdue"] { background:color-mix(in srgb,var(--pastel-rose) 62%,var(--surface)); border-color:color-mix(in srgb,var(--red-500) 40%,var(--border)); color:#be334d; }
.cf-followups-tabs .ds-tab.active[data-cf-tab="done"] { background:color-mix(in srgb,var(--pastel-mint) 48%,var(--surface)); border-color:color-mix(in srgb,var(--green-500) 32%,var(--border)); color:#23764c; }
.cf-followups-tabs .ds-tab.active[data-cf-tab=""] { background:color-mix(in srgb,var(--pastel-sky) 58%,var(--surface)); border-color:color-mix(in srgb,var(--brand-500) 28%,var(--border)); color:var(--brand-600); }
.cf-followups-date-bar { width:100%; }
.cf-followups-date-bar .afc-pipeline-date-bar {
  display:flex;
  direction:rtl;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 12px;
  margin:0;
  padding:10px 12px;
  border-radius:12px;
  background:color-mix(in srgb,var(--pastel-sky) 28%,var(--surface));
  border:1px solid color-mix(in srgb,var(--pastel-sky) 55%,var(--border));
}
.cf-followups-date-bar .spb-period-filter-label { flex:0 0 auto; min-inline-size:auto; }
.cf-followups-date-bar .afc-date-field { display:inline-flex; flex-direction:row; align-items:center; gap:7px; margin:0; }
.cf-followups-date-bar .afc-date-field__label { flex:0 0 auto; margin:0; font-size:11.5px; font-weight:700; color:var(--text-secondary); }
.cf-followups-date-bar .afc-date-field__input { inline-size:176px; min-inline-size:0; min-block-size:38px; padding-block:7px; }
.cf-followups-date-bar .afc-date-presets { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-inline-start:auto; }
.cf-followups-date-bar .chip-btn.active { background:color-mix(in srgb,var(--pastel-mint) 55%,var(--surface)); border-color:color-mix(in srgb,var(--green-500) 36%,var(--border)); color:#18794e; }
@media (max-width:720px) {
  .cf-followups-kpis .kpi-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cf-followups-date-bar .afc-date-presets { flex-basis:100%; margin-inline-start:0; }
}
@media (max-width:430px) {
  .cf-followups-kpis .kpi-grid { grid-template-columns:1fr; }
  .cf-followups-date-bar .afc-date-field { width:100%; }
  .cf-followups-date-bar .afc-date-field__input { flex:1 1 auto; inline-size:auto; }
}
.rld-followups-grid .cf-type-label { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; min-width:0; }
.cf-type-icon-wrap { display:grid; place-items:center; width:30px; height:30px; min-width:30px; border-radius:9px; background:var(--tc50,var(--surface-2)); }
.cf-type-icon-wrap [data-ds-icon] { display:grid; place-items:center; width:100%; height:100%; line-height:0; }
.cf-type-icon-wrap .ds-ico { display:block; width:16px; height:16px; margin:0; color:var(--tc,var(--brand-600)); }
.cf-followup-popup{--cf-popup-accent:var(--brand-500,#14b8a6);display:grid;gap:14px}.cf-followup-popup--sky{--cf-popup-accent:#4f8edc}.cf-followup-popup--lilac{--cf-popup-accent:#8064d8}.cf-followup-popup--mint,.cf-followup-popup--green{--cf-popup-accent:#249c73}.cf-followup-popup--amber,.cf-followup-popup--peach{--cf-popup-accent:#cf7b35}.cf-followup-popup__hero{display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:12px;padding:16px;border:1px solid color-mix(in srgb,var(--cf-popup-accent) 24%,var(--border));border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--cf-popup-accent) 14%,var(--surface)),var(--surface))}.cf-followup-popup__hero-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:color-mix(in srgb,var(--cf-popup-accent) 18%,var(--surface));color:var(--cf-popup-accent)}.cf-followup-popup__hero-icon .ds-ico{width:25px;height:25px}.cf-followup-popup__hero small,.cf-followup-popup__fact small,.cf-followup-popup__note small,.cf-followup-popup__result small{display:block;color:var(--text-muted);font-size:11px;font-weight:700}.cf-followup-popup__hero h3{margin:3px 0 0;font-size:17px;color:var(--text)}.cf-followup-popup__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.cf-followup-popup__fact{display:flex;align-items:center;gap:10px;min-width:0;padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--surface-2)}.cf-followup-popup__fact-icon{display:grid;place-items:center;width:34px;height:34px;flex:0 0 34px;border-radius:10px;background:color-mix(in srgb,var(--cf-popup-accent) 13%,var(--surface));color:var(--cf-popup-accent)}.cf-followup-popup__fact strong{display:block;margin-top:3px;font-size:13px;color:var(--text);overflow-wrap:anywhere}.cf-followup-popup__note,.cf-followup-popup__result{display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--cf-popup-accent) 8%,var(--surface));border-inline-start:4px solid var(--cf-popup-accent)}.cf-followup-popup__note>span{color:var(--cf-popup-accent);margin-top:2px}.cf-followup-popup__note p,.cf-followup-popup__result p{margin:5px 0 0;line-height:1.9;color:var(--text);white-space:pre-line}.cf-followup-popup__result{display:block;background:var(--pastel-mint);border-inline-start-color:var(--green-500,#22a06b)}@media(max-width:640px){.cf-followup-popup__hero{grid-template-columns:46px minmax(0,1fr)}.cf-followup-popup__hero>.chip{grid-column:1/-1;width:max-content}.cf-followup-popup__hero-icon{width:46px;height:46px}.cf-followup-popup__facts{grid-template-columns:1fr}}
.cf-type-note { font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; margin-block-start:3px; font-weight:400; }
.cf-followups-card .ds-grid__row[data-id]:hover { background:color-mix(in srgb,var(--pastel-sky) 22%,var(--surface)); }
[data-cf-new] { display:inline-flex; align-items:center; gap:7px; }
[data-cf-new] .ds-ico { color:#fff !important; }
.rlx-modal.rlx-modal--data-form.cf-new-action-modal { width:min(736px,calc(100vw - 32px)); }
.cf-new-action-modal .rlx-field:has(#rlx-f-record_id) .ds-dropdown__trigger,
.cf-new-action-modal .rlx-field:has(#rlx-f-record_id) .ds-dropdown__menu { inline-size:100%; max-inline-size:none; }
.cf-new-action-modal .rlx-field:has(#rlx-f-record_id) .ds-dropdown__value,
.cf-new-action-modal .rlx-field:has(#rlx-f-record_id) .ds-dropdown__option { white-space:normal; overflow:visible; text-overflow:clip; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1100px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* Constrain chart heights inside cards. Width/height are the CSS display box;
   JS backs the canvas bitmap at devicePixelRatio to match — do not fight that
   with mismatched inline sizes (caused blurry stretched charts). */
.card > canvas,
.card canvas:not(.kpi-spark) {
  max-height: 280px !important;
  height: 240px !important;
  width: 100% !important;
  image-rendering: auto;
}
.card canvas[height="160"] { height: 200px !important; }
.card canvas[height="180"] { height: 220px !important; }
.card canvas[height="200"] { height: 240px !important; }
.card canvas[height="220"] { height: 260px !important; }
.card canvas[height="320"] { height: 380px !important; max-height: 420px !important; }
/* Sparklines inside KPI cards must remain tiny */
.kpi-spark { height: 32px !important; max-height: 32px !important; }

/* ---------- KPI cards ---------- */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-meso);
  width: 100%;
  min-width: 0;
  align-items: stretch;
}
.kpi-grid.kpi-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kpi-grid.kpi-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }

/* Canonical work KPI summaries are page-level sections. Some PM shells use
   grid children for their operational content, so the summary must claim the
   complete row instead of inheriting a single content column. */
.work-kpi-summary {
  width: 100%;
  max-width: none;
  align-self: stretch;
  grid-column: 1 / -1;
}

@media (max-width: 1200px) {
  .kpi-grid.kpi-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* The official sales-intelligence summary contains exactly four canonical
   observations. Keep the complete desktop snapshot on one scan line even
   when compact-monitor narrows the application content column. */
#content [data-domain-kpi-summary="advisor-team-tree"] .kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  #content [data-domain-kpi-summary="advisor-team-tree"] .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 600px) {
  #content [data-domain-kpi-summary="advisor-team-tree"] .kpi-grid {
    grid-template-columns: 1fr;
  }
}

/* Crm KPI catalogue: use the available canvas efficiently without
   squeezing labels/targets. Wide desktops get four cards; regular desktop
   content columns get three. The #content scope intentionally outranks the
   generic compact-monitor two-column fallback. */
#content [data-afc-kpi] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1440px) {
  #content [data-afc-kpi] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
  #content [data-afc-kpi] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  #content [data-afc-kpi] { grid-template-columns: 1fr; }
}
/* Keep 4-up on laptop; wrap only on tablet/phone */
@media (max-width: 900px) {
  .kpi-grid,
  .kpi-grid.kpi-grid-3,
  .kpi-grid.kpi-grid-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px)  {
  .kpi-grid,
  .kpi-grid.kpi-grid-3,
  .kpi-grid.kpi-grid-6 { grid-template-columns: 1fr; }
}

.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px 38px;
  position: relative;
  overflow: hidden;
  transition: transform .3s cubic-bezier(.22,.7,.16,1), box-shadow .3s ease, border-color .25s ease;
  box-shadow: var(--shadow-xs);
}
.kpi:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 36px -8px rgba(15, 23, 42, .12), 0 4px 12px rgba(15, 23, 42, .04);
}
/* Tinted hover shadows per tone (pastel glow) */
.kpi.blue:hover    { box-shadow: 0 18px 36px -8px rgba(44, 120, 115, .35), 0 4px 12px rgba(15,23,42,.04); }
.kpi.green:hover   { box-shadow: 0 18px 36px -8px rgba(109, 191, 143, .35), 0 4px 12px rgba(15,23,42,.04); }
.kpi.amber:hover   { box-shadow: 0 18px 36px -8px rgba(244, 162, 97,  .40), 0 4px 12px rgba(15,23,42,.04); }
.kpi.purple:hover  { box-shadow: 0 18px 36px -8px rgba(111, 185, 143, .35), 0 4px 12px rgba(15,23,42,.04); }
.kpi.red:hover     { box-shadow: 0 18px 36px -8px rgba(232, 120, 140, .40), 0 4px 12px rgba(15,23,42,.04); }

/* Pastel highlight blob in upper-end corner */
.kpi::before {
  content: '';
  position: absolute;
  top: -30px; inset-inline-end: -30px;
  width: 160px; height: 160px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: .55;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,.7,.16,1);
  z-index: 0;
}
.kpi:hover::before { opacity: .9; transform: scale(1.15); }

/* Subtle full-card pastel tint per tone */
.kpi.blue   { background: linear-gradient(135deg, var(--surface) 55%, rgba(184, 212, 241, .35) 100%); }
.kpi.green  { background: linear-gradient(135deg, var(--surface) 55%, rgba(184, 230, 211, .40) 100%); }
.kpi.amber  { background: linear-gradient(135deg, var(--surface) 55%, rgba(255, 228, 204, .45) 100%); }
.kpi.purple { background: linear-gradient(135deg, var(--surface) 55%, rgba(221, 214, 254, .40) 100%); }
.kpi.red    { background: linear-gradient(135deg, var(--surface) 55%, rgba(245, 194, 199, .35) 100%); }
.kpi:not(:has(.kpi-spark)) { padding-bottom: 16px; }
.kpi-icon {
  width: 36px; height: 36px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 17px;
  margin-bottom: 8px;
  transition: transform .3s cubic-bezier(.22,.7,.16,1);
}
.kpi-icon .ds-ico { width: 20px; height: 20px; color: inherit; }
.kpi:hover .kpi-icon { transform: scale(1.08) rotate(-3deg); }

.kpi-icon.blue   { background: var(--pastel-sky);   color: #3b5998; }
.kpi-icon.green  { background: var(--pastel-mint);  color: #2f8a5e; }
.kpi-icon.amber  { background: var(--pastel-peach); color: #c46920; }
.kpi-icon.purple { background: var(--pastel-lilac); color: #6d50d4; }
.kpi-icon.red    { background: var(--pastel-rose);  color: #b14458; }

.kpi.blue::before   { background: var(--pastel-sky); }
.kpi.green::before  { background: var(--pastel-mint); }
.kpi.amber::before  { background: var(--pastel-peach); }
.kpi.purple::before { background: var(--pastel-lilac); }

/* Sharpen the macro (value) vs. micro (label) contrast per the information-
   hierarchy pyramid — the number is the level-1 takeaway, the label is
   supporting context, they shouldn't compete for the same glance. */
.kpi-label {
  font-size: 11.5px; color: var(--text-muted); font-weight: 500; line-height: 1.35;
  max-width: 100%;
}
.kpi-value {
  font-size: clamp(16px, 1.4vw, 22px); font-weight: 800; margin: 3px 0 5px;
  letter-spacing: -.5px; line-height: 1.25;
  max-width: 100%;
  /* Do NOT use overflow:hidden here — it breaks gradient text-fill and collapses the value */
}
.kpi-delta {
  font-size: 10.5px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
}
.kpi-delta.up   { color: #2f8a5e; background: var(--green-50); }
.kpi-delta.down { color: #b14458; background: var(--red-50); }

.kpi-spark {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  width: 100% !important;
  max-width: 100% !important;
  height: 32px !important;
  max-height: 34px !important;
  opacity: .7;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ---------- Stat card ---------- */
.stat .stat-label { color: var(--text-muted); font-size: 12px; }
.stat .stat-value { font-size: 24px; font-weight: 700; margin: 6px 0; letter-spacing: -.5px; }
.stat .stat-value.green { color: var(--green-500); }
.stat .stat-value.red   { color: var(--red-500); }
.stat .stat-meta { font-size: 12px; color: var(--text-muted); }

/* ---------- Rank / Leaderboard ---------- */
.rank-display { display: flex; align-items: center; gap: 16px; margin: 6px 0 14px; }
.rank-num {
  font-size: 56px; font-weight: 800;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.rank-meta { font-size: 12px; }
.up { color: var(--green-500); }
.down { color: var(--red-500); }

.leaderboard { display: flex; flex-direction: column; gap: 6px; }
.lb-row {
  display: grid; grid-template-columns: 28px 1fr auto;
  align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
}
.lb-row:hover { background: var(--surface-2); }
.lb-row.me   { background: linear-gradient(90deg, rgba(30,109,255,.08), transparent); border: 1px dashed var(--brand-300); }
.lb-rank { font-weight: 700; color: var(--text-muted); font-size: 13px; }
.lb-name { font-size: 13px; }
.lb-score { font-weight: 700; font-size: 13px; }

/* ---------- Heatmap (v2: with day + week labels, RTL aware, 4 weeks) ---------- */
.heatmap {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
  margin-top: 4px;
}
.hm-col { display: grid; grid-template-rows: repeat(7, 1fr); gap: 4px; }

/* New v2 layout (compact — height matches sibling card via flex) */
.card:has(> .heatmap-v2) {
  display: flex;
  flex-direction: column;
}
.heatmap-v2 {
  display: grid !important;
  grid-template-columns: 56px repeat(4, 1fr);
  grid-auto-rows: minmax(26px, 1fr);
  gap: 6px;
  margin-top: 8px;
  align-content: stretch;
  flex: 1;
}
.heatmap-v2 .hm-cell { aspect-ratio: auto; width: auto; height: 100%; }
.hm-corner { background: transparent; }
.hm-week-label {
  display: flex; align-items: end; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  padding-bottom: 4px;
  border-bottom: 2px solid var(--brand-100);
}
.hm-week-label:last-of-type {
  color: var(--brand-600);
  border-bottom-color: var(--brand-500);
}
.hm-day-label {
  display: flex; align-items: center; justify-content: end;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
  padding-inline-end: 8px;
}
.hm-cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--hm-0);
  position: relative;
  transition: transform .2s cubic-bezier(.22,.7,.16,1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  user-select: none;
}
.hm-cell.lvl0 { color: var(--text-muted); text-shadow: none; }
.hm-cell.lvl1 { background: var(--hm-1); }
.hm-cell.lvl2 { background: var(--hm-2); }
.hm-cell.lvl3 { background: var(--hm-3); }
.hm-cell.lvl4 { background: var(--hm-4); }
.hm-cell:hover {
  transform: scale(1.4);
  z-index: 3;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .25);
}
.hm-cell::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .2s ease;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.hm-cell::before {
  content: '';
  position: absolute;
  bottom: calc(130% - 6px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #0f172a;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
  z-index: 10;
}
.hm-cell:hover::after,
.hm-cell:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.legend-item { display: inline-flex; align-items: center; gap: 4px; }
.sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--hm-0); }
.sw.lvl1 { background: var(--hm-1); }
.sw.lvl2 { background: var(--hm-2); }
.sw.lvl3 { background: var(--hm-3); }
.sw.lvl4 { background: var(--hm-4); }

/* ---------- Timeline ---------- */
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-item {
  display: grid; grid-template-columns: 60px 1fr auto;
  gap: 12px; align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.tl-date {
  text-align: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 4px;
}
.tl-day  { font-weight: 700; font-size: 16px; }
.tl-mon  { font-size: 10px; color: var(--text-muted); }
.tl-title { font-weight: 600; font-size: 13px; }
.tl-sub { font-size: 11px; color: var(--text-muted); }
.tl-time { font-size: 12px; font-weight: 600; }

/* ---------- AI banner ---------- */
.ai-banner {
  display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: flex-start;
  background: linear-gradient(135deg, rgba(30,109,255,.06), rgba(20,184,166,.06));
  border: 1px solid var(--brand-100);
}
[data-theme="dark"] .ai-banner {
  background: linear-gradient(135deg, rgba(30,109,255,.12), rgba(20,184,166,.10));
  border-color: rgba(108,177,255,.25);
}
.ai-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.ai-icon.ds-ico-tile .ds-ico { width: 28px; height: 28px; }
.ai-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.ai-text { margin: 0 0 12px; line-height: 1.85; font-size: 13px; }
.ai-text strong { color: var(--brand-600); font-weight: 700; }
[data-theme="dark"] .ai-text strong { color: #8eb6ff; }
.ai-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Course grid ---------- */
.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 18px;
}
.course-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.course-banner {
  height: 90px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  position: relative;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 36px; font-weight: 800; letter-spacing: -1px;
}
.course-banner.b2 { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.course-banner.b3 { background: linear-gradient(135deg, #8b5cf6, #ec4899); }
.course-banner.b4 { background: linear-gradient(135deg, #10b981, #06b6d4); }
.course-banner.b5 { background: linear-gradient(135deg, #6366f1, #8b5cf6); }

.course-body { padding: 16px 18px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.course-title { font-weight: 700; font-size: 15px; }
.course-meta { display: flex; gap: 12px; font-size: 11px; color: var(--text-muted); }
.course-progress {
  height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden;
}
.course-progress > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500));
  border-radius: 99px;
}
.course-foot {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--border); padding-top: 10px;
}
.course-pct { font-weight: 700; font-size: 13px; }

/* ---------- Schedule ---------- */
.schedule-grid {
  display: grid;
  grid-template-columns: 60px repeat(7, 1fr);
  gap: 6px;
}
.sg-head, .sg-time, .sg-cell {
  font-size: 12px;
  padding: 8px;
  text-align: center;
  border-radius: 8px;
}
.sg-head { font-weight: 700; color: var(--text-muted); }
.sg-time { color: var(--text-muted); }
.sg-cell { background: var(--surface-2); min-height: 50px; }
.sg-cell.has {
  background: linear-gradient(135deg, rgba(30,109,255,.15), rgba(20,184,166,.15));
  border: 1px solid rgba(30,109,255,.3);
  color: var(--brand-700);
  font-weight: 600;
  text-align: start;
  padding: 8px 10px;
}
[data-theme="dark"] .sg-cell.has { color: #8eb6ff; }

.recordings { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 14px; }
.rec-item {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px;
  display: flex; gap: 12px; align-items: center;
}
.rec-thumb {
  width: 60px; height: 44px; border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
  display: grid; place-items: center;
  color: #fff; font-size: 18px;
}
.rec-title { font-weight: 600; font-size: 13px; }
.rec-meta { font-size: 11px; color: var(--text-muted); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 12px 14px; text-align: start; }
.table thead th {
  background: var(--surface-2);
  color: var(--text-muted); font-weight: 600; font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.table tbody tr { border-bottom: 1px solid var(--border); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child { border-bottom: none; }

.score-pill {
  display: inline-block;
  padding: 4px 10px; border-radius: 99px;
  font-weight: 700; font-size: 12px;
  background: var(--green-50); color: var(--green-500);
}
.score-pill.mid { background: var(--amber-50); color: var(--amber-500); }
.score-pill.low { background: var(--red-50);   color: var(--red-500); }

[data-theme="dark"] .score-pill     { background: rgba(16,185,129,.15); color: #34d399; }
[data-theme="dark"] .score-pill.mid { background: rgba(245,158,11,.15); color: #fbbf24; }
[data-theme="dark"] .score-pill.low { background: rgba(239,68,68,.15);  color: #f87171; }

/* ---------- Kanban ---------- */
.kanban {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .kanban { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px)  { .kanban { grid-template-columns: 1fr; } }
.kb-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 240px;
}
.kb-col-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; font-size: 13px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.kb-card {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 12px;
  border-inline-start: 3px solid var(--brand-500);
}
.kb-card.amber  { border-color: var(--amber-500); }
.kb-card.red    { border-color: var(--red-500); }
.kb-card.green  { border-color: var(--green-500); }
.kb-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
.kb-meta { font-size: 11px; color: var(--text-muted); display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- Resource grid ---------- */
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.res-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
  transition: all .15s ease;
}
.res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--brand-300); }
.res-icon {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--brand-50); color: var(--brand-500);
  display: grid; place-items: center; font-size: 18px;
}
[data-theme="dark"] .res-icon { background: rgba(30,109,255,.15); color: #8eb6ff; }
.res-title { font-weight: 600; font-size: 13px; }
.res-meta { font-size: 11px; color: var(--text-muted); }

/* ---------- Jobs (career) ---------- */
.jobs { display: flex; flex-direction: column; gap: 12px; }
.job-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.job-logo {
  width: 56px; height: 56px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff; display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
}
.job-title { font-weight: 700; font-size: 14px; }
.job-company { font-size: 12px; color: var(--text-muted); }
.job-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.job-tag {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
}
.match-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  background: conic-gradient(var(--green-500) calc(var(--p) * 1%), var(--surface) 0);
  position: relative;
}
.match-circle::before {
  content: '';
  position: absolute; inset: 5px;
  background: var(--surface-2);
  border-radius: 50%;
}
.match-circle span { position: relative; font-size: 13px; }

/* ---------- Chat / Tickets ---------- */
.chat-card { display: flex; flex-direction: column; height: 480px; }
.chat {
  flex: 1;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 12px;
}
.msg { max-width: 75%; padding: 10px 14px; border-radius: 12px; font-size: 13px; line-height: 1.7; }
.msg.bot { background: var(--surface); border: 1px solid var(--border); align-self: flex-start; }
.msg.me  { background: linear-gradient(135deg, var(--brand-500), var(--brand-600)); color: #fff; align-self: flex-end; }
.msg-meta { font-size: 10px; color: var(--text-muted); margin-top: 4px; }

.chat-input { display: flex; gap: 8px; }
.chat-input input {
  flex: 1; height: 42px;
  border: 1px solid var(--border); background: var(--surface-2);
  border-radius: 10px; padding: 0 14px; font-family: inherit; color: var(--text);
}

.tickets { display: flex; flex-direction: column; gap: 10px; }
.tk-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center; gap: 10px;
  padding: 12px; background: var(--surface-2);
  border-radius: 10px;
}
.tk-title { font-weight: 600; font-size: 13px; }
.tk-meta { font-size: 11px; color: var(--text-muted); }

/* ---------- Certificates ---------- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.cert-card {
  background: linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
}
.cert-card::before {
  content: '';
  position: absolute; inset-inline-start: -40px; bottom: -40px;
  width: 140px; height: 140px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  opacity: .08;
  border-radius: 50%;
}
.cert-icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: grid; place-items: center;
  color: #fff; font-size: 24px;
  margin-bottom: 12px;
}
.cert-title { font-weight: 700; font-size: 15px; margin-bottom: 4px; }
.cert-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.cert-actions { display: flex; gap: 8px; }

/* ---------- Misc ---------- */
.link { color: var(--brand-500); font-weight: 600; font-size: 12px; }
.link:hover { color: var(--brand-700); }
.muted { color: var(--text-muted); }

@media (max-width: 900px) {
  /* Fully off-canvas: the sidebar is var(--sidebar-w) (320px) wide plus its
     shadow, so a fixed -300px left a 20px strip over every page's edge. */
  .sidebar { position: fixed; inset-inline-start: calc(-1 * var(--sidebar-w) - 24px); transition: inset-inline-start .25s ease; }
  body.sidebar-open .sidebar { inset-inline-start: 0; }
  .main { margin-inline-start: 0; width: 100%; }
  .content { padding: 18px; }
  .topbar {
    padding: 0 16px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }
  .topbar::-webkit-scrollbar { display: none; }
  .search-key { display: none; }
  /* The bar scrolls sideways here, so its chips keep their full width
     instead of shrinking under the search box. */
  .topbar .search { flex: 1 0 180px; }
  .topbar-actions > * { flex-shrink: 0; }
}

/* ---------- New: Date pill in topbar ---------- */
.date-pill {
  flex: 0 0 auto;
  min-inline-size: max-content;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--brand-50), rgba(20,184,166,.08));
  border: 1px solid var(--brand-100);
  color: var(--brand-700);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
[data-theme="dark"] .date-pill {
  background: rgba(30,109,255,.12);
  border-color: rgba(108,177,255,.25);
  color: #8eb6ff;
}

/* ---------- New: Funnel visualization ---------- */
.funnel { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; }
.funnel-row {
  position: relative;
  border-radius: 10px;
  padding: 14px 16px;
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: var(--shadow-sm);
}
.funnel-row .fnr-stage { font-weight: 600; }
.funnel-row .fnr-meta { font-size: 12px; opacity: .92; }
.funnel-row.f0 { background: linear-gradient(135deg, #1e6dff, #4e8eff); }
.funnel-row.f1 { background: linear-gradient(135deg, #2575e6, #5a96ff); width: 92%; align-self: flex-end; }
.funnel-row.f2 { background: linear-gradient(135deg, #2c80c4, #6ba0e8); width: 78%; align-self: flex-end; }
.funnel-row.f3 { background: linear-gradient(135deg, #1d8a8a, #3aaeb8); width: 60%; align-self: flex-end; }
.funnel-row.f4 { background: linear-gradient(135deg, #14b8a6, #4dd5c8); width: 46%; align-self: flex-end; }
.funnel-row.f5 { background: linear-gradient(135deg, #10b981, #34d399); width: 36%; align-self: flex-end; }

/* ---------- New: Channel list (rich card per channel) ---------- */
.channel-list { display: flex; flex-direction: column; gap: 12px; }
.channel-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px;
  background: var(--surface-2);
  border-radius: 12px;
  border-inline-start: 4px solid var(--brand-500);
}
.channel-row.tone-green   { border-color: var(--green-500); }
.channel-row.tone-purple  { border-color: var(--purple-500); }
.channel-row.tone-amber   { border-color: var(--amber-500); }
.channel-row.tone-red     { border-color: var(--red-500); }
.channel-row.tone-blue    { border-color: var(--brand-500); }

.channel-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 22px;
}
.channel-name { font-weight: 700; font-size: 14px; }
.channel-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.channel-stats {
  display: flex; gap: 14px;
  font-size: 11px; color: var(--text-muted);
  margin-top: 6px; flex-wrap: wrap;
}
.channel-stats b { color: var(--text); font-weight: 700; }

/* ---------- New: SWOT cards ---------- */
.swot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
.swot-col h5 {
  font-size: 11px; font-weight: 700; margin: 0 0 4px;
  display: inline-flex; align-items: center; gap: 4px;
}
.swot-col.strength h5 { color: var(--green-500); }
.swot-col.weak h5 { color: var(--red-500); }
.swot-col ul { margin: 0; padding-inline-start: 16px; font-size: 11px; line-height: 1.7; color: var(--text-muted); }

/* ---------- New: Marketing KPI grid ---------- */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .mk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .mk-grid { grid-template-columns: 1fr; } }
.mk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
}
.mk-label { font-size: 11px; color: var(--text-muted); }
.mk-value { font-size: 18px; font-weight: 700; margin: 4px 0 4px; letter-spacing: -.3px; }
.mk-delta { font-size: 11px; font-weight: 600; }
.mk-delta.green { color: var(--green-500); }
.mk-delta.amber { color: var(--amber-500); }
.mk-delta.red   { color: var(--red-500); }

/* ---------- Department summary cards (3-column, decorative) ---------- */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dept-grid { grid-template-columns: 1fr; } }

.dept-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.dept-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--dept-accent, #2c7873);
  border-start-end-radius: 14px;
  border-end-end-radius: 14px;
}
.dept-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
  border-color: var(--dept-accent, var(--brand-300));
}
.dept-blue   { --dept-accent: #1e6dff; --dept-soft: rgba(30,109,255,.10); }
.dept-green  { --dept-accent: #10b981; --dept-soft: rgba(16,185,129,.10); }
.dept-amber  { --dept-accent: #f59e0b; --dept-soft: rgba(245,158,11,.12); }
.dept-purple { --dept-accent: #8b5cf6; --dept-soft: rgba(139,92,246,.12); }
.dept-red    { --dept-accent: #ef4444; --dept-soft: rgba(239,68,68,.10); }
.dept-lemon  { --dept-accent: #d4a017; --dept-soft: rgba(212,160,23,.12); }

.dept-head {
  display: flex; align-items: center; gap: 10px;
}
.dept-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--dept-soft, var(--brand-50));
  font-size: 18px;
  flex-shrink: 0;
}
.dept-meta { flex: 1; min-width: 0; }
.dept-name { font-weight: 700; font-size: 14px; color: var(--text-strong, #0f172a); }
.dept-count { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
[data-theme="dark"] .dept-name { color: #e2e8f0; }

.dept-bar {
  margin-top: 12px;
  height: 6px;
  border-radius: 3px;
  background: var(--brand-50, #f3f5fc);
  overflow: hidden;
}
.dept-bar > span {
  display: block;
  height: 100%;
  background: var(--dept-accent, var(--brand-500));
  border-radius: 3px;
  transition: width .6s cubic-bezier(.22,.7,.16,1);
}
[data-theme="dark"] .dept-bar { background: rgba(255,255,255,.06); }

.dept-trend {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 600;
}
.dept-trend.muted { color: var(--text-muted); }
.dept-trend.green { color: var(--green-500); }

/* ---------- People mini cards (hot/newest people quick view) ---------- */
.person-card-mini {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 11px 12px 10px;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.person-card-mini::before {
  content: '';
  position: absolute;
  inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-500, #14b8a6));
  opacity: 0;
  transition: opacity .25s ease;
}
.person-card-mini:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15,23,42,.07);
  border-color: var(--brand-300);
}
.person-card-mini:hover::before { opacity: 1; }

.person-mini-head {
  display: flex; align-items: center; gap: 9px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.person-mini-avatar { width: 36px; height: 36px; font-size: 11px; flex: 0 0 36px; }
.person-mini-info { flex: 1; min-width: 0; }
.person-mini-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .person-mini-name { color: #e2e8f0; }
.person-mini-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.person-mini-score {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  font-size: 12px;
  font-weight: 800;
  border-radius: 12px;
  white-space: nowrap;
}
.person-mini-score.score-green { background: rgba(16,185,129,.12); color: #059669; }
.person-mini-score.score-amber { background: rgba(245,158,11,.14); color: #d97706; }
.person-mini-score.score-red   { background: rgba(239,68,68,.12);  color: #dc2626; }
[data-theme="dark"] .person-mini-score.score-green { background: rgba(16,185,129,.20); color: #6ee7b7; }
[data-theme="dark"] .person-mini-score.score-amber { background: rgba(245,158,11,.22); color: #fbbf24; }
[data-theme="dark"] .person-mini-score.score-red   { background: rgba(239,68,68,.22);  color: #fca5a5; }

.person-mini-body { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: 6px; }
.person-mini-fact { min-width: 0; gap: 7px; padding: 6px 7px; border-radius: 10px; background: var(--surface-soft, #f8fafc); }
.person-mini-fact-icon { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 8px; display: grid; place-items: center; }
.person-mini-fact > span:last-child { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.person-mini-fact small { color: var(--text-muted); font-size: 9px; line-height: 1.3; }
.person-mini-fact b { color: var(--text); font-size: 10.5px; font-weight: 650; line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.person-mini-segment { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; min-width: 0; }
.person-mini-segment .chip { max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.person-mini-segment > [data-ds-icon] { opacity: .68; transition: transform .2s ease, opacity .2s ease; }
.person-card-mini:hover .person-mini-segment > [data-ds-icon] { transform: translateX(-2px); opacity: 1; }
[data-theme="dark"] .person-mini-fact { background: rgba(148,163,184,.08); }

/* ---------- Donut wrapper (keeps chart perfectly circular) ---------- */
.donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.donut-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.dropout-row { align-items: center; }

/* ---------- New: Forecast chips ---------- */
.forecast-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) { .forecast-row { grid-template-columns: 1fr; } }
.forecast-card {
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(30,109,255,.06), rgba(20,184,166,.06));
  border: 1px solid var(--brand-100);
}
[data-theme="dark"] .forecast-card {
  background: linear-gradient(135deg, rgba(30,109,255,.12), rgba(20,184,166,.10));
  border-color: rgba(108,177,255,.25);
}
.forecast-card h3 { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.forecast-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 12px 0; }
.forecast-grid > div .lab { font-size: 11px; color: var(--text-muted); }
.forecast-grid > div .val { font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.forecast-card ul { margin: 8px 0 0; padding-inline-start: 18px; font-size: 12px; color: var(--text-muted); line-height: 1.9; }

/* ---------- New: Report narrative ---------- */
.report-narrative h2 { font-size: 18px; margin: 0 0 12px; }
.report-narrative p { margin: 0 0 10px; font-size: 13px; line-height: 1.95; }
.report-narrative strong { color: var(--brand-600); }
[data-theme="dark"] .report-narrative strong { color: #8eb6ff; }
.report-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  border-inline-start: 4px solid var(--brand-500);
}
.report-stat.tone-green  { border-color: var(--green-500); }
.report-stat.tone-amber  { border-color: var(--amber-500); }
.report-stat.tone-red    { border-color: var(--red-500); }
.report-stat.tone-purple { border-color: var(--purple-500); }
.report-stat.tone-blue   { border-color: var(--brand-500); }
.report-stat .lab { font-size: 11px; color: var(--text-muted); }
.report-stat .val { font-size: 20px; font-weight: 700; margin-top: 4px; }

/* ---------- Filters chip-btn group ---------- */
.filters { display: flex; gap: 6px; flex-wrap: wrap; }

/* =============================================================
   CUSTOMER 360° TRACK DRAWER
   ============================================================= */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
  z-index: 100;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed;
  inset-inline-start: 0;            /* RTL: pinned to right edge */
  top: 0; bottom: 0;
  width: min(840px, 96vw);
  background: var(--bg);
  border-inline-end: 1px solid var(--border);
  box-shadow: -24px 0 48px rgba(0,0,0,.18);
  /* In RTL the drawer sits on the right; push it OFF-SCREEN to the right */
  transform: translateX(105%);
  transition: transform .3s cubic-bezier(.22,.7,.16,1);
  display: flex; flex-direction: column;
  z-index: 101;
  overflow: hidden;
  visibility: hidden;
}
[dir="ltr"] .drawer { transform: translateX(-105%); box-shadow: 24px 0 48px rgba(0,0,0,.18); }
.drawer.open { transform: translateX(0); visibility: visible; }

/* Shared rich-drawer header recipe (see also .rui-drawer__head in ui-kit.css
   and .fq-drawer-top in quotes-module.css): gradient band + soft decorative
   orbs + frosted-glass badge + white text. Reused here via ::before/::after
   pseudo-orbs so no JS changes were needed for this specific drawer. */
.drawer-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 14px;
  padding: 22px 22px 20px;
  background: linear-gradient(155deg, #5b93d6 0%, #223a63 115%);
  flex-shrink: 0;
  color: #fff;
}
.drawer-head::before, .drawer-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(28px); pointer-events: none; z-index: -1;
}
.drawer-head::before { width: 160px; height: 160px; top: -70px; inset-inline-start: -45px; opacity: .16; }
.drawer-head::after { width: 110px; height: 110px; bottom: -55px; inset-inline-end: 40px; opacity: .12; }
.drawer-head .avatar {
  width: 50px; height: 50px; font-size: 15px; font-weight: 700; flex: none;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 18px -8px rgba(0,0,0,.3);
}
.drawer-head h2 { font-size: 17px; font-weight: 800; margin: 0; color: #fff; }
.drawer-head .meta { font-size: 12px; color: rgba(255,255,255,.82); margin-top: 3px; }
.drawer-head .spacer { flex: 1; }
.drawer-close {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px); color: #fff;
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  transition: background .15s, transform .2s;
}
.drawer-close:hover { background: rgba(255,255,255,.34); color: #fff; border-color: transparent; transform: rotate(90deg); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 18px 22px 32px;
  display: flex; flex-direction: column; gap: 16px;
}

/* Hero strip with chips */
.drawer-hero {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 8px;
}
.drawer-hero .chip { font-size: 12px; padding: 6px 12px; }

/* Big AI score circle */
.drawer-score-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(30,58,138,.08), rgba(212,160,23,.08));
  border: 1px solid var(--brand-100);
}
[data-theme="dark"] .drawer-score-row {
  background: linear-gradient(135deg, rgba(30,58,138,.20), rgba(212,160,23,.12));
  border-color: rgba(108,127,177,.25);
}
.score-ring {
  width: 110px; height: 110px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--green-500) calc(var(--p) * 1%), var(--surface-2) 0);
  position: relative;
}
.score-ring::before {
  content: '';
  position: absolute; inset: 8px;
  background: var(--surface);
  border-radius: 50%;
}
.score-ring .pct { position: relative; font-weight: 800; font-size: 22px; }
.score-ring .lbl { position: relative; font-size: 10px; color: var(--text-muted); margin-top: -2px; }

.drawer-score-info .row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; }
.drawer-score-info .row .lab { color: var(--text-muted); }
.drawer-score-info .row .val { font-weight: 600; }

/* Diaco attribution showcase (POWER) */
.power-card {
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
/* Also prevent shrink on sibling drawer sections inside flex column parent */
.drawer-body > .dsec, .drawer-body > .drawer-hero, .drawer-body > .drawer-score-row { flex-shrink: 0; }
.power-card::after {
  content: '';
  position: absolute;
  inset-inline-end: -40px; top: -40px;
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-500), transparent 70%);
  opacity: .25;
}
.power-card h3 {
  margin: 0 0 6px;
  font-size: 14px; opacity: .85; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.power-card .big {
  font-size: 42px; font-weight: 800; letter-spacing: -1px;
  color: var(--accent-500);
  display: flex; align-items: baseline; gap: 6px;
}
.power-card .big small { font-size: 14px; color: #fff; opacity: .85; font-weight: 500; }
.power-card p { margin: 6px 0 14px; font-size: 13px; opacity: .92; }
.power-bars { display: flex; flex-direction: column; gap: 8px; }
.power-bar {
  background: rgba(255,255,255,.08);
  border-radius: 8px; padding: 8px 12px;
  display: grid; grid-template-columns: 1fr auto; gap: 12px;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}
.power-bar::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: 0;
  width: var(--w);
  background: linear-gradient(90deg, var(--accent-500), rgba(212,160,23,.2));
  opacity: .25;
  z-index: 0;
}
.power-bar .src, .power-bar .pct { position: relative; z-index: 1; }
.power-bar .pct { font-weight: 700; color: var(--accent-500); }

/* Section block in drawer */
.dsec {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.dsec h4 {
  margin: 0 0 12px;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.dsec h4 .count { color: var(--text-muted); font-weight: 500; font-size: 11px; }
.dsec .row {
  padding: 10px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
}
.dsec .row:last-child { border-bottom: none; }
.dsec .row .when { font-size: 11px; color: var(--text-muted); }

/* Roadmap */
.roadmap-list { display: flex; flex-direction: column; gap: 10px; }
.roadmap-step {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
  border-inline-start: 3px solid var(--brand-500);
}
.roadmap-step.done { opacity: .6; border-color: var(--green-500); }
.roadmap-step .num {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--brand-500); color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
}
.roadmap-step.done .num { background: var(--green-500); }
.roadmap-step .act { font-weight: 600; font-size: 13px; }
.roadmap-step .when { font-size: 11px; color: var(--text-muted); }
.roadmap-step .priority {
  align-self: center;
  font-size: 10px; padding: 3px 8px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
}

/* Auto/manual badge for messages */
.tag-auto, .tag-manual {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 600; margin-inline-end: 6px;
}
.tag-auto   { background: rgba(20,184,166,.15); color: var(--accent-600); }
.tag-manual { background: rgba(139,92,246,.15); color: #8b5cf6; }
[data-theme="dark"] .tag-auto   { color: #5ee0d3; }

/* Customer table — clickable rows */
.customers-clickable tbody tr { cursor: pointer; }
.customers-clickable tbody tr:hover { background: linear-gradient(90deg, rgba(30,58,138,.08), transparent); }
.type-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.type-pill.مشتری سازمانی          { background: rgba(16,185,129,.15); color: var(--green-500); }
.type-pill.گرم            { background: rgba(245,158,11,.18); color: var(--amber-500); }
.type-pill.ناشناس         { background: rgba(148,163,184,.18); color: var(--text-muted); }
[data-theme="dark"] .type-pill.مشتری سازمانی { color: #34d399; }

/* Transcript (collapsible) */
.transcript {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  margin-top: 0;
}
.transcript.open {
  max-height: 1200px;
  margin-top: 10px;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 10px;
}

/* Journey call row (clickable card with transcript) */
.journey-call-row {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 13px;
  transition: background .15s ease;
  border-radius: 8px;
}
.journey-call-row.has-transcript { cursor: pointer; }
.journey-call-row.has-transcript:hover {
  background: var(--surface-2);
  padding-inline: 10px;
  margin-inline: -10px;
}
.journey-call-row.expanded {
  background: var(--surface-2);
  padding: 12px 10px;
  margin-inline: -10px;
  border-bottom-color: transparent;
}
.journey-call-head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jc-toggle {
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-500);
  background: rgba(160, 32, 240, .08);
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .15s ease;
}
.journey-call-row.has-transcript:hover .jc-toggle { background: rgba(160, 32, 240, .16); }
.jc-toggle.muted { color: var(--text-muted); background: transparent; }

/* Collapsible wrapper for bubble transcript (uses .call-detail / .msg-* like advisors page) */
.journey-transcript-wrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.journey-transcript-wrap.open {
  max-height: 2000px;
  margin-top: 8px;
}
.journey-transcript-wrap .call-detail {
  padding: 12px;
  background: var(--surface);
  border-radius: 10px;
  border: 1px solid var(--border);
}
.journey-transcript-wrap .call-transcript {
  max-height: none;
  padding: 4px 0;
}

.t-line {
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.85;
}
.t-line .t-speaker {
  font-weight: 700;
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}
.t-line.advisor .t-speaker { color: var(--brand-500); }
.t-line.customer .t-speaker { color: var(--accent-600); }
.t-line.ai {
  background: linear-gradient(135deg, rgba(139,92,246,.10), rgba(139,92,246,.02));
  border-inline-start: 3px solid #8b5cf6;
  padding: 8px 10px;
  border-radius: 6px;
  margin-top: 8px;
}
.t-line.ai .t-speaker { color: #8b5cf6; }
.t-line.ai .t-text { font-style: italic; font-size: 11px; }

/* Content Journey track */
.journey-track {
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  padding-inline-start: 8px;
}
.journey-step {
  display: grid;
  grid-template-columns: 60px 24px 1fr;
  gap: 8px;
  align-items: stretch;
  position: relative;
  min-height: 48px;
}
.journey-step .js-day {
  font-size: 10px;
  color: var(--text-muted);
  align-self: center;
  text-align: center;
  padding: 4px 6px;
  background: var(--surface-2);
  border-radius: 6px;
  font-weight: 600;
}
.journey-step .js-line {
  position: relative;
  display: flex; justify-content: center;
}
.journey-step .js-line::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 2px;
  background: var(--border);
}
.journey-step .js-line::after {
  content: '';
  position: relative;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 3px solid var(--brand-500);
  align-self: center;
  z-index: 1;
}
.journey-step.success .js-line::after { border-color: var(--green-500); background: var(--green-500); }
.journey-step.partial .js-line::after { border-color: var(--amber-500); }
.journey-step.fail    .js-line::after { border-color: var(--red-500); }
.journey-step:first-child .js-line::before { top: 50%; }
.journey-step:last-child .js-line::before  { bottom: 50%; }
.journey-step .js-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  align-self: center;
}

/* Score-pill green class for green status */
[data-theme="dark"] .green-50 { background: rgba(16,185,129,.15); }
.dsec .row .green-50, .green-50 { background: var(--green-50); padding: 8px 10px; border-radius: 6px; }

@media (max-width: 600px) {
  .drawer { width: 100vw; }
  .drawer-body { padding: 14px; }
}

/* =============================================================
   EXECUTIVE DASHBOARD
   ============================================================= */

/* CEO Hero Banner */
.ceo-hero {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(184,212,241,.4), rgba(221,214,254,.4) 50%, rgba(255,228,204,.35)),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.ceo-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 90% 10%, rgba(244,162,97,.18), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(111,185,143,.15), transparent 40%);
}
.ceo-hero-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 22px;
}
.ceo-platform-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px;
  background: linear-gradient(135deg, var(--brand-500), var(--accent-500));
  color: #fff;
  border-radius: 999px;
  letter-spacing: .2px;
  box-shadow: 0 4px 12px rgba(44, 120, 115, .3);
  margin-bottom: 12px;
  animation: floatSmall 3s ease-in-out infinite;
  background-size: 200% 200%;
  background-position: 0% 50%;
}
.ceo-platform-tag:hover { animation: gradientFlow 2s linear infinite; }

.ceo-greeting h1 {
  margin: 8px 0 6px;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.8px;
}
.ceo-greeting p { margin: 0 0 4px; font-size: 14px; color: var(--text); }
.ceo-status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  box-shadow: var(--shadow-xs);
}
.ceo-status-pill .status-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--green-500);
  box-shadow: 0 0 0 0 var(--green-500);
  animation: pulseGlow 2.5s infinite;
}
.ceo-status-pill.status-amber .status-dot { background: var(--amber-500); }
.ceo-status-pill.status-red   .status-dot { background: var(--red-500); }

/* =============================================================
   HEALTH ORB — Modern concentric rings (Apple-watch style)
   ============================================================= */
.health-orb {
  position: relative;
  width: 240px; height: 240px;
  display: grid; place-items: center;
  flex-shrink: 0;
  filter: drop-shadow(0 18px 40px rgba(44, 120, 115, .22));
  animation: breathe 5s ease-in-out infinite;
}
.health-svg {
  width: 100%; height: 100%;
  transform: rotate(0deg);
}
.orb-track {
  stroke: rgba(15, 23, 42, .06);
  fill: none;
}
[data-theme="dark"] .orb-track { stroke: rgba(255, 255, 255, .08); }
.orb-arc { fill: none; }
.orb-arc-1 {
  stroke-dasharray: 578;
  stroke-dashoffset: 578;
  animation: orbDraw1 2.6s cubic-bezier(.25, .1, .25, 1) .35s forwards;
}
.orb-arc-2 {
  stroke-dasharray: 452;
  stroke-dashoffset: 452;
  animation: orbDraw2 2.8s cubic-bezier(.25, .1, .25, 1) .60s forwards;
}
.orb-arc-3 {
  stroke-dasharray: 339;
  stroke-dashoffset: 339;
  animation: orbDraw3 3.0s cubic-bezier(.25, .1, .25, 1) .85s forwards;
}
/* targets: c - c*p/100  →  arc-1: 578*0.14=80.92, arc-2: 452*0.22=99.44, arc-3: 339*0.08=27.12 */
@keyframes orbDraw1 { from { stroke-dashoffset: 578; } to { stroke-dashoffset: 80.92; } }
@keyframes orbDraw2 { from { stroke-dashoffset: 452; } to { stroke-dashoffset: 99.44; } }
@keyframes orbDraw3 { from { stroke-dashoffset: 339; } to { stroke-dashoffset: 27.12; } }

.health-orb-center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  pointer-events: none;
}
.health-orb-pct {
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #2c7873 0%, #6fb98f 50%, #f4a261 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.health-orb-pct small {
  font-size: 22px;
  margin-inline-start: 3px;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
  font-weight: 700;
}
.health-orb-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: -.2px;
}

/* Floating sparkles around orb */
.orb-spark {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent-500) 60%, transparent 100%);
  box-shadow: 0 0 12px var(--accent-500);
  pointer-events: none;
  animation: sparkFloat 4s ease-in-out infinite;
}
.orb-spark.s1 { top: 8%;  left: 12%; animation-delay: 0s;   background: radial-gradient(circle, #fff, #6fb98f, transparent); box-shadow: 0 0 12px #6fb98f; }
.orb-spark.s2 { top: 18%; right: 8%; animation-delay: .8s;  background: radial-gradient(circle, #fff, #2c7873, transparent); box-shadow: 0 0 12px #2c7873; }
.orb-spark.s3 { bottom: 14%; left: 10%; animation-delay: 1.6s; background: radial-gradient(circle, #fff, #14b8a6, transparent); box-shadow: 0 0 12px #14b8a6; }
.orb-spark.s4 { bottom: 8%;  right: 18%; animation-delay: 2.4s; background: radial-gradient(circle, #fff, #f4a261, transparent); box-shadow: 0 0 12px #f4a261; }
@keyframes sparkFloat {
  0%, 100% { transform: translateY(0)    scale(1);   opacity: .85; }
  25%      { transform: translateY(-8px) scale(1.3); opacity: 1;   }
  50%      { transform: translateY(0)    scale(.85); opacity: .6;  }
  75%      { transform: translateY(8px)  scale(1.15);opacity: .9;  }
}

/* Mini legend below orb (in normal flow, not absolute) */
.health-orb {
  margin-bottom: 8px;
}
.orb-legend {
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px;
  white-space: nowrap;
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  background: transparent;
}
.orb-leg { display: inline-flex; align-items: center; gap: 4px; }
.orb-leg i {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
}

/* (legacy mood-ring kept for fallback) */
.mood-ring {
  width: 170px; height: 170px;
  border-radius: 50%;
  background: conic-gradient(
    from -90deg,
    #6dbf8f 0%,
    #2c7873 calc(var(--p) * 0.5%),
    #6fb98f calc(var(--p) * 0.85%),
    #f4a261 calc(var(--p) * 1%),
    rgba(220, 226, 240, .6) calc(var(--p) * 1%),
    rgba(220, 226, 240, .6) 100%
  );
  display: grid; place-items: center;
  position: relative;
  animation: breathe 4s ease-in-out infinite;
  box-shadow:
    0 18px 40px rgba(44, 120, 115, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .6);
  flex-shrink: 0;
}
.mood-ring::before {
  content: '';
  position: absolute; inset: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow:
    inset 0 2px 8px rgba(15, 23, 42, .06),
    0 0 0 4px rgba(255, 255, 255, .9);
}
.mood-ring::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  top: 4px; left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--accent-500);
  box-shadow: 0 0 0 4px var(--surface), 0 4px 10px rgba(244, 162, 97, .4);
  z-index: 2;
}
.mood-pct {
  position: relative;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1;
  background: linear-gradient(135deg, #2c7873 0%, #6fb98f 50%, #f4a261 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  z-index: 1;
}
.mood-pct::after {
  content: '٪';
  font-size: 18px;
  margin-inline-start: 2px;
  -webkit-text-fill-color: var(--text-muted);
  color: var(--text-muted);
  font-weight: 600;
}
.mood-lbl {
  position: relative;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 600;
  letter-spacing: -.2px;
  z-index: 1;
  white-space: nowrap;
}

.ceo-priorities-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
}
.ceo-priorities-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.ceo-priorities-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
}
.ceo-priorities-head p {
  margin: 5px 0 0;
  color: var(--text-muted);
  font-size: 12px;
  line-height: 1.7;
}
.ceo-priorities-count {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.72);
  color: var(--text-muted);
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 800;
}
.ceo-hero-priorities {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
@media (max-width: 1100px) { .ceo-hero-priorities { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  {
  .ceo-priorities-head { align-items: flex-start; flex-direction: column; }
  .ceo-hero-priorities { grid-template-columns: 1fr; }
}

.priority-card {
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  transition: transform .25s cubic-bezier(.22,.7,.16,1);
}
.priority-card:hover { transform: translateY(-3px); }
.priority-card::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 100%; height: 3px;
}
.priority-red::before    { background: linear-gradient(90deg, var(--red-500), var(--accent-500)); }
.priority-amber::before  { background: linear-gradient(90deg, var(--amber-500), var(--accent-500)); }
.priority-blue::before   { background: linear-gradient(90deg, var(--brand-500), var(--purple-500)); }

.prio-tag {
  display: inline-block; padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  margin-bottom: 6px;
}
.priority-red .prio-tag    { background: var(--pastel-rose); color: #b14458; }
.priority-amber .prio-tag  { background: var(--pastel-peach); color: #c46920; }
.priority-blue .prio-tag   { background: var(--pastel-sky); color: #3b5998; }
.prio-title { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.prio-why { font-size: 11px; color: var(--text-muted); line-height: 1.7; }

/* Today's Pulse — DS tiles (#icons) + soft KPI tint; no emoji / side-bars */
.today-pulse {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}
@media (max-width: 1200px) { .today-pulse { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px)  { .today-pulse { grid-template-columns: repeat(2, 1fr); } }
.pulse-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 14px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-xs, none);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
  cursor: default;
  user-select: none;
  min-width: 0;
}
.pulse-cell:hover { transform: translateY(-2px); background: var(--surface-2); }
.pulse-cell.level-green {
  background: linear-gradient(135deg, var(--surface) 55%, rgba(184, 230, 211, .40) 100%);
}
.pulse-cell.level-amber {
  background: linear-gradient(135deg, var(--surface) 55%, rgba(255, 228, 204, .45) 100%);
}
.pulse-cell.level-red {
  background: linear-gradient(135deg, var(--surface) 55%, rgba(245, 194, 199, .35) 100%);
}
.pulse-cell > .ds-ico-tile {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  flex-shrink: 0;
}
.pulse-cell > .ds-ico-tile .ds-ico { width: 20px; height: 20px; }
.pulse-cell.level-green .pulse-value { color: #0e8a5e; }
.pulse-cell.level-amber .pulse-value { color: #b27512; }
.pulse-cell.level-red   .pulse-value { color: #b14458; }
.pulse-info {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  min-width: 0; width: 100%;
}
.pulse-label {
  font-size: 11px; color: var(--text-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.pulse-value { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.15; }
.pulse-target {
  font-size: 11px; color: var(--text-muted);
  display: inline-flex; flex-wrap: wrap; gap: 4px 6px;
  align-items: center; justify-content: center;
  line-height: 1.3;
}
.pulse-pct.up   { color: #2f8a5e; font-weight: 700; white-space: nowrap; }
.pulse-pct.down { color: #b14458; font-weight: 700; white-space: nowrap; }

/* Goals */
.goals-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 600px) { .goals-grid { grid-template-columns: 1fr; } }
.goal-item {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px;
  align-items: center;
  padding: 12px;
  background: var(--surface-2);
  border-radius: 12px;
  transition: transform .2s ease;
}
.goal-item:hover { transform: translateY(-2px); }
.goal-ring {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0);
  display: grid; place-items: center;
  position: relative;
}
.goal-ring::before {
  content: '';
  position: absolute; inset: 5px;
  background: var(--surface);
  border-radius: 50%;
}
.goal-ring span {
  position: relative;
  font-size: 11px; font-weight: 700;
}
.goal-name { font-size: 12px; font-weight: 600; margin-bottom: 2px; }
.goal-progress { font-size: 13px; }
.goal-progress strong { font-size: 14px; letter-spacing: -.3px; }

/* Smart Alerts */
.alerts-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding-inline-end: 4px; }
.alerts-list::-webkit-scrollbar { width: 6px; }
.alerts-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

.alert {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 12px;
  transition: transform .2s ease, background .2s ease;
}
.alert:hover { transform: translateX(-2px); }
[dir="rtl"] .alert:hover { transform: translateX(2px); }
.alert-dot {
  width: 10px; height: 10px; border-radius: 50%;
  align-self: flex-start; margin-top: 6px;
  position: relative;
}
.alert-red    .alert-dot { background: var(--red-500); animation: pulseGlow 2s infinite; }
.alert-amber  .alert-dot { background: var(--amber-500); }
.alert-green  .alert-dot { background: var(--green-500); }
.alert-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; }
.alert-detail { font-size: 11px; color: var(--text-muted); line-height: 1.6; }
.alert-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 11px; font-weight: 600; color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s ease;
}
.alert-btn:hover { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

/* VIP / Hot list (top customers / hot leads) */
.vip-list { display: flex; flex-direction: column; gap: 8px; }
.vip-row {
  display: grid;
  grid-template-columns: 24px 36px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background .2s ease;
}
.vip-row:hover { background: var(--surface-2); }
.vip-rank {
  font-weight: 800;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
.vip-row:nth-child(1) .vip-rank { color: var(--accent-500); font-size: 16px; }
.vip-info { min-width: 0; }
.vip-name { font-weight: 600; font-size: 13px; }
.vip-meta { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vip-value { font-weight: 700; font-size: 13px; color: var(--brand-500); }
.vip-score {
  font-weight: 800;
  font-size: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
}
.vip-score.score-green { background: var(--pastel-mint); color: #2f8a5e; }
.vip-score.score-amber { background: var(--pastel-peach); color: #c46920; }
.vip-score.score-red   { background: var(--pastel-rose); color: #b14458; }

/* Live Feed */
.live-feed-card { display: flex; flex-direction: column; }
.live-feed {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 380px; overflow-y: auto;
  padding-inline-end: 4px;
}
.live-feed::-webkit-scrollbar { width: 6px; }
.live-feed::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--green-500);
  animation: pulseGlow 1.8s infinite;
}
.live-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border-inline-start: 3px solid transparent;
  animation: slideUp .4s cubic-bezier(.22,.7,.16,1) both;
}
.live-green  { border-color: var(--green-500); }
.live-blue   { border-color: var(--brand-500); }
.live-amber  { border-color: var(--amber-500); }
.live-red    { border-color: var(--red-500); }
.live-purple { border-color: var(--purple-500); }
.live-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.live-icon.ds-ico-tile .ds-ico { width: 18px; height: 18px; }
.live-text  { font-size: 12px; font-weight: 600; }
.live-detail{ font-size: 10px; color: var(--text-muted); }
.live-time  { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

/* External Accounts grid (Google Ads / GA4 / GTM / SC / Meta / Hotjar / Mailerlite) */
.accounts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.account-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.account-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.account-head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}
.account-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 18px;
  background: var(--pastel-sky);
  color: var(--brand-700);
  flex-shrink: 0;
}
.account-amber  .account-icon { background: var(--pastel-peach); color: #c46920; }
.account-blue   .account-icon { background: var(--pastel-sky);   color: var(--brand-700); }
.account-purple .account-icon { background: var(--pastel-lilac); color: #6d50d4; }
.account-green  .account-icon { background: var(--pastel-mint);  color: #2f8a5e; }
.account-red    .account-icon { background: var(--pastel-rose);  color: #b14458; }
.account-name { font-weight: 700; font-size: 14px; }
.account-meta { font-size: 11px; color: var(--text-muted); font-family: monospace; }

.account-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.account-stat {
  display: flex; justify-content: space-between;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 11px;
}
.account-stat strong { font-weight: 700; }

/* ======= 2-column channel list (fix for empty space) ======= */
.channel-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 1100px) {
  .channel-list { grid-template-columns: 1fr; }
}

/* =========================================================
   ADVISORS · Last 10 Calls (AI tags + transcript)
   ========================================================= */
.calls-table .chip { white-space: nowrap; }
.calls-table tbody tr.call-row { cursor: pointer; transition: background-color .15s ease; }
.calls-table tbody tr.call-row:hover { background: var(--hover-bg, rgba(30,109,255,.04)); }
.calls-table tbody tr.call-row.expanded {
  background: var(--hover-bg, rgba(30,109,255,.06));
  box-shadow: inset 3px 0 0 var(--brand, #1e6dff);
}

.calls-table .mono-num {
  font-family: 'Vazirmatn', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
  font-weight: 600;
  color: var(--text-strong, #0f172a);
}

.call-person {
  display: flex; align-items: center; gap: 10px;
}
.call-person-name { font-weight: 600; color: var(--text-strong, #0f172a); }
.call-person-meta { font-size: .78rem; color: var(--text-muted, #64748b); margin-top: 2px; }

[data-theme="dark"] .calls-table .mono-num,
[data-theme="dark"] .call-person-name { color: #e2e8f0; }
[data-theme="dark"] .call-person-meta { color: #94a3b8; }

/* AI tag pills */
.tag-ai-row { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.tag-ai {
  display: inline-flex; align-items: center;
  padding: 3px 9px;
  font-size: .72rem; font-weight: 600;
  line-height: 1.6;
  background: linear-gradient(135deg, rgba(139,92,246,.12), rgba(30,109,255,.12));
  color: #6d50d4;
  border: 1px solid rgba(139,92,246,.25);
  border-radius: 999px;
  white-space: nowrap;
}
.tag-ai::before {
  content: '✦';
  margin-left: 4px;
  font-size: .68rem;
  opacity: .7;
}
[data-theme="dark"] .tag-ai {
  background: linear-gradient(135deg, rgba(139,92,246,.18), rgba(30,109,255,.18));
  color: #c4b5fd;
  border-color: rgba(139,92,246,.35);
}

/* Expandable transcript row */
.call-detail-row { display: none; }
.call-detail-row.open { display: table-row; }
.call-detail-row td {
  background: var(--surface-2, #f8fafc);
  padding: 0 !important;
  border-top: none !important;
}
[data-theme="dark"] .call-detail-row td { background: rgba(15,23,42,.6); }

.call-detail {
  padding: 16px 20px 20px;
  animation: callDetailIn .25s ease;
}
@keyframes callDetailIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.call-summary {
  position: relative;
  background:
    linear-gradient(135deg, rgba(160,32,240,.10), rgba(96,165,250,.08) 50%, rgba(16,185,129,.08));
  border: 1px solid rgba(160,32,240,.18);
  border-inline-end: 3px solid #a020f0;
  padding: 12px 16px;
  border-radius: 14px;
  margin-bottom: 16px;
  font-size: .9rem;
  line-height: 1.85;
  color: var(--text-strong, #0f172a);
  box-shadow: 0 6px 20px -14px rgba(160,32,240,.4);
  animation: msgSummaryIn .5s cubic-bezier(.2,.7,.3,1.1) both;
}
.call-summary::before {
  content: '✦ خلاصه دیاکو';
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #7e22ce;
  margin-bottom: 4px;
}
@keyframes msgSummaryIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .call-summary { color: #e2e8f0; }

.call-transcript {
  display: flex; flex-direction: column; gap: 14px;
  max-height: 460px;
  overflow-y: auto;
  padding: 6px 4px 10px;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(160,32,240,.3) transparent;
}
.call-transcript::-webkit-scrollbar { width: 6px; }
.call-transcript::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(160,32,240,.35), rgba(96,165,250,.25));
  border-radius: 999px;
}

.msg {
  position: relative;
  display: flex; flex-direction: column;
  max-width: 76%;
  padding: 10px 14px 11px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.85;
  box-shadow: 0 4px 14px -8px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.04);
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .22s ease;
  animation: msgPop .42s cubic-bezier(.2,.7,.3,1.25) both;
  animation-delay: calc(var(--msg-i, 0) * 70ms);
  word-break: break-word;
}
.msg:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.22), 0 1px 3px rgba(0,0,0,.06);
}
@keyframes msgPop {
  0%   { opacity: 0; transform: translateY(10px) scale(.92); }
  60%  { opacity: 1; transform: translateY(-2px) scale(1.02); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.msg-name {
  font-size: 11px;
  font-weight: 700;
  opacity: .95;
  margin-bottom: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1;
}
.msg-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  color: inherit;
  font-size: 10px;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px currentColor;
  flex-shrink: 0;
}
.msg-sys-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #a020f0, #60a5fa);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  flex-shrink: 0;
  animation: msgSysSpin 6s linear infinite;
}
@keyframes msgSysSpin {
  to { transform: rotate(360deg); }
}
.msg-text {
  white-space: pre-wrap;
  font-weight: 500;
}

/* Advisor bubble — blue */
.msg-advisor {
  align-self: flex-start;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 70%, #bfdbfe 100%);
  color: #1e3a8a;
  border-color: rgba(30,109,255,.18);
  border-bottom-right-radius: 4px;
}
.msg-advisor::after {
  content: '';
  position: absolute;
  bottom: -1px; inset-inline-end: -7px;
  width: 14px; height: 14px;
  background: inherit;
  border-inline-end: 1px solid rgba(30,109,255,.18);
  border-bottom: 1px solid rgba(30,109,255,.18);
  border-bottom-right-radius: 14px;
  -webkit-mask: radial-gradient(circle 14px at 0 0, transparent 14px, #000 14.5px);
          mask: radial-gradient(circle 14px at 0 0, transparent 14px, #000 14.5px);
}
.msg-advisor .msg-avatar { color: #1e40af; background: rgba(255,255,255,.85); }

/* Customer/other bubble — mint/green */
.msg-other {
  align-self: flex-end;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 70%, #a7f3d0 100%);
  color: #064e3b;
  border-color: rgba(16,185,129,.20);
  border-bottom-left-radius: 4px;
}
.msg-other::after {
  content: '';
  position: absolute;
  bottom: -1px; inset-inline-start: -7px;
  width: 14px; height: 14px;
  background: inherit;
  border-inline-start: 1px solid rgba(16,185,129,.20);
  border-bottom: 1px solid rgba(16,185,129,.20);
  border-bottom-left-radius: 14px;
  -webkit-mask: radial-gradient(circle 14px at 100% 0, transparent 14px, #000 14.5px);
          mask: radial-gradient(circle 14px at 100% 0, transparent 14px, #000 14.5px);
}
.msg-other .msg-avatar { color: #065f46; background: rgba(255,255,255,.85); }

/* System bubble — center, dashed pill */
.msg-system {
  align-self: center;
  background: linear-gradient(135deg, rgba(160,32,240,.10), rgba(96,165,250,.08));
  color: #4b5563;
  font-size: 12px;
  font-style: italic;
  border-radius: 999px;
  padding: 7px 18px;
  border: 1px dashed rgba(160,32,240,.34);
  box-shadow: none;
  max-width: 86%;
  text-align: center;
}
.msg-system::after { display: none; }
.msg-system .msg-name { opacity: 1; color: #6d28d9; margin-bottom: 3px; justify-content: center; }
.msg-system .msg-text { font-weight: 500; }

/* Dark theme overrides */
[data-theme="dark"] .msg-advisor {
  background: linear-gradient(135deg, rgba(59,130,246,.20), rgba(59,130,246,.10));
  color: #93c5fd;
  border-color: rgba(59,130,246,.28);
}
[data-theme="dark"] .msg-other {
  background: linear-gradient(135deg, rgba(16,185,129,.20), rgba(16,185,129,.10));
  color: #6ee7b7;
  border-color: rgba(16,185,129,.32);
}
[data-theme="dark"] .msg-system {
  background: rgba(160,32,240,.12);
  color: #cbd5e1;
  border-color: rgba(160,32,240,.4);
}
[data-theme="dark"] .msg-advisor .msg-avatar,
[data-theme="dark"] .msg-other   .msg-avatar { background: rgba(0,0,0,.25); }
[data-theme="dark"] .call-summary {
  background: linear-gradient(135deg, rgba(160,32,240,.18), rgba(96,165,250,.10));
  border-color: rgba(160,32,240,.30);
}

/* =========================================================
   ADVISORS · Hourly heatmap (day x hour)
   ========================================================= */
.hour-heatmap {
  display: grid;
  grid-template-columns: 70px repeat(12, 1fr);
  gap: 4px;
  margin-top: 10px;
  direction: rtl;
}
.hour-heatmap .hh-corner { }
.hour-heatmap .hh-hour {
  font-size: .7rem;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-weight: 600;
  padding: 2px 0;
}
.hour-heatmap .hh-day {
  font-size: .78rem;
  color: var(--text-strong, #0f172a);
  font-weight: 600;
  display: flex; align-items: center;
  padding-left: 8px;
}
[data-theme="dark"] .hour-heatmap .hh-day { color: #e2e8f0; }

.hh-cell {
  height: 26px;
  border-radius: 6px;
  background: var(--pastel-sky, #e0e7ff);
  transition: transform .15s ease;
}
.hh-cell:hover { transform: scale(1.12); cursor: pointer; }
.hh-l0 { background: rgba(148,163,184,.15); }
.hh-l1 { background: rgba(30,109,255,.18); }
.hh-l2 { background: rgba(30,109,255,.38); }
.hh-l3 { background: rgba(30,109,255,.62); }
.hh-l4 { background: rgba(30,109,255,.92); }

[data-theme="dark"] .hh-l0 { background: rgba(148,163,184,.10); }
[data-theme="dark"] .hh-l1 { background: rgba(59,130,246,.22); }
[data-theme="dark"] .hh-l2 { background: rgba(59,130,246,.42); }
[data-theme="dark"] .hh-l3 { background: rgba(59,130,246,.66); }
[data-theme="dark"] .hh-l4 { background: rgba(59,130,246,.95); }

@media (max-width: 700px) {
  .hour-heatmap { grid-template-columns: 56px repeat(12, 1fr); }
  .hh-cell { height: 18px; }
  .tag-ai-row { max-width: 200px; }
}

/* Advisor + customer name links (in tables / lists / call cards) */
.advisor-link,
.customer-link {
  color: var(--brand-700);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: border-color .15s ease, color .15s ease;
  cursor: pointer;
}
.advisor-link:hover,
.customer-link:hover {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}

/* =========================================================
   Advisor Roster (clickable cards in #advisors page)
   ========================================================= */
.advisor-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 4px;
}
.roster-card {
  position: relative;
  display: block;
  padding: 16px 16px 14px;
  background: var(--surface-2);
  border-radius: 16px;
  border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
  cursor: pointer;
  overflow: hidden;
}
.roster-card::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--brand-500), transparent);
}
.roster-card.tier-gold::before   { background: linear-gradient(90deg, #f4b942, #ffe199); }
.roster-card.tier-silver::before { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.roster-card.tier-bronze::before { background: linear-gradient(90deg, #c08457, #e2b07c); }
.roster-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
  border-color: var(--brand-300);
}
.roster-tier {
  position: absolute;
  top: 12px;
  inset-inline-start: 14px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .2px;
}
.roster-top {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 18px;
}
.roster-avatar {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
  background: var(--surface);
  color: var(--brand-700);
  box-shadow: inset 0 0 0 1px var(--border);
}
.roster-avatar.tier-gold   { background: linear-gradient(135deg, #fff6d8, #ffdd83); color: #8c6a1e; }
.roster-avatar.tier-silver { background: linear-gradient(135deg, #f1f5f9, #cbd5e1); color: #475569; }
.roster-avatar.tier-bronze { background: linear-gradient(135deg, #f5e3d1, #e2b07c); color: #7a4a25; }
.roster-headline { min-width: 0; }
.roster-name { font-weight: 700; font-size: 15px; margin-bottom: 2px; }
.roster-role { font-size: 11px; color: var(--text-muted); }
.roster-score-wrap { text-align: center; }
.roster-score-num { margin-bottom: 2px; }
.roster-score-lbl { font-size: 10px; color: var(--text-muted); }
.roster-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.roster-tag {
  font-size: 10.5px;
  padding: 3px 9px;
  background: var(--surface);
  color: var(--brand-700);
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid var(--border);
}
.roster-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.roster-stat { text-align: center; }
.rs-num { font-weight: 700; font-size: 13px; letter-spacing: -.3px; }
.rs-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.roster-cta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-700);
}
.roster-card:hover .roster-cta { background: var(--brand-soft); }
.roster-actions { margin-top: 10px; }
.roster-qr-btn {
  width: 100%; font-family: inherit; font-size: 11.5px; font-weight: 700;
  padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; transition: .18s;
}
.roster-qr-btn:hover { background: var(--brand-soft); border-color: var(--brand-300, var(--border)); }
.ad-head-qr-btn { width: auto; margin-top: 10px; padding-inline: 16px; }

/* =========================================================
   Advisor Detail Page (#advisor/<idx>)
   ========================================================= */
.ad-page { display: flex; flex-direction: column; gap: 16px; }
.ad-back { margin-bottom: -4px; }
.ad-back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-muted); font-weight: 600;
  padding: 6px 12px; background: var(--surface-2); border-radius: 999px;
  transition: background .2s ease, color .2s ease;
}
.ad-back-link:hover { background: var(--brand-soft); color: var(--brand-700); }

/* Header */
.ad-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--surface-2), var(--surface));
  border-radius: 18px;
  border: 1px solid var(--border);
}
.ad-head-left { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; }
.ad-avatar {
  width: 88px; height: 88px;
  border-radius: 22px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 28px;
  box-shadow: inset 0 0 0 1px var(--border);
}
.ad-avatar.tier-gold   { background: linear-gradient(135deg, #fff6d8, #ffdd83); color: #8c6a1e; }
.ad-avatar.tier-silver { background: linear-gradient(135deg, #f1f5f9, #cbd5e1); color: #475569; }
.ad-avatar.tier-bronze { background: linear-gradient(135deg, #f5e3d1, #e2b07c); color: #7a4a25; }
.ad-head-info { min-width: 0; }
.ad-head-row { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; }
.ad-name { font-size: 22px; font-weight: 800; letter-spacing: -.4px; margin: 0; }
.ad-tier-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}
.ad-tier-badge.tier-gold   { background: #fff6d8; color: #8c6a1e; }
.ad-tier-badge.tier-silver { background: #f1f5f9; color: #475569; }
.ad-tier-badge.tier-bronze { background: #f5e3d1; color: #7a4a25; }
.ad-head-meta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--text-muted); margin-bottom: 8px; }
.ad-head-meta .sep { opacity: .5; }
.ad-bio { font-size: 13px; color: var(--text); line-height: 1.7; margin: 0 0 8px 0; }
.ad-head-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-head-score { text-align: center; align-self: center; }
.ad-score-num { font-size: 32px; }
.ad-score-num .score-pill { font-size: 22px; padding: 10px 20px; }
.ad-score-lbl { font-size: 11px; color: var(--text-muted); margin-top: 6px; line-height: 1.4; }

/* Valuation */
.ad-valuation-card { background: linear-gradient(135deg, var(--surface), var(--brand-soft)); }
.ad-valuation-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.val-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px;
  background: var(--surface);
  border-radius: 14px;
  border: 1px solid var(--border);
}
.val-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--surface-2);
}
.val-icon.green  { background: rgba(16,185,129,.14); }
.val-icon.amber  { background: rgba(245,158,11,.14); }
.val-icon.blue   { background: rgba(30,109,255,.14); }
.val-icon.purple { background: rgba(139,92,246,.14); }
.val-label { font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.val-value { font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1; }
.val-sub   { font-size: 10.5px; color: var(--text-muted); margin-top: 3px; }

/* Attendance — single full-width row of 30 days */
.ad-attendance {
  display: grid;
  grid-template-columns: repeat(30, minmax(0, 1fr));
  gap: 7px;
  margin-top: 8px;
}
.ad-attendance > .ds-tip {
  display: grid;
  width: 100%;
  min-width: 0;
  place-items: center;
}
@media (max-width: 1100px) {
  .ad-attendance { grid-template-columns: repeat(15, minmax(0, 1fr)); }
}
.att-cell {
  width: 100%;
  min-width: 26px;
  max-width: 34px;
  aspect-ratio: 1;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800;
  line-height: 1;
  color: #fff;
  position: relative;
  cursor: default;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24), 0 2px 7px rgba(15,23,42,.08);
  transition: transform .16s ease, box-shadow .16s ease;
}
.att-cell span { user-select: none; }
.att-cell:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 6px 12px rgba(15,23,42,.14); }
.att-work { background: linear-gradient(145deg, #20c58c, #0da876); }
.att-late { background: linear-gradient(145deg, #ffb52e, #ee9200); }
.att-sick { background: linear-gradient(145deg, #ff6570, #e83d49); }
.att-off  { background: linear-gradient(145deg, var(--surface-2), var(--surface-3)); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border); }
.att-cell::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 130%; left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a; color: #fff;
  padding: 6px 10px; border-radius: 6px;
  font-size: 10.5px; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 10;
}
.att-cell:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.ad-att-stats {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 12px;
  align-items: center;
}
.att-stat { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); }
.att-stat strong { color: var(--text); font-weight: 700; }
.att-dot { width: 10px; height: 10px; border-radius: 3px; }
.att-dot.work { background: #10b981; }
.att-dot.late { background: #f59e0b; }
.att-dot.sick { background: #ef4444; }
.att-dot.off  { background: var(--surface-3); }

/* Sales charts — full-width 3-column grid */
.ad-sales-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  gap: 16px;
  margin-top: 6px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .ad-sales-grid { grid-template-columns: 1fr 1fr; }
  .ad-sales-grid .ad-daily-wrap { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .ad-sales-grid { grid-template-columns: 1fr; }
  .ad-sales-grid .ad-daily-wrap { grid-column: auto; }
}
.ad-mini-donut {
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 14px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  min-width: 0;
}
.ad-mini-donut canvas { width: min(100%, 190px) !important; height: 190px !important; }
.ad-mini-title { width: 100%; font-size: 12.5px; color: var(--text); font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; gap: 7px; }
.ad-chart-help {
  width: 22px; height: 22px; padding: 0; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); color: var(--brand-700, #26645f);
  display: inline-grid; place-items: center; font: 800 11px/1 Vazirmatn, sans-serif; cursor: help;
}
.ad-chart-help:hover, .ad-chart-help:focus-visible { outline: none; border-color: var(--brand-300, #86bdb7); box-shadow: 0 0 0 3px rgba(44,120,115,.12); }
.ad-chart-legend { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 10px; margin-top: 10px; }
.ad-chart-legend-item { min-width: 0; display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 9px; background: var(--surface); color: var(--text-muted); font-size: 10.5px; line-height: 1.35; }
.ad-chart-legend-item i { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 3px; }
.ad-chart-legend-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-chart-legend-item b { margin-inline-start: auto; color: var(--text); font-size: 10.5px; }
.ad-daily-wrap {
  padding: 16px 18px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex; flex-direction: column;
  align-self: stretch;
  width: 100%;
}
.ad-daily-wrap canvas { min-height: 235px; max-height: 235px; }

/* Leads list */
.ad-leads-list { display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; padding-inline-end: 4px; }
.ad-lead-item {
  position: relative;
  display: grid;
  grid-template-columns: 4px 40px 1fr 22px;
  gap: 12px;
  align-items: stretch;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 14px;
  border: 1px solid var(--border);
  transition: border-color .2s ease, transform .15s ease, background-color .2s ease, box-shadow .25s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.ad-lead-item > .ad-lead-avatar { align-self: center; }
.ad-lead-item > .ad-lead-go { align-self: center; }
.ad-lead-item:hover {
  border-color: var(--brand-300);
  background: var(--surface);
  box-shadow: 0 10px 26px -16px rgba(160, 32, 240, .45), 0 2px 6px -2px rgba(0,0,0,.06);
  transform: translateY(-1px);
}
.ad-lead-item:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
.ad-lead-bar {
  width: 4px; height: 100%; min-height: 38px; border-radius: 999px;
  background: linear-gradient(180deg, var(--brand-500), #c084fc);
  align-self: stretch;
}
.ad-lead-item.heat-hot  .ad-lead-bar { background: linear-gradient(180deg, #ef4444, #f97316); }
.ad-lead-item.heat-warm .ad-lead-bar { background: linear-gradient(180deg, #f59e0b, #fbbf24); }
.ad-lead-item.heat-mild .ad-lead-bar { background: linear-gradient(180deg, var(--brand-500), #c084fc); }
.ad-lead-item.heat-cold .ad-lead-bar { background: linear-gradient(180deg, #64748b, #94a3b8); }
.ad-lead-avatar {
  width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .3px;
  box-shadow: 0 4px 10px -6px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.18);
}
.ad-lead-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ad-lead-row1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-lead-row2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; }
.ad-lead-name {
  font-weight: 700; font-size: 13.5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 180px;
  flex-shrink: 0;
}
.ad-lead-score {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; padding: 1px 7px; height: 18px;
  border-radius: 999px; font-size: 11px; font-weight: 700; line-height: 1;
  background: linear-gradient(135deg, var(--brand-500), #c084fc);
  color: #fff;
  box-shadow: 0 2px 6px -3px rgba(160,32,240,.6);
}
.ad-lead-item.heat-hot  .ad-lead-score { background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 2px 6px -3px rgba(239,68,68,.6); }
.ad-lead-item.heat-warm .ad-lead-score { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 2px 6px -3px rgba(245,158,11,.6); color: #5a3b00; }
.ad-lead-item.heat-cold .ad-lead-score { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 2px 6px -3px rgba(100,116,139,.5); }
.ad-lead-value {
  margin-inline-start: auto;
}
.ad-lead-meta {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  min-width: 0;
}
.ad-lead-meta .ad-lead-dot { color: var(--border-strong, #d1d5db); }
.ad-lead-meta .ad-lead-src { font-weight: 600; color: var(--text); }
.ad-stage-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; padding: 4px 10px;
  border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; line-height: 1.2;
}
.ad-stage-chip.stage-cool   { background: rgba(30,109,255,.08);  color: #1e6dff; border-color: rgba(30,109,255,.22); }
.ad-stage-chip.stage-amber  { background: rgba(245,158,11,.10);  color: #b45309; border-color: rgba(245,158,11,.28); }
.ad-stage-chip.stage-purple { background: rgba(160,32,240,.10);  color: #7e22ce; border-color: rgba(160,32,240,.28); }
.ad-stage-chip.stage-green  { background: rgba(16,185,129,.10);  color: #047857; border-color: rgba(16,185,129,.28); }
.ad-stage-chip.stage-pink   { background: rgba(244,63,94,.10);   color: #be185d; border-color: rgba(244,63,94,.28); }
.ad-lead-value {
  display: inline-flex; align-items: baseline; gap: 4px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ad-lead-val-num { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.ad-lead-val-unit { font-size: 10.5px; font-weight: 600; color: var(--text-muted); }
.ad-lead-go {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  transition: color .2s ease, background-color .2s ease, transform .2s ease;
}
.ad-lead-item:hover .ad-lead-go {
  color: #fff;
  background: var(--brand-500);
  transform: translateX(-2px);
}
.ad-lead-prob {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  min-width: 180px; flex: 0 0 auto;
}
.ad-lead-prob .prob-bar { flex: 1; min-width: 100px; }
.prob-bar { height: 6px; background: var(--surface-3); border-radius: 999px; overflow: hidden; }
.prob-fill { height: 100%; background: linear-gradient(90deg, var(--brand-500), #10b981); border-radius: 999px; transition: width .35s ease; }
.ad-lead-item.heat-hot  .prob-fill { background: linear-gradient(90deg, #f97316, #ef4444); }
.ad-lead-item.heat-warm .prob-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ad-lead-item.heat-cold .prob-fill { background: linear-gradient(90deg, #94a3b8, #64748b); }
.prob-num { font-size: 11px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.prob-num strong { color: var(--text); font-weight: 800; }
.chip-soft {
  font-size: 11px; padding: 3px 9px;
  background: var(--surface); border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--brand-700); font-weight: 600;
}

/* Calls list */
.ad-calls-list { display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; padding-inline-end: 4px; }
.ad-call-item {
  padding: 12px;
  background: var(--surface-2);
  border-radius: 12px;
  border-inline-start: 3px solid var(--border);
}
.ad-call-item .ad-call-head { display: flex; gap: 10px; align-items: center; font-size: 11px; margin-bottom: 6px; flex-wrap: wrap; }
.ad-call-dir { font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.ad-call-dir.in  { background: rgba(16,185,129,.15); color: #0e8a5e; }
.ad-call-dir.out { background: rgba(30,109,255,.15); color: #1e6dff; }
.ad-call-time { color: var(--text-muted); }
.ad-call-dur { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ad-call-actions { margin-inline-start: auto; display: inline-flex; gap: 6px; }
.ad-call-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease, color .2s ease;
  line-height: 1;
}
.ad-call-btn:hover { background: var(--surface-3); border-color: var(--brand-300); transform: translateY(-1px); }
.ad-call-btn:disabled { opacity: .5; cursor: not-allowed; }
.ad-call-btn.ad-call-play { color: var(--brand-700); }
.ad-call-btn.ad-call-play:hover { background: rgba(160,32,240,.10); color: var(--brand-700); }
.ad-call-btn.ad-call-show { color: #047857; }
.ad-call-btn.ad-call-show:hover { background: rgba(16,185,129,.10); }
.ad-call-btn svg { display: block; }

.ad-call-person { font-size: 12.5px; margin-bottom: 6px; }
.ad-call-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.ad-call-summary { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }

/* Inline play widget (simulated) */
.ad-call-player {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(160,32,240,.08), rgba(96,165,250,.06));
  border: 1px solid rgba(160,32,240,.18);
  position: relative;
}
.ad-pl-toggle {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--brand-500); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; cursor: pointer;
  box-shadow: 0 4px 10px -4px rgba(160,32,240,.55);
  transition: background-color .15s ease, transform .15s ease;
}
.ad-pl-toggle:hover { background: var(--brand-700); transform: scale(1.05); }
.ad-pl-toggle .ad-pl-icon-pause { display: none; }
.ad-call-player.playing .ad-pl-toggle .ad-pl-icon-play  { display: none; }
.ad-call-player.playing .ad-pl-toggle .ad-pl-icon-pause { display: block; }
.ad-pl-wave {
  position: relative;
  display: flex; align-items: center; gap: 2px;
  height: 28px; min-width: 0;
  overflow: hidden;
}
.ad-pl-wave > span {
  display: inline-block;
  width: 2px; min-height: 4px;
  background: linear-gradient(180deg, var(--brand-500), #c084fc);
  border-radius: 999px;
  opacity: .55;
  flex: 1 1 0;
}
.ad-call-player.playing .ad-pl-wave > span {
  animation: adPlWaveBeat 1.1s ease-in-out infinite;
  opacity: .9;
}
.ad-call-player.playing .ad-pl-wave > span:nth-child(3n)  { animation-delay: .1s; }
.ad-call-player.playing .ad-pl-wave > span:nth-child(3n+1){ animation-delay: .35s; }
.ad-call-player.playing .ad-pl-wave > span:nth-child(3n+2){ animation-delay: .6s; }
@keyframes adPlWaveBeat {
  0%, 100% { transform: scaleY(.5); }
  50%      { transform: scaleY(1.2); }
}
.ad-pl-progress {
  position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(160,32,240,.18), rgba(160,32,240,.06));
  border-inline-end: 2px solid var(--brand-500);
  border-radius: 4px;
}
.ad-call-player.playing .ad-pl-progress {
  animation: adPlProgress 12s linear forwards;
}
@keyframes adPlProgress {
  from { width: 0; }
  to   { width: 100%; }
}
.ad-pl-time {
  font-size: 11px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: embed;
}
.ad-pl-note {
  position: absolute;
  inset-inline-end: 10px; top: -8px;
  font-size: 9px;
  padding: 2px 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-muted);
}

/* Call transcript modal */
.ad-call-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; justify-content: center;
  z-index: 130;
  padding: 24px;
  opacity: 0;
  transition: opacity .25s ease;
}
.ad-call-modal-overlay.open { display: flex; opacity: 1; }
.ad-call-modal {
  width: min(720px, 100%);
  max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: 18px;
  box-shadow: 0 28px 60px -16px rgba(0,0,0,.45);
  border: 1px solid var(--border);
  overflow: hidden;
  animation: adCmPop .25s ease;
}
@keyframes adCmPop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ad-call-modal-head {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px 18px 18px;
  background: linear-gradient(155deg, #e0607a 0%, #6e2338 115%);
}
.ad-call-modal-head::before, .ad-call-modal-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(24px); pointer-events: none; z-index: -1;
}
.ad-call-modal-head::before { width: 130px; height: 130px; top: -60px; inset-inline-start: -30px; opacity: .16; }
.ad-call-modal-head::after { width: 90px; height: 90px; bottom: -45px; inset-inline-end: 60px; opacity: .12; }
.ad-call-modal-head h3 { margin: 0; font-size: 14px; font-weight: 800; color: #fff; }
.ad-cm-title-row { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ad-cm-dir { font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.2); color: #fff; }
.ad-cm-name { font-weight: 800; color: #fff; }
.ad-cm-sep, .ad-cm-meta { color: rgba(255,255,255,.8); font-weight: 500; font-size: 12px; }
.ad-call-modal-close {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  border: none;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  cursor: pointer;
  transition: background-color .15s ease, transform .2s ease;
}
.ad-call-modal-close:hover { background: rgba(255,255,255,.34); color: #fff; border-color: transparent; transform: rotate(90deg); }
.ad-call-modal-body {
  padding: 16px 18px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}
.ad-cm-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ad-cm-transcript { display: flex; flex-direction: column; gap: 8px; }

/* Advisor lead drawer body (rich profile, independent of customerTracks) */
.adl-hero { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.adl-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: 16px;
}
.adl-stat {
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 8px 6px;
  text-align: center;
}
.adl-stat-val { font-size: 14px; font-weight: 800; color: var(--text); letter-spacing: -.2px; }
.adl-stat-lbl { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.adl-section {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
}
.adl-section.warn { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.06); }
.adl-section.accent {
  border-color: rgba(160,32,240,.3);
  background: linear-gradient(135deg, rgba(160,32,240,.10), rgba(96,165,250,.06));
}
.adl-sec-title { font-weight: 800; font-size: 12.5px; margin-bottom: 6px; }
.adl-sec-body { font-size: 12.5px; line-height: 1.7; color: var(--text); }
.adl-talk-list { margin: 0; padding-inline-start: 18px; font-size: 12px; line-height: 1.9; color: var(--text); }
.adl-actions {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin-top: 12px;
}
.adl-actions .btn {
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 700; font-size: 12.5px;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.adl-actions .btn:hover { background: var(--surface-3); border-color: var(--brand-300); }
.adl-actions .btn-primary {
  background: var(--brand-500); color: #fff; border-color: var(--brand-500);
  box-shadow: 0 4px 12px -4px rgba(160,32,240,.55);
}
.adl-actions .btn-primary:hover { background: var(--brand-700); border-color: var(--brand-700); }

/* Insights */
.ad-insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 6px;
}
@media (max-width: 980px) { .ad-insights-grid { grid-template-columns: 1fr; } }
.insight-card {
  padding: 16px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.insight-card.insight-good { background: linear-gradient(135deg, rgba(16,185,129,.08), var(--surface-2)); border-color: rgba(16,185,129,.30); }
.insight-card.insight-warn { background: linear-gradient(135deg, rgba(245,158,11,.08), var(--surface-2)); border-color: rgba(245,158,11,.30); }
.insight-card.insight-rec  { background: linear-gradient(135deg, rgba(139,92,246,.08), var(--surface-2)); border-color: rgba(139,92,246,.30); }
.insight-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.insight-icon { font-size: 18px; }
.insight-title { font-weight: 700; font-size: 13px; }
.insight-list { margin: 0; padding-inline-start: 18px; font-size: 12.5px; line-height: 1.8; color: var(--text); }
.insight-list li { margin-bottom: 4px; }
.insight-rec-text { font-size: 12.5px; line-height: 1.8; margin: 0; color: var(--text); }

.empty-state {
  text-align: center;
  padding: 30px 14px;
  color: var(--text-muted);
  font-size: 12.5px;
}

@media (max-width: 760px) {
  .ad-header { grid-template-columns: 1fr; }
  .ad-head-left { grid-template-columns: 72px 1fr; }
  .ad-head-score { text-align: start; }
  .ad-attendance { grid-template-columns: repeat(10, minmax(0, 1fr)); }
  .ad-lead-item { grid-template-columns: 1fr; }
}

/* ============================================================
   TEAM PAGE — redesigned with isolated department blocks +
   CEO hero + Diaco AI suggestions per member
   ============================================================ */

/* --- CEO HERO --- */
.team-ceo-hero {
  position: relative;
  margin-bottom: 22px;
  padding: 22px 26px;
  border-radius: 22px;
  background: linear-gradient(135deg, #1a1b3a 0%, #2d2058 45%, #4a2a72 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 48px rgba(74, 42, 114, 0.28);
}
.ceo-hero-glow {
  position: absolute;
  inset: -40% -10% auto auto;
  width: 360px; height: 360px;
  background: radial-gradient(circle, rgba(244, 162, 97, 0.35), transparent 60%);
  filter: blur(20px);
  pointer-events: none;
}
.ceo-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ceo-hero-badge {
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(244, 162, 97, 0.22);
  color: #ffd8b0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid rgba(244, 162, 97, 0.45);
}
.ceo-hero-main {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 18px;
  align-items: center;
}
.ceo-hero-avatar {
  width: 88px; height: 88px;
  border-radius: 24px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 30px;
  background: linear-gradient(135deg, #f4a261, #e76f51);
  color: #fff;
  box-shadow: 0 10px 28px rgba(231, 111, 81, 0.4), inset 0 0 0 2px rgba(255,255,255,0.18);
}
.ceo-hero-name {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 4px;
}
.ceo-hero-role {
  font-size: 13px;
  color: rgba(255,255,255,0.78);
  margin-bottom: 8px;
}
.ceo-hero-tenure {
  display: inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 6px;
}
.ceo-hero-mantle {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
  line-height: 1.7;
}
.ceo-hero-stats {
  display: flex;
  gap: 14px;
}
.ceo-stat {
  text-align: center;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 96px;
}
.ceo-stat-v {
  font-size: 14px;
  font-weight: 700;
  color: #ffd8b0;
  margin-bottom: 4px;
}
.ceo-stat-k {
  font-size: 10.5px;
  color: rgba(255,255,255,0.62);
}
.ceo-hero-rahin {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(244, 162, 97, 0.3);
}
.ceo-hero-rahin .diaco-spark {
  font-size: 16px;
  color: #ffd8b0;
  text-shadow: 0 0 8px rgba(255,216,176,0.6);
  margin-top: 1px;
}
.ceo-hero-diaco-title {
  font-size: 12px;
  font-weight: 700;
  color: #ffd8b0;
  margin-bottom: 4px;
}
.ceo-hero-diaco-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}
@media (max-width: 920px) {
  .ceo-hero-main { grid-template-columns: 1fr; }
  .ceo-hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
}

/* --- RAHIN ORG HIGHLIGHTS --- */
.team-diaco-card { margin-bottom: 22px; }
.diaco-spark {
  display: inline-block;
  color: var(--accent-500);
  text-shadow: 0 0 8px rgba(244,162,97,0.5);
}
.diaco-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 1100px) { .diaco-highlight-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .diaco-highlight-grid { grid-template-columns: 1fr; } }
.diaco-highlight {
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.diaco-highlight:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(15,23,42,.07); }
.diaco-highlight::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rh-accent, var(--brand-500));
}
.diaco-highlight-red    { --rh-accent: #ef4444; --rh-soft: rgba(239,68,68,0.08); }
.diaco-highlight-purple { --rh-accent: #8b5cf6; --rh-soft: rgba(139,92,246,0.08); }
.diaco-highlight-amber  { --rh-accent: #f59e0b; --rh-soft: rgba(245,158,11,0.08); }
.diaco-highlight-green  { --rh-accent: #10b981; --rh-soft: rgba(16,185,129,0.08); }
.rh-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.rh-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 16px;
  background: var(--rh-soft);
  flex-shrink: 0;
}
.rh-meta { flex: 1; min-width: 0; }
.rh-pill {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--rh-soft);
  color: var(--rh-accent);
  font-weight: 700;
  margin-bottom: 4px;
}
.rh-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .rh-title { color: #e2e8f0; }
.rh-body {
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-muted);
}

/* --- DEPARTMENT BLOCKS --- */
.team-departments {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-top: 24px;
}
.team-dept-block {
  position: relative;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15,23,42,.04);
}
.team-dept-block::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--dept-accent, var(--brand-500));
}

/* Department-level header */
.team-dept-header {
  display: grid;
  grid-template-columns: 56px 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(90deg, var(--dept-soft, rgba(44,120,115,0.08)), transparent 80%);
  border-bottom: 1px solid var(--border);
}
.tdh-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 26px;
  background: var(--dept-soft, var(--brand-50));
  color: var(--dept-accent);
  flex-shrink: 0;
}
.tdh-meta { min-width: 0; }
.tdh-name {
  font-weight: 800;
  font-size: 18px;
  color: var(--text-strong, #0f172a);
  margin-bottom: 4px;
}
[data-theme="dark"] .tdh-name { color: #e2e8f0; }
.tdh-mission {
  font-size: 12px;
  color: var(--text-muted);
}
.tdh-stats {
  display: flex;
  gap: 16px;
  padding-inline: 12px;
  border-inline-start: 1px dashed var(--border);
  border-inline-end: 1px dashed var(--border);
}
.tdh-stat { text-align: center; min-width: 60px; }
.tdh-stat-v {
  font-size: 18px;
  font-weight: 800;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .tdh-stat-v { color: #e2e8f0; }
.tdh-stat-v.score-tone-green { color: var(--green-500); }
.tdh-stat-v.score-tone-amber { color: var(--amber-500); }
.tdh-stat-v.score-tone-red   { color: var(--red-500); }
.tdh-stat-v.tone-green { color: var(--green-500); }
.tdh-stat-v.tone-muted { color: var(--text-muted); }
.tdh-stat-k {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 3px;
}
.tdh-actions-summary {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  max-width: 200px;
  justify-content: flex-end;
}
.tdh-action-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid transparent;
}
.tdh-action-green  { background: rgba(16,185,129,0.12);  color: #0f8a5a; border-color: rgba(16,185,129,0.25); }
.tdh-action-blue   { background: rgba(30,109,255,0.12);  color: #1e6dff; border-color: rgba(30,109,255,0.25); }
.tdh-action-purple { background: rgba(139,92,246,0.12);  color: #6d50d4; border-color: rgba(139,92,246,0.25); }
.tdh-action-amber  { background: rgba(245,158,11,0.14);  color: #c46920; border-color: rgba(245,158,11,0.3); }
.tdh-action-lemon  { background: rgba(212,160,23,0.14);  color: #a37919; border-color: rgba(212,160,23,0.3); }
.tdh-action-red    { background: rgba(239,68,68,0.12);   color: #b14458; border-color: rgba(239,68,68,0.3); }

@media (max-width: 920px) {
  .team-dept-header {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tdh-stats {
    border: 0;
    padding: 0;
    justify-content: space-between;
  }
  .tdh-actions-summary {
    max-width: none;
    justify-content: flex-start;
  }
}

/* Department body (members grid inside dept block) */
.team-dept-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 18px 24px 22px;
  background: var(--surface);
}
@media (max-width: 1240px) { .team-dept-body { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .team-dept-body { grid-template-columns: 1fr; padding: 14px; } }

/* --- MEMBER CARD --- */
.team-member-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.team-member-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
  border-color: var(--tm-stripe-c, var(--dept-accent));
}
.tm-tone-green { --tm-stripe-c: var(--green-500); }
.tm-tone-blue  { --tm-stripe-c: var(--brand-500); }
.tm-tone-amber { --tm-stripe-c: var(--amber-500); }
.tm-tone-red   { --tm-stripe-c: var(--red-500); }
.tm-stripe {
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tm-stripe-c, var(--brand-500));
}
.tm-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
}
.tm-avatar {
  width: 44px; height: 44px;
  font-size: 12px;
}
.tm-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .tm-name { color: #e2e8f0; }
.tm-role {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.tm-tenure {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: .8;
}
.tm-score { text-align: center; padding-inline-start: 6px; }
.tm-score-v {
  font-size: 22px;
  font-weight: 800;
  color: var(--tm-stripe-c, var(--brand-500));
  line-height: 1;
}
.tm-score-k {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}
.tm-meta {
  font-size: 11.5px;
  line-height: 1.6;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 8px;
}
.tm-kpis { display: flex; flex-direction: column; gap: 5px; }
.tm-kpi-row {
  display: grid;
  grid-template-columns: 90px 1fr 28px;
  gap: 8px;
  align-items: center;
  font-size: 11px;
}
.tm-kpi-k { color: var(--text-muted); }
.tm-kpi-bar {
  background: var(--surface-2);
  height: 7px;
  border-radius: 4px;
  overflow: hidden;
}
.tm-kpi-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tm-stripe-c, var(--brand-500)), var(--accent-500));
  border-radius: 4px;
  transition: width .6s cubic-bezier(.22,.7,.16,1);
}
.tm-kpi-v {
  font-weight: 700;
  font-size: 11px;
  text-align: end;
}
.tm-note {
  font-size: 11px;
  padding: 6px 10px;
  background: rgba(245,158,11,0.08);
  color: var(--amber-500);
  border-inline-start: 3px solid var(--amber-500);
  border-radius: 6px;
  line-height: 1.6;
}

/* Diaco AI suggestion block inside member card */
.tm-rahin {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px dashed var(--diaco-c, var(--brand-500));
  background: var(--diaco-bg, rgba(44,120,115,0.06));
  font-size: 11.5px;
  line-height: 1.65;
}
.diaco-green  { --diaco-c: #10b981; --diaco-bg: rgba(16,185,129,0.07); }
.diaco-blue   { --diaco-c: #1e6dff; --diaco-bg: rgba(30,109,255,0.06); }
.diaco-purple { --diaco-c: #8b5cf6; --diaco-bg: rgba(139,92,246,0.07); }
.diaco-amber  { --diaco-c: #f59e0b; --diaco-bg: rgba(245,158,11,0.08); }
.diaco-lemon  { --diaco-c: #d4a017; --diaco-bg: rgba(212,160,23,0.08); }
.diaco-red    { --diaco-c: #ef4444; --diaco-bg: rgba(239,68,68,0.07); }

.tm-diaco-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.tm-rahin .diaco-spark { color: var(--diaco-c); }
.tm-diaco-pill {
  font-weight: 800;
  font-size: 11.5px;
  color: var(--diaco-c);
  padding: 3px 9px;
  background: var(--diaco-bg);
  border-radius: 999px;
  border: 1px solid var(--diaco-c);
}
.tm-diaco-reason { color: var(--text); margin-bottom: 4px; }
.tm-diaco-idea {
  color: var(--text);
  padding-top: 4px;
  border-top: 1px dotted color-mix(in srgb, var(--diaco-c) 40%, transparent);
}
.tm-rahin strong { color: var(--diaco-c); font-weight: 700; }

/* =========================================================
   WORKSPACE — Advisor Desk
   namespace: ws-*  (Pipeline + Tasks + Inbox + Kanban + Table)
   ========================================================= */

/* ---------- Toolbar (filters above KPI) ---------- */
.ws-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.ws-viewas, .ws-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ws-toolbar-label {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.ws-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px 8px 30px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(8px) calc(50% - 2px), calc(13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.ws-select:hover  { border-color: var(--border-strong); }
.ws-select:focus  { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(44,120,115,.18); }
.ws-add-lead { margin-inline-start: 4px; }

/* ---------- Split: Inbox + Tasks ---------- */
.ws-split {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  margin-top: 20px;
}
@media (max-width: 1100px) { .ws-split { grid-template-columns: 1fr; } }

/* [crm-l1-menu-p1] Founder feedback on #crm-reports — "ظاهر باکس قیف به
   کناریشِ که خالیه نمیخوره": the funnel's stacked colored bars are much
   taller than the RFM donut, and grid stretch gives both cards equal
   height, so the shorter donut sat pinned to the top with a large blank
   gap below it. Centering each card's body in the available height (same
   .crp-funnel-body wrapper on both sides) uses that space instead of
   leaving it empty, so the two cards read as one balanced row. */
.crp-page{display:grid;gap:var(--space-macro,24px)}
.crp-page>.page-head{margin:0;padding-block:4px}
.crp-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-xs)}
.crp-filter-group{display:grid;gap:7px}.crp-filter-label{font-size:11px;font-weight:700;color:var(--text-muted)}
.crp-toolbar .filters{margin:0;gap:8px}.crp-toolbar .chip-btn{min-height:36px;padding-inline:14px}
.crp-page>[data-crp-kpis] .kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.crp-page>[data-crp-kpis] .kpi{--crp-kpi-tone:var(--brand-500);min-height:134px;padding:16px;border-color:transparent;border-radius:calc(var(--radius) + 2px);box-shadow:0 10px 28px -18px color-mix(in srgb,var(--crp-kpi-tone) 72%,transparent),0 2px 8px -6px color-mix(in srgb,var(--crp-kpi-tone) 44%,transparent);isolation:isolate;animation:crp-kpi-enter .56s cubic-bezier(.2,.75,.25,1) both}
.crp-page>[data-crp-kpis] .kpi:nth-child(2){animation-delay:55ms}.crp-page>[data-crp-kpis] .kpi:nth-child(3){animation-delay:110ms}.crp-page>[data-crp-kpis] .kpi:nth-child(4){animation-delay:165ms}.crp-page>[data-crp-kpis] .kpi:nth-child(5){animation-delay:220ms}.crp-page>[data-crp-kpis] .kpi:nth-child(6){animation-delay:275ms}
.crp-page>[data-crp-kpis] .kpi.blue{--crp-kpi-tone:#3b5998}.crp-page>[data-crp-kpis] .kpi.green{--crp-kpi-tone:#0f766e}.crp-page>[data-crp-kpis] .kpi.amber{--crp-kpi-tone:#c46920}.crp-page>[data-crp-kpis] .kpi.purple{--crp-kpi-tone:#6d50d4}.crp-page>[data-crp-kpis] .kpi.red{--crp-kpi-tone:#b14458}
.crp-page>[data-crp-kpis] .kpi:hover{transform:translateY(-6px) scale(1.012);border-color:transparent;box-shadow:0 22px 42px -22px color-mix(in srgb,var(--crp-kpi-tone) 82%,transparent),0 8px 18px -12px color-mix(in srgb,var(--crp-kpi-tone) 58%,transparent)}
.crp-page>[data-crp-kpis] .kpi-icon{width:40px;height:40px;margin-block-end:12px;border-radius:13px}
.crp-page>[data-crp-kpis] .kpi-icon [data-ds-icon-tone]{color:var(--crp-kpi-tone)}
.crp-page>[data-crp-kpis] .kpi-label{min-height:32px;font-size:12px;font-weight:650;line-height:1.55;color:var(--text-muted)}
.crp-page>[data-crp-kpis] .kpi-value{margin:2px 0 0;font-size:clamp(15px,1.22vw,20px);line-height:1.45;white-space:normal}
@keyframes crp-kpi-enter{from{opacity:0;transform:translateY(16px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
.crp-page>.card,.crp-page>.ws-split>.card{margin:0;border-color:color-mix(in srgb,var(--border) 88%,var(--brand-500));box-shadow:var(--shadow-xs)}
.crp-page .card-head{padding-block-end:14px;margin-block-end:16px;border-block-end:1px solid var(--border)}
.crp-funnel-split{align-items:start;margin:0;grid-template-columns:minmax(0,1.65fr) minmax(300px,.75fr)}
.crp-funnel-split:has(>[data-section="segments"][hidden])>[data-section="funnel"]{grid-column:1/-1}
.crp-funnel-split .card { display: flex; flex-direction: column; min-height:0; }
.crp-funnel-split .crp-funnel-body { display: flex; flex-direction: column; justify-content: flex-start; min-height:280px; }
.crp-funnel-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block-end:18px}
.crp-funnel-summary>div{display:grid;grid-template-columns:38px minmax(0,1fr) auto;grid-template-rows:auto auto;align-items:center;column-gap:10px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand-500) 10%,var(--border));border-radius:14px;background:color-mix(in srgb,var(--pastel-mint) 18%,var(--surface));box-shadow:var(--shadow-xs)}
.crp-funnel-summary [data-ds-icon]{grid-row:1/3;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,currentColor 13%,var(--surface))}.crp-funnel-summary .ds-ico{width:20px;height:20px}
.crp-funnel-summary small{font-size:11px;color:var(--text-muted)}.crp-funnel-summary b{grid-column:2/4;font-size:16px;color:var(--text);line-height:1.5}
.crp-funnel-dashboard{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(270px,.65fr);gap:18px;align-items:start}
.crp-funnel-stages,.crp-funnel-insights{min-width:0;border:1px solid color-mix(in srgb,var(--brand-500) 12%,var(--border));border-radius:16px;background:var(--surface)}
.crp-funnel-stages{display:grid;gap:10px;padding:16px}
.crp-funnel-subhead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-end:2px}.crp-funnel-subhead strong{font-size:13px;color:var(--text)}.crp-funnel-subhead>span{font-size:10.5px;font-weight:750;color:var(--brand-700);padding:3px 8px;border-radius:999px;background:var(--green-50)}
.crp-funnel-stage{--tc:var(--brand-500);display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:11px;padding:11px 12px;border:1px solid color-mix(in srgb,var(--tc) 18%,var(--border));border-radius:13px;background:color-mix(in srgb,var(--tc) 5%,var(--surface));transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;animation:crp-stage-enter .45s cubic-bezier(.2,.75,.25,1) both}
.crp-funnel-stage:hover{transform:translateX(-3px);border-color:color-mix(in srgb,var(--tc) 36%,var(--border));box-shadow:0 12px 24px -20px var(--tc)}
.crp-funnel-stage.tone-sky,.crp-funnel-stage.tone-blue{--tc:#3b5998}.crp-funnel-stage.tone-lilac{--tc:#6d50d4}.crp-funnel-stage.tone-amber{--tc:#c46920}.crp-funnel-stage.tone-green,.crp-funnel-stage.tone-mint{--tc:#0f766e}.crp-funnel-stage.tone-rose{--tc:#b14458}
.crp-funnel-stage__index{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:color-mix(in srgb,var(--tc) 14%,var(--surface));color:var(--tc);font-size:12px;font-weight:850}.crp-funnel-stage__copy{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px 12px}.crp-funnel-stage__copy strong{font-size:13px;color:var(--text);overflow-wrap:anywhere}.crp-funnel-stage__copy>span{font-size:11.5px;color:var(--text-muted);white-space:nowrap}.crp-funnel-stage__track{grid-column:1/-1;height:7px;border-radius:999px;background:color-mix(in srgb,var(--tc) 10%,var(--surface-2));overflow:hidden}.crp-funnel-stage__track i{display:block;width:var(--crp-stage-width);height:100%;border-radius:inherit;background:linear-gradient(90deg,color-mix(in srgb,var(--tc) 68%,#fff),var(--tc));animation:crp-track-grow .72s cubic-bezier(.2,.75,.25,1) both;transform-origin:right}
.crp-funnel-no-active{display:flex;align-items:center;gap:10px;padding:14px;border-radius:13px;background:var(--surface-2);color:var(--text-muted)}.crp-funnel-no-active>span{width:34px;height:34px;display:grid;place-items:center}.crp-funnel-no-active>div{display:grid;gap:3px}.crp-funnel-no-active strong{font-size:12.5px;color:var(--text)}.crp-funnel-no-active span{font-size:11px}
.crp-funnel-inactive{display:grid;gap:9px;margin-block-start:5px;padding-block-start:13px;border-block-start:1px dashed var(--border)}.crp-funnel-inactive__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.crp-funnel-inactive__grid>span{display:flex;align-items:center;gap:7px;min-width:0;padding:7px 9px;border-radius:10px;background:var(--surface-2);color:var(--text-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.crp-funnel-inactive__grid b{display:grid;place-items:center;min-width:22px;height:22px;border-radius:7px;background:var(--surface);color:var(--brand-700);font-size:10px}
.crp-funnel-insights{display:grid;align-content:start;gap:10px;padding:16px;background:linear-gradient(145deg,color-mix(in srgb,var(--pastel-mint) 42%,var(--surface)),var(--surface) 70%)}.crp-funnel-insights__head{display:flex;align-items:center;gap:10px;padding-block-end:12px;border-block-end:1px solid color-mix(in srgb,var(--brand-500) 14%,var(--border))}.crp-funnel-insights__head>span{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:var(--pastel-mint)}.crp-funnel-insights__head>div{display:grid;gap:2px}.crp-funnel-insights__head strong{font-size:13px;color:var(--text)}.crp-funnel-insights__head small{font-size:10.5px;color:var(--text-muted)}
.crp-funnel-insight{display:grid;gap:4px;padding:11px 12px;border-radius:12px;background:var(--surface);box-shadow:var(--shadow-xs)}.crp-funnel-insight small{font-size:10.5px;color:var(--text-muted)}.crp-funnel-insight strong{font-size:12px;color:var(--text);overflow-wrap:anywhere}.crp-funnel-insight b{font-size:12px}.crp-funnel-insight.is-positive b{color:var(--success-600,#16805d)}.crp-funnel-insight.is-risk b{color:var(--danger-600,#c2405a)}
.crp-funnel-insight-note{display:flex;align-items:flex-start;gap:8px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--pastel-sky) 28%,var(--surface));font-size:11px;color:var(--text-muted);line-height:1.7}.crp-funnel-insight-note>span{flex:0 0 auto;margin-block-start:2px}.crp-funnel-insight-note p{margin:0}.crp-funnel-insights__help{margin:2px 0 0;font-size:10.5px;line-height:1.8;color:var(--text-muted)}
@keyframes crp-stage-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes crp-track-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.crp-page>[data-section="channels"] [data-crp-channels]{min-height:240px}
.crp-page>.ws-split:not(.crp-funnel-split){margin:0;align-items:start}
.crp-page>[data-section="activity-performance"] [data-crp-activity-kpis] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-block-end:18px}
.crp-page>[data-section="activity-performance"] [data-crp-activity-types]{max-height:560px;overflow:auto;padding-inline-end:6px}
@media(max-width:1100px){.crp-page>[data-crp-kpis] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.crp-funnel-split{grid-template-columns:minmax(0,1fr)}.crp-page>[data-section="activity-performance"] [data-crp-activity-kpis] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.crp-funnel-dashboard{grid-template-columns:minmax(0,1fr)}.crp-toolbar{align-items:stretch}.crp-filter-group{width:100%}.crp-funnel-inactive__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.crp-page>[data-crp-kpis] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crp-page>[data-crp-kpis] .kpi{min-height:126px;padding:13px}.crp-page>[data-crp-kpis] .kpi-icon{width:36px;height:36px;margin-block-end:8px}.crp-page>[data-section="activity-performance"] [data-crp-activity-kpis] .kpi-grid{grid-template-columns:1fr}.crp-toolbar .filters{overflow:auto;flex-wrap:nowrap}.crp-toolbar .chip-btn{white-space:nowrap}}
@media(max-width:600px){.crp-funnel-summary{grid-template-columns:1fr}.crp-funnel-inactive__grid{grid-template-columns:1fr}.crp-funnel-stage__copy{grid-template-columns:1fr}.crp-funnel-stage__copy>span{white-space:normal}.crp-funnel-summary>div{grid-template-columns:38px minmax(0,1fr)}}
@media(max-width:420px){.crp-page>[data-crp-kpis] .kpi-grid{grid-template-columns:1fr}.crp-page>[data-crp-kpis] .kpi-label{min-height:0}}
@media(prefers-reduced-motion:reduce){.crp-page>[data-crp-kpis] .kpi,.crp-funnel-stage,.crp-funnel-stage__track i{animation:none}.crp-page>[data-crp-kpis] .kpi,.crp-funnel-stage{transition:none}}

.ws-inbox-card, .ws-tasks-card { padding: 18px 18px 14px; }
.ws-inbox-list, .ws-tasks-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 360px;
  overflow-y: auto;
  margin: -4px -4px 0;
  padding: 4px;
}
.ws-inbox-list::-webkit-scrollbar,
.ws-tasks-list::-webkit-scrollbar { width: 6px; }
.ws-inbox-list::-webkit-scrollbar-thumb,
.ws-tasks-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

/* Inbox items */
.ws-inbox-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-inline-start: 3px solid var(--tone-c, var(--brand-500));
  transition: background .15s, transform .15s;
}
.ws-inbox-item:hover {
  background: color-mix(in srgb, var(--tone-c, var(--brand-500)) 6%, var(--surface));
  transform: translateX(2px);
}
.ws-inbox-icon {
  font-size: 18px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--tone-c) 14%, var(--surface));
  border-radius: 10px;
}
.ws-inbox-body { min-width: 0; }
.ws-inbox-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 2px;
  color: var(--text);
}
.ws-inbox-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.ws-inbox-go {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 28px; height: 28px;
  font-size: 16px;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .15s;
}
.ws-inbox-go:hover {
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
}
.ws-tone-red    { --tone-c: #ef4444; }
.ws-tone-amber  { --tone-c: #f59e0b; }
.ws-tone-sky    { --tone-c: #0ea5e9; }
.ws-tone-purple { --tone-c: #8b5cf6; }
.ws-tone-green  { --tone-c: #10b981; }

/* Tasks Today */
.ws-tasks-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-task-item {
  display: grid;
  grid-template-columns: 22px 50px 28px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background .15s, opacity .15s;
}
.ws-task-item.is-done {
  opacity: 0.55;
  background: var(--surface);
}
.ws-task-item.is-done .ws-task-who,
.ws-task-item.is-done .ws-task-note { text-decoration: line-through; }
.ws-task-check {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  transition: all .15s;
  position: relative;
}
.ws-task-check:checked {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.ws-task-check:checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.ws-task-time {
  font-family: 'Vazirmatn', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-600);
}
.ws-task-channel {
  font-size: 18px;
  text-align: center;
}
.ws-task-body { min-width: 0; }
.ws-task-who {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
}
.ws-task-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.ws-task-advisor {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac, var(--brand-500)) 18%, var(--surface));
  color: var(--ac, var(--brand-500));
  border: 2px solid var(--ac, var(--brand-500));
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Pipeline Card + Tabs ---------- */
.ws-pipeline-card { margin-top: 20px; padding: 18px; }
.ws-tabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: 12px; }
.ws-tab {
  padding: 7px 18px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.ws-tab:hover { color: var(--text); }
.ws-tab.active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}
.ws-tab-panel { display: none; }
.ws-tab-panel.active { display: block; animation: wsFade .25s ease-out; }
@keyframes wsFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================
   Workspace Kanban — Pipeline Health + Stepper + Density-aware
   ========================================================== */

/* ----- Pipeline Health Bar (stacked horizontal funnel) ----- */
.ws-kb-health {
  display: flex;
  height: 10px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 14px;
  position: relative;
}
.ws-kb-health-seg {
  height: 100%;
  background: var(--seg-c, var(--brand-500));
  position: relative;
  cursor: pointer;
  min-width: 2px;
  transition: filter .2s, transform .2s;
}
.ws-kb-health-seg:hover { filter: brightness(1.12) saturate(1.1); }
.ws-kb-health-seg + .ws-kb-health-seg { box-shadow: inset 1px 0 0 var(--surface); }
.ws-kb-health-tt {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--text);
  color: var(--surface);
  padding: 5px 10px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s, bottom .15s;
  z-index: 6;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}
.ws-kb-health-tt::after {
  content: '';
  position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--text);
}
.ws-kb-health-seg:hover .ws-kb-health-tt { opacity: 1; bottom: calc(100% + 10px); }

/* ----- Stage Stepper (clickable chips above kanban) ----- */
.ws-kb-stepper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
.ws-kb-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 6px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s, background .18s;
  position: relative;
  overflow: hidden;
  font-family: inherit;
}
.ws-kb-step::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--step-c, var(--brand-500));
  opacity: .25;
  transition: opacity .18s, height .18s;
}
.ws-kb-step:hover {
  border-color: var(--step-c, var(--brand-500));
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--step-c, var(--brand-500)) 14%, transparent);
}
.ws-kb-step:hover::before { opacity: .55; height: 4px; }
.ws-kb-step.is-active {
  background: color-mix(in srgb, var(--step-c, var(--brand-500)) 7%, var(--surface));
  border-color: var(--step-c, var(--brand-500));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--step-c, var(--brand-500)) 22%, transparent);
}
.ws-kb-step.is-active::before { opacity: 1; height: 4px; }
.ws-kb-step-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--step-c, var(--brand-500));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--step-c, var(--brand-500)) 14%, var(--surface));
  flex-shrink: 0;
}
.ws-kb-step-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.25;
  letter-spacing: -.15px;
  white-space: nowrap;
}
.ws-kb-step-count {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--step-c, var(--brand-500));
  background: color-mix(in srgb, var(--step-c, var(--brand-500)) 12%, var(--surface));
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.ws-kb-step.is-zero { opacity: .55; }
.ws-kb-step.is-zero .ws-kb-step-count { background: var(--surface-2); color: var(--text-muted); }

/* ----- Density grid ----- */
/* Container: horizontal scroll only; no scroll-snap (RTL anomalies) */
.ws-kanban {
  display: grid;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 4px 4px 14px;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
}
/* 7 active pipeline stages (won is archived separately) */
.ws-kanban[data-density="comfort"] { grid-template-columns: repeat(7, 400px); }
.ws-kanban[data-density="cozy"]    { grid-template-columns: repeat(7, 340px); }
.ws-kanban[data-density="compact"] { grid-template-columns: repeat(7, 260px); }
.ws-kanban.is-fit                  { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; overflow-x: hidden; }
.ws-kanban::-webkit-scrollbar { height: 9px; }
.ws-kanban::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }
.ws-kanban::-webkit-scrollbar-track { background: var(--surface-2); border-radius: 99px; }

/* [crm-l1-menu-p1] rich-live-workspace.js — card CONTENT only (the board
   chrome itself comes from DsKanban's own `.ds-pattern-kanban*` classes,
   design-system/assets/css/ds-patterns.css, once DsKanban.mount() takes
   over [data-ws-kanban]'s className). */
.ws2-card-title { font-size: 12.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-card-meta { font-size: 11.5px; color: var(--text-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws2-card-actions { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.ws2-kanban-loading, .ws2-kanban-error { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.ws2-kanban-error-msg { margin-bottom: 10px; }
.ws2-offline-banner { display: flex; align-items: center; gap: .5rem; padding: 8px 14px; background: var(--amber-50, #fffbeb); border: 1px solid var(--amber-200, #fde68a); border-radius: 8px; font-size: 12.5px; color: var(--amber-800, #92400e); margin-bottom: 10px; }

/* [crm-l1-menu-p1] Phase 3 — "ارتباطات"/"وظیفه‌ها" read-heavy overlays, built
   on rich-live-crud.js's shared `.rlx-backdrop`/`.rlx-modal` chrome (see
   openOverlay() in rich-live-workspace.js) — only the BODY content below is
   page-specific. */
.ws2-overlay-modal { width: min(560px, 94vw); }
.ws2-overlay-empty { color: var(--text-muted); font-size: 13px; padding: 12px 0; text-align: center; }
.ws2-overlay-note { font-size: 11.5px; color: var(--text-muted); margin-top: 10px; }
.ws2-overlay-section-title { font-size: 12.5px; font-weight: 700; margin: 14px 0 8px; }
.ws2-timeline-list, .ws2-task-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 42vh; overflow: auto; }
.ws2-timeline-item, .ws2-task-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.ws2-timeline-item-head, .ws2-task-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.ws2-timeline-kind { font-weight: 700; }
.ws2-timeline-item-body, .ws2-task-item-meta { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.ws2-task-state-badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); }
.ws2-task-state-done .ws2-task-state-badge { color: var(--green-600, #1f9e5a); }
.ws2-task-add-form { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 10px; }

/* [crm-l1-menu-p1] Phase 4 — Smart Inbox ("unread" list only, [data-ws-inbox]). */
.ws2-inbox-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.ws2-inbox-item-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 11px; color: var(--text-muted); }
.ws2-inbox-channel { font-weight: 700; }

/* [crm-l1-menu-p1] Phase 4 — Sequences (templates library + active runs +
   per-lead start/pause/resume/stop overlay). */
.ws2-seq-tpl { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ws2-seq-run { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.ws2-seq-tpl-start { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.ws2-seq-tpl-start:last-child { border-bottom: none; }

.ws-kb-col {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 68vh;
  position: relative;
  transition: background .2s, border-color .2s, box-shadow .2s;
  min-width: 0;
}
.ws-kb-col.is-drop {
  background: color-mix(in srgb, var(--stage-c, var(--brand-500)) 10%, var(--surface));
  border-color: var(--stage-c, var(--brand-500));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-c, var(--brand-500)) 22%, transparent);
}
.ws-kb-col.is-flash { animation: wsKbFlash .9s ease-out; }
@keyframes wsKbFlash {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage-c, var(--brand-500)) 50%, transparent); }
  60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--stage-c, var(--brand-500)) 0%, transparent); }
  100% { box-shadow: none; }
}
.ws-kb-head {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--stage-c, var(--brand-500)) 30%, var(--border));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--stage-c, var(--brand-500)) 10%, transparent), transparent),
    color-mix(in srgb, var(--surface) 92%, var(--stage-c, var(--brand-500)) 4%);
  border-radius: 14px 14px 0 0;
  position: sticky; top: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}
.ws-kb-head-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--stage-c, var(--brand-500));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-c, var(--brand-500)) 18%, transparent);
}
.ws-kb-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-kb-count {
  background: var(--stage-c, var(--brand-500));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 9px;
  border-radius: 99px;
  min-width: 24px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
.ws-kb-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}
.ws-kb-body::-webkit-scrollbar { width: 5px; }
.ws-kb-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

/* ----- Lead card (modern, 3-row with right-side stage strip) ----- */
.ws-lead {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  cursor: grab;
  transition: transform .16s, box-shadow .16s, border-color .16s;
  position: relative;
  overflow: hidden;
  /* CRITICAL: never shrink inside a flex column (was clipping rows 2 & 3) */
  flex-shrink: 0;
}
/* Each row must hold its full height even when sibling rows could push it */
.ws-lead-top,
.ws-lead-meta,
.ws-lead-bottom { flex-shrink: 0; }
.ws-lead-meta { min-height: 22px; }
.ws-lead-bottom { min-height: 26px; }
/* Right-side colored strip = stage indicator (RTL geometric per RTL canvas gotcha) */
.ws-lead::after {
  content: '';
  position: absolute;
  top: 9px; bottom: 9px;
  right: 0;
  width: 3px;
  background: var(--stage-c, var(--brand-500));
  border-radius: 99px 0 0 99px;
  opacity: .85;
}
.ws-lead:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--stage-c, var(--brand-500)) 16%, transparent);
  border-color: color-mix(in srgb, var(--stage-c, var(--brand-500)) 35%, var(--border));
}
.ws-lead:hover::after { opacity: 1; width: 4px; }
.ws-lead:active { cursor: grabbing; }
.ws-lead.is-dragging { opacity: .4; transform: rotate(2deg); }
.ws-lead.is-stale { border-color: #fcd9d9; }
.ws-lead.is-bounced { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.10) inset; }
.ws-lead.is-bounced::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 18px; height: 18px;
  background: #ef4444;
  clip-path: polygon(0 0, 100% 0, 0 100%);
  border-radius: 9px 0 0 0;
}
/* Top row: avatar + name + score — name has min-width:0 for proper ellipsis */
.ws-lead-top {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ws-lead-source {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  /* If element also has .src-brand, the brand color background applies via --brand */
  background: var(--brand, color-mix(in srgb, var(--sc) 14%, var(--surface)));
  border: 0;
  color: #fff;
  flex-shrink: 0;
  padding: 5px;
}
.ws-lead-source svg { width: 100%; height: 100%; }
.ws-chip-src .src-brand,
.ws-dr-chip .src-brand,
.ws-arc-chip .src-brand { margin-inline-end: 2px; }
.ws-chip-src, .ws-dr-chip, .ws-arc-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ws-arc-avatar { color: #fff; padding: 6px; }
.ws-arc-avatar svg { width: 100%; height: 100%; }
/* Universal source-icon glyph styling (SVG inside source chips/badges everywhere) */
.src-glyph-text {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  font-weight: 800;
  font-size: 0.78em;
  letter-spacing: -0.5px;
  color: currentColor;
}
.ws-chip-src svg, .ws-dr-chip svg, .ws-arc-chip svg, .ws-arc-avatar svg, .src-badge svg {
  width: 14px; height: 14px;
  vertical-align: -2px;
  display: inline-block;
}
.ws-arc-avatar svg { width: 60%; height: 60%; vertical-align: 0; }
/* Standalone source badge — usable anywhere (drawer hero, leads list, archive) */
.src-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--sc, #94a3b8) 14%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--sc, #94a3b8) 30%, transparent);
  color: var(--sc, #94a3b8);
  flex-shrink: 0;
}
.src-badge svg { width: 60%; height: 60%; display: block; }
.src-badge .src-glyph-text { font-size: 11px; line-height: 1; }
.src-badge-sm { width: 18px; height: 18px; border-radius: 5px; }
.src-badge-lg { width: 28px; height: 28px; border-radius: 8px; }
/* Inside ws-chip-src/ws-dr-chip etc., the chip uses --sc; set color so SVG inherits */
.ws-chip-src, .ws-dr-chip, .ws-arc-chip { color: var(--sc, var(--c, #94a3b8)); }
.ws-lead-name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  letter-spacing: -.1px;
  min-width: 0;
}
.ws-lead-score {
  font-weight: 800;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 99px;
  min-width: 32px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
  flex-shrink: 0;
}
.ws-lead-score[data-score="hot"]  { background: rgba(16,185,129,.14); color: #059669; box-shadow: inset 0 0 0 1px rgba(16,185,129,.22); }
.ws-lead-score[data-score="warm"] { background: rgba(245,158,11,.14); color: #b45309; box-shadow: inset 0 0 0 1px rgba(245,158,11,.22); }
.ws-lead-score[data-score="cold"] { background: rgba(148,163,184,.18); color: #475569; box-shadow: inset 0 0 0 1px rgba(148,163,184,.22); }

/* Middle row: course chip (flex) + followup chip (auto) — never wraps */
.ws-lead-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
  min-width: 0;
}
.ws-lead-course {
  background: var(--surface-2);
  padding: 4px 9px;
  border-radius: 7px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.4;
}
.ws-lead-course::before { content: '📚'; font-size: 10.5px; opacity: .85; flex-shrink: 0; }
.ws-lead-course-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ws-lead-followup {
  background: var(--surface-2);
  padding: 4px 9px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.ws-lead-followup::before { content: '↻'; font-size: 11px; opacity: .8; }

/* Bottom row: advisor + time + alerts — time has min-width:0 ellipsis */
.ws-lead-bottom {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  min-width: 0;
}
.ws-lead-advisor {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac, var(--brand-500)) 18%, var(--surface));
  color: var(--ac, var(--brand-500));
  border: 1.5px solid var(--ac, var(--brand-500));
  font-size: 9.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -.2px;
  flex-shrink: 0;
}
.ws-lead-touch {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-lead-touch::before { content: '🕒'; font-size: 10px; opacity: .75; flex-shrink: 0; }
.ws-lead-alerts {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
}
.ws-lead-alert {
  font-size: 13px;
  filter: saturate(1.15);
  line-height: 1;
}
.ws-lead-alert-red { color: #ef4444; }

/* ---- Compact density: shrink but keep all 3 rows visible ---- */
.ws-kanban[data-density="compact"] .ws-lead {
  padding: 9px 11px 9px 10px;
  gap: 7px;
  border-radius: 10px;
}
.ws-kanban[data-density="compact"] .ws-lead-name { font-size: 12.5px; }
.ws-kanban[data-density="compact"] .ws-lead-source { width: 26px; height: 26px; font-size: 12px; border-radius: 7px; }
.ws-kanban[data-density="compact"] .ws-lead-top { gap: 8px; grid-template-columns: 26px minmax(0, 1fr) auto; }
.ws-kanban[data-density="compact"] .ws-lead-score { font-size: 10.5px; padding: 2px 8px; min-width: 28px; }
.ws-kanban[data-density="compact"] .ws-lead-meta { font-size: 10px; gap: 5px; min-height: 20px; }
.ws-kanban[data-density="compact"] .ws-lead-course { padding: 3px 7px; border-radius: 6px; }
.ws-kanban[data-density="compact"] .ws-lead-followup { padding: 3px 7px; border-radius: 6px; }
.ws-kanban[data-density="compact"] .ws-lead-course::before,
.ws-kanban[data-density="compact"] .ws-lead-followup::before,
.ws-kanban[data-density="compact"] .ws-lead-touch::before { display: none; }
.ws-kanban[data-density="compact"] .ws-lead-bottom { padding-top: 6px; gap: 6px; min-height: 24px; grid-template-columns: 22px minmax(0, 1fr) auto; }
.ws-kanban[data-density="compact"] .ws-lead-touch { font-size: 10.5px; }
.ws-kanban[data-density="compact"] .ws-lead-advisor { width: 22px; height: 22px; }
.ws-kanban[data-density="compact"] .ws-lead-alert { font-size: 11.5px; }

/* ---- Comfort density: slightly larger card with more breathing room ---- */
.ws-kanban[data-density="comfort"] .ws-lead {
  padding: 13px 16px 13px 14px;
  gap: 11px;
}
.ws-kanban[data-density="comfort"] .ws-lead-name { font-size: 14.5px; }
.ws-kanban[data-density="comfort"] .ws-lead-source { width: 32px; height: 32px; font-size: 14.5px; }
.ws-kanban[data-density="comfort"] .ws-lead-top { gap: 10px; grid-template-columns: 32px minmax(0, 1fr) auto; }
.ws-kanban[data-density="comfort"] .ws-lead-score { font-size: 12px; padding: 3px 11px; min-width: 34px; }
.ws-kanban[data-density="comfort"] .ws-lead-meta { font-size: 11.5px; }
.ws-kanban[data-density="comfort"] .ws-lead-course { padding: 5px 10px; }
.ws-kanban[data-density="comfort"] .ws-lead-followup { padding: 5px 10px; }
.ws-kanban[data-density="comfort"] .ws-lead-bottom { padding-top: 10px; }
.ws-kanban[data-density="comfort"] .ws-lead-advisor { width: 26px; height: 26px; font-size: 10px; }
.ws-kanban[data-density="comfort"] .ws-lead-touch { font-size: 11.5px; }

/* ---- Fit mode (8 cols squeezed): same as compact but tighter ---- */
.ws-kanban.is-fit .ws-lead {
  padding: 7px 8px 7px 7px;
  gap: 4px;
  border-radius: 8px;
}
.ws-kanban.is-fit .ws-lead-name { font-size: 11px; }
.ws-kanban.is-fit .ws-lead-source { width: 20px; height: 20px; font-size: 10.5px; border-radius: 6px; }
.ws-kanban.is-fit .ws-lead-top { gap: 5px; grid-template-columns: 20px minmax(0, 1fr) auto; }
.ws-kanban.is-fit .ws-lead-score { font-size: 9.5px; padding: 1px 6px; min-width: 22px; }
.ws-kanban.is-fit .ws-lead-meta { font-size: 9px; gap: 3px; }
.ws-kanban.is-fit .ws-lead-course { padding: 1px 5px; }
.ws-kanban.is-fit .ws-lead-followup { padding: 1px 5px; }
.ws-kanban.is-fit .ws-lead-course::before,
.ws-kanban.is-fit .ws-lead-followup::before,
.ws-kanban.is-fit .ws-lead-touch::before { display: none; }
.ws-kanban.is-fit .ws-lead-bottom { padding-top: 4px; gap: 4px; grid-template-columns: 18px minmax(0, 1fr) auto; }
.ws-kanban.is-fit .ws-lead-advisor { width: 18px; height: 18px; font-size: 8px; }
.ws-kanban.is-fit .ws-lead-touch { font-size: 9px; }
.ws-kanban.is-fit .ws-lead-alert { font-size: 10px; }
.ws-kanban.is-fit .ws-kb-head { padding: 8px 9px; gap: 6px; }
.ws-kanban.is-fit .ws-kb-title { font-size: 11px; }
.ws-kanban.is-fit .ws-kb-count { font-size: 10px; padding: 1px 7px; min-width: 22px; }
.ws-kanban.is-fit .ws-kb-add { width: 22px; height: 22px; font-size: 14px; }

/* ----- Empty column placeholder ----- */
.ws-kb-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 22px 12px 24px;
  border: 1.5px dashed var(--border);
  border-radius: 11px;
  margin: 4px 0;
  color: var(--text-muted);
  font-size: 11.5px;
  text-align: center;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.ws-kb-col.is-drop .ws-kb-empty {
  border-color: var(--stage-c, var(--brand-500));
  background: color-mix(in srgb, var(--stage-c, var(--brand-500)) 4%, var(--surface));
}
.ws-kb-empty-icon {
  font-size: 24px;
  opacity: .35;
  line-height: 1;
}
.ws-kb-empty-text {
  line-height: 1.5;
  max-width: 160px;
}
.ws-kb-empty-btn {
  background: transparent;
  border: 1px dashed var(--stage-c, var(--brand-500));
  color: var(--stage-c, var(--brand-500));
  padding: 4px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  margin-top: 2px;
  transition: all .15s;
}
.ws-kb-empty-btn:hover {
  background: var(--stage-c, var(--brand-500));
  color: #fff;
  transform: translateY(-1px);
}

/* ---------- Table view ---------- */
.ws-table-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ws-search {
  flex: 1;
  padding: 9px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.ws-search:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(44,120,115,.18);
}
.ws-table th {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-align: right;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-strong);
  background: var(--surface-2);
}
.ws-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: middle;
}
.ws-table tr:hover td { background: color-mix(in srgb, var(--brand-500) 3%, transparent); }
.ws-table-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  max-width: 260px;
}
.ws-mono { font-family: 'Vazirmatn', monospace; font-size: 12px; }
.ws-chip-src, .ws-chip-stage {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
  background: color-mix(in srgb, var(--sc) 12%, var(--surface));
  color: color-mix(in srgb, var(--sc) 85%, var(--text));
  border: 1px solid color-mix(in srgb, var(--sc) 35%, transparent);
}
.ws-advisor-dot {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac, var(--brand-500)) 18%, var(--surface));
  color: var(--ac, var(--brand-500));
  border: 1.5px solid var(--ac, var(--brand-500));
  font-size: 9px;
  font-weight: 800;
  margin-inline-end: 4px;
  vertical-align: middle;
}
.ws-score-pill {
  display: inline-block;
  font-weight: 800;
  font-size: 11.5px;
  padding: 3px 10px;
  border-radius: 99px;
  min-width: 32px;
  text-align: center;
}
.ws-score-pill[data-score="hot"]  { background: rgba(16,185,129,.12); color: #059669; }
.ws-score-pill[data-score="warm"] { background: rgba(245,158,11,.12); color: #b45309; }
.ws-score-pill[data-score="cold"] { background: rgba(148,163,184,.18); color: #475569; }
.ws-alerts-cell { font-size: 14px; letter-spacing: 4px; }

/* dark-theme tweaks for ws-* */
[data-theme="dark"] .ws-lead { background: var(--surface-2); }
[data-theme="dark"] .ws-inbox-item,
[data-theme="dark"] .ws-task-item { background: var(--surface); }
[data-theme="dark"] .ws-kb-col { background: var(--surface); }
[data-theme="dark"] .ws-select { background-color: var(--surface-2); }
[data-theme="dark"] .ws-kb-step { background: var(--surface-2); }
[data-theme="dark"] .ws-kb-step.is-active { background: color-mix(in srgb, var(--step-c, var(--brand-500)) 14%, var(--surface)); }
[data-theme="dark"] .ws-kb-health { background: var(--surface); }
[data-theme="dark"] .ws-kb-empty { background: var(--surface-2); }
[data-theme="dark"] .ws-kb-den-btn.is-active { background: var(--surface); }
[data-theme="dark"] .ws-kb-fit:hover { background: color-mix(in srgb, var(--brand-500) 10%, var(--surface)); }

/* ============================================================
   Archive panel — closed leads (won + lost)
   ============================================================ */

/* Tab badge (the chip on the "آرشیو" tab) */
.ws-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-start: 6px;
  font-size: 10.5px;
  font-weight: 800;
  background: color-mix(in srgb, var(--brand-500) 15%, var(--surface));
  color: var(--brand-600);
  padding: 1px 8px;
  border-radius: 99px;
  min-width: 22px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.2px;
}
.ws-tab.active .ws-tab-badge {
  background: var(--brand-500);
  color: #fff;
}

/* KPI hero — 4 stat cards (won, lost, conversion, top loss reason) */
.ws-arc-kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.ws-arc-kpi-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.ws-arc-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  background: var(--kpi-c, var(--brand-500));
}
.ws-arc-kpi-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--kpi-c, var(--brand-500)) 12%, transparent);
}
.ws-arc-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--kpi-c, var(--brand-500)) 14%, var(--surface));
  color: var(--kpi-c, var(--brand-500));
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.ws-arc-kpi-body { min-width: 0; flex: 1; }
.ws-arc-kpi-label {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.ws-arc-kpi-value {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.4px;
}
.ws-arc-kpi-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ws-arc-kpi-card.kpi-won    { --kpi-c: #10b981; }
.ws-arc-kpi-card.kpi-lost   { --kpi-c: #ef4444; }
.ws-arc-kpi-card.kpi-conv   { --kpi-c: #2c7873; }
.ws-arc-kpi-card.kpi-reason { --kpi-c: #f59e0b; }

/* Sub-filter row */
.ws-arc-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ws-arc-filters {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.ws-arc-filt {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  transition: all .15s;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ws-arc-filt:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--brand-500) 5%, transparent);
}
.ws-arc-filt.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-xs);
}
.ws-arc-filt-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.ws-arc-dot-won  { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.ws-arc-dot-lost { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.18); }
.ws-arc-reason {
  min-width: 180px;
  flex-shrink: 0;
}
.ws-arc-search {
  flex: 1;
  min-width: 200px;
}

/* Archive cards grid */
.ws-arc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

/* Single archive card — richer than kanban card (shows reason + date + value) */
.ws-arc-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
/* Status accent — green for won, red for lost */
.ws-arc-card::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: 0;
  width: 4px;
  background: var(--arc-c, var(--brand-500));
}
.ws-arc-card.is-won  { --arc-c: #10b981; }
.ws-arc-card.is-lost { --arc-c: #ef4444; }
.ws-arc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--arc-c) 16%, transparent);
  border-color: color-mix(in srgb, var(--arc-c) 35%, var(--border));
}

.ws-arc-head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
}
.ws-arc-avatar {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  background: color-mix(in srgb, var(--arc-c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--arc-c) 28%, transparent);
  flex-shrink: 0;
}
.ws-arc-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.1px;
  min-width: 0;
}
.ws-arc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 99px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--arc-c) 14%, var(--surface));
  color: var(--arc-c);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--arc-c) 24%, transparent);
}

.ws-arc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.ws-arc-chip {
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-arc-reason-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 9px 11px;
  background: color-mix(in srgb, var(--arc-c) 6%, var(--surface-2));
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--arc-c) 14%, transparent);
  font-size: 12px;
  line-height: 1.55;
  color: var(--text);
}
.ws-arc-reason-icon {
  font-size: 14px;
  flex-shrink: 0;
  filter: saturate(1.15);
}
.ws-arc-reason-body { min-width: 0; flex: 1; }
.ws-arc-reason-label {
  font-weight: 700;
  color: var(--arc-c);
}
.ws-arc-reason-note {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.5;
}

.ws-arc-foot {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px dashed var(--border);
  min-width: 0;
}
.ws-arc-advisor {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ac, var(--brand-500)) 18%, var(--surface));
  color: var(--ac, var(--brand-500));
  border: 1.5px solid var(--ac, var(--brand-500));
  font-size: 9.5px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ws-arc-advisor-name {
  font-size: 11.5px;
  color: var(--text-muted);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.ws-arc-date {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ws-arc-date::before { content: '🕒'; font-size: 10px; opacity: .75; }

/* Empty state for archive */
.ws-arc-empty {
  text-align: center;
  padding: 60px 24px;
  background: var(--surface-2);
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  color: var(--text-muted);
}
.ws-arc-empty-icon { font-size: 44px; opacity: .45; margin-bottom: 8px; }
.ws-arc-empty-title { font-size: 15px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.ws-arc-empty-sub { font-size: 12px; line-height: 1.6; max-width: 320px; margin: 0 auto; }

@media (max-width: 1100px) {
  .ws-arc-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .ws-arc-kpi { grid-template-columns: 1fr; }
}

/* Dark mode tweaks */
[data-theme="dark"] .ws-arc-kpi-card { background: var(--surface-2); }
[data-theme="dark"] .ws-arc-card { background: var(--surface-2); }
[data-theme="dark"] .ws-arc-filt.is-active { background: var(--surface); }
[data-theme="dark"] .ws-arc-empty { background: var(--surface); }

/* ============================================================
   CLASSROOMS / PROGRAMS — LMS-style class management
   ============================================================ */

/* ----- KPI row variants ----- */
.cl-kpi {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
.cl-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--cl-kpi-c, var(--brand-500));
}
.cl-kpi-blue   { --cl-kpi-c: #1e6dff; --cl-kpi-soft: rgba(30,109,255,.10); }
.cl-kpi-green  { --cl-kpi-c: #10b981; --cl-kpi-soft: rgba(16,185,129,.10); }
.cl-kpi-amber  { --cl-kpi-c: #f59e0b; --cl-kpi-soft: rgba(245,158,11,.12); }
.cl-kpi-purple { --cl-kpi-c: #8b5cf6; --cl-kpi-soft: rgba(139,92,246,.12); }
.cl-kpi-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-size: 20px;
  background: var(--cl-kpi-soft);
}

/* ----- Toolbar (tabs + search + filters) ----- */
.cl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.cl-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .18s ease;
  font-family: inherit;
}
.cl-tab:hover { background: var(--surface-2); }
.cl-tab.active {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
  box-shadow: 0 4px 12px rgba(44,120,115,.3);
}
.cl-tab.active .cl-tab-dot { background: #fff !important; }
.cl-tab.active .cl-tab-badge { background: rgba(255,255,255,.22); color: #fff; }
.cl-tab-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.cl-tab-dot.tone-blue  { background: #1e6dff; }
.cl-tab-dot.tone-amber { background: #f59e0b; }
.cl-tab-dot.tone-green { background: #10b981; }
.cl-tab-dot.tone-grey  { background: #94a3b8; }
.cl-tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 22px; height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 700;
}
.cl-toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cl-search { position: relative; display: flex; align-items: center; }
.cl-search-icon {
  position: absolute;
  inset-inline-start: 10px;
  font-size: 13px;
  pointer-events: none;
  color: var(--text-muted);
}
.cl-search input {
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  width: 240px;
  font-family: inherit;
  color: var(--text);
}
.cl-search input:focus { outline: none; border-color: var(--brand-500); background: var(--surface); }
.cl-select {
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
}
.cl-select:focus { outline: none; border-color: var(--brand-500); }
[data-theme="dark"] .cl-select,
[data-theme="dark"] .cl-search input { background-color: var(--surface); }

/* ----- Classroom grid + cards ----- */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  margin-top: 20px;
}
.cl-empty {
  text-align: center;
  padding: 40px 16px;
  color: var(--text-muted);
  font-size: 13px;
}
.cl-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position: relative;
}
.cl-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15,23,42,.10);
  border-color: var(--cl-c, var(--brand-300));
}
.cl-card-blue   { --cl-c: #1e6dff; }
.cl-card-amber  { --cl-c: #f59e0b; }
.cl-card-green  { --cl-c: #10b981; }
.cl-card-grey   { --cl-c: #94a3b8; }

.cl-card-banner {
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: #fff;
  font-weight: 800;
  font-size: 36px;
}
.cl-card-banner.b1 { background: linear-gradient(135deg, #2c7873, #004445); }
.cl-card-banner.b2 { background: linear-gradient(135deg, #f4a261, #e76f51); }
.cl-card-banner.b3 { background: linear-gradient(135deg, #6dbf8f, #4d9c70); }
.cl-card-banner.b4 { background: linear-gradient(135deg, #6fb98f, #7c5cf0); }
.cl-card-banner.b5 { background: linear-gradient(135deg, #f0b86e, #d49545); }
.cl-card-banner-init {
  text-shadow: 0 4px 14px rgba(0,0,0,.25);
  letter-spacing: -1px;
}
.cl-card-status {
  position: absolute;
  inset-block-start: 10px;
  inset-inline-end: 10px;
}
.cl-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255,255,255,.92);
  color: var(--cl-status-c, #0f172a);
  backdrop-filter: blur(8px);
}
.cl-status-pill.cl-status-blue  { --cl-status-c: #1e6dff; }
.cl-status-pill.cl-status-amber { --cl-status-c: #c46920; }
.cl-status-pill.cl-status-green { --cl-status-c: #0f8a5a; }
.cl-status-pill.cl-status-grey  { --cl-status-c: #475569; }
.cl-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cl-status-c);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cl-status-c) 25%, transparent);
}
.cl-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.cl-card-head { display: flex; flex-direction: column; gap: 4px; }
.cl-card-code {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: .02em;
}
.cl-card-title {
  font-weight: 800;
  font-size: 15px;
  color: var(--text-strong, #0f172a);
  line-height: 1.5;
}
[data-theme="dark"] .cl-card-title { color: #e2e8f0; }
.cl-card-meta { display: flex; flex-direction: column; gap: 6px; }
.cl-meta-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text);
}
.cl-meta-icon { font-size: 14px; flex-shrink: 0; }
.cl-meta-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-meta-text strong { font-weight: 700; }
.cl-meta-tag {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
  flex-shrink: 0;
}
.avatar-mini {
  width: 24px; height: 24px;
  font-size: 9px;
  font-weight: 700;
}
.cl-card-progress {
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cl-progress-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 6px;
}
.cl-progress-bar {
  background: var(--brand-50, #f3f5fc);
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}
.cl-progress-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cl-c, var(--brand-500)), var(--accent-500));
  border-radius: 4px;
  transition: width .8s cubic-bezier(.22,.7,.16,1);
}
.cl-card-countdown {
  padding: 10px 12px;
  background: rgba(245,158,11,0.08);
  color: #c46920;
  border-radius: 10px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cl-countdown-icon { font-size: 16px; }
.cl-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.cl-stat {
  text-align: center;
  padding: 8px 6px;
  background: var(--surface-2);
  border-radius: 10px;
}
.cl-stat-v {
  font-weight: 800;
  font-size: 18px;
  color: var(--text-strong, #0f172a);
  line-height: 1.1;
}
[data-theme="dark"] .cl-stat-v { color: #e2e8f0; }
.cl-stat-v small { font-weight: 600; font-size: 11px; color: var(--text-muted); }
.cl-stat-k {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 4px;
}
.att-good { color: #0f8a5a !important; }
.att-mid  { color: #c46920 !important; }
.att-low  { color: #b14458 !important; }
.cl-card-rahin {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(244,162,97,0.08), rgba(111,185,143,0.06));
  border-inline-start: 3px solid var(--accent-500);
  border-radius: 8px;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--text);
}
.cl-card-rahin .diaco-spark { color: var(--accent-500); margin-top: 1px; }
.cl-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.cl-card-actions .btn {
  height: 34px;
  padding: 0 12px;
  font-size: 12px;
  flex: 1;
  min-width: 0;
}

/* ============================================================
   CLASSROOM DRAWER
   ============================================================ */
.cl-drawer {
  width: min(1100px, 96vw);
  max-width: 96vw;
  display: flex;
  flex-direction: column;
}
.cl-drawer-head {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 16px;
  align-items: center;
  padding: 26px 56px 24px 24px;
  background: linear-gradient(155deg, #5b93d6 0%, #223a63 115%);
  position: relative; overflow: hidden; isolation: isolate;
}
.cl-drawer-head::before, .cl-drawer-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(28px); pointer-events: none; z-index: -1;
}
.cl-drawer-head::before { width: 160px; height: 160px; top: -70px; inset-inline-start: -45px; opacity: .16; }
.cl-drawer-head::after { width: 110px; height: 110px; bottom: -55px; inset-inline-end: 60px; opacity: .12; }
.cl-dh-banner {
  width: 78px; height: 78px;
  border-radius: 18px;
  display: grid; place-items: center;
  color: #fff;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 8px 18px -8px rgba(0,0,0,.3);
}
.cl-dh-banner.b1 { background: linear-gradient(135deg, #2c7873, #004445); }
.cl-dh-banner.b2 { background: linear-gradient(135deg, #f4a261, #e76f51); }
.cl-dh-banner.b3 { background: linear-gradient(135deg, #6dbf8f, #4d9c70); }
.cl-dh-banner.b4 { background: linear-gradient(135deg, #6fb98f, #7c5cf0); }
.cl-dh-banner.b5 { background: linear-gradient(135deg, #f0b86e, #d49545); }
.cl-dh-code {
  font-size: 11.5px;
  color: rgba(255,255,255,.82);
  margin-bottom: 4px;
}
.cl-dh-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0 0 10px;
  color: #fff;
}
[data-theme="dark"] .cl-dh-title { color: #fff; }
.cl-dh-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.cl-drawer-head .drawer-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
}
.cl-drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.cl-dtab {
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  transition: color .18s ease, border-color .18s ease;
}
.cl-dtab:hover { color: var(--text); }
.cl-dtab.active {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}
.cl-drawer-body {
  padding: 20px 24px 32px;
  overflow-y: auto;
  flex: 1;
}

.cl-section { margin-top: 22px; }
.cl-section:first-child { margin-top: 0; }
.cl-section-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-strong, #0f172a);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
[data-theme="dark"] .cl-section-title { color: #e2e8f0; }

.cl-ov-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 4px;
}
.cl-ov-card {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.cl-ov-icon { font-size: 20px; margin-bottom: 8px; }
.cl-ov-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.cl-ov-v {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-strong, #0f172a);
  margin-bottom: 4px;
}
[data-theme="dark"] .cl-ov-v { color: #e2e8f0; }
.cl-ov-v small { font-weight: 500; font-size: 11px; color: var(--text-muted); }
.cl-ov-meta {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
}
.cl-ov-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cl-ov-stat {
  text-align: center;
  padding: 14px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.cl-ov-stat-v {
  font-weight: 800;
  font-size: 22px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .cl-ov-stat-v { color: #e2e8f0; }
.cl-ov-stat-v small { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.cl-ov-stat-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
}

.cl-att-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cl-att-chip {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cl-att-chip strong { font-size: 16px; font-weight: 800; }
.cl-att-present { background: rgba(16,185,129,.12); color: #0f8a5a; }
.cl-att-late    { background: rgba(245,158,11,.14); color: #c46920; }
.cl-att-excused { background: rgba(30,109,255,.12); color: #1e6dff; }
.cl-att-absent  { background: rgba(239,68,68,.12); color: #b14458; }

.cl-diaco-panel {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244,162,97,0.10), rgba(111,185,143,0.08));
  border: 1px solid color-mix(in srgb, var(--accent-500) 30%, transparent);
}
.cl-diaco-head {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--accent-500);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cl-diaco-body {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text);
}

.cl-sess-table .cl-sess-future { opacity: .55; }
.cl-sess-att {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.cl-att-bar {
  display: flex;
  flex: 1;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface-2);
}
.cl-att-bar-present { background: #10b981; }
.cl-att-bar-late    { background: #f59e0b; }
.cl-att-bar-excused { background: #1e6dff; }
.cl-att-bar-absent  { background: #ef4444; }
.cl-sess-att-num {
  font-weight: 700;
  font-size: 12px;
  min-width: 36px;
  text-align: end;
}
.cl-sess-pending {
  color: var(--text-muted);
  font-size: 11.5px;
  font-style: italic;
}
.btn-xs { height: 28px !important; padding: 0 10px !important; font-size: 11px !important; }

.cl-stu-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cl-att-mini {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.cl-att-mini-bar {
  flex: 1;
  height: 7px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.cl-att-mini-bar i {
  display: block;
  height: 100%;
  border-radius: 4px;
}
.cl-att-mini-bar i.att-good { background: #10b981; }
.cl-att-mini-bar i.att-mid  { background: #f59e0b; }
.cl-att-mini-bar i.att-low  { background: #ef4444; }

.cl-att-legend {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cl-att-leg {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
}
.cl-att-leg.att-present { background: rgba(16,185,129,.14); color: #0f8a5a; }
.cl-att-leg.att-late    { background: rgba(245,158,11,.14); color: #c46920; }
.cl-att-leg.att-excused { background: rgba(30,109,255,.12); color: #1e6dff; }
.cl-att-leg.att-absent  { background: rgba(239,68,68,.12); color: #b14458; }
.cl-att-leg.att-future  { background: var(--surface-2); color: var(--text-muted); }

.cl-att-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.cl-att-matrix {
  border-collapse: collapse;
  width: 100%;
  font-size: 11px;
}
.cl-att-matrix th, .cl-att-matrix td {
  padding: 6px 4px;
  text-align: center;
  border-inline-end: 1px solid var(--border);
  border-block-end: 1px solid var(--border);
  white-space: nowrap;
}
.cl-att-matrix thead th {
  background: var(--surface-2);
  font-weight: 700;
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}
.cl-att-name-h, .cl-att-total-h {
  text-align: start !important;
  font-size: 11px;
}
.cl-att-name {
  text-align: start !important;
  padding: 6px 10px !important;
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface);
  z-index: 1;
  min-width: 180px;
  border-inline-end: 2px solid var(--border) !important;
}
.cl-att-future-h { color: var(--text-muted); font-weight: 500 !important; }
.cl-att-total {
  text-align: start !important;
  padding: 6px 10px !important;
  background: var(--surface-2);
  border-inline-start: 2px solid var(--border) !important;
  min-width: 70px;
  font-size: 12px;
}
.cl-att-total small { font-size: 10px; color: var(--text-muted); font-weight: 500; }
.cl-att-cell { width: 28px; font-weight: 700; cursor: help; }
.cl-att-cell.att-present { background: rgba(16,185,129,.14); color: #0f8a5a; }
.cl-att-cell.att-late    { background: rgba(245,158,11,.18); color: #c46920; }
.cl-att-cell.att-excused { background: rgba(30,109,255,.14); color: #1e6dff; }
.cl-att-cell.att-absent  { background: rgba(239,68,68,.14); color: #b14458; }
.cl-att-cell.att-future  { color: var(--text-muted); opacity: .4; }

.cl-finance-summary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.cl-fin-chip {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
}
.cl-fin-chip strong { font-size: 16px; font-weight: 800; }
.cl-fin-chip.green { background: rgba(16,185,129,.12); color: #0f8a5a; }
.cl-fin-chip.amber { background: rgba(245,158,11,.14); color: #c46920; }
.cl-fin-chip.red   { background: rgba(239,68,68,.12); color: #b14458; }

@media (max-width: 920px) {
  .cl-grid { grid-template-columns: 1fr; }
  .cl-toolbar { flex-direction: column; align-items: stretch; }
  .cl-toolbar-right { flex-direction: column; align-items: stretch; }
  .cl-search input { width: 100%; }
  .cl-drawer-head { grid-template-columns: 60px 1fr; padding-inline-end: 50px; }
  .cl-dh-banner { width: 60px; height: 60px; font-size: 22px; }
}

/* =========================================================
   WORKSPACE — Compact KPI strip + Drawer + Sortable + Add buttons
   namespace: ws-* (extends the earlier ws-* block above)
   ========================================================= */

/* ---------- Compact KPI strip (6 in a row) ---------- */
.ws-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
@media (max-width: 1400px) { .ws-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .ws-kpis { grid-template-columns: repeat(2, 1fr); } }

.ws-kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: center;
  box-shadow: var(--shadow-xs);
  border-inline-start: 3px solid var(--tone-c, var(--brand-500));
  transition: transform .15s, box-shadow .15s;
}
.ws-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}
.ws-kpi-icon {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: color-mix(in srgb, var(--tone-c, var(--brand-500)) 14%, var(--surface-2));
  border-radius: 9px;
}
.ws-kpi-body { min-width: 0; }
.ws-kpi-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 1px;
}
.ws-kpi-value {
  font-size: 20px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.ws-kpi-delta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ---------- Kanban add-button (+ in column header) ---------- */
.ws-kb-head { gap: 8px; }
.ws-kb-add {
  background: transparent;
  border: 1.5px dashed var(--stage-c, var(--brand-500));
  color: var(--stage-c, var(--brand-500));
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  padding: 0;
  transition: all .15s;
}
.ws-kb-add:hover {
  background: var(--stage-c, var(--brand-500));
  color: #fff;
}

/* ---- Toolbar above kanban (density + hint + fit) ---- */
.ws-kanban-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 12px;
  flex-wrap: wrap;
}
.ws-kb-density {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.ws-kb-den-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px 11px;
  border-radius: 7px;
  font-size: 14px;
  color: var(--text-muted);
  transition: all .15s;
  font-family: inherit;
  line-height: 1;
}
.ws-kb-den-btn:hover { color: var(--text); background: color-mix(in srgb, var(--brand-500) 6%, transparent); }
.ws-kb-den-btn.is-active {
  background: var(--surface);
  color: var(--brand-600);
  box-shadow: var(--shadow-xs);
}
.ws-hint {
  font-size: 11.5px;
  flex: 1;
  text-align: center;
  color: var(--text-muted);
  min-width: 200px;
}
.ws-kb-fit {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  transition: all .15s;
  white-space: nowrap;
}
.ws-kb-fit:hover {
  border-color: var(--brand-500);
  color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-500) 5%, var(--surface-2));
}
.ws-kb-fit.is-active {
  background: color-mix(in srgb, var(--brand-500) 12%, var(--surface));
  border-color: var(--brand-500);
  color: var(--brand-600);
}

/* ---------- Table: sortable + actions ---------- */
.ws-table th.ws-sortable {
  cursor: pointer;
  user-select: none;
  transition: background .15s, color .15s;
}
.ws-table th.ws-sortable:hover {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface-2));
  color: var(--brand-600);
}
.ws-table th.ws-sortable.is-sorted {
  color: var(--brand-600);
  background: color-mix(in srgb, var(--brand-500) 6%, var(--surface-2));
}
.ws-sort-arrow {
  font-size: 9px;
  color: var(--brand-500);
  margin-inline-start: 2px;
}
.ws-table tbody tr { cursor: pointer; }
.ws-row-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  white-space: nowrap;
}
.ws-row-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 26px; height: 26px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ws-row-btn:hover {
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
}
.ws-row-btn-danger:hover { background: #ef4444; }

/* ---------- DRAWER (slide-in side panel) ---------- */
.ws-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
  z-index: 200;
}
.ws-drawer-overlay.is-open { opacity: 1; visibility: visible; }
.ws-drawer {
  position: fixed;
  top: 0; bottom: 0;
  inset-inline-start: 0;            /* RTL: pinned to right edge */
  width: min(960px, 95vw);
  background: var(--surface);
  border-inline-end: 1px solid var(--border);
  box-shadow: -24px 0 48px rgba(0,0,0,.18);
  /* RTL: push off-screen to the right (positive X = right) */
  transform: translateX(105%);
  transition: transform .35s cubic-bezier(.22,.7,.16,1), visibility 0s linear .35s;
  display: flex;
  flex-direction: column;
  z-index: 210;
  visibility: hidden;
  overflow: hidden;
}
.ws-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .35s cubic-bezier(.22,.7,.16,1), visibility 0s;
}

.ws-drawer-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 6%, var(--surface)), var(--surface));
}
.ws-drawer-mode-pill {
  font-weight: 800;
  font-size: 13.5px;
  color: var(--brand-600);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ws-drawer-close {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 30px; height: 30px;
  font-size: 13px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, border-color .15s, transform .2s;
}
.ws-drawer-close:hover {
  background: #ef4444;
  color: #fff;
  border-color: transparent;
  transform: rotate(90deg);
}

.ws-drawer-tabs {
  display: flex;
  gap: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.ws-dr-tab {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all .15s;
}
.ws-dr-tab:hover { color: var(--text); }
.ws-dr-tab.active {
  color: var(--brand-600);
  border-bottom-color: var(--brand-500);
}

.ws-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 8px;
}
.ws-drawer-body::-webkit-scrollbar { width: 6px; }
.ws-drawer-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; }

.ws-dr-panel { display: none; }
.ws-dr-panel.active { display: block; animation: wsFade .25s ease-out; }

.ws-dr-section {
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--border);
}
.ws-dr-section:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.ws-dr-section-title {
  font-weight: 700;
  font-size: 11.5px;
  color: var(--brand-600);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ws-dr-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.ws-dr-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ws-dr-field > span {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}
.ws-dr-field input,
.ws-dr-field select,
.ws-dr-field textarea {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.ws-dr-field textarea { resize: vertical; min-height: 52px; line-height: 1.6; }
.ws-dr-field input:focus,
.ws-dr-field select:focus,
.ws-dr-field textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(44,120,115,.18);
}

.ws-dr-flags {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.ws-dr-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ws-dr-flag:hover {
  background: color-mix(in srgb, var(--brand-500) 4%, var(--surface-2));
  border-color: var(--border-strong);
}
.ws-dr-flag input { width: 15px; height: 15px; accent-color: var(--brand-500); }

.ws-dr-quickadd {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
  margin-bottom: 8px;
}
.ws-dr-quickadd select,
.ws-dr-quickadd input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
}
.ws-dr-quickadd select { min-width: 110px; }

.ws-dr-timeline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-tl-item {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ws-tl-icon {
  font-size: 16px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--brand-500) 10%, var(--surface));
  border-radius: 7px;
}
.ws-tl-text { font-size: 12.5px; color: var(--text); line-height: 1.6; }
.ws-tl-time { font-size: 11px; margin-top: 2px; }
.ws-empty {
  text-align: center;
  padding: 30px 10px;
  font-size: 12.5px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 12px;
}

.ws-dr-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.ws-stage-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  border-inline-start: 3px solid var(--sc, var(--brand-500));
  transition: all .15s;
}
.ws-stage-btn:hover {
  background: color-mix(in srgb, var(--sc, var(--brand-500)) 10%, var(--surface));
}
.ws-stage-btn.is-active {
  background: var(--sc, var(--brand-500));
  color: #fff;
  border-color: var(--sc, var(--brand-500));
}

.ws-dr-actions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ws-dr-action {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  color: var(--text);
  text-align: start;
  transition: all .15s;
}
.ws-dr-action:hover {
  background: color-mix(in srgb, var(--brand-500) 8%, var(--surface));
  border-color: var(--brand-500);
}
.ws-dr-action-danger { color: #ef4444; }
.ws-dr-action-danger:hover {
  background: rgba(239, 68, 68, .08);
  border-color: #ef4444;
}

[data-theme="dark"] .ws-drawer { background: var(--surface); }
[data-theme="dark"] .ws-kpi { background: var(--surface-2); }
[data-theme="dark"] .ws-dr-field input,
[data-theme="dark"] .ws-dr-field select,
[data-theme="dark"] .ws-dr-field textarea { background: var(--surface); }

/* ============================================================
   STUDENT PROFILE DRAWER (360°) — namespace .sp-*
   ============================================================ */
.sp-drawer {
  width: min(960px, 96vw);
  display: flex;
  flex-direction: column;
  z-index: 121;
}
#sp-drawer-overlay { z-index: 120; }
.sp-drawer-head {
  display: grid;
  grid-template-columns: 96px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 28px 56px 26px 28px;
  background: linear-gradient(155deg, #5b93d6 0%, #223a63 115%);
  position: relative; overflow: hidden; isolation: isolate;
}
.sp-drawer-head::before, .sp-drawer-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(28px); pointer-events: none; z-index: -1;
}
.sp-drawer-head::before { width: 170px; height: 170px; top: -75px; inset-inline-start: -50px; opacity: .16; }
.sp-drawer-head::after { width: 120px; height: 120px; bottom: -60px; inset-inline-end: 90px; opacity: .12; }
.sp-drawer-head .drawer-close {
  position: absolute;
  inset-block-start: 14px;
  inset-inline-end: 14px;
}
.sp-hero-avatar {
  width: 96px; height: 96px;
  border-radius: 24px;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  letter-spacing: -1px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 10px 24px rgba(0,0,0,.3);
}
.sp-hero-avatar.avatar-m { background: linear-gradient(135deg, #2c7873, #004445); }
.sp-hero-avatar.avatar-f { background: linear-gradient(135deg, #f4a261, #e76f51); }

.sp-hero-meta { min-width: 0; }
.sp-hero-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.sp-hero-name {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  color: #fff;
}
[data-theme="dark"] .sp-hero-name { color: #fff; }
.sp-hero-gender { font-size: 20px; }
.sp-hero-contact {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: rgba(255,255,255,.82);
  margin-bottom: 8px;
}
.sp-hero-contact a {
  color: #fff;
  text-decoration: none;
}
.sp-hero-contact a:hover { text-decoration: underline; }
.sp-hero-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sp-hero-kpis {
  display: flex;
  gap: 12px;
}
.sp-hero-kpi {
  text-align: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  min-width: 76px;
}
.sp-hero-kpi-v {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  line-height: 1;
}
[data-theme="dark"] .sp-hero-kpi-v { color: #fff; }
.sp-hero-kpi-v small { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.75); }
.sp-hero-kpi-k {
  font-size: 10.5px;
  color: rgba(255,255,255,.75);
  margin-top: 6px;
}

.sp-drawer-tabs {
  display: flex;
  gap: 4px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  overflow-x: auto;
}
.sp-dtab {
  padding: 14px 16px;
  border: 0;
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  font-family: inherit;
  transition: color .18s ease, border-color .18s ease;
}
.sp-dtab:hover { color: var(--text); }
.sp-dtab.active {
  color: var(--brand-500);
  border-bottom-color: var(--brand-500);
}
.sp-drawer-body {
  padding: 20px 28px 32px;
  overflow-y: auto;
  flex: 1;
}

.sp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 14px;
}
.sp-info {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sp-info-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.sp-info-v {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sp-class-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-2);
}
.sp-class-banner {
  width: 56px; height: 56px;
  border-radius: 14px;
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 20px;
}
.sp-class-banner.b1 { background: linear-gradient(135deg, #2c7873, #004445); }
.sp-class-banner.b2 { background: linear-gradient(135deg, #f4a261, #e76f51); }
.sp-class-banner.b3 { background: linear-gradient(135deg, #6dbf8f, #4d9c70); }
.sp-class-banner.b4 { background: linear-gradient(135deg, #6fb98f, #7c5cf0); }
.sp-class-banner.b5 { background: linear-gradient(135deg, #f0b86e, #d49545); }
.sp-class-title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .sp-class-title { color: #e2e8f0; }
.sp-class-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.sp-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  margin-top: 16px;
  border-inline-start: 4px solid;
  font-size: 12.5px;
  line-height: 1.65;
}
.sp-alert > span:first-child { font-size: 20px; }
.sp-alert-red {
  background: rgba(239,68,68,.06);
  border-color: #ef4444;
  color: #b14458;
}
.sp-alert strong { color: #b14458; display: block; margin-bottom: 4px; }

.sp-academic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.sp-acad-card {
  padding: 16px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  text-align: center;
}
.sp-acad-final {
  background: linear-gradient(135deg, rgba(244,162,97,.06), rgba(111,185,143,.05));
  border-color: color-mix(in srgb, var(--accent-500) 35%, transparent);
}
.sp-acad-icon { font-size: 24px; margin-bottom: 8px; }
.sp-acad-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sp-acad-v {
  font-weight: 800;
  font-size: 26px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .sp-acad-v { color: #e2e8f0; }
.sp-acad-v small { font-size: 13px; font-weight: 600; color: var(--text-muted); }

.sp-cert-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-cert {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(244,162,97,.06), rgba(255,221,131,.04));
}
.sp-cert-icon { font-size: 24px; }
.sp-cert-info { min-width: 0; }
.sp-cert-name { font-weight: 700; font-size: 13px; }
.sp-cert-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

.sp-att-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.sp-att-cell {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: help;
  position: relative;
  transition: transform .15s ease;
}
.sp-att-cell:hover { transform: translateY(-2px); }
.sp-att-num {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 4px;
}
.sp-att-sym {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 4px;
}
.sp-att-topic {
  font-size: 10.5px;
  color: var(--text);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-att-cell.att-present { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.3); }
.sp-att-cell.att-present .sp-att-sym { color: #0f8a5a; }
.sp-att-cell.att-late { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3); }
.sp-att-cell.att-late .sp-att-sym { color: #c46920; }
.sp-att-cell.att-absent { background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.3); }
.sp-att-cell.att-absent .sp-att-sym { color: #b14458; }
.sp-att-cell.att-excused { background: rgba(30,109,255,.08); border-color: rgba(30,109,255,.3); }
.sp-att-cell.att-excused .sp-att-sym { color: #1e6dff; }
.sp-att-cell.att-future { opacity: .55; border-style: dashed; }
.sp-att-cell.att-future .sp-att-sym { color: var(--text-muted); }

.sp-fin-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.sp-fin-stat {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sp-fin-paid { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.3); }
.sp-fin-remaining { background: rgba(245,158,11,.05); border-color: rgba(245,158,11,.3); }
.sp-fin-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.sp-fin-v {
  font-weight: 800;
  font-size: 18px;
  color: var(--text-strong, #0f172a);
}
[data-theme="dark"] .sp-fin-v { color: #e2e8f0; }
.sp-fin-v small { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.sp-fin-bar {
  margin-top: 10px;
  height: 6px;
  background: var(--surface-2);
  border-radius: 4px;
  overflow: hidden;
}
.sp-fin-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #6dbf8f);
  border-radius: 4px;
}
.sp-fin-meta {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 6px;
}

.sp-installments {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sp-inst {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}
.sp-inst-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.sp-inst-paid { background: rgba(16,185,129,.06); border-color: rgba(16,185,129,.3); }
.sp-inst-paid .sp-inst-icon { background: #10b981; color: #fff; }
.sp-inst-paid .sp-inst-status { color: #0f8a5a; }
.sp-inst-pending { background: rgba(245,158,11,.06); border-color: rgba(245,158,11,.3); }
.sp-inst-pending .sp-inst-icon { background: #f59e0b; color: #fff; }
.sp-inst-pending .sp-inst-status { color: #c46920; font-weight: 700; }
.sp-inst-upcoming .sp-inst-status { color: var(--text-muted); }
.sp-inst-label { font-weight: 700; font-size: 13px; }
.sp-inst-date { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.sp-inst-amount { font-weight: 700; font-size: 14px; }
.sp-inst-amount small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.sp-inst-status { font-size: 11.5px; font-weight: 600; min-width: 70px; text-align: end; }

.sp-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.sp-tl-item {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 14px 0;
}
.sp-tl-item:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}
.sp-tl-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface-2);
  font-size: 18px;
}
.sp-tl-call .sp-tl-icon { background: rgba(30,109,255,.12); }
.sp-tl-sms .sp-tl-icon { background: rgba(245,158,11,.14); }
.sp-tl-email .sp-tl-icon { background: rgba(139,92,246,.12); }
.sp-tl-whatsapp .sp-tl-icon { background: rgba(16,185,129,.14); }
.sp-tl-enroll .sp-tl-icon { background: rgba(244,162,97,.16); }
.sp-tl-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.sp-tl-type {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
}
.sp-tl-date {
  font-size: 11px;
  color: var(--text-muted);
}
.sp-tl-text {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
  margin-bottom: 4px;
}
.sp-tl-by {
  font-size: 10.5px;
  color: var(--text-muted);
}

.sp-quick-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.sp-quick-actions .btn {
  height: 36px;
  padding: 0 14px;
  font-size: 12.5px;
}

.sp-diaco-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) { .sp-diaco-stats { grid-template-columns: 1fr; } }
.sp-diaco-stat {
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
  border-inline-start: 5px solid var(--rs-c, var(--brand-500));
}
.sp-diaco-green { --rs-c: #10b981; background: rgba(16,185,129,.04); }
.sp-diaco-amber { --rs-c: #f59e0b; background: rgba(245,158,11,.06); }
.sp-diaco-red   { --rs-c: #ef4444; background: rgba(239,68,68,.06); }
.sp-diaco-icon { font-size: 28px; margin-bottom: 8px; }
.sp-diaco-k {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.sp-diaco-v {
  font-size: 32px;
  font-weight: 800;
  color: var(--rs-c, var(--brand-500));
  line-height: 1;
  margin-bottom: 6px;
}
.sp-diaco-v small { font-size: 14px; font-weight: 600; }
.sp-diaco-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.sp-rec-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sp-rec {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  padding: 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent-500) 35%, transparent);
  background: linear-gradient(135deg, rgba(244,162,97,.06), rgba(111,185,143,.04));
}
.sp-rec-spark {
  color: var(--accent-500);
  font-size: 20px;
  text-shadow: 0 0 8px rgba(244,162,97,0.4);
}
.sp-rec-title {
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}
.sp-rec-detail {
  font-size: 12px;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.65;
}
.sp-rec-action {
  font-size: 12px;
  line-height: 1.65;
  padding-top: 6px;
  border-top: 1px dotted color-mix(in srgb, var(--accent-500) 40%, transparent);
}
.sp-rec-action strong { color: var(--accent-500); }

@media (max-width: 760px) {
  .sp-drawer-head { grid-template-columns: 64px 1fr; padding-inline-end: 50px; }
  .sp-hero-avatar { width: 64px; height: 64px; font-size: 20px; }
  .sp-hero-kpis { grid-column: 1 / -1; justify-content: center; }
}

/* =========================================================
   WORKSPACE — DRAWER REDESIGN (Phase 2: Customer 360°)
   Hero + stats bar + 4 tabs + Won/Lost close bar
   ========================================================= */

/* ----- Hero header (avatar + name + chips + closed badge) ----- */
.ws-drawer-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 12px 16px 10px;
  align-items: center;
  flex-shrink: 0;
}
.ws-dr-avatar {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(44,120,115,.4);
  text-transform: uppercase;
}
.ws-dr-head-info { min-width: 0; }
.ws-dr-head-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.ws-dr-head-name {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.012em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  line-height: 1.3;
}
.ws-dr-closed-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 99px;
  flex-shrink: 0;
}
.ws-dr-closed-badge.is-won  { background: rgba(16,185,129,.16); color: #059669; border: 1px solid #10b981; }
.ws-dr-closed-badge.is-lost { background: rgba(239,68,68,.14); color: #dc2626; border: 1px solid #ef4444; }

/* Chips: single line, horizontal scroll if overflow */
.ws-dr-head-chips {
  display: flex;
  gap: 5px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ws-dr-head-chips::-webkit-scrollbar { display: none; }
.ws-dr-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10.5px;
  font-weight: 600;
  background: color-mix(in srgb, var(--c, var(--brand-500)) 12%, var(--surface));
  color: color-mix(in srgb, var(--c, var(--brand-500)) 80%, var(--text));
  border: 1px solid color-mix(in srgb, var(--c, var(--brand-500)) 30%, transparent);
  flex-shrink: 0;
  white-space: nowrap;
}
.ws-dr-chip-score[data-score="hot"]  { background: rgba(16,185,129,.14); color: #059669; border-color: #10b981; }
.ws-dr-chip-score[data-score="warm"] { background: rgba(245,158,11,.14); color: #b45309; border-color: #f59e0b; }
.ws-dr-chip-score[data-score="cold"] { background: rgba(148,163,184,.18); color: #475569; border-color: #94a3b8; }
.ws-dr-chip-tag {
  background: var(--surface-2);
  color: var(--text-muted);
  border-color: var(--border);
}

/* Stats bar: single-row horizontal strip with inline items */
.ws-dr-statsbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 8px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-shrink: 0;
}
.ws-dr-statsbar::-webkit-scrollbar { display: none; }
.ws-stat {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 0 12px;
  border-inline-end: 1px solid var(--border);
  white-space: nowrap;
  flex-shrink: 0;
}
.ws-stat:first-child { padding-inline-start: 0; }
.ws-stat:last-child { border-inline-end: 0; padding-inline-end: 0; }
.ws-stat-icon { font-size: 12px; line-height: 1; }
.ws-stat-val {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
}
.ws-stat-lbl {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ----- Section count (number badge in title) ----- */
.ws-dr-section-count {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 11px;
  margin-inline-start: 6px;
}

/* ----- Communications: filter chips ----- */
.ws-dr-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ws-dr-filter-chip {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s;
}
.ws-dr-filter-chip:hover { color: var(--text); background: var(--surface); }
.ws-dr-filter-chip.active {
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
}

/* ----- Comm timeline accent stripes (by type) ----- */
.ws-tl-item.ws-tl-call    { border-inline-start: 3px solid #fb7185; }
.ws-tl-item.ws-tl-message { border-inline-start: 3px solid #25D366; }
.ws-tl-item.ws-tl-sms     { border-inline-start: 3px solid #d4a017; }
.ws-tl-item.ws-tl-instagram { border-inline-start: 3px solid #E4405F; }
.ws-tl-item.ws-tl-meeting { border-inline-start: 3px solid #8b5cf6; }
.ws-tl-item.ws-tl-stage   { border-inline-start: 3px solid var(--brand-500); }
.ws-tl-item.ws-tl-payment { border-inline-start: 3px solid #10b981; background: rgba(16,185,129,.04); }
.ws-tl-item.ws-tl-ai      { border-inline-start: 3px solid #6fb98f; background: rgba(111,185,143,.06); }
.ws-tl-item.ws-tl-note    { border-inline-start: 3px solid #94a3b8; }

/* ----- Tasks tab: row layout ----- */
.ws-dr-task-add {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
}
.ws-dr-task-add > input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 6px;
}
.ws-dr-task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 6px;
}
.ws-dr-task-row select,
.ws-dr-task-row input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 9px;
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
}
.ws-dr-task-row select { min-width: 100px; }

.ws-dr-tasks {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ws-task-row {
  display: grid;
  grid-template-columns: 18px 22px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: opacity .15s;
}
.ws-task-row.is-done {
  opacity: .55;
  background: var(--surface);
}
.ws-task-row.is-done .ws-task-row-title { text-decoration: line-through; }
.ws-task-row-check {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-radius: 5px;
  cursor: pointer;
  position: relative;
  transition: all .15s;
}
.ws-task-row-check:checked {
  background: var(--brand-500);
  border-color: var(--brand-500);
}
.ws-task-row-check:checked::after {
  content: '✓';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 800;
}
.ws-task-row-icon { font-size: 16px; text-align: center; }
.ws-task-row-body { min-width: 0; }
.ws-task-row-title { font-weight: 700; font-size: 12.5px; color: var(--text); }
.ws-task-row-due { font-size: 11px; margin-top: 1px; }
.ws-task-row-delete {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 22px; height: 22px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ws-task-row-delete:hover {
  background: #ef4444;
  color: #fff;
  border-color: transparent;
}

/* ----- Coach tab ----- */
.ws-dr-coach {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ws-coach-hero {
  padding: 16px;
  background: linear-gradient(135deg, rgba(111,185,143,.10), rgba(44,120,115,.08));
  border: 1px dashed #6fb98f;
  border-radius: 12px;
  text-align: center;
}
.ws-coach-tag {
  font-size: 11px;
  font-weight: 800;
  color: #8b5cf6;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.ws-coach-persona {
  font-size: 18px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.015em;
}
.ws-coach-tone {
  font-size: 12px;
  margin-top: 3px;
}
.ws-coach-pred-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.ws-coach-pred {
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ws-coach-pred-lbl {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 3px;
}
.ws-coach-pred-val {
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}
.ws-coach-conv { color: #059669; font-size: 18px; }
.ws-coach-section {
  padding: 14px 16px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ws-coach-dos   { border-inline-start: 3px solid #10b981; }
.ws-coach-donts { border-inline-start: 3px solid #ef4444; }
.ws-coach-section-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
}
.ws-coach-dos .ws-coach-section-title   { color: #059669; }
.ws-coach-donts .ws-coach-section-title { color: #dc2626; }
.ws-coach-section ul {
  margin: 0;
  padding-inline-start: 18px;
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text);
}
.ws-coach-warn {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  background: rgba(245,158,11,.08);
  border: 1px solid #f59e0b;
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
}
.ws-coach-warn-icon { font-size: 16px; flex-shrink: 0; }
.ws-coach-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.ws-coach-actions .btn { flex: 1; }

/* ----- [hidden] attribute overrides for flex/grid components ----- */
.ws-dr-closed-badge[hidden],
.ws-dr-actions-menu[hidden],
.ws-dr-lost-overlay[hidden],
.ws-dr-save-pill[hidden],
.ws-dr-closed-banner[hidden],
.ws-dr-create-bar[hidden],
.ws-dr-act-item[hidden] { display: none !important; }

/* ===================================================================
   NEW: Drawer header controls (action menu + close)
   =================================================================== */
.ws-dr-head-ctrls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.ws-dr-actions-wrap {
  position: relative;
}
.ws-dr-act-trigger {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 30px; height: 30px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ws-dr-act-trigger:hover,
.ws-dr-act-trigger.is-active {
  background: var(--brand-500);
  color: #fff;
  border-color: transparent;
}

.ws-dr-actions-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-end: 0;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -8px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.06);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 50;
  animation: wsFade .15s ease-out;
}
.ws-dr-act-item {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  padding: 9px 10px;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  text-align: start;
  transition: background .12s;
}
.ws-dr-act-item:hover {
  background: var(--surface-2);
}
.ws-dr-act-icon { font-size: 17px; text-align: center; }
.ws-dr-act-text { display: flex; flex-direction: column; min-width: 0; }
.ws-dr-act-title {
  font-weight: 700;
  font-size: 12.5px;
  color: var(--text);
}
.ws-dr-act-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 1px;
}
.ws-dr-act-won .ws-dr-act-title { color: #059669; }
.ws-dr-act-won:hover { background: rgba(16,185,129,.08); }
.ws-dr-act-lost .ws-dr-act-title { color: #b45309; }
.ws-dr-act-lost:hover { background: rgba(245,158,11,.08); }
.ws-dr-act-reopen .ws-dr-act-title { color: var(--brand-600); }
.ws-dr-act-reopen:hover { background: rgba(44,120,115,.08); }
.ws-dr-act-danger .ws-dr-act-title { color: #dc2626; }
.ws-dr-act-danger:hover { background: rgba(239,68,68,.08); }
.ws-dr-act-sep {
  height: 1px;
  background: var(--border);
  margin: 4px 6px;
}

/* ===================================================================
   NEW: Save pill (toast feedback for auto-save)
   =================================================================== */
.ws-dr-save-pill {
  position: absolute;
  top: 12px;
  inset-inline-start: 16px;
  z-index: 25;
  padding: 6px 12px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 99px;
  font-size: 11.5px;
  font-weight: 700;
  box-shadow: 0 6px 16px -4px rgba(16,185,129,.45);
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.ws-dr-save-pill.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================================================
   NEW: Closed-lead banner (top of body)
   =================================================================== */
.ws-dr-closed-banner {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--c, var(--brand-500));
  background: color-mix(in srgb, var(--c, var(--brand-500)) 8%, var(--surface));
}
.ws-dr-closed-banner.is-won  { --c: #10b981; }
.ws-dr-closed-banner.is-lost { --c: #ef4444; }
.ws-dr-cb-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  background: var(--c);
  color: #fff;
  border-radius: 10px;
}
.ws-dr-cb-body { min-width: 0; }
.ws-dr-cb-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--c);
  margin-bottom: 2px;
}
.ws-dr-cb-sub {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ===================================================================
   NEW: Create-mode bar (top of body when creating new lead)
   =================================================================== */
.ws-dr-create-bar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(44,120,115,.10), rgba(111,185,143,.08));
  border: 1px dashed var(--brand-500);
  border-radius: 12px;
  margin-bottom: 16px;
}
.ws-dr-create-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.ws-dr-create-text strong { font-size: 13px; color: var(--brand-600); }

/* ===================================================================
   NEW: Lost reason overlay (modal-style inside drawer body)
   =================================================================== */
.ws-dr-lost-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 40;
  animation: wsFade .2s ease-out;
}
.ws-dr-lost-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(15,23,42,.4);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.ws-dr-lost-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(239,68,68,.06), var(--surface));
}
.ws-dr-lost-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #dc2626;
}
.ws-dr-lost-card-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ws-dr-lost-card-foot {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

/* ===================================================================
   Body: relative positioning so absolute children (overlay/pill) work
   =================================================================== */
.ws-drawer-body { position: relative; }

/* ----- Kanban / Table closed-state visuals ----- */
.ws-lead.is-closed-won  { background: linear-gradient(135deg, rgba(16,185,129,.06), var(--surface)); border-color: #10b981; }
.ws-lead.is-closed-lost { opacity: .55; background: linear-gradient(135deg, rgba(239,68,68,.04), var(--surface)); border-color: #ef4444; }
.ws-lead.is-closed-lost .ws-lead-name { text-decoration: line-through; }
.ws-table tr.is-closed-won  { background: rgba(16,185,129,.04); }
.ws-table tr.is-closed-lost { opacity: .6; background: rgba(239,68,68,.03); }
.ws-table tr.is-closed-lost strong { text-decoration: line-through; }

/* dark theme adjustments */
[data-theme="dark"] .ws-dr-statsbar { background: var(--surface); }
[data-theme="dark"] .ws-task-row    { background: var(--surface); }
[data-theme="dark"] .ws-coach-section { background: var(--surface); }

/* =========================================================
   AI Page — Diaco Insight Engine (expanded)
   ========================================================= */

/* ---- Hero ---- */
.ai-hero {
  padding: 20px 22px;
  background: linear-gradient(135deg, rgba(160,32,240,.06), rgba(96,165,250,.04) 50%, rgba(16,185,129,.04));
  border: 1px solid rgba(160,32,240,.18);
  overflow: hidden;
  position: relative;
}
.ai-hero::before {
  content: '';
  position: absolute;
  inset-inline-end: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(160,32,240,.16), transparent 70%);
  pointer-events: none;
}
.ai-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
}
.ai-hero-main { display: flex; flex-direction: column; gap: 12px; }
.ai-engine-badge { display: flex; align-items: center; gap: 14px; }
.ai-engine-orb {
  position: relative; width: 80px; height: 80px; flex-shrink: 0;
}
.ai-engine-orb svg { display: block; }
.ai-ring-1 { animation: aiRingSpin 14s linear infinite; transform-origin: 40px 40px; }
.ai-ring-2 { animation: aiRingSpin 10s linear infinite reverse; transform-origin: 40px 40px; }
.ai-ring-3 { animation: aiRingSpin 6s linear infinite; transform-origin: 40px 40px; }
.ai-orb-core { animation: aiCorePulse 2.2s ease-in-out infinite; transform-origin: 40px 40px; }
@keyframes aiRingSpin { to { transform: rotate(360deg); } }
@keyframes aiCorePulse {
  0%, 100% { transform: scale(1);   filter: drop-shadow(0 0 4px rgba(160,32,240,.6)); }
  50%      { transform: scale(1.3); filter: drop-shadow(0 0 12px rgba(160,32,240,.9)); }
}
.ai-engine-name {
  font-size: 19px; font-weight: 800; letter-spacing: -.2px;
  display: flex; align-items: baseline; gap: 8px;
}
.ai-engine-ver {
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(160,32,240,.12);
  color: #7e22ce;
}
.ai-engine-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.ai-engine-models { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ai-model-pill {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  letter-spacing: .2px;
}
.ai-engine-tasks {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 10px 12px;
  background: rgba(160,32,240,.04);
  border: 1px dashed rgba(160,32,240,.25);
  border-radius: 12px;
}
.ai-engine-tasks-lab { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.ai-task-pill {
  font-size: 11px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface);
  border: 1px solid rgba(160,32,240,.20);
  color: #7e22ce;
  animation: aiTaskFlash 3s ease-in-out infinite;
}
.ai-task-pill:nth-child(3) { animation-delay: .3s; }
.ai-task-pill:nth-child(4) { animation-delay: .6s; }
.ai-task-pill:nth-child(5) { animation-delay: .9s; }
.ai-task-pill:nth-child(6) { animation-delay: 1.2s; }
@keyframes aiTaskFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(160,32,240,.0); }
  50%      { box-shadow: 0 0 0 4px rgba(160,32,240,.10); }
}
.ai-engine-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ai-hero-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.ai-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-stat:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -10px rgba(0,0,0,.15); }
.ai-stat-icon { font-size: 22px; margin-bottom: 6px; }
.ai-stat-val { font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.ai-stat-lbl { font-size: 10.5px; color: var(--text-muted); margin-top: 4px; }

/* ---- LIVE feed ---- */
.ai-feed-card .card-head { align-items: flex-start; }
.ai-live-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(239,68,68,.10);
  color: #dc2626;
  border: 1px solid rgba(239,68,68,.22);
}
.ai-live-pulse {
  width: 7px; height: 7px; border-radius: 999px;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.55);
  animation: aiLivePulse 1.4s ease-in-out infinite;
}
@keyframes aiLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.55); transform: scale(1); }
  70%  { box-shadow: 0 0 0 8px rgba(239,68,68,0);  transform: scale(1.1); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0);    transform: scale(1); }
}
.ai-feed {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 460px;
  overflow-y: auto;
  padding-inline-end: 4px;
  scrollbar-width: thin;
}
.ai-feed-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  border-inline-end: 3px solid var(--brand-500);
  transition: transform .15s ease, box-shadow .2s ease;
  animation: aiFeedSlide .42s cubic-bezier(.2,.7,.3,1.2) backwards;
  animation-delay: calc(var(--feed-i, 0) * 50ms);
}
.ai-feed-item:hover { transform: translateX(2px); box-shadow: 0 4px 12px -8px rgba(0,0,0,.2); }
[dir="rtl"] .ai-feed-item:hover { transform: translateX(-2px); }
.ai-feed-item.tone-purple { border-inline-end-color: #a020f0; }
.ai-feed-item.tone-blue   { border-inline-end-color: #1e6dff; }
.ai-feed-item.tone-amber  { border-inline-end-color: #f59e0b; }
.ai-feed-item.tone-red    { border-inline-end-color: #ef4444; }
.ai-feed-item.tone-green  { border-inline-end-color: #10b981; }
@keyframes aiFeedSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ai-feed-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ai-feed-task { font-weight: 700; font-size: 12.5px; margin-bottom: 2px; }
.ai-feed-detail { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }
.ai-feed-time {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Donut wrapper for AI page ---- */
.ai-donut-wrap { max-width: 240px; margin: 0 auto 14px; aspect-ratio: 1/1; position: relative; }

/* ---- Models list ---- */
.ai-models-list { display: flex; flex-direction: column; gap: 8px; }
.ai-model-row {
  display: grid; grid-template-columns: 14px 1fr auto; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.ai-model-dot { width: 12px; height: 12px; border-radius: 999px; flex-shrink: 0; }
.ai-model-name { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ai-model-name strong {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11.5px;
}
.ai-model-purpose { font-size: 10.5px; color: var(--text-muted); }
.ai-model-stat { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: end; }
.ai-model-req { font-size: 10.5px; color: var(--text-muted); }
.ai-model-cost { font-weight: 800; font-size: 12px; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---- Insight tabs + cards ---- */
.ai-ins-tabs { display: flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; }
.ai-tab {
  font-size: 11.5px; font-weight: 700;
  padding: 6px 14px;
  border: none; border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.ai-tab:hover { color: var(--text); }
.ai-tab.active { background: var(--surface); color: var(--brand-700); box-shadow: 0 2px 6px -3px rgba(0,0,0,.15); }
.ai-ins-card {
  position: relative;
  animation: aiInsPop .4s cubic-bezier(.2,.7,.3,1.2) backwards;
  animation-delay: calc(var(--ins-i, 0) * 60ms);
  border-inline-start: 3px solid var(--border);
  padding-inline-start: 16px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.ai-ins-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(0,0,0,.2); }
.ai-ins-card.ai-ins-risk        { border-inline-start-color: #ef4444; }
.ai-ins-card.ai-ins-opportunity { border-inline-start-color: #f59e0b; }
.ai-ins-card.ai-ins-trend       { border-inline-start-color: #10b981; }
.ai-ins-card.ai-ins-action      { border-inline-start-color: #a020f0; }
@keyframes aiInsPop {
  from { opacity: 0; transform: translateY(6px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}
.ai-ins-cat {
  font-size: 10px; font-weight: 800; letter-spacing: .3px;
  margin-bottom: 6px;
  padding: 2px 8px; border-radius: 999px;
  display: inline-block;
  background: var(--surface-2); color: var(--text-muted);
}
.ai-ins-risk        .ai-ins-cat { background: rgba(239,68,68,.10);  color: #b91c1c; }
.ai-ins-opportunity .ai-ins-cat { background: rgba(245,158,11,.10); color: #b45309; }
.ai-ins-trend       .ai-ins-cat { background: rgba(16,185,129,.10); color: #047857; }
.ai-ins-action      .ai-ins-cat { background: rgba(160,32,240,.10); color: #7e22ce; }

/* ---- Sentiment ---- */
.ai-sentiment-wrap { display: grid; grid-template-columns: 240px 1fr; gap: 18px; align-items: center; }
.ai-sentiment-wrap .ai-donut-wrap { margin: 0; }
.ai-sent-trend {
  font-size: 12px; font-weight: 700;
  color: #047857;
  padding: 8px 12px;
  background: rgba(16,185,129,.10);
  border-radius: 10px;
  margin-bottom: 12px;
}
.ai-sent-section { margin-bottom: 12px; }
.ai-sent-h { font-size: 12px; font-weight: 700; margin-bottom: 6px; }
.ai-sent-list { margin: 0; padding-inline-start: 18px; font-size: 12px; line-height: 1.9; color: var(--text); }
.ai-sent-list-neg li { color: #b45309; }

/* ---- Topics list ---- */
.ai-topics { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding-inline-end: 4px; }
.ai-topic-row {
  display: grid;
  grid-template-columns: 24px 1fr 26px 1fr 50px;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  animation: aiInsPop .42s cubic-bezier(.2,.7,.3,1.2) backwards;
  animation-delay: calc(var(--topic-i, 0) * 45ms);
}
.ai-topic-rank {
  width: 24px; height: 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ai-topic-row:nth-child(1) .ai-topic-rank { background: linear-gradient(135deg,#fbbf24,#f59e0b); color: #fff; border-color: transparent; }
.ai-topic-row:nth-child(2) .ai-topic-rank { background: linear-gradient(135deg,#cbd5e1,#94a3b8); color: #fff; border-color: transparent; }
.ai-topic-row:nth-child(3) .ai-topic-rank { background: linear-gradient(135deg,#fb923c,#ea580c); color: #fff; border-color: transparent; }
.ai-topic-name { font-weight: 600; font-size: 12.5px; }
.ai-topic-sent { font-size: 16px; text-align: center; }
.ai-topic-bar { height: 7px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.ai-topic-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand-500), #c084fc); }
.ai-topic-row.tone-green .ai-topic-fill  { background: linear-gradient(90deg, #34d399, #10b981); }
.ai-topic-row.tone-red   .ai-topic-fill  { background: linear-gradient(90deg, #fb7185, #ef4444); }
.ai-topic-row.tone-amber .ai-topic-fill  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ai-topic-row.tone-blue  .ai-topic-fill  { background: linear-gradient(90deg, #60a5fa, #1e6dff); }
.ai-topic-row.tone-purple .ai-topic-fill { background: linear-gradient(90deg, #c084fc, #a020f0); }
.ai-topic-count {
  font-weight: 800; font-size: 12.5px; text-align: end;
  color: var(--text); font-variant-numeric: tabular-nums;
}

/* ---- Decision Audit Table ---- */
.ai-decisions-table { font-size: 12.5px; }
.ai-decisions-table th { font-weight: 700; font-size: 11.5px; padding: 10px 12px; color: var(--text-muted); }
.ai-decisions-table td { padding: 12px; vertical-align: top; }
.ai-dec-row { animation: aiInsPop .4s cubic-bezier(.2,.7,.3,1.2) backwards; animation-delay: calc(var(--dec-i,0) * 40ms); }
.ai-dec-row:hover { background: var(--surface-2); }
.ai-dec-time { font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ai-dec-type { font-size: 20px; }
.ai-dec-reason { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; max-width: 260px; }
.ai-conf { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.ai-conf-bar { flex: 1; height: 7px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.ai-conf-fill { height: 100%; border-radius: 999px; transition: width .4s ease; }
.ai-conf-fill.ai-conf-high { background: linear-gradient(90deg, #34d399, #10b981); }
.ai-conf-fill.ai-conf-mid  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.ai-conf-fill.ai-conf-low  { background: linear-gradient(90deg, #fb7185, #ef4444); }
.ai-conf-num { font-weight: 800; font-size: 11.5px; min-width: 36px; text-align: end; }
.ai-model-tag {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10.5px; font-weight: 600;
  padding: 3px 8px; border-radius: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-outcome {
  font-size: 10.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  white-space: nowrap;
  display: inline-block;
}
.ai-outcome.pending    { background: rgba(245,158,11,.10); color: #b45309; border: 1px solid rgba(245,158,11,.24); }
.ai-outcome.approved   { background: rgba(16,185,129,.10); color: #047857; border: 1px solid rgba(16,185,129,.24); }
.ai-outcome.escalated  { background: rgba(239,68,68,.10);  color: #b91c1c; border: 1px solid rgba(239,68,68,.24); }
.ai-outcome.sent       { background: rgba(30,109,255,.10); color: #1e6dff; border: 1px solid rgba(30,109,255,.24); }
.ai-outcome.applied    { background: rgba(160,32,240,.10); color: #7e22ce; border: 1px solid rgba(160,32,240,.24); }

/* ---- Cost Projection ---- */
.ai-cost-card .card-head { margin-bottom: 14px; }
.ai-cost-body { display: flex; flex-direction: column; gap: 16px; }
.ai-cost-big {
  display: flex; align-items: baseline; gap: 12px;
  padding: 14px 18px;
  background: linear-gradient(135deg, rgba(160,32,240,.08), rgba(96,165,250,.04));
  border-radius: 14px;
  border: 1px solid rgba(160,32,240,.18);
}
.ai-cost-num {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(135deg, #a020f0, #60a5fa);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.ai-cost-currency { font-size: 22px; font-weight: 700; margin-inline-start: 4px; }
.ai-cost-rial { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.ai-cost-progress { display: flex; flex-direction: column; gap: 8px; }
.ai-cost-progress-row {
  display: flex; align-items: center; gap: 10px;
}
.ai-cost-progress-cap {
  font-size: 10.5px; font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
.ai-cost-progress-cap.end { color: var(--brand-700); }
.ai-cost-progress-bar {
  position: relative;
  height: 10px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  flex: 1;
  min-width: 0;
}
.ai-cost-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #10b981, #f59e0b 80%, #ef4444);
  transition: width 1.2s cubic-bezier(.2,.7,.3,1);
  animation: aiCostFill 1.4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes aiCostFill { from { width: 0; } }
.ai-cost-progress-meta { font-size: 11.5px; color: var(--text-muted); }
.ai-cost-breakdown { display: flex; flex-direction: column; gap: 6px; }
.ai-cost-bd-h { font-size: 11.5px; color: var(--text-muted); font-weight: 600; }
.ai-cost-bd-bars { display: flex; height: 20px; border-radius: 8px; overflow: hidden; gap: 2px; }
.ai-cost-seg {
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 10px; font-weight: 700; white-space: nowrap;
  min-width: 30px;
  transition: flex-grow .3s ease;
  position: relative;
}
.ai-cost-foot {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ai-cost-foot-item { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; }
.ai-cost-foot-item span { color: var(--text-muted); }
.ai-cost-foot-item strong { font-size: 13px; font-weight: 800; }
.ai-cost-foot-item strong.green { color: #10b981; }

/* ---- Cost by Task list ---- */
.ai-cost-task-list { display: flex; flex-direction: column; gap: 6px; }
.ai-cost-task-row {
  display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center;
  padding: 7px 10px;
  background: var(--surface-2);
  border-radius: 8px;
  font-size: 12px;
}
.ai-cost-task-name { font-weight: 600; }
.ai-cost-task-pct { color: var(--text-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.ai-cost-task-amt { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; min-width: 48px; text-align: end; }

/* ---- A/B Tests ---- */
.ai-ab-list { display: flex; flex-direction: column; gap: 14px; }
.ai-ab-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  animation: aiInsPop .42s cubic-bezier(.2,.7,.3,1.2) backwards;
  animation-delay: calc(var(--ab-i, 0) * 80ms);
}
.ai-ab-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ai-ab-title { font-weight: 700; font-size: 13.5px; }
.ai-ab-meta { font-size: 11.5px; color: var(--text-muted); }
.ai-ab-lift { color: #10b981; font-weight: 800; margin-inline-start: 6px; }
.ai-ab-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ai-ab-variant {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  transition: border-color .2s ease, box-shadow .2s ease;
  position: relative;
}
.ai-ab-variant.winner {
  border-color: rgba(16,185,129,.4);
  background: linear-gradient(135deg, rgba(16,185,129,.06), transparent);
  box-shadow: 0 8px 18px -10px rgba(16,185,129,.4);
}
.ai-ab-v-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.ai-ab-v-letter {
  width: 26px; height: 26px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
}
.ai-ab-variant.winner .ai-ab-v-letter { background: #10b981; color: #fff; border-color: #10b981; }
.ai-ab-v-label { font-size: 12.5px; font-weight: 600; }
.ai-ab-win-chip {
  margin-inline-start: auto;
  font-size: 10.5px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(16,185,129,.15); color: #047857;
}
.ai-ab-v-stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ai-ab-v-stat {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: var(--surface-2);
  border-radius: 8px;
  gap: 2px;
}
.ai-ab-v-stat span { font-size: 10.5px; color: var(--text-muted); }
.ai-ab-v-stat strong { font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ai-ab-variant.winner .ai-ab-v-stat strong { color: #047857; }

/* ---- Integrations ---- */
.ai-integrations { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.ai-int-card {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: transform .15s ease, box-shadow .2s ease;
}
.ai-int-card:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(0,0,0,.2); }
.ai-int-icon {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.ai-int-name { font-weight: 700; font-size: 12.5px; }
.ai-int-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ai-int-status { font-size: 11px; font-weight: 700; }
.ai-int-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 999px;
  margin-inline-end: 4px;
  animation: aiIntDot 2s ease-in-out infinite;
}
.ai-int-dot.ok   { background: #10b981; }
.ai-int-dot.warn { background: #f59e0b; }
.ai-int-dot.err  { background: #ef4444; }
@keyframes aiIntDot {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

/* ---- Chat suggestions ---- */
.ai-chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 0 12px;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 10px;
}
.ai-sug-chip {
  font-size: 11.5px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .15s ease;
}
.ai-sug-chip:hover {
  background: var(--surface-3);
  border-color: var(--brand-300);
  transform: translateY(-1px);
}
.ai-chip-online {
  display: inline-flex; align-items: center; gap: 6px;
}
.ai-online-dot {
  width: 7px; height: 7px; border-radius: 999px;
  background: #10b981;
  animation: aiLivePulse 1.4s ease-in-out infinite;
}

/* Dark theme overrides */
[data-theme="dark"] .ai-hero { background: linear-gradient(135deg, rgba(160,32,240,.12), rgba(96,165,250,.06)); }
[data-theme="dark"] .ai-feed-item { background: var(--surface); }
[data-theme="dark"] .ai-model-row,
[data-theme="dark"] .ai-topic-row,
[data-theme="dark"] .ai-int-card,
[data-theme="dark"] .ai-ab-card { background: var(--surface); }
[data-theme="dark"] .ai-ab-variant { background: var(--surface-2); }
[data-theme="dark"] .ai-ins-cat { background: var(--surface-3); }
[data-theme="dark"] .ai-cost-num {
  background: linear-gradient(135deg, #c084fc, #93c5fd);
  -webkit-background-clip: text; background-clip: text;
}

/* Responsive */
@media (max-width: 1024px) {
  .ai-hero-grid { grid-template-columns: 1fr; }
  .ai-hero-stats { grid-template-columns: repeat(4, 1fr); }
  .ai-sentiment-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ai-hero-stats { grid-template-columns: 1fr 1fr; }
  .ai-ab-variants { grid-template-columns: 1fr; }
  .ai-engine-orb { width: 60px; height: 60px; }
  .ai-engine-orb svg { width: 60px; height: 60px; }
}

/* =====================================================================
   CRM HUB — Didar Integration Center  (namespace: crm-*)
   ===================================================================== */

/* Page head actions */
.crm-head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-btn-sync { font-weight: 700; }
.crm-btn-sync.is-syncing { background: var(--surface-3); color: var(--text); animation: crmSyncPulse 1s ease-in-out infinite; }
@keyframes crmSyncPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===== 1. HERO ===== */
.crm-hero { margin: 14px 0 18px; }
.crm-hero-card {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(30,109,255,0.05), rgba(160,32,240,0.04) 60%, rgba(16,185,129,0.04));
  border: 1px solid var(--border);
  overflow: hidden;
}
.crm-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 28%, rgba(30,109,255,0.18), transparent 38%),
    radial-gradient(circle at 88% 72%, rgba(160,32,240,0.16), transparent 42%);
  pointer-events: none;
  opacity: 0.7;
}
.crm-hero-left { display: flex; gap: 18px; align-items: center; position: relative; z-index: 1; }
.crm-hero-orb { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.crm-hero-orb svg { display: block; }
.crm-orb-ring { transform-origin: 55px 55px; }
.crm-orb-r1 { animation: crmOrbSpin 14s linear infinite; }
.crm-orb-r2 { animation: crmOrbSpinRev 10s linear infinite; }
.crm-orb-r3 { animation: crmOrbSpin 6s linear infinite; }
.crm-orb-core { animation: crmOrbCorePulse 2.4s ease-in-out infinite; }
@keyframes crmOrbSpin    { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes crmOrbSpinRev { from { transform: rotate(360deg); } to { transform: rotate(0deg); } }
@keyframes crmOrbCorePulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.18); }
}
.crm-orb-score {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.crm-orb-score-val {
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(135deg, #10b981, #1e6dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.crm-orb-score-lbl { font-size: 10px; color: var(--muted); margin-top: 4px; }
.crm-hero-meta { flex: 1; min-width: 0; }
.crm-hero-title {
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.crm-hero-status { font-size: 12px; animation: crmStatusPulse 1.6s ease-in-out infinite; }
.crm-hero-status-green  { color: #10b981; }
.crm-hero-status-amber  { color: #f59e0b; }
.crm-hero-status-red    { color: #ef4444; }
@keyframes crmStatusPulse {
  0%, 100% { opacity: 1; text-shadow: 0 0 8px currentColor; }
  50% { opacity: 0.5; text-shadow: 0 0 2px currentColor; }
}
.crm-hero-sub { font-size: 12px; color: var(--muted); font-weight: 400; margin-inline-start: 6px; }
.crm-hero-chips { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.crm-hero-chip { font-size: 11px; display: inline-flex; align-items: center; gap: 4px; }
.crm-hero-chip-i { font-size: 10px; }
.crm-hero-foot {
  font-size: 11px;
  color: var(--muted);
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.crm-hero-foot b { color: var(--text); font-weight: 600; }
.crm-hero-err { color: #ef4444; }

.crm-hero-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}
.crm-hero-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  position: relative;
}
.crm-hero-stat-i { font-size: 16px; opacity: 0.8; }
.crm-hero-stat-v {
  font-size: 22px;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1.1;
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.crm-hero-stat-u { font-size: 13px; font-weight: 600; opacity: 0.7; margin-inline-start: 2px; }
.crm-hero-stat-l { font-size: 11px; color: var(--muted); margin-top: 2px; }
.crm-hero-stat-bar {
  height: 4px;
  border-radius: 4px;
  background: var(--surface-3);
  margin-top: 8px;
  overflow: hidden;
}
.crm-hero-stat-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b 70%, #ef4444);
  border-radius: 4px;
  transition: width 0.6s ease;
}

/* ===== 3. SYNC MONITOR ===== */
.crm-monitor-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.crm-monitor-chart canvas { max-height: 220px; }
.crm-mon-legend { display: flex; gap: 12px; font-size: 11px; color: var(--muted); }
.crm-mon-leg { display: inline-flex; align-items: center; gap: 6px; }
.crm-mon-leg i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.crm-mon-leg-in i { background: #1e6dff; }
.crm-mon-leg-out i { background: #a020f0; }
.crm-mon-foot { font-size: 12px; color: var(--muted); display: flex; gap: 6px; margin-top: 10px; }
.crm-mon-foot b { color: var(--text); font-weight: 700; }

.crm-runs-card { display: flex; flex-direction: column; }
.crm-runs-filter { cursor: pointer; user-select: none; }
.crm-runs-list { display: flex; flex-direction: column; gap: 8px; max-height: 320px; overflow-y: auto; padding-inline-end: 4px; }
.crm-run {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.crm-run:hover { background: var(--surface-3); }
.crm-run-dir {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.crm-run-dir-inbound  { background: rgba(30,109,255,0.12); color: #1e6dff; }
.crm-run-dir-outbound { background: rgba(160,32,240,0.12); color: #a020f0; }
.crm-run-body { min-width: 0; }
.crm-run-src { font-size: 12px; font-weight: 600; font-family: 'Courier New', monospace; direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-run-meta { font-size: 11px; color: var(--muted); display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.crm-run-err { color: #ef4444; }
.crm-run-status { text-align: end; }
.crm-run-st {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
}
.crm-run-st-ok    { background: rgba(16,185,129,0.18); color: #10b981; }
.crm-run-st-retry { background: rgba(245,158,11,0.18); color: #f59e0b; animation: crmRetrySpin 1.6s linear infinite; }
.crm-run-st-fail  { background: rgba(239,68,68,0.18); color: #ef4444; }
@keyframes crmRetrySpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.crm-run-when { font-size: 10px; color: var(--muted); margin-top: 4px; }
.crm-run-fail { border-color: rgba(239,68,68,0.25); }

/* ===== 4. FUNNEL ===== */
.crm-funnel-card { margin-top: 14px; }
.crm-funnel-totals { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crm-funnel-totals b { font-weight: 700; }
.crm-funnel { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.crm-funnel-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: center;
}
.crm-funnel-bar {
  position: relative;
  min-height: 44px;
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.crm-funnel-bar:hover { transform: translateX(-4px); box-shadow: 0 4px 14px rgba(15,23,42,0.08); }
[dir="rtl"] .crm-funnel-bar:hover { transform: translateX(4px); }
.crm-funnel-bar-inner {
  position: absolute;
  inset: 0;
  border-radius: 10px;
  opacity: 0.92;
}
.crm-funnel-bar-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: #fff;
  font-weight: 700;
}
.crm-funnel-stage { font-size: 13px; }
.crm-funnel-count { font-size: 16px; opacity: 0.95; }
.crm-funnel-money {
  margin-inline-start: auto;
  font-size: 12px;
  background: rgba(255,255,255,0.2);
  padding: 3px 10px;
  border-radius: 8px;
  backdrop-filter: blur(4px);
}
.crm-funnel-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}
.crm-funnel-conv { color: var(--text); font-weight: 600; font-size: 12px; }
.crm-funnel-desc { font-size: 11px; }

.crm-funnel-sky    .crm-funnel-bar-inner { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.crm-funnel-blue   .crm-funnel-bar-inner { background: linear-gradient(135deg, #60a5fa, #1e6dff); }
.crm-funnel-purple .crm-funnel-bar-inner { background: linear-gradient(135deg, #c084fc, #8b5cf6); }
.crm-funnel-amber  .crm-funnel-bar-inner { background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.crm-funnel-green  .crm-funnel-bar-inner { background: linear-gradient(135deg, #34d399, #10b981); }
.crm-funnel-red    .crm-funnel-bar-inner { background: linear-gradient(135deg, #f87171, #ef4444); }

/* ===== 5. ACTIVITIES STREAM ===== */
.crm-activities-card { margin-top: 14px; }
.crm-act-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.crm-act-tab {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.crm-act-tab:hover { background: var(--surface-3); }
.crm-act-tab.is-active {
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.crm-act-stream { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-inline-end: 4px; }
.crm-act-empty {
  text-align: center;
  padding: 28px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
}
.crm-act-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border-inline-end: 3px solid;
  animation: crmActSlide 0.32s cubic-bezier(.2,.7,.3,1.05) backwards;
  animation-delay: calc(var(--act-i, 0) * 30ms);
  transition: background 0.15s;
}
.crm-act-item:hover { background: var(--surface-3); }
@keyframes crmActSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.crm-act-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}
.crm-act-line { font-size: 13px; }
.crm-act-line b { font-weight: 700; }
.crm-act-action { color: var(--muted); margin: 0 4px; }
.crm-act-meta { font-size: 11px; color: var(--muted); margin-top: 3px; }
.crm-act-when { text-align: end; font-size: 11px; color: var(--muted); }
.crm-act-sync {
  display: block;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  direction: ltr;
  opacity: 0.6;
  margin-top: 2px;
}
.crm-act-sky    { border-inline-end-color: #0ea5e9; }
.crm-act-sky    .crm-act-icon { background: rgba(14,165,233,0.14); }
.crm-act-blue   { border-inline-end-color: #1e6dff; }
.crm-act-blue   .crm-act-icon { background: rgba(30,109,255,0.14); }
.crm-act-green  { border-inline-end-color: #10b981; }
.crm-act-green  .crm-act-icon { background: rgba(16,185,129,0.14); }
.crm-act-amber  { border-inline-end-color: #f59e0b; }
.crm-act-amber  .crm-act-icon { background: rgba(245,158,11,0.14); }
.crm-act-purple { border-inline-end-color: #8b5cf6; }
.crm-act-purple .crm-act-icon { background: rgba(139,92,246,0.14); }
.crm-act-mint   { border-inline-end-color: #14b8a6; }
.crm-act-mint   .crm-act-icon { background: rgba(20,184,166,0.14); }
.crm-act-lemon  { border-inline-end-color: #eab308; }
.crm-act-lemon  .crm-act-icon { background: rgba(234,179,8,0.14); }
.crm-act-red    { border-inline-end-color: #ef4444; }
.crm-act-red    .crm-act-icon { background: rgba(239,68,68,0.14); }

/* ===== 6. CONTACTS OVERVIEW ===== */
.crm-contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.crm-contacts-stats {
  background: linear-gradient(160deg, rgba(30,109,255,0.06), rgba(160,32,240,0.05));
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.crm-cstats-title { font-size: 14px; font-weight: 700; }
.crm-cstats-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }
.crm-cstats-big {
  text-align: center;
  padding: 12px 0;
  border-block: 1px solid var(--border);
}
.crm-cstats-big-v {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.crm-cstats-big-l { font-size: 11px; color: var(--muted); margin-top: 4px; }
.crm-cstats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.crm-cstats-cell {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}
.crm-cstats-v { font-size: 16px; font-weight: 700; }
.crm-cstats-l { font-size: 10px; color: var(--muted); margin-top: 2px; }

.crm-contact-list { display: flex; flex-direction: column; gap: 8px; }
.crm-contact {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 8px;
  background: var(--surface-2);
  transition: background 0.15s;
}
.crm-contact:hover { background: var(--surface-3); }
/* contactهایی که با یک مشتری واقعی تطبیق دارند → کلیک‌پذیر به پروفایل ۳۶۰° (RFC-0008 phase 3) */
.crm-contact-link { cursor: pointer; }
.crm-contact-link:hover { background: var(--surface-3); box-shadow: inset -2px 0 0 var(--brand-400, #6fb98f); }
.crm-contact-link .crm-contact-name { color: var(--brand-700, #6d28d9); }
[data-theme="dark"] .crm-contact-link .crm-contact-name { color: #c4b5fd; }
.crm-contact-av {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}
.crm-contact-av-dupe {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.crm-contact-body { min-width: 0; }
.crm-contact-name { font-size: 12.5px; font-weight: 600; }
.crm-contact-tag {
  font-size: 9px;
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 6px;
  margin-inline-start: 4px;
  font-weight: 500;
  color: var(--muted);
}
.crm-contact-meta { font-size: 10.5px; color: var(--muted); margin-top: 2px; direction: ltr; text-align: start; }
.crm-contact-when { font-size: 10px; color: var(--muted); }
.crm-contact-val { text-align: end; }
.crm-contact-total { font-size: 12.5px; font-weight: 700; color: #10b981; }
.crm-contact-deals { font-size: 10px; color: var(--muted); margin-top: 2px; }
.crm-contact-action { display: flex; flex-direction: column; align-items: end; gap: 3px; }

/* ===== 7. WEBHOOK ERRORS ===== */
.crm-errors-card {
  margin-top: 14px;
  border: 1px solid rgba(239,68,68,0.22);
}
.crm-err-empty {
  text-align: center;
  padding: 24px;
  color: #10b981;
  font-weight: 600;
  background: rgba(16,185,129,0.05);
  border-radius: 10px;
}
.crm-errors-list { display: flex; flex-direction: column; gap: 10px; }
.crm-err-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border-radius: 10px;
  background: rgba(239,68,68,0.04);
  border: 1px solid rgba(239,68,68,0.15);
}
.crm-err-code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 48px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 18px;
  font-family: 'Courier New', monospace;
}
.crm-err-code-srv { background: rgba(239,68,68,0.16); color: #ef4444; }
.crm-err-code-cli { background: rgba(245,158,11,0.16); color: #f59e0b; }
.crm-err-ep { font-family: 'Courier New', monospace; font-size: 12px; direction: ltr; text-align: start; font-weight: 600; }
.crm-err-msg { font-size: 12.5px; margin-top: 3px; }
.crm-err-payload { font-size: 11px; color: var(--muted); margin-top: 3px; }
.crm-err-payload code { background: var(--surface-3); padding: 1px 6px; border-radius: 4px; direction: ltr; }
.crm-err-meta { text-align: end; display: flex; flex-direction: column; align-items: end; gap: 4px; }
.crm-err-when { font-size: 11px; color: var(--muted); }
.crm-err-retry { font-size: 11px; color: var(--text); font-weight: 600; }

/* ===== 8. FIELD MAPPING ===== */
.crm-mapping-card { margin-top: 14px; }
.crm-map-legend { display: flex; gap: 10px; font-size: 11px; color: var(--muted); }
.crm-map-leg { display: inline-flex; align-items: center; gap: 4px; }
.crm-map-leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.crm-map-leg-ok i      { background: #10b981; }
.crm-map-leg-partial i { background: #f59e0b; }
.crm-map-leg-missing i { background: #ef4444; }

.crm-map-list { display: flex; flex-direction: column; gap: 6px; }
.crm-map-row {
  display: grid;
  grid-template-columns: 1.2fr 36px 1.2fr 1.6fr;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--surface-2);
  border-radius: 8px;
  border: 1px solid var(--border);
  transition: background 0.15s;
}
.crm-map-row:hover { background: var(--surface-3); }
.crm-map-row-missing { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); }
.crm-map-row-partial { border-color: rgba(245,158,11,0.22); }
.crm-map-side { display: flex; flex-direction: column; gap: 2px; }
.crm-map-lbl { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.crm-map-field {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  direction: ltr;
  text-align: start;
  background: transparent;
  font-weight: 600;
}
.crm-map-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 32px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
}
.crm-map-arrow-two   { background: rgba(30,109,255,0.12); color: #1e6dff; }
.crm-map-arrow-one   { background: rgba(160,32,240,0.10); color: #a020f0; }
.crm-map-arrow-none  { background: rgba(239,68,68,0.10); color: #ef4444; }
.crm-map-info { font-size: 11px; color: var(--muted); }
.crm-map-info-row { display: flex; gap: 6px; align-items: center; }
.crm-map-type {
  font-size: 10px;
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: 'Courier New', monospace;
  direction: ltr;
}
.crm-map-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
}
.crm-map-status-mapped  { background: rgba(16,185,129,0.14); color: #10b981; }
.crm-map-status-partial { background: rgba(245,158,11,0.14); color: #f59e0b; }
.crm-map-status-missing { background: rgba(239,68,68,0.14); color: #ef4444; }
.crm-map-notes { font-size: 10.5px; margin-top: 3px; }

/* ===== 9. API USAGE ===== */
.crm-api-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
.crm-api-quota { text-align: end; min-width: 220px; }
.crm-quota-text { font-size: 12px; color: var(--muted); }
.crm-quota-text b { color: var(--text); font-weight: 700; }
.crm-quota-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 6px;
}
.crm-quota-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #f59e0b 70%, #ef4444);
  border-radius: 6px;
  transition: width 0.6s ease;
}
.crm-api-chart canvas { max-height: 220px; }
.crm-api-eps { display: flex; flex-direction: column; gap: 10px; max-height: 320px; overflow-y: auto; padding-inline-end: 4px; }
.crm-api-ep { padding: 8px; border-radius: 8px; background: var(--surface-2); }
.crm-api-ep-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.crm-api-ep-name { font-family: 'Courier New', monospace; font-size: 11.5px; direction: ltr; text-align: start; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-api-ep-count { font-size: 12px; font-weight: 700; }
.crm-api-ep-bar { height: 4px; background: var(--surface-3); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.crm-api-ep-bar > span { display: block; height: 100%; border-radius: 4px; transition: width 0.6s ease; }
.crm-api-ep-blue   .crm-api-ep-bar > span { background: linear-gradient(90deg, #60a5fa, #1e6dff); }
.crm-api-ep-green  .crm-api-ep-bar > span { background: linear-gradient(90deg, #34d399, #10b981); }
.crm-api-ep-amber  .crm-api-ep-bar > span { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.crm-api-ep-purple .crm-api-ep-bar > span { background: linear-gradient(90deg, #c084fc, #8b5cf6); }
.crm-api-ep-mint   .crm-api-ep-bar > span { background: linear-gradient(90deg, #5eead4, #14b8a6); }
.crm-api-ep-sky    .crm-api-ep-bar > span { background: linear-gradient(90deg, #38bdf8, #0ea5e9); }
.crm-api-ep-lemon  .crm-api-ep-bar > span { background: linear-gradient(90deg, #facc15, #eab308); }
.crm-api-ep-share { font-size: 10px; color: var(--muted); margin-top: 3px; }

/* Dark theme tweaks */
[data-theme="dark"] .crm-hero-card { background: linear-gradient(135deg, rgba(30,109,255,0.08), rgba(160,32,240,0.07) 60%, rgba(16,185,129,0.07)); }
[data-theme="dark"] .crm-act-item { background: var(--surface-3); }
[data-theme="dark"] .crm-contact { background: var(--surface-3); }
[data-theme="dark"] .crm-run     { background: var(--surface-3); }
[data-theme="dark"] .crm-map-row { background: var(--surface-3); }
[data-theme="dark"] .crm-api-ep  { background: var(--surface-3); }

/* Responsive */
@media (max-width: 1280px) {
  .crm-contacts-grid { grid-template-columns: 1fr 1fr; }
  .crm-monitor-grid { grid-template-columns: 1fr; }
  .crm-api-grid { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .crm-hero-card { grid-template-columns: 1fr; }
  .crm-hero-stats { grid-template-columns: repeat(4, 1fr); }
  .crm-funnel-row { grid-template-columns: 1fr; }
  .crm-funnel-side { padding-inline: 6px; }
  .crm-map-row { grid-template-columns: 1fr 36px 1fr; grid-template-rows: auto auto; }
  .crm-map-info { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .crm-hero-stats { grid-template-columns: 1fr 1fr; }
  .crm-contacts-grid { grid-template-columns: 1fr; }
  .crm-err-item { grid-template-columns: 48px 1fr; }
  .crm-err-meta { grid-column: 1 / -1; align-items: start; flex-direction: row; gap: 8px; }
}

/* =====================================================================
   WORKSPACE — PHASE 3: FINANCE TAB  (namespace: ws-fin-*)
   ===================================================================== */

/* Tab alert dot */
.ws-dr-tab-dot {
  color: #ef4444;
  font-size: 8px;
  margin-inline-start: 4px;
  animation: wsFinDotPulse 1.4s ease-in-out infinite;
}
@keyframes wsFinDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.ws-fin-body { display: flex; flex-direction: column; gap: 14px; }

/* Lock banner — top of tab when sessions are locked */
.ws-fin-lock-banner {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(239,68,68,0.10), rgba(245,158,11,0.08));
  border: 1px solid rgba(239,68,68,0.22);
  animation: wsFinLockSlide 0.42s cubic-bezier(.2,.7,.3,1.05);
}
@keyframes wsFinLockSlide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.ws-fin-lock-icon {
  font-size: 22px;
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239,68,68,0.14);
  border-radius: 10px;
  animation: wsFinLockShake 2.2s ease-in-out infinite;
}
@keyframes wsFinLockShake {
  0%, 100% { transform: rotate(0deg); }
  10%, 30% { transform: rotate(-6deg); }
  20%, 40% { transform: rotate(6deg); }
  50% { transform: rotate(0deg); }
}
.ws-fin-lock-title { font-size: 13px; font-weight: 700; color: #ef4444; }
.ws-fin-lock-sub { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ws-fin-lock-sub b { color: var(--text); font-weight: 700; }
.ws-fin-lock-cta { font-size: 11px; padding: 6px 10px; }

/* Role toggle */
.ws-fin-role {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px dashed var(--border);
  border-radius: 10px;
  flex-wrap: wrap;
}
.ws-fin-role-lbl { font-size: 12px; color: var(--muted); }
.ws-fin-role-btn {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  color: var(--text);
}
.ws-fin-role-btn:hover { background: var(--surface-3); }
.ws-fin-role-btn.is-active {
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.ws-fin-role-hint { font-size: 10.5px; color: var(--muted); margin-inline-start: auto; flex-basis: 100%; padding: 4px 0 0; }
@media (min-width: 720px) { .ws-fin-role-hint { flex-basis: auto; padding: 0; } }

/* Summary card */
.ws-fin-summary {
  background: linear-gradient(135deg, rgba(30,109,255,0.05), rgba(16,185,129,0.04) 60%, rgba(160,32,240,0.04));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
}
.ws-fin-sum-head { display: flex; justify-content: space-between; align-items: baseline; }
.ws-fin-sum-course { font-size: 13px; font-weight: 700; }
.ws-fin-sum-price {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ws-fin-sum-progress { margin-top: 10px; }
.ws-fin-sum-bar {
  height: 8px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
}
.ws-fin-sum-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #1e6dff);
  border-radius: 6px;
  transition: width 0.6s ease;
}
.ws-fin-sum-bar-label { font-size: 11px; color: var(--muted); margin-top: 4px; }
.ws-fin-sum-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.ws-fin-sum-cell {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 8px 10px;
  border-inline-start: 3px solid;
}
.ws-fin-cell-paid      { border-color: #10b981; }
.ws-fin-cell-pending   { border-color: #f59e0b; }
.ws-fin-cell-overdue   { border-color: #ef4444; }
.ws-fin-cell-zero      { border-color: var(--border); }
.ws-fin-cell-remaining { border-color: #8b5cf6; }
.ws-fin-cell-l { font-size: 10px; color: var(--muted); }
.ws-fin-cell-v { font-size: 13.5px; font-weight: 700; margin-top: 2px; }
.ws-fin-next {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  padding: 6px 10px;
  background: rgba(245,158,11,0.08);
  border-radius: 8px;
  border-inline-start: 3px solid #f59e0b;
}
.ws-fin-next b { color: var(--text); font-weight: 700; }

/* Section */
.ws-fin-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
}
.ws-fin-section-title {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.ws-fin-section-count { font-size: 10.5px; color: var(--muted); font-weight: 500; }

/* Pre-payment */
.ws-fin-prepay {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(16,185,129,0.06);
  border-radius: 10px;
}
.ws-fin-prepay-amt { font-size: 16px; font-weight: 700; color: #10b981; }
.ws-fin-prepay-meta { font-size: 11px; color: var(--muted); }

/* Installments */
.ws-fin-inst-list { display: flex; flex-direction: column; gap: 8px; }
.ws-fin-inst {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border-inline-end: 3px solid var(--border);
  transition: background 0.15s;
}
.ws-fin-inst:hover { background: var(--surface-3); }
.ws-fin-inst-paid     { border-inline-end-color: #10b981; }
.ws-fin-inst-overdue  { border-inline-end-color: #ef4444; background: rgba(239,68,68,0.04); }
.ws-fin-inst-pending  { border-inline-end-color: #f59e0b; }
.ws-fin-inst-num {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-3);
  font-weight: 800;
  font-size: 13px;
}
.ws-fin-inst-paid .ws-fin-inst-num    { background: rgba(16,185,129,0.18); color: #10b981; }
.ws-fin-inst-overdue .ws-fin-inst-num { background: rgba(239,68,68,0.18); color: #ef4444; }
.ws-fin-inst-amt { font-size: 13px; font-weight: 700; }
.ws-fin-inst-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ws-fin-inst-action { display: flex; flex-direction: column; align-items: end; gap: 4px; }
.ws-fin-inst-when { font-size: 10px; color: var(--muted); }

.ws-fin-mini-btn {
  font-size: 11px;
  padding: 4px 8px;
  min-height: 0;
  height: auto;
}
.ws-fin-mini-btn-danger { color: #ef4444; border-color: rgba(239,68,68,0.3); }

/* Cheque add form (advisor only) */
.ws-fin-cheque-add {
  background: rgba(30,109,255,0.04);
  border: 1px dashed rgba(30,109,255,0.3);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.ws-fin-cheque-add-head { font-size: 13px; font-weight: 700; margin-bottom: 10px; color: #1e6dff; }
.ws-fin-cheque-add-grid {
  display: grid;
  grid-template-columns: 1fr 140px 1fr 1fr;
  gap: 10px;
  align-items: start;
}
.ws-fin-cheque-add-grid .ws-dr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ws-fin-cheque-add-grid .ws-dr-field > span {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}
.ws-fin-cheque-add-grid input,
.ws-fin-cheque-add-grid select {
  padding: 7px 9px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  width: 100%;
}
.ws-fin-cheque-add-foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.ws-fin-cheque-submit-btn {
  font-size: 13px;
  padding: 10px 20px;
  font-weight: 700;
  min-width: 240px;
}

/* Cheque list */
.ws-fin-cheque-list { display: flex; flex-direction: column; gap: 8px; }
.ws-fin-empty {
  text-align: center;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
  background: var(--surface-2);
  border-radius: 8px;
}
.ws-fin-cheque {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-2);
  border-inline-end: 3px solid var(--border);
}
.ws-fin-cheque-submitted       { border-inline-end-color: #0ea5e9; }
.ws-fin-cheque-pending-finance { border-inline-end-color: #f59e0b; background: rgba(245,158,11,0.04); }
.ws-fin-cheque-cashed          { border-inline-end-color: #10b981; }
.ws-fin-cheque-bounced         { border-inline-end-color: #ef4444; background: rgba(239,68,68,0.04); }
.ws-fin-cheque-img {
  width: 44px; height: 56px;
  border-radius: 6px;
  background: linear-gradient(160deg, #fef3c7, #fde68a);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 1px dashed rgba(245,158,11,0.4);
}
.ws-fin-cheque-bounced .ws-fin-cheque-img {
  background: linear-gradient(160deg, rgba(239,68,68,0.16), rgba(239,68,68,0.08));
  border-color: rgba(239,68,68,0.4);
  filter: grayscale(0.4);
}
.ws-fin-cheque-line1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ws-fin-cheque-num   { font-family: 'Courier New', monospace; font-weight: 700; font-size: 13px; direction: ltr; }
.ws-fin-cheque-bank  { font-size: 12px; color: var(--muted); }
.ws-fin-cheque-amt   { font-size: 13px; font-weight: 700; color: var(--text); margin-inline-start: auto; }
.ws-fin-cheque-line2 { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.ws-fin-cheque-line3 { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.ws-fin-cheque-line3 b { color: var(--text); font-weight: 700; }
.ws-fin-cheque-action { display: flex; flex-direction: column; align-items: end; gap: 6px; min-width: 110px; }
.ws-fin-cheque-buttons { display: flex; gap: 4px; }

/* Offline sessions */
.ws-fin-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
  gap: 8px;
}
.ws-fin-session {
  position: relative;
  text-align: center;
  padding: 10px 6px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 11px;
  transition: transform 0.15s;
  cursor: help;
}
.ws-fin-session:hover { transform: translateY(-1px); }
.ws-fin-session-num {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--surface-3);
  line-height: 22px;
  font-weight: 700;
  font-size: 11px;
  margin-bottom: 4px;
}
.ws-fin-session-topic { font-size: 10.5px; font-weight: 600; }
.ws-fin-session-date { font-size: 10px; color: var(--muted); margin-top: 2px; }
.ws-fin-session-st {
  position: absolute;
  top: 4px; inset-inline-end: 6px;
  font-size: 11px;
}
.ws-fin-session-done {
  background: rgba(16,185,129,0.10);
  border-color: rgba(16,185,129,0.32);
}
.ws-fin-session-done .ws-fin-session-num { background: #10b981; color: #fff; }
.ws-fin-session-done .ws-fin-session-st { color: #10b981; font-weight: 700; }
.ws-fin-session-future {
  background: rgba(14,165,233,0.06);
  border-color: rgba(14,165,233,0.22);
}
.ws-fin-session-future .ws-fin-session-num { background: rgba(14,165,233,0.18); color: #0ea5e9; }
.ws-fin-session-future .ws-fin-session-st { color: #94a3b8; }
.ws-fin-session-locked {
  background: rgba(239,68,68,0.06);
  border-color: rgba(239,68,68,0.32);
  opacity: 0.92;
}
.ws-fin-session-locked .ws-fin-session-num { background: rgba(239,68,68,0.18); color: #ef4444; }
.ws-fin-session-locked .ws-fin-session-st  { color: #ef4444; animation: wsFinLockShake 2.6s ease-in-out infinite; }
.ws-fin-session-locked .ws-fin-session-topic,
.ws-fin-session-locked .ws-fin-session-date { opacity: 0.6; }

.ws-fin-sessions-legend {
  display: flex;
  gap: 12px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--muted);
  justify-content: center;
  flex-wrap: wrap;
}
.ws-fin-leg { display: inline-flex; align-items: center; gap: 5px; }
.ws-fin-leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.ws-fin-leg-done i   { background: #10b981; }
.ws-fin-leg-future i { background: rgba(14,165,233,0.4); border: 1px solid #0ea5e9; }
.ws-fin-leg-locked i { background: #ef4444; }

/* Activity log */
.ws-fin-log { display: flex; flex-direction: column; gap: 6px; }
.ws-fin-log-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 11.5px;
}
.ws-fin-log-icon { font-size: 13px; }
.ws-fin-log-text { color: var(--text); }
.ws-fin-log-meta { font-size: 10px; color: var(--muted); }

/* Dark theme tweaks */
[data-theme="dark"] .ws-fin-summary { background: linear-gradient(135deg, rgba(30,109,255,0.10), rgba(16,185,129,0.08) 60%, rgba(160,32,240,0.08)); }
[data-theme="dark"] .ws-fin-section { background: var(--surface-2); }
[data-theme="dark"] .ws-fin-inst,
[data-theme="dark"] .ws-fin-cheque { background: var(--surface-3); }

/* Responsive */
@media (max-width: 1024px) {
  .ws-fin-sum-grid { grid-template-columns: repeat(2, 1fr); }
  .ws-fin-cheque-add-grid { grid-template-columns: 1fr 1fr; }
  .ws-fin-cheque-add-grid button { grid-column: 1 / -1; }
}

/* =====================================================================
   WORKSPACE — Coach tab AI upgrade (ws-coach-ai-*, ws-coach-prob-*, ws-coach-sent-*, ws-coach-call-*, ws-coach-nba-*)
   ===================================================================== */

.ws-coach-ai-hero {
  background: linear-gradient(135deg, rgba(160,32,240,0.06), rgba(30,109,255,0.05) 60%, rgba(16,185,129,0.05));
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
}
.ws-coach-ai-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 88% 12%, rgba(160,32,240,0.10), transparent 50%);
  pointer-events: none;
}
.ws-coach-ai-head { display: flex; justify-content: space-between; align-items: start; position: relative; }
.ws-coach-ai-tag {
  font-size: 10px;
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.ws-coach-ai-spark { animation: aiTaskFlash 1.4s ease-in-out infinite; }
.ws-coach-ai-title { font-size: 14px; font-weight: 700; margin-top: 2px; }
.ws-coach-explain-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 11px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.ws-coach-explain-btn:hover { color: var(--text); background: var(--surface-2); }

.ws-coach-prob { margin-top: 10px; position: relative; }
.ws-coach-prob-val {
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
}
.ws-coach-prob-val span { font-size: 22px; font-weight: 600; opacity: 0.6; margin-inline-start: 2px; }
.ws-coach-prob-high { background: linear-gradient(135deg, #10b981, #1e6dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-coach-prob-mid  { background: linear-gradient(135deg, #f59e0b, #a020f0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-coach-prob-low  { background: linear-gradient(135deg, #ef4444, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-coach-prob-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 8px;
}
.ws-coach-prob-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981);
  border-radius: 6px;
  animation: wsCoachProbFill 0.8s ease-out;
}
@keyframes wsCoachProbFill { from { width: 0; } }
.ws-coach-prob-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 10px;
}
.ws-coach-prob-meta b { color: var(--text); font-weight: 700; }

/* Factors breakdown */
.ws-coach-factors {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--border);
  animation: wsCoachFactorReveal 0.32s ease-out;
}
@keyframes wsCoachFactorReveal { from { opacity: 0; max-height: 0; } to { opacity: 1; max-height: 600px; } }
.ws-coach-factors-title { font-size: 12px; font-weight: 700; margin-bottom: 8px; }
.ws-coach-factor {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  gap: 8px;
  align-items: center;
  margin-bottom: 4px;
  font-size: 11px;
}
.ws-coach-factor-lbl { color: var(--text); font-weight: 600; }
.ws-coach-factor-bar { height: 6px; background: var(--surface-3); border-radius: 4px; overflow: hidden; }
.ws-coach-factor-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1e6dff, #a020f0);
  border-radius: 4px;
}
.ws-coach-factor-val { text-align: end; font-weight: 700; color: var(--text); }
.ws-coach-factor-why {
  grid-column: 1 / -1;
  font-size: 10.5px;
  color: var(--muted);
  padding-block: 4px 8px;
  border-bottom: 1px dotted var(--border);
  margin-bottom: 4px;
}
.ws-coach-factor:last-child .ws-coach-factor-why { border-bottom: 0; }

/* Mini help text */
.ws-coach-mini-help { font-size: 10.5px; font-weight: 400; }

/* Predictions warn highlight */
.ws-coach-pred-warn .ws-coach-pred-val { color: #ef4444; }
.ws-coach-pred-warn { border-color: rgba(239,68,68,0.32); background: rgba(239,68,68,0.05); }

/* Sentiment timeline */
.ws-coach-sent-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
}
.ws-coach-sent-trend-up   { color: #10b981; background: rgba(16,185,129,0.10); }
.ws-coach-sent-trend-down { color: #ef4444; background: rgba(239,68,68,0.10); }
.ws-coach-sent-trend-flat { color: var(--muted); background: var(--surface-3); }
.ws-coach-sent-row { padding: 6px 0; }
.ws-coach-sent-svg { width: 100%; height: 60px; display: block; }
.ws-coach-sent-points {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  margin-top: 8px;
}
.ws-coach-sent-pt {
  text-align: center;
  padding: 6px 4px;
  border-radius: 8px;
  background: var(--surface-2);
  font-size: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ws-coach-sent-pt-icon { font-size: 16px; }
.ws-coach-sent-pt-lbl { font-weight: 600; color: var(--text); }
.ws-coach-sent-pt-when { color: var(--muted); }
.ws-coach-sent-pt-pos { background: rgba(16,185,129,0.06); }
.ws-coach-sent-pt-mid { background: rgba(245,158,11,0.06); }
.ws-coach-sent-pt-neg { background: rgba(239,68,68,0.06); }

/* Call quality */
.ws-coach-calls { display: flex; flex-direction: column; gap: 10px; }
.ws-coach-call {
  background: var(--surface-2);
  border-radius: 12px;
  padding: 12px;
  display: grid;
  grid-template-columns: 1fr 70px;
  grid-template-rows: auto auto auto;
  gap: 8px 12px;
  border-inline-end: 3px solid;
}
.ws-coach-call-pos { border-inline-end-color: #10b981; }
.ws-coach-call-mid { border-inline-end-color: #f59e0b; }
.ws-coach-call-neg { border-inline-end-color: #ef4444; }
.ws-coach-call-head { display: flex; flex-direction: column; gap: 2px; }
.ws-coach-call-title { font-size: 12.5px; font-weight: 700; }
.ws-coach-call-meta { font-size: 10.5px; color: var(--muted); }
.ws-coach-call-avg {
  grid-row: 1 / 3;
  grid-column: 2;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  align-self: center;
  background: linear-gradient(135deg, #1e6dff, #a020f0);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ws-coach-call-pos .ws-coach-call-avg { background: linear-gradient(135deg, #10b981, #1e6dff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-coach-call-neg .ws-coach-call-avg { background: linear-gradient(135deg, #ef4444, #f59e0b); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ws-coach-call-axes { display: flex; flex-direction: column; gap: 4px; grid-column: 1; }
.ws-coach-call-axis {
  display: grid;
  grid-template-columns: 80px 1fr 26px;
  gap: 6px;
  align-items: center;
  font-size: 10.5px;
}
.ws-coach-call-axis-lbl { color: var(--muted); }
.ws-coach-call-axis-bar { height: 4px; background: var(--surface-3); border-radius: 3px; overflow: hidden; }
.ws-coach-call-axis-bar > span { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b 50%, #10b981); border-radius: 3px; }
.ws-coach-call-axis-val { text-align: end; font-weight: 700; }
.ws-coach-call-hl {
  grid-column: 1 / -1;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--surface-3);
  padding: 6px 10px;
  border-radius: 6px;
}
.ws-coach-call-hl b { color: var(--text); font-weight: 600; }

/* Next Best Actions */
.ws-coach-nba { display: flex; flex-direction: column; gap: 8px; }
.ws-coach-nba-item {
  display: grid;
  grid-template-columns: 26px 32px 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  border-inline-end: 3px solid #1e6dff;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ws-coach-nba-item:hover { transform: translateX(-2px); box-shadow: 0 3px 12px rgba(15,23,42,0.06); }
[dir="rtl"] .ws-coach-nba-item:hover { transform: translateX(2px); }
.ws-coach-nba-rank {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
}
.ws-coach-nba-item:nth-child(2) .ws-coach-nba-rank { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.ws-coach-nba-item:nth-child(3) .ws-coach-nba-rank { background: linear-gradient(135deg, #fcd34d, #d97706); }
.ws-coach-nba-icon { font-size: 20px; }
.ws-coach-nba-lbl { font-size: 12.5px; font-weight: 700; }
.ws-coach-nba-why {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.ws-coach-nba-why-tag {
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
.ws-coach-nba-score {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-600, #0f766e);
  padding-inline-end: 4px;
}
.ws-coach-nba-go { font-size: 11px; padding: 5px 10px; min-height: 0; }

/* Triggers + risks side-by-side */
.ws-coach-trig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ws-coach-section-trig,
.ws-coach-section-risk {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
}
.ws-coach-triggers { display: flex; flex-direction: column; gap: 6px; }
.ws-coach-trig {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 8px;
}
.ws-coach-trig-i { font-size: 17px; text-align: center; }
.ws-coach-trig-lbl { font-size: 12px; font-weight: 700; }
.ws-coach-trig-why { font-size: 10.5px; color: var(--muted); margin-top: 1px; }
.ws-coach-risks { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }

/* Do/Dont grid */
.ws-coach-dd-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Dark theme */
[data-theme="dark"] .ws-coach-ai-hero { background: linear-gradient(135deg, rgba(160,32,240,0.10), rgba(30,109,255,0.08) 60%, rgba(16,185,129,0.08)); }
[data-theme="dark"] .ws-coach-call,
[data-theme="dark"] .ws-coach-nba-item,
[data-theme="dark"] .ws-coach-sent-pt,
[data-theme="dark"] .ws-coach-trig { background: var(--surface-3); }

/* Responsive */
@media (max-width: 720px) {
  .ws-coach-sent-points { grid-template-columns: repeat(3, 1fr); }
  .ws-coach-trig-grid { grid-template-columns: 1fr; }
  .ws-coach-dd-grid { grid-template-columns: 1fr; }
  .ws-coach-nba-item { grid-template-columns: 26px 32px 1fr; }
  .ws-coach-nba-score, .ws-coach-nba-go { grid-column: 1 / -1; }
  .ws-coach-factor { grid-template-columns: 1fr 60px; }
  .ws-coach-factor-bar { grid-column: 1 / -1; }
}

/* =====================================================================
   WORKSPACE — Smart Inbox + Sequences (Phase 3.2)
   namespace: ws-inbox-* (enhancements), ws-seq-* (new)
   ===================================================================== */

/* Inbox filters */
.ws-inbox-filters {
  display: flex;
  gap: 4px;
  padding: 8px 0 10px;
  flex-wrap: wrap;
  border-bottom: 1px dashed var(--border);
  margin-bottom: 8px;
}
.ws-inbox-filt {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11.5px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
}
.ws-inbox-filt:hover { background: var(--surface-3); }
.ws-inbox-filt.is-active {
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.ws-inbox-empty {
  text-align: center;
  padding: 18px;
  color: var(--muted);
  font-size: 12px;
}

/* Inbox item enhancements */
.ws-inbox-item.is-expanded {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 4px 14px rgba(15,23,42,0.06);
}
.ws-inbox-item-unread { position: relative; }
.ws-inbox-unread-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #1e6dff;
  margin-inline-end: 4px;
  animation: wsInboxUnreadPulse 1.6s ease-in-out infinite;
}
@keyframes wsInboxUnreadPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(30,109,255,0.4); }
  50% { opacity: 0.5; box-shadow: 0 0 0 4px rgba(30,109,255,0); }
}
.ws-inbox-line1 { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ws-inbox-channel {
  font-size: 9.5px;
  background: var(--surface-3);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--muted);
  font-weight: 500;
}
.ws-inbox-preview {
  margin-top: 6px;
  padding: 6px 10px;
  background: var(--surface-3);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--muted);
  border-inline-start: 2px solid #a020f0;
  display: flex;
  gap: 6px;
  align-items: start;
}
.ws-inbox-preview-icon { font-size: 12px; flex-shrink: 0; }

.ws-inbox-actions { display: flex; gap: 4px; align-items: center; }
.ws-inbox-toggle {
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  color: #fff;
  border: 0;
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ws-inbox-toggle:hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(160,32,240,0.3); }
.ws-inbox-item.is-expanded .ws-inbox-toggle { animation: wsInboxToggleRotate 0.32s ease-out; }
@keyframes wsInboxToggleRotate { from { transform: rotate(-180deg); } to { transform: rotate(0); } }

/* AI suggestions */
.ws-inbox-ai {
  margin-top: 10px;
  padding: 10px;
  background: linear-gradient(135deg, rgba(160,32,240,0.04), rgba(30,109,255,0.03));
  border: 1px solid rgba(160,32,240,0.18);
  border-radius: 10px;
  animation: wsInboxAiReveal 0.32s ease-out;
}
@keyframes wsInboxAiReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ws-inbox-ai-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.ws-inbox-ai-tag {
  font-size: 11.5px;
  font-weight: 700;
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ws-inbox-ai-meta { font-size: 10.5px; color: var(--muted); }
.ws-inbox-ai-sug {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  transition: border-color 0.15s;
}
.ws-inbox-ai-sug:last-child { margin-bottom: 0; }
.ws-inbox-ai-sug:hover { border-color: rgba(160,32,240,0.32); }
.ws-inbox-ai-sug-positive { border-inline-start: 3px solid #10b981; }
.ws-inbox-ai-sug-neutral  { border-inline-start: 3px solid #0ea5e9; }
.ws-inbox-ai-sug-consult  { border-inline-start: 3px solid #8b5cf6; }
.ws-inbox-ai-sug-urgency  { border-inline-start: 3px solid #f59e0b; }
.ws-inbox-ai-sug-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.ws-inbox-ai-sug-icon { font-size: 12px; }
.ws-inbox-ai-sug-tone { font-weight: 600; }
.ws-inbox-ai-sug-text { font-size: 12px; line-height: 1.6; }
.ws-inbox-ai-sug-actions { display: flex; gap: 4px; margin-top: 6px; }
.ws-inbox-mini-btn { font-size: 10.5px; padding: 4px 8px; min-height: 0; }
.ws-inbox-mini-btn.is-sent { background: #10b981; color: #fff; }

/* ===== SEQUENCES ===== */
.ws-seq-card { margin: 14px 0; }
.ws-seq-tabs { display: flex; gap: 4px; }
.ws-seq-tab {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
}
.ws-seq-tab:hover { background: var(--surface-3); }
.ws-seq-tab.is-active {
  background: linear-gradient(135deg, #10b981, #1e6dff);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}
.ws-seq-tab-badge {
  background: rgba(255,255,255,0.25);
  color: inherit;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  margin-inline-start: 4px;
}
.ws-seq-tab:not(.is-active) .ws-seq-tab-badge {
  background: var(--surface-3);
  color: var(--text);
}

.ws-seq-body { padding-top: 8px; }
.ws-seq-panel { display: none; }
.ws-seq-panel.is-active { display: block; }
.ws-seq-empty {
  text-align: center;
  padding: 32px;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 12.5px;
}

/* Templates grid */
.ws-seq-templates {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.ws-seq-tpl {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  transition: transform 0.15s, box-shadow 0.15s;
  border-inline-start: 3px solid;
}
.ws-seq-tpl:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,23,42,0.08); }
.ws-seq-tone-sky    { border-inline-start-color: #0ea5e9; }
.ws-seq-tone-amber  { border-inline-start-color: #f59e0b; }
.ws-seq-tone-green  { border-inline-start-color: #10b981; }
.ws-seq-tone-purple { border-inline-start-color: #8b5cf6; }

.ws-seq-tpl-head { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; }
.ws-seq-tpl-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  border: 1px solid var(--border);
}
.ws-seq-tone-sky    .ws-seq-tpl-icon { background: rgba(14,165,233,0.10); border-color: rgba(14,165,233,0.32); }
.ws-seq-tone-amber  .ws-seq-tpl-icon { background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.32); }
.ws-seq-tone-green  .ws-seq-tpl-icon { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.32); }
.ws-seq-tone-purple .ws-seq-tpl-icon { background: rgba(139,92,246,0.10); border-color: rgba(139,92,246,0.32); }
.ws-seq-tpl-name { font-size: 13px; font-weight: 700; }
.ws-seq-tpl-desc { font-size: 11px; color: var(--muted); margin-top: 2px; }
.ws-seq-tpl-stats { display: flex; flex-direction: column; gap: 4px; align-items: end; }

.ws-seq-steps {
  margin-top: 10px;
  padding: 8px 10px;
  background: var(--surface);
  border-radius: 8px;
}
.ws-seq-step {
  display: grid;
  grid-template-columns: 56px 28px 1fr;
  gap: 8px;
  align-items: start;
  padding: 4px 0;
  font-size: 11px;
}
.ws-seq-step-day {
  font-size: 9.5px;
  background: var(--surface-3);
  padding: 3px 7px;
  border-radius: 5px;
  color: var(--muted);
  text-align: center;
  font-weight: 600;
}
.ws-seq-step-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: var(--surface-2);
}
.ws-seq-step-title { font-weight: 700; font-size: 11.5px; }
.ws-seq-step-preview { color: var(--muted); margin-top: 1px; font-size: 10.5px; }
.ws-seq-step-connector {
  grid-column: 2;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  opacity: 0.5;
  padding: 1px 0;
}

.ws-seq-tpl-foot {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}
.ws-seq-start-btn { font-size: 11.5px; padding: 5px 10px; min-height: 0; }

/* Active sequences */
.ws-seq-active-list { display: flex; flex-direction: column; gap: 8px; }
.ws-seq-active {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 10px;
  border-inline-end: 3px solid #1e6dff;
  transition: background 0.15s;
}
.ws-seq-active:hover { background: var(--surface-3); }
.ws-seq-active-name { font-size: 12.5px; font-weight: 700; }
.ws-seq-active-seq { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.ws-seq-active-bar {
  height: 6px;
  background: var(--surface-3);
  border-radius: 4px;
  overflow: hidden;
}
.ws-seq-active-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #10b981, #1e6dff);
  border-radius: 4px;
}
.ws-seq-active-step { font-size: 10.5px; color: var(--muted); margin-top: 4px; }
.ws-seq-active-last,
.ws-seq-active-next { font-size: 11px; }
.ws-seq-active-last-lbl,
.ws-seq-active-next-lbl { font-size: 9.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.ws-seq-active-last-val,
.ws-seq-active-next-val { font-weight: 600; margin-top: 1px; }
.ws-seq-active-next-val { color: #1e6dff; }
.ws-seq-active-actions { display: flex; gap: 4px; }
.ws-seq-mini-btn { font-size: 10.5px; padding: 4px 8px; min-height: 0; }

/* Dark theme */
[data-theme="dark"] .ws-inbox-ai { background: linear-gradient(135deg, rgba(160,32,240,0.08), rgba(30,109,255,0.06)); }
[data-theme="dark"] .ws-inbox-ai-sug,
[data-theme="dark"] .ws-seq-step-icon { background: var(--surface-3); }

/* Responsive */
@media (max-width: 1280px) {
  .ws-seq-active { grid-template-columns: 1fr 1fr 1fr auto; }
  .ws-seq-active-last { grid-column: 1; }
}
@media (max-width: 1024px) {
  .ws-seq-templates { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ws-seq-active { grid-template-columns: 1fr; }
  .ws-seq-active > * { grid-column: 1; }
}

/* =====================================================================
   Shared form validation + Persian date+time + Multi-channel composer
   + Locked drawer + Source icon select
   ===================================================================== */

/* Inline error text — always a block under the field */
.field-err {
  display: block;
  width: 100%;
  font-size: 11px;
  color: #ef4444;
  margin-top: 4px;
  font-weight: 500;
  animation: fieldErrSlide 0.18s ease-out;
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.18);
  border-radius: 6px;
  padding: 4px 8px;
  line-height: 1.4;
}
.field-err:empty {
  display: none !important;
  padding: 0;
  border: 0;
  background: transparent;
  margin: 0;
}
@keyframes fieldErrSlide { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } }
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.10);
}

/* Inline date+time row */
.ws-dt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* =====================================================================
   Persian date+time picker (pdp-*)
   ===================================================================== */

/* Input wrapper with embedded trigger button */
.pdp-wrap {
  position: relative;
  display: flex;
  width: 100%;
}
.pdp-wrap input {
  flex: 1;
  min-width: 0;
  /* The calendar trigger is physically on the left in RTL. The date text is
     intentionally LTR, so a logical inline-end padding would land on the
     right and let the icon collide with the year. */
  padding-left: 36px !important;
  padding-right: 12px !important;
  cursor: pointer;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
}
.pdp-trigger {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: #1e6dff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background 0.15s;
  padding: 0;
}
.pdp-trigger:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 12%, transparent); }
.pdp-trigger svg { display: block; }

/* Popup — compact size (≈250px wide) */
.pdp-popup {
  position: fixed;
  z-index: 10050;
  width: 250px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.16);
  padding: 8px;
  zoom: 1;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}
.pdp-popup.is-open { opacity: 1; transform: translateY(0); }
.pdp-popup--date {
  box-sizing: border-box;
  padding: 5px;
  zoom: 1;
  transform: none;
  transform-origin: bottom right;
}
.pdp-popup--date.is-open { transform: none; }
.pdp-popup--date .pdp-head { margin-bottom: 2px; }
.pdp-popup--date .pdp-weekdays { padding: 1px 0; }
.pdp-popup--date .pdp-cell {
  aspect-ratio: auto;
  height: 34px;
  min-height: 34px;
}
.pdp-popup--date .pdp-day { padding: 0; }
.pdp-popup--date .pdp-foot { margin-top: 3px; }
[data-theme="dark"] .pdp-popup { background: var(--surface-2); border-color: var(--border); }

.pdp-head {
  display: grid;
  grid-template-columns: 26px 1fr 26px;
  gap: 4px;
  align-items: center;
  margin-bottom: 6px;
}
.pdp-nav {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  padding: 0;
}
.pdp-nav:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 12%, transparent); color: var(--brand-600, #0f766e); border-color: transparent; }
.pdp-title-wrap {
  display: flex;
  justify-content: center;
  gap: 4px;
}
.pdp-title {
  background: var(--surface-2);
  border: 0;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: inherit;
  transition: background 0.12s;
}
.pdp-title:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 14%, transparent); color: var(--brand-600, #0f766e); }
.pdp-title-static {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
}

.pdp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 3px;
}
.pdp-weekdays > div {
  text-align: center;
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 700;
  padding: 3px 0;
}

.pdp-grid {
  display: grid;
  gap: 2px;
}
.pdp-grid-days { grid-template-columns: repeat(7, 1fr); }
.pdp-grid-months { grid-template-columns: repeat(3, 1fr); }
.pdp-grid-years  { grid-template-columns: repeat(3, 1fr); }

.pdp-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: all 0.12s;
  padding: 0;
  font-family: inherit;
}
.pdp-cell.pdp-empty { background: transparent; pointer-events: none; }
.pdp-cell.pdp-day:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 10%, transparent); color: var(--brand-600, #0f766e); }
.pdp-cell.is-today {
  background: color-mix(in srgb, var(--brand-300, #6fb98f) 18%, transparent);
  color: var(--brand-700, #0b5f59);
  font-weight: 700;
  outline: 1px solid color-mix(in srgb, var(--brand-500, #2c7873) 32%, transparent);
}
.pdp-cell.is-selected {
  background: linear-gradient(135deg, var(--brand-400, #6fb98f), var(--brand-700, #0b5f59));
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(30,109,255,0.32);
}

/* Month/Year cells */
.pdp-mo-cell, .pdp-yr-cell {
  padding: 8px 4px;
  border-radius: 6px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  transition: all 0.12s;
  font-family: inherit;
}
.pdp-mo-cell:hover, .pdp-yr-cell:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 10%, transparent); color: var(--brand-600, #0f766e); }
.pdp-mo-cell.is-today, .pdp-yr-cell.is-today {
  background: color-mix(in srgb, var(--brand-300, #6fb98f) 18%, transparent);
  color: var(--brand-700, #0b5f59);
  font-weight: 700;
  outline: 1px solid color-mix(in srgb, var(--brand-500, #2c7873) 32%, transparent);
}
.pdp-mo-cell.is-selected, .pdp-yr-cell.is-selected {
  background: linear-gradient(135deg, var(--brand-400, #6fb98f), var(--brand-700, #0b5f59));
  color: #fff;
  font-weight: 700;
}

.pdp-foot {
  display: flex;
  gap: 4px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.pdp-foot-btn {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: linear-gradient(135deg, var(--brand-400, #6fb98f), var(--brand-700, #0b5f59));
  color: #fff;
  cursor: pointer;
  font-weight: 700;
  font-family: inherit;
  transition: all 0.15s;
}
.pdp-foot-btn-today { flex: 2; }
.pdp-foot-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px color-mix(in srgb, var(--brand-500, #2c7873) 32%, transparent); }
.pdp-foot-btn-ghost {
  background: var(--surface-2);
  color: var(--text);
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 36px;
}
.pdp-foot-btn-ghost:hover { background: var(--surface-3); box-shadow: none; transform: none; }

/* Time picker popup also compact */
.pdp-popup-time { width: 230px; }

/* ===== Time picker (pdp-popup-time) ===== */
.pdp-popup-time { min-width: 240px; }
.ptp-row {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ptp-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.ptp-spin {
  width: 56px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 6px;
  font-size: 12px;
  padding: 4px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
.ptp-spin:hover { background: color-mix(in srgb, var(--brand-500, #2c7873) 10%, transparent); color: var(--brand-600, #0f766e); border-color: transparent; }
.ptp-input {
  width: 56px;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px;
  background: var(--surface);
  color: var(--text);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  direction: ltr;
}
.ptp-lbl { font-size: 10px; color: var(--muted); }
.ptp-sep {
  font-size: 26px;
  font-weight: 800;
  color: var(--muted);
  align-self: center;
  margin-top: -16px;
}
.ptp-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.ptp-preset {
  padding: 5px 6px;
  font-size: 11px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 6px;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  direction: ltr;
  transition: all 0.15s;
}
.ptp-preset:hover { background: linear-gradient(135deg, var(--brand-400, #6fb98f), var(--brand-700, #0b5f59)); color: #fff; border-color: transparent; }

/* ===== Multi-channel composer ===== */
.ws-mc-composer {
  border: 1px dashed rgba(160,32,240,0.32);
  background: linear-gradient(135deg, rgba(160,32,240,0.04), rgba(30,109,255,0.03));
  border-radius: 12px;
  padding: 12px;
  margin-top: 12px;
}
.ws-mc-head {
  font-size: 12.5px;
  font-weight: 700;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ws-mc-channels {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.ws-mc-ch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11.5px;
  user-select: none;
}
.ws-mc-ch:hover { background: var(--surface-2); }
.ws-mc-ch.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #a020f0, #1e6dff);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(160,32,240,0.22);
}
.ws-mc-ch input { display: none; }
.ws-mc-ch-i { font-size: 14px; }
.ws-mc-msg {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  resize: vertical;
  min-height: 60px;
}
.ws-mc-attach {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ws-mc-attach-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text);
  transition: all 0.15s;
}
.ws-mc-attach-btn:hover { background: var(--surface-2); border-color: rgba(160,32,240,0.32); }
.ws-mc-attach-btn input[type="file"] { display: none; }
.ws-mc-files {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ws-mc-file {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 10.5px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ws-mc-file-rm {
  background: transparent;
  border: 0;
  color: #ef4444;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.ws-mc-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 8px;
}
.ws-mc-foot-info {
  font-size: 10.5px;
  color: var(--muted);
}
.ws-mc-foot-info b { color: var(--text); font-weight: 700; }
.ws-mc-send {
  font-size: 12px;
  padding: 7px 16px;
  font-weight: 700;
}

/* ===== Locked drawer (after Won/Lost) ===== */
.ws-drawer.is-locked .ws-drawer-body input,
.ws-drawer.is-locked .ws-drawer-body select,
.ws-drawer.is-locked .ws-drawer-body textarea {
  pointer-events: none;
  opacity: 0.7;
  background: var(--surface-2) !important;
  cursor: not-allowed;
}
.ws-drawer.is-locked .ws-drawer-body button:not(.ws-drawer-close):not(.ws-dr-tab):not([data-ws-act-trigger]):not([data-ws-act-do="reopen"]):not(.ws-mc-attach-btn):not([data-ws-coach-explain]):not(.ws-inbox-mini-btn):not(.ws-inbox-toggle):not(.ws-inbox-go) {
  pointer-events: none;
  opacity: 0.4;
}
.ws-drawer.is-locked [data-ws-act-do="won"],
.ws-drawer.is-locked [data-ws-act-do="lost"],
.ws-drawer.is-locked [data-ws-act-do="delete"] {
  display: none !important;
}
.ws-locked-overlay-msg {
  background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(239,68,68,0.06));
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ws-locked-icon { font-size: 22px; }
.ws-locked-text { flex: 1; font-size: 12.5px; }
.ws-locked-text b { color: var(--text); font-weight: 700; }
.ws-locked-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ===== Branded source badges (real social SVG logos) ===== */
.src-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  color: #fff;
  background: var(--brand, #94a3b8);
  flex-shrink: 0;
  vertical-align: middle;
}
.src-brand-sm { width: 16px; height: 16px; padding: 2px; border-radius: 5px; }
.src-brand-md { width: 22px; height: 22px; padding: 3px; }
.src-brand-lg { width: 32px; height: 32px; padding: 5px; border-radius: 8px; }
.src-brand svg { width: 100%; height: 100%; display: block; color: #fff; }
/* Instagram: gradient bg (instead of single brand color) */
.src-brand[data-src-id="instagram"] {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
/* Google: white bg with original colored SVG */
.src-brand[data-src-id="google"] {
  background: #fff;
  border: 1px solid var(--border, rgba(15,23,42,0.1));
  color: initial;
}
.src-brand[data-src-id="google"] svg { color: initial; }
/* Telegram: lighter blue + tilt the plane slightly */
.src-brand[data-src-id="telegram"] {
  background: linear-gradient(135deg, #2AABEE, #229ED9);
}

/* ===== Custom select (pcs-*) — supports SVG icons per option ===== */
.pcs-wrap {
  position: relative;
  width: 100%;
}
.pcs-native {
  /* keep native for form value but hide visually */
  position: absolute !important;
  width: 100% !important;
  height: 100% !important;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.pcs-display {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12.5px;
  text-align: start;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.pcs-display:hover { border-color: rgba(30,109,255,0.4); }
.pcs-display:focus { outline: 0; border-color: #1e6dff; box-shadow: 0 0 0 2px rgba(30,109,255,0.14); }
.pcs-display-icon {
  width: 22px; height: 22px;
  padding: 3px;
  border-radius: 6px;
  background: var(--brand, #94a3b8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pcs-display-icon svg { width: 100%; height: 100%; }
.pcs-display-icon[style*="instagram"],
.pcs-display .pcs-row-icon[data-src-id="instagram"] { /* fallback if attr applied */ }
.pcs-display-label { flex: 1; font-weight: 600; }
.pcs-display-arrow {
  color: var(--muted);
  font-size: 10px;
  transition: transform 0.18s;
}
.pcs-wrap:has(.pcs-popup) .pcs-display-arrow { transform: rotate(180deg); color: #1e6dff; }

/* Popup */
.pcs-popup {
  position: absolute;
  z-index: 9999;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15,23,42,0.16);
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s, transform 0.16s;
  font-family: inherit;
}
.pcs-popup.is-open { opacity: 1; transform: translateY(0); }
[data-theme="dark"] .pcs-popup { background: var(--surface-2); }

.pcs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  text-align: start;
  transition: background 0.12s;
}
.pcs-row:hover { background: var(--surface-2); }
.pcs-row.is-selected {
  background: linear-gradient(135deg, rgba(30,109,255,0.10), rgba(160,32,240,0.10));
  font-weight: 700;
}
.pcs-row-icon {
  width: 24px; height: 24px;
  padding: 3px;
  border-radius: 6px;
  background: var(--brand, #94a3b8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pcs-row-icon svg { width: 100%; height: 100%; }
.pcs-row-label { flex: 1; }
/* per-brand styling override for instagram + google in custom select */
.pcs-row-icon[style*="#E4405F"], .pcs-display-icon[style*="#E4405F"] {
  background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%) !important;
}
.pcs-row-icon[style*="#4285F4"], .pcs-display-icon[style*="#4285F4"] {
  background: #fff !important;
  border: 1px solid var(--border);
  color: initial !important;
}
.pcs-row-icon[style*="#4285F4"] svg, .pcs-display-icon[style*="#4285F4"] svg { color: initial; }
.pcs-row-icon[style*="#26A5E4"], .pcs-display-icon[style*="#26A5E4"] {
  background: linear-gradient(135deg, #2AABEE, #229ED9) !important;
}

/* ===================================================================== */
/* ================== CHANNELS HUB — namespace `ch-*` ================= */
/* ===================================================================== */
.ch-head-actions { display: flex; gap: 8px; align-items: center; }
.ch-jump, .ch-compose { white-space: nowrap; }

/* === 1) Platforms Hero === */
.ch-platforms {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px;
}
@media (max-width: 620px)  { .ch-platforms { grid-template-columns: 1fr; } }
.ch-pf-card {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center;
  padding: 14px 14px 12px; background: var(--surface-1); border: 1px solid var(--border);
  border-radius: 16px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  animation: chPfPop .55s cubic-bezier(.2,.7,.3,1.25) both;
}
.ch-pf-card:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.08); border-color: var(--brand-500); }
.ch-pf-card::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, transparent, currentColor, transparent); opacity: .25;
}
.ch-pf-icon {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center;
  font-size: 24px; color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.16);
}
.ch-pf-body { min-width: 0; }
.ch-pf-name { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 2px; }
.ch-pf-account { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; direction: ltr; text-align: start; }
.ch-pf-stats { display: flex; gap: 10px; font-size: 12px; align-items: center; flex-wrap: wrap; }
.ch-pf-stats b { color: var(--text); font-weight: 800; }
.ch-pf-growth { color: var(--green-600); font-weight: 700; background: rgba(16,185,129,.10); padding: 1px 8px; border-radius: 10px; font-size: 11px; }
.ch-pf-sync { font-size: 10px; color: var(--text-muted); margin-top: 4px; }
.ch-pf-status-dot {
  position: absolute; top: 12px; inset-inline-end: 12px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18); animation: chDotPulse 2s infinite;
}
.ch-pf-status-dot[data-status="paused"] { background: var(--amber-500); box-shadow: 0 0 0 3px rgba(245,158,11,.18); animation: none; }
.ch-pf-pulse { animation: chPfPulseSection 1.4s ease; }
@keyframes chPfPop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes chDotPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(16,185,129,.18); } 50% { box-shadow: 0 0 0 6px rgba(16,185,129,.30); } }
@keyframes chPfPulseSection { 0% { box-shadow: 0 0 0 0 rgba(160,32,240,.40); } 100% { box-shadow: 0 0 0 14px rgba(160,32,240,0); } }

/* === 3) Live Stream + AI === */
.ch-live-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin-bottom: 18px; }
@media (max-width: 1100px) { .ch-live-grid { grid-template-columns: 1fr; } }
.ch-live-card .card-head { align-items: center; }
.ch-live-dot {
  display: inline-flex; gap: 4px; align-items: center; font-size: 10px; font-weight: 800;
  color: #d00; padding: 2px 8px; border: 1px solid rgba(220,0,0,.18); border-radius: 10px;
  background: rgba(220,0,0,.06); margin-inline-start: 8px; letter-spacing: .5px;
}
.ch-live-dot i { width: 6px; height: 6px; border-radius: 50%; background: #d00; animation: chLiveBlink 1.4s infinite; }
@keyframes chLiveBlink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

.ch-live-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-live-tab {
  background: transparent; border: 1px solid var(--border); color: var(--text-muted);
  padding: 4px 10px; border-radius: 12px; font-size: 12px; cursor: pointer;
  transition: all .2s;
}
.ch-live-tab:hover { color: var(--text); background: var(--surface-2); }
.ch-live-tab.is-active { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

.ch-live-feed { max-height: 520px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ch-live-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px;
  padding: 10px 12px; background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px;
  border-inline-start: 3px solid var(--text-muted);
  animation: chLiveSlide .4s cubic-bezier(.2,.7,.3,1) both; animation-delay: calc(var(--ch-i,0) * 32ms);
}
.ch-live-item.ch-live-tone-positive { border-inline-start-color: var(--green-500); }
.ch-live-item.ch-live-tone-question { border-inline-start-color: var(--amber-500); }
.ch-live-item.ch-live-tone-inquiry  { border-inline-start-color: var(--brand-500); }
.ch-live-item.ch-live-tone-warning  { border-inline-start-color: var(--red-500); }
.ch-live-item.ch-live-tone-reply,
.ch-live-item.ch-live-ai            { border-inline-start-color: #a020f0; background: linear-gradient(135deg, rgba(160,32,240,.04), transparent); }
.ch-live-item.ch-live-tone-system   { border-inline-start-color: var(--text-muted); }
.ch-live-pf { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 16px; }
.ch-live-body { min-width: 0; }
.ch-live-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; font-size: 12px; }
.ch-live-who { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; color: var(--text); }
.ch-live-avatar { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; }
.ch-live-time { color: var(--text-muted); font-size: 11px; }
.ch-live-msg { font-size: 13px; color: var(--text); line-height: 1.55; word-break: break-word; }
.ch-live-post { font-size: 11px; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.ch-live-meta { margin-top: 4px; }
.ch-live-kind { font-size: 10px; padding: 1px 8px; border-radius: 10px; background: var(--surface-2); color: var(--text-muted); }
.ch-live-badge { font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 700; }
.ch-badge-ai { background: linear-gradient(135deg,#a020f0,#6f1bb8); color: #fff; }
.ch-badge-human { background: linear-gradient(135deg,#1e6dff,#0b3fae); color: #fff; }
@keyframes chLiveSlide { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }

/* AI box */
.ch-ai-card { display: flex; flex-direction: column; }
.ch-ai-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.ch-ai-total-num { font-size: 32px; font-weight: 900; background: linear-gradient(135deg,#a020f0,#6f1bb8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-ai-total-label { font-size: 12px; color: var(--text-muted); }
.ch-ai-stats { display: flex; flex-direction: column; gap: 6px; }
.ch-ai-stat { display: flex; justify-content: space-between; align-items: center; }
.ch-ai-stat-v { font-weight: 800; color: var(--text); font-size: 14px; }
.ch-ai-stat-l { font-size: 11px; color: var(--text-muted); }
.ch-ai-platforms { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px dashed var(--border); }
.ch-ai-pf-row { display: grid; grid-template-columns: 110px 1fr 110px; gap: 8px; align-items: center; font-size: 12px; }
.ch-ai-pf-name { color: var(--text); font-weight: 700; }
.ch-ai-pf-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ch-ai-pf-bar i { display: block; height: 100%; background: linear-gradient(90deg,#a020f0,#6f1bb8); transition: width .6s; }
.ch-ai-pf-val { text-align: end; font-size: 11px; color: var(--text-muted); }
.ch-ai-intents-title { font-size: 12px; font-weight: 700; color: var(--text); margin: 14px 0 8px; }
.ch-ai-intents { display: flex; flex-direction: column; gap: 8px; }
.ch-ai-intent {}
.ch-ai-intent-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.ch-ai-intent-name { color: var(--text); }
.ch-ai-intent-total { color: var(--text-muted); font-weight: 700; }
.ch-ai-intent-bar { height: 22px; border-radius: 6px; overflow: hidden; display: flex; background: var(--surface-2); }
.ch-ai-intent-bar i { display: inline-flex; align-items: center; padding: 0 6px; font-size: 10px; font-weight: 700; color: #fff; transition: width .6s; }
.ch-ai-intent-ai { background: linear-gradient(135deg,#a020f0,#6f1bb8); }
.ch-ai-intent-hu { background: linear-gradient(135deg,#1e6dff,#0b3fae); }

/* === Deep card head pattern (used for ig/tg/wa/sms) === */
.ch-deep-card { margin-bottom: 18px; }
.ch-deep-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.ch-deep-head-left { display: flex; gap: 12px; align-items: center; }
.ch-deep-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 20px; box-shadow: 0 4px 12px rgba(0,0,0,.12); }
.ch-deep-title { display: inline-flex; gap: 6px; align-items: center; }
.ch-verified { color: #1e6dff; font-size: 13px; }
.ch-deep-sub { direction: ltr; text-align: start; }
.ch-deep-tabs { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-deep-tab { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 6px 12px; border-radius: 10px; font-size: 12px; cursor: pointer; transition: all .2s; }
.ch-deep-tab:hover { color: var(--text); background: var(--surface-2); }
.ch-deep-tab.is-active { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }

/* === 4) Instagram === */
.ch-ig-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; padding-top: 12px; }
@media (max-width: 1024px) { .ch-ig-posts { grid-template-columns: 1fr; } }
.ch-ig-post {
  display: grid; grid-template-columns: 120px 1fr; gap: 14px;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  animation: chLiveSlide .5s both; animation-delay: calc(var(--ch-i,0) * 60ms);
}
.ch-ig-cover { width: 120px; height: 160px; border-radius: 12px; position: relative; box-shadow: 0 4px 12px rgba(0,0,0,.12); overflow: hidden; }
.ch-ig-type { position: absolute; top: 6px; inset-inline-end: 6px; font-size: 16px; }
.ch-ig-meta { min-width: 0; }
.ch-ig-title { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.ch-ig-caption { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; line-height: 1.55; }
.ch-ig-hashtags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.ch-ig-hash { font-size: 11px; color: #1e6dff; background: rgba(30,109,255,.08); padding: 1px 8px; border-radius: 10px; }
.ch-ig-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); margin-bottom: 10px; padding: 6px 0; border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); }
.ch-ig-reach { color: var(--brand-500); font-weight: 700; }
.ch-ig-time { margin-inline-start: auto; }
.ch-ig-comments-title { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 6px; opacity: .8; }
.ch-ig-comments { display: flex; flex-direction: column; gap: 6px; }

/* Stories grid */
.ch-ig-stories { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding-top: 12px; }
@media (max-width: 1100px) { .ch-ig-stories { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .ch-ig-stories { grid-template-columns: repeat(2, 1fr); } }
.ch-ig-story { display: flex; flex-direction: column; gap: 8px; animation: chLiveSlide .5s both; animation-delay: calc(var(--ch-i,0) * 60ms); }
.ch-ig-st-cover {
  height: 200px; border-radius: 14px; position: relative; display: grid; place-items: center;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}
.ch-ig-st-ring {
  position: absolute; inset: -3px; border-radius: 16px;
  background: linear-gradient(135deg,#f09433,#e6683c 30%,#dc2743 60%,#cc2366 80%,#bc1888);
  z-index: -1; opacity: .35;
}
.ch-ig-st-icon { font-size: 28px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.4); }
.ch-ig-st-body { padding: 0 4px; }
.ch-ig-st-title { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 6px; line-height: 1.4; }
.ch-ig-st-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.ch-ig-st-poll { background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px; padding: 8px; margin-bottom: 6px; }
.ch-ig-st-poll-q { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.ch-ig-st-poll-row { display: grid; grid-template-columns: 60px 1fr 36px; gap: 6px; align-items: center; font-size: 10px; margin-bottom: 4px; }
.ch-ig-st-poll-bar { height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.ch-ig-st-poll-bar i { display: block; height: 100%; background: linear-gradient(90deg,#E4405F,#bc1888); }
.ch-ig-st-poll-v { text-align: end; font-weight: 700; color: var(--text); }
.ch-ig-st-time { font-size: 10px; color: var(--text-muted); }

/* Flat comments view */
.ch-ig-flat { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ch-ig-flat-item { padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 28ms); }
.ch-ig-flat-post { font-size: 11px; color: var(--text-muted); margin-top: 6px; font-style: italic; }

/* === Comment block (shared by IG/TG) === */
.ch-cmt { display: grid; grid-template-columns: 28px 1fr; gap: 8px; padding: 8px; border-radius: 10px; background: var(--surface-1); border: 1px solid var(--border); }
.ch-cmt.ch-cmt-reply { margin-inline-start: 20px; background: linear-gradient(135deg, rgba(160,32,240,.05), transparent); border-color: rgba(160,32,240,.18); }
.ch-cmt.ch-cmt-ai { background: linear-gradient(135deg, rgba(160,32,240,.07), transparent); border-color: rgba(160,32,240,.22); }
.ch-cmt-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 800; }
.ch-cmt-body { min-width: 0; }
.ch-cmt-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ch-cmt-who { font-size: 12px; font-weight: 700; color: var(--text); }
.ch-cmt-handle { font-size: 11px; color: var(--text-muted); font-weight: 400; direction: ltr; }
.ch-cmt-badge { font-size: 9px; padding: 1px 6px; border-radius: 8px; color: #fff; font-weight: 700; }
.ch-cmt-time { font-size: 10px; color: var(--text-muted); margin-inline-start: auto; }
.ch-cmt-msg { font-size: 12px; color: var(--text); line-height: 1.6; word-break: break-word; }

/* === 5) Telegram === */
.ch-tg-posts { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; }
.ch-tg-post {
  display: grid; grid-template-columns: 48px 1fr; gap: 12px;
  padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  border-inline-start: 3px solid #0088cc;
  animation: chLiveSlide .5s both; animation-delay: calc(var(--ch-i,0) * 50ms);
}
.ch-tg-media { width: 48px; height: 48px; border-radius: 10px; background: linear-gradient(135deg,#37bbfe,#007dbb); display: grid; place-items: center; font-size: 20px; color: #fff; align-self: start; }
.ch-tg-title { font-weight: 800; font-size: 14px; color: var(--text); margin-bottom: 6px; }
.ch-tg-text { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 8px; }
.ch-tg-stats { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); align-items: center; }
.ch-tg-views { color: #0088cc; font-weight: 700; }
.ch-tg-rx { background: var(--surface-1); padding: 2px 6px; border-radius: 10px; border: 1px solid var(--border); }
.ch-tg-time { margin-inline-start: auto; }
.ch-tg-disc { display: flex; flex-direction: column; gap: 14px; padding-top: 12px; }
.ch-tg-disc-thread { padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
.ch-tg-disc-post { font-size: 12px; color: var(--text-muted); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.ch-tg-disc-thread .ch-cmt { background: var(--surface-1); margin-bottom: 6px; }

/* === 6) WhatsApp === */
.ch-wa-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 12px; }
@media (max-width: 1024px) { .ch-wa-list { grid-template-columns: 1fr; } }
.ch-wa-bc {
  padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 40ms);
}
.ch-wa-bc-head { display: grid; grid-template-columns: 4px 1fr auto; gap: 10px; align-items: center; margin-bottom: 10px; }
.ch-wa-bc-tone { width: 4px; align-self: stretch; border-radius: 2px; background: #25D366; }
.ch-tone-promo { background: #f59e0b !important; } .ch-tone-reminder { background: #1e6dff !important; }
.ch-tone-info { background: #6b7280 !important; } .ch-tone-survey { background: #a020f0 !important; }
.ch-tone-content { background: #10b981 !important; } .ch-tone-greeting { background: #ec4899 !important; }
.ch-tone-announce { background: #06b6d4 !important; } .ch-tone-event { background: #f97316 !important; }
.ch-wa-bc-title { font-weight: 800; font-size: 13px; color: var(--text); }
.ch-wa-bc-aud { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ch-wa-bc-sent { font-weight: 800; font-size: 18px; color: #25D366; text-align: end; }
.ch-wa-bc-sent span { font-size: 10px; color: var(--text-muted); font-weight: 400; display: block; }
.ch-wa-bc-bars { display: flex; flex-direction: column; gap: 6px; }
.ch-wa-bar { display: grid; grid-template-columns: 50px 1fr 48px; gap: 8px; align-items: center; font-size: 11px; }
.ch-wa-bar span { color: var(--text-muted); }
.ch-wa-bar b { text-align: end; color: var(--text); font-weight: 700; }
.ch-wa-bar-bar { height: 6px; background: var(--surface-1); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); }
.ch-wa-bar-bar i { display: block; height: 100%; transition: width .6s; }
.ch-wa-bar-d   { background: #25D366; }
.ch-wa-bar-r   { background: #128C7E; }
.ch-wa-bar-rep { background: #075E54; }

.ch-wa-conv { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.ch-wa-cv-item {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 32ms);
}
.ch-wa-cv-item.has-unread { border-color: #25D366; box-shadow: 0 0 0 2px rgba(37,211,102,.10); }
.ch-wa-cv-av { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; }
.ch-wa-cv-body { min-width: 0; }
.ch-wa-cv-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.ch-wa-cv-name { font-weight: 800; font-size: 13px; color: var(--text); }
.ch-wa-cv-phone { font-size: 11px; color: var(--text-muted); direction: ltr; }
.ch-wa-cv-time { font-size: 10px; color: var(--text-muted); margin-inline-start: auto; }
.ch-wa-cv-msg { font-size: 12px; color: var(--text); line-height: 1.55; }
.ch-wa-cv-foot { display: flex; gap: 8px; align-items: center; margin-top: 6px; font-size: 11px; }
.ch-wa-cv-sent { padding: 1px 8px; border-radius: 10px; background: var(--surface-1); }
.ch-tone-positive { color: #10b981; }
.ch-tone-inquiry  { color: #1e6dff; }
.ch-tone-urgent   { color: #ef4444; background: rgba(239,68,68,.10) !important; }
.ch-wa-cv-unread { color: #25D366; font-weight: 700; }

/* === 7) SMS === */
.ch-sms-list { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ch-sms-c { padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 30ms); }
.ch-sms-c-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ch-sms-c-title { font-weight: 800; font-size: 13px; color: var(--text); }
.ch-sms-c-time { font-size: 11px; color: var(--text-muted); }
.ch-sms-c-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 720px) { .ch-sms-c-grid { grid-template-columns: repeat(2, 1fr); } }
.ch-sms-c-grid div { background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; }
.ch-sms-c-grid span { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.ch-sms-c-grid b { font-weight: 800; color: var(--text); font-size: 13px; }
.ch-sms-c-grid b em { font-style: normal; color: var(--green-600); font-size: 10px; font-weight: 700; }
.ch-sms-d   { color: #10b981 !important; }
.ch-sms-rep { color: #1e6dff !important; }

.ch-sms-tpl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding-top: 12px; }
@media (max-width: 900px) { .ch-sms-tpl { grid-template-columns: 1fr; } }
.ch-sms-tpl-item { padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 30ms); }
.ch-sms-tpl-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ch-sms-tpl-title { font-weight: 800; color: var(--text); font-size: 13px; }
.ch-sms-tpl-usage { font-size: 11px; color: var(--text-muted); }
.ch-sms-tpl-body { padding: 10px; background: var(--surface-1); border: 1px dashed var(--border); border-radius: 8px; font-size: 12px; color: var(--text); line-height: 1.7; margin-bottom: 8px; direction: rtl; }
.ch-sms-tpl-foot { display: flex; justify-content: space-between; align-items: center; }
.ch-sms-tpl-vars { font-size: 11px; color: #a020f0; font-weight: 700; }

.ch-sms-sched { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.ch-sms-sq {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 30ms);
}
.ch-sms-sq-when { font-size: 12px; color: var(--brand-500); font-weight: 700; background: rgba(160,32,240,.06); padding: 6px 10px; border-radius: 8px; text-align: center; }
.ch-sms-sq-info { min-width: 0; }
.ch-sms-sq-title { font-weight: 800; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.ch-sms-sq-meta { font-size: 11px; color: var(--text-muted); }
.ch-sms-sq-st { padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.ch-st-scheduled { background: rgba(30,109,255,.10); color: #1e6dff; }
.ch-st-draft     { background: rgba(245,158,11,.10); color: var(--amber-600); }
.ch-st-recurring { background: rgba(160,32,240,.10); color: #a020f0; }
.ch-st-completed { background: rgba(16,185,129,.10); color: var(--green-600); }

/* === 8) Iranian platforms === */
.ch-iranian-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 18px; }
@media (max-width: 1100px) { .ch-iranian-grid { grid-template-columns: 1fr; } }
.ch-irn-card .ch-deep-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 10px; }
.ch-irn-head-l { display: flex; gap: 10px; align-items: center; }
.ch-irn-name { font-size: 15px; }
.ch-irn-paused { color: var(--amber-600); }
.ch-irn-growth { background: rgba(16,185,129,.10); color: var(--green-600); font-weight: 700; }
.ch-irn-posts { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; max-height: 360px; overflow-y: auto; }
.ch-irn-post {
  padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 28ms);
}
.ch-irn-post-title { font-weight: 700; font-size: 12px; color: var(--text); margin-bottom: 4px; line-height: 1.45; }
.ch-irn-post-stats { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.ch-irn-post-time { margin-inline-start: auto; }

/* === 9) Scheduler === */
.ch-sched-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.ch-sched-tab { background: transparent; border: 1px solid var(--border); color: var(--text-muted); padding: 4px 12px; border-radius: 12px; font-size: 12px; cursor: pointer; transition: all .2s; }
.ch-sched-tab:hover { color: var(--text); background: var(--surface-2); }
.ch-sched-tab.is-active { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.ch-sched-list { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; }
.ch-sched-item {
  display: grid; grid-template-columns: 160px 1fr auto; gap: 14px; align-items: center;
  padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  cursor: grab; transition: transform .2s, box-shadow .2s;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 28ms);
}
.ch-sched-item:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.ch-sched-item:active { cursor: grabbing; }
.ch-sched-when { display: flex; align-items: center; gap: 8px; }
.ch-sched-when-tag { width: 8px; height: 36px; border-radius: 4px; }
.ch-sched-when span { font-weight: 700; font-size: 12px; color: var(--text); }
.ch-sched-title { font-weight: 800; font-size: 13px; color: var(--text); margin-bottom: 2px; }
.ch-sched-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11px; color: var(--text-muted); }
.ch-sched-type { background: var(--surface-1); padding: 1px 8px; border-radius: 10px; border: 1px solid var(--border); }
.ch-sched-pfs { display: inline-flex; gap: 4px; }
.ch-sched-pf { font-size: 14px; }
.ch-sched-st { padding: 2px 10px; border-radius: 10px; font-size: 11px; font-weight: 700; }
.ch-sched-st-scheduled .ch-sched-st { background: rgba(30,109,255,.10); color: #1e6dff; }
.ch-sched-st-draft .ch-sched-st     { background: rgba(245,158,11,.10); color: var(--amber-600); }
.ch-sched-st-recurring .ch-sched-st { background: rgba(160,32,240,.10); color: #a020f0; }

/* === 10) Reports === */
.ch-reports-grid { display: grid; grid-template-columns: 1.6fr 1fr; align-items: start; gap: 14px; margin-bottom: 18px; }
@media (max-width: 1100px) { .ch-reports-grid { grid-template-columns: 1fr; } }
.ch-rep-trend { display: flex; flex-direction: column; }
.ch-weekly-chart { position: relative; min-height: 240px; }
.ch-rep-trend canvas { max-height: 240px; }
.ch-weekly-insights { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ch-weekly-insight { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 72px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.ch-weekly-insight-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--insight-color, var(--brand-600)); background: color-mix(in srgb, var(--insight-color, var(--brand-500)) 13%, var(--surface-1)); }
.ch-weekly-insight-icon .ds-icon { width: 19px; height: 19px; }
.ch-weekly-insight-label { display: block; margin-bottom: 3px; color: var(--text-muted); font-size: 11px; line-height: 1.5; }
.ch-weekly-insight-value { display: block; color: var(--text); font-size: 13px; font-weight: 800; line-height: 1.55; }
@media (max-width: 620px) { .ch-weekly-insights { grid-template-columns: 1fr; } }
.ch-rep-attr-list { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.ch-attr-row { animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 50ms); }
.ch-attr-head { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; font-size: 12px; }
.ch-attr-dot { width: 10px; height: 10px; border-radius: 50%; }
.ch-attr-name { font-weight: 700; color: var(--text); }
.ch-attr-share { margin-inline-start: auto; font-weight: 800; color: var(--text); }
.ch-attr-bar { height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin-bottom: 4px; }
.ch-attr-bar i { display: block; height: 100%; transition: width .6s; }
.ch-attr-stats { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); }
.ch-attr-rev { font-weight: 700; color: var(--green-600); }

/* === Compose Modal === */
.ch-compose-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.ch-compose-modal[hidden] { display: none; }
.ch-cm-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(4px); }
.ch-cm-card { position: relative; width: min(640px, 92vw); max-height: 86vh; overflow-y: auto; background: var(--surface-1); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.30); animation: chCmPop .35s cubic-bezier(.2,.7,.3,1.25); display: flex; flex-direction: column; }
@keyframes chCmPop { from { opacity: 0; transform: scale(.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.ch-cm-head { display: flex; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.ch-cm-title { font-weight: 800; font-size: 16px; color: var(--text); }
.ch-cm-sub { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.ch-cm-x { background: transparent; border: none; cursor: pointer; font-size: 18px; color: var(--text-muted); padding: 4px 8px; border-radius: 6px; }
.ch-cm-x:hover { background: var(--surface-2); color: var(--text); }
.ch-cm-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
.ch-cm-row { display: flex; flex-direction: column; gap: 6px; }
.ch-cm-label { font-size: 12px; font-weight: 700; color: var(--text); }
.ch-cm-channels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (max-width: 540px) { .ch-cm-channels { grid-template-columns: repeat(2, 1fr); } }
.ch-cm-ch { display: flex; gap: 6px; align-items: center; padding: 8px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; cursor: pointer; font-size: 12px; transition: border-color .2s, background .2s; }
.ch-cm-ch:has(input:checked) { border-color: var(--c, var(--brand-500)); background: color-mix(in srgb, var(--c, var(--brand-500)) 10%, var(--surface-1)); }
.ch-cm-ch-icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; color: #fff; }
.ch-cm-types { display: flex; gap: 8px; flex-wrap: wrap; }
.ch-cm-types label { display: flex; gap: 4px; align-items: center; padding: 4px 10px; background: var(--surface-2); border-radius: 8px; font-size: 12px; cursor: pointer; }
.ch-cm-text { width: 100%; padding: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 13px; resize: vertical; }
.ch-cm-counter { text-align: end; font-size: 11px; color: var(--text-muted); }
.ch-cm-when-opts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ch-cm-when-opts label { display: flex; gap: 4px; align-items: center; font-size: 12px; cursor: pointer; }
.ch-cm-when-date { padding: 6px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; font-family: inherit; font-size: 12px; }
.ch-cm-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: end; gap: 8px; }

/* Toast */
.ch-toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%) translateY(20px); background: linear-gradient(135deg,#10b981,#059669); color: #fff; padding: 10px 20px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.20); font-weight: 700; font-size: 13px; opacity: 0; transition: transform .3s, opacity .3s; z-index: 300; }
.ch-toast.show { opacity: 1; transform: translateX(50%) translateY(0); }

.ch-empty { padding: 30px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* Dark theme adjustments */
[data-theme="dark"] .ch-pf-card { background: var(--surface-2); }
[data-theme="dark"] .ch-live-item,
[data-theme="dark"] .ch-cmt,
[data-theme="dark"] .ch-ig-post,
[data-theme="dark"] .ch-tg-post,
[data-theme="dark"] .ch-wa-bc,
[data-theme="dark"] .ch-wa-cv-item,
[data-theme="dark"] .ch-sms-c,
[data-theme="dark"] .ch-sms-tpl-item,
[data-theme="dark"] .ch-sms-sq,
[data-theme="dark"] .ch-sched-item,
[data-theme="dark"] .ch-irn-post { background: var(--surface-1); }
[data-theme="dark"] .ch-sms-tpl-body,
[data-theme="dark"] .ch-sms-c-grid div { background: var(--surface-2); }

/* ===================================================================== */
/* ============== CHANNELS HUB — UI/UX POLISH v2 (2026-06-20) =========== */
/* ===================================================================== */

/* === Page head: nicer action buttons === */
.ch-head-actions .ch-jump,
.ch-head-actions .ch-compose { font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: 12px; }
.ch-head-actions .ch-compose { background: linear-gradient(135deg, var(--brand-500), #6f1bb8); color: #fff; border: none; box-shadow: 0 4px 12px rgba(160,32,240,.25); transition: transform .2s, box-shadow .2s; }
.ch-head-actions .ch-compose:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(160,32,240,.40); }

/* === 1) PLATFORMS HERO polish === */
.ch-pf-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 92%, transparent));
  border-radius: 18px; padding: 16px 14px 14px;
  transition: transform .3s cubic-bezier(.2,.7,.3,1.25), box-shadow .3s, border-color .3s;
}
.ch-pf-card::before {
  content: ''; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(135deg, transparent 60%, color-mix(in srgb, currentColor 18%, transparent));
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ch-pf-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 18px 40px rgba(0,0,0,.10); }
.ch-pf-card:hover::before { opacity: 1; }
.ch-pf-card::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, currentColor 40%, currentColor 60%, transparent);
  opacity: .35;
}
.ch-pf-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 8px 22px color-mix(in srgb, currentColor 30%, transparent), inset 0 1px 0 rgba(255,255,255,.30);
}
.ch-pf-icon .ds-ico,
.ch-pf-icon svg { width: 28px; height: 28px; color: #fff; }
.ch-live-pf .ds-ico,
.ch-live-pf svg,
.ch-deep-icon .ds-ico,
.ch-deep-icon svg,
.ch-cm-ch-icon .ds-ico,
.ch-cm-ch-icon svg,
.ch-sched-pf .ds-ico,
.ch-sched-pf svg {
  width: 1em; height: 1em;
  vertical-align: middle;
}
.ch-deep-icon {
  display: inline-grid; place-items: center;
  color: #fff;
}
.ch-deep-icon .ds-ico,
.ch-deep-icon svg { width: 22px; height: 22px; color: #fff; }
.ch-pf-card[data-ch-pf="instagram"] { color: #E4405F; }
.ch-pf-card[data-ch-pf="telegram"]  { color: #0088cc; }
.ch-pf-card[data-ch-pf="whatsapp"]  { color: #25D366; }
.ch-pf-card[data-ch-pf="sms"]       { color: #a020f0; }
.ch-pf-card[data-ch-pf="bale"]      { color: #2C5DC8; }
.ch-pf-card[data-ch-pf="eitaa"]     { color: #F0631C; }
.ch-pf-card[data-ch-pf="rubika"]    { color: #D6206C; }
.ch-pf-card[data-ch-pf="webpush"]   { color: #1e6dff; }
.ch-pf-card[data-ch-pf="linkedin"]  { color: #0A66C2; }
.ch-pf-card[data-ch-pf="youtube"]   { color: #cc0000; }
.ch-pf-card[data-ch-pf="aparat"]    { color: #ED1A3B; }
.ch-pf-card[data-ch-pf="linkedin"] .ch-pf-icon {
  font-family: Arial, sans-serif; font-weight: 900; font-style: italic;
  font-size: 22px !important; letter-spacing: -1px;
}
.ch-pf-card[data-ch-pf="youtube"] .ch-pf-icon { font-size: 20px !important; }
.ch-pf-card[data-ch-pf="aparat"] .ch-pf-icon  { font-size: 22px !important; }

.ch-pf-name { font-size: 15px; font-weight: 800; color: var(--text); }
.ch-pf-account { color: color-mix(in srgb, currentColor 65%, var(--text-muted)); font-weight: 600; }
.ch-pf-growth {
  font-size: 10px; padding: 2px 10px; border-radius: 12px;
  background: color-mix(in srgb, var(--green-500) 14%, transparent);
  color: var(--green-700, var(--green-600));
  font-weight: 800; line-height: 1.6;
  display: inline-flex; align-items: center; gap: 2px;
}
.ch-pf-growth::before { content: '▲'; font-size: 8px; }
.ch-pf-sync {
  margin-top: 6px; font-size: 10px; color: var(--text-muted);
  display: inline-flex; align-items: center; gap: 4px;
}
.ch-pf-sync::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--green-500); box-shadow: 0 0 0 2px rgba(16,185,129,.18); }
.ch-pf-status-dot {
  width: 12px; height: 12px;
  background: radial-gradient(circle at 30% 30%, #34d57a, #10b981);
  box-shadow: 0 0 0 3px rgba(16,185,129,.20), 0 0 12px rgba(16,185,129,.35);
}

/* === Live grid layout polish === */
.ch-live-grid { gap: 16px; }
.ch-live-card, .ch-ai-card { border-radius: 18px; }
.ch-live-card .card-head, .ch-ai-card .card-head { padding-bottom: 14px; border-bottom: 1px solid var(--border); margin-bottom: 0; }

/* === LIVE STREAM polish === */
.ch-live-dot {
  background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(239,68,68,.04));
  color: #ef4444; border: none; padding: 3px 10px; font-size: 10px;
  box-shadow: 0 0 0 1px rgba(239,68,68,.25), 0 4px 12px rgba(239,68,68,.10);
}
.ch-live-dot i { background: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,.60); }

.ch-live-feed { padding: 12px 4px 4px 4px; gap: 8px; }
.ch-live-feed::-webkit-scrollbar { width: 6px; }
.ch-live-feed::-webkit-scrollbar-thumb { background: linear-gradient(180deg,#a020f0,#6f1bb8); border-radius: 3px; }
.ch-live-feed::-webkit-scrollbar-track { background: transparent; }

.ch-live-item {
  position: relative;
  background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 92%, transparent));
  border-radius: 14px; padding: 11px 14px;
  border-inline-start-width: 4px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.ch-live-item:hover { transform: translateX(-3px); box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.ch-live-item:first-child {
  background: linear-gradient(135deg, rgba(160,32,240,.07), color-mix(in srgb, var(--surface-1) 95%, transparent));
  border-color: rgba(160,32,240,.20);
}
.ch-live-item:first-child::after {
  content: 'جدید'; position: absolute; top: 8px; inset-inline-end: 12px;
  font-size: 9px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg,#10b981,#059669);
  padding: 2px 8px; border-radius: 10px;
  animation: chNewBadge 1.6s ease-out;
}
@keyframes chNewBadge {
  0% { opacity: 0; transform: scale(.6); }
  20% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.ch-live-pf {
  position: relative; width: 38px; height: 38px;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 18%, transparent), color-mix(in srgb, currentColor 8%, transparent)) !important;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
}
.ch-live-item.ch-live-ai .ch-live-pf {
  background: linear-gradient(135deg, rgba(160,32,240,.18), rgba(111,27,184,.10)) !important;
  border-color: rgba(160,32,240,.35);
  box-shadow: 0 0 12px rgba(160,32,240,.20);
}
.ch-live-msg { font-size: 12.5px; line-height: 1.65; }
.ch-live-kind {
  text-transform: uppercase; letter-spacing: .4px; font-size: 9px; font-weight: 700;
  padding: 1px 8px; border-radius: 8px;
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, transparent));
}
.ch-live-avatar { box-shadow: 0 2px 6px rgba(0,0,0,.12); border: 1.5px solid var(--surface-1); }
.ch-live-badge.ch-badge-ai {
  background: linear-gradient(135deg,#a020f0,#6f1bb8);
  box-shadow: 0 2px 8px rgba(160,32,240,.32);
}
.ch-live-badge.ch-badge-human {
  background: linear-gradient(135deg,#1e6dff,#0b3fae);
  box-shadow: 0 2px 8px rgba(30,109,255,.30);
}

/* live time groups (now/this hour/today) */
.ch-live-time-group {
  font-size: 10px; font-weight: 800; color: var(--text-muted);
  letter-spacing: .4px; text-transform: uppercase;
  padding: 8px 4px 4px; display: flex; align-items: center; gap: 8px;
}
.ch-live-time-group::before, .ch-live-time-group::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* === AI box polish — tone-colored intent bars === */
.ch-ai-card { padding-bottom: 6px; }
.ch-ai-hero { padding: 18px 0 16px; }
.ch-ai-total-num {
  font-size: 36px; line-height: 1; font-weight: 900;
  background: linear-gradient(135deg,#a020f0,#6f1bb8 60%,#3b1860); -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: -1px;
  position: relative;
}
.ch-ai-total-num::after {
  content: '✦'; position: absolute; top: -4px; inset-inline-start: -16px;
  font-size: 14px; color: #a020f0; animation: chSparkle 2.4s infinite;
}
@keyframes chSparkle { 0%,100% { opacity: .4; transform: rotate(0); } 50% { opacity: 1; transform: rotate(180deg) scale(1.2); } }
.ch-ai-total-label { font-size: 11px; font-weight: 700; color: var(--text-muted); margin-top: 6px; }
.ch-ai-stats { gap: 8px; padding-block: 4px; }
.ch-ai-stat {
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, transparent));
  border-radius: 10px; padding: 6px 10px; border: 1px solid var(--border);
}
.ch-ai-stat-v { font-size: 15px; font-weight: 800; background: linear-gradient(135deg, var(--text), color-mix(in srgb, var(--text) 70%, var(--text-muted))); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ch-ai-pf-bar { height: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, transparent)); border: 1px solid var(--border); }
.ch-ai-pf-bar i { border-radius: 4px; box-shadow: 0 1px 4px rgba(160,32,240,.40); }
.ch-ai-pf-row { padding: 2px 0; }
.ch-ai-pf-val b { color: var(--text); }

/* Intent bars — per-row varied tone colors based on data-tone attribute */
.ch-ai-intent { padding: 8px 10px; border-radius: 10px; background: color-mix(in srgb, var(--surface-2) 50%, transparent); border: 1px solid color-mix(in srgb, var(--border) 60%, transparent); transition: background .2s; }
.ch-ai-intent:hover { background: var(--surface-2); }
.ch-ai-intent-bar { height: 24px; border-radius: 8px; background: linear-gradient(180deg, var(--surface-1), var(--surface-2)); border: 1px solid var(--border); padding: 1px; gap: 1px; }
.ch-ai-intent-bar i { border-radius: 6px; }
.ch-ai-intent-ai { background: linear-gradient(135deg,#a020f0,#6f1bb8); box-shadow: inset 0 1px 0 rgba(255,255,255,.20); }
.ch-ai-intent-hu { background: linear-gradient(135deg,#1e6dff,#0b3fae); box-shadow: inset 0 1px 0 rgba(255,255,255,.20); }
/* Per-row tones override */
.ch-ai-intent[data-tone="price"]   .ch-ai-intent-ai { background: linear-gradient(135deg,#10b981,#059669); }
.ch-ai-intent[data-tone="time"]    .ch-ai-intent-ai { background: linear-gradient(135deg,#0088cc,#005f8f); }
.ch-ai-intent[data-tone="job"]     .ch-ai-intent-ai { background: linear-gradient(135deg,#f59e0b,#d97706); }
.ch-ai-intent[data-tone="teacher"] .ch-ai-intent-ai { background: linear-gradient(135deg,#ec4899,#be185d); }
.ch-ai-intent[data-tone="cert"]    .ch-ai-intent-ai { background: linear-gradient(135deg,#06b6d4,#0891b2); }
.ch-ai-intent[data-tone="discount"].ch-ai-intent-ai { background: linear-gradient(135deg,#ef4444,#b91c1c); }
.ch-ai-intent[data-tone="complaint"].ch-ai-intent-ai { background: linear-gradient(135deg,#dc2626,#7f1d1d); }
.ch-ai-intent[data-tone="payment"] .ch-ai-intent-hu { background: linear-gradient(135deg,#a020f0,#6f1bb8); }

/* === Deep card heads — glassy === */
.ch-deep-card {
  position: relative; overflow: hidden; border-radius: 18px;
}
.ch-deep-head {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 50%, transparent), transparent);
  border-radius: 14px 14px 0 0; padding: 6px 0 14px;
  margin: -8px -8px 12px;
  padding: 16px 14px;
}
.ch-deep-icon {
  position: relative;
  box-shadow: 0 8px 22px color-mix(in srgb, currentColor 25%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.ch-deep-icon::after {
  content: ''; position: absolute; inset: -2px; border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in srgb, currentColor 40%, transparent), transparent);
  z-index: -1; filter: blur(8px); opacity: .6;
}
.ch-deep-title { font-size: 17px; font-weight: 800; }
.ch-deep-tab {
  font-size: 12.5px; font-weight: 700; padding: 7px 14px; border-radius: 11px;
  transition: all .2s;
}
.ch-deep-tab.is-active { box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-500) 30%, transparent); }
.ch-verified {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #1e6dff; color: #fff; font-size: 9px; font-weight: 900;
  box-shadow: 0 2px 6px rgba(30,109,255,.40);
}

/* === INSTAGRAM polish === */
.ch-ig-posts { gap: 16px; }
.ch-ig-post {
  display: grid; grid-template-columns: 140px 1fr;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px; gap: 16px; overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ch-ig-post:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(228,64,95,.10); border-color: rgba(228,64,95,.20); }
.ch-ig-cover {
  width: 140px; height: 180px; border-radius: 14px;
  background-blend-mode: overlay;
  background-image: radial-gradient(circle at 30% 20%, rgba(255,255,255,.50), transparent 60%),
                    radial-gradient(circle at 70% 80%, rgba(0,0,0,.20), transparent 50%),
                    linear-gradient(135deg, var(--ch-cover-c, #f8d6e8), color-mix(in srgb, var(--ch-cover-c, #f8d6e8) 60%, #fff));
  position: relative; box-shadow: 0 8px 22px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.40);
  overflow: hidden;
}
.ch-ig-cover::before {
  content: attr(data-letter); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 64px; font-weight: 900; color: rgba(255,255,255,.65);
  text-shadow: 0 4px 18px rgba(0,0,0,.25);
  font-family: Vazirmatn, sans-serif;
}
.ch-ig-cover::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 50%;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.20));
}
.ch-ig-type {
  z-index: 2; top: 8px; inset-inline-end: 8px;
  background: rgba(0,0,0,.55); color: #fff;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center; font-size: 12px;
  backdrop-filter: blur(6px);
}
.ch-ig-title { font-size: 14.5px; }
.ch-ig-caption { font-size: 12.5px; }
.ch-ig-hashtags { gap: 6px; }
.ch-ig-hash { font-weight: 700; }
.ch-ig-stats {
  gap: 14px; padding: 8px 0; margin-bottom: 10px;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  font-size: 12px; font-weight: 700;
}
.ch-ig-stats > span { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.ch-ig-stats > span:nth-child(1) { color: #E4405F; }   /* likes — pink */
.ch-ig-stats > span:nth-child(2) { color: #1e6dff; }   /* comments — blue */
.ch-ig-stats > span:nth-child(3) { color: #f59e0b; }   /* saves — amber */
.ch-ig-stats > span:nth-child(4) { color: #10b981; }   /* shares — green */
.ch-ig-stats > span.ch-ig-reach  { color: #a020f0 !important; font-weight: 800; }
.ch-ig-stats > span.ch-ig-time   { color: var(--text-muted) !important; font-weight: 400; }
.ch-ig-comments-title {
  font-size: 10.5px; letter-spacing: .4px; text-transform: uppercase;
  font-weight: 800; color: var(--brand-500);
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.ch-ig-comments-title::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.ch-ig-comments { gap: 6px; position: relative; }
.ch-ig-comments::before {
  content: ''; position: absolute; inset-inline-start: 13px; top: 14px; bottom: 14px; width: 2px;
  background: linear-gradient(180deg, transparent, var(--border) 20%, var(--border) 80%, transparent);
  opacity: .5;
}

/* Comment block polish */
.ch-cmt {
  position: relative;
  border-radius: 12px; padding: 10px;
  background: linear-gradient(180deg, var(--surface-1), color-mix(in srgb, var(--surface-1) 92%, transparent));
}
.ch-cmt.ch-cmt-reply {
  margin-inline-start: 28px;
  border-color: rgba(160,32,240,.18);
  background: linear-gradient(135deg, rgba(160,32,240,.06), color-mix(in srgb, var(--surface-1) 92%, transparent));
}
.ch-cmt.ch-cmt-reply::before {
  content: ''; position: absolute;
  inset-inline-start: -16px; top: 18px;
  width: 14px; height: 12px;
  border: 2px solid rgba(160,32,240,.25);
  border-top: none; border-inline-end: none;
  border-radius: 0 0 0 8px;
}
.ch-cmt.ch-cmt-ai {
  background: linear-gradient(135deg, rgba(160,32,240,.08), color-mix(in srgb, var(--surface-1) 92%, transparent));
  border-color: rgba(160,32,240,.28);
  box-shadow: 0 4px 14px rgba(160,32,240,.06);
}
.ch-cmt-av { box-shadow: 0 2px 6px rgba(0,0,0,.16); border: 1.5px solid var(--surface-1); width: 30px; height: 30px; font-size: 13px; }
.ch-cmt-badge { letter-spacing: .2px; box-shadow: 0 2px 6px rgba(0,0,0,.12); }
.ch-cmt-badge.ch-badge-ai { background: linear-gradient(135deg,#a020f0,#6f1bb8); box-shadow: 0 2px 6px rgba(160,32,240,.30); }
.ch-cmt-badge.ch-badge-human { background: linear-gradient(135deg,#1e6dff,#0b3fae); box-shadow: 0 2px 6px rgba(30,109,255,.30); }
.ch-cmt-handle { font-size: 11px; padding: 1px 6px; background: var(--surface-2); border-radius: 8px; }
.ch-cmt-msg { font-size: 12.5px; }

/* === STORIES polish === */
.ch-ig-stories { gap: 14px; }
.ch-ig-story { position: relative; }
.ch-ig-st-cover {
  height: 220px; border-radius: 18px;
  background-image: radial-gradient(circle at 25% 20%, rgba(255,255,255,.55), transparent 55%),
                    radial-gradient(circle at 75% 75%, rgba(0,0,0,.18), transparent 55%),
                    linear-gradient(135deg, var(--ch-cover-c, #f8d6e8), color-mix(in srgb, var(--ch-cover-c, #f8d6e8) 55%, #fff));
  position: relative; overflow: hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.45);
  transition: transform .3s;
  cursor: pointer;
}
.ch-ig-story:hover .ch-ig-st-cover { transform: scale(1.02); }
.ch-ig-st-cover::before {
  content: attr(data-letter); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 92px; font-weight: 900; color: rgba(255,255,255,.55);
  text-shadow: 0 6px 24px rgba(0,0,0,.30);
  font-family: Vazirmatn, sans-serif;
}
.ch-ig-st-cover::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 70%;
  background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.45));
}
.ch-ig-st-ring {
  inset: -4px; border-radius: 22px; opacity: .85;
  background: conic-gradient(from 0deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888, #f09433);
  animation: chRingSpin 16s linear infinite;
}
@keyframes chRingSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.ch-ig-st-icon {
  position: absolute; bottom: 14px; inset-inline-start: 14px;
  z-index: 2;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: #E4405F;
  display: grid; place-items: center;
  font-size: 15px; text-shadow: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.30);
}
.ch-ig-st-title { font-size: 13px; line-height: 1.4; padding-top: 8px; }
.ch-ig-st-stats { font-size: 11px; font-weight: 700; }
.ch-ig-st-stats > span:nth-child(1) { color: #a020f0; }
.ch-ig-st-stats > span:nth-child(2) { color: #1e6dff; }
.ch-ig-st-stats > span:nth-child(3) { color: #E4405F; }
.ch-ig-st-stats > span:nth-child(4) { color: var(--text-muted); font-weight: 400; }
.ch-ig-st-poll {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-1) 92%, transparent), var(--surface-1));
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  border-radius: 12px;
}
.ch-ig-st-poll-bar { height: 8px; border-radius: 4px; background: var(--surface-2); }
.ch-ig-st-poll-bar i { background: linear-gradient(90deg,#E4405F,#bc1888); border-radius: 4px; box-shadow: 0 1px 4px rgba(228,64,95,.40); }
.ch-ig-st-time { padding-top: 4px; }

/* expired story styling */
.ch-ig-st-cover[data-expired] { filter: grayscale(.4) brightness(.95); }
.ch-ig-st-cover[data-expired] .ch-ig-st-ring { background: conic-gradient(#999, #555); opacity: .4; animation: none; }

/* === TELEGRAM polish === */
.ch-tg-post {
  background: var(--surface-1); border-radius: 16px; padding: 14px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.ch-tg-post:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,136,204,.10); border-color: rgba(0,136,204,.25); }
.ch-tg-media {
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #37bbfe, #0088cc 70%, #005a8a);
  box-shadow: 0 6px 16px rgba(0,136,204,.30), inset 0 1px 0 rgba(255,255,255,.30);
  font-size: 22px;
}
.ch-tg-title { font-size: 14.5px; line-height: 1.4; }
.ch-tg-text { font-size: 12.5px; line-height: 1.7; }
.ch-tg-stats { gap: 12px; }
.ch-tg-views {
  font-weight: 800;
  padding: 2px 8px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(0,136,204,.10), rgba(0,136,204,.04));
  color: #0088cc !important;
  border: 1px solid rgba(0,136,204,.15);
}
.ch-tg-rx { font-weight: 600; }
.ch-tg-disc-thread { border-radius: 14px; }

/* === WHATSAPP polish === */
.ch-wa-bc {
  background: var(--surface-1); border-radius: 16px; padding: 14px;
  transition: transform .25s, box-shadow .25s;
}
.ch-wa-bc:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(37,211,102,.10); }
.ch-wa-bc-head { grid-template-columns: 6px 1fr auto; }
.ch-wa-bc-tone { width: 6px; border-radius: 3px; box-shadow: 0 0 8px currentColor; }
.ch-wa-bc-title { font-size: 14px; }
.ch-wa-bc-sent {
  font-size: 22px; font-weight: 900;
  background: linear-gradient(135deg, #25D366, #128C7E); -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1.2;
}
.ch-wa-bc-bars { gap: 8px; padding-top: 4px; }
.ch-wa-bar { grid-template-columns: 56px 1fr 52px; font-size: 11px; }
.ch-wa-bar span { font-weight: 700; }
.ch-wa-bar-bar { height: 8px; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0,0,0,.08); border: none; background: var(--surface-2); }
.ch-wa-bar-bar i { border-radius: 4px; box-shadow: 0 1px 4px currentColor; }
.ch-wa-bar-d   { background: linear-gradient(90deg, #25D366, #1ebd5c) !important; }
.ch-wa-bar-r   { background: linear-gradient(90deg, #128C7E, #0e7368) !important; }
.ch-wa-bar-rep { background: linear-gradient(90deg, #075E54, #054943) !important; }

.ch-wa-cv-item {
  background: var(--surface-1); border-radius: 14px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
}
.ch-wa-cv-item:hover { transform: translateX(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.ch-wa-cv-item.has-unread {
  border-inline-start: 4px solid #25D366;
  padding-inline-start: 14px;
}
.ch-wa-cv-av { box-shadow: 0 4px 12px rgba(0,0,0,.16); border: 2px solid var(--surface-1); }
.ch-wa-cv-name { font-size: 13.5px; }
.ch-wa-cv-msg { color: color-mix(in srgb, var(--text) 80%, var(--text-muted)); }
.ch-wa-cv-foot { padding-top: 8px; border-top: 1px dashed var(--border); margin-top: 8px; }
.ch-wa-cv-sent { font-weight: 700; }
.ch-wa-cv-unread {
  background: linear-gradient(135deg,#25D366,#128C7E); color: #fff !important;
  padding: 1px 10px; border-radius: 10px;
  box-shadow: 0 2px 8px rgba(37,211,102,.30);
  animation: chUnreadPulse 2s infinite;
}
@keyframes chUnreadPulse { 0%,100% { box-shadow: 0 2px 8px rgba(37,211,102,.30); } 50% { box-shadow: 0 2px 14px rgba(37,211,102,.60); } }

/* === SMS polish === */
.ch-sms-c {
  background: var(--surface-1); border-radius: 16px; padding: 14px;
  transition: transform .25s, box-shadow .25s;
}
.ch-sms-c:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(160,32,240,.08); }
.ch-sms-c-head { padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 12px; }
.ch-sms-c-title {
  font-size: 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ch-sms-c-title::before {
  content: '✉'; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#a020f0,#6f1bb8); color: #fff;
  display: grid; place-items: center; font-size: 11px;
  box-shadow: 0 2px 6px rgba(160,32,240,.30);
}
.ch-sms-c-grid {
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) { .ch-sms-c-grid { grid-template-columns: repeat(2, 1fr); } }
.ch-sms-c-grid div {
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, transparent));
  border-radius: 10px; padding: 8px 10px;
  text-align: center;
}
.ch-sms-c-grid div:first-child { background: linear-gradient(135deg, rgba(160,32,240,.10), rgba(160,32,240,.04)); border-color: rgba(160,32,240,.18); }
.ch-sms-c-grid div:first-child b { color: #a020f0; font-size: 16px; }
.ch-sms-c-grid span { font-size: 10.5px; font-weight: 700; }
.ch-sms-c-grid b { font-size: 14px; }
.ch-sms-d { color: var(--green-600) !important; font-weight: 800 !important; }
.ch-sms-d em { background: rgba(16,185,129,.15); padding: 1px 6px; border-radius: 8px; }
.ch-sms-rep { color: #1e6dff !important; font-weight: 800 !important; }

/* SMS templates */
.ch-sms-tpl-item {
  background: var(--surface-1); border-radius: 16px; padding: 14px;
  transition: transform .25s, box-shadow .25s;
}
.ch-sms-tpl-item:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0,0,0,.08); }
.ch-sms-tpl-head { padding-bottom: 8px; border-bottom: 1px dashed var(--border); margin-bottom: 10px; }
.ch-sms-tpl-title { font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.ch-sms-tpl-title::before {
  content: '📄'; width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(135deg,#1e6dff,#0b3fae); color: #fff;
  display: grid; place-items: center; font-size: 11px;
}
.ch-sms-tpl-usage {
  background: var(--surface-2); padding: 2px 8px; border-radius: 10px;
  font-weight: 700;
}
.ch-sms-tpl-body { background: var(--surface-2); font-size: 12.5px; line-height: 1.75; }
.ch-sms-tpl-body { position: relative; }
.ch-sms-tpl-body strong { background: rgba(160,32,240,.12); color: #a020f0; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* SMS scheduled */
.ch-sms-sq {
  background: var(--surface-1); border-radius: 14px;
  transition: transform .2s, box-shadow .2s;
}
.ch-sms-sq:hover { transform: translateX(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.ch-sms-sq-when {
  background: linear-gradient(135deg, rgba(160,32,240,.12), rgba(160,32,240,.04));
  border: 1px solid rgba(160,32,240,.18); border-radius: 10px;
  padding: 8px 12px; font-size: 12.5px;
}
.ch-sms-sq-when span { display: block; line-height: 1.4; }

/* === IRANIAN platforms polish === */
.ch-irn-card { padding: 0; overflow: hidden; }
.ch-irn-card .card-head { padding: 14px; }
.ch-irn-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; right: 0; height: 4px;
}
.ch-irn-card.ch-irn-bale::before   { background: linear-gradient(90deg,#3b78e6,#1f4ea1); }
.ch-irn-card.ch-irn-eitaa::before  { background: linear-gradient(90deg,#ff8a3d,#d94a05); }
.ch-irn-card.ch-irn-rubika::before { background: linear-gradient(90deg,#ff4d8a,#a91454); }
.ch-irn-card .ch-deep-icon { width: 44px; height: 44px; font-size: 20px; }
.ch-irn-name { font-size: 16px; }
.ch-irn-paused {
  background: rgba(245,158,11,.14); color: var(--amber-600);
  padding: 1px 8px; border-radius: 8px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.ch-irn-growth { background: rgba(16,185,129,.14); color: var(--green-600); font-weight: 800; padding: 4px 12px; border-radius: 12px; }
.ch-irn-posts { padding: 12px 14px 14px; gap: 10px; max-height: 380px; }
.ch-irn-posts::-webkit-scrollbar { width: 4px; }
.ch-irn-posts::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
.ch-irn-post {
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, transparent));
  border-radius: 10px; padding: 10px 12px;
  transition: transform .2s, box-shadow .2s, background .2s;
}
.ch-irn-post:hover { transform: translateX(-2px); background: var(--surface-2); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.ch-irn-post-title { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; }
.ch-irn-post-stats { font-size: 11px; font-weight: 700; gap: 10px; }
.ch-irn-card.ch-irn-bale .ch-irn-post-stats > span:first-child { color: #2C5DC8; }
.ch-irn-card.ch-irn-eitaa .ch-irn-post-stats > span:first-child { color: #F0631C; }
.ch-irn-card.ch-irn-rubika .ch-irn-post-stats > span:first-child { color: #D6206C; }
.ch-irn-post-time { color: var(--text-muted); font-weight: 400; }

/* === SCHEDULER polish === */
.ch-sched-item {
  background: var(--surface-1); border-radius: 14px;
  grid-template-columns: 140px 1fr auto;
}
.ch-sched-item:hover { box-shadow: 0 8px 22px rgba(0,0,0,.08); }
.ch-sched-when { gap: 10px; align-items: stretch; }
.ch-sched-when-tag { width: 6px; border-radius: 3px; height: auto; min-height: 40px; box-shadow: 0 0 8px currentColor; }
.ch-sched-when span { font-size: 12.5px; font-weight: 800; }
.ch-sched-title { font-size: 13.5px; }
.ch-sched-type {
  background: linear-gradient(135deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, transparent));
  font-weight: 700; padding: 2px 10px;
}
.ch-sched-pf { font-size: 16px; transition: transform .2s; }
.ch-sched-pf:hover { transform: scale(1.2); }
.ch-sched-st { font-weight: 700; padding: 4px 12px; }

/* === REPORTS polish === */
.ch-rep-trend, .ch-rep-attr { border-radius: 18px; }
.ch-attr-row { padding: 10px 0; }
.ch-attr-row + .ch-attr-row { border-top: 1px dashed var(--border); }
.ch-attr-dot {
  width: 14px; height: 14px;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent), 0 2px 6px rgba(0,0,0,.16);
}
.ch-attr-name { font-size: 13px; }
.ch-attr-share { font-size: 14px; background: linear-gradient(135deg, var(--text), var(--text-muted)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-attr-bar { height: 10px; border-radius: 5px; background: var(--surface-2); box-shadow: inset 0 1px 2px rgba(0,0,0,.08); }
.ch-attr-bar i { border-radius: 5px; box-shadow: 0 1px 4px currentColor; }
.ch-attr-stats { padding-top: 6px; font-size: 11.5px; }
.ch-attr-rev { font-weight: 800; }

/* === COMPOSE MODAL polish === */
.ch-cm-card { width: min(720px, 94vw); border-radius: 20px; }
.ch-cm-head { padding: 18px 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--brand-500) 6%, transparent), transparent); border-radius: 20px 20px 0 0; }
.ch-cm-title { font-size: 18px; background: linear-gradient(135deg, var(--text), var(--brand-500) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-cm-body { padding: 20px 22px; }
.ch-cm-channels { gap: 10px; }
.ch-cm-ch {
  position: relative; padding: 10px 12px; border-radius: 12px; gap: 8px;
  background: var(--surface-1); border: 1.5px solid var(--border);
  cursor: pointer; transition: all .2s; user-select: none;
}
.ch-cm-ch:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 5%, var(--surface-1)); }
.ch-cm-ch input { position: absolute; opacity: 0; pointer-events: none; }
.ch-cm-ch::after {
  content: '✓'; position: absolute; top: 6px; inset-inline-end: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 11px; font-weight: 900;
  display: grid; place-items: center;
  opacity: 0; transform: scale(0); transition: all .2s;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--c) 40%, transparent);
}
.ch-cm-ch:has(input:checked) {
  border-color: var(--c);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 12%, var(--surface-1)), var(--surface-1));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--c) 18%, transparent);
}
.ch-cm-ch:has(input:checked)::after { opacity: 1; transform: scale(1); }
.ch-cm-ch-icon { width: 28px; height: 28px; box-shadow: 0 2px 8px rgba(0,0,0,.16); }
.ch-cm-ch-name { font-weight: 700; font-size: 12.5px; }

.ch-cm-types label,
.ch-cm-when-opts label {
  background: var(--surface-1); border: 1px solid var(--border);
  padding: 6px 14px; border-radius: 10px; font-weight: 700;
  cursor: pointer; transition: all .2s;
}
.ch-cm-types label:has(input:checked),
.ch-cm-when-opts label:has(input:checked) {
  background: linear-gradient(135deg, var(--brand-500), #6f1bb8); color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(160,32,240,.30);
}
.ch-cm-text {
  background: var(--surface-1); border: 1.5px solid var(--border); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.75; transition: border-color .2s, box-shadow .2s;
}
.ch-cm-text:focus { border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(160,32,240,.12); outline: none; }
.ch-cm-counter { font-weight: 700; }
.ch-cm-foot { padding: 14px 22px 18px; }
.ch-cm-foot .btn.primary { background: linear-gradient(135deg,#a020f0,#6f1bb8); border: none; box-shadow: 0 6px 18px rgba(160,32,240,.30); }

/* === Empty state polish === */
.ch-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 40px 20px;
  color: var(--text-muted); font-size: 13px;
}
.ch-empty::before {
  content: '✦'; font-size: 32px; color: var(--brand-500); opacity: .5;
}

/* === Dark theme tweaks === */
[data-theme="dark"] .ch-pf-card { background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 92%, transparent)); }
[data-theme="dark"] .ch-ig-cover,
[data-theme="dark"] .ch-ig-st-cover { box-shadow: 0 10px 26px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.18); }
[data-theme="dark"] .ch-sms-tpl-body { background: var(--surface-1); }
[data-theme="dark"] .ch-live-item:first-child { background: linear-gradient(135deg, rgba(160,32,240,.12), color-mix(in srgb, var(--surface-1) 88%, transparent)); }

/* ===================================================================== */
/* ========== LINKEDIN + YOUTUBE + APARAT (3 new platforms) =========== */
/* ===================================================================== */

/* LinkedIn icon override (in) */
.ch-icon-linkedin {
  font-family: Arial, sans-serif !important;
  font-weight: 900 !important;
  font-style: italic;
  font-size: 22px !important;
  letter-spacing: -1px;
}

/* === LINKEDIN posts === */
.ch-li-body { padding-top: 12px; }
.ch-li-posts { display: flex; flex-direction: column; gap: 16px; }
.ch-li-post {
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  animation: chLiveSlide .5s both; animation-delay: calc(var(--ch-i,0) * 60ms);
}
.ch-li-post:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(10,102,194,.10); border-color: rgba(10,102,194,.25); }
.ch-li-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.ch-li-author { display: flex; gap: 10px; align-items: center; }
.ch-li-author-av {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.12); border: 2px solid var(--surface-1);
}
.ch-li-author-name { font-weight: 800; color: var(--text); font-size: 13.5px; }
.ch-li-author-role { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.ch-li-type {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 10px;
  background: var(--surface-2); color: var(--text);
}
.ch-li-type-article { background: rgba(10,102,194,.10); color: #0A66C2; }
.ch-li-type-image   { background: rgba(245,158,11,.10); color: var(--amber-600); }
.ch-li-type-video   { background: rgba(255,0,0,.10); color: #cc0000; }
.ch-li-type-event   { background: rgba(160,32,240,.10); color: #a020f0; }
.ch-li-type-job     { background: rgba(16,185,129,.12); color: var(--green-600); font-weight: 800; }

.ch-li-cover {
  height: 160px; border-radius: 12px;
  background-image: radial-gradient(circle at 25% 20%, rgba(255,255,255,.50), transparent 55%),
                    radial-gradient(circle at 75% 80%, rgba(0,0,0,.16), transparent 50%),
                    linear-gradient(135deg, var(--ch-cover-c, #cfe1ff), color-mix(in srgb, var(--ch-cover-c, #cfe1ff) 60%, #fff));
  position: relative; overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.40);
}
.ch-li-cover::before {
  content: attr(data-letter); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 72px; font-weight: 900; color: rgba(255,255,255,.55);
  text-shadow: 0 4px 18px rgba(0,0,0,.20);
}
.ch-li-cover::after {
  content: 'in'; position: absolute; top: 10px; inset-inline-start: 10px;
  width: 28px; height: 28px; border-radius: 6px;
  background: linear-gradient(135deg,#0A66C2,#004182); color: #fff;
  display: grid; place-items: center;
  font-family: Arial, sans-serif; font-weight: 900; font-size: 14px; font-style: italic;
  letter-spacing: -1px;
  box-shadow: 0 4px 10px rgba(10,102,194,.30);
}
.ch-li-title { font-size: 15px; font-weight: 800; color: var(--text); line-height: 1.5; }
.ch-li-body-text { font-size: 13px; color: var(--text-muted); line-height: 1.75; }
.ch-li-stats {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 10px 0; margin: 4px 0;
  border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border);
  font-size: 12px; font-weight: 700;
}
.ch-li-stats > span:nth-child(1) { color: #0A66C2; }
.ch-li-stats > span:nth-child(2) { color: #1e6dff; }
.ch-li-stats > span:nth-child(3) { color: #10b981; }
.ch-li-views { color: var(--text-muted) !important; margin-inline-start: auto; font-weight: 600 !important; }

/* === VIDEO PLATFORMS (YouTube + Aparat) === */
.ch-video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 18px; }
@media (max-width: 1100px) { .ch-video-grid { grid-template-columns: 1fr; } }
.ch-video-card { padding: 0; overflow: hidden; border-radius: 18px; position: relative; }
.ch-video-card .card-head { padding: 16px 18px 14px; }
.ch-video-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; right: 0; height: 4px;
}
.ch-video-card.ch-video-youtube::before { background: linear-gradient(90deg, #ff4444, #cc0000, #800000); }
.ch-video-card.ch-video-aparat::before  { background: linear-gradient(90deg, #ff3a5a, #ED1A3B, #b81230); }

.ch-video-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ch-video-head-l { display: flex; gap: 12px; align-items: center; }
.ch-video-card .ch-deep-icon { width: 48px; height: 48px; font-size: 22px; border-radius: 14px; }
.ch-video-name { font-size: 16px; font-weight: 800; }
.ch-video-sub { font-size: 11.5px; color: var(--text-muted); margin-top: 2px; direction: ltr; text-align: start; }
.ch-video-growth-chip {
  background: rgba(16,185,129,.14); color: var(--green-600);
  font-weight: 800; font-size: 12px;
  padding: 4px 12px; border-radius: 12px;
}

.ch-video-stats-bar {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 60%, transparent), transparent);
  padding: 10px 18px;
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
}
.ch-video-stats-bar > div { text-align: center; padding: 4px 6px; }
.ch-video-stats-bar > div + div { border-inline-start: 1px dashed var(--border); }
.ch-video-stats-bar > div span { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 3px; font-weight: 700; letter-spacing: .3px; }
.ch-video-stats-bar > div b { font-size: 13px; font-weight: 800; color: var(--text); }
.ch-video-card.ch-video-youtube .ch-video-stats-bar > div b { background: linear-gradient(135deg, #cc0000, #800000); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ch-video-card.ch-video-aparat  .ch-video-stats-bar > div b { background: linear-gradient(135deg, #ED1A3B, #b81230); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ch-video-list { padding: 14px 18px 18px; display: flex; flex-direction: column; gap: 10px; max-height: 480px; overflow-y: auto; }
.ch-video-list::-webkit-scrollbar { width: 4px; }
.ch-video-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.ch-video-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 12px;
  padding: 8px; border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--surface-2) 70%, transparent));
  transition: background .2s, transform .2s, box-shadow .2s;
  animation: chLiveSlide .4s both; animation-delay: calc(var(--ch-i,0) * 30ms);
}
.ch-video-item:hover { background: var(--surface-2); transform: translateX(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
.ch-video-thumb {
  width: 120px; height: 72px; border-radius: 10px;
  background-image: radial-gradient(circle at 30% 25%, rgba(255,255,255,.48), transparent 55%),
                    radial-gradient(circle at 70% 80%, rgba(0,0,0,.22), transparent 50%),
                    linear-gradient(135deg, var(--ch-cover-c, #fde2e4), color-mix(in srgb, var(--ch-cover-c, #fde2e4) 55%, #fff));
  position: relative; overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.35);
}
.ch-video-thumb::before {
  content: attr(data-letter); position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 36px; font-weight: 900; color: rgba(255,255,255,.55);
  text-shadow: 0 3px 12px rgba(0,0,0,.25);
}
.ch-video-play {
  position: absolute; top: 50%; inset-inline-start: 50%;
  transform: translate(50%, -50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #cc0000;
  display: grid; place-items: center; font-size: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.30);
  z-index: 2;
}
.ch-video-card.ch-video-aparat .ch-video-play { color: #ED1A3B; }
.ch-video-dur {
  position: absolute; bottom: 6px; inset-inline-end: 6px;
  background: rgba(0,0,0,.75); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 6px; border-radius: 5px;
  direction: ltr;
  z-index: 2;
}
.ch-video-meta { min-width: 0; align-self: center; }
.ch-video-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  line-height: 1.45; margin-bottom: 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ch-video-stats { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11px; color: var(--text-muted); font-weight: 600; align-items: center; }
.ch-video-views { color: #cc0000 !important; font-weight: 800 !important; }
.ch-video-card.ch-video-aparat .ch-video-views { color: #ED1A3B !important; }
.ch-video-ret {
  background: rgba(16,185,129,.12); color: var(--green-600);
  padding: 1px 6px; border-radius: 8px; font-weight: 800;
}
.ch-video-time { margin-inline-start: auto; color: var(--text-muted); }

/* Dark theme for new platforms */
[data-theme="dark"] .ch-li-post,
[data-theme="dark"] .ch-video-item { background: var(--surface-1); }
[data-theme="dark"] .ch-video-card { background: var(--surface-2); }


/* ============================================================
   VOIP HUB — namespace `vp-*`
   صف زنده + تماس‌های فعال + وضعیت کارشناسان + شماره‌ها
   ============================================================ */

/* ----- HERO ----- */
.vp-hero {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 28px 32px 0;
  margin-bottom: 18px;
  background: linear-gradient(135deg, rgba(125, 159, 245, .14) 0%, rgba(111, 185, 143, .14) 40%, rgba(244, 162, 97, .12) 100%), var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  isolation: isolate;
}
.vp-hero-bg {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(circle at 8% 12%, rgba(125,159,245,.30), transparent 38%),
    radial-gradient(circle at 92% 18%, rgba(244,162,97,.22), transparent 42%),
    radial-gradient(circle at 50% 100%, rgba(111,185,143,.22), transparent 45%);
  animation: vpHeroFlow 16s ease-in-out infinite alternate;
}
@keyframes vpHeroFlow {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(0,-6px,0) scale(1.04); }
}
.vp-hero-top {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 24px;
  align-items: center;
}
.vp-hero-left { min-width: 0; }
.vp-hero-title {
  font-size: 28px; font-weight: 800; margin: 6px 0 4px;
  background: linear-gradient(135deg, var(--text), #2c7873 60%, #6fb98f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  letter-spacing: -.02em;
}
.vp-hero-sub { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }

.vp-pbx-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(16, 185, 129, .10);
  border: 1px solid rgba(16, 185, 129, .25);
  border-radius: 999px;
  font-size: 12px; font-weight: 600;
  color: #047857;
}
[data-theme="dark"] .vp-pbx-chip { color: #6ee7b7; background: rgba(16,185,129,.14); }
.vp-pbx-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16,185,129,.55);
  animation: vpDotPulse 1.6s ease-out infinite;
}
@keyframes vpDotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(16,185,129,.55); }
  70%  { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
.vp-pbx-ping { font-family: ui-monospace, 'Cascadia Code', monospace; color: var(--text-muted); }

.vp-hero-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.vp-hchip {
  font-size: 12px; padding: 5px 10px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-muted);
}
.vp-hchip b { color: var(--text); font-weight: 700; margin-inline-end: 2px; }
.vp-hchip-live {
  background: linear-gradient(135deg, rgba(220,38,38,.10), rgba(244,114,182,.12));
  color: #b91c1c; border-color: rgba(220,38,38,.25); font-weight: 600;
}
[data-theme="dark"] .vp-hchip-live { color: #fca5a5; }
.vp-live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: #ef4444; margin-inline-end: 6px;
  animation: vpDotPulse 1.4s ease-out infinite;
}

/* hero right (wave + headset) */
.vp-hero-right {
  position: relative;
  height: 140px;
  display: flex; align-items: center; justify-content: center;
}
.vp-wave {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  opacity: .9;
}
.vp-wave svg { width: 100%; height: 100%; }
.vp-wave-back, .vp-wave-front {
  fill: none; stroke: url(#vp-wave-g); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(125,159,245,.35));
}
.vp-wave-back { opacity: .35; animation: vpWaveBob 4s ease-in-out infinite; }
.vp-wave-front { animation: vpWaveBob 2.6s ease-in-out infinite reverse; }
@keyframes vpWaveBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.vp-wave-bars {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px; align-items: flex-end; height: 40px; pointer-events: none;
}
.vp-wave-bars span {
  width: 4px; border-radius: 2px;
  background: linear-gradient(180deg, #7c9cf4, #6fb98f);
  animation: vpEq 1.2s ease-in-out infinite;
}
.vp-wave-bars span:nth-child(1) { height: 12px; animation-delay: -.1s; }
.vp-wave-bars span:nth-child(2) { height: 20px; animation-delay: -.3s; }
.vp-wave-bars span:nth-child(3) { height: 30px; animation-delay: -.5s; }
.vp-wave-bars span:nth-child(4) { height: 24px; animation-delay: -.2s; }
.vp-wave-bars span:nth-child(5) { height: 36px; animation-delay: -.6s; }
.vp-wave-bars span:nth-child(6) { height: 18px; animation-delay: -.4s; }
.vp-wave-bars span:nth-child(7) { height: 28px; animation-delay: -.1s; }
.vp-wave-bars span:nth-child(8) { height: 38px; animation-delay: -.7s; }
.vp-wave-bars span:nth-child(9) { height: 22px; animation-delay: -.2s; }
.vp-wave-bars span:nth-child(10){ height: 30px; animation-delay: -.5s; }
.vp-wave-bars span:nth-child(11){ height: 18px; animation-delay: -.3s; }
.vp-wave-bars span:nth-child(12){ height: 14px; animation-delay: -.1s; }
@keyframes vpEq {
  0%, 100% { transform: scaleY(.5); opacity: .6; }
  50%      { transform: scaleY(1.4); opacity: 1; }
}
.vp-headset {
  position: relative; z-index: 2;
  width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
  backdrop-filter: blur(6px) saturate(140%);
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 10px 30px rgba(125,159,245,.30);
  color: #2c7873;
  animation: vpHeadFloat 4s ease-in-out infinite;
}
.vp-headset svg { width: 50px; height: 50px; }
@keyframes vpHeadFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}
[data-theme="dark"] .vp-headset {
  background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
  border-color: rgba(255,255,255,.10); color: #c7d2fe;
}

/* KPI grid inside hero */
.vp-kpi-grid {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px dashed var(--border);
  padding-bottom: 22px;
}

/* ----- BAND (queue + active side by side) ----- */
.vp-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 18px;
  margin-bottom: 18px;
}
@media (max-width: 1180px) {
  .vp-band { grid-template-columns: 1fr; }
}

/* ----- Generic card shell ----- */
.vp-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.vp-card + .vp-card { margin-top: 18px; }
.vp-card-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vp-card-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
}
.vp-card-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.vp-title-icon {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 10px;
  background: linear-gradient(135deg, rgba(125,159,245,.18), rgba(111,185,143,.22));
  font-size: 15px;
}
.vp-title-icon-queue  { background: linear-gradient(135deg, #fef3c7, #fcd34d); color: #92400e; }
.vp-title-icon-active { background: linear-gradient(135deg, #d1fae5, #6ee7b7); color: #065f46; }
.vp-title-icon-status { background: linear-gradient(135deg, #dbeafe, #93c5fd); color: #1e40af; }
.vp-title-icon-num    { background: linear-gradient(135deg, #ede9fe, #c4b5fd); color: #5b21b6; }
[data-theme="dark"] .vp-title-icon-queue  { background: linear-gradient(135deg,#78350f,#b45309); color:#fef3c7; }
[data-theme="dark"] .vp-title-icon-active { background: linear-gradient(135deg,#064e3b,#047857); color:#d1fae5; }
[data-theme="dark"] .vp-title-icon-status { background: linear-gradient(135deg,#1e3a8a,#2563eb); color:#dbeafe; }
[data-theme="dark"] .vp-title-icon-num    { background: linear-gradient(135deg,#4c1d95,#7c3aed); color:#ede9fe; }

.vp-card-actions { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vp-card-actions-sep {
  width: 1px; height: 20px; background: var(--border);
  margin: 0 4px;
}

/* Tabs */
.vp-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: 999px; border: 1px solid var(--border); }
.vp-tab {
  padding: 5px 12px; font-size: 12px; font-weight: 600;
  background: transparent; border: none; border-radius: 999px;
  color: var(--text-muted); transition: .18s;
}
.vp-tab:hover { color: var(--text); }
.vp-tab.active {
  background: var(--surface); color: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}

.vp-pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.5);
  animation: vpDotPulse 1.4s ease-out infinite;
}
.vp-count { font-size: 13px; font-weight: 700; color: var(--text); }

/* ===== QUEUE LIST ===== */
/* [crm-l1-menu-p1] UX audit fix — .vp-q-row's 6-column grid needs ~780px of
   minimum content width (38+160+180+130+90px fixed/min tracks + the actions
   column), but this widget normally sits in a 2-column dashboard split at
   ~560-600px wide. The @media(max-width:920px) stacked layout below never
   fired because it checks the VIEWPORT, not this card's own width — so on
   an ordinary desktop viewport (well over 920px) the row silently overflowed
   its own card, and .vp-card's overflow:hidden clipped the spillover
   (wait-time text/action icons rendering cut off at the card edge). A
   container query reacts to the CARD's width instead, so it also fires
   correctly on typical desktop viewports.
*/
.vp-queue-list { display: flex; flex-direction: column; gap: 10px; container-type: inline-size; }
.vp-q-row {
  display: grid;
  grid-template-columns: 38px minmax(160px, 1.4fr) minmax(180px, 2fr) 130px 90px auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
  transition: .22s;
  animation: vpRowSlide .42s cubic-bezier(.25,.8,.3,1) both;
  animation-delay: calc(var(--vp-i,0) * 35ms);
}
@keyframes vpRowSlide {
  from { opacity: 0; transform: translateY(8px) translateX(-4px); }
  to   { opacity: 1; transform: translateY(0) translateX(0); }
}
.vp-q-row:hover {
  background: var(--surface);
  transform: translateX(-2px);
  box-shadow: var(--shadow-sm);
}
.vp-q-row-vip {
  background: linear-gradient(90deg, rgba(244,114,182,.10), var(--surface-2) 30%);
  border-color: rgba(244,114,182,.30);
}
.vp-q-row-vip::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f472b6, #6fb98f);
}
.vp-q-row-high {
  background: linear-gradient(90deg, rgba(244,162,97,.08), var(--surface-2) 30%);
  border-color: rgba(244,162,97,.28);
}
.vp-q-row-high::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 10%; bottom: 10%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, #f59e0b, #ef4444);
}
.vp-q-row-normal::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 30%; bottom: 30%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--border-strong);
}
/* [crm-l1-menu-p1] UX audit fix — same stacked layout the @media(max-width:
   920px) block below already uses for narrow viewports, applied by CARD
   width via @container instead (see .vp-queue-list's container-type above).
   Threshold set above the ~780px this row's fixed/min tracks actually need. */
@container (max-width: 780px) {
  .vp-q-row {
    grid-template-columns: 32px 1fr auto;
    grid-template-areas:
      "rank id prio"
      "tag tag tag"
      "wait wait actions";
    gap: 8px;
  }
  .vp-q-rank { grid-area: rank; }
  .vp-q-id { grid-area: id; }
  .vp-q-prio { grid-area: prio; }
  .vp-q-tag-col { grid-area: tag; flex-direction: row; gap: 8px; flex-wrap: wrap; }
  .vp-q-wait { grid-area: wait; }
  .vp-q-actions { grid-area: actions; justify-content: flex-end; }
}

.vp-q-rank {
  width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 13px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text);
}
.vp-q-row-vip .vp-q-rank {
  background: linear-gradient(135deg, #f472b6, #6fb98f);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 10px rgba(111,185,143,.30);
}
.vp-q-row-high .vp-q-rank {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 10px rgba(245,158,11,.28);
}

.vp-q-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vp-q-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: 14px; color: #fff;
  background: linear-gradient(135deg, #2c7873, #6fb98f);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
}
.vp-q-avatar[data-iden="customer"] { background: linear-gradient(135deg, #10b981, #14b8a6); }
.vp-q-avatar[data-iden="student"]  { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.vp-q-avatar[data-iden="lead"]     { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.vp-q-avatar[data-iden="unknown"]  { background: linear-gradient(135deg, #94a3b8, #64748b); }

.vp-q-meta { min-width: 0; }
.vp-q-name { font-size: 13.5px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-q-phone { font-size: 12px; color: var(--text-muted); font-family: ui-monospace, 'Cascadia Code', monospace; margin-top: 1px; }

.vp-q-tag-col {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.vp-q-tag {
  font-size: 11.5px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vp-q-city { font-size: 11px; color: var(--text-faint); }

/* Identity chip (shared with active + numbers) */
.vp-q-iden, .vp-ac-iden {
  display: inline-flex; align-items: center;
  font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
  font-weight: 600; line-height: 1.5;
  width: fit-content;
}
.vp-iden-customer { background: rgba(16,185,129,.12); color: #047857; }
.vp-iden-student  { background: rgba(99,102,241,.12); color: #4338ca; }
.vp-iden-lead     { background: rgba(245,158,11,.14); color: #b45309; }
.vp-iden-unknown  { background: rgba(148,163,184,.18); color: #475569; }
[data-theme="dark"] .vp-iden-customer { color: #6ee7b7; background: rgba(16,185,129,.16); }
[data-theme="dark"] .vp-iden-student  { color: #c7d2fe; background: rgba(99,102,241,.20); }
[data-theme="dark"] .vp-iden-lead     { color: #fcd34d; background: rgba(245,158,11,.20); }
[data-theme="dark"] .vp-iden-unknown  { color: #cbd5e1; background: rgba(148,163,184,.24); }

.vp-q-ainote {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px;
  padding: 6px 10px 6px 6px;
  background:
    linear-gradient(135deg, rgba(111,185,143,.10), rgba(125,159,245,.10)),
    linear-gradient(90deg, rgba(111,185,143,.06), transparent 70%);
  border: 1px solid rgba(111,185,143,.22);
  border-radius: 999px;
  margin-top: 4px;
}
.vp-q-ainote-badge {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6fb98f, #2c7873);
  box-shadow: 0 2px 6px rgba(111,185,143,.30), inset 0 0 0 2px rgba(255,255,255,.22);
  color: #fff;
  flex-shrink: 0;
}
.vp-q-ainote-spark {
  font-size: 12px;
  line-height: 1;
  animation: vpAiSparkPulse 2.4s ease-in-out infinite;
}
@keyframes vpAiSparkPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.18) rotate(20deg); opacity: .85; }
}
.vp-q-ainote-label {
  font-weight: 800;
  font-size: 11px;
  background: linear-gradient(135deg, #7c3aed, #004445);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.vp-q-ainote-sep {
  color: var(--text-faint);
  font-weight: 700;
  flex-shrink: 0;
}
.vp-q-ainote-text {
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
  line-height: 1.6;
}
[data-theme="dark"] .vp-q-ainote {
  background:
    linear-gradient(135deg, rgba(111,185,143,.14), rgba(125,159,245,.10)),
    linear-gradient(90deg, rgba(111,185,143,.10), transparent 70%);
  border-color: rgba(111,185,143,.35);
}
[data-theme="dark"] .vp-q-ainote-text { color: var(--text-muted); }
[data-theme="dark"] .vp-q-ainote-label {
  background: linear-gradient(135deg, #c4b5fd, #6fb98f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Wait time bar */
.vp-q-wait { display: flex; flex-direction: column; gap: 4px; }
.vp-q-wait-bar {
  height: 6px; border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.vp-q-wait-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #10b981 0%, #f59e0b 60%, #ef4444 100%);
  border-radius: 999px;
  transition: width .8s ease;
}
.vp-q-wait-time { font-size: 12.5px; font-weight: 700; color: var(--text); font-family: ui-monospace, monospace; }

/* Priority chip */
.vp-q-pchip {
  font-size: 11px; padding: 3px 10px; border-radius: 999px; font-weight: 700;
  white-space: nowrap;
}
.vp-pri-vip {
  background: linear-gradient(135deg, #f472b6, #6fb98f); color: #fff;
  box-shadow: 0 4px 10px rgba(111,185,143,.28);
}
.vp-pri-high {
  background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff;
}
.vp-pri-normal { background: var(--surface-3); color: var(--text-muted); }

.vp-q-actions { display: inline-flex; gap: 4px; }
.vp-q-btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 9px;
  padding: 6px 10px;
  font-size: 12px; font-weight: 600;
  transition: .15s;
}
.vp-q-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vp-q-btn-primary {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: #fff; border-color: transparent;
}
.vp-q-btn-ghost { background: transparent; }

.vp-queue-foot {
  display: flex; gap: 18px;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--border);
  font-size: 12px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.vp-foot-stat b { color: var(--text); font-weight: 700; font-family: ui-monospace, monospace; }
.vp-foot-warn b { color: #b45309; }
[data-theme="dark"] .vp-foot-warn b { color: #fcd34d; }

/* ===== ACTIVE CALLS GRID ===== */
.vp-active-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.28);
  font-size: 12px; font-weight: 700; color: #047857;
}
[data-theme="dark"] .vp-active-pill { color: #6ee7b7; }
.vp-active-pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  animation: vpDotPulse 1.4s ease-out infinite;
}

.vp-active-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.vp-ac-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
  animation: vpRowSlide .45s cubic-bezier(.25,.8,.3,1) both;
  animation-delay: calc(var(--vp-i,0) * 50ms);
}
.vp-ac-card::before {
  content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, #10b981, #14b8a6);
}
.vp-ac-positive::before { background: linear-gradient(180deg, #10b981, #6ee7b7); }
.vp-ac-neutral::before  { background: linear-gradient(180deg, #6366f1, #a5b4fc); }
.vp-ac-negative::before { background: linear-gradient(180deg, #ef4444, #f97316); }
.vp-ac-state-hold       { background: linear-gradient(90deg, rgba(244,162,97,.10), var(--surface-2) 40%); }
.vp-ac-state-hold::before { background: linear-gradient(180deg, #f59e0b, #f97316); }

.vp-ac-state {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700;
  color: #047857;
  margin-bottom: 10px;
}
[data-theme="dark"] .vp-ac-state { color: #6ee7b7; }
.vp-ac-state-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10b981;
  animation: vpDotPulse 1.4s ease-out infinite;
}
.vp-ac-state-hold .vp-ac-state { color: #b45309; }
.vp-ac-state-hold .vp-ac-state-dot { background: #f59e0b; }
.vp-ac-rec {
  margin-inline-start: auto;
  font-size: 10.5px; padding: 2px 8px;
  background: rgba(239,68,68,.10); color: #b91c1c;
  border-radius: 999px;
  letter-spacing: .04em;
  animation: vpRecBlink 1.6s ease-in-out infinite;
}
@keyframes vpRecBlink { 50% { opacity: .55; } }
[data-theme="dark"] .vp-ac-rec { color: #fca5a5; background: rgba(239,68,68,.16); }

.vp-ac-bridge {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.vp-ac-side {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.vp-ac-side-customer { justify-content: flex-end; }
.vp-ac-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13.5px; color: #fff;
  background: var(--vp-c, #2c7873);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.20);
  flex-shrink: 0;
}
.vp-ac-avatar-cust { background: linear-gradient(135deg, #10b981, #14b8a6); }
.vp-ac-avatar-cust[data-iden="lead"]    { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.vp-ac-avatar-cust[data-iden="student"] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.vp-ac-avatar-cust[data-iden="unknown"] { background: linear-gradient(135deg, #94a3b8, #64748b); }

.vp-ac-side-info { min-width: 0; }
.vp-ac-side-info-right { text-align: end; }
.vp-ac-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-ac-role { font-size: 11px; color: var(--text-muted); margin-top: 1px; font-family: ui-monospace, monospace; }

.vp-ac-link {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  height: 24px;
}
.vp-ac-link-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #6fb98f;
  animation: vpLinkFlow 1.6s ease-in-out infinite;
}
.vp-ac-link-dot:nth-child(2) { animation-delay: -.4s; }
.vp-ac-link-dot:nth-child(3) { animation-delay: -.8s; }
@keyframes vpLinkFlow {
  0%, 100% { transform: scale(.7); opacity: .35; }
  50%      { transform: scale(1.2); opacity: 1; }
}

.vp-ac-meta-row {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 8px;
}
.vp-ac-tag {
  font-size: 11.5px; padding: 2px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted);
}
.vp-ac-sent {
  font-size: 11px; padding: 2px 9px; border-radius: 999px;
  background: rgba(16,185,129,.10); color: #047857;
  font-weight: 600;
}
.vp-ac-negative .vp-ac-sent { background: rgba(239,68,68,.10); color: #b91c1c; }
.vp-ac-neutral .vp-ac-sent  { background: rgba(99,102,241,.10); color: #4338ca; }

.vp-ac-foot {
  display: flex; align-items: center; gap: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.vp-ac-timer {
  font-size: 16px; font-weight: 700;
  font-family: ui-monospace, 'Cascadia Code', monospace;
  color: var(--text);
  letter-spacing: .02em;
  background: linear-gradient(135deg, #2c7873, #6fb98f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.vp-ac-eq {
  display: flex; gap: 3px; align-items: flex-end; flex: 1;
  height: 22px;
}
.vp-ac-eq span {
  width: 3px; border-radius: 2px;
  background: linear-gradient(180deg, #6fb98f, #2c7873);
  animation: vpEq 1s ease-in-out infinite;
}
.vp-ac-eq span:nth-child(1) { height: 8px;  animation-delay: -.1s; }
.vp-ac-eq span:nth-child(2) { height: 14px; animation-delay: -.3s; }
.vp-ac-eq span:nth-child(3) { height: 20px; animation-delay: -.5s; }
.vp-ac-eq span:nth-child(4) { height: 12px; animation-delay: -.2s; }
.vp-ac-eq span:nth-child(5) { height: 16px; animation-delay: -.6s; }
.vp-ac-eq span:nth-child(6) { height: 22px; animation-delay: -.4s; }
.vp-ac-eq span:nth-child(7) { height: 10px; animation-delay: -.1s; }
.vp-ac-eq span:nth-child(8) { height: 18px; animation-delay: -.7s; }
.vp-ac-state-hold .vp-ac-eq span,
.vp-ac-state-hold .vp-ac-timer {
  animation-play-state: paused;
  opacity: .5;
}

.vp-ac-ctrls { display: inline-flex; gap: 4px; }
.vp-ac-btn {
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-size: 13px;
  display: grid; place-items: center;
  transition: .15s;
}
.vp-ac-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vp-ac-btn-warn { color: #b45309; }
.vp-ac-btn-danger { color: #b91c1c; }
.vp-ac-btn-danger:hover { background: rgba(239,68,68,.10); }

.vp-ac-ai {
  margin-top: 10px;
  padding: 7px 12px 7px 7px;
  background:
    linear-gradient(135deg, rgba(111,185,143,.12), rgba(125,159,245,.10)),
    linear-gradient(90deg, rgba(111,185,143,.06), transparent 70%);
  border-radius: 999px;
  font-size: 11.5px;
  border: 1px solid rgba(111,185,143,.22);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.vp-ac-ai-topic {
  color: #004445;
  font-weight: 600;
  flex-shrink: 0;
}
.vp-ac-ai-note { color: var(--text-muted); flex: 1; min-width: 0; line-height: 1.6; }
[data-theme="dark"] .vp-ac-ai {
  background:
    linear-gradient(135deg, rgba(111,185,143,.16), rgba(125,159,245,.12)),
    linear-gradient(90deg, rgba(111,185,143,.10), transparent 70%);
  border-color: rgba(111,185,143,.35);
}
[data-theme="dark"] .vp-ac-ai-topic { color: #6fb98f; }

/* ===== STATUS GRID ===== */
.vp-status-legend { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.vp-legend {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--text-muted);
}
.vp-legend b { color: var(--text); font-weight: 700; font-family: ui-monospace, monospace; margin-inline-start: 3px; }
.vp-leg-dot { width: 8px; height: 8px; border-radius: 50%; }
.vp-leg-ready   { background: #10b981; box-shadow: 0 0 0 2px rgba(16,185,129,.20); }
.vp-leg-busy    { background: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,.20); }
.vp-leg-break   { background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.20); }
.vp-leg-offline { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148,163,184,.20); }

.vp-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.vp-st-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  animation: vpRowSlide .42s cubic-bezier(.25,.8,.3,1) both;
  animation-delay: calc(var(--vp-i,0) * 28ms);
}
.vp-st-card::before {
  content: ''; position: absolute; top: 0; inset-inline-start: 0; inset-inline-end: 0;
  height: 3px; opacity: .85;
}
.vp-st-ready::before    { background: linear-gradient(90deg, #10b981, #14b8a6); }
.vp-st-busy::before     { background: linear-gradient(90deg, #ef4444, #f59e0b); }
.vp-st-break::before    { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.vp-st-offline::before  { background: linear-gradient(90deg, #94a3b8, #64748b); }
.vp-st-offline { opacity: .68; }

.vp-st-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vp-st-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px; color: #fff;
  background: var(--vp-c, #2c7873);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.18);
  flex-shrink: 0;
}
.vp-st-info { flex: 1; min-width: 0; }
.vp-st-name { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-st-ext { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

.vp-st-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.vp-st-pill-dot { width: 6px; height: 6px; border-radius: 50%; }
.vp-st-pill-ready   { background: rgba(16,185,129,.12);  color: #047857; }
.vp-st-pill-ready   .vp-st-pill-dot { background: #10b981; animation: vpDotPulse 1.6s ease-out infinite; }
.vp-st-pill-busy    { background: rgba(239,68,68,.12);   color: #b91c1c; }
.vp-st-pill-busy    .vp-st-pill-dot { background: #ef4444; }
.vp-st-pill-break   { background: rgba(245,158,11,.14);  color: #b45309; }
.vp-st-pill-break   .vp-st-pill-dot { background: #f59e0b; }
.vp-st-pill-offline { background: rgba(148,163,184,.18); color: #475569; }
.vp-st-pill-offline .vp-st-pill-dot { background: #94a3b8; }
[data-theme="dark"] .vp-st-pill-ready   { color: #6ee7b7; }
[data-theme="dark"] .vp-st-pill-busy    { color: #fca5a5; }
[data-theme="dark"] .vp-st-pill-break   { color: #fcd34d; }
[data-theme="dark"] .vp-st-pill-offline { color: #cbd5e1; }

.vp-st-current, .vp-st-ready, .vp-st-break, .vp-st-offline {
  font-size: 11.5px;
  padding: 7px 10px;
  border-radius: 9px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap;
}
.vp-st-current {
  background: rgba(239,68,68,.06);
  border: 1px dashed rgba(239,68,68,.25);
}
.vp-st-current-label { color: #b91c1c; font-weight: 600; }
.vp-st-current-name { color: var(--text); font-weight: 700; }
.vp-st-current-time { margin-inline-start: auto; font-family: ui-monospace, monospace; color: var(--text); font-weight: 700; }
[data-theme="dark"] .vp-st-current-label { color: #fca5a5; }
.vp-st-ready    { background: rgba(16,185,129,.06);  border: 1px dashed rgba(16,185,129,.25);  color: #047857; }
.vp-st-break    { background: rgba(245,158,11,.07);  border: 1px dashed rgba(245,158,11,.25);  color: #b45309; }
.vp-st-offline  { background: var(--surface);         border: 1px dashed var(--border);         color: var(--text-muted); }
[data-theme="dark"] .vp-st-ready { color: #6ee7b7; }
[data-theme="dark"] .vp-st-break { color: #fcd34d; }

.vp-st-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.vp-st-stat {
  text-align: center;
  padding: 6px 4px;
  background: var(--surface);
  border-radius: 8px;
  border: 1px solid var(--border);
}
.vp-st-stat-v { display: block; font-weight: 700; font-size: 13px; font-family: ui-monospace, monospace; color: var(--text); }
.vp-st-stat-l { display: block; font-size: 10px; color: var(--text-muted); margin-top: 1px; }
.vp-st-stat-warn .vp-st-stat-v { color: #b91c1c; }
[data-theme="dark"] .vp-st-stat-warn .vp-st-stat-v { color: #fca5a5; }

.vp-st-perf {
  display: flex; align-items: center; gap: 8px;
}
.vp-st-perf-bar {
  flex: 1; height: 6px;
  background: var(--surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.vp-st-perf-bar span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #10b981, #14b8a6);
  border-radius: 999px;
}
.vp-st-perf-lbl { font-size: 11px; color: var(--text-muted); font-weight: 600; }

/* ===== NUMBERS TABLE ===== */
.vp-num-toolbar { display: inline-flex; gap: 8px; flex-wrap: wrap; }
.vp-num-search, .vp-num-filter {
  padding: 7px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 12.5px;
  font-family: inherit;
  color: var(--text);
}
.vp-num-search { min-width: 220px; }
.vp-num-search:focus, .vp-num-filter:focus {
  outline: none;
  border-color: var(--brand-300);
  box-shadow: 0 0 0 3px rgba(44,120,115,.15);
}

.vp-num-wrap {
  border-radius: 12px;
  border: 1px solid var(--border);
  overflow: hidden;
}
.vp-num-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px;
}
.vp-num-table thead {
  background: var(--surface-2);
}
.vp-num-table th {
  text-align: start;
  padding: 10px 12px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  letter-spacing: -.01em;
}
.vp-num-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.vp-num-row {
  background: var(--surface);
  transition: .12s;
  animation: vpRowSlide .35s ease-out both;
  animation-delay: calc(var(--vp-i, 0) * 18ms);
}
.vp-num-row:hover { background: var(--surface-2); }
.vp-num-row:last-child td { border-bottom: none; }
.vp-num-row-active { background: linear-gradient(90deg, rgba(16,185,129,.06), transparent 40%); }
.vp-num-row-queued { background: linear-gradient(90deg, rgba(245,158,11,.06), transparent 40%); }
.vp-num-row-missed { background: linear-gradient(90deg, rgba(239,68,68,.06), transparent 40%); }

.vp-num-time { font-family: ui-monospace, monospace; color: var(--text-muted); font-size: 12px; }
.vp-num-phone { font-family: ui-monospace, monospace; font-weight: 600; }
.vp-num-name { font-weight: 700; font-size: 12.5px; margin-bottom: 3px; }
.vp-num-dur { font-family: ui-monospace, monospace; color: var(--text-muted); }
.vp-num-tag { color: var(--text-muted); font-size: 12px; }
.vp-num-adv { font-weight: 600; }

.vp-num-stchip {
  display: inline-flex; align-items: center;
  font-size: 11px; padding: 3px 9px; border-radius: 999px;
  font-weight: 700;
}
.vp-stchip-active   { background: rgba(16,185,129,.12); color: #047857; }
.vp-stchip-queued   { background: rgba(245,158,11,.14); color: #b45309; }
.vp-stchip-missed   { background: rgba(239,68,68,.12);  color: #b91c1c; }
.vp-stchip-answered { background: rgba(99,102,241,.12); color: #4338ca; }
.vp-stchip-callback { background: rgba(168,85,247,.14); color: #6d28d9; }
[data-theme="dark"] .vp-stchip-active   { color: #6ee7b7; }
[data-theme="dark"] .vp-stchip-queued   { color: #fcd34d; }
[data-theme="dark"] .vp-stchip-missed   { color: #fca5a5; }
[data-theme="dark"] .vp-stchip-answered { color: #c7d2fe; }
[data-theme="dark"] .vp-stchip-callback { color: #c4b5fd; }

.vp-num-btn {
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 8px;
  font-weight: 600;
  color: var(--text);
  transition: .15s;
}
.vp-num-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.vp-num-btn-primary {
  background: linear-gradient(135deg, #10b981, #14b8a6);
  color: #fff; border-color: transparent;
}
.vp-num-btn-warn {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff; border-color: transparent;
}
.vp-num-btn-ghost { background: transparent; color: var(--text-muted); }

.vp-num-foot {
  padding: 10px 4px 0;
  font-size: 12px;
  color: var(--text-muted);
}
.vp-num-foot b { color: var(--text); font-weight: 700; }

.vp-empty {
  text-align: center; padding: 24px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--surface-2);
  border-radius: 12px;
}

/* ----- Dark theme tweaks ----- */
[data-theme="dark"] .vp-q-row,
[data-theme="dark"] .vp-ac-card,
[data-theme="dark"] .vp-st-card { background: var(--surface); }
[data-theme="dark"] .vp-q-row:hover,
[data-theme="dark"] .vp-num-row:hover { background: var(--surface-2); }
[data-theme="dark"] .vp-q-rank { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .vp-ac-tag { background: var(--surface-2); }

/* ===== TRANSCRIPT — inline trigger button + popup modal with typing ===== */

/* Trigger button on active card */
.vp-ac-trans-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 9px 12px;
  background: linear-gradient(135deg, rgba(125,159,245,.10), rgba(111,185,143,.10));
  border: 1px dashed rgba(111,185,143,.32);
  border-radius: 12px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: .15s;
}
.vp-ac-trans-btn:hover {
  background: linear-gradient(135deg, rgba(125,159,245,.18), rgba(111,185,143,.18));
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(111,185,143,.55);
}
.vp-ac-trans-btn-label { color: var(--text); }
.vp-ac-trans-btn-count {
  margin-inline-start: auto;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: var(--surface);
  border-radius: 999px;
}
.vp-ac-trans-btn-chev {
  color: var(--brand-500);
  font-weight: 800;
  font-size: 14px;
  transition: transform .2s ease;
}
.vp-ac-trans-btn:hover .vp-ac-trans-btn-chev { transform: translateX(-3px); }
.vp-trans-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  animation: vpDotPulse 1.4s ease-out infinite;
}

/* ===== Modal overlay + card ===== */
/* lock body + html scroll while modal open so only inner transcript scrolls */
html.vp-tm-lock,
body.vp-tm-lock { overflow: hidden !important; }
/* override legacy .call-transcript constraints inside modal so only .vp-tm-body scrolls */
#vp-tm-body .call-transcript,
.vp-tm-list {
  max-height: none !important;
  overflow: visible !important;
}
.vp-tm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 23, 42, .42);
  backdrop-filter: blur(6px) saturate(140%);
  -webkit-backdrop-filter: blur(6px) saturate(140%);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  animation: none !important; /* exempt from .content > * slideUpLg */
}
.vp-tm-overlay[data-tm-open="1"] {
  opacity: 1;
  pointer-events: auto;
}
.vp-tm-card {
  width: min(780px, 96vw);
  max-height: min(82vh, 760px);
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: 0 24px 60px -12px rgba(15, 23, 42, .42);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(20px) scale(.96);
  transition: transform .35s cubic-bezier(.2,.7,.3,1.15);
}
.vp-tm-overlay[data-tm-open="1"] .vp-tm-card {
  transform: translateY(0) scale(1);
}

/* Modal header */
.vp-tm-head {
  padding: 24px 22px 18px;
  background: linear-gradient(155deg, #9b7bf5 0%, #3d2a70 115%);
  position: relative; overflow: hidden; isolation: isolate;
  /* [crm-l1-menu-p1] UX audit fix — .vp-tm-card is a column flex container
     and .vp-tm-body has flex:1. Per the flexbox spec, a flex item with
     overflow other than 'visible' gets an automatic min-height of 0 (not
     its content size) for shrink purposes — so without flex-shrink:0 this
     header silently collapsed to ~84px (just the top avatar row) whenever
     the card's max-height was tight, clipping the whole meta badge row
     (tag/sentiment/state/timer) and the AI-summary strip below it via its
     own overflow:hidden, almost invisibly (found live via scrollHeight 233
     vs offsetHeight 84 on a real modal instance). */
  flex-shrink: 0;
}
.vp-tm-head::before, .vp-tm-head::after {
  content: ''; position: absolute; border-radius: 50%; background: #fff; filter: blur(26px); pointer-events: none; z-index: -1;
}
.vp-tm-head::before { width: 150px; height: 150px; top: -65px; inset-inline-start: -40px; opacity: .15; }
.vp-tm-head::after { width: 100px; height: 100px; bottom: -50px; inset-inline-end: 70px; opacity: .12; }
.vp-tm-head .vp-tm-side-name, .vp-tm-head .vp-tm-side-sub { color: #fff; }
.vp-tm-head .vp-tm-side-sub { color: rgba(255,255,255,.78); }
.vp-tm-head .vp-tm-tag { background: rgba(255,255,255,.16); border-color: transparent; color: #fff; backdrop-filter: blur(4px); }
/* [crm-l1-menu-p1] UX audit fix — .vp-tm-sent-* and .vp-tm-state only had a
   light-tint/dark-text palette (meant for a plain --surface background); on
   this header's purple gradient that reads as barely-legible dark text on a
   near-transparent tint. Same header-scoped override pattern as .vp-tm-tag
   just above — opaque translucent white background + solid #fff text. */
.vp-tm-head .vp-tm-sent-positive,
.vp-tm-head .vp-tm-sent-neutral,
.vp-tm-head .vp-tm-sent-negative,
.vp-tm-head .vp-tm-state { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(4px); }
.vp-tm-head .vp-tm-state.is-hold { background: rgba(255,255,255,.24); }
.vp-tm-pair {
  display: grid;
  grid-template-columns: 1fr 60px 1fr auto;
  align-items: center;
  gap: 10px;
}
.vp-tm-side {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.vp-tm-side-customer { justify-content: flex-end; }
.vp-tm-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 700; font-size: 15px;
  color: #fff;
  background: var(--vp-c, #2c7873);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.22), 0 4px 12px rgba(15,23,42,.10);
  flex-shrink: 0;
}
.vp-tm-avatar-cust { background: linear-gradient(135deg, #10b981, #14b8a6); }
.vp-tm-avatar-cust[data-iden="lead"]    { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.vp-tm-avatar-cust[data-iden="student"] { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.vp-tm-avatar-cust[data-iden="unknown"] { background: linear-gradient(135deg, #94a3b8, #64748b); }
.vp-tm-side-info { min-width: 0; }
.vp-tm-side-info-right { text-align: end; }
.vp-tm-side-name { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vp-tm-side-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; font-family: ui-monospace, monospace; }
.vp-tm-link {
  display: flex; justify-content: center; align-items: center; gap: 4px;
}
.vp-tm-close {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
  color: var(--text-muted);
  display: grid; place-items: center;
  transition: .15s;
}
.vp-tm-close:hover { background: rgba(239,68,68,.10); color: #b91c1c; border-color: rgba(239,68,68,.25); transform: rotate(90deg); }

.vp-tm-meta {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 12px;
  font-size: 11.5px;
}
.vp-tm-tag {
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-muted);
}
.vp-tm-sent {
  padding: 3px 10px; border-radius: 999px;
  font-weight: 600;
}
.vp-tm-sent-positive { background: rgba(16,185,129,.10);  color: #047857; }
.vp-tm-sent-neutral  { background: rgba(99,102,241,.10);  color: #4338ca; }
.vp-tm-sent-negative { background: rgba(239,68,68,.10);   color: #b91c1c; }
.vp-tm-state {
  padding: 3px 10px; border-radius: 999px;
  background: rgba(16,185,129,.10); color: #047857; font-weight: 600;
}
.vp-tm-state.is-hold { background: rgba(245,158,11,.14); color: #b45309; }
.vp-tm-timer {
  margin-inline-start: auto;
  font-size: 17px; font-weight: 800;
  font-family: ui-monospace, monospace;
  background: linear-gradient(135deg, #2c7873, #6fb98f);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vp-tm-summary {
  margin-top: 14px;
  margin-bottom: -4px;
}

/* Modal body (scrollable transcript) */
.vp-tm-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 18px 22px 8px;
  scroll-behavior: smooth;
}
.vp-tm-list {
  display: flex; flex-direction: column; gap: 8px;
}
.vp-tm-body::-webkit-scrollbar { width: 8px; }
.vp-tm-body::-webkit-scrollbar-track { background: transparent; }
.vp-tm-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand-200), var(--brand-300));
  border-radius: 4px;
}
.vp-tm-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-300), var(--brand-500));
}

/* Typing caret on text being typed */
.msg-text.is-typing::after {
  content: '▌';
  display: inline-block;
  margin-inline-start: 1px;
  color: var(--brand-500);
  font-weight: 200;
  font-size: 1em;
  animation: vpCaretBlink .8s steps(2, jump-none) infinite;
}
@keyframes vpCaretBlink { 50% { opacity: 0; } }

/* Modal footer */
.vp-tm-foot {
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  font-size: 11.5px;
  background: var(--surface-2);
}
.vp-tm-foot-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: #b91c1c;
  font-weight: 700;
  font-size: 11px;
}
.vp-tm-foot-counter {
  font-family: ui-monospace, monospace;
  color: var(--text-muted);
  padding: 3px 10px;
  background: var(--surface);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.vp-tm-foot-typing {
  display: none;
  align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-muted);
}
.vp-tm-foot-typing .vp-trans-typing-name { font-weight: 700; color: var(--text); }
.vp-trans-typing-dots {
  display: inline-flex; gap: 3px;
}
.vp-trans-typing-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--brand-300);
  animation: vpTypingPulse 1.1s ease-in-out infinite;
}
.vp-trans-typing-dots span:nth-child(2) { animation-delay: .15s; }
.vp-trans-typing-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes vpTypingPulse {
  0%, 80%, 100% { transform: scale(.4); opacity: .35; }
  40%           { transform: scale(1);  opacity: 1; }
}
.vp-trans-typing-label { color: var(--text-faint); }
.vp-tm-foot-btn {
  margin-inline-start: auto;
  padding: 5px 12px;
  background: linear-gradient(135deg, rgba(125,159,245,.14), rgba(111,185,143,.18));
  border: 1px solid rgba(111,185,143,.30);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  color: #6d28d9;
  font-family: inherit;
  transition: .15s;
}
.vp-tm-foot-btn:hover { transform: translateY(-1px); background: linear-gradient(135deg, rgba(125,159,245,.22), rgba(111,185,143,.28)); }
[data-theme="dark"] .vp-tm-foot-btn { color: #c4b5fd; }

@media (max-width: 720px) {
  .vp-tm-card { width: 100vw; max-height: 100vh; border-radius: 0; }
  .vp-tm-pair { grid-template-columns: 1fr auto; grid-template-areas: "advisor close" "customer customer"; }
  .vp-tm-side-advisor { grid-area: advisor; }
  .vp-tm-side-customer { grid-area: customer; justify-content: flex-start; }
  .vp-tm-close { grid-area: close; }
  .vp-tm-link { display: none; }
}

/* ----- Responsive ----- */
@media (max-width: 920px) {
  .vp-hero { padding: 22px 18px 0; }
  .vp-hero-top { grid-template-columns: 1fr; }
  .vp-hero-right { height: 110px; }
  .vp-q-row {
    grid-template-columns: 32px 1fr auto;
    grid-template-areas:
      "rank id prio"
      "tag tag tag"
      "wait wait actions";
    gap: 8px;
  }
  .vp-q-rank { grid-area: rank; }
  .vp-q-id { grid-area: id; }
  .vp-q-prio { grid-area: prio; }
  .vp-q-tag-col { grid-area: tag; flex-direction: row; gap: 8px; flex-wrap: wrap; }
  .vp-q-wait { grid-area: wait; }
  .vp-q-actions { grid-area: actions; justify-content: flex-end; }
  .vp-ac-bridge { grid-template-columns: 1fr 40px 1fr; }
}

/* =========================================================================
   REPORTS — Category-aware report dashboards (rpt-* namespace)
   #reports overview + #reports/{education|sales|comms|finance|team}
   ========================================================================= */

.rpt-page {
  --rpt-accent: #a020f0;
  --rpt-accent-soft: color-mix(in srgb, var(--rpt-accent) 16%, transparent);
  --rpt-accent-glow: color-mix(in srgb, var(--rpt-accent) 28%, transparent);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ===== HERO ===== */
.rpt-hero {
  position: relative;
  border-radius: 22px;
  padding: 24px 28px 0;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rpt-accent) 8%, var(--bg-card, #fff)) 0%,
    var(--bg-card, #fff) 60%);
  border: 1px solid color-mix(in srgb, var(--rpt-accent) 16%, var(--border, #e7e9ee));
  overflow: hidden;
  box-shadow: 0 14px 40px -28px var(--rpt-accent-glow);
  isolation: isolate;
}
.rpt-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.rpt-hero-glow {
  position: absolute;
  top: -120px; right: -120px;
  width: 360px; height: 360px;
  background: radial-gradient(circle, var(--rpt-accent-soft) 0%, transparent 70%);
  filter: blur(20px);
  animation: rptHeroGlow 8s ease-in-out infinite;
}
.rpt-hero-orb {
  position: absolute;
  border-radius: 50%;
  background: var(--rpt-accent);
  opacity: 0.4;
  filter: blur(8px);
  animation: rptHeroOrbFloat 6s ease-in-out infinite;
}
.rpt-hero-orb-1 { width: 22px; height: 22px; top: 22%; left: 12%; animation-delay: 0s;   }
.rpt-hero-orb-2 { width: 16px; height: 16px; top: 60%; left: 32%; animation-delay: 1.5s; }
.rpt-hero-orb-3 { width: 12px; height: 12px; top: 40%; left: 88%; animation-delay: 3s;   }
@keyframes rptHeroGlow {
  0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
  50%      { transform: scale(1.25) translate(-20px, 20px); opacity: 1; }
}
@keyframes rptHeroOrbFloat {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-12px, -16px); }
}

.rpt-hero-body {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 22px;
}
.rpt-hero-icon {
  width: 76px; height: 76px;
  display: grid; place-items: center;
  font-size: 38px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--rpt-accent) 0%, color-mix(in srgb, var(--rpt-accent) 60%, #fff) 100%);
  color: #fff;
  box-shadow: 0 12px 30px -10px var(--rpt-accent-glow);
  animation: rptHeroIconPop 0.7s cubic-bezier(.34,1.6,.64,1) both;
}
@keyframes rptHeroIconPop {
  0%   { transform: scale(0.5) rotate(-12deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0); opacity: 1; }
}

.rpt-hero-text { min-width: 0; }
.rpt-hero-eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.rpt-hero-chip {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: var(--rpt-accent-soft);
  color: var(--rpt-accent);
  letter-spacing: 0.4px;
}
.rpt-hero-date { font-size: 12px; color: var(--text-muted, #888); }
.rpt-hero-title {
  font-size: 28px; font-weight: 800;
  margin: 0 0 4px; color: var(--text, #1a1f2e);
  background: linear-gradient(120deg, var(--rpt-accent), color-mix(in srgb, var(--rpt-accent) 50%, #1a1f2e));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rptHeroSlide 0.6s ease-out both;
}
.rpt-hero-sub { font-size: 14px; color: var(--text-muted, #6b7280); margin: 0; }
@keyframes rptHeroSlide {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}

.rpt-hero-cta { display: flex; gap: 10px; }
.rpt-btn {
  height: 38px; padding: 0 16px;
  border-radius: 11px;
  font-size: 13px; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.18s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.rpt-btn-primary {
  background: var(--rpt-accent);
  color: #fff;
  box-shadow: 0 6px 20px -8px var(--rpt-accent-glow);
}
.rpt-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--rpt-accent-glow); }
.rpt-btn-ghost {
  background: transparent;
  color: var(--rpt-accent);
  border-color: color-mix(in srgb, var(--rpt-accent) 32%, transparent);
}
.rpt-btn-ghost:hover { background: var(--rpt-accent-soft); }
.rpt-btn.is-done { background: var(--green-500, #22c55e); color: #fff; border-color: transparent; }

.rpt-hero-periods {
  display: flex; gap: 8px;
  padding: 16px 0 20px;
  border-top: 1px dashed color-mix(in srgb, var(--rpt-accent) 16%, var(--border, #e7e9ee));
  margin-top: 22px;
  position: relative;
}
.rpt-period {
  height: 34px; padding: 0 18px;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  background: transparent;
  color: var(--text-muted, #6b7280);
  border: 1px solid var(--border, #e7e9ee);
  cursor: pointer;
  transition: all 0.18s ease;
}
.rpt-period:hover { color: var(--rpt-accent); border-color: color-mix(in srgb, var(--rpt-accent) 32%, var(--border, #e7e9ee)); }
.rpt-period.active {
  background: var(--rpt-accent);
  color: #fff;
  border-color: var(--rpt-accent);
  box-shadow: 0 4px 14px -4px var(--rpt-accent-glow);
}

/* ===== CATEGORY STRIP (overview only) ===== */
.rpt-cat-strip {
  border-radius: 18px;
  padding: 20px 22px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e7e9ee);
}
.rpt-cat-strip-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-bottom: 16px; flex-wrap: wrap;
}
.rpt-cat-strip-title { font-size: 16px; font-weight: 700; color: var(--text, #1a1f2e); }
.rpt-cat-strip-hint { font-size: 12px; color: var(--text-muted, #888); }

.rpt-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.rpt-cat-card {
  --rpt-cat-accent: #2c7be5;
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rpt-cat-accent) 6%, var(--bg-card, #fff)) 0%,
    var(--bg-card, #fff) 70%);
  border: 1px solid color-mix(in srgb, var(--rpt-cat-accent) 18%, var(--border, #e7e9ee));
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  position: relative;
  overflow: hidden;
}
.rpt-cat-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--rpt-cat-accent);
  opacity: 0.8;
}
.rpt-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -16px color-mix(in srgb, var(--rpt-cat-accent) 40%, transparent);
}
.rpt-cat-head { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.rpt-cat-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-size: 24px;
  background: color-mix(in srgb, var(--rpt-cat-accent) 14%, transparent);
}
.rpt-cat-meta { min-width: 0; }
.rpt-cat-title { font-size: 14px; font-weight: 700; color: var(--text, #1a1f2e); margin-bottom: 2px; }
.rpt-cat-sub   { font-size: 11px; color: var(--text-muted, #6b7280); line-height: 1.5; }
.rpt-cat-arrow {
  font-size: 18px; color: var(--rpt-cat-accent);
  transition: transform 0.18s ease;
}
.rpt-cat-card:hover .rpt-cat-arrow { transform: translateX(-4px); }
.rpt-cat-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  padding: 10px;
  background: color-mix(in srgb, var(--rpt-cat-accent) 5%, transparent);
  border-radius: 10px;
}
.rpt-cat-stat { text-align: center; }
.rpt-cat-stat-val { font-size: 14px; font-weight: 700; color: var(--rpt-cat-accent); margin-bottom: 2px; }
.rpt-cat-stat-lab { font-size: 10px; color: var(--text-muted, #888); }
.rpt-cat-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 4px;
}
.rpt-cat-count { font-size: 11px; color: var(--text-muted, #888); }
.rpt-cat-cta { font-size: 12px; font-weight: 700; color: var(--rpt-cat-accent); }

/* ===== KPI GRID ===== */
.rpt-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.rpt-kpi {
  --rpt-kpi-i: 0;
  --rpt-kpi-color: #2c7be5;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #e7e9ee);
  border-radius: 14px;
  padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
  overflow: hidden;
  animation: rptKpiRise 0.5s cubic-bezier(.34,1.5,.64,1) both;
  animation-delay: calc(var(--rpt-kpi-i) * 50ms);
}
.rpt-kpi::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--rpt-kpi-color);
}
.rpt-kpi.tone-blue   { --rpt-kpi-color: #2c7be5; }
.rpt-kpi.tone-green  { --rpt-kpi-color: #22c55e; }
.rpt-kpi.tone-amber  { --rpt-kpi-color: #f59e0b; }
.rpt-kpi.tone-red    { --rpt-kpi-color: #ef4444; }
.rpt-kpi.tone-purple { --rpt-kpi-color: #a855f7; }
.rpt-kpi.tone-rose   { --rpt-kpi-color: #ef4444; }
@keyframes rptKpiRise {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.rpt-kpi-lab { font-size: 11px; color: var(--text-muted, #6b7280); font-weight: 500; }
.rpt-kpi-val { font-size: 22px; font-weight: 800; color: var(--text, #1a1f2e); line-height: 1; }
.rpt-kpi-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--text-muted, #888);
  margin-top: 2px;
}
.rpt-kpi-trend-up   { color: #22c55e; }
.rpt-kpi-trend-down { color: #ef4444; }
.rpt-kpi-trend-flat { color: var(--text-muted, #888); }
.rpt-kpi-arrow { font-size: 9px; }

/* ===== NARRATIVE + side ===== */
.rpt-narrative-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2.2fr) minmax(280px, 1fr);
  gap: 18px;
}
.rpt-narrative {
  position: relative;
  padding: 22px 24px;
  border: 1px solid color-mix(in srgb, var(--rpt-accent) 14%, var(--border, #e7e9ee));
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--rpt-accent) 4%, var(--bg-card, #fff)) 0%,
    var(--bg-card, #fff) 50%);
}
.rpt-narrative-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.rpt-narrative-badge {
  font-size: 11px; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
  background: linear-gradient(135deg, var(--rpt-accent) 0%, color-mix(in srgb, var(--rpt-accent) 70%, #2c7be5) 100%);
  color: #fff;
  box-shadow: 0 4px 10px -3px var(--rpt-accent-glow);
}
.rpt-narrative-title { font-size: 18px; font-weight: 700; color: var(--text, #1a1f2e); margin: 0; flex: 1; min-width: 200px; }
.rpt-narrative-meta { font-size: 11px; color: var(--text-muted, #888); }
.rpt-narrative-body { font-size: 14px; line-height: 1.85; color: var(--text, #333); }
.rpt-narrative-body p { margin: 0 0 12px; }
.rpt-narrative-body strong { color: var(--rpt-accent); font-weight: 700; }

.rpt-narrative-side { display: flex; flex-direction: column; gap: 14px; }
.rpt-side-head {
  font-size: 12px; font-weight: 700; color: var(--text, #1a1f2e);
  text-transform: none;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border, #e7e9ee);
}
.rpt-side-stats { padding: 16px; }
.rpt-side-stats-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.rpt-side-stat {
  --rpt-side-color: #2c7be5;
  padding: 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--rpt-side-color) 8%, transparent);
  border-inline-start: 3px solid var(--rpt-side-color);
}
.rpt-side-stat.tone-blue   { --rpt-side-color: #2c7be5; }
.rpt-side-stat.tone-green  { --rpt-side-color: #22c55e; }
.rpt-side-stat.tone-amber  { --rpt-side-color: #f59e0b; }
.rpt-side-stat.tone-red    { --rpt-side-color: #ef4444; }
.rpt-side-stat.tone-purple { --rpt-side-color: #a855f7; }
.rpt-side-stat-lab { font-size: 10px; color: var(--text-muted, #888); margin-bottom: 4px; }
.rpt-side-stat-val { font-size: 16px; font-weight: 700; color: var(--rpt-side-color); }

.rpt-side-actions { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.rpt-side-action {
  height: 38px; padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--border, #e7e9ee);
  background: transparent;
  color: var(--text, #333);
  font-size: 13px; font-weight: 500;
  text-align: start;
  cursor: pointer;
  transition: all 0.18s ease;
  display: flex; align-items: center; gap: 8px;
}
.rpt-side-action:hover {
  background: var(--rpt-accent-soft);
  border-color: color-mix(in srgb, var(--rpt-accent) 28%, transparent);
  color: var(--rpt-accent);
}

/* ===== CHARTS ===== */
.rpt-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
  gap: 16px;
}
.rpt-chart-card { padding: 16px 16px 12px; min-height: 260px; display: flex; flex-direction: column; }
.rpt-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border, #e7e9ee);
}
.rpt-chart-title { font-size: 13px; font-weight: 700; color: var(--text, #1a1f2e); }
.rpt-chart-actions { display: flex; gap: 6px; }
.rpt-chip-mini {
  font-size: 10px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  background: var(--bg-soft, #f3f5f9); border: none;
  color: var(--text-muted, #6b7280);
  cursor: pointer; transition: all 0.18s ease;
}
.rpt-chip-mini:hover { background: var(--rpt-accent-soft); color: var(--rpt-accent); }
.rpt-chart-card canvas { flex: 1; max-height: 220px; }

/* ===== TOP rows table ===== */
.rpt-top { padding: 18px 20px 16px; }
.rpt-top-table thead th {
  font-size: 11px; font-weight: 700;
  text-transform: none;
  color: var(--text-muted, #6b7280);
  padding: 10px 12px;
  border-bottom: 2px solid var(--border, #e7e9ee);
}
.rpt-top-table tbody tr {
  --rpt-row-i: 0;
  animation: rptRowSlide 0.4s ease both;
  animation-delay: calc(var(--rpt-row-i) * 40ms);
  transition: background 0.15s ease;
}
.rpt-top-table tbody tr:hover { background: var(--rpt-accent-soft); }
.rpt-top-table tbody td { padding: 12px; font-size: 13px; border-bottom: 1px solid var(--border, #e7e9ee); }
@keyframes rptRowSlide {
  from { transform: translateY(4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ===== GENERATORS ===== */
.rpt-gen-card { padding: 18px 20px 22px; }
.rpt-gen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 12px;
}
.rpt-gen-card-item {
  --rpt-gen-i: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, #e7e9ee);
  background: var(--bg-card, #fff);
  transition: all 0.18s ease;
  animation: rptKpiRise 0.45s ease both;
  animation-delay: calc(var(--rpt-gen-i) * 60ms);
}
.rpt-gen-card-item:hover {
  border-color: color-mix(in srgb, var(--rpt-accent) 28%, var(--border, #e7e9ee));
  box-shadow: 0 10px 24px -16px var(--rpt-accent-glow);
}
.rpt-gen-item-head { display: flex; align-items: center; gap: 8px; }
.rpt-gen-item-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  font-size: 14px;
  border-radius: 8px;
  background: var(--rpt-accent-soft);
  color: var(--rpt-accent);
}
.rpt-gen-item-title { font-size: 14px; font-weight: 700; color: var(--text, #1a1f2e); }
.rpt-gen-item-desc {
  font-size: 12px; color: var(--text-muted, #6b7280); line-height: 1.6;
  flex: 1;
  padding-bottom: 4px;
}
.rpt-gen-item-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rpt-gen-btn {
  flex: 1;
  height: 32px; padding: 0 12px;
  border-radius: 9px;
  font-size: 11px; font-weight: 600;
  border: 1px solid var(--border, #e7e9ee);
  background: var(--bg-soft, #f8fafc);
  color: var(--text, #333);
  cursor: pointer;
  transition: all 0.15s ease;
}
.rpt-gen-btn:hover { transform: translateY(-1px); }
.rpt-gen-btn-excel:hover { background: #22c55e; color: #fff; border-color: #22c55e; }
.rpt-gen-btn-pdf:hover   { background: #ef4444; color: #fff; border-color: #ef4444; }
.rpt-gen-btn-chart:hover { background: var(--rpt-accent); color: #fff; border-color: var(--rpt-accent); }
.rpt-gen-btn.is-loading { background: var(--rpt-accent-soft); color: var(--rpt-accent); border-color: transparent; }
.rpt-gen-btn.is-done { background: #22c55e; color: #fff; border-color: transparent; }

/* ===== ARCHIVE ===== */
.rpt-archive { padding: 16px 18px 18px; }
.rpt-archive .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rpt-archive-filter { display: flex; gap: 6px; flex-wrap: wrap; }
.rpt-arc-chip {
  height: 30px; padding: 0 14px;
  border-radius: 999px;
  background: var(--bg-soft, #f3f5f9);
  border: none;
  font-size: 12px; font-weight: 600;
  color: var(--text-muted, #6b7280);
  cursor: pointer; transition: all 0.15s ease;
}
.rpt-arc-chip:hover { background: var(--rpt-accent-soft); color: var(--rpt-accent); }
.rpt-arc-chip.active { background: var(--rpt-accent); color: #fff; }

.rpt-arc-cat-chip {
  --rpt-arc-color: #2c7be5;
  display: inline-block;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--rpt-arc-color) 14%, transparent);
  color: var(--rpt-arc-color);
}
.rpt-arc-cat-chip.tone-blue   { --rpt-arc-color: #2c7be5; }
.rpt-arc-cat-chip.tone-green  { --rpt-arc-color: #22c55e; }
.rpt-arc-cat-chip.tone-amber  { --rpt-arc-color: #f59e0b; }
.rpt-arc-cat-chip.tone-red    { --rpt-arc-color: #ef4444; }
.rpt-arc-cat-chip.tone-purple { --rpt-arc-color: #a855f7; }

.rpt-arc-act {
  width: 28px; height: 28px;
  display: inline-grid; place-items: center;
  border-radius: 8px;
  border: 1px solid var(--border, #e7e9ee);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  margin-inline-end: 4px;
  transition: all 0.15s ease;
}
.rpt-arc-act:hover { background: var(--rpt-accent-soft); border-color: var(--rpt-accent); color: var(--rpt-accent); }
.rpt-archive-empty { text-align: center; padding: 28px; color: var(--text-muted, #888); }

/* ===== DARK THEME ===== */
[data-theme="dark"] .rpt-hero        { background: linear-gradient(135deg, color-mix(in srgb, var(--rpt-accent) 12%, var(--bg-card, #1a1f2e)) 0%, var(--bg-card, #1a1f2e) 60%); }
[data-theme="dark"] .rpt-narrative   { background: linear-gradient(135deg, color-mix(in srgb, var(--rpt-accent) 8%, var(--bg-card, #1a1f2e)) 0%, var(--bg-card, #1a1f2e) 50%); }
[data-theme="dark"] .rpt-cat-card    { background: linear-gradient(135deg, color-mix(in srgb, var(--rpt-cat-accent) 12%, var(--bg-card, #1a1f2e)) 0%, var(--bg-card, #1a1f2e) 70%); }
[data-theme="dark"] .rpt-gen-card-item { background: var(--bg-card, #1a1f2e); }
[data-theme="dark"] .rpt-side-action { background: transparent; color: var(--text, #e7e9ee); border-color: var(--border, #2a2f3e); }
[data-theme="dark"] .rpt-chip-mini   { background: rgba(255,255,255,0.06); color: var(--text-muted, #999); }
[data-theme="dark"] .rpt-arc-chip    { background: rgba(255,255,255,0.06); color: var(--text-muted, #999); }
[data-theme="dark"] .rpt-gen-btn     { background: rgba(255,255,255,0.04); border-color: var(--border, #2a2f3e); color: var(--text, #e7e9ee); }

/* ===== RESPONSIVE ===== */
@media (max-width: 980px) {
  .rpt-hero-body { grid-template-columns: 64px 1fr; }
  .rpt-hero-icon { width: 56px; height: 56px; font-size: 28px; border-radius: 16px; }
  .rpt-hero-title { font-size: 22px; }
  .rpt-hero-cta { grid-column: 1 / -1; }
  .rpt-narrative-wrap { grid-template-columns: 1fr; }
  .rpt-charts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .rpt-hero { padding: 18px 18px 0; }
  .rpt-hero-periods { gap: 6px; }
  .rpt-period { padding: 0 12px; font-size: 12px; }
  .rpt-cat-grid { grid-template-columns: 1fr; }
  .rpt-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================ */
/* EXAMS & ASSESSMENT (ارزیابی عملکرد) — namespace exm-*       */
/* ============================================================ */
.exm-hero {
  position: relative; padding: 24px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, #a020f0 16%, var(--card)) 0%, color-mix(in srgb, #22c55e 10%, var(--card)) 100%);
  border: 1px solid color-mix(in srgb, #a020f0 18%, transparent);
  display: grid; grid-template-columns: 1fr 200px; gap: 24px; align-items: center;
  margin-bottom: 18px; animation: exmHeroPop .6s cubic-bezier(.25,.5,.25,1) both;
}
@keyframes exmHeroPop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.exm-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, #a020f0 22%, transparent) 0%, transparent 50%), radial-gradient(circle at 20% 90%, color-mix(in srgb, #22c55e 14%, transparent) 0%, transparent 50%); pointer-events: none; }
.exm-hero-left { position: relative; z-index: 1; }
.exm-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, #a020f0 14%, var(--card)); border: 1px solid color-mix(in srgb, #a020f0 24%, transparent); font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
.exm-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 24%, transparent); animation: exmDotPulse 1.8s ease-in-out infinite; }
@keyframes exmDotPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }
.exm-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.exm-hero-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.exm-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.exm-btn-primary { padding: 8px 18px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #a020f0, #6c3aff); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, #a020f0 24%, transparent); transition: transform .15s; }
.exm-btn-primary:hover { transform: translateY(-2px); }
.exm-btn-ghost { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; transition: all .15s; }
.exm-btn-ghost:hover { border-color: color-mix(in srgb, #a020f0 32%, var(--border)); background: color-mix(in srgb, #a020f0 8%, var(--card)); }
.exm-btn-sm { padding: 4px 10px; font-size: 12px; }
.exm-hero-orb svg { width: 180px; height: 180px; color: var(--text); animation: exmOrbSpin 22s linear infinite; }
@keyframes exmOrbSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

.exm-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.exm-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: all .2s; animation: exmKpiRise .5s ease-out both; }
.exm-kpi:nth-child(1) { animation-delay: .04s; } .exm-kpi:nth-child(2) { animation-delay: .08s; } .exm-kpi:nth-child(3) { animation-delay: .12s; }
.exm-kpi:nth-child(4) { animation-delay: .16s; } .exm-kpi:nth-child(5) { animation-delay: .20s; } .exm-kpi:nth-child(6) { animation-delay: .24s; }
@keyframes exmKpiRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.exm-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, var(--brand) 10%, transparent); }
.exm-kpi-icn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, var(--brand) 12%, var(--card)); }
.exm-kpi-mint .exm-kpi-icn { background: color-mix(in srgb, #22c55e 16%, var(--card)); color: #16a34a; }
.exm-kpi-sky .exm-kpi-icn { background: color-mix(in srgb, #38bdf8 16%, var(--card)); color: #0ea5e9; }
.exm-kpi-purple .exm-kpi-icn { background: color-mix(in srgb, #a020f0 16%, var(--card)); color: #a020f0; }
.exm-kpi-peach .exm-kpi-icn { background: color-mix(in srgb, #fb923c 16%, var(--card)); color: #f97316; }
.exm-kpi-lilac .exm-kpi-icn { background: color-mix(in srgb, #c084fc 16%, var(--card)); color: #a855f7; }
.exm-kpi-val { font-size: 20px; font-weight: 800; }
.exm-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.exm-kpi-delta { font-size: 11px; color: #22c55e; font-weight: 600; margin-top: 2px; }

.exm-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; margin-bottom: 18px; }
.exm-live-list { display: flex; flex-direction: column; gap: 10px; }
.exm-live-row { padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: linear-gradient(135deg, color-mix(in srgb, #22c55e 6%, var(--card)) 0%, var(--card) 60%); transition: all .15s; }
.exm-live-row:hover { border-color: color-mix(in srgb, #22c55e 28%, var(--border)); }
.exm-live-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.exm-live-title { display: flex; gap: 10px; align-items: center; min-width: 0; }
.exm-live-dot { width: 10px; height: 10px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 4px color-mix(in srgb, #ef4444 24%, transparent); animation: exmDotPulse 1.4s ease-in-out infinite; flex: 0 0 auto; }
.exm-live-name { font-weight: 700; font-size: 14px; }
.exm-live-meta { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.exm-live-progress { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, var(--card)); overflow: hidden; margin-bottom: 8px; }
.exm-live-prog-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #16a34a); transition: width .6s ease; }
.exm-live-foot { display: flex; gap: 12px; font-size: 12px; color: var(--text-muted); flex-wrap: wrap; }
.exm-live-foot b { color: var(--text); }
.exm-time-left { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, #f59e0b 16%, var(--card)); color: #f59e0b; font-weight: 700; }

.exm-up-list { display: flex; flex-direction: column; gap: 8px; }
.exm-up-row { display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); align-items: center; }
.exm-up-date { text-align: center; padding: 6px; border-radius: 8px; background: color-mix(in srgb, #a020f0 10%, var(--card)); }
.exm-up-day { font-weight: 800; font-size: 18px; color: #a020f0; }
.exm-up-mon { font-size: 9px; color: var(--text-muted); }
.exm-up-title { font-weight: 700; font-size: 13px; }
.exm-up-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.exm-up-side { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.exm-up-reg { font-size: 11px; color: var(--text-muted); }

.exm-type-chip { display: inline-block; padding: 2px 10px; border-radius: 6px; font-size: 11px; font-weight: 700; }
.exm-type-purple { background: color-mix(in srgb, #a020f0 14%, var(--card)); color: #a020f0; }
.exm-type-sky    { background: color-mix(in srgb, #38bdf8 14%, var(--card)); color: #0ea5e9; }
.exm-type-mint   { background: color-mix(in srgb, #22c55e 14%, var(--card)); color: #16a34a; }
.exm-type-peach  { background: color-mix(in srgb, #fb923c 14%, var(--card)); color: #f97316; }

.exm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.exm-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.exm-tab:hover { border-color: color-mix(in srgb, #a020f0 32%, var(--border)); }
.exm-tab.is-active { background: linear-gradient(135deg, #a020f0, #6c3aff); color: #fff; border-color: transparent; }

.exm-table-wrap { overflow-x: auto; }
.exm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.exm-table thead th { padding: 10px 12px; text-align: right; font-size: 11px; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border); background: color-mix(in srgb, var(--text) 4%, var(--card)); }
.exm-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); }
.exm-table tbody tr:hover { background: color-mix(in srgb, #a020f0 4%, transparent); }
.exm-pass { padding: 3px 10px; border-radius: 6px; font-weight: 700; font-size: 12px; }
.exm-pass-green { background: color-mix(in srgb, #22c55e 14%, var(--card)); color: #16a34a; }
.exm-pass-amber { background: color-mix(in srgb, #f59e0b 14%, var(--card)); color: #f59e0b; }
.exm-pass-red   { background: color-mix(in srgb, #ef4444 14%, var(--card)); color: #ef4444; }

.exm-dist { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; height: 220px; align-items: end; padding: 10px 4px; }
.exm-dist-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.exm-dist-bar { width: 100%; background: linear-gradient(180deg, #a020f0 0%, #6c3aff 100%); border-radius: 6px 6px 0 0; position: relative; min-height: 6%; transition: height .8s cubic-bezier(.25,.5,.25,1); animation: exmDistGrow .8s ease-out both; }
@keyframes exmDistGrow { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); } }
.exm-dist-val { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 700; color: var(--text); }
.exm-dist-lbl { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

.exm-topics { display: flex; flex-direction: column; gap: 14px; padding: 10px 0; }
.exm-topic-row { display: grid; grid-template-columns: 1fr 200px 80px; gap: 12px; align-items: center; }
.exm-topic-name { font-size: 13px; font-weight: 600; }
.exm-topic-bar { position: relative; height: 24px; border-radius: 999px; background: color-mix(in srgb, var(--text) 6%, var(--card)); overflow: hidden; }
.exm-topic-fill { height: 100%; border-radius: 999px; transition: width .8s ease; }
.exm-topic-red   { background: linear-gradient(90deg, #ef4444, #dc2626); }
.exm-topic-amber { background: linear-gradient(90deg, #f59e0b, #d97706); }
.exm-topic-green { background: linear-gradient(90deg, #22c55e, #16a34a); }
.exm-topic-score { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); font-size: 11px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.exm-topic-meta { font-size: 11px; color: var(--text-muted); }

.exm-ai-spark { display: inline-block; color: #a020f0; animation: exmSparkRot 3s ease-in-out infinite; }
@keyframes exmSparkRot { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.2); } }
.exm-ai-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.exm-ai-card { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); border-inline-start: 4px solid #a020f0; }
.exm-ai-risk { border-inline-start-color: #ef4444; background: color-mix(in srgb, #ef4444 4%, var(--card)); }
.exm-ai-opportunity { border-inline-start-color: #22c55e; background: color-mix(in srgb, #22c55e 4%, var(--card)); }
.exm-ai-trend { border-inline-start-color: #38bdf8; background: color-mix(in srgb, #38bdf8 4%, var(--card)); }
.exm-ai-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.exm-ai-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; margin-bottom: 10px; }
.exm-ai-action { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--text); font-weight: 600; font-size: 12px; cursor: pointer; transition: all .15s; }
.exm-ai-action:hover { background: color-mix(in srgb, #a020f0 12%, var(--card)); border-color: #a020f0; }

@media (max-width: 1100px) { .exm-kpi-grid { grid-template-columns: repeat(3, 1fr); } .exm-band { grid-template-columns: 1fr; } .exm-ai-grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .exm-hero { grid-template-columns: 1fr; } .exm-hero-right { display: none; } .exm-kpi-grid { grid-template-columns: repeat(2, 1fr); } .exm-topic-row { grid-template-columns: 1fr; } }

/* ============================================================ */
/* CERTIFICATES (مجوزها و تاییدیه‌ها) — namespace crt-*           */
/* ============================================================ */
.crt-hero {
  position: relative; padding: 24px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, #f59e0b 14%, var(--card)) 0%, color-mix(in srgb, #a020f0 10%, var(--card)) 100%);
  border: 1px solid color-mix(in srgb, #f59e0b 18%, transparent);
  display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: center;
  margin-bottom: 18px; animation: exmHeroPop .6s cubic-bezier(.25,.5,.25,1) both;
}
.crt-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, color-mix(in srgb, #f59e0b 24%, transparent) 0%, transparent 50%); pointer-events: none; }
.crt-hero-left { position: relative; z-index: 1; }
.crt-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, #f59e0b 14%, var(--card)); border: 1px solid color-mix(in srgb, #f59e0b 28%, transparent); font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.crt-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; box-shadow: 0 0 0 4px color-mix(in srgb, #f59e0b 24%, transparent); animation: exmDotPulse 1.8s ease-in-out infinite; }
.crt-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.crt-hero-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.crt-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.crt-btn-primary { padding: 8px 18px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, #f59e0b 28%, transparent); transition: transform .15s; }
.crt-btn-primary:hover { transform: translateY(-2px); }
.crt-btn-ghost { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; transition: all .15s; }
.crt-btn-ghost:hover { border-color: color-mix(in srgb, #f59e0b 32%, var(--border)); background: color-mix(in srgb, #f59e0b 8%, var(--card)); }
.crt-btn-sm { padding: 4px 10px; font-size: 12px; }
.crt-medal svg { width: 160px; height: 160px; color: var(--text); animation: exmOrbSpin 28s linear infinite reverse; }

.crt-kpi-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 18px; }
.crt-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); transition: all .2s; animation: exmKpiRise .5s ease-out both; }
.crt-kpi:hover { transform: translateY(-2px); box-shadow: 0 8px 24px color-mix(in srgb, #f59e0b 12%, transparent); }
.crt-kpi-icn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: color-mix(in srgb, #f59e0b 14%, var(--card)); color: #f59e0b; }
.crt-kpi-mint .crt-kpi-icn { background: color-mix(in srgb, #22c55e 16%, var(--card)); color: #16a34a; }
.crt-kpi-sky .crt-kpi-icn { background: color-mix(in srgb, #38bdf8 16%, var(--card)); color: #0ea5e9; }
.crt-kpi-purple .crt-kpi-icn { background: color-mix(in srgb, #a020f0 16%, var(--card)); color: #a020f0; }
.crt-kpi-peach .crt-kpi-icn { background: color-mix(in srgb, #fb923c 16%, var(--card)); color: #f97316; }
.crt-kpi-lilac .crt-kpi-icn { background: color-mix(in srgb, #c084fc 16%, var(--card)); color: #a855f7; }
.crt-kpi-val { font-size: 20px; font-weight: 800; }
.crt-kpi-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.crt-kpi-delta { font-size: 11px; color: #22c55e; font-weight: 600; margin-top: 2px; }

.crt-band { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; margin-bottom: 18px; }
.crt-pipe { display: flex; align-items: center; gap: 4px; padding: 16px 8px; flex-wrap: wrap; }
.crt-pipe-stage { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); position: relative; min-width: 0; }
.crt-pipe-sky    { border-color: color-mix(in srgb, #38bdf8 30%, var(--border)); background: color-mix(in srgb, #38bdf8 6%, var(--card)); }
.crt-pipe-mint   { border-color: color-mix(in srgb, #22c55e 30%, var(--border)); background: color-mix(in srgb, #22c55e 6%, var(--card)); }
.crt-pipe-amber  { border-color: color-mix(in srgb, #f59e0b 30%, var(--border)); background: color-mix(in srgb, #f59e0b 6%, var(--card)); }
.crt-pipe-purple { border-color: color-mix(in srgb, #a020f0 30%, var(--border)); background: color-mix(in srgb, #a020f0 6%, var(--card)); }
.crt-pipe-num { font-size: 24px; font-weight: 800; }
.crt-pipe-lbl { font-size: 11px; color: var(--text-muted); text-align: center; line-height: 1.4; }
.crt-pipe-arrow { position: absolute; left: -10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--text-muted); }

.crt-tpl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 0; }
.crt-tpl-card { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card); transition: all .2s; }
.crt-tpl-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--ct) 22%, transparent); border-color: var(--ct); }
.crt-tpl-prev { height: 96px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(135deg, color-mix(in srgb, var(--ct) 14%, var(--card)) 0%, color-mix(in srgb, var(--ct) 4%, var(--card)) 100%); border-bottom: 3px solid var(--ct); }
.crt-tpl-medal { font-size: 22px; }
.crt-tpl-line { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--ct) 22%, var(--card)); width: 80%; }
.crt-tpl-line.w-50 { width: 50%; }
.crt-tpl-body { padding: 10px 12px; }
.crt-tpl-name { font-weight: 700; font-size: 12px; margin-bottom: 4px; }
.crt-tpl-meta { font-size: 10px; color: var(--text-muted); }

.crt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.crt-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .15s; }
.crt-tab:hover { border-color: color-mix(in srgb, #f59e0b 32%, var(--border)); }
.crt-tab.is-active { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; border-color: transparent; }
.crt-table-wrap { overflow-x: auto; }
.crt-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.crt-table thead th { padding: 10px 12px; text-align: right; font-size: 11px; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid var(--border); background: color-mix(in srgb, var(--text) 4%, var(--card)); }
.crt-table tbody td { padding: 12px; border-bottom: 1px solid var(--border); }
.crt-table tbody tr:hover { background: color-mix(in srgb, #f59e0b 4%, transparent); }
.crt-code { font-family: 'Courier New', monospace; font-size: 11px; padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, #a020f0 10%, var(--card)); color: #a020f0; direction: ltr; display: inline-block; }
.crt-qr-chip { font-size: 11px; color: var(--text-muted); }

.crt-verify-list { display: flex; flex-direction: column; gap: 8px; padding: 8px 0; }
.crt-verify-row { display: grid; grid-template-columns: 32px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); align-items: center; }
.crt-verify-icn { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, #22c55e 14%, var(--card)); }
.crt-verify-top { display: flex; gap: 8px; align-items: center; margin-bottom: 4px; }
.crt-verify-meta { font-size: 11px; color: var(--text-muted); }

.crt-trend-bars { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 200px; align-items: end; padding: 10px 4px; }
.crt-trend-col { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; }
.crt-trend-bar { width: 100%; background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%); border-radius: 6px 6px 0 0; position: relative; min-height: 6%; animation: exmDistGrow .8s ease-out both; }
.crt-trend-val { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 700; color: var(--text); }
.crt-trend-lbl { font-size: 10px; color: var(--text-muted); white-space: nowrap; }

@media (max-width: 1100px) { .crt-kpi-grid { grid-template-columns: repeat(3, 1fr); } .crt-band { grid-template-columns: 1fr; } .crt-tpl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .crt-hero { grid-template-columns: 1fr; } .crt-hero-right { display: none; } .crt-kpi-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================ */
/* GRADUATES (شبکه همکاران سابق) — namespace grd-*           */
/* ============================================================ */
.grd-hero {
  position: relative; padding: 24px 28px; border-radius: 24px; overflow: hidden;
  background: linear-gradient(135deg, color-mix(in srgb, #2c7be5 14%, var(--card)) 0%, color-mix(in srgb, #22c55e 10%, var(--card)) 100%);
  border: 1px solid color-mix(in srgb, #2c7be5 18%, transparent);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
  margin-bottom: 18px; animation: exmHeroPop .6s cubic-bezier(.25,.5,.25,1) both;
}
.grd-hero-bg { position: absolute; inset: 0; background: radial-gradient(circle at 85% 25%, color-mix(in srgb, #2c7be5 22%, transparent) 0%, transparent 50%), radial-gradient(circle at 20% 80%, color-mix(in srgb, #22c55e 14%, transparent) 0%, transparent 50%); pointer-events: none; }
.grd-hero-left { position: relative; z-index: 1; }
.grd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: color-mix(in srgb, #2c7be5 14%, var(--card)); border: 1px solid color-mix(in srgb, #2c7be5 28%, transparent); font-size: 12px; font-weight: 600; margin-bottom: 14px; }
.grd-chip-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px color-mix(in srgb, #22c55e 24%, transparent); animation: exmDotPulse 1.8s ease-in-out infinite; }
.grd-hero-title { font-size: 26px; font-weight: 800; margin: 0 0 6px; }
.grd-hero-sub { color: var(--text-muted); font-size: 13px; margin: 0 0 16px; }
.grd-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.grd-btn-primary { padding: 8px 18px; border-radius: 10px; border: 0; background: linear-gradient(135deg, #2c7be5, #1e40af); color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, #2c7be5 28%, transparent); transition: transform .15s; }
.grd-btn-primary:hover { transform: translateY(-2px); }
.grd-btn-ghost { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-weight: 600; cursor: pointer; transition: all .15s; }
.grd-btn-ghost:hover { border-color: color-mix(in srgb, #2c7be5 32%, var(--border)); background: color-mix(in srgb, #2c7be5 8%, var(--card)); }
.grd-hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; min-width: 280px; position: relative; z-index: 1; }
.grd-hstat { padding: 12px 16px; border-radius: 12px; background: color-mix(in srgb, var(--card) 86%, transparent); border: 1px solid var(--border); backdrop-filter: blur(6px); }
.grd-hstat b { display: block; font-size: 20px; font-weight: 800; color: #2c7be5; }
.grd-hstat span { font-size: 11px; color: var(--text-muted); margin-top: 2px; display: block; }

.grd-band { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.grd-band.grd-band-solo { grid-template-columns: 1fr; }
.grd-card-filter { grid-column: 1 / -1; }
.grd-filter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; padding: 8px 0; }
.grd-fld { display: flex; flex-direction: column; gap: 4px; }
.grd-fld span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.grd-fld select, .grd-fld input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--text); font-size: 13px; font-family: inherit; }
.grd-fld select:focus, .grd-fld input:focus { outline: 0; border-color: #2c7be5; box-shadow: 0 0 0 3px color-mix(in srgb, #2c7be5 18%, transparent); }
.grd-fld-search { grid-column: span 1; }

.grd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.grd-empty { padding: 40px; text-align: center; color: var(--text-muted); grid-column: 1 / -1; }
.grd-card { padding: 14px; border-radius: 14px; border: 1px solid var(--border); background: var(--card); transition: all .2s; animation: exmKpiRise .4s ease-out both; }
.grd-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, #2c7be5 12%, transparent); border-color: color-mix(in srgb, #2c7be5 24%, var(--border)); }
.grd-card-head { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; margin-bottom: 12px; }
.grd-avatar { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 18px; color: #fff; background: var(--ga); }
.grd-name { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 4px; }
.grd-star { color: #f59e0b; }
.grd-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.grd-card-body { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; border-radius: 10px; background: color-mix(in srgb, var(--text) 3%, var(--card)); margin-bottom: 10px; }
.grd-fact span { font-size: 10px; color: var(--text-muted); }
.grd-fact b { font-size: 12px; font-weight: 700; display: block; margin-top: 2px; }
.grd-card-foot { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grd-foot-chip { padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--text) 6%, var(--card)); font-size: 10px; color: var(--text-muted); font-weight: 600; }
.grd-foot-refer { background: color-mix(in srgb, #22c55e 14%, var(--card)); color: #16a34a; }
.grd-foot-btn { margin-inline-start: auto; padding: 4px 10px; border-radius: 6px; border: 0; background: transparent; color: #2c7be5; font-weight: 600; font-size: 11px; cursor: pointer; }
.grd-foot-btn:hover { background: color-mix(in srgb, #2c7be5 10%, var(--card)); }

.grd-stories { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.grd-story { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); border-inline-start: 4px solid var(--gs); }
.grd-story-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.grd-story-tag { padding: 2px 8px; border-radius: 6px; background: color-mix(in srgb, var(--gs) 14%, var(--card)); color: var(--gs); font-size: 10px; font-weight: 700; }
.grd-story-year { font-size: 11px; color: var(--text-muted); }
.grd-story-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.grd-story-text { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

.grd-employers { display: flex; flex-direction: column; gap: 6px; padding: 6px 0; }
.grd-emp-row { display: grid; grid-template-columns: 28px 36px 1fr 80px; gap: 10px; padding: 8px 10px; border-radius: 8px; align-items: center; transition: background .15s; }
.grd-emp-row:hover { background: color-mix(in srgb, var(--text) 4%, var(--card)); }
.grd-emp-rank { font-weight: 800; color: var(--text-muted); text-align: center; }
.grd-emp-logo { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; background: color-mix(in srgb, var(--text) 6%, var(--card)); }
.grd-emp-name { font-weight: 700; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.grd-emp-partner { padding: 1px 6px; border-radius: 4px; background: color-mix(in srgb, #f59e0b 14%, var(--card)); color: #f59e0b; font-size: 9px; font-weight: 700; }
.grd-emp-meta { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.grd-emp-hires { text-align: center; }
.grd-emp-hires b { display: block; font-size: 18px; font-weight: 800; color: #2c7be5; }
.grd-emp-hires span { font-size: 9px; color: var(--text-muted); }

.grd-referral { display: flex; flex-direction: column; gap: 12px; padding: 6px 0; }
.grd-ref-row { padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--gr) 4%, var(--card)); border: 1px solid color-mix(in srgb, var(--gr) 16%, var(--border)); }
.grd-ref-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.grd-ref-name { font-weight: 700; font-size: 12px; }
.grd-ref-bonus { font-size: 11px; color: var(--text-muted); }
.grd-ref-bonus b { color: #22c55e; }
.grd-ref-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, var(--card)); overflow: hidden; margin-bottom: 6px; }
.grd-ref-fill { height: 100%; border-radius: 999px; background: var(--gr); transition: width .6s ease; }
.grd-ref-foot { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); }

.grd-events { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.grd-ev-row { padding: 12px 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); }
.grd-ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.grd-ev-title { font-weight: 700; font-size: 13px; }
.grd-ev-meta { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.grd-ev-bar { height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 8%, var(--card)); overflow: hidden; margin-bottom: 6px; }
.grd-ev-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #2c7be5, #22c55e); transition: width .6s ease; }
.grd-ev-foot { font-size: 11px; color: var(--text-muted); }

@media (max-width: 1100px) { .grd-grid { grid-template-columns: repeat(2, 1fr); } .grd-band { grid-template-columns: 1fr; } .grd-filter-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grd-hero { grid-template-columns: 1fr; } .grd-hero-stats { grid-template-columns: repeat(2, 1fr); min-width: 0; } .grd-grid { grid-template-columns: 1fr; } .grd-filter-grid { grid-template-columns: repeat(2, 1fr); } .grd-card-head { grid-template-columns: 40px 1fr; } .grd-card-head .chip { grid-column: span 2; justify-self: flex-start; } }

/* Dark theme overrides */
[data-theme="dark"] .exm-table thead th,
[data-theme="dark"] .crt-table thead th { background: color-mix(in srgb, var(--text) 8%, var(--card)); }
[data-theme="dark"] .crt-code { background: color-mix(in srgb, #a020f0 22%, var(--card)); color: #c47fff; }
[data-theme="dark"] .grd-hstat { background: color-mix(in srgb, var(--card) 75%, transparent); }


/* === Enterprise UI polish: brand and notification dropdown === */
.brand {
  gap: 12px;
  padding: 16px 14px 14px;
}

/* Logo container: transparent — logo image has its own art, no box needed */
.brand-logo {
  width: 44px; height: 44px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.brand-logo img {
  padding: 0;
  border-radius: 0;
  filter: none;
}
[data-theme="dark"] .brand-logo {
  background: transparent;
  box-shadow: none;
}

/* Online pip — top corner of logo (GitHub-style), replaces old .brand-dot */
.brand-logo-pip {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #6ee7b7 0%, #10b981 55%, #059669 100%);
  border: 2px solid var(--sidebar-bg, var(--card));
  box-shadow: 0 0 0 2px rgba(16, 185, 129, .18);
  animation: brandLogoPip 2.2s ease-in-out infinite;
  pointer-events: none;
}
[data-theme="dark"] .brand-logo-pip {
  border-color: var(--sidebar-bg, var(--card));
}
@keyframes brandLogoPip {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 2px rgba(16, 185, 129, .22), 0 0 6px rgba(16, 185, 129, .30);
  }
  50% {
    transform: scale(1.14);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, .10), 0 0 10px rgba(16, 185, 129, .18);
  }
}

/* Old .brand-dot removed from DOM; hide any lingering references */
.brand-dot { display: none !important; }

.brand-text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: calc(100% - 56px);
}

.brand-title {
  overflow: hidden;
  text-overflow: ellipsis;
}

.brand-sub {
  white-space: normal;
  line-height: 1.55;
  max-width: 100%;
  overflow: hidden;
  display: block;                       /* no inline-flex + dot alignment */
}

.notif-popup {
  width: min(340px, calc(100vw - 32px));
  top: calc(100% + 8px);
  z-index: 120;
}

.notif-popup-body {
  max-height: 150px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notif-popup-head {
  padding-block: 12px;
}

.notif-popup-foot {
  padding-block: 10px;
}


/* Enterprise-wide Persian font normalization */
:root {
  --font-persian: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
  --font-number: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif;
}

html, body,
button, input, textarea, select,
.app-shell, .sidebar, .topbar, .content,
.card, .kpi, .chip, .btn,
.pm-page, .wb-page, .st-page, .bc-page,
#rp-root {
  font-family: var(--font-persian) !important;
}

canvas {
  display: block;
  width: 100%;
  min-height: 160px;
}

.donut-wrap canvas,
.ai-donut-wrap canvas {
  min-height: 190px;
}


/* Chart layout polish: keep KPI text and chart drawings separated */
.kpi > .kpi-icon,
.kpi > .kpi-label,
.kpi > .kpi-value,
.kpi > .kpi-delta {
  position: relative;
  z-index: 2;
}

.kpi {
  min-height: 126px;
  padding-bottom: 44px;
}

.kpi-spark {
  min-height: 34px !important;
  height: 34px !important;
  max-height: 34px !important;
  opacity: .38;
  z-index: 1;
}

.card canvas:not(.kpi-spark) {
  min-height: 210px;
}

.donut-wrap canvas,
.ai-donut-wrap canvas {
  min-height: 220px !important;
}


/* Full chart readability pass */
.card:has(> canvas),
.card:has(.donut-wrap) {
  min-height: 360px;
}

.card > canvas:not(.kpi-spark),
.card canvas:not(.kpi-spark) {
  height: 260px !important;
  max-height: 300px !important;
}

.card canvas#chart-progress,
.card canvas#chart-skills,
.card canvas#chart-segments,
.card canvas#chart-customer-radar {
  height: 280px !important;
  max-height: 320px !important;
}

.donut-wrap {
  min-height: 280px;
  display: grid;
  place-items: center;
}


/* Finance chart legend uses real DOM text so Persian font rendering stays crisp. */
.finance-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 4px 12px 0;
  color: var(--text-muted);
  font-family: var(--font-persian);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.8;
}

.finance-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.finance-chart-legend i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 6%, transparent);
}


/* Channels live feed height fix */
.ch-live-grid {
  align-items: start;
}

.ch-live-card,
.ch-ai-card {
  align-self: start;
}

.ch-live-card {
  height: auto;
  min-height: 0;
}

.ch-live-card::after,
.ch-ai-card::after {
  display: none;
}


/* Team ranking chart readability fix */
#chart-team-bar {
  min-height: 720px !important;
  height: 760px !important;
  max-height: none !important;
}


/* Menu v2: 14-section public Diaco IA */
.nav-group-count { min-width: 22px; text-align: center; }
.nav-subitem .nav-label { line-height: 1.45; }
.nav-badge[hidden] { display: none !important; }


/* Seasonal forecast chart: keep mixed bar/line chart contained and readable */
.seasonal-forecast-card {
  min-height: auto !important;
}
.seasonal-forecast-card .card-head {
  margin-bottom: 8px;
}
.seasonal-chart-wrap {
  position: relative;
  height: 320px;
  max-height: 320px;
  overflow: hidden;
}
.seasonal-chart-wrap canvas#chart-seasonal {
  display: block;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
}


/* Dashboard KPIs dedicated page */
.dash-kpi-page {
  display: grid;
  gap: 22px;
  direction: rtl;
}

.dash-kpi-hero,
.dash-kpi-panel,
.dash-kpi-card,
.dash-kpi-health,
.dash-kpi-decision {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent)),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--pastel-sky) 28%, transparent), transparent 34%),
    radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--pastel-peach) 24%, transparent), transparent 30%);
  border: 1px solid color-mix(in srgb, var(--border) 78%, white 18%);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.dash-kpi-hero {
  min-height: 420px;
  border-radius: 24px;
  padding: clamp(22px, 4vw, 40px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  align-items: center;
  gap: 28px;
  overflow: hidden;
  position: relative;
}

.dash-kpi-hero::before,
.dash-kpi-radar::before {
  content: "";
  position: absolute;
  inset: 24px;
  border: 1px solid color-mix(in srgb, var(--brand-500) 18%, transparent);
  border-radius: 50%;
  opacity: .35;
  pointer-events: none;
}

.dash-kpi-hero-copy {
  position: relative;
  z-index: 1;
  max-width: 720px;
}

.dash-kpi-eyebrow,
.dash-kpi-section-head span,
.dash-kpi-panel-head span,
.dash-kpi-automation-copy > span {
  color: var(--brand-600);
  font-size: 12px;
  font-weight: 800;
}

.dash-kpi-hero h1 {
  margin: 10px 0 8px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.18;
  letter-spacing: 0;
}

.dash-kpi-hero p,
.dash-kpi-panel-head p {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.dash-kpi-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.dash-kpi-mini {
  min-height: 118px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  display: grid;
  gap: 4px;
}

.dash-kpi-mini span,
.dash-kpi-card p,
.dash-kpi-health p,
.dash-kpi-risk-row span,
.dash-kpi-auto-stats span,
.dash-kpi-decision p {
  color: var(--text-muted);
}

.dash-kpi-mini strong {
  font-size: 24px;
}

.dash-kpi-mini em {
  color: var(--text-muted);
  font-style: normal;
  font-weight: 700;
}

.dash-kpi-mini-mint { background: color-mix(in srgb, var(--pastel-mint) 34%, var(--surface)); }
.dash-kpi-mini-sky { background: color-mix(in srgb, var(--pastel-sky) 36%, var(--surface)); }
.dash-kpi-mini-rose { background: color-mix(in srgb, var(--pastel-rose) 34%, var(--surface)); }

.dash-kpi-radar {
  position: relative;
  min-height: 340px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.dash-kpi-radar::after {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 38px, color-mix(in srgb, var(--brand-500) 16%, transparent) 39px 40px),
    conic-gradient(from 210deg, color-mix(in srgb, var(--pastel-mint) 48%, transparent), color-mix(in srgb, var(--pastel-sky) 52%, transparent), color-mix(in srgb, var(--pastel-lilac) 48%, transparent), color-mix(in srgb, var(--pastel-mint) 48%, transparent));
  filter: blur(.2px);
  opacity: .88;
  z-index: -1;
  animation: spinSlow 24s linear infinite;
}

.dash-kpi-ring {
  width: 230px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 26px;
  text-align: center;
  background:
    radial-gradient(circle, var(--surface) 0 55%, transparent 56%),
    conic-gradient(var(--green-500) calc(var(--score) * 1%), color-mix(in srgb, var(--border) 65%, transparent) 0);
  box-shadow: inset 0 0 0 1px var(--border), 0 22px 56px rgba(44, 120, 115, .18);
}

.dash-kpi-ring span {
  font-size: 54px;
  font-weight: 900;
  line-height: 1;
}

.dash-kpi-ring small,
.dash-kpi-ring b {
  color: var(--text-muted);
  font-weight: 800;
}

.dash-kpi-radar > .dash-kpi-sparkline {
  position: absolute;
  bottom: 28px;
  width: 74%;
  height: 42px;
}

.dash-kpi-section,
.dash-kpi-decisions {
  display: grid;
  gap: 14px;
}

.dash-kpi-section-head,
.dash-kpi-panel-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
}

.dash-kpi-section-head h2,
.dash-kpi-panel-head h3,
.dash-kpi-automation h2 {
  margin: 3px 0 0;
  line-height: 1.35;
  letter-spacing: 0;
}

.dash-kpi-chip {
  padding: 8px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 38%, var(--surface));
  color: var(--brand-700);
  font-weight: 800;
  white-space: nowrap;
}

.dash-kpi-snapshot,
.dash-kpi-health-grid,
.dash-kpi-decision-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-card,
.dash-kpi-health,
.dash-kpi-panel,
.dash-kpi-decision {
  border-radius: 18px;
}

.dash-kpi-card {
  padding: 17px;
  min-height: 278px;
  display: grid;
  gap: 10px;
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
  transition: transform .18s ease, box-shadow .18s ease;
}

.dash-kpi-card:hover,
.dash-kpi-health:hover,
.dash-kpi-decision:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.dash-kpi-card-top,
.dash-kpi-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-kpi-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pastel-sky) 42%, var(--surface));
  font-size: 22px;
}

.dash-kpi-status {
  padding: 5px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-mint) 36%, var(--surface));
  font-size: 12px;
  font-weight: 900;
}

.dash-kpi-card h3,
.dash-kpi-health h3,
.dash-kpi-decision h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
}

.dash-kpi-value {
  font-size: 28px;
  font-weight: 900;
}

.dash-kpi-meta {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.dash-kpi-tone-green .dash-kpi-status,
.dash-kpi-tone-green .dash-kpi-health-ring { background: color-mix(in srgb, var(--pastel-mint) 42%, var(--surface)); }
.dash-kpi-tone-amber .dash-kpi-status,
.dash-kpi-tone-amber .dash-kpi-health-ring { background: color-mix(in srgb, var(--pastel-peach) 48%, var(--surface)); }
.dash-kpi-tone-red .dash-kpi-status { background: color-mix(in srgb, var(--pastel-rose) 48%, var(--surface)); }

.dash-kpi-sparkline {
  width: 100%;
  height: 42px;
}

.dash-kpi-sparkline path {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 4px 6px rgba(44, 120, 115, .18));
}

.dash-kpi-chart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
  gap: 16px;
}

.dash-kpi-chart-grid-balanced {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-kpi-panel {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.dash-kpi-chart-wrap {
  position: relative;
  height: 330px;
  min-height: 280px;
}

.dash-kpi-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.dash-kpi-funnel {
  display: grid;
  gap: 11px;
}

.dash-kpi-funnel-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px 12px;
  align-items: center;
  font-weight: 800;
}

.dash-kpi-funnel-row i {
  grid-column: 1 / -1;
  height: 12px;
  width: var(--w);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand-500), var(--pastel-sky));
  box-shadow: 0 5px 14px color-mix(in srgb, var(--brand-500) 18%, transparent);
}

.dash-kpi-insight {
  padding: 13px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pastel-lemon) 40%, var(--surface));
  color: var(--text-muted);
  font-weight: 750;
}

.dash-kpi-health-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-kpi-health {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
}

.dash-kpi-health-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, var(--surface) 0 57%, transparent 58%),
    conic-gradient(var(--green-500) calc(var(--p) * 1%), color-mix(in srgb, var(--border) 62%, transparent) 0);
  font-weight: 900;
}

.dash-kpi-heatmap {
  display: grid;
  grid-template-columns: 96px repeat(7, 1fr);
  gap: 8px;
  align-items: center;
}

.dash-kpi-heatmap b,
.dash-kpi-heatmap strong {
  color: var(--text-muted);
  font-size: 12px;
}

.dash-kpi-heatmap span {
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
}

.dash-kpi-sla-green { background: color-mix(in srgb, var(--pastel-mint) 72%, var(--surface)); }
.dash-kpi-sla-amber { background: color-mix(in srgb, var(--pastel-peach) 76%, var(--surface)); }
.dash-kpi-sla-red { background: color-mix(in srgb, var(--pastel-rose) 74%, var(--surface)); }

.dash-kpi-risk-list {
  display: grid;
  gap: 10px;
}

.dash-kpi-risk-row {
  display: grid;
  grid-template-columns: 1.15fr .65fr .65fr .7fr 1fr .9fr 1.25fr;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  border: 1px solid var(--border);
}

.dash-kpi-risk-row div {
  display: grid;
  gap: 2px;
}

.dash-kpi-risk-row strong {
  line-height: 1.5;
}

.dash-kpi-automation {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 210px minmax(180px, .6fr);
  align-items: center;
  gap: 18px;
  padding: 22px;
  border-radius: 22px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 32%, var(--surface)), color-mix(in srgb, var(--pastel-mint) 22%, var(--surface))),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.dash-kpi-auto-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

.dash-kpi-auto-stats div {
  padding: 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  display: grid;
  gap: 3px;
}

.dash-kpi-auto-stats strong {
  font-size: 22px;
}

.dash-kpi-donut {
  width: 190px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle, var(--surface) 0 47%, transparent 48%),
    conic-gradient(var(--brand-500) 0 var(--a), var(--green-500) var(--a) var(--b), var(--amber-500) var(--b) var(--c), var(--accent-500) var(--c) 360deg);
  box-shadow: inset 0 0 0 1px var(--border);
}

.dash-kpi-donut span {
  font-size: 30px;
  font-weight: 900;
}

.dash-kpi-donut-legend {
  display: grid;
  gap: 8px;
  color: var(--text-muted);
  font-weight: 800;
}

.dash-kpi-donut-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-kpi-donut-legend i {
  width: 10px;
  height: 10px;
  border-radius: 4px;
  background: var(--brand-500);
}

.dash-kpi-donut-legend span:nth-child(2) i { background: var(--green-500); }
.dash-kpi-donut-legend span:nth-child(3) i { background: var(--amber-500); }
.dash-kpi-donut-legend span:nth-child(4) i { background: var(--accent-500); }

.dash-kpi-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-kpi-decision {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.dash-kpi-decision-num {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--pastel-sky) 44%, var(--surface));
  font-weight: 900;
}

.dash-kpi-decision > strong {
  color: var(--brand-700);
}

.dash-kpi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.dash-kpi-actions button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
}

/* ---------- KPI page · v2 upgrades (movers, filter bar, trends, goals, spotlight, segments) ---------- */

.dash-kpi-hero-movers {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.dash-kpi-mover-pill {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  min-height: 44px;
}

.dash-kpi-mover-pill span {
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .2px;
}

.dash-kpi-mover-pill strong { font-weight: 900; font-size: 14px; }
.dash-kpi-mover-pill em {
  font-style: normal;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

.dash-kpi-mover-up   { background: color-mix(in srgb, var(--pastel-mint) 40%, var(--surface)); }
.dash-kpi-mover-up em { background: var(--green-500); color: #0d3b23; }
.dash-kpi-mover-down { background: color-mix(in srgb, var(--pastel-rose) 40%, var(--surface)); }
.dash-kpi-mover-down em { background: var(--red-500); color: #fff; }

/* Filter bar */
.dash-kpi-filterbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

.dash-kpi-catchip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.dash-kpi-catchip:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.dash-kpi-catchip i { font-style: normal; font-size: 14px; }
.dash-kpi-catchip em {
  font-style: normal;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 60%, transparent);
  color: var(--text-muted);
}

.dash-kpi-catchip.is-active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(44,120,115,.35);
}
.dash-kpi-catchip.is-active em { background: rgba(255,255,255,.28); color: #fff; }

.dash-kpi-cat-brand.is-active { background: linear-gradient(135deg, var(--brand-500), var(--brand-700)); }
.dash-kpi-cat-sky.is-active   { background: linear-gradient(135deg, #4c86d9, #021c1e); }
.dash-kpi-cat-lilac.is-active { background: linear-gradient(135deg, #6fb98f, #7c3aed); }
.dash-kpi-cat-mint.is-active  { background: linear-gradient(135deg, #6dbf8f, #2f8a5e); }
.dash-kpi-cat-peach.is-active { background: linear-gradient(135deg, var(--accent-500), var(--accent-600)); }
.dash-kpi-cat-rose.is-active  { background: linear-gradient(135deg, #e8788c, #b83656); }
.dash-kpi-cat-lemon.is-active { background: linear-gradient(135deg, #f0b86e, #d18a2a); }

/* Category badge on KPI cards */
.dash-kpi-catbadge {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: var(--brand-700);
  background: color-mix(in srgb, var(--pastel-sky) 46%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand-500) 12%, transparent);
}

/* Category-specific card accents */
.dash-kpi-card.dash-kpi-cat-finance  { --catAccent: var(--green-500);  --catSoft: var(--pastel-mint); }
.dash-kpi-card.dash-kpi-cat-sales    { --catAccent: var(--brand-500);  --catSoft: var(--pastel-sky); }
.dash-kpi-card.dash-kpi-cat-mkt      { --catAccent: #6fb98f;           --catSoft: var(--pastel-lilac); }
.dash-kpi-card.dash-kpi-cat-ops      { --catAccent: var(--accent-500); --catSoft: var(--pastel-peach); }
.dash-kpi-card.dash-kpi-cat-customer { --catAccent: var(--red-500);    --catSoft: var(--pastel-rose); }
.dash-kpi-card.dash-kpi-cat-team     { --catAccent: var(--amber-500);  --catSoft: var(--pastel-lemon); }
.dash-kpi-card.dash-kpi-cat-ai       { --catAccent: #6fb98f;           --catSoft: var(--pastel-lilac); }

.dash-kpi-card[data-cat] {
  border-inline-start: 3px solid var(--catAccent, var(--brand-500));
}
.dash-kpi-card[data-cat] .dash-kpi-icon {
  background: color-mix(in srgb, var(--catSoft, var(--pastel-sky)) 60%, var(--surface));
}
.dash-kpi-card[data-cat] .dash-kpi-catbadge {
  background: color-mix(in srgb, var(--catSoft, var(--pastel-sky)) 62%, var(--surface));
  color: var(--text);
}

/* Filter behaviour · v2 (HIDE not dim + sticky bar + status pill + flash) */
.dash-kpi-page .is-hidden { display: none !important; }

.dash-kpi-page .dash-kpi-card,
.dash-kpi-page .dash-kpi-trend,
.dash-kpi-page .dash-kpi-goal,
.dash-kpi-page .dash-kpi-movers li,
.dash-kpi-page .dash-kpi-spotlight { transition: opacity .28s ease, transform .28s cubic-bezier(.22,.7,.16,1), box-shadow .18s ease; }

/* When a filter yields zero items for a whole section, hide the section entirely */
.dash-kpi-page .dash-kpi-section.is-empty,
.dash-kpi-page .dash-kpi-movers.is-empty { display: none; }

/* Sticky filter wrapper (contains filterbar + optional status pill) */
.dash-kpi-page .dash-kpi-filter-wrap {
  position: sticky;
  top: 64px;
  z-index: 30;
  display: grid;
  gap: 8px;
}
.dash-kpi-page .dash-kpi-filter-wrap .dash-kpi-filterbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 6px 22px rgba(15,23,42,.06);
  transition: box-shadow .3s ease, border-color .3s ease;
}
.dash-kpi-page .dash-kpi-filter-wrap.is-filtered .dash-kpi-filterbar {
  border-color: rgba(111,185,143,0.35);
  box-shadow: 0 6px 26px rgba(111,185,143,.18);
}

/* Active-filter status pill */
.dash-kpi-page .dash-kpi-filter-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,0.18), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,0.14), transparent 46%),
    color-mix(in srgb, var(--surface) 90%, transparent);
  border: 1px solid rgba(111,185,143,0.32);
  backdrop-filter: blur(10px);
  animation: kpiFilterSlideIn .3s cubic-bezier(.22,.7,.16,1) both;
}
.dash-kpi-page .dash-kpi-filter-status[hidden] { display: none; }
.dash-kpi-page .dash-kpi-filter-status-lbl { font-size: 12px; color: var(--text-muted); font-weight: 700; }
.dash-kpi-page .dash-kpi-filter-status strong {
  font-size: 13px;
  font-weight: 900;
  padding: 3px 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(111,185,143,0.22), rgba(34,211,238,0.16));
  color: var(--brand-700);
}
.dash-kpi-page .dash-kpi-filter-status em {
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--surface-2);
}
.dash-kpi-page .dash-kpi-filter-reset {
  margin-inline-start: auto;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.dash-kpi-page .dash-kpi-filter-reset:hover {
  background: rgba(232,120,140,.10);
  border-color: rgba(232,120,140,.32);
  color: #b14458;
}

/* Snapshot flash — quick outline pulse when filter changes */
.dash-kpi-page .dash-kpi-snapshot.is-flash {
  animation: kpiSnapFlash .7s cubic-bezier(.25,.1,.25,1) both;
  border-radius: 16px;
}
@keyframes kpiSnapFlash {
  0%   { box-shadow: 0 0 0 0    rgba(111,185,143,0); }
  30%  { box-shadow: 0 0 0 10px rgba(111,185,143,.18); }
  100% { box-shadow: 0 0 0 0    rgba(111,185,143,0); }
}
@keyframes kpiFilterSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chip alt (softer look) */
.dash-kpi-chip-alt {
  background: color-mix(in srgb, var(--pastel-mint) 40%, var(--surface));
  color: var(--text);
}

/* Funnel conversion badge */
.dash-kpi-funnel-conv {
  justify-self: end;
  font-size: 11px;
  font-weight: 900;
  color: var(--brand-700);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 50%, var(--surface));
}

/* Trend comparison grid */
.dash-kpi-trend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-trend {
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
  position: relative;
  overflow: hidden;
}

.dash-kpi-trend::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 4px; height: 100%;
  background: var(--trendAccent, var(--brand-500));
}

.dash-kpi-trend-mint  { --trendAccent: var(--green-500); }
.dash-kpi-trend-sky   { --trendAccent: var(--brand-500); }
.dash-kpi-trend-lilac { --trendAccent: #6fb98f; }
.dash-kpi-trend-peach { --trendAccent: var(--accent-500); }
.dash-kpi-trend-rose  { --trendAccent: var(--red-500); }
.dash-kpi-trend-lemon { --trendAccent: var(--amber-500); }

.dash-kpi-trend-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.dash-kpi-trend-head h3 { margin: 0; font-size: 15px; }
.dash-kpi-trend-cat {
  font-size: 11px;
  font-weight: 800;
  color: var(--text-muted);
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.dash-kpi-trend-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
}
.dash-kpi-trend-main strong { font-size: 26px; font-weight: 900; }
.dash-kpi-trend-deltas { display: flex; gap: 6px; flex-wrap: wrap; }
.dash-kpi-trend-deltas em {
  font-style: normal;
  font-weight: 900;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-mint) 46%, var(--surface));
  color: #0d3b23;
}

.dash-kpi-trend-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.dash-kpi-trend-compare span { font-size: 11px; color: var(--text-muted); font-weight: 700; }
.dash-kpi-trend-compare b    { display: block; font-weight: 900; margin-top: 2px; }

/* Goal tracker */
.dash-kpi-goals-section { margin-top: 2px; }

.dash-kpi-goal-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-goal {
  padding: 16px 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 10px;
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
  position: relative;
  overflow: hidden;
}

.dash-kpi-goal::before {
  content: '';
  position: absolute;
  top: 0; inset-inline-start: 0;
  width: 4px; height: 100%;
  background: var(--goalAccent, var(--brand-500));
}

.dash-kpi-goal-mint  { --goalAccent: var(--green-500);  --goalSoft: var(--pastel-mint); }
.dash-kpi-goal-sky   { --goalAccent: var(--brand-500);  --goalSoft: var(--pastel-sky); }
.dash-kpi-goal-lilac { --goalAccent: #6fb98f;           --goalSoft: var(--pastel-lilac); }
.dash-kpi-goal-peach { --goalAccent: var(--accent-500); --goalSoft: var(--pastel-peach); }
.dash-kpi-goal-rose  { --goalAccent: var(--red-500);    --goalSoft: var(--pastel-rose); }
.dash-kpi-goal-lemon { --goalAccent: var(--amber-500);  --goalSoft: var(--pastel-lemon); }

.dash-kpi-goal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}
.dash-kpi-goal-head h3 { margin: 6px 0 0; font-size: 15px; }
.dash-kpi-goal-head b {
  font-size: 22px;
  font-weight: 900;
  color: var(--goalAccent);
}

.dash-kpi-goal .dash-kpi-catbadge {
  background: color-mix(in srgb, var(--goalSoft) 60%, var(--surface));
  color: var(--text);
}

.dash-kpi-goal-bar {
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--goalSoft) 46%, var(--surface-2));
  overflow: hidden;
  position: relative;
}
.dash-kpi-goal-bar i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  background: linear-gradient(90deg, var(--goalAccent), color-mix(in srgb, var(--goalAccent) 60%, var(--pastel-lilac)));
  border-radius: 999px;
  transition: width .6s cubic-bezier(.25,.1,.25,1);
}

.dash-kpi-goal-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 700;
}
.dash-kpi-goal-meta b { font-weight: 900; color: var(--text); margin-inline-start: 4px; }

/* Movers · Top & Bottom */
.dash-kpi-movers-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dash-kpi-movers ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dash-kpi-movers li {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  border: 1px solid var(--border);
}
.dash-kpi-movers li b {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-500) 12%, transparent);
  color: var(--brand-700);
  font-weight: 900;
  font-size: 12px;
}
.dash-kpi-movers li strong { display: block; font-weight: 900; font-size: 14px; }
.dash-kpi-movers li span:not(.dash-kpi-mover-delta) { color: var(--text-muted); font-size: 11px; font-weight: 700; }
.dash-kpi-movers li em {
  font-style: normal;
  font-weight: 900;
  color: var(--text);
  font-size: 13px;
}
.dash-kpi-mover-delta {
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.dash-kpi-mover-delta.up   { background: color-mix(in srgb, var(--pastel-mint) 60%, var(--surface)); color: #0d3b23; }
.dash-kpi-mover-delta.down { background: color-mix(in srgb, var(--pastel-rose) 60%, var(--surface)); color: #6b1f2f; }

.dash-kpi-movers-up   { border-top: 3px solid var(--green-500); }
.dash-kpi-movers-down { border-top: 3px solid var(--red-500); }

/* Spotlight — KPI of the week */
.dash-kpi-spotlight {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 22px;
  padding: 26px;
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 42%, var(--surface)), color-mix(in srgb, var(--pastel-sky) 30%, var(--surface))),
    var(--surface);
}

.dash-kpi-spot-mint  { background: linear-gradient(135deg, color-mix(in srgb, var(--pastel-mint) 46%, var(--surface)), color-mix(in srgb, var(--pastel-sky) 30%, var(--surface))); }
.dash-kpi-spot-sky   { background: linear-gradient(135deg, color-mix(in srgb, var(--pastel-sky) 46%, var(--surface)), color-mix(in srgb, var(--pastel-lilac) 30%, var(--surface))); }
.dash-kpi-spot-lilac { background: linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 46%, var(--surface)), color-mix(in srgb, var(--pastel-sky) 30%, var(--surface))); }
.dash-kpi-spot-peach { background: linear-gradient(135deg, color-mix(in srgb, var(--pastel-peach) 46%, var(--surface)), color-mix(in srgb, var(--pastel-lemon) 30%, var(--surface))); }
.dash-kpi-spot-rose  { background: linear-gradient(135deg, color-mix(in srgb, var(--pastel-rose) 46%, var(--surface)), color-mix(in srgb, var(--pastel-peach) 30%, var(--surface))); }

.dash-kpi-spot-copy { display: grid; gap: 10px; align-content: start; }
.dash-kpi-spot-copy > span {
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.dash-kpi-spot-copy h2 { margin: 0; font-size: 28px; }
.dash-kpi-spot-copy p  { margin: 0; color: var(--text); font-weight: 600; line-height: 1.8; }

.dash-kpi-spot-main {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.dash-kpi-spot-main strong { font-size: 42px; font-weight: 900; line-height: 1; }
.dash-kpi-spot-main em {
  font-style: normal;
  font-weight: 900;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--green-500);
  color: #0d3b23;
  font-size: 14px;
}

.dash-kpi-spot-action {
  padding: 14px 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px dashed color-mix(in srgb, var(--brand-500) 26%, transparent);
  display: grid;
  gap: 6px;
}
.dash-kpi-spot-action b { color: var(--brand-700); font-weight: 900; font-size: 13px; }
.dash-kpi-spot-action span { color: var(--text); font-weight: 600; }

.dash-kpi-spot-contrib {
  padding: 18px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  display: grid;
  gap: 10px;
  align-content: start;
}
.dash-kpi-spot-contrib > span {
  font-size: 12px;
  font-weight: 900;
  color: var(--brand-700);
  letter-spacing: .2px;
}
.dash-kpi-spot-contrib ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.dash-kpi-spot-contrib li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
}
.dash-kpi-spot-contrib strong { font-weight: 800; font-size: 13px; }
.dash-kpi-spot-contrib em { font-style: normal; font-weight: 900; color: var(--brand-700); font-size: 12px; }

/* Segment split cards */
.dash-kpi-segment-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dash-kpi-segment {
  padding: 16px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: grid;
  gap: 8px;
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

.dash-kpi-seg-mint  { --segAccent: var(--green-500);  --segSoft: var(--pastel-mint); }
.dash-kpi-seg-sky   { --segAccent: var(--brand-500);  --segSoft: var(--pastel-sky); }
.dash-kpi-seg-lilac { --segAccent: #6fb98f;           --segSoft: var(--pastel-lilac); }
.dash-kpi-seg-lemon { --segAccent: var(--amber-500);  --segSoft: var(--pastel-lemon); }
.dash-kpi-seg-peach { --segAccent: var(--accent-500); --segSoft: var(--pastel-peach); }

.dash-kpi-seg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.dash-kpi-seg-head h3 { margin: 0; font-size: 14px; }
.dash-kpi-seg-head b {
  font-weight: 900;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--segSoft) 62%, var(--surface));
  color: var(--text);
  font-size: 12px;
}
.dash-kpi-segment > strong { font-size: 24px; font-weight: 900; color: var(--segAccent); }
.dash-kpi-seg-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-muted);
}
.dash-kpi-seg-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--segSoft) 46%, var(--surface-2));
  overflow: hidden;
}
.dash-kpi-seg-bar i {
  display: block;
  height: 100%;
  width: calc(var(--p, 0) * 1%);
  background: linear-gradient(90deg, var(--segAccent), color-mix(in srgb, var(--segAccent) 60%, var(--pastel-lilac)));
  border-radius: 999px;
}
.dash-kpi-segment p { margin: 4px 0 0; color: var(--text-muted); font-weight: 700; font-size: 12px; }

/* Responsive tweaks */
@media (max-width: 1200px) {
  .dash-kpi-trend-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi-segment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-kpi-snapshot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dash-kpi-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .dash-kpi-trend-grid,
  .dash-kpi-segment-grid,
  .dash-kpi-goal-list,
  .dash-kpi-movers-grid,
  .dash-kpi-snapshot,
  .dash-kpi-decision-grid { grid-template-columns: minmax(0, 1fr); }
  .dash-kpi-spotlight { grid-template-columns: minmax(0, 1fr); }
  .dash-kpi-goal-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   KPI page · Mission-Control alignment (2026-07-12)
   Match today's-business-view (.dash-mc-*) typography, spacing, tints
   ========================================================================= */

/* ---- HERO — compact, radial purple+cyan like .dash-mc-hero ---- */
.dash-kpi-page .dash-kpi-hero {
  min-height: 0;
  padding: 18px 22px;
  border-radius: 18px;
  gap: 20px;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,0.16), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,0.13), transparent 46%),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  backdrop-filter: none;
}
.dash-kpi-page .dash-kpi-hero::before {
  inset: 18px;
  border-color: rgba(111,185,143,0.16);
  opacity: .5;
}

.dash-kpi-page .dash-kpi-eyebrow {
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.dash-kpi-page .dash-kpi-hero h1 {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.35;
}
.dash-kpi-page .dash-kpi-hero p {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--text-muted);
}

/* Hero movers pills — chip-like, tight */
.dash-kpi-page .dash-kpi-hero-movers { margin-top: 12px; gap: 8px; }
.dash-kpi-page .dash-kpi-mover-pill {
  padding: 8px 12px;
  min-height: 0;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
.dash-kpi-page .dash-kpi-mover-pill span {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .1px;
  text-transform: none;
}
.dash-kpi-page .dash-kpi-mover-pill strong { font-size: 13px; font-weight: 800; letter-spacing: -.2px; }
.dash-kpi-page .dash-kpi-mover-pill em {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
}
.dash-kpi-page .dash-kpi-mover-up   { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.28); }
.dash-kpi-page .dash-kpi-mover-up em { background: var(--green-50); color: #2f8a5e; }
.dash-kpi-page .dash-kpi-mover-down { background: rgba(232,120,140,0.14); border-color: rgba(232,120,140,0.28); }
.dash-kpi-page .dash-kpi-mover-down em { background: var(--red-50); color: #b14458; }

/* Hero mini stats — mc-pill style */
.dash-kpi-page .dash-kpi-hero-stats { margin-top: 14px; gap: 10px; }
.dash-kpi-page .dash-kpi-mini {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  gap: 2px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
}
.dash-kpi-page .dash-kpi-mini span { font-size: 10.5px; font-weight: 600; }
.dash-kpi-page .dash-kpi-mini strong { font-size: 18px; font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.dash-kpi-page .dash-kpi-mini em { font-size: 10.5px; font-weight: 600; }
.dash-kpi-page .dash-kpi-mini-mint { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(184,230,211,.35)); }
.dash-kpi-page .dash-kpi-mini-sky  { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(184,212,241,.35)); }
.dash-kpi-page .dash-kpi-mini-lilac{ background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(221,214,254,.40)); }
.dash-kpi-page .dash-kpi-mini-rose { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(245,194,199,.35)); }

/* ---- Health Orb — redesigned (SVG rings + pulse + gradient) ---- */
.dash-kpi-page .dash-kpi-radar {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  isolation: isolate;
}
/* Kill old conic halo and any lingering sparkline */
.dash-kpi-page .dash-kpi-radar::after { display: none; }
.dash-kpi-page .dash-kpi-radar > .dash-kpi-sparkline { display: none !important; }

.dash-kpi-page .dash-kpi-radar::before {
  content: '';
  position: absolute;
  width: 240px; height: 240px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(111,185,143,0.14), transparent 60%),
    radial-gradient(circle at 30% 30%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(52,211,153,0.10), transparent 55%);
  filter: blur(4px);
  z-index: -2;
  inset: auto;
  border: none;
  opacity: 1;
  pointer-events: none;
}

.dash-kpi-page .dash-kpi-orb-svg {
  position: absolute;
  width: 210px;
  height: 210px;
  z-index: 0;
  filter: drop-shadow(0 8px 24px rgba(111,185,143,.28));
}
.dash-kpi-page .dash-kpi-orb-track { stroke: rgba(15,23,42,0.08); }
.dash-kpi-page .dash-kpi-orb-track-2 {
  stroke: rgba(111,185,143,0.22);
  stroke-dasharray: 2 4;
  animation: kpiOrbSpin 40s linear infinite;
  transform-origin: 60px 60px;
}
.dash-kpi-page .dash-kpi-orb-arc {
  stroke-dasharray: var(--c);
  stroke-dashoffset: calc(var(--c) - var(--c) * var(--p) / 100);
  animation: kpiOrbDraw 2.4s cubic-bezier(.25,.1,.25,1) both;
}
.dash-kpi-page .dash-kpi-orb-dots circle {
  transform-origin: 60px 60px;
  animation: kpiOrbSpin 20s linear infinite;
  filter: drop-shadow(0 0 5px currentColor);
  opacity: .9;
}
.dash-kpi-page .dash-kpi-orb-dots circle:nth-child(2) { animation-duration: 24s; animation-direction: reverse; }
.dash-kpi-page .dash-kpi-orb-dots circle:nth-child(3) { animation-duration: 28s; }
.dash-kpi-page .dash-kpi-orb-dots circle:nth-child(4) { animation-duration: 32s; animation-direction: reverse; }

.dash-kpi-page .dash-kpi-orb-pulse {
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  border: 2px solid rgba(111,185,143,0.32);
  animation: kpiOrbPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes kpiOrbDraw { from { stroke-dashoffset: var(--c); } }
@keyframes kpiOrbSpin { to { transform: rotate(360deg); } }
@keyframes kpiOrbPulse {
  0%, 100% { transform: scale(1);    opacity: 0; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Inner text centered inside the SVG ring */
.dash-kpi-page .dash-kpi-ring {
  width: 148px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 20px 16px;
  gap: 4px;
  background: transparent;
  box-shadow: none;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.dash-kpi-page .dash-kpi-ring span {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  background: linear-gradient(135deg, #6fb98f, #22d3ee 55%, #34d399);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.dash-kpi-page .dash-kpi-ring span em {
  font-style: normal;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  background: linear-gradient(135deg, #6fb98f, #22d3ee);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash-kpi-page .dash-kpi-ring small {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
}
.dash-kpi-page .dash-kpi-ring b {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 130px;
}

/* ---- Filter chip bar — match .chip-btn / .dash-mc-tab ---- */
.dash-kpi-page .dash-kpi-filterbar {
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
  backdrop-filter: blur(12px) saturate(140%);
}
.dash-kpi-page .dash-kpi-catchip {
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  gap: 6px;
}
.dash-kpi-page .dash-kpi-catchip:hover { background: rgba(127,127,127,0.06); color: var(--text); box-shadow: none; }
.dash-kpi-page .dash-kpi-catchip i { font-size: 13px; }
.dash-kpi-page .dash-kpi-catchip em { font-size: 10px; padding: 2px 7px; }
.dash-kpi-page .dash-kpi-catchip.is-active {
  color: var(--text);
  font-weight: 800;
  background: linear-gradient(135deg, rgba(111,185,143,0.16), rgba(34,211,238,0.12));
  border-color: rgba(111,185,143,0.32);
  box-shadow: none;
}
.dash-kpi-page .dash-kpi-catchip.is-active em { background: rgba(111,185,143,0.24); color: var(--brand-700); }

/* ---- Section heads & chips — smaller ---- */
.dash-kpi-page .dash-kpi-section,
.dash-kpi-page .dash-kpi-decisions { gap: 12px; }
.dash-kpi-page .dash-kpi-section-head span,
.dash-kpi-page .dash-kpi-panel-head span,
.dash-kpi-page .dash-kpi-automation-copy > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.dash-kpi-page .dash-kpi-section-head h2,
.dash-kpi-page .dash-kpi-panel-head h3,
.dash-kpi-page .dash-kpi-automation h2 {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.2px;
  margin-top: 4px;
}
.dash-kpi-page .dash-kpi-chip {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 700;
  background: var(--pastel-lilac);
  color: #6d50d4;
}
.dash-kpi-page .dash-kpi-chip-alt { background: var(--pastel-mint); color: #2f8a5e; }

/* ---- KPI Snapshot cards — .kpi-style compact with pastel blob ---- */
.dash-kpi-page .dash-kpi-snapshot { gap: 14px; }
.dash-kpi-page .dash-kpi-card {
  padding: 14px 16px 16px;
  min-height: 0;
  border-radius: 16px;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  isolation: isolate;
}
.dash-kpi-page .dash-kpi-card::before {
  content: '';
  position: absolute;
  top: -30px;
  inset-inline-end: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--catSoft, var(--pastel-sky));
  filter: blur(38px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,.7,.16,1);
}
.dash-kpi-page .dash-kpi-card:hover::before { opacity: .8; transform: scale(1.15); }
.dash-kpi-page .dash-kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -8px rgba(15,23,42,.12), 0 3px 10px rgba(15,23,42,.04);
}
.dash-kpi-page .dash-kpi-card[data-cat] { border-inline-start: 3px solid var(--catAccent, var(--brand-500)); }
.dash-kpi-page .dash-kpi-card-top { gap: 8px; }
.dash-kpi-page .dash-kpi-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  font-size: 17px;
  background: color-mix(in srgb, var(--catSoft, var(--pastel-sky)) 72%, var(--surface));
}
.dash-kpi-page .dash-kpi-status {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  background: var(--pastel-mint);
  color: #2f8a5e;
}
.dash-kpi-page .dash-kpi-tone-amber .dash-kpi-status { background: var(--pastel-peach); color: #c46920; }
.dash-kpi-page .dash-kpi-tone-red .dash-kpi-status   { background: var(--pastel-rose);  color: #b14458; }
.dash-kpi-page .dash-kpi-catbadge {
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 999px;
  background: color-mix(in srgb, var(--catSoft, var(--pastel-sky)) 60%, var(--surface));
  color: var(--text);
  border: none;
}
.dash-kpi-page .dash-kpi-card h3 { font-size: 12.5px; font-weight: 700; line-height: 1.4; color: var(--text-muted); }
.dash-kpi-page .dash-kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -.5px; line-height: 1.15; }
.dash-kpi-page .dash-kpi-meta {
  font-size: 11px;
  font-weight: 600;
  padding-top: 2px;
}
.dash-kpi-page .dash-kpi-meta strong {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--green-50);
  color: #2f8a5e;
  font-size: 10.5px;
}
.dash-kpi-page .dash-kpi-tone-amber .dash-kpi-meta strong { background: var(--amber-50); color: #b27512; }
.dash-kpi-page .dash-kpi-tone-red .dash-kpi-meta strong   { background: var(--red-50);   color: #b14458; }
.dash-kpi-page .dash-kpi-sparkline { height: 32px; opacity: .7; }
.dash-kpi-page .dash-kpi-sparkline path { stroke-width: 2; }
.dash-kpi-page .dash-kpi-card p { font-size: 11.5px; color: var(--text-muted); font-weight: 500; line-height: 1.5; margin: 0; }

/* ---- Trend Comparison cards ---- */
.dash-kpi-page .dash-kpi-trend-grid { gap: 12px; }
.dash-kpi-page .dash-kpi-trend {
  padding: 14px 16px;
  border-radius: 16px;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-trend::before { width: 3px; }
.dash-kpi-page .dash-kpi-trend-head h3 { font-size: 13px; font-weight: 700; }
.dash-kpi-page .dash-kpi-trend-cat {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--pastel-sky);
  color: #3b5998;
  font-weight: 700;
}
.dash-kpi-page .dash-kpi-trend-main strong { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.dash-kpi-page .dash-kpi-trend-deltas em {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--green-50);
  color: #2f8a5e;
  font-weight: 700;
}
.dash-kpi-page .dash-kpi-trend-compare {
  padding: 8px 10px;
  border-radius: 10px;
  gap: 8px;
  background: var(--surface-2);
}
.dash-kpi-page .dash-kpi-trend-compare span { font-size: 10.5px; font-weight: 600; }
.dash-kpi-page .dash-kpi-trend-compare b    { font-size: 13px; font-weight: 800; letter-spacing: -.3px; }

/* Trend accent colors softer */
.dash-kpi-page .dash-kpi-trend-mint  { --trendAccent: #10b981; }
.dash-kpi-page .dash-kpi-trend-sky   { --trendAccent: var(--brand-500); }
.dash-kpi-page .dash-kpi-trend-lilac { --trendAccent: #6fb98f; }
.dash-kpi-page .dash-kpi-trend-peach { --trendAccent: #f59e0b; }
.dash-kpi-page .dash-kpi-trend-rose  { --trendAccent: #ef4444; }
.dash-kpi-page .dash-kpi-trend-lemon { --trendAccent: #f0b86e; }

/* ---- Charts panel — compact ---- */
.dash-kpi-page .dash-kpi-chart-grid { gap: 14px; }
.dash-kpi-page .dash-kpi-panel {
  padding: 16px 18px;
  border-radius: 16px;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  backdrop-filter: none;
}
.dash-kpi-page .dash-kpi-chart-wrap { height: 260px; min-height: 220px; }
.dash-kpi-page .dash-kpi-panel-head p { font-size: 11.5px; }
.dash-kpi-page .dash-kpi-funnel-row { font-size: 12px; }
.dash-kpi-page .dash-kpi-funnel-row strong { font-size: 14px; font-weight: 800; }
.dash-kpi-page .dash-kpi-funnel-conv {
  font-size: 10.5px;
  padding: 2px 8px;
  background: var(--pastel-lilac);
  color: #6d50d4;
  font-weight: 700;
}
.dash-kpi-page .dash-kpi-funnel-row i { height: 8px; }
.dash-kpi-page .dash-kpi-insight {
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
  background: linear-gradient(180deg, rgba(245,158,11,.09), var(--surface-2));
  box-shadow: inset -3px 0 0 #f59e0b;
  color: var(--text);
}

/* ---- Domain health matrix — mc-style ---- */
.dash-kpi-page .dash-kpi-health-grid { gap: 12px; }
.dash-kpi-page .dash-kpi-health {
  padding: 12px 14px;
  gap: 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-health-ring { width: 52px; height: 52px; font-size: 13px; }
.dash-kpi-page .dash-kpi-health h3 { font-size: 13px; font-weight: 700; }
.dash-kpi-page .dash-kpi-health p  { font-size: 11px; font-weight: 500; }

/* ---- Goal tracker ---- */
.dash-kpi-page .dash-kpi-goal-list { gap: 12px; }
.dash-kpi-page .dash-kpi-goal {
  padding: 14px 16px;
  border-radius: 14px;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-goal::before { width: 3px; }
.dash-kpi-page .dash-kpi-goal-head h3 { font-size: 13px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.dash-kpi-page .dash-kpi-goal-head b { font-size: 18px; font-weight: 800; letter-spacing: -.4px; }
.dash-kpi-page .dash-kpi-goal .dash-kpi-catbadge {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--pastel-sky);
  color: #3b5998;
}
.dash-kpi-page .dash-kpi-goal-mint  .dash-kpi-catbadge { background: var(--pastel-mint);  color: #2f8a5e; }
.dash-kpi-page .dash-kpi-goal-lilac .dash-kpi-catbadge { background: var(--pastel-lilac); color: #6d50d4; }
.dash-kpi-page .dash-kpi-goal-peach .dash-kpi-catbadge { background: var(--pastel-peach); color: #c46920; }
.dash-kpi-page .dash-kpi-goal-rose  .dash-kpi-catbadge { background: var(--pastel-rose);  color: #b14458; }
.dash-kpi-page .dash-kpi-goal-lemon .dash-kpi-catbadge { background: var(--pastel-lemon); color: #a37919; }
.dash-kpi-page .dash-kpi-goal-bar { height: 6px; }
.dash-kpi-page .dash-kpi-goal-meta { font-size: 10.5px; gap: 6px; }
.dash-kpi-page .dash-kpi-goal-meta b { font-size: 11.5px; }

/* Goal accent softer */
.dash-kpi-page .dash-kpi-goal-mint  { --goalAccent: #10b981; }
.dash-kpi-page .dash-kpi-goal-sky   { --goalAccent: var(--brand-500); }
.dash-kpi-page .dash-kpi-goal-lilac { --goalAccent: #6fb98f; }
.dash-kpi-page .dash-kpi-goal-peach { --goalAccent: #f59e0b; }
.dash-kpi-page .dash-kpi-goal-rose  { --goalAccent: #ef4444; }
.dash-kpi-page .dash-kpi-goal-lemon { --goalAccent: #f0b86e; }

/* ---- Movers list ---- */
.dash-kpi-page .dash-kpi-movers-grid { gap: 14px; }
.dash-kpi-page .dash-kpi-movers { padding: 16px 18px; }
.dash-kpi-page .dash-kpi-movers ul { gap: 6px; }
.dash-kpi-page .dash-kpi-movers li {
  padding: 10px 12px;
  border-radius: 12px;
  gap: 10px;
  background: var(--surface-2);
  border: none;
  grid-template-columns: 24px 1fr auto auto;
}
.dash-kpi-page .dash-kpi-movers li:hover { background: var(--surface-3); }
.dash-kpi-page .dash-kpi-movers li b {
  width: 22px; height: 22px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(111,185,143,0.14);
  color: var(--brand-700);
}
.dash-kpi-page .dash-kpi-movers li strong { font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.dash-kpi-page .dash-kpi-movers li span:not(.dash-kpi-mover-delta) { font-size: 10.5px; font-weight: 500; }
.dash-kpi-page .dash-kpi-movers li em { font-size: 12px; font-weight: 800; letter-spacing: -.3px; }
.dash-kpi-page .dash-kpi-mover-delta {
  font-size: 10.5px;
  padding: 3px 9px;
  font-weight: 800;
  border-radius: 999px;
}
.dash-kpi-page .dash-kpi-mover-delta.up   { background: var(--green-50); color: #2f8a5e; }
.dash-kpi-page .dash-kpi-mover-delta.down { background: var(--red-50);   color: #b14458; }
.dash-kpi-page .dash-kpi-movers-up   { border-top: 2px solid #10b981; }
.dash-kpi-page .dash-kpi-movers-down { border-top: 2px solid #ef4444; }

/* ---- Spotlight — compact hero banner ---- */
.dash-kpi-page .dash-kpi-spotlight {
  padding: 20px 22px;
  border-radius: 18px;
  gap: 20px;
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,0.18), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,0.14), transparent 46%),
    linear-gradient(135deg, var(--surface), var(--surface-2)) !important;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-spot-copy > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--brand-700);
}
.dash-kpi-page .dash-kpi-spot-copy h2 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.3px;
  margin: 4px 0 0;
}
.dash-kpi-page .dash-kpi-spot-copy p { font-size: 12.5px; line-height: 1.75; font-weight: 500; color: var(--text-muted); }
.dash-kpi-page .dash-kpi-spot-main { gap: 10px; }
.dash-kpi-page .dash-kpi-spot-main strong { font-size: 28px; font-weight: 800; letter-spacing: -1px; }
.dash-kpi-page .dash-kpi-spot-main em {
  font-size: 11.5px;
  padding: 4px 10px;
  background: var(--green-50);
  color: #2f8a5e;
  font-weight: 800;
}
.dash-kpi-page .dash-kpi-spot-action {
  padding: 12px 14px;
  border-radius: 12px;
  gap: 4px;
  background: rgba(255,255,255,0.55);
  border: 1px dashed rgba(111,185,143,0.32);
}
.dash-kpi-page .dash-kpi-spot-action b { font-size: 11.5px; }
.dash-kpi-page .dash-kpi-spot-action span { font-size: 12px; font-weight: 500; line-height: 1.6; }
.dash-kpi-page .dash-kpi-spot-contrib {
  padding: 14px;
  border-radius: 14px;
  gap: 8px;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--border);
}
.dash-kpi-page .dash-kpi-spot-contrib > span { font-size: 11px; }
.dash-kpi-page .dash-kpi-spot-contrib li {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-2);
}
.dash-kpi-page .dash-kpi-spot-contrib strong { font-size: 12px; font-weight: 700; }
.dash-kpi-page .dash-kpi-spot-contrib em { font-size: 11px; font-weight: 800; }

/* ---- Segment split cards ---- */
.dash-kpi-page .dash-kpi-segment-grid { gap: 12px; }
.dash-kpi-page .dash-kpi-segment {
  padding: 14px 16px;
  border-radius: 14px;
  gap: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.dash-kpi-page .dash-kpi-segment::before {
  content: '';
  position: absolute;
  top: -30px;
  inset-inline-end: -30px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--segSoft, var(--pastel-sky));
  filter: blur(36px);
  opacity: .5;
  pointer-events: none;
  z-index: -1;
}
.dash-kpi-page .dash-kpi-seg-head h3 { font-size: 13px; font-weight: 700; }
.dash-kpi-page .dash-kpi-seg-head b {
  padding: 2px 9px;
  font-size: 11px;
  background: color-mix(in srgb, var(--segSoft) 62%, var(--surface));
  font-weight: 700;
}
.dash-kpi-page .dash-kpi-segment > strong { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.dash-kpi-page .dash-kpi-seg-count { font-size: 11px; font-weight: 600; }
.dash-kpi-page .dash-kpi-seg-bar { height: 5px; margin-top: 2px; }
.dash-kpi-page .dash-kpi-segment p { font-size: 11px; line-height: 1.55; font-weight: 500; }

/* Segment accent softer */
.dash-kpi-page .dash-kpi-seg-mint  { --segAccent: #10b981; }
.dash-kpi-page .dash-kpi-seg-sky   { --segAccent: var(--brand-500); }
.dash-kpi-page .dash-kpi-seg-lilac { --segAccent: #6fb98f; }
.dash-kpi-page .dash-kpi-seg-lemon { --segAccent: #f0b86e; }
.dash-kpi-page .dash-kpi-seg-peach { --segAccent: #f59e0b; }

/* ---- SLA heatmap tighter ---- */
.dash-kpi-page .dash-kpi-heatmap { gap: 6px; grid-template-columns: 84px repeat(7, 1fr); }
.dash-kpi-page .dash-kpi-heatmap b,
.dash-kpi-page .dash-kpi-heatmap strong { font-size: 11px; font-weight: 700; }
.dash-kpi-page .dash-kpi-heatmap span { height: 28px; border-radius: 8px; }

/* ---- Risk table ---- */
.dash-kpi-page .dash-kpi-risk-list { gap: 8px; }
.dash-kpi-page .dash-kpi-risk-row {
  padding: 10px 12px;
  gap: 8px;
  border-radius: 12px;
  background: var(--surface-2);
  border: none;
}
.dash-kpi-page .dash-kpi-risk-row span { font-size: 10.5px; font-weight: 600; }
.dash-kpi-page .dash-kpi-risk-row strong { font-size: 12px; font-weight: 700; line-height: 1.5; }

/* ---- Automation impact ---- */
.dash-kpi-page .dash-kpi-automation {
  padding: 18px 20px;
  border-radius: 18px;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(221,214,254,.35), rgba(184,230,211,.20)),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-auto-stats { gap: 8px; margin-top: 12px; }
.dash-kpi-page .dash-kpi-auto-stats div {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.6);
}
.dash-kpi-page .dash-kpi-auto-stats strong { font-size: 17px; font-weight: 800; letter-spacing: -.4px; }
.dash-kpi-page .dash-kpi-auto-stats span { font-size: 10.5px; font-weight: 600; }
.dash-kpi-page .dash-kpi-donut { width: 160px; }
.dash-kpi-page .dash-kpi-donut span { font-size: 22px; font-weight: 800; }
.dash-kpi-page .dash-kpi-donut-legend { font-size: 11.5px; font-weight: 600; gap: 6px; }
.dash-kpi-page .dash-kpi-donut-legend span { gap: 6px; }
.dash-kpi-page .dash-kpi-donut-legend i { width: 8px; height: 8px; }

/* ---- AI Decision cards ---- */
.dash-kpi-page .dash-kpi-decision-grid { gap: 14px; }
.dash-kpi-page .dash-kpi-decision {
  padding: 14px 16px;
  border-radius: 14px;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.dash-kpi-page .dash-kpi-decision-num {
  width: 30px; height: 30px;
  border-radius: 10px;
  font-size: 13px;
  background: rgba(111,185,143,0.14);
  color: var(--brand-700);
}
.dash-kpi-page .dash-kpi-decision h3 { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.dash-kpi-page .dash-kpi-decision p  { font-size: 11.5px; font-weight: 500; line-height: 1.6; }
.dash-kpi-page .dash-kpi-decision > strong { font-size: 12px; font-weight: 800; }
.dash-kpi-page .dash-kpi-actions { gap: 6px; margin-top: 4px; }
.dash-kpi-page .dash-kpi-actions button {
  min-height: 30px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.dash-kpi-page .dash-kpi-actions button:hover {
  background: rgba(111,185,143,0.10);
  border-color: rgba(111,185,143,0.28);
  color: var(--text);
}

/* KPI page typography aligned with Mission-Control dashboard */
.dash-kpi-page,
.dash-kpi-page button {
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  letter-spacing: 0;
}

.dash-kpi-eyebrow,
.dash-kpi-section-head span,
.dash-kpi-panel-head span,
.dash-kpi-automation-copy > span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.dash-kpi-hero h1 {
  font-size: 24px;
  font-weight: 800;
  line-height: 1.45;
  color: var(--text);
}

.dash-kpi-hero p,
.dash-kpi-panel-head p {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.9;
  color: var(--text-muted);
}

.dash-kpi-mini span,
.dash-kpi-mini em,
.dash-kpi-card p,
.dash-kpi-health p,
.dash-kpi-risk-row span,
.dash-kpi-auto-stats span,
.dash-kpi-decision p,
.dash-kpi-insight,
.dash-kpi-donut-legend {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--text-muted);
}

.dash-kpi-mini strong,
.dash-kpi-value,
.dash-kpi-auto-stats strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.dash-kpi-section-head h2,
.dash-kpi-panel-head h3,
.dash-kpi-automation h2 {
  color: var(--text);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.55;
}

.dash-kpi-card h3,
.dash-kpi-health h3,
.dash-kpi-decision h3 {
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.dash-kpi-meta,
.dash-kpi-status,
.dash-kpi-chip,
.dash-kpi-funnel-row,
.dash-kpi-heatmap b,
.dash-kpi-heatmap strong,
.dash-kpi-risk-row strong,
.dash-kpi-decision > strong,
.dash-kpi-actions button {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.55;
}

.dash-kpi-meta,
.dash-kpi-status,
.dash-kpi-chip {
  color: var(--text-muted);
}

.dash-kpi-ring span {
  color: var(--text);
  font-size: 36px;
  font-weight: 800;
}

.dash-kpi-ring small,
.dash-kpi-ring b {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.65;
}

.dash-kpi-donut span {
  color: var(--text);
  font-size: 22px;
  font-weight: 800;
}

[data-theme="dark"] .dash-kpi-eyebrow,
[data-theme="dark"] .dash-kpi-section-head span,
[data-theme="dark"] .dash-kpi-panel-head span,
[data-theme="dark"] .dash-kpi-automation-copy > span,
[data-theme="dark"] .dash-kpi-decision > strong {
  color: var(--pastel-sky);
}

@media (max-width: 1180px) {
  .dash-kpi-snapshot,
  .dash-kpi-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-kpi-risk-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dash-kpi-hero,
  .dash-kpi-chart-grid,
  .dash-kpi-chart-grid-balanced,
  .dash-kpi-automation,
  .dash-kpi-decision-grid {
    grid-template-columns: 1fr;
  }
  .dash-kpi-hero-stats,
  .dash-kpi-auto-stats {
    grid-template-columns: 1fr;
  }
  .dash-kpi-radar {
    min-height: 300px;
  }
  .dash-kpi-donut {
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .dash-kpi-page {
    gap: 16px;
  }
  .dash-kpi-hero,
  .dash-kpi-panel,
  .dash-kpi-automation {
    border-radius: 18px;
    padding: 16px;
  }
  .dash-kpi-snapshot,
  .dash-kpi-health-grid {
    grid-template-columns: 1fr;
  }
  .dash-kpi-section-head,
  .dash-kpi-panel-head {
    align-items: start;
    flex-direction: column;
  }
  .dash-kpi-chip {
    white-space: normal;
  }
  .dash-kpi-chart-wrap {
    height: 280px;
  }
  .dash-kpi-heatmap {
    grid-template-columns: 76px repeat(7, minmax(18px, 1fr));
    gap: 6px;
  }
  .dash-kpi-heatmap span {
    height: 28px;
    border-radius: 8px;
  }
  .dash-kpi-risk-row {
    grid-template-columns: 1fr;
  }
}


/* Dashboard alerts & opportunities page */
.dash-alerts-page {
  display: grid;
  gap: 18px;
  direction: rtl;
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
}

.dash-alerts-hero,
.dash-alerts-panel,
.dash-alerts-summary,
.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-filterbar {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--surface-2) 78%, transparent)),
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--pastel-lilac) 26%, transparent), transparent 34%),
    radial-gradient(circle at 94% 96%, color-mix(in srgb, var(--pastel-mint) 22%, transparent), transparent 32%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.dash-alerts-hero {
  min-height: 360px;
  border-radius: 20px;
  padding: 22px;
  display: grid;
  grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr);
  gap: 22px;
  align-items: center;
  overflow: hidden;
}

.dash-alerts-radar {
  min-height: 300px;
  display: grid;
  place-items: center;
  position: relative;
  isolation: isolate;
}

.dash-alerts-radar::before {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 38px, color-mix(in srgb, var(--brand-500) 14%, transparent) 39px 40px),
    conic-gradient(from 120deg, color-mix(in srgb, var(--pastel-rose) 34%, transparent), color-mix(in srgb, var(--pastel-sky) 36%, transparent), color-mix(in srgb, var(--pastel-mint) 38%, transparent), color-mix(in srgb, var(--pastel-rose) 34%, transparent));
  animation: spinSlow 28s linear infinite;
  z-index: -1;
}

.dash-alerts-orb {
  width: 178px;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  text-align: center;
  background:
    radial-gradient(circle, var(--surface) 0 55%, transparent 56%),
    conic-gradient(var(--brand-500) calc(var(--score) * 1%), color-mix(in srgb, var(--border) 65%, transparent) 0);
  box-shadow: inset 0 0 0 1px var(--border), 0 18px 42px rgba(44, 120, 115, .16);
}

.dash-alerts-orb strong {
  font-size: 34px;
  line-height: 1;
  font-weight: 800;
}

.dash-alerts-orb span,
.dash-alerts-wave {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.dash-alerts-wave {
  position: absolute;
  padding: 6px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 76%, transparent);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}

.dash-alerts-wave.wave-1 { top: 38px; right: 36px; }
.dash-alerts-wave.wave-2 { bottom: 52px; right: 18px; }
.dash-alerts-wave.wave-3 { left: 24px; top: 118px; }

.dash-alerts-radar > .dash-alerts-sparkline {
  position: absolute;
  bottom: 22px;
  width: 70%;
  height: 38px;
}

.dash-alerts-hero-copy h1,
.dash-alerts-head h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.45;
}

.dash-alerts-hero-copy p,
.dash-alerts-summary p,
.dash-alerts-decision-card p,
.dash-alerts-opportunity p,
.dash-alerts-opportunity em,
.dash-alerts-ai-card p,
.dash-alerts-timeline p,
.dash-alerts-reason-list p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.85;
}

.dash-alerts-status-pill,
.dash-alerts-soft-chip,
.dash-alerts-head span,
.dash-alerts-card-head span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.dash-alerts-status-pill,
.dash-alerts-soft-chip {
  display: inline-flex;
  width: fit-content;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 38%, var(--surface));
  border: 1px solid var(--border);
}

.dash-alerts-hero-cards,
.dash-alerts-summary-grid,
.dash-alerts-opportunity-grid,
.dash-alerts-decision-grid {
  display: grid;
  gap: 12px;
}

.dash-alerts-hero-cards {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 20px;
}

.dash-alerts-mini {
  min-height: 104px;
  padding: 13px;
  border-radius: 15px;
  border: 1px solid var(--border);
  display: grid;
  gap: 3px;
}

.dash-alerts-mini span,
.dash-alerts-mini em,
.dash-alerts-metrics span,
.dash-alerts-op-meta span,
.dash-alerts-reason span,
.dash-alerts-actionline span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
}

.dash-alerts-mini strong,
.dash-alerts-summary > strong,
.dash-alerts-metrics strong,
.dash-alerts-op-meta strong,
.dash-alerts-ai-card strong {
  color: var(--text);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
}

.dash-alerts-mini-rose { background: color-mix(in srgb, var(--pastel-rose) 34%, var(--surface)); }
.dash-alerts-mini-mint { background: color-mix(in srgb, var(--pastel-mint) 36%, var(--surface)); }
.dash-alerts-mini-peach { background: color-mix(in srgb, var(--pastel-peach) 42%, var(--surface)); }
.dash-alerts-mini-sky { background: color-mix(in srgb, var(--pastel-sky) 36%, var(--surface)); }

.dash-alerts-section,
.dash-alerts-decisions {
  display: grid;
  gap: 12px;
}

.dash-alerts-head,
.dash-alerts-card-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.dash-alerts-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.dash-alerts-summary {
  border-radius: 17px;
  padding: 15px;
  display: grid;
  gap: 8px;
  min-height: 214px;
  animation: slideUp .4s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.dash-alerts-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dash-alerts-summary-top i {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--pastel-sky) 42%, var(--surface));
  font-style: normal;
  font-weight: 800;
}

.dash-alerts-summary-top b,
.dash-alerts-card-head b,
.dash-alerts-timeline b,
.dash-alerts-ai-card > b {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-peach) 42%, var(--surface));
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.dash-alerts-good .dash-alerts-summary-top b,
.dash-alerts-opportunity .dash-alerts-card-head b {
  background: color-mix(in srgb, var(--pastel-mint) 44%, var(--surface));
}

.dash-alerts-summary h3,
.dash-alerts-card-head h3,
.dash-alerts-ai-card h3,
.dash-alerts-timeline h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.65;
}

.dash-alerts-sparkline {
  width: 100%;
  height: 38px;
}

.dash-alerts-sparkline path {
  fill: none;
  stroke: var(--brand-500);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dash-alerts-filterbar {
  border-radius: 16px;
  padding: 12px;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.dash-alerts-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-alerts-filters button,
.dash-alerts-actions button,
.dash-alerts-sort select {
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

.dash-alerts-filters button.active {
  background: color-mix(in srgb, var(--brand-500) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--brand-500) 34%, var(--border));
}

.dash-alerts-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.dash-alerts-alert-list {
  display: grid;
  gap: 12px;
}

.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-panel {
  border-radius: 17px;
  padding: 16px;
  display: grid;
  gap: 12px;
  animation: slideUp .42s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.dash-alerts-decision-card {
  border-inline-start: 4px solid color-mix(in srgb, var(--pastel-rose) 88%, var(--red-500));
}

.dash-alerts-sev-medium {
  border-inline-start-color: color-mix(in srgb, var(--pastel-peach) 80%, var(--amber-500));
}

.dash-alerts-metrics,
.dash-alerts-op-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.dash-alerts-metrics div,
.dash-alerts-op-meta div,
.dash-alerts-reason,
.dash-alerts-actionline {
  padding: 10px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
  display: grid;
  gap: 2px;
}

.dash-alerts-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dash-alerts-actions button:hover,
.dash-alerts-filters button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.dash-alerts-opportunity-grid {
  grid-template-columns: repeat(3, minmax(260px, 1fr));
}

.dash-alerts-opportunity {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-mint) 24%, var(--surface)), color-mix(in srgb, var(--pastel-sky) 18%, var(--surface)));
}

.dash-alerts-grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}

.dash-alerts-chart-wrap {
  height: 330px;
  position: relative;
}

.dash-alerts-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}

.dash-alerts-matrix {
  min-height: 330px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background:
    linear-gradient(90deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-rose) 16%, var(--surface)), color-mix(in srgb, var(--pastel-mint) 18%, var(--surface)));
  border: 1px solid var(--border);
}

.matrix-zone,
.matrix-label {
  position: absolute;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.z1 { top: 12px; right: 14px; }
.z2 { top: 12px; left: 14px; }
.z3 { bottom: 12px; right: 14px; }
.z4 { bottom: 12px; left: 14px; }
.label-top { top: 50%; right: 8px; transform: rotate(-90deg) translateX(50%); transform-origin: right center; }
.label-bottom { bottom: 8px; right: 50%; transform: translateX(50%); }

.dash-alerts-bubble {
  position: absolute;
  right: calc(var(--x) - 22px);
  top: calc(var(--y) - 22px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--pastel-rose) 62%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-500) 12%, transparent);
}

.dash-alerts-bubble-opportunity {
  background: color-mix(in srgb, var(--pastel-mint) 68%, var(--surface));
}

.dash-alerts-bubble span {
  position: absolute;
  right: 50%;
  top: calc(100% + 4px);
  transform: translateX(50%);
  width: 112px;
  color: var(--text-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
}

.dash-alerts-timeline {
  display: grid;
  gap: 10px;
}

.dash-alerts-timeline article {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface-2) 62%, transparent);
}

.dash-alerts-timeline time {
  color: var(--brand-600);
  font-weight: 800;
}

.dash-alerts-reason-list {
  display: grid;
  gap: 10px;
}

.dash-alerts-reason-list div {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pastel-lilac) 22%, var(--surface));
}

.dash-alerts-reason-list span,
.dash-alerts-ai-num {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--brand-500) 16%, var(--surface));
  color: var(--text);
  font-weight: 800;
}

.dash-alerts-decision-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-alerts-ai-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 30%, var(--surface)), color-mix(in srgb, var(--surface) 80%, transparent)),
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 38%);
}

[data-theme="dark"] .dash-alerts-status-pill,
[data-theme="dark"] .dash-alerts-soft-chip {
  color: var(--pastel-sky);
}

@media (max-width: 1180px) {
  .dash-alerts-summary-grid,
  .dash-alerts-opportunity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dash-alerts-hero,
  .dash-alerts-grid-2,
  .dash-alerts-decision-grid {
    grid-template-columns: 1fr;
  }
  .dash-alerts-hero-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dash-alerts-metrics,
  .dash-alerts-op-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .dash-alerts-page {
    gap: 14px;
  }
  .dash-alerts-hero,
  .dash-alerts-panel,
  .dash-alerts-decision-card,
  .dash-alerts-opportunity,
  .dash-alerts-ai-card,
  .dash-alerts-filterbar {
    padding: 14px;
    border-radius: 16px;
  }
  .dash-alerts-summary-grid,
  .dash-alerts-opportunity-grid,
  .dash-alerts-hero-cards,
  .dash-alerts-metrics,
  .dash-alerts-op-meta {
    grid-template-columns: 1fr;
  }
  .dash-alerts-filterbar,
  .dash-alerts-head,
  .dash-alerts-card-head {
    align-items: start;
    flex-direction: column;
  }
  .dash-alerts-radar {
    min-height: 270px;
  }
  .dash-alerts-timeline article {
    grid-template-columns: 1fr;
  }
}

/* Alerts page: align typography and color system with Mission-Control overview */
.dash-alerts-page,
.dash-alerts-page button,
.dash-alerts-page select {
  font-family: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: var(--text);
  letter-spacing: 0;
}

.dash-alerts-hero,
.dash-alerts-panel,
.dash-alerts-summary,
.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-filterbar {
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,.11), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.08), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, transparent), color-mix(in srgb, var(--surface-2) 76%, transparent));
  border-color: var(--border);
  box-shadow: var(--shadow);
}

.dash-alerts-hero {
  min-height: 300px;
  padding: 18px 22px;
  border-radius: 18px;
  grid-template-columns: 220px 1fr;
}

.dash-alerts-radar {
  min-height: 230px;
}

.dash-alerts-radar::before {
  width: 220px;
  height: 220px;
  background:
    repeating-radial-gradient(circle, transparent 0 31px, rgba(44,120,115,.13) 32px 33px),
    conic-gradient(from 120deg, rgba(232,120,140,.10), rgba(44,120,115,.14), rgba(109,191,143,.12), rgba(232,120,140,.10));
}

.dash-alerts-orb {
  width: 142px;
  background:
    radial-gradient(circle, var(--surface) 0 56%, transparent 57%),
    conic-gradient(var(--brand-500) calc(var(--score) * 1%), color-mix(in srgb, var(--border) 68%, transparent) 0);
}

.dash-alerts-orb strong {
  font-size: 24px;
  font-weight: 800;
}

.dash-alerts-orb span,
.dash-alerts-wave,
.dash-alerts-status-pill,
.dash-alerts-soft-chip,
.dash-alerts-head span,
.dash-alerts-card-head span,
.dash-alerts-mini span,
.dash-alerts-mini em,
.dash-alerts-metrics span,
.dash-alerts-op-meta span,
.dash-alerts-reason span,
.dash-alerts-actionline span,
.dash-alerts-timeline p,
.dash-alerts-reason-list p,
.dash-alerts-summary p,
.dash-alerts-decision-card p,
.dash-alerts-opportunity p,
.dash-alerts-opportunity em,
.dash-alerts-ai-card p {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.75;
}

.dash-alerts-wave {
  background: rgba(255,255,255,.52);
  border-color: var(--border);
  box-shadow: var(--shadow-xs);
}

[data-theme="dark"] .dash-alerts-wave {
  background: rgba(15,29,63,.68);
}

.dash-alerts-wave.wave-1 { top: 28px; right: 18px; }
.dash-alerts-wave.wave-2 { bottom: 38px; right: 10px; }
.dash-alerts-wave.wave-3 { left: 8px; top: 96px; }

.dash-alerts-radar > .dash-alerts-sparkline {
  bottom: 16px;
  height: 34px;
}

.dash-alerts-hero-copy h1 {
  margin: 6px 0 2px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--text);
}

.dash-alerts-hero-copy p {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.dash-alerts-head h2 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
  color: var(--text);
}

.dash-alerts-status-pill,
.dash-alerts-soft-chip {
  background: rgba(255,255,255,.52);
  color: var(--text-muted);
  border-color: var(--border);
}

[data-theme="dark"] .dash-alerts-status-pill,
[data-theme="dark"] .dash-alerts-soft-chip {
  background: rgba(15,29,63,.68);
  color: var(--text-muted);
}

.dash-alerts-hero-cards {
  gap: 8px;
  margin-top: 14px;
}

.dash-alerts-mini {
  min-height: 88px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.48);
}

[data-theme="dark"] .dash-alerts-mini {
  background: rgba(15,29,63,.62);
}

.dash-alerts-mini-rose,
.dash-alerts-sev-urgent,
.dash-alerts-sev-high {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-rose) 18%, var(--surface)), color-mix(in srgb, var(--surface) 86%, transparent));
}

.dash-alerts-mini-peach,
.dash-alerts-sev-medium {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-peach) 22%, var(--surface)), color-mix(in srgb, var(--surface) 86%, transparent));
}

.dash-alerts-mini-mint,
.dash-alerts-opportunity {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-mint) 18%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  align-content: start;
}

.dash-alerts-opportunity .dash-alerts-card-head {
  align-items: start;
}

.dash-alerts-opportunity .dash-alerts-card-head h3 {
  max-width: 100%;
}

.dash-alerts-opportunity .dash-alerts-card-head b {
  flex: 0 0 auto;
}

.dash-alerts-opportunity .dash-alerts-op-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-alerts-opportunity .dash-alerts-op-meta div {
  min-width: 0;
  align-content: start;
  padding: 9px 10px;
}

.dash-alerts-opportunity .dash-alerts-op-meta span {
  white-space: normal;
}

.dash-alerts-opportunity .dash-alerts-op-meta strong {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  font-size: 14px;
  line-height: 1.65;
}

.dash-alerts-mini-sky {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-sky) 18%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
}

.dash-alerts-mini strong,
.dash-alerts-summary > strong,
.dash-alerts-metrics strong,
.dash-alerts-op-meta strong,
.dash-alerts-ai-card strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
}

.dash-alerts-summary-grid {
  gap: 10px;
}

.dash-alerts-summary {
  min-height: 188px;
  padding: 13px;
  border-radius: 14px;
}

.dash-alerts-summary h3,
.dash-alerts-card-head h3,
.dash-alerts-ai-card h3,
.dash-alerts-timeline h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.65;
}

.dash-alerts-summary-top i {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(44,120,115,.10);
  color: var(--text);
  font-size: 12px;
}

.dash-alerts-summary-top b,
.dash-alerts-card-head b,
.dash-alerts-timeline b,
.dash-alerts-ai-card > b {
  background: rgba(240,184,110,.16);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 800;
}

.dash-alerts-good .dash-alerts-summary-top b,
.dash-alerts-opportunity .dash-alerts-card-head b {
  background: rgba(109,191,143,.16);
}

.dash-alerts-sparkline {
  height: 34px;
}

.dash-alerts-sparkline path {
  stroke: var(--brand-500);
  stroke-width: 2.4;
  opacity: .86;
}

.dash-alerts-filterbar {
  padding: 10px;
  border-radius: 14px;
}

.dash-alerts-filters button,
.dash-alerts-actions button,
.dash-alerts-sort select {
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 9px;
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 700;
}

.dash-alerts-actions button {
  background: var(--surface);
  color: var(--text);
}

.dash-alerts-filters button.active {
  color: var(--text);
  background: rgba(44,120,115,.12);
  border-color: rgba(44,120,115,.24);
}

.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-panel {
  padding: 14px;
  border-radius: 14px;
}

.dash-alerts-decision-card {
  border-inline-start-width: 3px;
  border-inline-start-color: rgba(232,120,140,.48);
}

.dash-alerts-sev-medium {
  border-inline-start-color: rgba(240,184,110,.55);
}

.dash-alerts-metrics,
.dash-alerts-op-meta {
  gap: 8px;
}

.dash-alerts-metrics div,
.dash-alerts-op-meta div,
.dash-alerts-reason,
.dash-alerts-actionline,
.dash-alerts-timeline article,
.dash-alerts-reason-list div {
  background: color-mix(in srgb, var(--surface-2) 54%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  border-radius: 12px;
}

.dash-alerts-matrix {
  background:
    linear-gradient(90deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 82%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
}

.dash-alerts-bubble {
  background: rgba(232,120,140,.28);
  border-color: rgba(232,120,140,.26);
}

.dash-alerts-bubble-opportunity {
  background: rgba(109,191,143,.30);
  border-color: rgba(109,191,143,.28);
}

.dash-alerts-chart-wrap {
  height: 310px;
}

.dash-alerts-ai-card {
  background:
    radial-gradient(circle at 0 0, rgba(44,120,115,.10), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 16%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
}

.dash-alerts-ai-num,
.dash-alerts-reason-list span {
  background: rgba(44,120,115,.12);
  color: var(--text);
  font-size: 12px;
}

@media (max-width: 900px) {
  .dash-alerts-hero {
    grid-template-columns: 1fr;
  }
}

/* Alerts summary cards should mirror the KPI card language */
.dash-alerts-summary-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
}

.dash-alerts-summary {
  min-height: 250px;
  padding: 17px;
  border-radius: 18px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 90%, transparent), color-mix(in srgb, var(--surface-2) 82%, transparent)),
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--pastel-lilac) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--pastel-sky) 18%, transparent), transparent 34%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  backdrop-filter: blur(16px);
}

.dash-alerts-summary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.dash-alerts-summary-top {
  align-items: start;
}

.dash-alerts-summary-top i {
  order: 2;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pastel-sky) 34%, var(--surface));
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
}

.dash-alerts-summary-top b {
  order: 1;
  min-width: 44px;
  min-height: 36px;
  display: inline-grid;
  place-items: center;
  padding: 7px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-peach) 40%, var(--surface));
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.dash-alerts-good .dash-alerts-summary-top b {
  background: color-mix(in srgb, var(--pastel-mint) 40%, var(--surface));
}

.dash-alerts-summary h3 {
  margin-top: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.dash-alerts-summary > strong {
  color: var(--text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.25;
}

.dash-alerts-summary p {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.8;
}

.dash-alerts-summary .dash-alerts-sparkline {
  align-self: end;
  height: 42px;
}

.dash-alerts-summary .dash-alerts-sparkline path {
  stroke: var(--brand-500);
  stroke-width: 3;
  opacity: .86;
  filter: drop-shadow(0 4px 6px rgba(44, 120, 115, .14));
}

.dash-alerts-summary .dash-alerts-sparkline {
  display: none;
}

@media (max-width: 1180px) {
  .dash-alerts-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dash-alerts-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .dash-alerts-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* Alerts radar readability fix */
.dash-alerts-radar {
  padding: 18px 24px 48px;
  overflow: visible;
}

.dash-alerts-orb {
  position: relative;
  z-index: 2;
}

.dash-alerts-orb span {
  width: 92px;
  line-height: 1.45;
  text-align: center;
  display: block;
}

.dash-alerts-wave {
  z-index: 3;
  white-space: nowrap;
  color: var(--text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.4;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
}

.dash-alerts-wave.wave-1 { top: 18px; right: 4px; }
.dash-alerts-wave.wave-2 { bottom: 22px; right: 12px; }
.dash-alerts-wave.wave-3 { left: 0; top: 88px; }

.dash-alerts-radar > .dash-alerts-sparkline {
  bottom: 4px;
  width: 62%;
  height: 32px;
  z-index: 1;
  opacity: .78;
}

@media (max-width: 640px) {
  .dash-alerts-wave.wave-1 { top: 14px; right: 2px; }
  .dash-alerts-wave.wave-2 { bottom: 18px; right: 8px; }
  .dash-alerts-wave.wave-3 { left: 0; top: 92px; }
}

/* Alerts buttons: match Mission-Control hover behavior */
.dash-alerts-filters button,
.dash-alerts-actions button,
.dash-alerts-sort select {
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  background: var(--surface);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  box-shadow: var(--shadow-xs);
}

.dash-alerts-filters button:hover,
.dash-alerts-actions button:hover {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 70%, var(--text-muted) 12%);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.dash-alerts-filters button:active,
.dash-alerts-actions button:active {
  transform: translateY(0) scale(.98);
  box-shadow: var(--shadow-xs);
}

.dash-alerts-filters button.active {
  color: var(--text);
  font-weight: 800;
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 62%, var(--text-muted) 16%);
  box-shadow: var(--shadow-sm);
}

.dash-alerts-filters button.active:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--border) 58%, var(--text-muted) 18%);
}

/* Reuse overview smart-alert button language on both new dashboard pages */
.dash-alerts-actions button,
.dash-kpi-actions button {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  min-height: 32px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  transition: all .2s ease;
  transform: none;
}

.dash-alerts-actions button:hover,
.dash-kpi-actions button:hover {
  background: var(--brand-500);
  color: #fff;
  border-color: var(--brand-500);
  box-shadow: none;
  transform: none;
}

.dash-alerts-actions button:active,
.dash-kpi-actions button:active {
  transform: scale(.98);
}

/* Alerts semantic color tuning */
.dash-alerts-summary {
  position: relative;
  overflow: hidden;
  text-align: center;
  align-items: center;
  justify-items: center;
  grid-template-rows: auto auto auto 1fr auto;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
  border: 1px solid var(--border);
  border-inline-end: 4px solid var(--green-500);
}

.dash-alerts-summary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--pastel-mint) 30%, transparent), transparent 58%);
  opacity: .42;
  pointer-events: none;
}

.dash-alerts-warning {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
  border-inline-end-color: var(--amber-500);
}

.dash-alerts-good {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface-2) 74%, transparent));
  border-inline-end-color: var(--green-500);
}

.dash-alerts-warning::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pastel-peach) 38%, transparent), transparent 58%);
}

.dash-alerts-good::before {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pastel-mint) 34%, transparent), transparent 58%);
}

.dash-alerts-summary > * {
  position: relative;
  z-index: 1;
}

.dash-alerts-warning .dash-alerts-summary-top i {
  background: color-mix(in srgb, var(--pastel-peach) 62%, var(--surface));
}

.dash-alerts-good .dash-alerts-summary-top i {
  background: color-mix(in srgb, var(--pastel-mint) 58%, var(--surface));
}

.dash-alerts-warning .dash-alerts-sparkline path {
  stroke: var(--amber-500);
}

.dash-alerts-good .dash-alerts-sparkline path {
  stroke: var(--green-500);
}

.dash-alerts-summary-top {
  width: 100%;
  justify-content: center;
  gap: 16px;
}

.dash-alerts-summary-top i {
  order: 1;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 16px;
  display: grid;
}

.dash-alerts-summary-top b {
  order: 2;
  min-width: 48px;
  min-height: 36px;
  padding: 7px 12px;
}

.dash-alerts-summary h3 {
  margin-top: 6px;
  text-align: center;
  font-size: 15px;
  line-height: 1.55;
}

.dash-alerts-summary > strong {
  text-align: center;
  font-size: 26px;
  line-height: 1.2;
}

.dash-alerts-summary p {
  text-align: center;
  font-size: 13px;
  line-height: 1.75;
  max-width: 150px;
}

/* Compact executive brief cards: closer to the business overview density */
.dash-alerts-summary-grid {
  gap: 12px;
}

.dash-alerts-summary {
  min-height: 172px;
  padding: 14px 13px;
  gap: 7px;
  grid-template-rows: auto auto auto 1fr;
  border-radius: 16px;
}

.dash-alerts-summary-top {
  justify-content: center;
  gap: 0;
}

.dash-alerts-summary-top i {
  display: none;
}

.dash-alerts-summary-top b {
  min-width: 40px;
  min-height: 28px;
  padding: 4px 10px;
  font-size: 10.5px;
}

.dash-alerts-summary h3 {
  margin-top: 3px;
  font-size: 13px;
  line-height: 1.45;
}

.dash-alerts-summary > strong {
  font-size: 22px;
  line-height: 1.15;
}

.dash-alerts-summary p {
  font-size: 11.5px;
  line-height: 1.65;
  max-width: 132px;
}

.dash-alerts-sev-urgent {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-rose) 30%, var(--surface)), color-mix(in srgb, var(--surface) 86%, transparent));
  border-inline-start-color: color-mix(in srgb, var(--red-500) 58%, var(--pastel-rose));
}

/* =========================================================================
   QUICK MANAGER REPORT — Executive Daily Brief (dash-report-* namespace)
   Aligned with Mission-Control dashboard theme: soft indigo + pastels,
   16px radius, 22px padding, --brand-500 primary, matches .card / .kpi vibe.
   ========================================================================= */
.dash-report-page {
  display: grid;
  gap: 16px;
  color: var(--text);
}

/* Every panel/card in the report shares the .card baseline */
.dash-report-hero,
.dash-report-summary-card,
.dash-report-brief-card,
.dash-report-stat-card,
.dash-report-timeline,
.dash-report-channel-card,
.dash-report-chart-card,
.dash-report-ai-note,
.dash-report-action-card,
.dash-report-domain-card,
.dash-report-team-card,
.dash-report-finance-card,
.dash-report-links-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .25s cubic-bezier(.22,.7,.16,1), box-shadow .25s ease, border-color .2s ease;
}

/* ---------- Hero (mirrors .dash-mc-hero — compact, soft lilac→cyan glow) ---------- */
.dash-report-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .85fr);
  gap: 22px;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,.16), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.12), transparent 46%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--pastel-lilac) 8%));
  animation: slideUp .5s ease both;
}

.dash-report-hero::before {
  content: "";
  position: absolute;
  inset: auto -60px -100px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,120,115,.10), transparent 68%);
  pointer-events: none;
}

.dash-report-hero-copy,
.dash-report-hero-mark {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.dash-report-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.dash-report-eyebrow span {
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface));
  color: var(--brand-700);
  font-weight: 800;
}

.dash-report-eyebrow b {
  color: var(--text-muted);
  font-weight: 700;
}

.dash-report-hero h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--text);
}

.dash-report-hero p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.dash-report-actions,
.dash-report-periods {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dash-report-actions { margin-top: 16px; }
.dash-report-periods { margin-top: 12px; }

.dash-report-btn,
.dash-report-periods button,
.dash-report-action-card button {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s, transform .2s;
}

.dash-report-btn:hover,
.dash-report-periods button:hover,
.dash-report-action-card button:hover {
  color: var(--brand-700);
  border-color: var(--brand-300);
  background: color-mix(in srgb, var(--surface) 88%, var(--pastel-lilac) 12%);
}

.dash-report-btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-color: var(--brand-600);
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(44,120,115,.45);
}

.dash-report-btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
  border-color: var(--brand-700);
}

.dash-report-periods button { min-width: 68px; border-radius: 999px; padding: 5px 12px; }
.dash-report-periods .active {
  background: color-mix(in srgb, var(--surface) 82%, var(--pastel-sky) 18%);
  color: var(--brand-700);
  border-color: var(--brand-300);
  font-weight: 800;
}

.dash-report-hero-mark {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 14px;
  align-items: center;
}

.dash-report-hero-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(111,185,143,.25), transparent 60%),
    linear-gradient(135deg, var(--brand-500), var(--purple-500));
  box-shadow: 0 12px 28px -14px rgba(44,120,115,.55);
  color: #fff;
  font-size: 34px;
  animation: float 4s ease-in-out infinite;
}

.dash-report-status-strip {
  display: grid;
  gap: 8px;
}

.dash-report-status-strip span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 62%, var(--pastel-sky) 12%);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.dash-report-status-strip b {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
}

.dash-report-status-strip span.dash-report-tone-mint  { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-mint) 18%); }
.dash-report-status-strip span.dash-report-tone-rose  { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-rose) 20%); }
.dash-report-status-strip span.dash-report-tone-cyan  { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-sky) 20%); }
.dash-report-status-strip span.dash-report-tone-lilac { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-lilac) 20%); }
.dash-report-status-strip span.dash-report-tone-peach { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-peach) 22%); }
.dash-report-status-strip span.dash-report-tone-blue  { background: color-mix(in srgb, var(--surface) 55%, var(--pastel-sky) 18%); }

/* ---------- Section head (mirrors .card-head) ---------- */
.dash-report-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.dash-report-section-head span,
.dash-report-ai-note > div:first-child span {
  display: block;
  color: var(--brand-500);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.dash-report-section-head h2,
.dash-report-ai-note h2 {
  margin: 4px 0 0;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.4;
}

.dash-report-section-head > b {
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface));
  color: var(--brand-700);
  font-size: 11px;
  font-weight: 800;
}

/* ---------- Domain traffic lights (8 domains, fluid grid) ---------- */
.dash-report-domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dash-report-domain-card {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 8px;
  padding: 14px 15px 14px;
  overflow: hidden;
  position: relative;
  animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  text-decoration: none;
}

.dash-report-domain-card::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--dash-report-tone-fg);
  border-radius: 3px 0 0 3px;
  opacity: .55;
}

.dash-report-domain-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--dash-report-tone-fg) 30%, transparent);
}

.dash-report-domain-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-report-domain-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 65%, var(--surface));
  font-size: 17px;
}

.dash-report-domain-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.015em;
}

.dash-report-domain-head em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-report-tone-fg);
}

.dash-report-domain-score {
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.dash-report-domain-score strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--text);
}

.dash-report-domain-score span {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 500;
}

.dash-report-domain-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  overflow: hidden;
}

.dash-report-domain-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-report-tone-fg), color-mix(in srgb, var(--dash-report-tone-fg) 70%, #fff));
}

.dash-report-domain-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
}

/* ---------- Summary cards (6 cards) — mirrors .kpi tint style ---------- */
.dash-report-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.dash-report-summary-card {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  min-height: 200px;
  padding: 14px 16px 16px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--surface) 60%, color-mix(in srgb, var(--dash-report-tone-bg) 40%, var(--surface)) 100%);
  animation: popIn .55s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.dash-report-summary-card::before {
  content: '';
  position: absolute;
  top: -30px; inset-inline-end: -30px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--dash-report-tone-bg);
  filter: blur(40px);
  opacity: .5;
  pointer-events: none;
  transition: opacity .3s ease, transform .4s cubic-bezier(.22,.7,.16,1);
  z-index: 0;
}

.dash-report-summary-card > * { position: relative; z-index: 1; }

.dash-report-summary-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-strong);
  box-shadow: 0 18px 36px -10px color-mix(in srgb, var(--dash-report-tone-fg) 25%, transparent);
}

.dash-report-summary-card:hover::before {
  opacity: .8;
  transform: scale(1.15);
}

.dash-report-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-report-summary-top span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 55%, var(--surface));
  font-size: 20px;
}

.dash-report-summary-top b,
.dash-report-channel-card b,
.dash-report-timeline-item em {
  padding: 4px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 45%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
}

.dash-report-summary-card h3,
.dash-report-channel-card span,
.dash-report-action-card h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.dash-report-summary-card > strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1.15;
  color: var(--text);
}

.dash-report-summary-card p,
.dash-report-channel-card p,
.dash-report-action-card p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.65;
}

.dash-report-spark { width: 100%; height: 30px; }

.dash-report-spark path {
  fill: none;
  stroke: var(--dash-report-tone-fg);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .82;
}

/* ---------- Tone map — uses panel pastel vars (not raw hex) ---------- */
.dash-report-tone-blue  { --dash-report-tone-bg: var(--pastel-sky);   --dash-report-tone-fg: var(--brand-500); }
.dash-report-tone-cyan  { --dash-report-tone-bg: #d1eef5;             --dash-report-tone-fg: #4b93a8; }
.dash-report-tone-mint  { --dash-report-tone-bg: var(--pastel-mint);  --dash-report-tone-fg: var(--green-500); }
.dash-report-tone-peach { --dash-report-tone-bg: var(--pastel-peach); --dash-report-tone-fg: var(--accent-600); }
.dash-report-tone-rose  { --dash-report-tone-bg: var(--pastel-rose);  --dash-report-tone-fg: var(--red-500); }
.dash-report-tone-lilac { --dash-report-tone-bg: var(--pastel-lilac); --dash-report-tone-fg: var(--purple-500); }
.dash-report-tone-lemon { --dash-report-tone-bg: var(--pastel-lemon); --dash-report-tone-fg: #a37919; }

/* ---------- Brief (prose + quick stats) ---------- */
.dash-report-brief-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 16px;
  align-items: start;
}

.dash-report-brief-card,
.dash-report-stat-card,
.dash-report-timeline,
.dash-report-chart-card,
.dash-report-ai-note,
.dash-report-team-card,
.dash-report-finance-card,
.dash-report-links-section {
  padding: 20px 22px;
}

.dash-report-prose {
  display: grid;
  gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 2;
}

.dash-report-prose h3 {
  margin: 6px 0 -2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.dash-report-prose p { margin: 0; }

.dash-report-prose mark {
  border-radius: 6px;
  padding: 1px 6px;
  color: inherit;
  font-weight: 600;
}

.dash-report-prose mark.blue { background: color-mix(in srgb, var(--pastel-sky) 55%, var(--surface));   color: var(--brand-700); }
.dash-report-prose mark.mint { background: color-mix(in srgb, var(--pastel-mint) 55%, var(--surface));  color: #2f8a5e; }
.dash-report-prose mark.cyan { background: color-mix(in srgb, #d1eef5 55%, var(--surface));             color: #3f7f92; }
.dash-report-prose mark.rose { background: color-mix(in srgb, var(--pastel-rose) 55%, var(--surface));  color: #b14458; }

.dash-report-stat-list {
  display: grid;
  gap: 8px;
}

.dash-report-stat-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: background .2s, border-color .2s;
}

.dash-report-stat-list div:hover {
  background: color-mix(in srgb, var(--surface-2) 85%, var(--pastel-lilac) 15%);
  border-color: var(--brand-200);
}

.dash-report-stat-list span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 500;
}

.dash-report-stat-list strong {
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* ---------- Team + Finance row (2-column) ---------- */
.dash-report-team-finance {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.dash-report-team-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.dash-report-team-person,
.dash-report-team-sentiment {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--surface) 55%, color-mix(in srgb, var(--dash-report-tone-bg) 40%, var(--surface)) 100%);
  border: 1px solid var(--border);
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

.dash-report-team-badge {
  display: inline-block;
  align-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 50%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.1px;
}

.dash-report-team-body {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash-report-team-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 55%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 18px;
  font-weight: 800;
}

.dash-report-team-body h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.dash-report-team-body span {
  display: block;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  margin-top: 2px;
}

.dash-report-team-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-2) 85%, transparent);
}

.dash-report-team-metric strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.015em;
}

.dash-report-team-metric em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--dash-report-tone-fg);
}

.dash-report-team-sentiment {
  align-content: start;
}

.dash-report-team-sentiment strong {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
}

.dash-report-team-sentiment p {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.6;
}

.dash-report-team-coach {
  padding: 11px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--pastel-lilac) 12%);
  border: 1px dashed var(--brand-200);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.75;
}

.dash-report-team-coach b {
  color: var(--brand-700);
  font-weight: 800;
  margin-inline-end: 4px;
}

/* Finance card */
.dash-report-finance-progress {
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
}

.dash-report-fin-progress-item {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 60%, color-mix(in srgb, var(--dash-report-tone-bg) 40%, var(--surface)) 40%);
  border: 1px solid var(--border);
}

.dash-report-fin-progress-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-report-fin-progress-head span {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.01em;
}

.dash-report-fin-progress-head b {
  font-size: 15px;
  font-weight: 800;
  color: var(--dash-report-tone-fg);
  letter-spacing: -.3px;
}

.dash-report-fin-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.dash-report-fin-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-report-tone-fg), color-mix(in srgb, var(--dash-report-tone-fg) 65%, #fff));
}

.dash-report-fin-progress-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
}

.dash-report-fin-progress-foot em {
  font-style: normal;
  color: var(--text);
  font-weight: 700;
  letter-spacing: -.1px;
}

.dash-report-fin-progress-foot span {
  color: var(--text-muted);
  font-weight: 500;
}

.dash-report-finance-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dash-report-fin-cell {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 62%, color-mix(in srgb, var(--dash-report-tone-bg) 40%, var(--surface)) 38%);
  border: 1px solid var(--border);
}

.dash-report-fin-cell span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.dash-report-fin-cell strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.3px;
}

/* ---------- Timeline ---------- */
.dash-report-timeline-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.dash-report-timeline-item {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  position: relative;
  display: grid;
  gap: 6px;
  min-height: 128px;
  padding: 13px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--dash-report-tone-bg) 32%, var(--surface)));
  border: 1px solid var(--border);
  animation: scaleIn .45s cubic-bezier(.22,.7,.16,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

.dash-report-timeline-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dash-report-tone-fg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--dash-report-tone-fg) 14%, transparent);
}

.dash-report-timeline-item > b {
  color: var(--dash-report-tone-fg);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.dash-report-timeline-item h3 {
  margin: 0 0 3px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
}

.dash-report-timeline-item span {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}

/* ---------- Channel performance ---------- */
.dash-report-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
}

.dash-report-channel-card {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 9px;
  min-height: 168px;
  padding: 14px 15px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--dash-report-tone-bg) 30%, var(--surface)));
  animation: popIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.dash-report-channel-card > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dash-report-channel-card > strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
}

.dash-report-channel-share {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.dash-report-channel-share i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-report-tone-fg), color-mix(in srgb, var(--dash-report-tone-fg) 65%, #fff));
}

.dash-report-channel-share em {
  position: absolute;
  inset: -22px 0 auto auto;
  color: var(--dash-report-tone-fg);
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
}

.dash-report-channel-card:hover,
.dash-report-summary-card:hover,
.dash-report-action-card:hover {
  transform: translateY(-2px);
}

/* ---------- Charts ---------- */
.dash-report-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.dash-report-chart-wide { grid-column: 1 / -1; }

.dash-report-chart {
  position: relative;
  height: 260px;
}

.dash-report-chart canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 260px !important;
}

/* ---------- AI note + actions ---------- */
.dash-report-ai-note {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  background:
    radial-gradient(circle at 8% 15%, rgba(111,185,143,.12), transparent 42%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--pastel-lilac) 8%));
}

.dash-report-action-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.dash-report-action-card {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 6px;
  padding: 14px 15px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--dash-report-tone-bg) 28%, var(--surface)));
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 55ms);
}

.dash-report-action-card strong {
  color: var(--dash-report-tone-fg);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.15px;
}

.dash-report-action-card button {
  justify-self: start;
  margin-top: 4px;
}

/* ---------- Related reports (deep-links) ---------- */
.dash-report-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.dash-report-link {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 70%, color-mix(in srgb, var(--dash-report-tone-bg) 40%, var(--surface)) 30%);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}

.dash-report-link i {
  color: var(--dash-report-tone-fg);
  font-size: 15px;
  font-style: normal;
  font-weight: 800;
  transition: transform .2s;
}

.dash-report-link:hover {
  transform: translateY(-2px);
  border-color: var(--dash-report-tone-fg);
  box-shadow: 0 12px 24px -14px color-mix(in srgb, var(--dash-report-tone-fg) 40%, transparent);
}

.dash-report-link:hover i { transform: translateX(-4px); }

/* ---------- Responsive ----------
   NOTE: auto-fit grids handle most sizing automatically.
   Media queries here only handle 2-col layouts (brief/team-finance/ai-note/hero)
   which need explicit stacking below certain widths. Uses viewport width, so
   thresholds account for a ~256px open sidebar (real content = viewport - 256).
*/
@media (max-width: 1400px) {
  .dash-report-team-finance { grid-template-columns: 1fr; }
}

@media (max-width: 1200px) {
  .dash-report-brief-wrap { grid-template-columns: 1fr; }
  .dash-report-ai-note { grid-template-columns: 1fr; }
  .dash-report-chart-grid { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .dash-report-hero { grid-template-columns: 1fr; }
  .dash-report-hero-mark { grid-template-columns: 74px 1fr; }
  .dash-report-hero-icon { width: 72px; height: 72px; border-radius: 18px; font-size: 30px; }
  .dash-report-team-grid { grid-template-columns: 1fr; }
  .dash-report-finance-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .dash-report-hero,
  .dash-report-brief-card,
  .dash-report-stat-card,
  .dash-report-timeline,
  .dash-report-chart-card,
  .dash-report-ai-note,
  .dash-report-team-card,
  .dash-report-finance-card,
  .dash-report-links-section {
    border-radius: 14px;
    padding: 16px 18px;
  }
  .dash-report-hero h1 { font-size: 20px; }
  .dash-report-hero-mark,
  .dash-report-status-strip span,
  .dash-report-section-head { display: grid; grid-template-columns: 1fr; }
  .dash-report-summary-grid,
  .dash-report-channel-grid,
  .dash-report-timeline-list,
  .dash-report-domain-grid,
  .dash-report-action-grid,
  .dash-report-links-grid,
  .dash-report-finance-cells { grid-template-columns: 1fr; }
  .dash-report-summary-card { min-height: 0; }
}

/* ---------- Dark theme overrides ---------- */
[data-theme="dark"] .dash-report-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,.24), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.18), transparent 46%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
}

[data-theme="dark"] .dash-report-hero-icon {
  background:
    radial-gradient(circle at 30% 20%, rgba(111,185,143,.4), transparent 60%),
    linear-gradient(135deg, var(--brand-500), var(--purple-500));
}

[data-theme="dark"] .dash-report-status-strip span {
  background: color-mix(in srgb, var(--surface-2) 70%, transparent);
  border-color: var(--border);
}

[data-theme="dark"] .dash-report-eyebrow span {
  background: rgba(111,185,143,.18);
  color: #ddd6fe;
}

[data-theme="dark"] .dash-report-summary-card,
[data-theme="dark"] .dash-report-channel-card,
[data-theme="dark"] .dash-report-action-card,
[data-theme="dark"] .dash-report-timeline-item,
[data-theme="dark"] .dash-report-team-person,
[data-theme="dark"] .dash-report-team-sentiment,
[data-theme="dark"] .dash-report-fin-progress-item,
[data-theme="dark"] .dash-report-fin-cell,
[data-theme="dark"] .dash-report-link {
  background: color-mix(in srgb, var(--surface) 82%, var(--dash-report-tone-bg, var(--pastel-sky)) 18%);
}

[data-theme="dark"] .dash-report-stat-list div,
[data-theme="dark"] .dash-report-team-metric {
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  border-color: var(--border);
}

[data-theme="dark"] .dash-report-team-coach {
  background: color-mix(in srgb, var(--surface-2) 78%, rgba(111,185,143,.10));
  border-color: rgba(111,185,143,.28);
  color: var(--text-muted);
}

/* Compact SWOT section inside Quick Manager Report */
.dash-report-swot-section {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
}

.dash-report-swot-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.dash-report-swot-cell {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--dash-report-tone-bg) 25%, var(--surface)));
  border: 1px solid var(--border);
  position: relative;
}

.dash-report-swot-cell::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: var(--dash-report-tone-fg);
  opacity: .55;
  border-radius: 3px 0 0 3px;
}

.dash-report-swot-cell-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}

.dash-report-swot-cell-head span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--dash-report-tone-fg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.dash-report-swot-cell-head b {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}

.dash-report-swot-cell-head em {
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 55%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 10.5px;
  font-weight: 800;
  font-style: normal;
}

.dash-report-swot-list {
  display: grid;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.dash-report-swot-list li {
  display: grid;
  gap: 2px;
}

.dash-report-swot-list li strong {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.05px;
  line-height: 1.45;
}

.dash-report-swot-list li span {
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}

.dash-report-swot-conclusion {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 78%, var(--pastel-lilac) 12%);
  border: 1px dashed var(--brand-200);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.85;
}

.dash-report-swot-conclusion b {
  color: var(--brand-700);
  font-weight: 800;
  margin-inline-end: 4px;
}

.dash-report-swot-conclusion mark {
  background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface));
  color: var(--brand-700);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
}

@media (max-width: 1200px) {
  .dash-report-swot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .dash-report-swot-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   SWOT MATRIX PAGE — organizational + 9 domains (swot-* namespace)
   Aligned with .dash-mc-* theme: soft indigo + pastels, 16px radius, 22px pad.
   ========================================================================= */
.swot-page {
  display: grid;
  gap: 16px;
  color: var(--text);
}

.swot-hero,
.swot-active-head,
.swot-quadrant,
.swot-conclusion {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-xs);
  transition: transform .25s cubic-bezier(.22,.7,.16,1), box-shadow .25s ease, border-color .2s ease;
}

/* ---------- Hero ---------- */
.swot-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .9fr);
  gap: 22px;
  padding: 22px 24px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,.16), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.12), transparent 46%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 92%, var(--pastel-lilac) 8%));
  animation: slideUp .5s ease both;
}

.swot-hero::before {
  content: "";
  position: absolute;
  inset: auto -60px -100px auto;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,120,115,.10), transparent 68%);
  pointer-events: none;
}

.swot-hero-copy,
.swot-hero-mode {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.swot-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
}

.swot-eyebrow span {
  padding: 5px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface));
  color: var(--brand-700);
  font-weight: 800;
}

.swot-eyebrow b { color: var(--text-muted); font-weight: 700; }

.swot-hero h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 800;
  letter-spacing: -.3px;
}

.swot-hero p {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.8;
}

.swot-hero-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.swot-btn {
  min-height: 32px;
  padding: 6px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}

.swot-btn:hover {
  color: var(--brand-700);
  border-color: var(--brand-300);
  background: color-mix(in srgb, var(--surface) 88%, var(--pastel-lilac) 12%);
}

.swot-btn-primary {
  background: linear-gradient(135deg, var(--brand-500), var(--brand-600));
  color: #fff;
  border-color: var(--brand-600);
  font-weight: 700;
  box-shadow: 0 6px 18px -8px rgba(44,120,115,.45);
}

.swot-btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color: #fff;
}

.swot-hero-mode {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: start;
  padding: 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 55%, var(--pastel-sky) 18%);
  border: 1px solid var(--border);
}

.swot-mode-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.swot-mode-copy b {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}

.swot-mode-copy p {
  margin: 4px 0 8px;
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.65;
  font-weight: 500;
}

.swot-mode-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.swot-mode-toggle button {
  padding: 4px 12px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: color .2s, background .2s;
}

.swot-mode-toggle button.active {
  background: color-mix(in srgb, var(--surface) 82%, var(--pastel-lilac) 18%);
  color: var(--brand-700);
  font-weight: 800;
}

/* ---------- Tab bar (10 tabs) ---------- */
.swot-tabs {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow-x: auto;
  scrollbar-width: none;
}

.swot-tabs::-webkit-scrollbar { display: none; }

.swot-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, transform .2s;
  text-decoration: none;
}

.swot-tab-icon { font-size: 15px; display: flex; align-items: center; }
.swot-tab-svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; }
.swot-tab-label { letter-spacing: -.15px; }

.swot-tab:hover {
  color: var(--text);
  background: rgba(127,127,127,.05);
}

.swot-tab.active {
  color: var(--brand-700);
  font-weight: 800;
  background: color-mix(in srgb, var(--surface) 78%, var(--pastel-lilac) 22%);
  border: 1px solid var(--brand-200);
}

/* ---------- Active head (current domain title + tally) ---------- */
.swot-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  flex-wrap: wrap;
}

.swot-active-head h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}

.swot-active-head p {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.6;
}

.swot-active-tally {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.swot-active-tally > div {
  display: grid;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 60%, var(--dash-report-tone-bg, var(--pastel-sky)) 40%);
  border: 1px solid var(--border);
  text-align: center;
  min-width: 72px;
}

.swot-active-tally b {
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  line-height: 1.1;
}

.swot-active-tally span {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

/* ---------- 2×2 matrix ---------- */
.swot-matrix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.swot-quadrant {
  --dash-report-tone-bg: var(--pastel-sky);
  --dash-report-tone-fg: var(--brand-500);
  display: grid;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--dash-report-tone-bg) 22%, var(--surface)));
  animation: slideUp .5s ease both;
}

.swot-quadrant::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--dash-report-tone-fg);
  opacity: .55;
}

.swot-q-s { animation-delay: .05s; }
.swot-q-w { animation-delay: .12s; }
.swot-q-o { animation-delay: .19s; }
.swot-q-t { animation-delay: .26s; }

.swot-quadrant-head {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
}

.swot-quadrant-badge {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 60%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 20px;
  font-weight: 800;
}

.swot-quadrant-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.15px;
}

.swot-quadrant-count {
  display: inline-block;
  margin-inline-start: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 55%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 11px;
  font-weight: 800;
}

.swot-quadrant-head em {
  font-style: normal;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  display: block;
  margin-top: 2px;
}

.swot-quadrant-letter {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--dash-report-tone-fg);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.5px;
}

.swot-quadrant-list {
  display: grid;
  gap: 10px;
}

/* Item card */
.swot-item {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  animation: popIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
  transition: transform .2s, box-shadow .2s, border-color .2s;
}

.swot-item:hover {
  transform: translateY(-2px);
  border-color: var(--dash-report-tone-fg);
  box-shadow: 0 10px 20px -12px color-mix(in srgb, var(--dash-report-tone-fg) 35%, transparent);
}

.swot-item-head {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: 10px;
  align-items: center;
}

.swot-item-rank {
  width: 30px;
  height: 24px;
  display: grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--dash-report-tone-bg) 55%, var(--surface));
  color: var(--dash-report-tone-fg);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.swot-item-head h3 {
  margin: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.1px;
  line-height: 1.4;
}

.swot-impact {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  white-space: nowrap;
}

.swot-impact.swot-tone-peach { background: color-mix(in srgb, var(--pastel-peach) 55%, var(--surface)); color: var(--accent-600); }
.swot-impact.swot-tone-lilac { background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface)); color: var(--purple-500); }
.swot-impact.swot-tone-sky   { background: color-mix(in srgb, var(--pastel-sky) 55%, var(--surface)); color: var(--brand-700); }

.swot-item-desc {
  margin: 0;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.65;
}

.swot-item-foot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.swot-item-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 10.5px;
  font-weight: 500;
}

.swot-item-source {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text);
  font-weight: 700;
}

.swot-item-conf { align-self: center; }

.swot-item-score {
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 90px;
}

.swot-item-score-bar {
  width: 90px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}

.swot-item-score-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--dash-report-tone-fg), color-mix(in srgb, var(--dash-report-tone-fg) 60%, #fff));
}

.swot-item-score b {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--dash-report-tone-fg);
  letter-spacing: -.3px;
}

/* Quadrant tone map — reuses same variables as dash-report-tone-* */
.swot-tone-mint  { --dash-report-tone-bg: var(--pastel-mint);  --dash-report-tone-fg: var(--green-500); }
.swot-tone-rose  { --dash-report-tone-bg: var(--pastel-rose);  --dash-report-tone-fg: var(--red-500); }
.swot-tone-sky   { --dash-report-tone-bg: var(--pastel-sky);   --dash-report-tone-fg: var(--brand-500); }
.swot-tone-peach { --dash-report-tone-bg: var(--pastel-peach); --dash-report-tone-fg: var(--accent-600); }
.swot-tone-lilac { --dash-report-tone-bg: var(--pastel-lilac); --dash-report-tone-fg: var(--purple-500); }
.swot-tone-blue  { --dash-report-tone-bg: var(--pastel-sky);   --dash-report-tone-fg: var(--brand-500); }
.swot-tone-cyan  { --dash-report-tone-bg: #d1eef5;             --dash-report-tone-fg: #4b93a8; }
.swot-tone-lemon { --dash-report-tone-bg: var(--pastel-lemon); --dash-report-tone-fg: #a37919; }

/* ---------- Conclusion card ---------- */
.swot-conclusion {
  padding: 22px 24px;
  background:
    radial-gradient(circle at 8% 15%, rgba(111,185,143,.14), transparent 42%),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--surface) 90%, var(--pastel-lilac) 10%));
}

.swot-conclusion-head {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  margin-bottom: 18px;
}

.swot-conclusion-mark {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.4px;
}

.swot-conclusion-head span {
  display: block;
  color: var(--brand-500);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.swot-conclusion-head h2 {
  margin: 4px 0 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.2px;
}

.swot-conclusion-grid {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}

.swot-conclusion-summary,
.swot-conclusion-strategy,
.swot-conclusion-risk {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
}

.swot-conclusion-summary  { border-inline-start: 3px solid var(--brand-500); }
.swot-conclusion-strategy { border-inline-start: 3px solid var(--green-500); }
.swot-conclusion-risk     { border-inline-start: 3px solid var(--red-500); }

.swot-conclusion-grid b {
  display: block;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
  margin-bottom: 6px;
}

.swot-conclusion-grid p {
  margin: 0;
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.85;
}

.swot-conclusion-grid mark {
  background: color-mix(in srgb, var(--pastel-lilac) 55%, var(--surface));
  color: var(--brand-700);
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
}

/* Priorities */
.swot-priorities-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.swot-priorities-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.15px;
}

.swot-priorities-head span {
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.swot-priorities-list {
  display: grid;
  gap: 10px;
}

.swot-priority {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  animation: popIn .45s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color .2s, box-shadow .2s;
}

.swot-priority:hover {
  border-color: var(--brand-300);
  box-shadow: 0 10px 22px -14px rgba(44,120,115,.35);
}

.swot-priority-num {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.swot-priority h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.15px;
}

.swot-priority-meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 500;
}

.swot-priority-meta b {
  color: var(--text);
  font-weight: 700;
  margin-inline-start: 3px;
}

.swot-priority button {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s, border-color .2s;
}

.swot-priority button:hover {
  color: var(--brand-700);
  border-color: var(--brand-300);
  background: color-mix(in srgb, var(--surface) 88%, var(--pastel-lilac) 12%);
}

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  .swot-conclusion-grid { grid-template-columns: 1fr 1fr; }
  .swot-conclusion-risk { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
  .swot-hero,
  .swot-matrix { grid-template-columns: 1fr; }
  .swot-active-head { align-items: flex-start; flex-direction: column; }
  .swot-conclusion-grid { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .swot-hero, .swot-conclusion { padding: 16px 18px; border-radius: 14px; }
  .swot-hero h1 { font-size: 20px; }
  .swot-priority { grid-template-columns: 32px 1fr; }
  .swot-priority button { grid-column: 1 / -1; justify-self: start; }
  .swot-hero-mode { grid-template-columns: 48px 1fr; }
  .swot-mode-icon { width: 48px; height: 48px; font-size: 18px; }
}

/* ---------- Dark theme overrides ---------- */
[data-theme="dark"] .swot-hero {
  background:
    radial-gradient(circle at 8% 0%, rgba(111,185,143,.24), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,.18), transparent 46%),
    linear-gradient(135deg, var(--surface-2), var(--surface));
}

[data-theme="dark"] .swot-mode-icon,
[data-theme="dark"] .swot-conclusion-mark,
[data-theme="dark"] .swot-priority-num {
  background: linear-gradient(135deg, var(--brand-500), var(--purple-500));
}

[data-theme="dark"] .swot-quadrant,
[data-theme="dark"] .swot-item,
[data-theme="dark"] .swot-priority,
[data-theme="dark"] .swot-conclusion-summary,
[data-theme="dark"] .swot-conclusion-strategy,
[data-theme="dark"] .swot-conclusion-risk,
[data-theme="dark"] .swot-active-tally > div {
  background: color-mix(in srgb, var(--surface) 84%, var(--dash-report-tone-bg, var(--pastel-sky)) 16%);
}

.dash-alerts-sev-high {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-peach) 30%, var(--surface)), color-mix(in srgb, var(--surface) 86%, transparent));
  border-inline-start-color: color-mix(in srgb, var(--amber-500) 62%, var(--pastel-peach));
}

.dash-alerts-sev-medium {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lemon) 32%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  border-inline-start-color: color-mix(in srgb, var(--amber-500) 46%, var(--pastel-lemon));
}

.dash-alerts-sev-urgent .dash-alerts-card-head b {
  background: color-mix(in srgb, var(--pastel-rose) 52%, var(--surface));
  color: color-mix(in srgb, var(--red-500) 70%, var(--text));
}

.dash-alerts-sev-high .dash-alerts-card-head b,
.dash-alerts-sev-medium .dash-alerts-card-head b {
  background: color-mix(in srgb, var(--pastel-peach) 52%, var(--surface));
  color: color-mix(in srgb, var(--amber-500) 62%, var(--text));
}

.dash-alerts-decision-card .dash-alerts-metrics div,
.dash-alerts-decision-card .dash-alerts-reason,
.dash-alerts-decision-card .dash-alerts-actionline {
  background: color-mix(in srgb, var(--surface) 64%, var(--pastel-peach) 16%);
}

.dash-alerts-sev-urgent .dash-alerts-metrics div,
.dash-alerts-sev-urgent .dash-alerts-reason,
.dash-alerts-sev-urgent .dash-alerts-actionline {
  background: color-mix(in srgb, var(--surface) 64%, var(--pastel-rose) 18%);
}

.dash-alerts-opportunity {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-mint) 28%, var(--surface)), color-mix(in srgb, var(--pastel-sky) 12%, var(--surface)));
  border-color: color-mix(in srgb, var(--green-500) 18%, var(--border));
}

.dash-alerts-opportunity .dash-alerts-card-head b {
  background: color-mix(in srgb, var(--pastel-mint) 54%, var(--surface));
  color: color-mix(in srgb, var(--green-500) 70%, var(--text));
}

.dash-alerts-opportunity .dash-alerts-op-meta div {
  background: color-mix(in srgb, var(--surface) 62%, var(--pastel-mint) 18%);
}

.dash-alerts-ai-card {
  background:
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--brand-500) 12%, transparent), transparent 38%),
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 30%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
  border-color: color-mix(in srgb, var(--brand-500) 20%, var(--border));
}

.dash-alerts-ai-card > b,
.dash-alerts-ai-num {
  background: color-mix(in srgb, var(--pastel-lilac) 54%, var(--surface));
  color: color-mix(in srgb, var(--brand-700) 70%, var(--text));
}

.dash-alerts-why {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--pastel-lilac) 20%, var(--surface)), color-mix(in srgb, var(--surface) 88%, transparent));
}

.dash-alerts-timeline article:nth-child(1),
.dash-alerts-timeline article:nth-child(2),
.dash-alerts-timeline article:nth-child(3) {
  background: color-mix(in srgb, var(--surface) 66%, var(--pastel-peach) 16%);
}

.dash-alerts-timeline article:nth-child(n+4) {
  background: color-mix(in srgb, var(--surface) 66%, var(--pastel-sky) 14%);
}

.dash-alerts-filterbar {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 88%, transparent), color-mix(in srgb, var(--pastel-sky) 10%, var(--surface)));
}

/* =========================================================================
   ALERTS PAGE — Today-View Alignment (2026-07-12)
   نگاشت زبان طراحی صفحه «نمای امروز کسب‌وکار» روی صفحه هشدارها و فرصت‌ها
   ========================================================================= */
.dash-alerts-page {
  --alerts-red:    #ef4444;
  --alerts-amber:  #f59e0b;
  --alerts-green:  #10b981;
  --alerts-blue:   #3b82f6;
  --alerts-purple: #8b5cf6;
  --alerts-value-red:    #b14458;
  --alerts-value-amber:  #b27512;
  --alerts-value-green:  #0e8a5e;
  --alerts-value-blue:   #3b5998;
  --alerts-value-purple: #6d47c0;

  gap: 16px;
}

/* Base cards: mirror today-view surface language — lighter, softer, single tone */
.dash-alerts-hero,
.dash-alerts-panel,
.dash-alerts-summary,
.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-filterbar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
}

/* Section head — smaller, tighter like today-view section titles */
.dash-alerts-head h2 {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.15px;
  color: var(--text);
  margin: 4px 0 0;
}

.dash-alerts-head span,
.dash-alerts-card-head span,
.dash-alerts-status-pill,
.dash-alerts-soft-chip {
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1px;
}

.dash-alerts-status-pill,
.dash-alerts-soft-chip {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-2);
}

/* Hero — softer indigo pastel, smaller radius, subtler shadow */
.dash-alerts-hero {
  padding: 16px 18px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(44,120,115,.06), var(--surface)),
    linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--pastel-sky) 10%, var(--surface)));
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.dash-alerts-hero-copy h1 {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.2px;
  line-height: 1.5;
  margin: 6px 0 2px;
}
.dash-alerts-hero-copy p {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 500;
}

.dash-alerts-orb strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
}
.dash-alerts-orb span {
  font-size: 11px;
  color: var(--text-muted);
}

/* Hero mini-cards — tinted side-bar like pulse-cell */
.dash-alerts-hero-cards {
  gap: 10px;
  margin-top: 12px;
}
.dash-alerts-mini {
  min-height: 82px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  gap: 4px;
  transition: transform .2s ease, background .2s ease;
}
.dash-alerts-mini:hover { transform: translateY(-2px); }
.dash-alerts-mini span { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.dash-alerts-mini strong { font-size: 19px; font-weight: 800; letter-spacing: -.4px; line-height: 1.15; }
.dash-alerts-mini em { font-size: 10.5px; color: var(--text-muted); font-style: normal; line-height: 1.55; }

.dash-alerts-mini-rose  { background: linear-gradient(180deg, rgba(239, 68, 68, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-red); }
.dash-alerts-mini-rose  strong { color: var(--alerts-value-red); }
.dash-alerts-mini-peach { background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-amber); }
.dash-alerts-mini-peach strong { color: var(--alerts-value-amber); }
.dash-alerts-mini-mint  { background: linear-gradient(180deg, rgba(16, 185, 129, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-green); }
.dash-alerts-mini-mint  strong { color: var(--alerts-value-green); }
.dash-alerts-mini-sky   { background: linear-gradient(180deg, rgba(59, 130, 246, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-blue); }
.dash-alerts-mini-sky   strong { color: var(--alerts-value-blue); }

/* Executive summary — match today-view compact card size + level tint */
.dash-alerts-summary-grid { gap: 12px; }
.dash-alerts-summary {
  min-height: 158px;
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  box-shadow: none;
  text-align: center;
  align-items: center;
  gap: 6px;
}
.dash-alerts-summary::before { display: none; }
.dash-alerts-summary.dash-alerts-warning {
  background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface-2));
  box-shadow: inset -3px 0 0 var(--alerts-amber);
}
.dash-alerts-summary.dash-alerts-good {
  background: linear-gradient(180deg, rgba(16, 185, 129, .07), var(--surface-2));
  box-shadow: inset -3px 0 0 var(--alerts-green);
}
.dash-alerts-summary h3 {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.05px;
  line-height: 1.5;
  color: var(--text);
  margin-top: 2px;
}
.dash-alerts-summary > strong {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.2;
  color: var(--text);
}
.dash-alerts-summary.dash-alerts-warning > strong { color: var(--alerts-value-amber); }
.dash-alerts-summary.dash-alerts-good > strong    { color: var(--alerts-value-green); }
.dash-alerts-summary p {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 140px;
}
.dash-alerts-summary-top { justify-content: center; gap: 0; }
.dash-alerts-summary-top i { display: none; }
.dash-alerts-summary-top b {
  order: 2;
  min-width: 36px;
  min-height: 24px;
  padding: 3px 9px;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 999px;
  background: rgba(245, 158, 11, .14);
  color: var(--alerts-value-amber);
}
.dash-alerts-good .dash-alerts-summary-top b {
  background: rgba(16, 185, 129, .14);
  color: var(--alerts-value-green);
}

/* ---------- Triage Console (NEW) ---------- */
.dash-alerts-triage-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) { .dash-alerts-triage-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .dash-alerts-triage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.dash-alerts-tile {
  padding: 14px 12px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 36px 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
  row-gap: 3px;
  align-items: center;
  transition: transform .2s ease, background .2s ease;
  animation: scaleIn .45s cubic-bezier(.22,.7,.16,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.dash-alerts-tile:hover { transform: translateY(-2px); background: var(--surface-3); }
.dash-alerts-tile-icon {
  grid-row: 1 / span 3;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  background: var(--surface);
  font-size: 16px;
}
.dash-alerts-tile-label {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
  line-height: 1.4;
}
.dash-alerts-tile-value {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.4px;
  line-height: 1.15;
  color: var(--text);
}
.dash-alerts-tile-delta {
  font-size: 10.5px;
  color: var(--text-muted);
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
}
.dash-alerts-tile-rose  { background: linear-gradient(180deg, rgba(239, 68, 68, .07), var(--surface-2));  box-shadow: inset -3px 0 0 var(--alerts-red); }
.dash-alerts-tile-rose  .dash-alerts-tile-value { color: var(--alerts-value-red); }
.dash-alerts-tile-rose  .dash-alerts-tile-icon  { background: rgba(239, 68, 68, .15); }
.dash-alerts-tile-peach { background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-amber); }
.dash-alerts-tile-peach .dash-alerts-tile-value { color: var(--alerts-value-amber); }
.dash-alerts-tile-peach .dash-alerts-tile-icon  { background: rgba(245, 158, 11, .15); }
.dash-alerts-tile-mint  { background: linear-gradient(180deg, rgba(16, 185, 129, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-green); }
.dash-alerts-tile-mint  .dash-alerts-tile-value { color: var(--alerts-value-green); }
.dash-alerts-tile-mint  .dash-alerts-tile-icon  { background: rgba(16, 185, 129, .15); }
.dash-alerts-tile-sky   { background: linear-gradient(180deg, rgba(59, 130, 246, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-blue); }
.dash-alerts-tile-sky   .dash-alerts-tile-value { color: var(--alerts-value-blue); }
.dash-alerts-tile-sky   .dash-alerts-tile-icon  { background: rgba(59, 130, 246, .15); }
.dash-alerts-tile-lilac { background: linear-gradient(180deg, rgba(139, 92, 246, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-purple); }
.dash-alerts-tile-lilac .dash-alerts-tile-value { color: var(--alerts-value-purple); }
.dash-alerts-tile-lilac .dash-alerts-tile-icon  { background: rgba(139, 92, 246, .15); }

/* ---------- Filter bar ---------- */
.dash-alerts-filterbar {
  padding: 10px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.dash-alerts-filters button {
  min-height: 30px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
  box-shadow: none;
}
.dash-alerts-filters button:hover {
  background: var(--surface-3);
  color: var(--text);
  transform: none;
  box-shadow: none;
}
.dash-alerts-filters button.active {
  background: rgba(44,120,115,.14);
  color: var(--brand-700);
  border-color: color-mix(in srgb, var(--brand-500) 34%, transparent);
  box-shadow: none;
}
.dash-alerts-sort {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}
.dash-alerts-sort select {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
}

/* ---------- Alerts list — decision cards ---------- */
.dash-alerts-decision-card,
.dash-alerts-opportunity,
.dash-alerts-ai-card,
.dash-alerts-panel {
  padding: 14px;
  border-radius: 14px;
  gap: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.dash-alerts-card-head h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.55;
  margin: 4px 0 0;
}

/* Severity side-bar accents (mirroring pulse-cell level-* pattern) */
.dash-alerts-decision-card { border-inline-start: none; }
.dash-alerts-sev-urgent {
  background: linear-gradient(180deg, rgba(239, 68, 68, .07), var(--surface));
  box-shadow: inset -3px 0 0 var(--alerts-red), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--alerts-red) 22%, var(--border));
}
.dash-alerts-sev-high {
  background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface));
  box-shadow: inset -3px 0 0 var(--alerts-amber), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--alerts-amber) 22%, var(--border));
}
.dash-alerts-sev-medium {
  background: linear-gradient(180deg, rgba(139, 92, 246, .07), var(--surface));
  box-shadow: inset -3px 0 0 var(--alerts-purple), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--alerts-purple) 22%, var(--border));
}
.dash-alerts-sev-low {
  background: linear-gradient(180deg, rgba(16, 185, 129, .07), var(--surface));
  box-shadow: inset -3px 0 0 var(--alerts-green), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--alerts-green) 22%, var(--border));
}

/* Severity pill (top-right badge) */
.dash-alerts-sev-pill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1px;
  background: rgba(239, 68, 68, .14);
  color: var(--alerts-value-red);
  border: 1px solid transparent;
}
.dash-alerts-sev-pill-urgent { background: rgba(239, 68, 68, .14);   color: var(--alerts-value-red); }
.dash-alerts-sev-pill-high   { background: rgba(245, 158, 11, .14);  color: var(--alerts-value-amber); }
.dash-alerts-sev-pill-medium { background: rgba(139, 92, 246, .14);  color: var(--alerts-value-purple); }
.dash-alerts-sev-pill-low    { background: rgba(16, 185, 129, .14);  color: var(--alerts-value-green); }

/* Domain chip (small tinted pill for area labels) */
.dash-alerts-domain-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  margin-bottom: 4px;
}
.dash-alerts-domain-rose  { background: var(--pastel-rose);  color: var(--alerts-value-red); }
.dash-alerts-domain-peach { background: var(--pastel-peach); color: var(--alerts-value-amber); }
.dash-alerts-domain-mint  { background: var(--pastel-mint);  color: var(--alerts-value-green); }
.dash-alerts-domain-sky   { background: var(--pastel-sky);   color: var(--alerts-value-blue); }
.dash-alerts-domain-lilac { background: var(--pastel-lilac); color: var(--alerts-value-purple); }
.dash-alerts-domain-lemon { background: var(--pastel-lemon); color: #8a6d1f; }

/* Metrics/meta cells — match today-view neutral surface-2 tiles */
.dash-alerts-metrics,
.dash-alerts-op-meta { gap: 8px; }
.dash-alerts-metrics div,
.dash-alerts-op-meta div,
.dash-alerts-reason,
.dash-alerts-actionline {
  padding: 9px 10px;
  border-radius: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  gap: 2px;
}
.dash-alerts-metrics span,
.dash-alerts-op-meta span,
.dash-alerts-reason span,
.dash-alerts-actionline span,
.dash-alerts-mini span,
.dash-alerts-mini em {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-muted);
}
.dash-alerts-metrics strong,
.dash-alerts-op-meta strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.15px;
  line-height: 1.45;
}
.dash-alerts-reason p,
.dash-alerts-actionline p {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.75;
}

/* Tag row on alerts/opportunities */
.dash-alerts-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.dash-alerts-tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  background: rgba(44,120,115,.10);
  color: var(--brand-700);
  border: 1px solid color-mix(in srgb, var(--brand-500) 20%, transparent);
}
.dash-alerts-tag-op {
  background: rgba(16, 185, 129, .10);
  color: var(--alerts-value-green);
  border-color: color-mix(in srgb, var(--alerts-green) 25%, transparent);
}

/* Opportunity cards — mint side-bar accent */
.dash-alerts-opportunity {
  background: linear-gradient(180deg, rgba(16, 185, 129, .06), var(--surface));
  box-shadow: inset -3px 0 0 var(--alerts-green), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--alerts-green) 20%, var(--border));
}
.dash-alerts-opportunity .dash-alerts-card-head b {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(16, 185, 129, .14);
  color: var(--alerts-value-green);
  font-size: 10.5px;
  font-weight: 800;
}

/* Action buttons — softer, today-view style */
.dash-alerts-actions button {
  min-height: 30px;
  padding: 5px 12px;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}
.dash-alerts-actions button:hover {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: #fff;
  transform: none;
  box-shadow: none;
}

/* Matrix / bubble tune */
.dash-alerts-matrix {
  border-radius: 12px;
  background:
    linear-gradient(90deg, transparent 49.7%, var(--border) 50%, transparent 50.3%),
    linear-gradient(0deg,  transparent 49.7%, var(--border) 50%, transparent 50.3%),
    var(--surface-2);
  border: 1px solid var(--border);
}
.dash-alerts-bubble {
  width: 40px; height: 40px;
  right: calc(var(--x) - 20px);
  top:   calc(var(--y) - 20px);
  background: rgba(239, 68, 68, .32);
  border: 1px solid color-mix(in srgb, var(--alerts-red) 35%, transparent);
  box-shadow: 0 8px 18px rgba(239, 68, 68, .16);
}
.dash-alerts-bubble-opportunity {
  background: rgba(16, 185, 129, .34);
  border-color: color-mix(in srgb, var(--alerts-green) 38%, transparent);
  box-shadow: 0 8px 18px rgba(16, 185, 129, .16);
}
.dash-alerts-bubble span {
  font-size: 10px;
  color: var(--text);
  font-weight: 700;
}

/* ---------- Trends section ---------- */
.dash-alerts-trends { display: grid; gap: 10px; }
.dash-alerts-trends-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  gap: 14px;
}
@media (max-width: 1180px) { .dash-alerts-trends-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px)  { .dash-alerts-trends-grid { grid-template-columns: 1fr; } }
.dash-alerts-trend-cell { display: grid; gap: 10px; }
.dash-alerts-trend-cell .dash-alerts-chart-wrap { height: 260px; }
.dash-alerts-donut-wrap {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  max-width: 260px;
  margin-inline: auto;
  width: 100%;
}
.dash-alerts-donut-wrap canvas { width: 100% !important; height: 100% !important; }

/* ---------- Timeline (existing but re-tuned) ---------- */
.dash-alerts-timeline article {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  gap: 10px;
}
.dash-alerts-timeline time {
  color: var(--brand-700);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.1px;
}
.dash-alerts-timeline h3 {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--text);
}
.dash-alerts-timeline p {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
  line-height: 1.55;
}
.dash-alerts-timeline b {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(44,120,115,.14);
  color: var(--brand-700);
}
.dash-alerts-timeline article:nth-child(1),
.dash-alerts-timeline article:nth-child(2),
.dash-alerts-timeline article:nth-child(3) {
  background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface-2));
  box-shadow: inset -3px 0 0 var(--alerts-amber);
}
.dash-alerts-timeline article:nth-child(1) b,
.dash-alerts-timeline article:nth-child(2) b,
.dash-alerts-timeline article:nth-child(3) b {
  background: rgba(245, 158, 11, .16);
  color: var(--alerts-value-amber);
}
.dash-alerts-timeline article:nth-child(n+4) {
  background: linear-gradient(180deg, rgba(59, 130, 246, .06), var(--surface-2));
  box-shadow: inset -3px 0 0 var(--alerts-blue);
}
.dash-alerts-timeline article:nth-child(n+4) b {
  background: rgba(59, 130, 246, .14);
  color: var(--alerts-value-blue);
}

/* ---------- Diaco why list ---------- */
.dash-alerts-why {
  background: linear-gradient(180deg, rgba(139, 92, 246, .05), var(--surface));
}
.dash-alerts-reason-list div {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.dash-alerts-reason-list span {
  background: rgba(139, 92, 246, .14);
  color: var(--alerts-value-purple);
  font-size: 12px;
  font-weight: 800;
}
.dash-alerts-reason-list p {
  font-size: 12px;
  color: var(--text);
  line-height: 1.75;
  font-weight: 500;
}

/* ---------- Live Alert Stream (NEW) ---------- */
.dash-alerts-stream {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 900px) { .dash-alerts-stream { grid-template-columns: 1fr; } }

.dash-alerts-stream-item {
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
  animation: slideUp .4s ease both;
  animation-delay: calc(var(--i, 0) * 40ms);
  position: relative;
}
.dash-alerts-stream-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--brand-500);
}
.dash-alerts-stream-rose  { box-shadow: inset -3px 0 0 var(--alerts-red);    background: linear-gradient(180deg, rgba(239, 68, 68, .06), var(--surface-2)); }
.dash-alerts-stream-rose  .dash-alerts-stream-dot { background: var(--alerts-red); animation: pulseGlow 2s infinite; }
.dash-alerts-stream-peach { box-shadow: inset -3px 0 0 var(--alerts-amber);  background: linear-gradient(180deg, rgba(245, 158, 11, .06), var(--surface-2)); }
.dash-alerts-stream-peach .dash-alerts-stream-dot { background: var(--alerts-amber); }
.dash-alerts-stream-mint  { box-shadow: inset -3px 0 0 var(--alerts-green);  background: linear-gradient(180deg, rgba(16, 185, 129, .06), var(--surface-2)); }
.dash-alerts-stream-mint  .dash-alerts-stream-dot { background: var(--alerts-green); }
.dash-alerts-stream-sky   { box-shadow: inset -3px 0 0 var(--alerts-blue);   background: linear-gradient(180deg, rgba(59, 130, 246, .06), var(--surface-2)); }
.dash-alerts-stream-sky   .dash-alerts-stream-dot { background: var(--alerts-blue); }
.dash-alerts-stream-lilac { box-shadow: inset -3px 0 0 var(--alerts-purple); background: linear-gradient(180deg, rgba(139, 92, 246, .06), var(--surface-2)); }
.dash-alerts-stream-lilac .dash-alerts-stream-dot { background: var(--alerts-purple); }

.dash-alerts-stream-body { display: grid; gap: 4px; min-width: 0; }
.dash-alerts-stream-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.dash-alerts-stream-head time {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-alerts-stream-badge {
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(44,120,115,.14);
  color: var(--brand-700);
}
.dash-alerts-stream-badge-rose  { background: rgba(239, 68, 68, .14);   color: var(--alerts-value-red); }
.dash-alerts-stream-badge-peach { background: rgba(245, 158, 11, .14);  color: var(--alerts-value-amber); }
.dash-alerts-stream-badge-mint  { background: rgba(16, 185, 129, .14);  color: var(--alerts-value-green); }
.dash-alerts-stream-badge-sky   { background: rgba(59, 130, 246, .14);  color: var(--alerts-value-blue); }
.dash-alerts-stream-badge-lilac { background: rgba(139, 92, 246, .14);  color: var(--alerts-value-purple); }
.dash-alerts-stream-item h3 {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.dash-alerts-stream-item p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  font-weight: 500;
}

/* ---------- AI Decision cards ---------- */
.dash-alerts-decision-grid { gap: 12px; }
.dash-alerts-ai-card {
  background: linear-gradient(180deg, rgba(44,120,115,.06), var(--surface));
  box-shadow: inset -3px 0 0 var(--brand-500), var(--shadow-sm);
  border-color: color-mix(in srgb, var(--brand-500) 20%, var(--border));
}
.dash-alerts-ai-card h3 {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.55;
}
.dash-alerts-ai-card p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 500;
}
.dash-alerts-ai-card strong {
  font-size: 12.5px;
  color: var(--brand-700);
  font-weight: 800;
}
.dash-alerts-ai-card > b {
  background: rgba(44,120,115,.14);
  color: var(--brand-700);
  font-size: 10.5px;
  padding: 3px 10px;
  border-radius: 999px;
}
.dash-alerts-ai-num {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(44,120,115,.14);
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

/* ---------- Escalation Playbooks (NEW) ---------- */
.dash-alerts-playbook-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1180px) { .dash-alerts-playbook-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px)  { .dash-alerts-playbook-grid { grid-template-columns: 1fr; } }

.dash-alerts-playbook {
  padding: 14px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  gap: 12px;
  animation: slideUp .45s ease both;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.dash-alerts-playbook-head {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 10px;
  align-items: start;
}
.dash-alerts-playbook-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  display: grid;
  place-items: center;
  font-size: 18px;
}
.dash-alerts-playbook h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.55;
  margin: 2px 0 4px;
}
.dash-alerts-playbook p {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 500;
  margin: 0;
}
.dash-alerts-playbook-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.dash-alerts-playbook-meta div {
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  display: grid;
  gap: 2px;
}
.dash-alerts-playbook-meta span {
  font-size: 10.5px;
  color: var(--text-muted);
  font-weight: 600;
}
.dash-alerts-playbook-meta strong {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.1px;
}
.dash-alerts-playbook-rose  { background: linear-gradient(180deg, rgba(239, 68, 68, .07), var(--surface-2));  box-shadow: inset -3px 0 0 var(--alerts-red); }
.dash-alerts-playbook-rose  .dash-alerts-playbook-icon { background: rgba(239, 68, 68, .15); }
.dash-alerts-playbook-peach { background: linear-gradient(180deg, rgba(245, 158, 11, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-amber); }
.dash-alerts-playbook-peach .dash-alerts-playbook-icon { background: rgba(245, 158, 11, .15); }
.dash-alerts-playbook-mint  { background: linear-gradient(180deg, rgba(16, 185, 129, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-green); }
.dash-alerts-playbook-mint  .dash-alerts-playbook-icon { background: rgba(16, 185, 129, .15); }
.dash-alerts-playbook-sky   { background: linear-gradient(180deg, rgba(59, 130, 246, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-blue); }
.dash-alerts-playbook-sky   .dash-alerts-playbook-icon { background: rgba(59, 130, 246, .15); }
.dash-alerts-playbook-lilac { background: linear-gradient(180deg, rgba(139, 92, 246, .07), var(--surface-2)); box-shadow: inset -3px 0 0 var(--alerts-purple); }
.dash-alerts-playbook-lilac .dash-alerts-playbook-icon { background: rgba(139, 92, 246, .15); }

/* Dark theme adjustments */
[data-theme="dark"] .dash-alerts-page {
  --alerts-value-red:    #ff9db1;
  --alerts-value-amber:  #ffca7a;
  --alerts-value-green:  #7de3b0;
  --alerts-value-blue:   #94b7ff;
  --alerts-value-purple: #c4b0ff;
}
[data-theme="dark"] .dash-alerts-mini,
[data-theme="dark"] .dash-alerts-tile,
[data-theme="dark"] .dash-alerts-timeline article,
[data-theme="dark"] .dash-alerts-reason-list div,
[data-theme="dark"] .dash-alerts-stream-item,
[data-theme="dark"] .dash-alerts-playbook,
[data-theme="dark"] .dash-alerts-metrics div,
[data-theme="dark"] .dash-alerts-op-meta div,
[data-theme="dark"] .dash-alerts-reason,
[data-theme="dark"] .dash-alerts-actionline {
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  border-color: var(--border);
}

/* =========================================================================
   ALERTS HERO — Polished KPI-style Orb & Movers (2026-07-12)
   الگو از `.dash-kpi-page .dash-kpi-hero` — گرادیان بنفش/آبی/سبز + SVG orb + pulse
   ========================================================================= */
.dash-alerts-page .dash-alerts-hero {
  padding: 18px 22px;
  border-radius: 18px;
  gap: 20px;
  grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr);
  min-height: 0;
  background:
    radial-gradient(circle at 8% 0%,  rgba(111,185,143,0.16), transparent 42%),
    radial-gradient(circle at 92% 100%, rgba(34,211,238,0.13), transparent 46%),
    linear-gradient(135deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.dash-alerts-eyebrow {
  color: var(--brand-600);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.dash-alerts-page .dash-alerts-hero-copy h1 {
  margin: 6px 0 4px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.35;
  color: var(--text);
}
.dash-alerts-page .dash-alerts-hero-copy p {
  font-size: 13px;
  line-height: 1.65;
  font-weight: 500;
  color: var(--text-muted);
  margin: 0;
}

/* Mover pills — top opportunity (up) + top alert (down) */
.dash-alerts-hero-movers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.dash-alerts-mover-pill {
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(6px);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
}
.dash-alerts-mover-pill span {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .1px;
}
.dash-alerts-mover-pill strong {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text);
  line-height: 1.45;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-alerts-mover-pill em {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  font-style: normal;
  white-space: nowrap;
}
.dash-alerts-mover-up   { background: rgba(52,211,153,0.14); border-color: rgba(52,211,153,0.28); }
.dash-alerts-mover-up   em { background: var(--green-50); color: #2f8a5e; }
.dash-alerts-mover-down { background: rgba(232,120,140,0.14); border-color: rgba(232,120,140,0.28); }
.dash-alerts-mover-down em { background: var(--red-50); color: #b14458; }

[data-theme="dark"] .dash-alerts-mover-pill {
  background: rgba(15,29,63,0.55);
}

/* Hero mini stats — mc-pill flavor */
.dash-alerts-page .dash-alerts-hero-cards {
  margin-top: 14px;
  gap: 10px;
}
.dash-alerts-page .dash-alerts-mini {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 12px;
  gap: 2px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--border);
  box-shadow: none;
}
.dash-alerts-page .dash-alerts-mini span    { font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.dash-alerts-page .dash-alerts-mini strong  { font-size: 20px;   font-weight: 800; letter-spacing: -.4px; line-height: 1.2; }
.dash-alerts-page .dash-alerts-mini em      { font-size: 10.5px; font-weight: 600; color: var(--text-muted); font-style: normal; }
.dash-alerts-page .dash-alerts-mini-rose  { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(245,194,199,.35)); }
.dash-alerts-page .dash-alerts-mini-mint  { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(184,230,211,.35)); }
.dash-alerts-page .dash-alerts-mini-peach { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(255,228,204,.42)); }
.dash-alerts-page .dash-alerts-mini-sky   { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(184,212,241,.35)); }
.dash-alerts-page .dash-alerts-mini-lilac { background: linear-gradient(135deg, rgba(255,255,255,0.7), rgba(221,214,254,.40)); }
.dash-alerts-page .dash-alerts-mini-rose  strong { color: var(--alerts-value-red); }
.dash-alerts-page .dash-alerts-mini-mint  strong { color: var(--alerts-value-green); }
.dash-alerts-page .dash-alerts-mini-peach strong { color: var(--alerts-value-amber); }
.dash-alerts-page .dash-alerts-mini-sky   strong { color: var(--alerts-value-blue); }
.dash-alerts-page .dash-alerts-mini-lilac strong { color: var(--alerts-value-purple); }
/* Kill inset side-bar on hero mini (replaced by soft tint) */
.dash-alerts-page .dash-alerts-mini { box-shadow: none; }

[data-theme="dark"] .dash-alerts-page .dash-alerts-mini {
  background: rgba(15,29,63,0.55);
}

/* ---- Health Orb — SVG rings + pulse + gradient text ---- */
.dash-alerts-page .dash-alerts-radar {
  position: relative;
  min-height: 240px;
  display: grid;
  place-items: center;
  isolation: isolate;
  padding: 0;
  overflow: visible;
}
/* Kill old conic halo, waves, sparkline */
.dash-alerts-page .dash-alerts-radar::before,
.dash-alerts-page .dash-alerts-radar::after { display: none; }
.dash-alerts-page .dash-alerts-radar > .dash-alerts-sparkline,
.dash-alerts-page .dash-alerts-radar > .dash-alerts-wave,
.dash-alerts-page .dash-alerts-radar > .dash-alerts-orb { display: none !important; }

.dash-alerts-page .dash-alerts-radar {
  background:
    radial-gradient(circle, rgba(111,185,143,0.14), transparent 60%),
    radial-gradient(circle at 30% 30%, rgba(34,211,238,0.10), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(52,211,153,0.10), transparent 55%);
  border-radius: 50%;
}

.dash-alerts-orb-svg {
  position: absolute;
  width: 210px;
  height: 210px;
  z-index: 0;
  filter: drop-shadow(0 8px 24px rgba(111,185,143,.28));
}
.dash-alerts-orb-track { stroke: rgba(15,23,42,0.08); }
.dash-alerts-orb-track-2 {
  stroke: rgba(111,185,143,0.22);
  stroke-dasharray: 2 4;
  animation: alertsOrbSpin 40s linear infinite;
  transform-origin: 60px 60px;
}
.dash-alerts-orb-arc {
  stroke-dasharray: var(--c);
  stroke-dashoffset: calc(var(--c) - var(--c) * var(--p) / 100);
  animation: alertsOrbDraw 2.4s cubic-bezier(.25,.1,.25,1) both;
}
.dash-alerts-orb-dots circle {
  transform-origin: 60px 60px;
  animation: alertsOrbSpin 20s linear infinite;
  filter: drop-shadow(0 0 5px currentColor);
  opacity: .9;
}
.dash-alerts-orb-dots circle:nth-child(2) { animation-duration: 24s; animation-direction: reverse; }
.dash-alerts-orb-dots circle:nth-child(3) { animation-duration: 28s; }
.dash-alerts-orb-dots circle:nth-child(4) { animation-duration: 32s; animation-direction: reverse; }

.dash-alerts-orb-pulse {
  position: absolute;
  width: 210px; height: 210px;
  border-radius: 50%;
  border: 2px solid rgba(111,185,143,0.32);
  animation: alertsOrbPulse 2.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes alertsOrbDraw { from { stroke-dashoffset: var(--c); } }
@keyframes alertsOrbSpin { to { transform: rotate(360deg); } }
@keyframes alertsOrbPulse {
  0%, 100% { transform: scale(1);    opacity: 0; }
  50%      { transform: scale(1.08); opacity: 1; }
}

/* Inner ring text (gradient number + subtitle) */
.dash-alerts-ring {
  width: 148px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 20px 16px;
  gap: 4px;
  background: transparent;
  box-shadow: none;
  z-index: 1;
  display: grid;
  place-items: center;
  align-content: center;
  text-align: center;
}
.dash-alerts-ring > span {
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  background: linear-gradient(135deg, #6fb98f, #22d3ee 55%, #34d399);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.dash-alerts-ring > span em {
  font-style: normal;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  background: linear-gradient(135deg, #6fb98f, #22d3ee);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dash-alerts-ring small {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
  margin-top: 2px;
  white-space: nowrap;
}
.dash-alerts-ring b {
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text-muted);
  max-width: 130px;
}

/* Responsive hero collapse */
@media (max-width: 900px) {
  .dash-alerts-page .dash-alerts-hero {
    grid-template-columns: 1fr;
  }
  .dash-alerts-hero-movers {
    grid-template-columns: 1fr;
  }
  .dash-alerts-page .dash-alerts-radar {
    min-height: 220px;
  }
}

/* Empty-state + soft-chip group + toast (interactive UX bits) */
.dash-alerts-empty {
  padding: 22px 16px;
  border-radius: 12px;
  background: var(--surface-2);
  border: 1px dashed color-mix(in srgb, var(--border-strong) 60%, transparent);
  color: var(--text-muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: center;
  line-height: 1.85;
}
.dash-alerts-soft-chip-group {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-alerts-toast-host {
  position: fixed;
  bottom: 20px;
  inset-inline-start: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.dash-alerts-toast {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--brand-700);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  max-width: 320px;
  direction: rtl;
  font-family: 'Vazirmatn', system-ui, sans-serif;
}
.dash-alerts-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Radar orb tune */
.dash-alerts-radar { min-height: 220px; padding: 14px 20px 40px; }
.dash-alerts-radar::before {
  width: 200px; height: 200px;
  background:
    repeating-radial-gradient(circle, transparent 0 28px, rgba(44,120,115,.12) 29px 30px),
    conic-gradient(from 120deg, rgba(239, 68, 68, .08), rgba(59, 130, 246, .10), rgba(16, 185, 129, .10), rgba(239, 68, 68, .08));
}
.dash-alerts-orb { width: 128px; }
.dash-alerts-orb strong { font-size: 22px; }
.dash-alerts-wave {
  font-size: 10.5px;
  font-weight: 700;
  padding: 5px 9px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────────────
 * DiacoEmptyState (assets/js/empty-state.js) — TRFC-0013 / ARFC-0006 §6.3.
 * Namespace `es-*`. Shared "no-data / no-results / error" placeholder,
 * also the render target for the backend's 409 PREREQUISITE_MISSING contract.
 * ───────────────────────────────────────────────────────────────────────── */
.es-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 40px 24px;
  border-radius: var(--radius, 16px);
  border: 1px dashed var(--border);
  background: var(--surface);
  font-family: 'Vazirmatn', system-ui, sans-serif;
  animation: esFadeIn .25s ease;
}
@keyframes esFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.es-icon {
  font-size: 34px;
  line-height: 1;
  margin-bottom: 2px;
  filter: grayscale(.15);
}
.es-title {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--text);
}
.es-message {
  font-size: 13px;
  color: var(--text-muted);
  max-width: 420px;
  line-height: 1.9;
}
.es-actions {
  margin-top: 6px;
}
.es-cta {
  border: none;
  border-radius: var(--radius-sm, 8px);
  padding: 9px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-600), var(--brand-700));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.es-cta:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.es-cta:active { transform: translateY(0); }

/* variant accents on the icon chip background */
.es-variant-no-results .es-icon,
.es-variant-error .es-icon {
  padding: 6px;
  border-radius: 50%;
}
.es-variant-error .es-title { color: #b91c1c; }
.es-variant-error .es-cta { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.es-stage {
  position: relative;
  isolation: isolate;
  min-block-size: 430px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 24px;
  background: var(--surface);
}
.es-preview {
  display: grid;
  gap: 22px;
  min-block-size: 430px;
  padding: 34px;
  filter: blur(11px);
  opacity: .72;
  pointer-events: none;
  user-select: none;
}
.es-stage > .es-preview { filter: blur(11px); opacity: .72; }
.es-preview__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.es-preview__tiles i {
  min-block-size: 96px;
  border-radius: 22px;
  background: linear-gradient(135deg, #b8e6d3, #effbf6);
}
.es-preview__tiles i:nth-child(2) { background: linear-gradient(135deg, #b8d4f1, #eff7ff); }
.es-preview__tiles i:nth-child(3) { background: linear-gradient(135deg, #ffe4cc, #fff8ef); }
.es-preview__tiles i:nth-child(4) { background: linear-gradient(135deg, #ddd6fe, #f7f4ff); }
.es-preview__body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 20px;
}
.es-preview__bars {
  display: flex;
  align-items: end;
  gap: 12px;
  min-block-size: 210px;
  padding: 24px;
  border-radius: 24px;
  background: #f1f7fb;
}
.es-preview__bars i { flex: 1; min-inline-size: 0; border-radius: 12px 12px 5px 5px; background: #6b9fd4; }
.es-preview__bars i:nth-child(1) { block-size: 42%; background: #6dbf8f; }
.es-preview__bars i:nth-child(2) { block-size: 76%; background: #8b6fdc; }
.es-preview__bars i:nth-child(3) { block-size: 58%; background: #e8a76b; }
.es-preview__bars i:nth-child(4) { block-size: 88%; background: #e8788c; }
.es-preview__bars i:nth-child(5) { block-size: 66%; background: #48a6b8; }
.es-preview__lines { display: grid; align-content: center; gap: 16px; padding: 28px; border-radius: 24px; background: #f8fafc; }
.es-preview__lines i { display: block; block-size: 16px; border-radius: 999px; background: linear-gradient(90deg, #b8d4f1 0 68%, #e9eff3 68%); }
.es-preview__lines i:nth-child(2) { background: linear-gradient(90deg, #b8e6d3 0 46%, #e9eff3 46%); }
.es-preview__lines i:nth-child(3) { background: linear-gradient(90deg, #ddd6fe 0 82%, #e9eff3 82%); }
.es-preview__lines i:nth-child(4) { background: linear-gradient(90deg, #f5c2c7 0 57%, #e9eff3 57%); }
.es-stage__message {
  position: absolute;
  z-index: 2;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  inline-size: min(440px, calc(100% - 40px));
  filter: none !important;
  opacity: 1 !important;
  pointer-events: auto;
}
.es-stage__message .es-wrap {
  padding: 28px 24px;
  border-style: solid;
  border-color: rgba(255, 255, 255, .9);
  border-radius: 24px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 18px 50px rgba(31, 55, 70, .13);
  backdrop-filter: blur(14px);
}
@media (max-width: 760px) {
  .es-preview { padding: 22px; }
  .es-preview__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .es-preview__body { grid-template-columns: minmax(0, 1fr); }
  .es-preview__lines { display: none; }
}
/* ======================================================================
   ERP menu display mode — D-048 gam-e sheshom (erp-menu-mode.js)
   ====================================================================== */

/* Distributed ERP item hidden by the "consolidated, don't keep" mode.
   A dedicated attribute+class (not the `hidden` HTML attribute) so it can't
   collide with any other visibility mechanism already touching nav items. */
.nav-item[data-erp-hidden="true"] {
  display: none !important;
}

/* Small "ERP" tag on distributed items so operators know they're
   ERP-backed even while scattered across topical nav groups. */
.nav-erp-badge {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-700, #4c3f9e);
  background: color-mix(in srgb, var(--brand-500, #2c7873) 16%, transparent);
  border-radius: 999px;
  padding: 1px 6px;
  margin-inline-start: auto;
  white-space: nowrap;
}
.nav-subitem:hover .nav-erp-badge,
.nav-subitem.active .nav-erp-badge {
  background: color-mix(in srgb, var(--brand-500, #2c7873) 28%, transparent);
}

/* [erp-menu-dual-views] The ERP-suite pillar is now a real 3-level tree
   (Founder: «توی منو بخش مجموعه ای ار پی خودش میشه منوی اول، زنجیره تامین و
   تولید میشه لول دوم، موارد زیر مجموعه‌اش لول سوم»):
     L1 = the "مجموعهٔ ERP" pillar itself (menu-restructure.js, .mn2-pillar).
     L2 = one real collapsible .nav-group per origin topical section, built
          by erp-menu-mode.js's buildLevel2Group() — was a plain static
          <div class="nav-erp-suite-subhead"> heading before this change.
     L3 = the actual cloned route links (unchanged).
   The shell `.nav-group[data-erp-suite-group]` (erp-menu-mode.js's
   `[data-erp-suite-body]` host) sits BETWEEN L1 and L2 only because
   menu-restructure.js's pillar-wrapping mechanism needs a single member
   `.nav-group` to move into the pillar — its own header would otherwise
   repeat the pillar's "مجموعهٔ ERP (یکپارچه)" title one row down (the exact
   duplicate-title bug fixed for platform-admin below). So it's forced
   into a headless, always-expanded pass-through: L1 opens straight into
   the L2 list, no redundant middle row. */
.nav-group[data-erp-suite-group] > .nav-group-head {
  display: none;
}
.nav-group[data-erp-suite-group] > .nav-group-body {
  max-height: none !important;
  opacity: 1 !important;
  overflow: visible !important;
}

/* L2 — one real collapsible group per origin section inside the ERP suite.
   Reuses .nav-group/-head/-body verbatim (same click/caret/localStorage-
   persist wiring as every other sidebar group, app.js's initNavGroups()) —
   only trimmed a notch since it now nests one level deeper than a normal
   top-level group. */
.nav-erp-suite-subgroup {
  margin: 1px 0;
}
.nav-erp-suite-subgroup > .nav-group-head {
  padding-inline-start: 6px;
  font-size: 10.5px;
  opacity: .85;
}
.nav-erp-suite-subgroup > .nav-group-head:hover,
.nav-erp-suite-subgroup.has-active > .nav-group-head {
  opacity: 1;
}
.nav-erp-suite-subgroup > .nav-group-body {
  margin-inline-start: 4px;
}
.nav-erp-suite-subgroup > .nav-group-body .nav-subitem {
  margin-inline-start: 10px;
}

/* Small inline note on a topical group that is only PARTIALLY consolidated
   away (some items also live in the ERP suite, some don't/aren't ERP-backed
   yet) — Founder asked the two listings not to read as coincidentally-
   same-titled unrelated menus. A fully-consolidated group instead hides
   entirely (see erp-menu-mode.js's updateOriginGroupVisibility()), so this
   note only ever appears on a group that still legitimately has content of
   its own here. */
.nav-erp-partial-note {
  flex: none;
  font-size: 10px;
  color: var(--brand-600, #5a4fc0);
  opacity: .8;
  margin-inline-start: 4px;
}

/* ---------------------------------------------------------------------
   Settings page — #settings-erp-menu (emm-* namespace)
   --------------------------------------------------------------------- */
.emm-page {
  display: flex;
  flex-direction: column;
  gap: 22px;
  max-width: 920px;
}
.emm-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.emm-eyebrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-600, #5a4fc0);
}
.emm-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
}
.emm-sub {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.9;
  margin: 0;
}
.emm-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.emm-mode-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.emm-mode-card input[type="radio"] {
  margin-top: 3px;
  accent-color: var(--brand-500, #2c7873);
}
.emm-mode-card__icon {
  font-size: 22px;
  line-height: 1;
}
.emm-mode-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.emm-mode-card__body b {
  font-size: 14px;
}
.emm-mode-card__body span {
  color: var(--muted);
  line-height: 1.7;
}
.emm-mode-card:hover {
  border-color: var(--brand-400, #8a97d6);
}
.emm-mode-card--active {
  border-color: var(--brand-500, #2c7873);
  background: color-mix(in srgb, var(--brand-500, #2c7873) 7%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-500, #2c7873) 12%, transparent);
}
.emm-subopts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--surface-soft, var(--surface-2, var(--surface)));
  border: 1px solid var(--border);
  transition: opacity .18s ease;
}
.emm-subopts--irrelevant {
  opacity: .5;
}
.emm-toggle-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  cursor: pointer;
}
.emm-toggle-row input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--brand-500, #2c7873);
}
.emm-preview {
  padding: 16px;
  border-radius: 14px;
  border: 1px dashed var(--border);
}
.emm-preview-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 12px;
}
.emm-preview-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.emm-preview-group b {
  font-size: 12.5px;
  color: var(--brand-600, #5a4fc0);
  display: block;
  margin-bottom: 6px;
}
.emm-preview-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emm-preview-group li {
  font-size: 12.5px;
  color: var(--text);
  padding-inline-start: 12px;
  position: relative;
}
.emm-preview-group li::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
}
.rich-rate-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  line-height: 1.9;
}

.rich-rate-summary span,
.rich-rate-summary b {
  white-space: nowrap;
}

/* ── [crm-multi-pipeline-ui-seed] dynamic pipeline menu groups 2026-08-02 ── */
.nav-group.crm-pl-dynamic {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.nav-group.crm-pl-dynamic .nav-group-head {
  padding-inline-start: 1rem;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.nav-group.crm-pl-dynamic .nav-group-head:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.crm-pl-count {
  margin-inline-start: auto;
  background: var(--primary-tint, #e8f4ff);
  color: var(--primary, #1a73e8);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 0.72rem;
  font-weight: 600;
}
.crm-pl-pipeline-label {
  font-size: 0.68rem;
  color: var(--text-tertiary, #aaa);
  padding: 4px 1.2rem 2px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.afc-pl-loading {
  pointer-events: none;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding-inline: 1rem;
}
.afc-pl-loading__line {
  display: block;
  width: var(--afc-pl-loading-width, 68%);
  height: 11px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--surface-2) 20%, var(--border) 45%, var(--surface-2) 70%);
  background-size: 220% 100%;
  animation: afc-pl-loading-shimmer 1.2s ease-in-out infinite;
}
.afc-pl-loading:nth-child(2) .afc-pl-loading__line { --afc-pl-loading-width: 52%; }
.afc-pl-loading:nth-child(3) .afc-pl-loading__line { --afc-pl-loading-width: 61%; }
@keyframes afc-pl-loading-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .afc-pl-loading__line { animation: none; }
}
/* CRM review: the organization-tree shortcut is intentionally removed from the global header. */
html body[data-tbv-wot="1"] #wot-toggle.wot-toggle,
body[data-tbv-wot] #wot-toggle { display: none !important; }
/* CRM reports: shared design-system composition and semantic pastel themes. */
.crm-report-page { --crm-report-accent:#0f766e; --crm-report-soft:#ecfdf5; display:grid; gap:20px; }
.crm-report-page--advisors { --crm-report-accent:#6366f1; --crm-report-soft:#eef2ff; }
.crm-report-page--sources { --crm-report-accent:#0f766e; --crm-report-soft:#ecfdf5; }
.crm-report-page--loss { --crm-report-accent:#e11d48; --crm-report-soft:#fff1f2; }
.crm-report-page--followups { --crm-report-accent:#7c3aed; --crm-report-soft:#f5f3ff; }
.crm-report-page > .page-head { margin:0; padding:24px 28px; min-height:126px; border:1px solid color-mix(in srgb,var(--crm-report-accent) 18%,var(--border)); border-radius:22px; background:linear-gradient(115deg,var(--crm-report-soft),var(--surface) 68%); box-shadow:var(--shadow-sm); display:flex; align-items:center; }
.crm-report-page > .page-head .page-title { color:var(--text); margin:0 0 8px; }
.crm-report-page > .rich-statband { margin:0; }
.crm-report-page > .card { border-radius:20px; border-color:color-mix(in srgb,var(--crm-report-accent) 12%,var(--border)); box-shadow:var(--shadow-sm); padding:22px; overflow:hidden; }
.crm-report-page .card-head { padding-block-end:16px; margin-block-end:12px; border-block-end:1px solid var(--border); }
.crm-report-page .rich-bars { display:grid; gap:13px; padding:12px 4px 18px; }
.crm-report-page .rich-bar { grid-template-columns:minmax(130px,190px) minmax(220px,1fr) minmax(210px,auto); min-height:34px; padding:5px 8px; border-radius:10px; }
.crm-report-page .rich-bar:hover { background:var(--crm-report-soft); }
.crm-report-page .rich-bar-t { height:10px; background:var(--surface-2); border-radius:999px; overflow:hidden; }
.crm-report-page .rich-bar-t i { display:block; height:100%; min-width:4px; border-radius:999px; background:var(--tc); }
.crm-report-page .rp-table { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
.crm-report-page .rp-table tbody tr { transition:background-color .15s ease; }
.crm-report-page .rp-table tbody tr:hover { background:var(--crm-report-soft)!important; }
.crm-report-page--advisors>[data-cra-kpis] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.crm-report-page--advisors>[data-cra-kpis] .kpi{min-height:142px;padding:14px 16px 28px;border-color:color-mix(in srgb,var(--crm-report-accent) 15%,var(--border));box-shadow:var(--shadow-xs)}
.cra-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cra-head-actions .btn{display:inline-flex;align-items:center;gap:6px}
.crm-report-page--advisors>.page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.crm-report-page--advisors>.card{margin:0;min-width:0}
.cra-ds-grid{margin:0}.cra-row{cursor:pointer}.cra-row:focus-visible{outline:2px solid var(--crm-report-accent);outline-offset:-2px}
.cra-person{display:flex;align-items:center;gap:10px;min-width:0}.cra-person__text{display:grid;gap:2px;min-width:0}.cra-person__text strong{font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cra-person__text small{font-size:11.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cra-zero{color:var(--text-faint,#9aa3b0)}
.cra-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.cra-detail-card{margin:0;min-width:0;border-radius:20px;border-color:color-mix(in srgb,var(--crm-report-accent) 12%,var(--border));box-shadow:var(--shadow-sm);padding:22px;overflow:hidden}
.cra-detail-list{display:grid;gap:8px;max-height:460px;overflow:auto;padding:2px 2px 6px}.cra-detail-more{font-size:11.5px;color:var(--text-muted);margin-inline-end:auto}.cra-detail-foot{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding-block-start:12px;margin-block-start:10px;border-block-start:1px solid var(--border)}
.crm-report-page--sources>[data-crs-kpis] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.crm-report-page--sources>[data-crs-kpis] .kpi{min-height:142px;padding:14px 16px 28px;border-color:color-mix(in srgb,var(--crm-report-accent) 15%,var(--border));box-shadow:var(--shadow-xs)}
.crs-report-layout{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(600px,1.2fr);gap:18px;align-items:start}
.crs-report-layout>.card{margin:0;min-width:0;border-radius:20px;border-color:color-mix(in srgb,var(--crm-report-accent) 12%,var(--border));box-shadow:var(--shadow-sm);padding:22px;overflow:hidden}
.crs-chart-card .rich-bars{max-height:680px;overflow:auto;padding-inline-end:6px}.crs-chart-card .rich-bar{grid-template-columns:minmax(120px,180px) minmax(150px,1fr);align-items:center}.crs-chart-card .rich-bar-v{grid-column:1/-1;color:var(--text-muted);font-size:11px}
.crs-ds-grid{margin:0}.crs-ds-grid .ds-grid__matrix{min-width:680px}.crs-grid-row{grid-template-columns:minmax(220px,1.5fr) repeat(2,minmax(74px,.55fr)) minmax(120px,.8fr) minmax(105px,.65fr)}
.crs-grid-row>.ds-grid__cell:not(:first-child){justify-content:center;text-align:center}.crs-source-name{display:flex;align-items:center;gap:9px}.crs-source-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.crs-success{color:var(--success-700,#177245);font-weight:700}
.crm-report-page--loss>[data-crl-kpis] .kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.crm-report-page--loss>[data-crl-kpis] .kpi{min-height:142px;padding:14px 16px 28px;border-color:color-mix(in srgb,var(--crm-report-accent) 14%,var(--border));box-shadow:var(--shadow-xs)}
.crl-report-layout{display:grid;grid-template-columns:minmax(340px,.8fr) minmax(580px,1.2fr);gap:18px;align-items:start}.crl-report-layout>.card{margin:0;min-width:0;border-radius:20px;border-color:color-mix(in srgb,var(--crm-report-accent) 10%,var(--border));box-shadow:var(--shadow-sm);padding:22px;overflow:hidden}
.crl-chart-card .rich-bars{max-height:620px;overflow:auto;padding-inline-end:6px}.crl-chart-card .rich-bar{grid-template-columns:minmax(140px,200px) minmax(150px,1fr);align-items:center}.crl-chart-card .rich-bar-v{grid-column:1/-1;color:var(--text-muted);font-size:11px}
.crl-ds-grid{margin:0}.crl-ds-grid .ds-grid__matrix{min-width:650px}.crl-grid-row{grid-template-columns:minmax(280px,1.7fr) minmax(80px,.5fr) minmax(150px,.85fr) minmax(90px,.55fr)}.crl-grid-row>.ds-grid__cell:not(:first-child){justify-content:center;text-align:center}.crl-reason-name{display:flex;align-items:center;gap:9px}.crl-reason-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1280px){.crm-report-page--advisors>[data-cra-kpis] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1100px){.cra-detail-grid{grid-template-columns:1fr}}
@media(max-width:1280px){.crs-report-layout{grid-template-columns:1fr}}
@media(max-width:1280px){.crl-report-layout{grid-template-columns:1fr}}
@media (max-width:900px){.crm-report-page .rich-bar{grid-template-columns:110px 1fr}.crm-report-page .rich-bar-v{grid-column:1/-1}.crm-report-page > .page-head{padding:18px;min-height:auto}}
@media(max-width:600px){.crm-report-page--advisors>[data-cra-kpis] .kpi-grid{grid-template-columns:1fr}.cra-detail-card{padding:16px}}
@media(max-width:760px){.crm-report-page--sources>[data-crs-kpis] .kpi-grid{grid-template-columns:1fr}.crs-report-layout>.card{padding:16px}}
@media(max-width:760px){.crm-report-page--loss>[data-crl-kpis] .kpi-grid{grid-template-columns:1fr}.crl-report-layout>.card{padding:16px}}
.crm-report-page--followups>[data-crf-kpis] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.crm-report-page--followups>[data-crf-kpis] .kpi{min-height:142px;padding:14px 16px 28px;border-color:color-mix(in srgb,var(--crm-report-accent) 14%,var(--border));box-shadow:var(--shadow-xs)}
.crf-report-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}.crf-report-layout>.card{margin:0;min-width:0;border-radius:20px;border-color:color-mix(in srgb,var(--crm-report-accent) 11%,var(--border));box-shadow:var(--shadow-sm);padding:22px;overflow:hidden}.crf-chart-card .rich-bars{max-height:620px;overflow:auto;padding-inline-end:6px}.crf-chart-card .rich-bar{grid-template-columns:minmax(140px,190px) minmax(150px,1fr);align-items:center}.crf-chart-card .rich-bar-v{grid-column:1/-1;color:var(--text-muted);font-size:11px}
@media(max-width:1180px){.crf-report-layout{grid-template-columns:1fr}.crm-report-page--followups>[data-crf-kpis] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.crm-report-page--followups>[data-crf-kpis] .kpi-grid{grid-template-columns:1fr}.crf-report-layout>.card{padding:16px}}
.crm-data-quality-page{--cdq-accent:#0f766e;--cdq-soft:#ecfdf5;display:grid;gap:20px}.cdq-page-head{margin:0;padding:24px 28px;min-height:132px;border:1px solid color-mix(in srgb,var(--cdq-accent) 18%,var(--border));border-radius:22px;background:linear-gradient(115deg,var(--cdq-soft),var(--surface) 68%);box-shadow:var(--shadow-sm);display:flex;align-items:center;justify-content:space-between;gap:24px}.cdq-page-head .page-title{margin:0 0 8px}.cdq-health{display:flex;align-items:center;gap:10px;padding:12px 16px;min-width:210px;border:1px solid var(--border);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-xs)}.cdq-health>span:last-child{display:grid;gap:2px}.cdq-health b{font-size:13px;color:var(--text)}.cdq-health small{font-size:11px;color:var(--text-muted)}.cdq-health .status-dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 5px color-mix(in srgb,currentColor 12%,transparent)}.cdq-health .status-dot--warning{color:var(--warning-600,#d97706);background:currentColor}.cdq-health .status-dot--success{color:var(--success-600,#19946b);background:currentColor}.crm-data-quality-page>[data-cdq-kpis] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.crm-data-quality-page>[data-cdq-kpis] .kpi{min-height:142px;padding:14px 16px 28px;border-color:color-mix(in srgb,var(--cdq-accent) 14%,var(--border));box-shadow:var(--shadow-xs)}.cdq-queue-card{margin:0;padding:22px;border-radius:20px;border-color:color-mix(in srgb,var(--cdq-accent) 12%,var(--border));box-shadow:var(--shadow-sm);overflow:hidden}.cdq-queue-card .card-head{padding-block-end:16px;margin-block-end:12px;border-block-end:1px solid var(--border)}.cdq-grid{margin:0}.cdq-grid .ds-grid__matrix{min-width:900px}.cdq-grid-row{grid-template-columns:56px minmax(110px,.6fr) minmax(180px,1fr) minmax(260px,1.5fr) minmax(130px,.7fr) minmax(140px,.7fr)}.cdq-issues{display:flex;flex-wrap:wrap;gap:6px}.cdq-grid .ds-grid__row--head{background:var(--surface-2)}.cdq-grid .ds-grid__body .ds-grid__row:hover{background:var(--cdq-soft)}
@media(max-width:1050px){.crm-data-quality-page>[data-cdq-kpis] .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cdq-page-head{align-items:flex-start;flex-direction:column}.cdq-health{width:100%}}
@media(max-width:600px){.crm-data-quality-page>[data-cdq-kpis] .kpi-grid{grid-template-columns:1fr}.cdq-page-head,.cdq-queue-card{padding:16px}.cdq-page-head{min-height:auto}}
/* «دسترسی بخش‌ها» (section-access-page.js): only the placement of the shared patterns on the page. */
[data-sa-root]{display:grid;gap:14px}
[data-sa-root] form.ds-form{display:grid;gap:12px;margin-top:14px}
[data-sa-root] [data-sa-row][hidden],[data-sa-root] [data-part-module][hidden],[data-sa-root] [data-sa-why][hidden]{display:none}