@import url("fonts-1.css");
@import url("fonts-2.css");
@import url("fonts-3.css");
/* src/design-system/styles.css */

/* Argus CDP typefaces — geometric, modern, enterprise.
   SUBSTITUTION FLAG: no licensed brand font files were supplied. Figtree (UI/body),
   Manrope (display & figures) and JetBrains Mono (identifiers, expressions) are all
   Open Font License families served from Google Fonts. If Argus licenses a house
   typeface, replace the @import above and re-point --font-sans / --font-display. */
:root{
  --font-sans:'Figtree','Segoe UI',system-ui,-apple-system,'Noto Sans',sans-serif;
  --font-display:'Manrope','Figtree','Segoe UI',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}
:root{
  /* ---- Neutral ramp (cool grey, the chrome of the console) ---- */
  --n-0:#ffffff;--n-25:#fafbfc;--n-50:#f4f6f8;--n-100:#eaedf1;--n-200:#dce1e7;
  --n-300:#c3cad3;--n-400:#9aa4b1;--n-500:#6e7a8a;--n-600:#515c6b;--n-700:#3a4452;
  --n-800:#262e39;--n-900:#161c24;--n-950:#0d1117;

  /* ---- Primary: Argus Blue. 100 / 500 / 800 are taken straight from the logo
          (#E6F1FB pale, #378ADD iris, #0C447C outline). ---- */
  --blue-50:#f2f8fd;--blue-100:#e6f1fb;--blue-200:#c4dff6;--blue-300:#94c4ec;
  --blue-400:#5fa5e2;--blue-500:#378add;--blue-600:#1a65b5;--blue-700:#104c85;
  --blue-800:#0c447c;--blue-900:#082f57;

  /* ---- Argus Rust: the logo's pupil. Warm counterweight — personas,
          annotations, one accent per view. Never a semantic status. ---- */
  --rust-50:#fbf1ed;--rust-100:#f4dcd2;--rust-500:#c2552c;--rust-600:#993c1d;--rust-700:#752d14;

  /* ---- Support hues: data, status, taxonomy ---- */
  --teal-50:#e6f7f4;--teal-100:#c5ece5;--teal-500:#12a390;--teal-600:#0e8375;--teal-700:#0a635a;
  --green-50:#e8f6ee;--green-100:#c9ead7;--green-500:#12a05f;--green-600:#0e8a58;--green-700:#0a6b45;
  --amber-50:#fdf4e3;--amber-100:#f9e5bd;--amber-500:#d99413;--amber-600:#b7791f;--amber-700:#8d5c15;
  --red-50:#fdecea;--red-100:#fad2ce;--red-500:#e0453a;--red-600:#c9332a;--red-700:#9e261f;
  --violet-50:#f1eefe;--violet-100:#ded6fd;--violet-500:#7a5af8;--violet-600:#6039e6;--violet-700:#4a2bb5;
  --magenta-50:#fdeaf1;--magenta-100:#f9ccdc;--magenta-500:#d6336c;--magenta-600:#b32357;
  --cyan-50:#e7f5fa;--cyan-100:#c3e6f2;--cyan-500:#0e93bd;--cyan-600:#0b7599;

  /* ---- Semantic surfaces ---- */
  --surface-canvas:var(--n-50);
  --surface-card:var(--n-0);
  --surface-raised:var(--n-0);
  --surface-sunken:var(--n-100);
  --surface-subtle:var(--n-25);
  --surface-hover:var(--n-50);
  --surface-active:var(--n-100);
  --surface-selected:var(--blue-50);
  --surface-inverse:var(--n-900);
  --surface-nav:#0a1f33;
  --surface-nav-hover:#12304b;
  --surface-nav-active:#173c5c;
  --surface-overlay:rgba(13,17,23,.55);
  --surface-grid:#eef1f5;

  /* ---- Semantic text ---- */
  --text-strong:var(--n-900);
  --text-body:var(--n-800);
  --text-muted:var(--n-500);
  --text-subtle:var(--n-400);
  --text-inverse:var(--n-0);
  --text-inverse-muted:#a9b4c2;
  --text-link:var(--blue-600);
  --text-link-hover:var(--blue-700);
  --text-accent:var(--blue-600);
  --text-on-accent:#ffffff;

  /* ---- Semantic borders ---- */
  --border-subtle:var(--n-100);
  --border-default:var(--n-200);
  --border-strong:var(--n-300);
  --border-accent:var(--blue-600);
  --border-inverse:#2b3542;

  /* ---- Interactive (primary action) ---- */
  --accent-bg:var(--blue-600);
  --accent-bg-hover:var(--blue-700);
  --accent-bg-active:var(--blue-800);
  --accent-bg-subtle:var(--blue-50);
  --accent-bg-subtle-hover:var(--blue-100);
  --accent-fg:var(--blue-700);

  /* ---- Status ---- */
  --success-bg:var(--green-50);--success-border:var(--green-100);--success-fg:var(--green-700);--success-solid:var(--green-600);
  --warning-bg:var(--amber-50);--warning-border:var(--amber-100);--warning-fg:var(--amber-700);--warning-solid:var(--amber-600);
  --danger-bg:var(--red-50);--danger-border:var(--red-100);--danger-fg:var(--red-700);--danger-solid:var(--red-600);
  --info-bg:var(--blue-50);--info-border:var(--blue-100);--info-fg:var(--blue-700);--info-solid:var(--blue-600);
  --neutral-bg:var(--n-100);--neutral-border:var(--n-200);--neutral-fg:var(--n-600);--neutral-solid:var(--n-500);

  /* ---- Data visualisation: ordered categorical series ---- */
  --viz-1:var(--blue-600);
  --viz-2:var(--teal-500);
  --viz-3:var(--violet-500);
  --viz-4:var(--amber-500);
  --viz-5:var(--rust-500);
  --viz-6:var(--cyan-500);
  --viz-7:var(--green-500);
  --viz-8:var(--n-400);
  --viz-grid:var(--n-100);
  --viz-axis:var(--n-400);

  /* ---- Channel colours (campaign / journey nodes) ---- */
  --channel-email:var(--blue-600);
  --channel-sms:var(--teal-600);
  --channel-push:var(--violet-600);
  --channel-zalo:var(--cyan-600);
  --channel-ads:var(--rust-600);
  --channel-webhook:var(--n-600);

  /* ---- Focus ring ---- */
  --focus-ring:0 0 0 3px rgba(26,101,181,.28);
  --focus-ring-danger:0 0 0 3px rgba(201,51,42,.24);
}
/* Dark theme scope: add data-theme="dark" to <html> or any container. */
[data-theme="dark"]{
  --surface-canvas:#0d1117;
  --surface-card:#151a21;
  --surface-raised:#1b222b;
  --surface-sunken:#0a0e13;
  --surface-subtle:#12171e;
  --surface-hover:#1b222b;
  --surface-active:#222b36;
  --surface-selected:#0f2b45;
  --surface-inverse:var(--n-0);
  --surface-nav:#061726;
  --surface-nav-hover:#0e2a42;
  --surface-nav-active:#143852;
  --surface-overlay:rgba(4,6,9,.7);
  --surface-grid:#1b222b;

  --text-strong:#f2f5f9;
  --text-body:#dbe2ea;
  --text-muted:#93a0b0;
  --text-subtle:#6d7b8b;
  --text-inverse:var(--n-900);
  --text-inverse-muted:var(--n-600);
  --text-link:#7fbdf2;
  --text-link-hover:#a8d4f7;
  --text-accent:#7fbdf2;

  --border-subtle:#1e2631;
  --border-default:#28323e;
  --border-strong:#394554;
  --border-inverse:var(--n-200);

  --accent-bg:var(--blue-500);
  --accent-bg-hover:var(--blue-400);
  --accent-bg-active:var(--blue-600);
  --accent-bg-subtle:#0f2b45;
  --accent-bg-subtle-hover:#14385b;
  --accent-fg:#9acdf5;

  --success-bg:#0e2a1e;--success-border:#1c4733;--success-fg:#5cd39a;--success-solid:var(--green-500);
  --warning-bg:#2d2210;--warning-border:#4d3b17;--warning-fg:#e8b44c;--warning-solid:var(--amber-500);
  --danger-bg:#2e1513;--danger-border:#54221e;--danger-fg:#f18b82;--danger-solid:var(--red-500);
  --info-bg:#101f38;--info-border:#1d3661;--info-fg:#8fc4f5;--info-solid:var(--blue-500);
  --neutral-bg:#1b222b;--neutral-border:#28323e;--neutral-fg:#93a0b0;--neutral-solid:var(--n-500);

  --viz-grid:#222b36;--viz-axis:#6d7b8b;
  --focus-ring:0 0 0 3px rgba(55,138,221,.4);
}
:root{
  /* Size scale — compact enterprise. 13px is the console body size. */
  --fs-10:10px;--fs-11:11px;--fs-12:12px;--fs-13:13px;--fs-14:14px;--fs-16:16px;
  --fs-18:18px;--fs-20:20px;--fs-24:24px;--fs-30:30px;--fs-36:36px;--fs-48:48px;

  --lh-tight:1.15; /* @kind font */
  --lh-snug:1.3; /* @kind font */
  --lh-normal:1.45; /* @kind font */
  --lh-relaxed:1.6; /* @kind font */

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  --ls-tight:-0.02em; /* @kind font */
  --ls-snug:-0.01em; /* @kind font */
  --ls-normal:0; /* @kind font */
  --ls-wide:0.02em; /* @kind font */
  --ls-caps:0.06em; /* @kind font */

  /* Semantic roles: weight / size / line-height / family */
  --type-display:var(--fw-bold) var(--fs-36)/var(--lh-tight) var(--font-display);
  --type-h1:var(--fw-semibold) var(--fs-24)/var(--lh-snug) var(--font-display);
  --type-h2:var(--fw-semibold) var(--fs-20)/var(--lh-snug) var(--font-display);
  --type-h3:var(--fw-semibold) var(--fs-16)/var(--lh-snug) var(--font-display);
  --type-h4:var(--fw-semibold) var(--fs-14)/var(--lh-snug) var(--font-sans);
  --type-body:var(--fw-regular) var(--fs-13)/var(--lh-normal) var(--font-sans);
  --type-body-lg:var(--fw-regular) var(--fs-14)/var(--lh-normal) var(--font-sans);
  --type-label:var(--fw-medium) var(--fs-12)/var(--lh-snug) var(--font-sans);
  --type-caption:var(--fw-regular) var(--fs-11)/var(--lh-snug) var(--font-sans);
  --type-mono:var(--fw-regular) var(--fs-12)/var(--lh-normal) var(--font-mono);
  --type-metric:var(--fw-semibold) var(--fs-30)/var(--lh-tight) var(--font-display);
  --type-eyebrow:var(--fw-semibold) var(--fs-11)/var(--lh-snug) var(--font-sans);
}
:root{
  /* 4px base grid, with 2px and 6px half-steps for dense table chrome. */
  --sp-0:0px;--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:10px;--sp-6:12px;
  --sp-7:16px;--sp-8:20px;--sp-9:24px;--sp-10:32px;--sp-11:40px;--sp-12:48px;
  --sp-13:64px;--sp-14:80px;

  /* Layout frame */
  --nav-w:232px;
  --nav-w-collapsed:56px;
  --topbar-h:52px;
  --subbar-h:44px;
  --inspector-w:360px;
  --page-pad-x:var(--sp-9);
  --page-pad-y:var(--sp-8);
  --page-max:1440px;
  --gutter:var(--sp-7);
}
:root{
  --radius-none:0px;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;
  --radius-xl:12px;--radius-2xl:16px;--radius-pill:999px;

  --border-w:1px;--border-w-thick:2px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.06);
  --shadow-sm:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05);
  --shadow-md:0 4px 8px -2px rgba(16,24,40,.09),0 2px 4px -2px rgba(16,24,40,.05);
  --shadow-lg:0 12px 20px -6px rgba(16,24,40,.12),0 4px 8px -4px rgba(16,24,40,.06);
  --shadow-xl:0 24px 40px -12px rgba(16,24,40,.18),0 8px 16px -8px rgba(16,24,40,.08);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --shadow-nav:1px 0 0 rgba(13,17,23,.08);
}
:root{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:180ms; /* @kind other */
  --dur-slow:260ms; /* @kind other */
  --dur-slower:400ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in:cubic-bezier(.4,0,1,1); /* @kind other */
  --ease-emphasis:cubic-bezier(.2,0,0,1); /* @kind other */
  --transition-control:background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-surface:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base) var(--ease-standard); /* @kind other */
}
/* Density scopes. Compact is the default for the console; put
   data-density="comfortable" on a container for reading-heavy views. */
:root,[data-density="compact"]{
  --control-h-sm:24px;--control-h:28px;--control-h-lg:34px;
  --control-pad-x:var(--sp-4);
  --row-h:32px;
  --row-pad-x:var(--sp-6);
  --card-pad:var(--sp-7);
  --stack-gap:var(--sp-6);
  --font-size-base:var(--fs-13);
}
[data-density="comfortable"]{
  --control-h-sm:28px;--control-h:34px;--control-h-lg:40px;
  --control-pad-x:var(--sp-6);
  --row-h:44px;
  --row-pad-x:var(--sp-7);
  --card-pad:var(--sp-9);
  --stack-gap:var(--sp-7);
  --font-size-base:var(--fs-14);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-canvas);color:var(--text-body);font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--lh-normal);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6,p{margin:0}
h1{font:var(--type-h1);color:var(--text-strong);letter-spacing:var(--ls-snug)}
h2{font:var(--type-h2);color:var(--text-strong);letter-spacing:var(--ls-snug)}
h3{font:var(--type-h3);color:var(--text-strong)}
h4{font:var(--type-h4);color:var(--text-strong)}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:none;box-shadow:var(--focus-ring)}
code,kbd,pre,samp{font-family:var(--font-mono)}
::selection{background:var(--blue-100);color:var(--blue-900)}
table{border-collapse:collapse}
button,input,select,textarea{font:inherit;color:inherit}
[data-theme="dark"] ::selection{background:var(--blue-800);color:#fff}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Argus CDP component styles. Classes are prefixed hl- and consume only tokens. */
/* ---------- Icon ---------- */
.hl-icon{display:inline-block;flex:none;vertical-align:-0.125em;stroke:currentColor;fill:none;background:transparent}
/* ---------- Button ---------- */
.hl-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-3);font-family:var(--font-sans);font-weight:var(--fw-medium);white-space:nowrap;border:var(--border-w) solid transparent;border-radius:var(--radius-md);cursor:pointer;transition:var(--transition-control);text-decoration:none;user-select:none}
.hl-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hl-btn:active:not(:disabled){transform:translateY(.5px)}
.hl-btn:disabled,.hl-btn[aria-disabled="true"]{cursor:not-allowed;opacity:.45}
.hl-btn--sm{height:var(--control-h-sm);padding:0 var(--sp-4);font-size:var(--fs-12)}
.hl-btn--md{height:var(--control-h);padding:0 var(--sp-6);font-size:var(--fs-13)}
.hl-btn--lg{height:var(--control-h-lg);padding:0 var(--sp-7);font-size:var(--fs-14)}
.hl-btn--full{width:100%}
.hl-btn--primary{background:var(--accent-bg);color:var(--text-on-accent);box-shadow:var(--shadow-xs)}
.hl-btn--primary:hover:not(:disabled){background:var(--accent-bg-hover)}
.hl-btn--primary:active:not(:disabled){background:var(--accent-bg-active)}
.hl-btn--secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--border-default);box-shadow:var(--shadow-xs)}
.hl-btn--secondary:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-strong)}
.hl-btn--secondary:active:not(:disabled){background:var(--surface-active)}
.hl-btn--ghost{background:transparent;color:var(--text-body)}
.hl-btn--ghost:hover:not(:disabled){background:var(--surface-hover)}
.hl-btn--ghost:active:not(:disabled){background:var(--surface-active)}
.hl-btn--danger{background:var(--danger-solid);color:#fff;box-shadow:var(--shadow-xs)}
.hl-btn--danger:hover:not(:disabled){background:var(--red-700)}
.hl-btn--danger:focus-visible{box-shadow:var(--focus-ring-danger)}
.hl-btn--link{background:transparent;color:var(--text-link);padding:0;height:auto}
.hl-btn--link:hover:not(:disabled){color:var(--text-link-hover);text-decoration:underline}
.hl-spin{width:1em;height:1em;border:1.5px solid currentColor;border-right-color:transparent;border-radius:var(--radius-pill);animation:hl-spin var(--dur-slower) linear infinite;opacity:.8}
@keyframes hl-spin{to{transform:rotate(360deg)}}
/* ---------- IconButton ---------- */
.hl-iconbtn{display:inline-flex;align-items:center;justify-content:center;border:var(--border-w) solid transparent;border-radius:var(--radius-md);background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.hl-iconbtn:hover:not(:disabled){background:var(--surface-hover);color:var(--text-body)}
.hl-iconbtn:active:not(:disabled){background:var(--surface-active)}
.hl-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.hl-iconbtn:disabled{opacity:.4;cursor:not-allowed}
.hl-iconbtn--sm{width:var(--control-h-sm);height:var(--control-h-sm)}
.hl-iconbtn--md{width:var(--control-h);height:var(--control-h)}
.hl-iconbtn--lg{width:var(--control-h-lg);height:var(--control-h-lg)}
.hl-iconbtn--secondary{background:var(--surface-card);border-color:var(--border-default);color:var(--text-body);box-shadow:var(--shadow-xs)}
.hl-iconbtn--secondary:hover:not(:disabled){border-color:var(--border-strong);background:var(--surface-hover)}
.hl-iconbtn--primary{background:var(--accent-bg);color:#fff}
.hl-iconbtn--primary:hover:not(:disabled){background:var(--accent-bg-hover);color:#fff}
.hl-iconbtn--danger{color:var(--danger-fg)}
.hl-iconbtn--danger:hover:not(:disabled){background:var(--danger-bg);color:var(--danger-fg)}
.hl-iconbtn.is-active{background:var(--surface-selected);color:var(--accent-fg)}
/* ---------- Field shell ---------- */
.hl-field{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
.hl-field__label{font:var(--type-label);color:var(--text-body);display:flex;align-items:center;gap:var(--sp-2)}
.hl-field__req{color:var(--danger-solid)}
.hl-field__hint{font:var(--type-caption);color:var(--text-muted)}
.hl-field__hint--error{color:var(--danger-fg)}
.hl-inputwrap{display:flex;align-items:center;gap:var(--sp-4);background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--sp-5);transition:var(--transition-control);color:var(--text-subtle)}
.hl-inputwrap:hover{border-color:var(--border-strong)}
.hl-inputwrap:focus-within{border-color:var(--border-accent);box-shadow:var(--focus-ring)}
.hl-inputwrap--sm{height:var(--control-h-sm)}
.hl-inputwrap--md{height:var(--control-h)}
.hl-inputwrap--lg{height:var(--control-h-lg)}
.hl-inputwrap--invalid{border-color:var(--danger-solid)}
.hl-inputwrap--invalid:focus-within{box-shadow:var(--focus-ring-danger)}
.hl-inputwrap--disabled{background:var(--surface-sunken);border-color:var(--border-subtle);cursor:not-allowed}
.hl-input{flex:1;min-width:0;border:0;background:transparent;font-size:var(--fs-13);color:var(--text-strong);outline:none;padding:0}
.hl-input::placeholder{color:var(--text-subtle)}
.hl-input:disabled{cursor:not-allowed;color:var(--text-muted)}
.hl-affix{font-size:var(--fs-12);color:var(--text-muted);white-space:nowrap}
.hl-textarea{width:100%;background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-5);font-size:var(--fs-13);font-family:var(--font-sans);color:var(--text-strong);resize:vertical;transition:var(--transition-control);outline:none}
.hl-textarea:hover{border-color:var(--border-strong)}
.hl-textarea:focus{border-color:var(--border-accent);box-shadow:var(--focus-ring)}
/* ---------- Select ---------- */
.hl-select{position:relative;display:flex;align-items:center;min-width:0}
.hl-select select{appearance:none;width:100%;height:100%;background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);padding:0 var(--sp-9) 0 var(--sp-5);font-size:var(--fs-13);color:var(--text-strong);cursor:pointer;transition:var(--transition-control);outline:none}
.hl-select select:hover{border-color:var(--border-strong)}
.hl-select select:focus{border-color:var(--border-accent);box-shadow:var(--focus-ring)}
.hl-select select:disabled{background:var(--surface-sunken);color:var(--text-muted);cursor:not-allowed}
.hl-select--sm{height:var(--control-h-sm)}
.hl-select--md{height:var(--control-h)}
.hl-select--lg{height:var(--control-h-lg)}
.hl-select--invalid select{border-color:var(--danger-solid)}
.hl-select__caret{position:absolute;right:var(--sp-5);pointer-events:none;color:var(--text-muted)}
/* ---------- Checkbox / Radio / Switch ---------- */
.hl-choice{display:inline-flex;align-items:flex-start;gap:var(--sp-4);cursor:pointer;font-size:var(--fs-13);color:var(--text-body)}
.hl-choice--disabled{cursor:not-allowed;color:var(--text-subtle)}
.hl-choice__box{flex:none;width:15px;height:15px;margin-top:1px;border:var(--border-w) solid var(--border-strong);border-radius:var(--radius-xs);background:var(--surface-card);display:flex;align-items:center;justify-content:center;color:#fff;transition:var(--transition-control)}
.hl-choice:hover .hl-choice__box{border-color:var(--blue-400)}
.hl-choice__box--on{background:var(--accent-bg);border-color:var(--accent-bg)}
.hl-choice__box--radio{border-radius:var(--radius-pill)}
.hl-choice__dot{width:5px;height:5px;border-radius:var(--radius-pill);background:#fff}
.hl-choice__dash{width:7px;height:1.5px;background:#fff;border-radius:var(--radius-pill)}
.hl-choice input{position:absolute;opacity:0;width:0;height:0}
.hl-choice input:focus-visible+.hl-choice__box{box-shadow:var(--focus-ring)}
.hl-choice__desc{display:block;font:var(--type-caption);color:var(--text-muted);margin-top:1px}
.hl-switch{display:inline-flex;align-items:center;gap:var(--sp-5);cursor:pointer;font-size:var(--fs-13);color:var(--text-body)}
.hl-switch__track{flex:none;position:relative;background:var(--n-300);border-radius:var(--radius-pill);transition:background-color var(--dur-base) var(--ease-standard)}
.hl-switch__track--on{background:var(--accent-bg)}
.hl-switch__knob{position:absolute;top:2px;left:2px;background:#fff;border-radius:var(--radius-pill);box-shadow:var(--shadow-xs);transition:transform var(--dur-base) var(--ease-emphasis)}
.hl-switch--disabled{opacity:.5;cursor:not-allowed}
.hl-switch input{position:absolute;opacity:0}
.hl-switch input:focus-visible+.hl-switch__track{box-shadow:var(--focus-ring)}
/* ---------- Badge / Tag ---------- */
.hl-badge{display:inline-flex;align-items:center;gap:var(--sp-3);border-radius:var(--radius-sm);font-weight:var(--fw-medium);white-space:nowrap;border:var(--border-w) solid transparent}
.hl-badge--sm{height:18px;padding:0 var(--sp-3);font-size:var(--fs-10)}
.hl-badge--md{height:22px;padding:0 var(--sp-4);font-size:var(--fs-11)}
.hl-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.hl-tag{display:inline-flex;align-items:center;gap:var(--sp-3);height:22px;padding:0 var(--sp-3) 0 var(--sp-4);border-radius:var(--radius-sm);background:var(--surface-sunken);border:var(--border-w) solid var(--border-default);font-size:var(--fs-11);color:var(--text-body);white-space:nowrap}
.hl-tag__x{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border:0;background:transparent;color:var(--text-subtle);border-radius:var(--radius-xs);cursor:pointer;padding:0}
.hl-tag__x:hover{background:var(--n-200);color:var(--text-body)}
.hl-tag__swatch{width:8px;height:8px;border-radius:var(--radius-xs);flex:none}
/* ---------- Card ---------- */
.hl-card{background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-lg);transition:var(--transition-surface)}
.hl-card--flat{box-shadow:none}
.hl-card--raised{box-shadow:var(--shadow-sm)}
.hl-card--floating{box-shadow:var(--shadow-md);border-color:var(--border-subtle)}
.hl-card--interactive{cursor:pointer}
.hl-card--interactive:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.hl-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-6);padding:var(--sp-6) var(--card-pad);border-bottom:var(--border-w) solid var(--border-subtle)}
.hl-card__title{font:var(--type-h4);color:var(--text-strong)}
.hl-card__sub{font:var(--type-caption);color:var(--text-muted);margin-top:2px}
.hl-card__body{padding:var(--card-pad)}
.hl-card__foot{padding:var(--sp-6) var(--card-pad);border-top:var(--border-w) solid var(--border-subtle);background:var(--surface-subtle);border-radius:0 0 var(--radius-lg) var(--radius-lg)}
/* ---------- Tabs ---------- */
.hl-tabs{display:flex;align-items:center;gap:var(--sp-1)}
.hl-tabs--underline{border-bottom:var(--border-w) solid var(--border-default);gap:var(--sp-7)}
.hl-tab{display:inline-flex;align-items:center;gap:var(--sp-4);border:0;background:transparent;cursor:pointer;font-family:var(--font-sans);font-weight:var(--fw-medium);color:var(--text-muted);transition:var(--transition-control);white-space:nowrap}
.hl-tab:hover{color:var(--text-body)}
.hl-tabs--underline .hl-tab{padding:0 0 var(--sp-5);font-size:var(--fs-13);border-bottom:var(--border-w-thick) solid transparent;margin-bottom:-1px}
.hl-tabs--underline .hl-tab.is-active{color:var(--text-accent);border-bottom-color:var(--border-accent)}
.hl-tabs--pill{background:var(--surface-sunken);padding:2px;border-radius:var(--radius-md)}
.hl-tabs--pill .hl-tab{height:24px;padding:0 var(--sp-6);font-size:var(--fs-12);border-radius:var(--radius-sm)}
.hl-tabs--pill .hl-tab.is-active{background:var(--surface-card);color:var(--text-strong);box-shadow:var(--shadow-xs)}
.hl-tab__count{font-size:var(--fs-10);font-weight:var(--fw-medium);color:var(--text-muted);background:var(--surface-sunken);border-radius:var(--radius-sm);padding:1px var(--sp-3)}
.hl-tabs--pill .hl-tab__count{background:var(--n-200)}
.hl-tab.is-active .hl-tab__count{background:var(--accent-bg-subtle);color:var(--accent-fg)}
/* ---------- Tooltip ---------- */
.hl-tip{position:relative;display:inline-flex}
.hl-tip__bubble{position:absolute;z-index:60;background:var(--n-900);color:#fff;font-size:var(--fs-11);line-height:var(--lh-snug);padding:var(--sp-3) var(--sp-5);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast) var(--ease-standard),transform var(--dur-fast) var(--ease-standard);transform:translateY(2px)}
.hl-tip:hover .hl-tip__bubble,.hl-tip:focus-within .hl-tip__bubble{opacity:1;transform:translateY(0)}
.hl-tip__bubble--top{bottom:calc(100% + 6px);left:50%;margin-left:-50%;translate:50% 0}
.hl-tip__bubble--bottom{top:calc(100% + 6px);left:50%;translate:-50% 0}
.hl-tip__bubble--right{left:calc(100% + 6px);top:50%;translate:0 -50%}
.hl-tip__bubble--left{right:calc(100% + 6px);top:50%;translate:0 -50%}
/* ---------- Dialog ---------- */
.hl-scrim{position:fixed;inset:0;background:var(--surface-overlay);display:flex;align-items:center;justify-content:center;padding:var(--sp-10);z-index:80;animation:hl-fade var(--dur-base) var(--ease-out)}
.hl-dialog{background:var(--surface-card);border-radius:var(--radius-xl);box-shadow:var(--shadow-xl);width:100%;display:flex;flex-direction:column;max-height:100%;animation:hl-pop var(--dur-base) var(--ease-emphasis)}
.hl-dialog--sm{max-width:400px}
.hl-dialog--md{max-width:520px}
.hl-dialog--lg{max-width:720px}
.hl-dialog__head{display:flex;align-items:flex-start;gap:var(--sp-6);padding:var(--sp-8) var(--sp-8) var(--sp-6)}
.hl-dialog__body{padding:0 var(--sp-8) var(--sp-8);overflow:auto;font-size:var(--fs-13);color:var(--text-body)}
.hl-dialog__foot{display:flex;justify-content:flex-end;gap:var(--sp-5);padding:var(--sp-6) var(--sp-8);border-top:var(--border-w) solid var(--border-subtle);background:var(--surface-subtle);border-radius:0 0 var(--radius-xl) var(--radius-xl)}
@keyframes hl-fade{from{opacity:0}}
@keyframes hl-pop{from{opacity:0;transform:translateY(6px) scale(.99)}}
/* ---------- Toast ---------- */
.hl-toast{display:flex;align-items:flex-start;gap:var(--sp-5);width:360px;background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-left-width:0;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:var(--sp-6);animation:hl-slide var(--dur-base) var(--ease-emphasis)}
@keyframes hl-slide{from{opacity:0;transform:translateX(8px)}}
/* ---------- Avatar ---------- */
.hl-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--surface-sunken);color:var(--text-muted);font-weight:var(--fw-semibold);overflow:hidden;border:var(--border-w) solid var(--border-subtle)}
.hl-avatar img{width:100%;height:100%;object-fit:cover}
/* ---------- DataTable ---------- */
.hl-table{width:100%;font-size:var(--fs-13);color:var(--text-body)}
.hl-table th{text-align:left;font-size:var(--fs-11);font-weight:var(--fw-semibold);color:var(--text-muted);letter-spacing:var(--ls-wide);text-transform:uppercase;background:var(--surface-subtle);border-bottom:var(--border-w) solid var(--border-default);padding:var(--sp-4) var(--row-pad-x);white-space:nowrap}
.hl-table--sticky th{position:sticky;top:0;z-index:2}
.hl-table td{border-bottom:var(--border-w) solid var(--border-subtle);padding:0 var(--row-pad-x);height:var(--row-h);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hl-table tbody tr{transition:background-color var(--dur-fast) var(--ease-standard)}
.hl-table tbody tr:hover{background:var(--surface-hover)}
.hl-table tbody tr.is-selected{background:var(--surface-selected)}
.hl-table__num{font-variant-numeric:tabular-nums;text-align:right}
.hl-table__link{color:var(--text-link);font-weight:var(--fw-medium);cursor:pointer}
.hl-table__link:hover{text-decoration:underline}
/* ---------- Metric ---------- */
.hl-metric__label{font:var(--type-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.hl-metric__value{font:var(--type-metric);color:var(--text-strong);font-variant-numeric:tabular-nums;letter-spacing:var(--ls-tight)}
.hl-metric__delta{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-12);font-weight:var(--fw-medium)}
/* ---------- EmptyState ---------- */
.hl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);padding:var(--sp-12) var(--sp-9)}
.hl-empty__icon{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-lg);background:var(--surface-sunken);color:var(--text-subtle)}
/* ---------- ProgressMeter ---------- */
.hl-meter{display:flex;height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden}
.hl-meter__seg{height:100%;transition:width var(--dur-slow) var(--ease-standard)}
/* ---------- WorkflowNode ---------- */
.hl-node{position:relative;width:216px;background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);transition:var(--transition-surface),border-color var(--dur-fast) var(--ease-standard);cursor:pointer}
.hl-node:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong)}
.hl-node.is-selected{border-color:var(--border-accent);box-shadow:var(--focus-ring)}
.hl-node__bar{height:3px;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.hl-node__body{display:flex;gap:var(--sp-5);padding:var(--sp-6)}
.hl-node__glyph{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-md);flex:none}
.hl-node__kind{font:var(--type-eyebrow);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted)}
.hl-node__title{font-size:var(--fs-13);font-weight:var(--fw-semibold);color:var(--text-strong);margin-top:1px}
.hl-node__meta{font:var(--type-caption);color:var(--text-muted);margin-top:var(--sp-2)}
.hl-node__stats{display:flex;gap:var(--sp-6);border-top:var(--border-w) solid var(--border-subtle);padding:var(--sp-4) var(--sp-6);font-size:var(--fs-11);color:var(--text-muted)}
.hl-node__port{position:absolute;left:50%;translate:-50% 0;width:7px;height:7px;border-radius:var(--radius-pill);background:var(--surface-card);border:var(--border-w-thick) solid var(--border-strong)}
/* ---------- RuleRow ---------- */
.hl-rule{display:flex;align-items:center;gap:var(--sp-4);background:var(--surface-card);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-md);padding:var(--sp-4) var(--sp-5)}
.hl-rule:hover{border-color:var(--border-strong)}
.hl-rule__conn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:20px;border-radius:var(--radius-sm);background:var(--accent-bg-subtle);color:var(--accent-fg);font-size:var(--fs-10);font-weight:var(--fw-semibold);letter-spacing:var(--ls-caps)}
.hl-rule__attr{font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--text-strong);background:var(--surface-sunken);border:var(--border-w) solid var(--border-default);border-radius:var(--radius-sm);padding:2px var(--sp-4);font-family:var(--font-mono)}
.hl-rule__op{font-size:var(--fs-12);color:var(--text-muted)}
.hl-rule__val{font-size:var(--fs-12);font-weight:var(--fw-medium);color:var(--text-strong)}


/* src/index.css */


:root {
  /* Argus Design System Token Bridge */
  --bg-dark: var(--surface-canvas);
  --bg-canvas: var(--surface-canvas);
  --panel-bg: var(--surface-card);
  --border: var(--border-default);
  --border-light: var(--border-subtle);
  --text-main: var(--text-strong);
  --text-muted: var(--text-muted);
  
  /* Node Glow Colors */
  --node-trigger: #8b5cf6;
  --node-action: #3b82f6;
  --node-logic: #f59e0b;
  --node-timer: #10b981;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%);
  --gradient-hover: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
}

.legacy-scope, .legacy-scope * {
  box-sizing: border-box;
}

.legacy-scope {
  background-color: var(--surface-canvas);
  color: var(--text-body);
}

body {
  height: 100vh;
  overflow: hidden;
}

.dndflow {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
  height: 100vh;
}

.dndflow .reactflow-wrapper {
  flex-grow: 1;
  height: 100%;
}

.dndflow aside {
  border-right: 1px solid var(--border);
  padding: 15px 10px;
  font-size: 12px;
  background: var(--panel-bg);
  width: 250px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.dndflow aside .description {
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.dndnode {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  background: rgba(255,255,255,0.03);
  font-weight: 500;
  color: white;
  transition: all 0.2s;
}

.dndnode:hover {
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.dndnode.trigger { border-left: 4px solid var(--node-trigger); }

.dndnode.action { border-left: 4px solid var(--node-action); }

.dndnode.logic { border-left: 4px solid var(--node-logic); }

.dndnode.timer { border-left: 4px solid var(--node-timer); }

/* Custom Node Styles (Glassmorphism) */

.custom-node {
  background: rgba(18, 18, 20, 0.65);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  width: 240px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: white;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.custom-node:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  border-color: var(--border-light);
}

.custom-node .header {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.3px;
}

.custom-node .sub {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}

.node-trigger-header { 
  border-top: 3px solid var(--node-trigger); 
  box-shadow: inset 0 2px 10px rgba(168, 85, 247, 0.15);
}

.node-action-header { 
  border-top: 3px solid var(--node-action); 
  box-shadow: inset 0 2px 10px rgba(59, 130, 246, 0.15);
}

.node-logic-header { 
  border-top: 3px solid var(--node-logic); 
  box-shadow: inset 0 2px 10px rgba(245, 158, 11, 0.15);
}

.node-timer-header { 
  border-top: 3px solid var(--node-timer); 
  box-shadow: inset 0 2px 10px rgba(16, 185, 129, 0.15);
}

/* Header — scoped: a bare `header` selector would otherwise also style the
   design system's own <header className="hl-dialog__head"> inside Dialog. */

.legacy-scope header {
  height: 64px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem;
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10;
}

.btn {
  background: var(--gradient-primary);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.btn:hover { 
  background: var(--gradient-hover); 
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

/* ─── Global Dashboard Components ─── */

.cdp-page {
  padding: 32px;
  max-width: 1200px;
  margin: 0 auto;
  overflow-y: auto;
  height: 100vh;
}

.cdp-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}

.cdp-page-header h2 {
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text-main);
}

.cdp-page-header p {
  color: var(--text-muted);
  font-size: 14px;
}

.cdp-card {
  background: rgba(18, 18, 20, 0.65);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 24px;
  margin-bottom: 24px;
}

.cdp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: all 0.2s ease;
}

.cdp-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.cdp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cdp-btn-primary {
  background: var(--gradient-primary);
  border: none;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.cdp-btn-primary:hover:not(:disabled) {
  background: var(--gradient-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Premium Table */

.cdp-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.cdp-table th {
  text-align: left;
  padding: 16px;
  font-family: 'Outfit', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cdp-table td {
  padding: 16px;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  color: var(--text-main);
  vertical-align: middle;
}

.cdp-table tbody tr {
  transition: all 0.2s ease;
}

.cdp-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

/* Badges */

.cdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.cdp-badge.success {
  background: rgba(16, 185, 129, 0.15);
  color: #10b981;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.cdp-badge.warning {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
  border: 1px solid rgba(245, 158, 11, 0.3);
}

.cdp-badge.danger {
  background: rgba(239, 68, 68, 0.15);
  color: #ef4444;
  border: 1px solid rgba(239, 68, 68, 0.3);
}


/* node_modules/@xyflow/react/dist/style.css */
/* this gets exported as style.css and can be used for the default theming */
/* these are the necessary styles for React/Svelte Flow, they get used by base.css and style.css */
.react-flow {
  direction: ltr;

  --xy-edge-stroke-default: #b1b1b7;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #555;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(255, 255, 255, 0.5);

  --xy-minimap-background-color-default: #fff;
  --xy-minimap-mask-background-color-default: rgba(240, 240, 240, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #e2e2e2;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: transparent;
  --xy-background-pattern-dots-color-default: #91919a;
  --xy-background-pattern-lines-color-default: #eee;
  --xy-background-pattern-cross-color-default: #e2e2e2;
  background-color: var(--xy-background-color, var(--xy-background-color-default));
  --xy-node-color-default: inherit;
  --xy-node-border-default: 1px solid #1a192b;
  --xy-node-background-color-default: #fff;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
  --xy-node-border-radius-default: 3px;

  --xy-handle-background-color-default: #1a192b;
  --xy-handle-border-color-default: #fff;

  --xy-selection-background-color-default: rgba(0, 89, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);

  --xy-controls-button-background-color-default: #fefefe;
  --xy-controls-button-background-color-hover-default: #f4f4f4;
  --xy-controls-button-color-default: inherit;
  --xy-controls-button-color-hover-default: inherit;
  --xy-controls-button-border-color-default: #eee;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #ffffff;
  --xy-edge-label-color-default: inherit;
  --xy-resize-background-color-default: #3367d9;
}
.react-flow.dark {
  --xy-edge-stroke-default: #3e3e3e;
  --xy-edge-stroke-width-default: 1;
  --xy-edge-stroke-selected-default: #727272;

  --xy-connectionline-stroke-default: #b1b1b7;
  --xy-connectionline-stroke-width-default: 1;

  --xy-attribution-background-color-default: rgba(150, 150, 150, 0.25);

  --xy-minimap-background-color-default: #141414;
  --xy-minimap-mask-background-color-default: rgba(60, 60, 60, 0.6);
  --xy-minimap-mask-stroke-color-default: transparent;
  --xy-minimap-mask-stroke-width-default: 1;
  --xy-minimap-node-background-color-default: #2b2b2b;
  --xy-minimap-node-stroke-color-default: transparent;
  --xy-minimap-node-stroke-width-default: 2;

  --xy-background-color-default: #141414;
  --xy-background-pattern-dots-color-default: #777;
  --xy-background-pattern-lines-color-default: #777;
  --xy-background-pattern-cross-color-default: #777;
  --xy-node-color-default: #f8f8f8;
  --xy-node-border-default: 1px solid #3c3c3c;
  --xy-node-background-color-default: #1e1e1e;
  --xy-node-group-background-color-default: rgba(240, 240, 240, 0.25);
  --xy-node-boxshadow-hover-default: 0 1px 4px 1px rgba(255, 255, 255, 0.08);
  --xy-node-boxshadow-selected-default: 0 0 0 0.5px #999;

  --xy-handle-background-color-default: #bebebe;
  --xy-handle-border-color-default: #1e1e1e;

  --xy-selection-background-color-default: rgba(200, 200, 220, 0.08);
  --xy-selection-border-default: 1px dotted rgba(200, 200, 220, 0.8);

  --xy-controls-button-background-color-default: #2b2b2b;
  --xy-controls-button-background-color-hover-default: #3e3e3e;
  --xy-controls-button-color-default: #f8f8f8;
  --xy-controls-button-color-hover-default: #fff;
  --xy-controls-button-border-color-default: #5b5b5b;
  --xy-controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);

  --xy-edge-label-background-color-default: #141414;
  --xy-edge-label-color-default: #f8f8f8;
}
.react-flow__background {
  background-color: var(--xy-background-color-props, var(--xy-background-color, var(--xy-background-color-default)));
  pointer-events: none;
  z-index: -1;
}
.react-flow__container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.react-flow__pane {
  z-index: 1;
}
.react-flow__pane.draggable {
    cursor: grab;
  }
.react-flow__pane.dragging {
    cursor: grabbing;
  }
.react-flow__pane.selection {
    cursor: pointer;
  }
.react-flow__viewport {
  transform-origin: 0 0;
  z-index: 2;
  pointer-events: none;
}
.react-flow__renderer {
  z-index: 4;
}
.react-flow__selection {
  z-index: 6;
}
.react-flow__nodesselection-rect:focus,
.react-flow__nodesselection-rect:focus-visible {
  outline: none;
}
.react-flow__edge-path {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
  stroke-width: var(--xy-edge-stroke-width, var(--xy-edge-stroke-width-default));
  fill: none;
}
.react-flow__connection-path {
  stroke: var(--xy-connectionline-stroke, var(--xy-connectionline-stroke-default));
  stroke-width: var(--xy-connectionline-stroke-width, var(--xy-connectionline-stroke-width-default));
  fill: none;
}
.react-flow .react-flow__edges {
  position: absolute;
}
.react-flow .react-flow__edges svg {
    overflow: visible;
    position: absolute;
    pointer-events: none;
  }
.react-flow__edge {
  pointer-events: visibleStroke;
}
.react-flow__edge.selectable {
    cursor: pointer;
  }
.react-flow__edge.animated path {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
.react-flow__edge.animated path.react-flow__edge-interaction {
    stroke-dasharray: none;
    animation: none;
  }
.react-flow__edge.inactive {
    pointer-events: none;
  }
.react-flow__edge.selected,
  .react-flow__edge:focus,
  .react-flow__edge:focus-visible {
    outline: none;
  }
.react-flow__edge.selected .react-flow__edge-path,
  .react-flow__edge.selectable:focus .react-flow__edge-path,
  .react-flow__edge.selectable:focus-visible .react-flow__edge-path {
    stroke: var(--xy-edge-stroke-selected, var(--xy-edge-stroke-selected-default));
  }
.react-flow__edge-textwrapper {
    pointer-events: all;
  }
.react-flow__edge .react-flow__edge-text {
    pointer-events: none;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
/* Arrowhead marker styles - use CSS custom properties as default */
.react-flow__arrowhead polyline {
  stroke: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__arrowhead polyline.arrowclosed {
  fill: var(--xy-edge-stroke, var(--xy-edge-stroke-default));
}
.react-flow__connection {
  pointer-events: none;
}
.react-flow__connection .animated {
    stroke-dasharray: 5;
    animation: dashdraw 0.5s linear infinite;
  }
svg.react-flow__connectionline {
  z-index: 1001;
  overflow: visible;
  position: absolute;
}
.react-flow__nodes {
  pointer-events: none;
  transform-origin: 0 0;
}
.react-flow__node {
  position: absolute;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: all;
  transform-origin: 0 0;
  box-sizing: border-box;
  cursor: default;
}
.react-flow__node.selectable {
    cursor: pointer;
  }
.react-flow__node.draggable {
    cursor: grab;
    pointer-events: all;
  }
.react-flow__node.draggable.dragging {
      cursor: grabbing;
    }
.react-flow__nodesselection {
  z-index: 3;
  transform-origin: left top;
  pointer-events: none;
}
.react-flow__nodesselection-rect {
    position: absolute;
    pointer-events: all;
    cursor: grab;
  }
.react-flow__handle {
  position: absolute;
  pointer-events: none;
  min-width: 5px;
  min-height: 5px;
  width: 6px;
  height: 6px;
  background-color: var(--xy-handle-background-color, var(--xy-handle-background-color-default));
  border: 1px solid var(--xy-handle-border-color, var(--xy-handle-border-color-default));
  border-radius: 100%;
}
.react-flow__handle.connectingfrom {
    pointer-events: all;
  }
.react-flow__handle.connectionindicator {
    pointer-events: all;
    cursor: crosshair;
  }
.react-flow__handle-bottom {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }
.react-flow__handle-top {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-left {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
  }
.react-flow__handle-right {
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
  }
.react-flow__edgeupdater {
  cursor: move;
  pointer-events: all;
}
.react-flow__pane.selection .react-flow__panel {
  pointer-events: none;
}
.react-flow__panel {
  position: absolute;
  z-index: 5;
  margin: 15px;
}
.react-flow__panel.top {
    top: 0;
  }
.react-flow__panel.bottom {
    bottom: 0;
  }
.react-flow__panel.top.center, .react-flow__panel.bottom.center {
      left: 50%;
      transform: translateX(-15px) translateX(-50%);
    }
.react-flow__panel.left {
    left: 0;
  }
.react-flow__panel.right {
    right: 0;
  }
.react-flow__panel.left.center, .react-flow__panel.right.center {
      top: 50%;
      transform: translateY(-15px) translateY(-50%);
    }
.react-flow__attribution {
  font-size: 10px;
  background: var(--xy-attribution-background-color, var(--xy-attribution-background-color-default));
  padding: 2px 3px;
  margin: 0;
}
.react-flow__attribution a {
    text-decoration: none;
    color: #999;
  }
@keyframes dashdraw {
  from {
    stroke-dashoffset: 10;
  }
}
.react-flow__edgelabel-renderer {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  left: 0;
  top: 0;
}
.react-flow__viewport-portal {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.react-flow__minimap {
  background: var(
    --xy-minimap-background-color-props,
    var(--xy-minimap-background-color, var(--xy-minimap-background-color-default))
  );
}
.react-flow__minimap-svg {
    display: block;
  }
.react-flow__minimap-mask {
    fill: var(
      --xy-minimap-mask-background-color-props,
      var(--xy-minimap-mask-background-color, var(--xy-minimap-mask-background-color-default))
    );
    stroke: var(
      --xy-minimap-mask-stroke-color-props,
      var(--xy-minimap-mask-stroke-color, var(--xy-minimap-mask-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-mask-stroke-width-props,
      var(--xy-minimap-mask-stroke-width, var(--xy-minimap-mask-stroke-width-default))
    );
  }
.react-flow__minimap-node {
    fill: var(
      --xy-minimap-node-background-color-props,
      var(--xy-minimap-node-background-color, var(--xy-minimap-node-background-color-default))
    );
    stroke: var(
      --xy-minimap-node-stroke-color-props,
      var(--xy-minimap-node-stroke-color, var(--xy-minimap-node-stroke-color-default))
    );
    stroke-width: var(
      --xy-minimap-node-stroke-width-props,
      var(--xy-minimap-node-stroke-width, var(--xy-minimap-node-stroke-width-default))
    );
  }
.react-flow__background-pattern.dots {
    fill: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-dots-color-default))
    );
  }
.react-flow__background-pattern.lines {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-lines-color-default))
    );
  }
.react-flow__background-pattern.cross {
    stroke: var(
      --xy-background-pattern-color-props,
      var(--xy-background-pattern-color, var(--xy-background-pattern-cross-color-default))
    );
  }
.react-flow__controls {
  display: flex;
  flex-direction: column;
  box-shadow: var(--xy-controls-box-shadow, var(--xy-controls-box-shadow-default));
}
.react-flow__controls.horizontal {
    flex-direction: row;
  }
.react-flow__controls-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 26px;
    width: 26px;
    padding: 4px;
    border: none;
    background: var(--xy-controls-button-background-color, var(--xy-controls-button-background-color-default));
    border-bottom: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
    color: var(
      --xy-controls-button-color-props,
      var(--xy-controls-button-color, var(--xy-controls-button-color-default))
    );
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.react-flow__controls-button svg {
      width: 100%;
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }
.react-flow__edge.updating .react-flow__edge-path {
      stroke: #777;
    }
.react-flow__edge-text {
    font-size: 10px;
  }
.react-flow__node.selectable:focus,
  .react-flow__node.selectable:focus-visible {
    outline: none;
  }
.react-flow__node-input,
.react-flow__node-default,
.react-flow__node-output,
.react-flow__node-group {
  padding: 10px;
  border-radius: var(--xy-node-border-radius, var(--xy-node-border-radius-default));
  width: 150px;
  font-size: 12px;
  color: var(--xy-node-color, var(--xy-node-color-default));
  text-align: center;
  border: var(--xy-node-border, var(--xy-node-border-default));
  background-color: var(--xy-node-background-color, var(--xy-node-background-color-default));
}
.react-flow__node-input.selectable:hover, .react-flow__node-default.selectable:hover, .react-flow__node-output.selectable:hover, .react-flow__node-group.selectable:hover {
      box-shadow: var(--xy-node-boxshadow-hover, var(--xy-node-boxshadow-hover-default));
    }
.react-flow__node-input.selectable.selected,
    .react-flow__node-input.selectable:focus,
    .react-flow__node-input.selectable:focus-visible,
    .react-flow__node-default.selectable.selected,
    .react-flow__node-default.selectable:focus,
    .react-flow__node-default.selectable:focus-visible,
    .react-flow__node-output.selectable.selected,
    .react-flow__node-output.selectable:focus,
    .react-flow__node-output.selectable:focus-visible,
    .react-flow__node-group.selectable.selected,
    .react-flow__node-group.selectable:focus,
    .react-flow__node-group.selectable:focus-visible {
      box-shadow: var(--xy-node-boxshadow-selected, var(--xy-node-boxshadow-selected-default));
    }
.react-flow__node-group {
  background-color: var(--xy-node-group-background-color, var(--xy-node-group-background-color-default));
}
.react-flow__nodesselection-rect,
.react-flow__selection {
  background: var(--xy-selection-background-color, var(--xy-selection-background-color-default));
  border: var(--xy-selection-border, var(--xy-selection-border-default));
}
.react-flow__nodesselection-rect:focus,
  .react-flow__nodesselection-rect:focus-visible,
  .react-flow__selection:focus,
  .react-flow__selection:focus-visible {
    outline: none;
  }
.react-flow__controls-button:hover {
      background: var(
        --xy-controls-button-background-color-hover-props,
        var(--xy-controls-button-background-color-hover, var(--xy-controls-button-background-color-hover-default))
      );
      color: var(
        --xy-controls-button-color-hover-props,
        var(--xy-controls-button-color-hover, var(--xy-controls-button-color-hover-default))
      );
    }
.react-flow__controls-button:disabled {
      pointer-events: none;
    }
.react-flow__controls-button:disabled svg {
        fill-opacity: 0.4;
      }
.react-flow__controls-button:last-child {
    border-bottom: none;
  }
.react-flow__controls.horizontal .react-flow__controls-button {
    border-bottom: none;
    border-right: 1px solid
      var(
        --xy-controls-button-border-color-props,
        var(--xy-controls-button-border-color, var(--xy-controls-button-border-color-default))
      );
  }
.react-flow__controls.horizontal .react-flow__controls-button:last-child {
    border-right: none;
  }
.react-flow__resize-control {
  position: absolute;
}
.react-flow__resize-control.left,
.react-flow__resize-control.right {
  cursor: ew-resize;
}
.react-flow__resize-control.top,
.react-flow__resize-control.bottom {
  cursor: ns-resize;
}
.react-flow__resize-control.top.left,
.react-flow__resize-control.bottom.right {
  cursor: nwse-resize;
}
.react-flow__resize-control.bottom.left,
.react-flow__resize-control.top.right {
  cursor: nesw-resize;
}
/* handle styles */
.react-flow__resize-control.handle {
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 1px;
  background-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  translate: -50% -50%;
}
.react-flow__resize-control.handle.left {
  left: 0;
  top: 50%;
}
.react-flow__resize-control.handle.right {
  left: 100%;
  top: 50%;
}
.react-flow__resize-control.handle.top {
  left: 50%;
  top: 0;
}
.react-flow__resize-control.handle.bottom {
  left: 50%;
  top: 100%;
}
.react-flow__resize-control.handle.top.left {
  left: 0;
}
.react-flow__resize-control.handle.bottom.left {
  left: 0;
}
.react-flow__resize-control.handle.top.right {
  left: 100%;
}
.react-flow__resize-control.handle.bottom.right {
  left: 100%;
}
/* line styles */
.react-flow__resize-control.line {
  border-color: var(--xy-resize-background-color, var(--xy-resize-background-color-default));
  border-width: 0;
  border-style: solid;
}
.react-flow__resize-control.line.left,
.react-flow__resize-control.line.right {
  width: 1px;
  transform: translate(-50%, 0);
  top: 0;
  height: 100%;
}
.react-flow__resize-control.line.left {
  left: 0;
  border-left-width: 1px;
}
.react-flow__resize-control.line.right {
  left: 100%;
  border-right-width: 1px;
}
.react-flow__resize-control.line.top,
.react-flow__resize-control.line.bottom {
  height: 1px;
  transform: translate(0, -50%);
  left: 0;
  width: 100%;
}
.react-flow__resize-control.line.top {
  top: 0;
  border-top-width: 1px;
}
.react-flow__resize-control.line.bottom {
  border-bottom-width: 1px;
  top: 100%;
}
.react-flow__edge-textbg {
  fill: var(--xy-edge-label-background-color, var(--xy-edge-label-background-color-default));
}
.react-flow__edge-text {
  fill: var(--xy-edge-label-color, var(--xy-edge-label-color-default));
}


/* src/ruleEngine.css */



/* ====================================================
   ruleEngine.css — Stylesheet cho màn hình Rule Engine
   ==================================================== */
/* Scoped to .legacy-scope so these rules don't fight the design system's own
   base.css/body rules outside it. See design-system migration plan, PR0. */
.legacy-scope, .legacy-scope *, .legacy-scope *::before, .legacy-scope *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:        var(--surface-canvas);
  --surface:   var(--surface-card);
  --surface2:  var(--surface-subtle);
  --border:    var(--border-default);
  --border2:   var(--border-subtle);
  --text:      var(--text-strong);
  --muted:     var(--text-muted);
  --accent:    var(--blue-500);
  --accent-hover: var(--blue-600);
}
.legacy-scope { font-family: 'Inter', sans-serif; background: var(--surface-canvas); color: var(--text-body); height: 100%; overflow: hidden; }
/* ─── Layout ─────────────────────────────────────────── */
.re-app { display: flex; flex: 1; width: 100%; overflow: hidden; }
.re-sidebar {
  width: 280px; min-width: 280px;
  background: var(--surface-card);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  z-index: 5;
}
.re-sidebar-header {
  padding: 20px 16px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.re-sidebar-title { font-family: 'Outfit', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--text); letter-spacing: 0.5px; }
.btn-new-rule {
  padding: 8px 14px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  border: none; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 600;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transition: all 0.2s ease;
}
.btn-new-rule:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); }
.re-rule-list { overflow-y: auto; flex: 1; padding: 12px 8px; }
/* ─── Rule List Item ─────────────────────────────────── */
.rule-item {
  padding: 14px; border-radius: 12px; margin-bottom: 8px;
  border: 1px solid transparent; cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(255,255,255,0.02);
}
.rule-item:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); transform: translateX(4px); }
.rule-item-active { 
  background: linear-gradient(90deg, rgba(59,130,246,0.15) 0%, rgba(59,130,246,0.05) 100%) !important; 
  border-color: rgba(59, 130, 246, 0.4) !important; 
  border-left: 3px solid var(--accent) !important;
}
.rule-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.rule-item-name { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.4; }
.rule-status-dot { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 12px; color: #fff; white-space: nowrap; }
.rule-item-meta { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.rule-item-counts { display: flex; gap: 12px; font-size: 12px; color: #71717a; }
/* ─── Main Editor ────────────────────────────────────── */
.re-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); min-width: 0; min-height: 0; }
.re-topbar {
  padding: 16px 24px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; background: var(--surface-card); min-height: 64px;
}
.re-topbar-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.re-topbar-right { display: flex; gap: 12px; align-items: center; flex-shrink: 0; }
.rule-name-input {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  color: var(--text); font-family: 'Outfit', sans-serif; font-size: 1.25rem; font-weight: 600; outline: none;
  padding: 4px 8px; min-width: 250px; max-width: 400px;
  transition: all 0.2s; border-radius: 4px 4px 0 0;
}
.rule-name-input:hover { background: var(--surface-hover); }
.rule-name-input:focus { border-bottom-color: var(--accent); background: var(--surface-hover); }
.status-select {
  background: var(--surface-card); border: 1px solid var(--border2);
  border-radius: 8px; padding: 6px 12px; font-size: 12px; font-weight: 700;
  outline: none; cursor: pointer; transition: all 0.2s; color: var(--text);
}
.status-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.priority-wrap { display: flex; align-items: center; gap: 8px; }
.priority-label { font-size: 12px; color: var(--muted); font-weight: 500; }
.priority-input { width: 56px; background: var(--surface-card); border: 1px solid var(--border2); border-radius: 8px; padding: 6px 10px; color: var(--text); font-size: 13px; text-align: center; outline: none; transition: border-color 0.2s;}
.priority-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2); }
.btn-outline { padding: 8px 16px; background: var(--surface-card); border: 1px solid var(--border); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; transition: all 0.2s; }
.btn-outline:hover { background: var(--surface-hover); border-color: var(--border2); }
.btn-save { padding: 8px 20px; background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); transition: all 0.2s; }
.btn-save:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4); }
/* ─── Editor Body ────────────────────────────────────── */
.re-editor-body { display: flex; flex: 1; overflow: hidden; gap: 0; min-height: 0; }
.re-editor-col { flex: 1; overflow-y: auto; padding: 24px; }
/* ─── Sections ───────────────────────────────────────── */
.re-section { background: var(--surface-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 24px; }
.re-section-title {
  padding: 16px 20px; font-family: 'Outfit', sans-serif; font-size: 15px; font-weight: 700;
  color: var(--text); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.02);
}
.step-badge {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #6366f1); color: #fff;
  font-size: 12px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
}
/* ─── Trigger Grid ───────────────────────────────────── */
.trigger-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 14px; }
.trigger-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--border); background: rgba(255,255,255,0.02);
  transition: all 0.15s;
}
.trigger-chip:hover { background: rgba(255,255,255,0.06); border-color: #475569; }
.trigger-chip-active { background: rgba(59,130,246,0.12) !important; border-color: var(--accent) !important; }
.trigger-chip-icon { font-size: 20px; flex-shrink: 0; }
.trigger-chip-name { font-size: 12px; font-weight: 600; color: var(--text); }
.trigger-chip-cat { font-size: 10px; color: var(--muted); margin-top: 2px; }
/* ─── Condition Builder ──────────────────────────────── */
.cond-builder { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.cond-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.section-label { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.logic-toggle { display: flex; align-items: center; gap: 6px; }
.logic-label { font-size: 11px; color: var(--muted); }
.logic-btn { padding: 4px 12px; border: none; border-radius: 5px; cursor: pointer; font-size: 11px; font-weight: 700; background: var(--surface2); color: var(--muted); transition: all 0.15s; }
.logic-btn.active.AND { background: #1d4ed8; color: #fff; }
.logic-btn.active.OR  { background: #7c3aed; color: #fff; }
.cond-list { display: flex; flex-direction: column; gap: 8px; }
.cond-row {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; flex-wrap: wrap;
}
.cond-idx { font-size: 10px; font-weight: 700; color: var(--muted); min-width: 16px; text-align: center; }
.cond-value-wrap { flex: 1.5; min-width: 120px; }
.type-badge { font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 10px; flex-shrink: 0; }
.type-event   { background: rgba(59,130,246,0.2); color: #93c5fd; }
.type-profile { background: rgba(139,92,246,0.2); color: #c4b5fd; }
.btn-add-cond {
  padding: 8px 16px; background: transparent; border: 1px dashed var(--accent);
  color: var(--accent); border-radius: 7px; cursor: pointer; font-size: 12px; font-weight: 600;
  transition: all 0.15s; align-self: flex-start;
}
.btn-add-cond:hover { background: rgba(59,130,246,0.08); }
/* ─── Shared Inputs ──────────────────────────────────── */
.re-select, .re-input, .re-textarea {
  background: rgba(9, 9, 11, 0.8); color: var(--text);
  border: 1px solid var(--border2); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; outline: none; width: 100%;
  font-family: 'Inter', sans-serif; transition: all 0.2s ease;
}
.re-select { cursor: pointer; }
.re-select:focus, .re-input:focus, .re-textarea:focus { 
  border-color: var(--accent); 
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: rgba(18, 18, 20, 0.9);
}
.re-select { flex: 2; }
.re-select-sm { flex: 1.2 !important; }
.re-textarea { resize: vertical; min-height: 80px; }
.btn-icon-danger {
  background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3);
  color: #ef4444; border-radius: 8px; cursor: pointer;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0; transition: all 0.2s;
}
.btn-icon-danger:disabled { opacity: 0.3; cursor: not-allowed; }
.btn-icon-danger:not(:disabled):hover { background: rgba(239,68,68,0.2); transform: scale(1.05); }
/* ─── Action Cards ───────────────────────────────────── */
.action-list { display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 0; }
.action-card { background: rgba(255,255,255,0.02); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.action-card-header { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(0,0,0,0.2); }
.action-idx { font-size: 10px; font-weight: 700; color: var(--muted); min-width: 16px; }
.action-type-select { flex: 1; }
.action-group-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-bottom: 10px; }
.action-fields { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.action-field-row { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 11px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; }
/* ─── JSON Panel ─────────────────────────────────────── */
.json-panel {
  width: 380px; min-width: 380px; border-left: 1px solid var(--border);
  display: flex; flex-direction: column; background: rgba(9, 9, 11, 0.9); overflow: hidden;
  backdrop-filter: blur(20px);
}
.json-panel-header {
  padding: 16px 20px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 600; color: #f8fafc; letter-spacing: 0.3px;
}
.btn-copy { padding: 3px 8px; font-size: 11px; background: #1e293b; border: 1px solid #334155; color: #94a3b8; border-radius: 4px; cursor: pointer; }
.btn-copy:hover { color: #fff; }
.json-content {
  flex: 1; overflow-y: auto; padding: 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6ee7b7;
  line-height: 1.7; white-space: pre-wrap; word-break: break-all;
}
.vcodes-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 0.75rem; }
.vcodes-table th { text-align: left; color: var(--muted); font-size: 0.68rem; padding: 4px 6px; border-bottom: 1px solid var(--border2); }
.vcodes-table td { padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,0.03); }
.vcodes-table .vc-code { font-family: 'JetBrains Mono', monospace; color: #a5f3fc; font-weight: 600; }
.vcodes-table .vc-status { font-size: 0.68rem; padding: 1px 6px; border-radius: 8px; }
.vc-active { background: rgba(34,197,94,0.1); color: #22c55e; }
.gen-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #6366f1; background: rgba(99,102,241,0.1); color: #818cf8; cursor: pointer; font-size: 0.72rem; font-weight: 600; transition: 0.2s; margin-bottom: 10px; }
.gen-btn:hover { background: rgba(99,102,241,0.2); }
/* Brighten date picker icons in dark theme */
.legacy-scope input[type="date"]::-webkit-calendar-picker-indicator,
.legacy-scope input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
}
.legacy-scope input[type="date"]::-webkit-calendar-picker-indicator:hover {
  background: rgba(255,255,255,0.1);
}


/* src/components/segmentation/SegmentConditionBuilder.css */
/* ==========================================================================
   Argus CDP - Enterprise Dynamic Segmentation Studio
   Professional UX, Clean Information Architecture, Purple Ban compliant
   ========================================================================== */

.segment-studio-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Top Navigation / Header Bar --- */
.segment-studio-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  flex-wrap: wrap;
}

.studio-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.studio-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- Quick Presets Bar --- */
.presets-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface-subtle, #fafbfc);
  border: 1px solid var(--border-subtle, #eaedf1);
  border-radius: 8px;
  overflow-x: auto;
}

.presets-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted, #6e7a8a);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preset-chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  color: var(--text-strong, #161c24);
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.preset-chip-btn:hover {
  background: var(--blue-50, #f2f8fd);
  border-color: var(--blue-400, #5fa5e2);
  color: var(--blue-700, #104c85);
  transform: translateY(-1px);
}

/* --- Studio 2-Column Main Workspace --- */
.studio-workspace {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 1100px) {
  .studio-workspace {
    grid-template-columns: 1fr;
  }
}

/* --- Left Column: Criteria Blocks Canvas --- */
.criteria-canvas {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Basic Info Card */
.segment-meta-card {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.meta-grid-3 {
  display: grid;
  grid-template-columns: 240px 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .meta-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* Criteria Block Card */
.criteria-block-card {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s ease;
}

.criteria-block-card:hover {
  border-color: var(--blue-300, #94c4ec);
}

.block-header {
  padding: 12px 18px;
  background: var(--surface-subtle, #fafbfc);
  border-bottom: 1px solid var(--border-default, #dce1e7);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.block-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong, #161c24);
}

.block-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Block Connector (The glue between major criteria blocks) */
.block-connector-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin: -4px 0;
}

.block-connector-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-default, #dce1e7);
  z-index: 1;
}

.connector-pill-toggle {
  position: relative;
  z-index: 2;
  display: inline-flex;
  background: var(--surface-card, #ffffff);
  padding: 3px 6px;
  border-radius: 20px;
  border: 1px solid var(--border-default, #dce1e7);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  gap: 4px;
}

.connector-pill-btn {
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 700;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: var(--text-muted, #6e7a8a);
  cursor: pointer;
  transition: all 0.15s ease;
}

.connector-pill-btn.active.and {
  background: var(--blue-600, #1a65b5);
  color: #ffffff;
}

.connector-pill-btn.active.or {
  background: var(--amber-600, #b7791f);
  color: #ffffff;
}

/* Clean Criteria Row Item */
.criteria-row-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-subtle, #fafbfc);
  border: 1px solid var(--border-subtle, #eaedf1);
  border-radius: 6px;
  padding: 10px 14px;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.criteria-row-item:hover {
  background: var(--surface-card, #ffffff);
  border-color: var(--blue-300, #94c4ec);
}

.criteria-row-prefix {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted, #6e7a8a);
  min-width: 65px;
  text-transform: uppercase;
}

.criteria-row-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
}

/* Quick Value Selection Pills */
.value-suggestion-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  padding-left: 75px;
}

.suggestion-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 12px;
  border: 1px solid var(--border-default, #dce1e7);
  background: var(--surface-card, #ffffff);
  color: var(--text-body, #262e39);
  cursor: pointer;
  transition: all 0.12s ease;
}

.suggestion-pill:hover {
  background: var(--blue-50, #f2f8fd);
  border-color: var(--blue-400, #5fa5e2);
  color: var(--blue-700, #104c85);
}

.suggestion-pill.selected {
  background: var(--blue-600, #1a65b5);
  border-color: var(--blue-600, #1a65b5);
  color: #ffffff;
}

/* --- Right Column: Intelligence & Preview Panel --- */
.studio-intelligence-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 16px;
}

/* Audience Meter Card */
.audience-analytics-card {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

.analytics-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.analytics-header h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-strong, #161c24);
}

.audience-metric-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.metric-number-big {
  font-size: 32px;
  font-weight: 800;
  color: var(--blue-700, #104c85);
  letter-spacing: -0.5px;
}

.metric-label-unit {
  font-size: 13px;
  color: var(--text-muted, #6e7a8a);
  font-weight: 500;
}

.audience-meter-track {
  height: 8px;
  background: var(--surface-sunken, #eaedf1);
  border-radius: 4px;
  overflow: hidden;
  margin: 12px 0 8px;
}

.audience-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal-500, #12a390), var(--blue-500, #378add));
  border-radius: 4px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.audience-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted, #6e7a8a);
}

/* Natural Language Rule Box */
.natural-summary-card {
  background: var(--surface-card, #ffffff);
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  padding: 16px;
}

.summary-bubble {
  background: var(--surface-subtle, #fafbfc);
  border-left: 3px solid var(--teal-500, #12a390);
  border-radius: 4px;
  padding: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-body, #262e39);
}

.summary-bubble strong {
  color: var(--blue-700, #104c85);
}



/* Collapsible JSON Inspector */
.json-inspector-details {
  border: 1px solid var(--border-default, #dce1e7);
  border-radius: 8px;
  background: var(--surface-card, #ffffff);
  overflow: hidden;
}

.json-inspector-summary {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-strong, #161c24);
  cursor: pointer;
  user-select: none;
  background: var(--surface-subtle, #fafbfc);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.json-inspector-body {
  padding: 12px;
  background: #0d1117;
  overflow-x: auto;
}

.code-pre-box {
  margin: 0;
  font-family: 'JetBrains Mono', Consolas, monospace;
  font-size: 11px;
  color: #e6edf3;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}


/*  */
*,*::before,*::after{animation:none!important;transition:none!important;caret-color:transparent!important}