:root,
[data-theme="light"] {
  /* CTG light — high-contrast product presentation (default) */
  color-scheme: light;
  /* Cool gray canvas so white cards read as surfaces, not wash */
  --bg: #e2e9eb;
  --panel: #ffffff;
  --card: #ffffff;
  --card-hover: #d7e0e4;
  --text: #1a1e21;
  /* WCAG-friendly secondary text on white (~7:1) */
  --muted: #3a4248;
  --label: #066880;
  --border: rgba(35, 38, 40, .18);
  /* Subtle structure lines — rows, headers, section chrome */
  --line: rgba(35, 38, 40, .10);
  --line-strong: rgba(35, 38, 40, .18);
  --shadow: 0 1px 2px rgba(35, 38, 40, .06), 0 6px 20px rgba(35, 38, 40, .08);
  --on-accent: #ffffff;
  --type-muted-opacity: 0.92;

  /* CTG accents (exact brand grammar) */
  --accent: #0098c3;
  --accent-light: #2782aa;
  --accent2: #008a10;
  --accent2-light: #00aa13;
  --accent3: #b45309;
  --accent3-light: #d97706;
  --accent4: #d22e30;
  --accent5: #69266f;
  --accent6: #066880;

  --danger: var(--accent4);
  --warn: var(--accent3);
  --success: var(--accent2);
  --good: var(--success);
  --bad: var(--danger);

  /* Precision-instrument system — shared by eigenLeads and eigenCRM */
  --instrument-face: color-mix(in srgb, var(--card) 92%, var(--accent) 8%);
  --instrument-track: color-mix(in srgb, var(--muted) 18%, transparent);
  --instrument-tick: color-mix(in srgb, var(--muted) 40%, transparent);
  --instrument-tick-major: color-mix(in srgb, var(--text) 72%, transparent);
  --instrument-needle: var(--text);
  --instrument-hub: var(--panel);
  --bevel-highlight: color-mix(in srgb, var(--text) 6%, transparent);
  --bevel-shadow: color-mix(in srgb, var(--bg) 40%, transparent);
  --ease-instrument: cubic-bezier(.22, 1, .36, 1);
  --duration-instrument: 1.35s;

  /* Surfaces + overlays (tokenized for theme parity) */
  --surface: #ffffff;
  --surface-2: #eef2f4;
  --overlay: rgba(26, 30, 33, .36);
  --overlay-blur: blur(8px);
  --modal-bg: var(--card);
  --code-bg: rgba(35, 38, 40, .05);
  --code-border: rgba(35, 38, 40, .14);
  --code-text: #1a1e21;
  --ring: color-mix(in srgb, var(--accent) 45%, transparent);

  /* Gradients — sky → violet (restrained on light) */
  --gradient-primary: linear-gradient(135deg, var(--accent) 0%, var(--accent5) 100%);
  --gradient-success: linear-gradient(135deg, var(--accent2) 0%, #066880 100%);
  --gradient-card: linear-gradient(145deg, rgba(0, 152, 195, .03), rgba(105, 38, 111, .015));
  --gradient-warm: linear-gradient(135deg, var(--accent3) 0%, var(--accent4) 100%);
  /* Solid-leaning glass — avoid milky white-on-white wash */
  --glass-tint: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
  --fun-shadow: 0 8px 24px rgba(35, 38, 40, .10), 0 2px 6px rgba(0, 152, 195, .08);

  /* Motion */
  --ease-delight: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.2, 0.64, 1);

  /* Animation durations */
  --duration-fast: 0.2s;
  --duration-normal: 0.3s;
  --duration-slow: 0.6s;
  --duration-delight: 1s;

  /* Soft glows (light presentation) */
  --glow-primary: 0 0 14px rgba(0, 152, 195, 0.14);
  --glow-success: 0 0 12px rgba(0, 170, 19, 0.16);
  --glow-warning: 0 0 12px rgba(253, 176, 34, 0.16);
  --glow-danger: 0 0 12px rgba(240, 75, 76, 0.16);

  /* Transform values */
  --transform-lift: translateY(-4px) scale(1.02);
  --transform-press: scale(0.98);
  --transform-shake: translateX(-2px);

  /* Page shell — full-width content with responsive gutters */
  --page-max: none;
  --page-gutter-x: clamp(16px, 1.35vw, 28px);
  --page-gutter-y: clamp(8px, 0.7vw, 12px);

  /* Typography — ultra-sharp body defaults */
  --type-body-size: 15px;
  --type-body-line: 1.56;
  --type-body-tracking: -0.012em;
}

[data-theme="dark"] {
  /* CTG dark companion — luminous / dazzle mode */
  color-scheme: dark;
  --bg: #070b10;
  --panel: #0f161c;
  --card: #141c24;
  --card-hover: #1a2430;
  --text: #f4f8fa;
  --muted: rgba(196, 218, 226, .72);
  --border: rgba(110, 200, 239, .16);
  /* Subtle structure lines — rows, headers, section chrome */
  --line: rgba(155, 176, 183, .14);
  --line-strong: rgba(110, 200, 239, .22);
  --shadow: 0 12px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(110, 200, 239, .06);
  --on-accent: #ffffff;
  --type-muted-opacity: 0.68;

  /* Luminous CTG accents for dark dazzle */
  --accent: #5ec8f0;
  --accent-light: #9ae0f2;
  --accent2: #3dff8a;
  --accent2-light: #7dffb0;
  --accent3: #ffcf5a;
  --accent3-light: #ffe08a;
  --accent4: #ff6b6c;
  --accent5: #c86fd0;
  --accent6: #5eead4;

  --danger: var(--accent4);
  --warn: var(--accent3);
  --success: var(--accent2);
  --good: var(--success);
  --bad: var(--danger);

  --instrument-face: color-mix(in srgb, var(--card) 90%, var(--accent) 10%);
  --instrument-track: color-mix(in srgb, var(--muted) 22%, transparent);
  --instrument-tick: color-mix(in srgb, var(--muted) 44%, transparent);
  --instrument-tick-major: color-mix(in srgb, var(--text) 68%, transparent);
  --instrument-needle: var(--text);
  --instrument-hub: var(--panel);
  --bevel-highlight: color-mix(in srgb, var(--accent) 14%, transparent);
  --bevel-shadow: color-mix(in srgb, var(--bg) 55%, transparent);

  --surface: color-mix(in srgb, var(--card) 92%, transparent);
  --surface-2: color-mix(in srgb, var(--panel) 92%, transparent);
  --overlay: rgba(4, 8, 12, .62);
  --overlay-blur: blur(12px);
  --modal-bg: var(--card);
  --code-bg: rgba(94, 200, 240, .06);
  --code-border: rgba(94, 200, 240, .18);
  --code-text: #d7eef7;
  --ring: color-mix(in srgb, var(--accent) 55%, transparent);

  --gradient-primary: linear-gradient(135deg, var(--accent) 0%, var(--accent5) 100%);
  --gradient-success: linear-gradient(135deg, var(--accent2) 0%, #00aa13 100%);
  --gradient-card: linear-gradient(145deg, rgba(94, 200, 240, .12), rgba(200, 111, 208, .07));
  --gradient-warm: linear-gradient(135deg, var(--accent3) 0%, var(--accent4) 100%);
  --glass-tint: linear-gradient(125deg, rgba(255, 255, 255, .08), rgba(94, 200, 240, .03) 48%);
  --fun-shadow: 0 14px 40px rgba(0, 0, 0, .42), 0 0 28px rgba(94, 200, 240, .18);

  --glow-primary: 0 0 28px rgba(94, 200, 240, 0.42);
  --glow-success: 0 0 24px rgba(61, 255, 138, 0.32);
  --glow-warning: 0 0 22px rgba(255, 207, 90, 0.28);
  --glow-danger: 0 0 22px rgba(255, 107, 108, 0.30);
}

/* Shared precision-instrument primitives */
.instrument-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 76%, var(--text) 6%);
  border-radius: 18px;
  background:
    linear-gradient(145deg, var(--bevel-highlight), transparent 24%),
    var(--instrument-face);
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight),
    inset 0 -1px 0 var(--bevel-shadow),
    0 14px 34px color-mix(in srgb, var(--bg) 32%, transparent);
}

.instrument-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 18%, color-mix(in srgb, var(--text) 4%, transparent) 42%, transparent 64%);
}

.instrument-readout {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}

.instrument-meter {
  display: grid;
  gap: 4px;
  --instrument-tone: var(--accent);
}

.instrument-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.instrument-meter-value {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.instrument-meter-track {
  position: relative;
  height: 10px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 3px;
  background: var(--instrument-track);
  box-shadow: inset 0 1px 2px var(--bevel-shadow);
}

.instrument-meter-scale {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    color-mix(in srgb, var(--text) 14%, transparent) calc(10% - 1px),
    color-mix(in srgb, var(--text) 14%, transparent) 10%
  );
  opacity: 0.9;
  z-index: 1;
}

.instrument-meter-fill {
  position: relative;
  z-index: 2;
  width: clamp(0%, calc(var(--instrument-value, 0) * 1%), 100%);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--instrument-tone) 88%, var(--panel)),
    var(--instrument-tone)
  );
  box-shadow: none;
  transition: width var(--duration-instrument) var(--ease-instrument);
}

.instrument-meter.success,
.instrument-dial-wrap.success {
  --instrument-tone: var(--good);
}
.instrument-meter.warning,
.instrument-dial-wrap.warning {
  --instrument-tone: var(--warn);
}
.instrument-meter.danger,
.instrument-dial-wrap.danger {
  --instrument-tone: var(--bad);
}
.instrument-meter.primary,
.instrument-dial-wrap.primary {
  --instrument-tone: var(--accent);
}

.instrument-dial-wrap {
  display: inline-grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
  --instrument-tone: var(--accent);
}

.instrument-gauge-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 16px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 16px;
  background:
    radial-gradient(
      120% 90% at 50% 0%,
      color-mix(in srgb, var(--instrument-tone) 10%, var(--panel)) 0%,
      var(--panel) 55%
    );
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight, transparent),
    0 10px 24px color-mix(in srgb, var(--bg) 22%, transparent);
  transition:
    transform 0.22s var(--ease-instrument),
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

.instrument-gauge-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--instrument-tone) 34%, var(--border));
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight, transparent),
    0 14px 30px color-mix(in srgb, var(--bg) 28%, transparent),
    0 0 0 1px color-mix(in srgb, var(--instrument-tone) 12%, transparent);
}

.instrument-gauge-detail,
.instrument-dial-detail {
  max-width: 18ch;
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.instrument-dial {
  --dial-value: 0;
  --dial-size: 112px;
  position: relative;
  display: grid;
  width: var(--dial-size);
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 42%,
      color-mix(in srgb, var(--panel) 94%, var(--instrument-tone) 6%) 0 52%,
      color-mix(in srgb, var(--instrument-face) 86%, var(--panel)) 58% 100%
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 70%, transparent),
    inset 0 2px 4px var(--bevel-highlight),
    inset 0 -10px 18px color-mix(in srgb, var(--instrument-tone) 8%, transparent),
    0 10px 22px color-mix(in srgb, var(--bg) 28%, transparent);
}

.instrument-dial.is-precision {
  isolation: isolate;
}

.instrument-dial-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.instrument-dial-tick {
  stroke: color-mix(in srgb, var(--muted) 34%, transparent);
  stroke-width: 0.45;
  stroke-linecap: round;
}

.instrument-dial-tick.is-mid {
  stroke: color-mix(in srgb, var(--muted) 58%, transparent);
  stroke-width: 0.75;
}

.instrument-dial-tick.is-major {
  stroke: color-mix(in srgb, var(--text) 62%, transparent);
  stroke-width: 1.15;
}

.instrument-dial-ring-outer,
.instrument-dial-ring-inner {
  fill: none;
  stroke-linecap: round;
}

.instrument-dial-ring-outer {
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
  stroke-width: 0.9;
}

.instrument-dial-ring-inner {
  stroke: color-mix(in srgb, var(--muted) 16%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 1.2 1.8;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.instrument-dial-ring-track,
.instrument-dial-ring-progress {
  fill: none;
  stroke-width: 6.2;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

.instrument-dial-ring-track {
  stroke: color-mix(in srgb, var(--muted) 20%, transparent);
}

.instrument-dial-ring-progress {
  stroke: var(--instrument-tone);
  stroke-dasharray: var(--dial-value) 100;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--instrument-tone) 38%, transparent));
  transition: stroke-dasharray 80ms linear;
}

.instrument-dial-needle {
  transform-origin: 50% 50%;
  transform: rotate(calc(var(--dial-value) * 3.6deg));
  transition: transform 80ms linear;
}

.instrument-dial-needle line {
  stroke: color-mix(in srgb, var(--text) 78%, var(--instrument-tone));
  stroke-width: 1.4;
  stroke-linecap: round;
}

.instrument-dial-needle-blade {
  fill: color-mix(in srgb, var(--text) 82%, var(--instrument-tone));
}

.instrument-dial-hub {
  fill: var(--panel);
  stroke: color-mix(in srgb, var(--text) 55%, transparent);
  stroke-width: 1.2;
}

.instrument-dial-hub-core {
  fill: var(--instrument-tone);
}

.instrument-dial-value {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46%;
  aspect-ratio: 1;
  max-width: 46%;
  padding: 4px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 50% 40%,
      color-mix(in srgb, var(--panel) 96%, var(--instrument-tone) 4%),
      color-mix(in srgb, var(--panel) 90%, var(--instrument-tone) 10%)
    );
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--border) 55%, transparent),
    0 1px 2px color-mix(in srgb, var(--bg) 20%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(11px, calc(var(--dial-size) * 0.155), 20px);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  pointer-events: none;
}

.instrument-dial-label,
.instrument-readout-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.core-gauge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.core-gauge-grid--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.core-gauge-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .core-gauge-grid--5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 1050px) {
  .core-gauge-grid,
  .core-gauge-grid--3,
  .core-gauge-grid--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .core-gauge-grid,
  .core-gauge-grid--3,
  .core-gauge-grid--5 {
    grid-template-columns: 1fr;
  }

  .instrument-gauge-card {
    padding: 14px 12px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .instrument-gauge-card,
  .instrument-gauge-card:hover,
  .instrument-dial-needle,
  .instrument-dial-ring-progress {
    transition: none;
  }

  .instrument-gauge-card:hover {
    transform: none;
  }
}

.instrument-readout-card {
  min-width: 150px;
  padding: 8px 10px;
}

a.instrument-readout-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .18s var(--ease-instrument), border-color .18s ease;
}

a.instrument-readout-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.instrument-readout-card.success {
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight),
    inset 3px 0 0 var(--good),
    0 14px 34px color-mix(in srgb, var(--bg) 32%, transparent);
}
.instrument-readout-card.warning {
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight),
    inset 3px 0 0 var(--warn),
    0 14px 34px color-mix(in srgb, var(--bg) 32%, transparent);
}
.instrument-readout-card.primary {
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight),
    inset 3px 0 0 var(--accent),
    0 14px 34px color-mix(in srgb, var(--bg) 32%, transparent);
}
.instrument-readout-card.danger {
  box-shadow:
    inset 0 1px 0 var(--bevel-highlight),
    inset 3px 0 0 var(--bad),
    0 14px 34px color-mix(in srgb, var(--bg) 32%, transparent);
}

.instrument-readout-card .instrument-readout {
  position: relative;
  margin-top: 2px;
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 750;
}

/* Dashboard precision instrument consoles */
.dash-instrument-console > .card-inner {
  padding: 10px 12px 12px;
}

.dash-instrument-icon {
  margin-right: 8px;
  display: inline-flex;
  vertical-align: middle;
  color: var(--accent);
}
.dash-instrument-icon--good { color: var(--good); }
.dash-instrument-icon--pulse { color: var(--accent2); }

.dash-instrument-layout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 12px;
  margin-top: 8px;
  align-items: center;
}

.dash-instrument-layout--integrations {
  grid-template-columns: auto minmax(0, 1fr);
}

.dash-instrument-dials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  justify-content: center;
}

.dash-instrument-readouts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.dash-instrument-readouts--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Territory seats live dashboard */
.dash-instrument-readouts--4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 960px) {
  .dash-instrument-readouts--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.seat-dash-dials {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 28px;
  justify-content: space-around;
}
.seat-inventory-bar {
  display: grid;
  gap: 6px;
}
.seat-inventory-track {
  display: flex;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--instrument-track, var(--surface));
}
.seat-inventory-seg {
  height: 100%;
  min-width: 0;
  transition: width var(--duration-instrument, 600ms) var(--ease-instrument, ease);
}
.seat-inventory-seg.yours {
  background: color-mix(in srgb, var(--accent) 88%, var(--panel));
}
.seat-inventory-seg.others {
  background: color-mix(in srgb, var(--warn) 88%, var(--panel));
}
.seat-inventory-seg.free {
  background: color-mix(in srgb, var(--good) 88%, var(--panel));
}
.seat-inventory-seg.empty {
  background: color-mix(in srgb, var(--muted) 22%, var(--surface));
}
.seat-pipeline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.seat-pipeline-step {
  flex: 1 1 120px;
  min-width: 110px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.seat-pipeline-step.good {
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, var(--surface));
}
.seat-pipeline-step.danger {
  border-color: color-mix(in srgb, var(--bad) 45%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, var(--surface));
}
.seat-pipeline-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 18px;
  padding: 0 2px;
}
.seat-waitlist {
  display: grid;
  gap: 8px;
}
.seat-waitlist-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.instrument-panel.danger .instrument-readout,
.instrument-readout-card.danger .instrument-readout {
  color: var(--bad);
}



.dash-instrument-meters {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 10px;
}

.dash-evidence-footnote {
  font-size: 11px;
  line-height: 1.4;
}

.dash-evidence-footnote a {
  margin-left: 6px;
  font-weight: 650;
}

.ic-exec-bar > span {
  width: 0;
  transition: width var(--duration-instrument) var(--ease-instrument);
}

@media (max-width: 980px) {
  .dash-instrument-layout,
  .dash-instrument-layout--integrations {
    grid-template-columns: 1fr;
  }
  .dash-instrument-readouts--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .dash-instrument-readouts,
  .dash-instrument-readouts--3,
  .dash-instrument-meters {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  a.instrument-readout-card,
  .ic-exec-bar > span,
  .instrument-meter-fill {
    transition: none !important;
  }
  a.instrument-readout-card:hover {
    transform: none;
  }
}

.instrument-readout-detail {
  position: relative;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .instrument-meter-fill {
    transition: none;
  }

  .eigen-anim-cube {
    animation: none !important;
    transform: rotateX(-18deg) rotateY(34deg) !important;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html,
body {
  height: 100%;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html {
  font-optical-sizing: auto;
}

body {
  /* Light is canonical default; dark companion overrides below */
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(0, 152, 195, .08), transparent),
    radial-gradient(ellipse 60% 40% at 80% 0%, rgba(105, 38, 111, .06), transparent),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(16, 185, 129, .04), transparent),
    var(--bg);
  color: var(--text);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  letter-spacing: var(--type-body-tracking);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11", "ss01", "kern" 1, "liga" 1;
  font-variation-settings: "opsz" 16;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[data-theme="dark"] body {
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(94, 200, 240, .22), transparent),
    radial-gradient(ellipse 60% 40% at 85% 0%, rgba(200, 111, 208, .16), transparent),
    radial-gradient(ellipse 70% 50% at 100% 100%, rgba(61, 255, 138, .10), transparent),
    var(--bg);
}

/* ========================================
   STRUCTURE LINES — tables, headers, chrome
   ======================================== */
.topbar,
.drawer-head,
.card-head,
.panel-head,
.glass-panel-head,
.ibatch-panel-head,
.lunflow-section-header,
.demo-section-head,
.routing-section-head,
.territory-detail-section-head,
.cost-section-heading {
  border-bottom: 1px solid var(--line-strong, var(--border));
}

.sidebar {
  border-right: 1px solid var(--line-strong, var(--border));
}

.snav-divider,
.section-divider,
.hr-line {
  border: 0;
  border-top: 1px solid var(--line, var(--border));
  height: 0;
  margin: 10px 0;
}

thead th {
  border-bottom: 1px solid var(--line-strong, var(--border));
}

td,
tbody td {
  border-bottom: 1px solid var(--line, var(--border));
}

tbody tr:last-child > td {
  border-bottom-color: color-mix(in srgb, var(--line, var(--border)) 55%, transparent);
}

.ops-table {
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
}

.ops-table th {
  border-bottom: 1px solid var(--line-strong, var(--border));
}

.ops-table td {
  border-bottom: 1px solid var(--line, var(--border));
}

table.data-table,
.card > table,
.card-inner > table,
.wrap table {
  border: 1px solid var(--line, var(--border));
  border-radius: 12px;
}

.tabulator {
  border: 1px solid var(--line-strong, var(--border)) !important;
}

.tabulator-header {
  border-bottom: 1px solid var(--line-strong, var(--border)) !important;
}

.tabulator-header .tabulator-col {
  border-right: 1px solid var(--line, var(--border)) !important;
}

.tabulator-row {
  border-bottom: 1px solid var(--line, var(--border)) !important;
}

/* Ensure native `hidden` always wins (prevents stuck overlays) */
[hidden] {
  display: none !important;
}

/* Text selection (high-contrast in both themes) */
::selection {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  color: #fff;
}

::-moz-selection {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  color: #fff;
}

/* Normalize interactive elements to follow theme text color */
a {
  color: inherit;
  text-decoration: none
}

button {
  color: inherit;
  font: inherit;
}

code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  font-size: 0.85em;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 8px;
}

/* ========================================
   TOPBAR - Fixed stable layout
   ======================================== */
:root {
  --sidebar-w: 268px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 64px;
}

.app-shell {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.app-shell.has-sidebar {
  grid-template-columns: var(--sidebar-w) 1fr;
}

/* Sidebar */
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 14px 12px 12px;
  background: var(--panel);
  border-right: 1px solid var(--border);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

[data-theme="light"] .sidebar {
  background: rgba(255, 255, 255, .92);
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.sidebar-brand:hover {
  border-color: rgba(0, 152, 195, .25);
}

.sidebar-logo {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 152, 195, .18);
  flex-shrink: 0;
}

.sidebar-brand-text {
  min-width: 0;
  text-align: center;
}

.sidebar-product {
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 16px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.sidebar-tag {
  font-size: 10px;
  font-weight: 900;
  color: var(--accent2);
  margin-left: 6px;
}

.sidebar-org {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, .72);
  text-align: center;
}

[data-theme="light"] .sidebar-org {
  color: rgba(15, 23, 42, .74);
}

.sidebar-sub {
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 4px;
}

.snav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: transparent;
  color: rgba(255, 255, 255, .72);
  font-weight: 800;
  font-size: 13px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
}

[data-theme="light"] .snav {
  color: rgba(15, 23, 42, .72);
  border-color: rgba(15, 23, 42, .08);
}

.snav:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 152, 195, .22);
  background: rgba(0, 152, 195, .08);
  color: var(--text);
}

.snav.active {
  background: var(--gradient-primary);
  border-color: rgba(0, 152, 195, .45);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 152, 195, .20);
}

.snav-ico {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  flex-shrink: 0;
}

[data-theme="light"] .snav-ico {
  background: rgba(15, 23, 42, .04);
  border-color: rgba(15, 23, 42, .08);
}

.snav.active .snav-ico {
  background: rgba(0, 0, 0, .16);
  border-color: rgba(255, 255, 255, .18);
}

.snav-label {
  min-width: 0;
}

.snav-caret {
  margin-left: auto;
  opacity: .75;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease, opacity .15s ease;
}

/* Collapsible nav groups (reduce sidebar overwhelm) */
.snav-group {
  border-radius: 14px;
}

.snav-group>summary {
  list-style: none;
}

.snav-group>summary::-webkit-details-marker {
  display: none;
}

.snav-group[open] .snav-caret {
  transform: rotate(180deg);
  opacity: .95;
}

.snav-group-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Clear hierarchy: nested rail + indent */
  padding: 8px 0 4px 18px;
  margin: 6px 0 2px 10px;
  border-left: 2px solid rgba(255, 255, 255, .10);
}

[data-theme="light"] .snav-group-items {
  border-left-color: rgba(15, 23, 42, .12);
}

.snav.snav-group-head {
  cursor: pointer;
  user-select: none;
}

/* Group head default landing link (e.g. Delivery → Subscribers).
   Click navigates; caret still toggles the accordion. */
.snav.snav-group-head .snav-group-default {
  display: flex;
  align-items: center;
  gap: inherit;
  flex: 1;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.snav.snav-group-head .snav-group-default:hover,
.snav.snav-group-head .snav-group-default:focus-visible {
  color: inherit;
  outline: none;
}

.snav.snav-group-head {
  /* Section headers should never look like "active pages". */
  background: transparent;
  box-shadow: none;
}

/* Defensive: even if a header accidentally receives .active, don't paint it like a page */
.snav.snav-group-head.active {
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
}

details.snav-group[open]>summary.snav.snav-group-head {
  border-color: rgba(0, 152, 195, .18);
  background: transparent;
  color: var(--text);
}

.snav.snav-sub {
  /* Indent is handled by the group rail */
  margin-left: 0;
  padding: 9px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12.25px;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  position: relative;
  background: rgba(255, 255, 255, .02);
  border-color: rgba(255, 255, 255, .04);
}

.snav.snav-sub:hover {
  background: rgba(0, 152, 195, .06);
}

.snav.snav-sub.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: rgba(0, 152, 195, .22);
}

.snav.snav-sub::before {
  content: "";
  position: absolute;
  /* Elbow connector from rail into item */
  left: -20px;
  top: 50%;
  width: 16px;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .16);
}

.snav.snav-sub::after {
  content: "";
  position: absolute;
  left: -22px;
  top: 50%;
  width: 6px;
  height: 6px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}

[data-theme="light"] .snav.snav-sub::before {
  background: rgba(15, 23, 42, .14);
}

[data-theme="light"] .snav.snav-sub::after {
  background: rgba(15, 23, 42, .14);
}

.snav.snav-sub.active::before {
  background: color-mix(in srgb, var(--accent) 70%, transparent);
}

.snav.snav-sub.active::after {
  background: color-mix(in srgb, var(--accent) 80%, transparent);
}

.snav.snav-sub .snav-ico {
  width: 24px;
  height: 24px;
  border-radius: 9px;
}

body.sidebar-collapsed .snav-caret {
  display: none;
}

body.sidebar-collapsed .snav-group-items {
  padding: 0;
  margin: 0;
  border-left: none;
}

body.sidebar-collapsed details.snav-group:not([open]) .snav-group-items {
  display: none;
}

.snav-divider {
  height: 1px;
  margin: 8px 10px;
  background: rgba(255, 255, 255, .08);
}

[data-theme="light"] .snav-divider {
  background: rgba(15, 23, 42, .10);
}

.snav-section-label {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  color: var(--muted);
  opacity: .7;
}

body.sidebar-collapsed .snav-section-label {
  display: none;
}

.sidebar-bottom {
  margin-top: auto;
  padding: 10px 6px 6px;
  display: flex;
  justify-content: flex-end;
}

.sidebar-collapse {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  cursor: pointer;
}

.sidebar-collapse:hover {
  border-color: rgba(0, 152, 195, .22);
  background: rgba(0, 152, 195, .10);
}

/* Collapsed sidebar (desktop) */
body.sidebar-collapsed .app-shell.has-sidebar {
  grid-template-columns: var(--sidebar-w-collapsed) 1fr;
}

body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .snav-label,
body.sidebar-collapsed .snav-divider {
  display: none;
}

body.sidebar-collapsed .sidebar-brand {
  justify-content: center;
}

body.sidebar-collapsed .sidebar-nav {
  padding-left: 6px;
  padding-right: 6px;
}

body.sidebar-collapsed .snav {
  justify-content: center;
}

/* Mobile drawer */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .50);
  backdrop-filter: blur(2px);
  z-index: 95;
}

@media (max-width: 980px) {
  .app-shell.has-sidebar {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: min(86vw, 320px);
    transform: translateX(-110%);
    transition: transform .22s ease;
    z-index: 110;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  body.sidebar-open .sidebar-backdrop {
    display: block;
  }

  .sidebar-collapse {
    display: none;
  }
}

.app-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Horizontal content + inline detail panel container */
.app-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex: 1;
  min-height: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(16px) saturate(180%);
  background: var(--panel);
  border-bottom: 1px solid var(--line-strong, var(--border));
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

[data-theme="light"] .topbar {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
}

.topbar-inner {
  /* Full-width header: keep actions flush right */
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 64px;
}

.sidebar-toggle {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.sidebar-toggle:hover {
  border-color: rgba(0, 152, 195, .22);
  background: rgba(0, 152, 195, .10);
}

@media (min-width: 981px) {
  .sidebar-toggle {
    display: none;
  }
}

.topbar-title {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -.01em;
  color: rgba(255, 255, 255, .86);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 44vw;
}

a.topbar-title-link {
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  max-width: 44vw;
}

a.topbar-title-link:hover {
  color: var(--accent);
}

a.topbar-title-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}

[data-theme="light"] .topbar-title {
  color: rgba(15, 23, 42, .82);
}

@media (max-width: 980px) {
  .topbar-inner {
    padding: 10px 14px;
    gap: 12px;
  }

  .topbar-title {
    max-width: 48vw;
  }

  a.topbar-title-link {
    max-width: 48vw;
  }

  .tenant-pill {
    display: none;
  }

  .btn-ghost.danger {
    padding: 8px 10px;
  }
}

/* Brand section - fixed width on left */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  min-width: 200px;
}

.brand-left {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.logo-img {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 152, 195, .3);
  flex-shrink: 0;
}

.org-lockup {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.org-name {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-sub {
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-lockup {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.product-lockup strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.product-tag {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-light);
  margin-left: 4px;
}

.product-lockup span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Navigation - centered, takes available space */
.topbar-nav {
  display: flex;
  justify-content: center;
  flex: 1;
  min-width: 0;
}

/* Actions section - fixed width on right */
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-width: 180px;
  justify-content: flex-end;
  margin-left: auto;
}

/* Navigation Pills - stable sizing */
.nav-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid var(--border);
}

[data-theme="light"] .nav-tabs {
  background: #f1f5f9;
}

.navtab {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
  white-space: nowrap;
}

.navtab:hover {
  color: var(--text);
  background: rgba(0, 152, 195, .08);
}

[data-theme="light"] .navtab:hover {
  background: rgba(0, 152, 195, .1);
}

.navtab.active {
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 2px 8px rgba(0, 152, 195, .3);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.tenant-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border-radius: 16px;
  background:
    radial-gradient(100px 80px at 10% 0%, rgba(0, 152, 195, .22), transparent 60%),
    radial-gradient(90px 70px at 90% 20%, rgba(37, 214, 162, .14), transparent 60%),
    rgba(0, 152, 195, .10);
  border: 1px solid rgba(0, 152, 195, .22);
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  max-width: min(520px, 46vw);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .22);
}

[data-theme="light"] .tenant-pill {
  background: rgba(0, 152, 195, .08);
  border-color: rgba(0, 152, 195, .15);
}

.tenant-pill strong {
  color: var(--accent-light);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Account pill dropdown */
.whoami-wrap {
  position: relative;
}

.whoami-btn {
  cursor: pointer;
  gap: 8px;
  border-radius: 999px;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.whoami-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 152, 195, .34);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .30);
}

.whoami-btn:focus-visible {
  outline: 2px solid rgba(0, 152, 195, .55);
  outline-offset: 3px;
}

.whoami-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.whoami-avatar {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .96);
  background: var(--gradient-primary);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .28);
  flex: 0 0 auto;
}

.whoami-user,
.whoami-tenant {
  font-weight: 800;
  color: var(--accent-light);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whoami-tenant-label {
  color: var(--muted);
  font-weight: 700;
}

.whoami-dot {
  color: var(--muted);
  opacity: .9;
}

.whoami-caret {
  flex: 0 0 auto;
  opacity: .85;
}

.whoami-btn[aria-expanded="true"] {
  background: rgba(0, 152, 195, .18);
  border-color: rgba(0, 152, 195, .36);
}

.whoami-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(420px, 92vw);
  background:
    radial-gradient(240px 180px at 10% 0%, rgba(0, 152, 195, .14), transparent 60%),
    radial-gradient(220px 160px at 90% 20%, rgba(37, 214, 162, .10), transparent 60%),
    color-mix(in srgb, var(--surface) 90%, rgba(0, 0, 0, .22));
  border: 1px solid color-mix(in srgb, var(--border) 72%, rgba(0, 152, 195, .28));
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 10px;
  z-index: 60;
  animation: whoamiPop .14s ease-out;
}

[data-theme="light"] .whoami-menu {
  background: color-mix(in srgb, var(--surface) 92%, rgba(255, 255, 255, .30));
}

@keyframes whoamiPop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.whoami-head {
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: color-mix(in srgb, var(--surface2) 70%, transparent);
  margin-bottom: 8px;
}

.whoami-head-title {
  font-weight: 950;
  letter-spacing: -.2px;
}

.whoami-head-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--muted);
}

.whoami-row {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  padding: 8px 8px;
  border-radius: 12px;
}

.whoami-row:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.whoami-k {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: -0.01em;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  color: var(--muted);
  align-self: center;
}

.whoami-v {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.whoami-val {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 800;
  color: var(--text);
}

.whoami-code {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  color: var(--code-text);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-theme="light"] .whoami-code {
  background: rgba(2, 6, 23, .04);
  border-color: rgba(2, 6, 23, .10);
  color: var(--text);
}

/* Roles badges */
.whoami-roles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.role-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  color: color-mix(in srgb, var(--accent-light) 90%, var(--text));
  background: rgba(0, 152, 195, .12);
  border: 1px solid rgba(0, 152, 195, .22);
}

[data-theme="light"] .role-pill {
  background: rgba(0, 152, 195, .08);
  border-color: rgba(0, 152, 195, .18);
}

.theme-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s ease;
}

.theme-icon:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: var(--accent);
  box-shadow: var(--glow-primary);
}

.theme-icon .icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

html[data-theme="dark"] .theme-icon .icon-moon {
  opacity: 1;
  transform: scale(1);
}

html[data-theme="dark"] .theme-icon .icon-sun {
  opacity: 0;
  transform: scale(.8);
}

html[data-theme="light"] .theme-icon .icon-sun {
  opacity: 1;
  transform: scale(1);
}

html[data-theme="light"] .theme-icon .icon-moon {
  opacity: 0;
  transform: scale(.8);
}

/* ========================================
   MAIN CONTENT AREA
   ======================================== */
.wrap {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  max-width: var(--page-max, none);
  margin: 0;
  padding: var(--page-gutter-y) var(--page-gutter-x) clamp(20px, 2vw, 28px);
}

/* Templates use tw-px-7 for legacy gutters; .wrap already owns horizontal padding */
.wrap .tw-px-7 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 980px) {
  .wrap {
    padding: 8px 14px 24px;
  }
}

/* ========================================
   HERO SECTION
   ======================================== */
.hero {
  position: relative;
  padding: 8px 12px;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(0, 152, 195, .08) 0%, rgba(105, 38, 111, .05) 50%, rgba(16, 185, 129, .04) 100%),
    var(--card);
  border: 1px solid rgba(0, 152, 195, .12);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 220px;
  height: 110px;
  background: radial-gradient(ellipse, rgba(0, 152, 195, .14), transparent 70%);
  pointer-events: none;
}

.hero-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 12.5px;
  color: var(--muted);
  max-width: 72ch;
  line-height: 1.4;
  margin: 0;
}

/* ── Auth stage (login) — editorial hierarchy, Bain/McKinsey spacing discipline ── */
.auth-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
  gap: clamp(18px, 3vw, 42px);
  max-width: 1100px;
  min-height: calc(100vh - 150px);
  margin: 0 auto;
  align-items: center;
  isolation: isolate;
}

.auth-stage::before {
  content: '';
  position: absolute;
  inset: -8% -4% auto;
  height: min(62vh, 560px);
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 55% 70% at 18% 42%,
      color-mix(in srgb, var(--accent) 8%, transparent),
      transparent 68%
    );
  filter: blur(2px);
}

.auth-intro {
  position: relative;
  min-height: 0;
  padding: clamp(28px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  overflow: hidden;
  border-radius: 16px;
  background:
    linear-gradient(
      155deg,
      color-mix(in srgb, var(--text) 2%, transparent),
      transparent 44%
    ),
    var(--panel);
}

.auth-intro-head {
  display: grid;
  gap: 14px;
  max-width: 34rem;
}

.auth-eyebrow {
  color: var(--muted);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-intro h1 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.auth-deck,
.auth-intro > p {
  max-width: 38ch;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.58;
}

.auth-mark,
.auth-insight {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 28px);
  margin-top: clamp(28px, 4vw, 40px);
  padding-top: clamp(22px, 3vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--border) 88%, var(--text) 6%);
}

.auth-mark-visual {
  position: relative;
  width: 88px;
  display: grid;
  place-items: center;
}

.auth-mark-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 104px;
  height: 104px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--accent) 18%, transparent),
    transparent 72%
  );
  filter: blur(14px);
  animation: auth-mark-breathe 6.5s ease-in-out infinite;
}

.auth-mark .eigen-orb {
  position: relative;
  z-index: 1;
  filter: drop-shadow(
      0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent)
    )
    drop-shadow(0 0 18px color-mix(in srgb, var(--accent2) 10%, transparent));
}

.auth-mark-copy {
  display: grid;
  gap: 8px;
  padding-left: 14px;
  border-left: 2px solid color-mix(in srgb, var(--accent2) 55%, var(--border));
}

.auth-insight-kicker {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.auth-insight-title,
.auth-mark-copy strong {
  margin: 0;
  color: var(--text);
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.auth-insight-title {
  color: var(--accent2);
}

.auth-insight-detail,
.auth-mark-copy span {
  max-width: 30ch;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.auth-card {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent),
    0 22px 48px color-mix(in srgb, var(--bg) 34%, transparent);
}

.auth-card .card-inner {
  padding: clamp(22px, 3.5vw, 34px);
}

.auth-bootstrap {
  grid-column: 2;
}

@keyframes auth-mark-breathe {
  0%,
  100% {
    opacity: 0.62;
    transform: translate(-50%, -50%) scale(0.96);
  }
  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.04);
  }
}

@media (max-width: 760px) {
  .auth-stage {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-intro {
    padding: 22px 18px;
  }

  .auth-intro h1,
  .auth-deck,
  .auth-intro > p {
    max-width: none;
  }

  .auth-mark,
  .auth-insight {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .auth-mark-copy {
    padding-left: 0;
    border-left: none;
  }

  .auth-insight-detail,
  .auth-mark-copy span {
    max-width: none;
  }

  .auth-bootstrap {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-mark-glow {
    animation: none;
    opacity: 0.75;
  }
}

.hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px 2px 6px;
  margin-bottom: 4px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-transform: uppercase;
}

.hero-hook {
  color: var(--accent);
}

/* ========================================
   GRID SYSTEM
   ======================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
}

/*
  Default: every direct child spans the full 12-col track.
  Explicit .col-* below override this. Without the default, omitted
  col-* classes collapse fields to 1/12 width (tiny inputs beside labels).

  Skip when columns are overridden via tw-grid-cols-* or an inline
  grid-template-columns style (those layouts rely on auto-placement).
*/
.grid:not([class*="tw-grid-cols-"]):not([style*="grid-template-columns"]) > * {
  grid-column: 1 / -1;
  min-width: 0;
}

.col-12 {
  grid-column: span 12 !important;
}

.col-9 {
  grid-column: span 9 !important;
}

.col-8 {
  grid-column: span 8 !important;
}

.col-7 {
  grid-column: span 7 !important;
}

.col-6 {
  grid-column: span 6 !important;
}

.col-5 {
  grid-column: span 5 !important;
}

.col-4 {
  grid-column: span 4 !important;
}

.col-3 {
  grid-column: span 3 !important;
}

/*
  Vertical form / field stacks — prefer this over .grid for label+input
  stacks. Never uses the 12-col system, so it cannot collapse.
*/
.form-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.form-stack > * {
  min-width: 0;
  width: 100%;
}

.form-stack.form-stack--tight {
  gap: 8px;
}

.form-stack.form-stack--loose {
  gap: 14px;
}

/* ========================================
   CARDS
   ======================================== */
.card {
  background:
    var(--gradient-card),
    var(--glass-tint),
    var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transition: all .2s ease;
  overflow: hidden;
}

.card:hover {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow: var(--fun-shadow);
  transform: translateY(-2px);
}

.card-inner {
  padding: 12px 14px;
}

.card-inner.compact {
  padding: 10px 12px;
}

/* Mobile safety net: dense data tables placed directly in a card (no
   dedicated scroll wrapper) must scroll horizontally within the card
   instead of forcing the whole page to overflow sideways on narrow
   viewports. Scoped to direct-child tables so it never clips unrelated
   absolutely-positioned dropdowns/overlays living in other card-inners. */
@media (max-width: 900px) {
  .card-inner:has(> table),
  .card-inner:has(> form > table) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.compact-grid {
  gap: 12px;
}

.form-compact .footer-note {
  margin-top: 6px;
  font-size: 11px;
}

.form-compact input,
.form-compact textarea,
.form-compact select {
  padding: 10px 14px;
  font-size: 13px;
}

.form-compact .dow-pill {
  padding: 6px 10px;
  font-size: 11px;
}

/* Compact cadence control (Schedules) */
.cadence-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.cadence-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cadence-interval {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.input-mini {
  width: 84px;
  padding: 10px 12px;
}

.segmented {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
}

.segmented input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.segmented input:focus-visible+.segment {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.segmented input:checked+.segment {
  background: var(--gradient-primary);
  color: var(--on-accent);
}

/* Dashboard chart cards: tighter vertical rhythm */
.dash-compact-row {
  /* Prevent taller chart card from forcing row height */
  align-items: start;
}

.dash-chart .card-inner {
  padding: 10px 12px;
}

.dash-chart .section-title {
  margin-bottom: 6px;
}

.dash-chart .footer-note {
  margin-top: 8px;
}

/* Dashboard: summarized Packs + Runs (cards, not tables) */
.dash-summary-row {
  align-items: start;
}

.dash-metric-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

@media (max-width: 980px) {
  .dash-metric-strip {
    grid-template-columns: 1fr;
  }
}

.dash-metric {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 6px 8px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .55), rgba(15, 23, 42, .65));
  box-shadow: 0 14px 40px rgba(0, 0, 0, .20);
  position: relative;
  overflow: hidden;
}

.dash-metric::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .10) 14%, transparent 28%);
  transform: translateX(-140%);
  opacity: .0;
  pointer-events: none;
}

.dash-metric:hover::after {
  opacity: 1;
  animation: dashSheen 1.2s ease-out;
}

@keyframes dashSheen {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }

  20% {
    opacity: .22;
  }

  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

.dash-metric-k {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  color: rgba(255, 255, 255, .55);
}

.dash-metric-v {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--text);
}

.dash-metric-sub {
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, .48);
}

/* Light theme: dashboard metric cards should be bright, readable, and consistent */
[data-theme="light"] .dash-metric {
  border: 1px solid rgba(15, 23, 42, .12);
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

[data-theme="light"] .dash-metric::after {
  background: linear-gradient(120deg, transparent 0%, rgba(15, 23, 42, .08) 14%, transparent 28%);
}

[data-theme="light"] .dash-metric-k {
  color: rgba(15, 23, 42, .55);
}

[data-theme="light"] .dash-metric-sub {
  color: rgba(15, 23, 42, .55);
}

.metric-indigo {
  border-color: rgba(0, 152, 195, .28);
  box-shadow: 0 16px 44px rgba(0, 152, 195, .10);
}

.metric-indigo .dash-metric-v {
  background: linear-gradient(135deg, var(--accent), var(--accent5));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-teal {
  border-color: rgba(16, 185, 129, .26);
  box-shadow: 0 16px 44px rgba(16, 185, 129, .10);
}

.metric-teal .dash-metric-v {
  background: linear-gradient(135deg, var(--accent2), var(--accent6));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-amber {
  border-color: rgba(245, 158, 11, .26);
  box-shadow: 0 16px 44px rgba(245, 158, 11, .10);
}

.metric-amber .dash-metric-v {
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-purple {
  border-color: rgba(105, 38, 111, .26);
  box-shadow: 0 16px 44px rgba(105, 38, 111, .10);
}

.metric-purple .dash-metric-v {
  background: linear-gradient(135deg, var(--accent5), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-green {
  border-color: rgba(16, 185, 129, .26);
  box-shadow: 0 16px 44px rgba(16, 185, 129, .10);
}

.metric-green .dash-metric-v {
  background: linear-gradient(135deg, var(--accent2), #059669);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.metric-cyan {
  border-color: rgba(6, 182, 212, .26);
  box-shadow: 0 16px 44px rgba(6, 182, 212, .10);
}

.metric-cyan .dash-metric-v {
  background: linear-gradient(135deg, var(--accent6), var(--accent-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dash-card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dash-run-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (max-width: 980px) {
  .dash-card-grid {
    grid-template-columns: 1fr;
  }
}

.dash-item {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 12px 12px;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
  position: relative;
  overflow: hidden;
}

.dash-item-exec::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .12), transparent 60%);
  opacity: .45;
  pointer-events: none;
  mix-blend-mode: screen;
}

.dash-item-exec::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .12) 15%, transparent 30%);
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}

.dash-item-exec:hover::after {
  opacity: 1;
  animation: dashSheen 1.35s ease-out;
}

.dash-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 152, 195, .28);
  background: color-mix(in srgb, var(--card-hover) 92%, transparent);
}

.dash-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dash-item-title {
  min-width: 0;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-item-sub {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.dash-heat {
  margin-top: 10px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
}

.dash-heat-fill {
  height: 100%;
  width: 22%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 152, 195, .20), rgba(0, 152, 195, .85), rgba(105, 38, 111, .75));
  box-shadow: 0 0 18px rgba(0, 152, 195, .18);
  background-size: 220% 100%;
  animation: dashHeatMove 2.4s ease-in-out infinite;
}

.dash-heat-fill.tone-active {
  animation-duration: 1.6s;
}

.dash-heat-fill.tone-good {
  background: linear-gradient(90deg, rgba(16, 185, 129, .20), rgba(16, 185, 129, .88), rgba(6, 182, 212, .55));
  box-shadow: 0 0 18px rgba(16, 185, 129, .16);
}

.dash-heat-fill.tone-warn {
  background: linear-gradient(90deg, rgba(245, 158, 11, .18), rgba(245, 158, 11, .88), rgba(0, 152, 195, .30));
  box-shadow: 0 0 18px rgba(245, 158, 11, .16);
}

.dash-heat-fill.tone-bad {
  background: linear-gradient(90deg, rgba(239, 68, 68, .18), rgba(239, 68, 68, .88), rgba(245, 158, 11, .30));
  box-shadow: 0 0 18px rgba(239, 68, 68, .14);
}

@keyframes dashHeatMove {

  0%,
  100% {
    background-position: 0% 50%;
    filter: saturate(1.0);
  }

  50% {
    background-position: 100% 50%;
    filter: saturate(1.25);
  }
}

.dash-id {
  font-size: 11px;
}

.dash-empty {
  border: 1px dashed rgba(255, 255, 255, .16);
  border-radius: 16px;
  padding: 18px 14px;
  text-align: center;
  background: color-mix(in srgb, var(--card) 85%, transparent);
}

/* Ops console (Packs page): left nav + filters + detail panel */
.ops-shell {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px) {
  .ops-shell {
    grid-template-columns: 1fr;
  }
}

.ops-left {
  position: sticky;
  top: 88px;
}

@media (max-width: 980px) {
  .ops-left {
    position: static;
    top: auto;
  }
}

.ops-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.ops-tab {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: rgba(255, 255, 255, .78);
  font-weight: 800;
}

.ops-tab:hover {
  border-color: rgba(0, 152, 195, .30);
  transform: translateY(-1px);
}

.ops-tab.active {
  background: var(--gradient-primary);
  border-color: rgba(0, 152, 195, .45);
  color: white;
}

.ops-count {
  font-size: 11px;
  opacity: .85;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(0, 0, 0, .15);
}

.ops-filters input,
.ops-filters select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--text);
}

.ops-filter-row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.ops-list {
  max-height: calc(100vh - 88px - 210px);
  overflow: auto;
  padding-right: 4px;
}

.ops-item {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  padding: 14px 14px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
  cursor: pointer;
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
  margin-bottom: 10px;
}

.ops-item:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 152, 195, .30);
  background: color-mix(in srgb, var(--card-hover) 92%, transparent);
}

.ops-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ops-item-title {
  font-weight: 900;
  font-size: 14px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-item-title-main {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.ops-item-sub {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 10px;
}

.ops-code {
  font-size: 11px;
  word-break: break-all;
  white-space: normal;
  display: block;
  line-height: 1.2;
}

.ops-item-sub .muted {
  font-size: 12px;
}

.ops-group {
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
  overflow: hidden;
  margin-bottom: 12px;
}

.ops-group-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 12px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(0, 152, 195, .08), rgba(105, 38, 111, .05));
}

.ops-group-summary::-webkit-details-marker {
  display: none;
}

.ops-group-name {
  font-weight: 900;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-group-body {
  padding: 10px 10px 2px;
}

.ops-group .ops-item {
  margin-bottom: 10px;
  box-shadow: none;
  background: color-mix(in srgb, var(--card-hover) 70%, transparent);
}

.ops-group .ops-item:hover {
  background: color-mix(in srgb, var(--card-hover) 92%, transparent);
}

.ops-right .card {
  position: sticky;
  top: 88px;
}

@media (max-width: 980px) {
  .ops-right .card {
    position: static;
    top: auto;
  }
}

/* ========================================
   OPS CONSOLE V2 (table-based, bulk actions)
   ======================================== */
.ops-stats-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.ops-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card);
}

.ops-stat-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.ops-stat-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--text);
}

.ops-stat.stat-ok .ops-stat-value {
  color: var(--success);
}

.ops-stat.stat-warn .ops-stat-value {
  color: var(--warn);
}

.ops-stat.stat-err .ops-stat-value {
  color: var(--danger);
}

.ops-console {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}

.ops-console-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, var(--card));
}

.ops-ctab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.ops-ctab:hover {
  color: var(--text);
}

.ops-ctab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.ops-ctab-icon {
  font-size: 14px;
}

.ops-ctab-count {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 152, 195, .15);
  color: var(--accent);
}

.ops-ctab.active .ops-ctab-count {
  background: var(--accent);
  color: #fff;
}

/* Ops toggle menu (Builds + Steps behind toggle) */
.ops-ops-toggle {
  cursor: pointer;
  border: none;
  background: none;
}

.ops-ops-toggle:hover {
  color: var(--text);
}

.ops-ops-toggle[aria-expanded="true"] {
  color: var(--accent);
}

.ops-ops-menu {
  display: flex;
  align-items: center;
  gap: 0;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-left: 1px solid var(--border);
  border-radius: 0;
}

.ops-ops-menu[hidden] {
  display: none;
}

.ops-ops-menu .ops-ctab {
  padding: 12px 16px;
  font-size: 12px;
}

.ops-ops-menu .ops-ctab-count {
  font-size: 10px;
  padding: 2px 6px;
}

.ops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 40%, var(--card));
  flex-wrap: wrap;
}

.ops-toolbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ops-search {
  width: 180px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
}

.ops-search.ops-search-wide {
  width: min(360px, 46vw);
}

.ops-filter-select,
.ops-filter-input {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  /* IMPORTANT: avoid `background:` shorthand here; it resets select background-repeat and
     causes the arrow SVG to tile in light mode when background-image is overridden. */
  background-color: var(--card);
  color: var(--text);
  font-size: 13px;
}

/* Selects in ops toolbar: ensure arrow renders once and doesn't overlap text */
select.ops-filter-select {
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Packs filters: collapse advanced controls to save vertical space */
.ops-filters-more {
  position: relative;
}

.ops-filters-more-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.ops-filters-more-summary::-webkit-details-marker {
  display: none;
}

.ops-filters-more[open] .ops-filters-more-summary {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.ops-filters-more-body {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
}

.ops-bulk-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ops-bulk-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.ops-console-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  min-height: 400px;
}

.ops-console-body[data-detail-mode="page"] {
  grid-template-columns: 1fr;
}

.ops-console-body[data-detail-mode="page"] .ops-detail-panel {
  display: none;
}

@media (max-width: 1100px) {
  .ops-console-body {
    grid-template-columns: 1fr;
  }

  .ops-detail-panel {
    display: none;
  }
}

.ops-table-wrap {
  overflow: auto;
  max-height: calc(100vh - 360px);
}

.ops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ops-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, var(--surface-2), var(--card));
  backdrop-filter: var(--overlay-blur);
}

.ops-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong, var(--border));
  white-space: nowrap;
}

.ops-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line, var(--border));
  vertical-align: middle;
}

.ops-th-check,
.ops-td-check {
  width: 36px;
  text-align: center;
}

.ops-row {
  cursor: pointer;
  transition: background .14s ease, box-shadow .14s ease;
}

.ops-table tbody tr:nth-child(even) {
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.ops-row:hover {
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

.ops-row.selected {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow:
    inset 3px 0 0 var(--accent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
}

.ops-row:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: -2px;
}

.ops-cell-main {
  font-weight: 700;
  color: var(--text);
}

.ops-id {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
}

.ops-actions {
  display: flex;
  gap: 6px;
}

.ops-group-row td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--card)), color-mix(in srgb, var(--accent5) 8%, var(--card)));
}

.ops-group-row.is-collapsed td {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 6%, var(--card)), color-mix(in srgb, var(--accent5) 5%, var(--card)));
  opacity: .95;
}

.ops-group-row-inner {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ops-group-toggle {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card) 75%, transparent);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ops-group-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.ops-group-toggle[aria-expanded="false"] .ops-caret {
  transform: rotate(-90deg);
}

.ops-caret {
  display: inline-block;
  transition: transform .14s ease;
}

.ops-group-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ops-group-title strong {
  font-weight: 950;
  letter-spacing: -0.01em;
}

.ops-group-meta {
  font-size: 12px;
  color: color-mix(in srgb, var(--text) 70%, transparent);
}

.ops-row.is-collapsed {
  display: none;
}

.ops-detail-panel {
  border-left: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 50%, var(--card));
  overflow: auto;
  max-height: calc(100vh - 360px);
}

.ops-detail-card {
  padding: 16px;
}

.ops-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}

.ops-detail-body {
  font-size: 13px;
}

/* Progress bar mini variant */
.progress-track.mini {
  height: 6px;
  width: 60px;
  display: inline-block;
  vertical-align: middle;
}

/* Chip/badge small variant */
.chip.small,
.badge.small {
  font-size: 10px;
  padding: 2px 8px;
}

/* Button tiny variant */
.btn.tiny {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 8px;
}

.btn.small {
  font-size: 12px;
  padding: 6px 12px;
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
}

.btn.ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

/* Modal styling */
.modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: var(--overlay-blur);
}

.modal-content {
  position: relative;
  z-index: 1;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .5);
  width: min(440px, 92vw);
}

.modal-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* KPI Cards */
.kpi {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 2px;
}

.kpi h2 {
  font-size: 13px;
  font-weight: 700;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
  margin-bottom: 4px;
  line-height: 1.35;
}

.kpi .muted {
  font-size: 12px;
}

.value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.value.secondary {
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.value.warning {
  background: linear-gradient(135deg, var(--accent3) 0%, var(--accent3-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ========================================
   BUTTONS
   ======================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 86%, var(--accent) 14%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 96%, transparent), color-mix(in srgb, var(--card-hover) 84%, transparent));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}

.btn:hover {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card-hover) 94%, transparent), color-mix(in srgb, var(--accent) 7%, var(--card-hover)));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--accent) 16%, transparent);
}

.btn.primary {
  background: var(--gradient-primary);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(0, 152, 195, .28);
}

.btn.primary:hover {
  box-shadow: 0 6px 20px rgba(0, 152, 195, .4);
  transform: translateY(-2px);
}

.btn.success {
  background: var(--gradient-success);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(16, 185, 129, .24);
}

.btn.danger {
  background: var(--gradient-warm);
  border: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(239, 68, 68, .22);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.btn-ghost:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
  border-color: var(--accent);
}

.btn-ghost.danger:hover {
  color: var(--accent4);
  border-color: var(--accent4);
  background: rgba(239, 68, 68, .1);
}

/* ========================================
   CHIPS & BADGES
   ======================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, var(--accent) 15%);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent5) 5%, transparent));
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
}

.chip:hover {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--border));
  color: var(--text);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 14%, transparent);
}

.tenant-chip {
  max-width: none;
  flex: 0 0 auto;
}

.tenant-chip select {
  width: max-content;
  min-width: 24ch;
  max-width: none;
  padding: 8px 36px 8px 12px;
  border-color: color-mix(in srgb, var(--border) 75%, var(--accent) 25%);
  background-color: color-mix(in srgb, var(--surface) 70%, transparent);
  font-size: 13px;
  font-weight: 750;
}

.chip.primary {
  background: linear-gradient(145deg, rgba(0, 152, 195, .18), rgba(105, 38, 111, .12));
  border-color: rgba(0, 152, 195, .42);
  color: var(--accent-light);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  letter-spacing: -0.01em;
}

.badge.ok,
.badge.published,
.badge.success {
  background: rgba(16, 185, 129, .15);
  color: var(--accent2-light);
  border: 1px solid rgba(16, 185, 129, .3);
}

.badge.pending,
.badge.running {
  background: rgba(245, 158, 11, .15);
  color: var(--accent3-light);
  border: 1px solid rgba(245, 158, 11, .3);
}

.badge.failed,
.badge.error,
.badge.danger {
  background: rgba(239, 68, 68, .15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, .3);
}

.badge.warn {
  background: rgba(245, 158, 11, .15);
  color: var(--accent3-light);
  border: 1px solid rgba(245, 158, 11, .3);
}

.badge.off {
  background: rgba(255, 255, 255, .05);
  color: var(--muted);
  border: 1px solid var(--border);
}

/* ========================================
   TABLES
   ======================================== */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

thead th {
  padding: 13px 16px;
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  /* InitCap-only: don't force uppercase */
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent6) 5%, transparent));
  border-bottom: 1px solid var(--line-strong, var(--border));
}

/* Sortable table headers */
thead th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: 28px;
}

thead th.sortable:hover {
  color: color-mix(in srgb, var(--text) 70%, var(--muted));
}

thead th.sortable::after {
  content: "⇅";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: .35;
}

thead th.sortable.sort-asc::after {
  content: "↑";
  opacity: .85;
  color: var(--accent);
}

thead th.sortable.sort-desc::after {
  content: "↓";
  opacity: .85;
  color: var(--accent);
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line, var(--border));
  font-size: 14.5px;
}

tbody tr {
  transition: background .15s ease;
}

tbody tr:hover td {
  background: rgba(0, 152, 195, .05);
}

tbody tr:last-child td {
  border-bottom: none;
}

tr.row-click {
  cursor: pointer;
}

.row-link {
  font-weight: 600;
  color: var(--accent-light);
  transition: color .15s ease;
}

.row-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* Pack ID styling - truncate and style */
td code {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  padding: 4px 8px;
  background: rgba(0, 152, 195, .08);
  border-radius: 6px;
  font-weight: 500;
}

/* ========================================
   FORMS
   ======================================== */
label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  /* InitCap-only: never force uppercase in UI labels */
  text-transform: none;
  letter-spacing: -0.01em;
}

input,
textarea,
select {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background-color: color-mix(in srgb, var(--card-hover) 72%, transparent);
  color: var(--text);
  font: inherit;
  font-size: var(--type-body-size);
  letter-spacing: inherit;
  transition: all .15s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: color-mix(in srgb, var(--accent) 8%, var(--card-hover));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 8px 16px color-mix(in srgb, var(--accent) 10%, transparent);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230098c3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

textarea {
  min-height: 120px;
  resize: vertical;
}

/* Password field show/hide (shared.js initPasswordFields) */
.password-field {
  position: relative;
  display: flex;
  width: 100%;
  align-items: stretch;
}

.password-field--inline {
  width: auto;
  max-width: 100%;
  display: inline-flex;
  vertical-align: middle;
}

.password-field > input[type="password"],
.password-field > input[type="text"][data-password-reveal] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 44px;
}

.password-field--compact > input[type="password"],
.password-field--compact > input[type="text"][data-password-reveal] {
  padding-right: 32px;
}

.password-field-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.password-field--compact .password-field-toggle {
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  right: 2px;
}

.password-field-toggle:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.password-field-toggle:focus-visible {
  outline: none;
  color: var(--text);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.password-field-toggle .password-field-icon {
  display: block;
  flex-shrink: 0;
}

.password-field-toggle .password-field-icon--hide {
  display: none;
}

.password-field-toggle.is-visible .password-field-icon--show {
  display: none;
}

.password-field-toggle.is-visible .password-field-icon--hide {
  display: block;
}

[data-theme="light"] .password-field-toggle:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

/* Checkbox styling */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 4px;
  border: 2px solid var(--border);
  background: var(--card);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
}

input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 152, 195, .2);
}

/* Inline checkbox label */
.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}

/* ========================================
   SECTION HEADERS
   ======================================== */
.section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  margin-bottom: 6px;
}

.section-title h1 {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
  background: linear-gradient(125deg, var(--text), color-mix(in srgb, var(--accent) 40%, var(--text)));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title>* {
  min-width: 0;
}

.section-title a,
.section-title button {
  flex-shrink: 0;
}

/* Compact list filters — single toolbar row (parity with eigenCRM) */
.filters-toolbar.card > .card-inner,
.card.filters-toolbar > .card-inner {
  padding: 8px 10px;
}

.filters-toolbar .section-title {
  display: none;
}

.filters-toolbar-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 6px 8px;
}

.filters-toolbar-form .grid {
  display: contents;
}

.filters-toolbar-form .col-2,
.filters-toolbar-form .col-3,
.filters-toolbar-form .col-9 {
  width: auto;
  max-width: none;
  flex: 1 1 140px;
  min-width: 120px;
}

.filters-toolbar-form label {
  display: block;
  margin-bottom: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.filters-toolbar-form select,
.filters-toolbar-form input {
  min-height: 32px;
  padding: 5px 8px;
  font-size: 13px;
}

.filters-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
  padding-top: 14px;
}

.filters-toolbar + .card,
.card.filters-toolbar + .card {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
}

.card.filters-toolbar {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.footer-note {
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

/* ========================================
   PAGE HEADER (modern, consistent)
   ======================================== */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.page-head-main {
  min-width: 0;
}

.page-head-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: 0;
}

.page-head-sub {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.page-head-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.page-meta {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.page-meta .chip {
  font-size: 12px;
}

.page-meta code {
  font-size: 11px;
}

/* ========================================
   ROW UTILITIES
   ======================================== */
.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.spacer {
  flex: 1;
}

.muted {
  color: var(--muted);
  opacity: 1;
}

/* ========================================
   TOAST NOTIFICATIONS
   ======================================== */
.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  min-width: 320px;
  max-width: 480px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  transform: translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: all .25s ease;
  z-index: 10000;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent2);
}

.toast-body {
  font-size: 13px;
  color: var(--muted);
  margin-top: 4px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.45;
}

.toast-action {
  display: inline-flex;
  margin-top: 10px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toast-action[hidden] {
  display: none;
}

.toast-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ========================================
   DETAIL DRAWER — inline split panel (desktop) / slide-over (mobile)
   ======================================== */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: var(--overlay-blur);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 2000;
}

.drawer-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

/* ── Base: inline panel (desktop ≥ 1101px) ── */
.drawer {
  /* Inline flex-sibling inside .app-body */
  position: sticky;
  top: 64px;
  /* below the topbar */
  flex: 0 0 0px;
  width: 0;
  height: calc(100vh - 64px);
  overflow: hidden;
  background: linear-gradient(180deg, var(--surface-2), color-mix(in srgb, var(--card) 92%, transparent));
  border-left: 1px solid var(--border);
  box-shadow: -6px 0 32px rgba(0, 0, 0, .18);
  pointer-events: none;
  transition: flex-basis .22s ease, width .22s ease;
  z-index: 10;
  /* no transform/opacity animation — width drives the reveal */
  transform: none;
  opacity: 1;
  border-radius: 0;
}

[data-theme="light"] .drawer {
  background: linear-gradient(180deg, var(--surface-2), var(--card));
  box-shadow: -4px 0 24px rgba(15, 23, 42, .10);
}

/* ── Open: slide the panel in ── */
.drawer.show {
  flex-basis: 460px;
  width: 460px;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}

/* ── Maximized: go full-screen overlay ── */
.drawer.maximized {
  position: fixed;
  top: 10px;
  right: 10px;
  left: 10px;
  flex-basis: auto;
  width: auto;
  height: calc(100vh - 20px);
  border-radius: 18px;
  border-left: none;
  box-shadow: 0 26px 90px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset;
  z-index: 2001;
}

[data-theme="light"] .drawer.maximized {
  box-shadow: 0 18px 60px rgba(15, 23, 42, .16), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
}

/* ── Mobile: restore old fixed slide-over ── */
@media (max-width: 1100px) {
  .drawer {
    position: fixed;
    top: 12px;
    right: 12px;
    flex: none;
    width: min(500px, calc(100vw - 24px));
    height: calc(100vh - 24px);
    border-radius: 18px;
    border-left: 1px solid var(--border);
    box-shadow: 0 26px 90px rgba(0, 0, 0, .35), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset;
    transform: translateX(14px);
    opacity: 0;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 2001;
  }

  [data-theme="light"] .drawer {
    box-shadow: 0 18px 60px rgba(15, 23, 42, .16), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent) inset;
  }

  .drawer.show {
    flex-basis: auto;
    width: min(500px, calc(100vw - 24px));
    transform: translateX(0);
    opacity: 1;
  }

  .drawer.maximized {
    top: 10px;
    right: 10px;
    left: 10px;
    width: auto;
  }

  /* Show backdrop on mobile only */
  .drawer-backdrop.show {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Hide backdrop on desktop (no overlay needed for inline panel) */
@media (min-width: 1101px) {
  .drawer-backdrop.show {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.drawer-head {
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--panel)), color-mix(in srgb, var(--accent5) 10%, var(--panel)));
}

[data-theme="light"] .drawer-head {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 9%, var(--card)), color-mix(in srgb, var(--accent5) 7%, var(--card)));
}

.drawer-body {
  padding: 14px 16px 18px;
  height: calc(100% - 62px);
  overflow: auto;
}

.detail-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 94%, transparent), color-mix(in srgb, var(--panel) 94%, transparent));
  padding: 14px;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .20);
}

[data-theme="light"] .detail-card {
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 92%, var(--panel)));
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin-top: 12px;
}

.detail-item {
  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
}

[data-theme="light"] .detail-item {
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
}

.detail-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--muted);
}

.detail-value {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ops-right .detail-value {
  /* Ops panel: prefer readability over truncation */
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.detail-value code {
  font-size: 12px;
}

.ops-right .detail-value code {
  word-break: break-all;
  white-space: normal;
  display: inline;
}

.detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ========================================
   OUTBOX / DELIVERY DETAIL (Executive)
   ======================================== */
.outbox-page {
  max-width: none;
  margin: 0;
}

.outbox-page--email {
  max-width: none;
}

.delivery-detail-page,
.outbox-page--email {
  /* Detail pages: never truncate IDs, subjects, or message IDs */
}

.delivery-detail-page .detail-value,
.outbox-page--email .detail-value {
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.4;
}

.delivery-detail-page .detail-value code,
.outbox-page--email .detail-value code {
  white-space: normal;
  word-break: break-all;
  display: inline;
}

.delivery-detail-page .detail-grid,
.outbox-page--email .detail-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.delivery-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 4px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card-hover) 35%, transparent);
}

.delivery-table-wrap table {
  min-width: 680px;
  margin: 0;
}

.delivery-table-wrap thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.qo-lead-filter-label {
  display: block;
  margin-bottom: 10px;
}

.qo-lead-filter {
  width: 100%;
  max-width: 360px;
}

.qo-lead-filter-empty {
  margin: 0 0 10px;
}

.qo-lead-group-list {
  display: grid;
  gap: 10px;
}

.qo-lead-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  overflow: hidden;
}

.qo-lead-group[hidden] {
  display: none;
}

.qo-lead-group-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}

.qo-lead-group-summary::-webkit-details-marker {
  display: none;
}

.qo-lead-group-summary::marker {
  content: '';
}

.qo-lead-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.qo-lead-group-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.qo-lead-group-body {
  border-top: 1px solid var(--border);
  padding: 0 10px 10px;
}

.qo-lead-group-table-wrap {
  max-height: 320px;
  overflow: auto;
  margin-top: 10px;
}

.qo-lead-group-table-wrap table {
  min-width: 0;
}

.qo-lead-group tr[hidden] {
  display: none;
}

@media (max-width: 720px) {
  .qo-lead-filter {
    max-width: none;
  }

  .qo-lead-group-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}

.email-monitor-card {
  margin-top: 14px;
}

.outbox-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px) {
  .outbox-split {
    grid-template-columns: 1fr;
  }
}

.outbox-card {
  padding: 14px;
}

.outbox-hero-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.outbox-hero-icon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  color: var(--text);
  flex: 0 0 auto;
}

.outbox-hero-icon.ok {
  background: radial-gradient(260px 160px at 30% 0%, rgba(16, 185, 129, .16), transparent 55%),
    rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .35);
}

.outbox-hero-icon.failed {
  background: radial-gradient(260px 160px at 30% 0%, rgba(239, 68, 68, .14), transparent 55%),
    rgba(239, 68, 68, .08);
  border-color: rgba(239, 68, 68, .30);
}

.outbox-hero-icon.pending {
  background: radial-gradient(260px 160px at 30% 0%, rgba(0, 152, 195, .14), transparent 55%),
    rgba(0, 152, 195, .08);
  border-color: rgba(0, 152, 195, .30);
}

.outbox-hero-main {
  min-width: 0;
}

.outbox-hero-type {
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 14px;
  color: var(--text);
  word-break: break-word;
}

.outbox-hero-status {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
  align-items: center;
}

.outbox-callout {
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  padding: 12px;
}

.outbox-callout.danger {
  border-color: rgba(239, 68, 68, .25);
  background: radial-gradient(280px 160px at 20% 0%, rgba(239, 68, 68, .10), transparent 60%),
    color-mix(in srgb, var(--card-hover) 55%, transparent);
}

.outbox-callout-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 900;
  font-size: 12px;
}

.outbox-callout-body {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Email Queue — executive strip */
.email-queue-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.email-queue-stat {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.email-queue-stat:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}

.email-queue-stat.ok {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  background: color-mix(in srgb, var(--good) 8%, var(--panel));
}

.email-queue-stat.warn {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--panel));
}

.email-queue-stat-n {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.email-queue-stat-l {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.email-queue-attention {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  background: color-mix(in srgb, var(--bad) 10%, var(--panel));
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 14px;
}

.email-queue-all-clear {
  padding: 4px 2px 0;
}

@media (max-width: 720px) {
  .email-queue-strip {
    grid-template-columns: 1fr;
  }
}

/* JSON viewer (human-first) */
.json-viewer {
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  padding: 12px;
}

.json-kv-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.json-kv-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 560px) {
  .json-kv-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.json-kv-key {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: none;
  color: var(--muted);
}

.json-kv-value {
  font-size: 12px;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.json-kv-value.is-empty {
  color: var(--muted);
}

.json-raw {
  margin-top: 12px;
}

.json-raw summary {
  cursor: pointer;
  list-style: none;
}

.json-raw summary::-webkit-details-marker {
  display: none;
}

.json-raw-content {
  margin-top: 10px;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: rgba(0, 0, 0, .10);
  overflow: auto;
  max-height: 320px;
  font-size: 12px;
  line-height: 1.35;
}

[data-theme="light"] .json-raw-content {
  background: rgba(15, 23, 42, .04);
}

.outbox-source-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  color: var(--muted);
  font-weight: 800;
  font-size: 12px;
}

/* ========================================
   SOURCES PAGE
   ======================================== */
.sources-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin: 16px 0;
}

.sources-search {
  width: min(340px, 42vw);
  height: 36px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
  color: var(--text);
  font-size: 13px;
}

.sources-search::placeholder {
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.sources-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 152, 195, .15);
}

/* Chips used as filter buttons */
button.chip {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
}

.chip[aria-pressed="true"] {
  background: rgba(0, 152, 195, .15);
  border-color: rgba(0, 152, 195, .3);
  color: var(--accent-light);
}

.sources-subnav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
}

.subtab {
  /* Normalize for <button> (avoid default white background) */
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  transition: all .15s ease;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.subtab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, .05);
}

.subtab.active {
  color: var(--text);
  background: var(--gradient-primary);
}

.subtab .badge {
  padding: 2px 8px;
  font-size: 10px;
}

.sources-kpis {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}

.sources-kpis > *:not(.kpi-card):not([class*="col-"]) {
  grid-column: 1 / -1;
  min-width: 0;
}

.kpi-card {
  grid-column: span 4;
  min-width: 0;
}

.kpi-card .value {
  font-size: 32px;
}

.kpi-card .value.premium {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent5) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kpi-card .value.standard {
  background: linear-gradient(135deg, var(--accent3) 0%, var(--accent3-light) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kpi-card .value.free {
  background: var(--gradient-success);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.source-section {
  scroll-margin-top: 140px;
  margin-top: 24px;
}

.source-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}

.source-section-title h2 {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.source-section-title .hint {
  font-size: 12px;
  color: var(--muted);
}

.source-cards {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.source-cards > *:not(.source-card):not([class*="col-"]) {
  grid-column: 1 / -1;
  min-width: 0;
}

.source-card {
  grid-column: span 6;
  min-width: 0;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all .2s ease;
}

.source-card:hover {
  border-color: rgba(0, 152, 195, .25);
  transform: translateY(-2px);
}

.source-card .inner {
  padding: 20px;
}

.source-card .top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.source-card .name {
  font-size: 15px;
  font-weight: 700;
}

.source-card .meta {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}

.source-card .desc {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.source-card .actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

/* ========================================
   INCOMING (EXECUTIVE) CARD COMPACT MODE
   ======================================== */
.incoming-card {
  grid-column: span 6;
  border-radius: 14px;
}

.incoming-card:hover {
  transform: translateY(-1px);
}

.incoming-card .incoming-inner {
  padding: 14px 16px 12px;
}

.incoming-head {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 12px;
  align-items: start;
}

.incoming-logo {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

[data-theme="light"] .incoming-logo {
  border-color: rgba(15, 23, 42, .10);
  background: rgba(15, 23, 42, .04);
}

.incoming-logo-img {
  width: 18px;
  height: 18px;
  display: block;
}

.incoming-logo-fallback {
  width: 20px;
  height: 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
}

[data-theme="light"] .incoming-logo-fallback {
  background: rgba(15, 23, 42, .06);
}

.incoming-name {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

.incoming-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.incoming-sub code {
  font-size: 11px;
}

.incoming-meta {
  display: flex;
  justify-content: flex-end;
}

.incoming-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.incoming-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 980px) {
  .incoming-card {
    grid-column: span 12;
  }

  .incoming-head {
    grid-template-columns: 28px 1fr;
  }

  .incoming-meta {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .incoming-actions {
    justify-content: flex-start;
  }
}

.tier-band {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), var(--accent5), var(--accent2));
}

.tier-band.free {
  background: linear-gradient(90deg, var(--accent2), var(--accent6));
}

.tier-band.standard {
  background: linear-gradient(90deg, var(--accent3), var(--accent));
}

.tier-band.premium {
  background: linear-gradient(90deg, var(--accent), var(--accent5));
}

.badge.tier-free {
  background: rgba(16, 185, 129, .15);
  color: var(--accent2-light);
  border: 1px solid rgba(16, 185, 129, .3);
}

.badge.tier-standard {
  background: rgba(245, 158, 11, .15);
  color: var(--accent3-light);
  border: 1px solid rgba(245, 158, 11, .3);
}

.badge.tier-premium {
  background: rgba(0, 152, 195, .15);
  color: var(--accent-light);
  border: 1px solid rgba(0, 152, 195, .3);
}

.badge.recommended {
  background: linear-gradient(135deg, rgba(16, 185, 129, .2), rgba(6, 182, 212, .2));
  color: var(--accent2-light);
  border: 1px solid rgba(16, 185, 129, .3);
}

/* ========================================
   GEOSETS / TERRITORIES
   ======================================== */
.geo-map {
  width: 100%;
  height: 320px;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
}

.geo-search {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.geo-search-controls {
  display: flex;
  gap: 12px;
  align-items: center;
}

.geo-search-controls input {
  flex: 1;
  /* Ensure consistent rendering across browsers (avoid UA searchfield styling) */
  background-color: var(--card);
  color: var(--text);
}

[data-theme="light"] .geo-search-controls input {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.geo-search-results {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(255, 255, 255, .02);
}

.geo-search-filters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.geo-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.geo-search-row {
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease;
}

.geo-search-row:hover {
  background: rgba(0, 152, 195, .08);
}

.geo-search-title {
  font-size: 13px;
  font-weight: 600;
}

.geo-search-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.geo-search-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
}

.geo-selected-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.geo-selected-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
}

/* Keep badges / action buttons from stealing width from the place name */
.geo-selected-item > :not(.geo-selected-name) {
  flex-shrink: 0;
}

/* Territory hub (geosets page) — compact ops-console table */
.terr-console {
  box-shadow: var(--shadow);
}

.terr-toolbar {
  border-bottom: 1px solid var(--border);
}

.terr-toolbar-left,
.terr-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.terr-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.terr-title-icon {
  display: inline-flex;
  color: var(--accent);
  opacity: 0.92;
}

.terr-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
}

.terr-migrate-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, var(--card));
  font-size: 12px;
}

.terr-migrate-copy code {
  font-size: 11px;
}

.terr-migrate-readonly {
  background: color-mix(in srgb, var(--muted) 8%, var(--card));
}

.terr-filters {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 55%, var(--card));
}

.terr-search-wrap {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}

.terr-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.55;
  pointer-events: none;
}

.terr-search-wrap input {
  width: 100%;
  padding-left: 38px;
}

.terr-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.terr-chip {
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.terr-chip:hover,
.terr-chip.is-active {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.terr-naming-hint-inline {
  font-size: 11px;
}

.terr-naming-hint-inline code {
  font-size: 10px;
}

.terr-table-wrap {
  max-height: min(72vh, 900px);
  overflow: auto;
}

.terr-table .terr-pack-id {
  font-size: 12px;
  font-weight: 700;
}

.terr-pack-title {
  font-size: 11px;
  margin-top: 2px;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terr-corridor-label {
  font-weight: 700;
  font-size: 12px;
  margin-right: 6px;
}

.terr-th-num,
.terr-td-num {
  width: 56px;
  text-align: center;
}

.terr-td-num .terr-over {
  color: var(--bad);
  font-weight: 800;
}

.terr-td-coverage {
  font-size: 12px;
  max-width: 36ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.terr-th-date,
.terr-td-date {
  width: 120px;
  font-size: 11px;
  white-space: nowrap;
}

.terr-data-row {
  cursor: pointer;
}

.terr-group-row td {
  padding-top: 10px;
  padding-bottom: 6px;
}

.terr-empty {
  padding: 20px 12px;
  text-align: center;
}

.terr-empty-row td {
  padding: 24px 12px;
}

.terr-create-modal-content {
  width: min(560px, 94vw);
  max-height: min(88vh, 820px);
  overflow: auto;
  padding: 16px 18px;
}

body.terr-modal-open {
  overflow: hidden;
}

.terr-create-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--modal-bg);
  padding-bottom: 8px;
}

.terr-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.terr-step label {
  display: block;
  margin-bottom: 6px;
}

.terr-auto-name-preview {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  background: color-mix(in srgb, var(--accent2) 5%, transparent);
  font-size: 12px;
  line-height: 1.45;
}

.terr-auto-name-preview code {
  font-size: 11px;
}

@media (max-width: 900px) {
  .terr-td-coverage {
    max-width: 22ch;
  }

  .terr-th-date,
  .terr-td-date {
    display: none;
  }
}

.geo-selected-name {
  /* Normalize <button> defaults so text is readable in dark mode */
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text) !important;
  /* Target ~60ch readable width; narrow sidebars wrap instead of clipping mid-glyph */
  flex: 1 1 60ch;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.35;
}

/* ========================================
   DAY OF WEEK PICKER
   ======================================== */
.dow-grid {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dow-pill {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.dow-pill:hover {
  border-color: var(--accent);
  color: var(--text);
}

.dow-pill.is-on {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

/* Checkbox-based pill groups (used by role selector) */
.dow-grid input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.dow-grid input[type="checkbox"]:focus-visible+.dow-pill {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.dow-grid input[type="checkbox"]:checked+.dow-pill {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

/* ========================================
   PICKLIST (Admin: analyst subscriber scope)
   ======================================== */
.picklist {
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  padding: 10px;
}

.picklist-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.picklist-search {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.picklist-search input {
  width: 100%;
}

.picklist-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.picklist-tools {
  position: relative;
}

.picklist-tools summary {
  list-style: none;
  cursor: pointer;
}

.picklist-tools summary::-webkit-details-marker {
  display: none;
}

.picklist-tools-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 200px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 10px;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
  z-index: 20;
}

.picklist-tools-panel .btn-ghost {
  width: 100%;
  justify-content: flex-start;
}

.picklist-count {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.picklist-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

@media (min-width: 1200px) {
  .picklist-body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.picklist-item {
  position: relative;
}

.picklist-item input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.picklist-item .picklist-edit {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
}

.picklist-item .picklist-edit .btn-ghost.tiny {
  padding: 2px 8px;
  font-size: 10.5px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.picklist-item .picklist-pill {
  padding-right: 52px;
}

.picklist-pill {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .015);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
  transition: all .15s ease;
}

.picklist-pill:hover {
  border-color: var(--accent);
  color: var(--text);
  background: rgba(255, 255, 255, .03);
}

.picklist-pill .picklist-name {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.picklist-pill .picklist-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.picklist-pill .picklist-sub {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
}

[data-theme="light"] .picklist-pill .picklist-sub {
  color: rgba(0, 0, 0, .55);
}

.picklist-pill .picklist-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.picklist-item input[type="checkbox"]:focus-visible+.picklist-pill {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.picklist-item input[type="checkbox"]:checked+.picklist-pill {
  background: var(--gradient-primary);
  border-color: transparent;
  color: #fff;
}

.picklist-empty {
  grid-column: 1 / -1;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 12px;
}

/* ========================================
   PILL TOGGLE
   ======================================== */
.pill-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .03);
}

.pill-toggle .muted {
  font-size: 12px;
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1200px) {
  .topbar-inner {
    padding: 10px 16px;
    gap: 16px;
  }

  .brand {
    min-width: auto;
  }

  .org-lockup {
    display: none;
  }

  .brand-left {
    border-right: none;
    padding-right: 0;
  }

  .topbar-nav {
    flex: 1;
  }

  .nav-tabs {
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .topbar-actions {
    min-width: auto;
  }
}

@media (max-width: 900px) {

  .col-9,
  .col-8,
  .col-7,
  .col-6,
  .col-5,
  .col-4 {
    grid-column: span 12;
  }

  /* Half-width tiles (e.g., KPI cards) */
  .col-3 {
    grid-column: span 6;
  }

  .kpi-card {
    grid-column: span 12;
  }

  .source-card {
    grid-column: span 12;
  }

  .hero {
    padding: 10px 12px;
  }

  .hero-title {
    font-size: 16px;
  }

  .product-lockup span {
    display: none;
  }
}

@media (max-width: 768px) {
  .topbar-inner {
    flex-wrap: wrap;
    min-height: auto;
    padding: 12px 16px;
    gap: 10px;
  }

  .brand {
    order: 1;
  }

  .topbar-actions {
    order: 2;
    margin-left: auto;
  }

  .topbar-nav {
    order: 3;
    width: 100%;
    flex: none;
    justify-content: flex-start;
  }

  .nav-tabs {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .col-3 {
    grid-column: span 12;
  }

  .topbar-inner {
    padding: 10px 12px;
  }

  .brand-left {
    display: none;
  }

  .product-lockup strong {
    font-size: 14px;
  }

  .navtab {
    padding: 6px 10px;
    font-size: 11px;
  }

  .wrap {
    padding: 8px 12px 20px;
  }

  .card-inner {
    padding: 10px 12px;
  }

  .value {
    font-size: 28px;
  }

  .geo-search-filters {
    grid-template-columns: 1fr;
  }

  td code {
    max-width: 140px;
  }
}

/* Queue Resend Recovery — mirrored with eigenCRM. */
.queue-resend-panel {
  margin: 12px 0;
  overflow: clip;
}

.queue-resend-drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  display: flex;
  justify-content: flex-end;
}

.queue-resend-drawer[hidden] {
  display: none;
}

.queue-resend-drawer-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: var(--overlay);
  cursor: pointer;
}

.queue-resend-drawer-sheet {
  position: relative;
  z-index: 1;
  width: min(560px, 100vw);
  height: 100%;
  margin: 0;
  border-radius: 16px 0 0 16px;
  overflow: auto;
  overscroll-behavior: contain;
  box-shadow: -12px 0 40px color-mix(in srgb, var(--bg) 28%, transparent);
}

.queue-resend-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.queue-resend-drawer-head h2 {
  margin: 6px 0 0;
  font-size: 16px;
}

.queue-resend-drawer-head p {
  margin: 4px 0 0;
  font-size: 12px;
}

.queue-resend-drawer-open {
  overflow: hidden;
}

.queue-resend-panel > summary {
  list-style: none;
}

.queue-resend-panel > summary::-webkit-details-marker {
  display: none;
}

.queue-resend-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
}

.queue-resend-summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.queue-resend-summary > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.queue-resend-summary-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

.queue-resend-summary-action {
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
}

.queue-resend-panel[open] .queue-resend-summary {
  border-bottom: 1px solid var(--border);
}

.queue-resend-body {
  display: grid;
  gap: 16px;
}

.queue-resend-intro,
.queue-resend-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.queue-resend-intro h2,
.queue-resend-dialog h2 {
  margin: 0;
  font-size: 16px;
}

.queue-resend-intro p {
  max-width: 76ch;
  margin: 4px 0 0;
  font-size: 12px;
}

.queue-resend-selectors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.queue-resend-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
}

.queue-resend-field select[multiple] {
  width: 100%;
  min-height: 132px;
}

.queue-resend-field select:not([multiple]) {
  width: 100%;
  min-height: 0;
}

.queue-resend-field small {
  font-size: 10px;
  font-weight: 500;
}

.queue-resend-mode,
.queue-resend-snapshot-time {
  margin: 0;
  font-size: 11px;
}

.queue-resend-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.queue-resend-state {
  min-height: 54px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.queue-resend-empty {
  font-size: 12px;
}

.queue-resend-error {
  margin: 0;
}

/* Agent Queues hub: one action tab, one visible board */
.agent-queues-hub .queue-resend-inline {
  margin-top: 0;
}

.agent-queues-hub .queue-resend-intro h2 {
  /* Action is chosen in the segmented control above */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.agent-queues-hub [data-agent-queues-pane][hidden] {
  display: none !important;
}

[data-queue-refresh-blocker]:not([hidden]) {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
}

.queue-resend-preview {
  display: grid;
  gap: 12px;
}

.queue-resend-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.queue-resend-totals > div {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.queue-resend-totals strong {
  font-size: 18px;
}

.queue-resend-totals span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.queue-resend-user-counts {
  display: grid;
  gap: 6px;
}

.queue-resend-user-count {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.queue-resend-user-count strong {
  white-space: nowrap;
}

.queue-resend-operation {
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--good) 35%, var(--border));
  border-radius: 10px;
  background: color-mix(in srgb, var(--good) 8%, var(--panel));
}

.queue-resend-operation p {
  margin: 4px 0;
  font-size: 11px;
}

.queue-resend-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  padding: 20px;
}

.queue-resend-modal[hidden] {
  display: none;
}

.queue-resend-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--overlay);
  cursor: default;
}

.queue-resend-dialog {
  position: relative;
  z-index: 1;
  width: min(520px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--modal-bg);
}

.queue-resend-dialog p {
  line-height: 1.5;
}

.queue-resend-dialog-actions {
  justify-content: flex-end;
}

.queue-resend-modal-open {
  overflow: hidden;
}

.wq-lane-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

@media (max-width: 720px) {
  .queue-resend-selectors {
    grid-template-columns: minmax(0, 1fr);
  }

  .queue-resend-summary {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .queue-resend-summary-action {
    grid-column: 2;
  }

  .queue-resend-totals {
    grid-template-columns: minmax(0, 1fr);
  }

  .queue-resend-intro {
    align-items: stretch;
    flex-direction: column;
  }
}

/* Queue Recovery board — chip + drag-drop selection. */
.qr-intro {
  align-items: center;
}

.qr-board {
  display: grid;
  gap: 16px;
}

.qr-section {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.qr-section-label {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.qr-section-hint {
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
}

.qr-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
}

.qr-agent-card {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.12s ease;
}

.qr-agent-card:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.qr-agent-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qr-agent-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.qr-agent-card.is-drag-over {
  border-color: var(--accent5);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent5) 40%, transparent);
  transform: translateY(-1px);
}

.qr-agent-name {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
}

.qr-agent-count {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
}

.qr-agent-meta {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
}

.qr-agent-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.qr-cab-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 44px;
  padding: 10px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.qr-cab-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 700;
  cursor: grab;
  user-select: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
}

.qr-cab-chip:hover {
  border-color: color-mix(in srgb, var(--accent5) 45%, var(--border));
}

.qr-cab-chip.is-selected {
  border-color: var(--accent5);
  background: color-mix(in srgb, var(--accent5) 10%, var(--panel));
  color: var(--text);
}

.qr-cab-chip.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.qr-cab-chip-count {
  font-size: 10px;
  font-weight: 800;
  color: var(--muted);
}

.qr-cab-empty {
  font-size: 12px;
  color: var(--muted);
}

.qr-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent5) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent5) 30%, var(--border));
}

.qr-preview-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.qr-preview-actions[hidden] {
  display: none;
}

.qr-sticky-bar {
  position: sticky;
  bottom: 12px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--panel));
  box-shadow: var(--shadow);
}

.qr-sticky-bar[hidden] {
  display: none;
}

.qr-sticky-summary {
  font-size: 13px;
  font-weight: 700;
}

.queue-resend-inline .queue-resend-body {
  gap: 14px;
}

@media (max-width: 720px) {
  .qr-agent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .qr-sticky-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .qr-sticky-bar .btn {
    width: 100%;
  }
}

/* ========================================
   SCROLLBAR STYLING
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .15);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .25);
}

/* ========================================
   ANIMATION UTILITIES
   ======================================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px)
  }

  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.animate-in {
  animation: fadeIn .3s ease forwards;
}

@keyframes progressShine {
  0% {
    transform: translateX(-60%);
    opacity: .0;
  }

  20% {
    opacity: .55;
  }

  100% {
    transform: translateX(160%);
    opacity: 0;
  }
}

@keyframes progressFlow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes pulseDot {

  0%,
  100% {
    transform: scale(1);
    opacity: .65;
  }

  50% {
    transform: scale(1.25);
    opacity: 1;
  }
}

.progress-track {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--border);
}

[data-theme="light"] .progress-track {
  background: rgba(15, 23, 42, .06);
}

.progress-bar {
  position: relative;
  height: 100%;
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2, .8, .2, 1);
}

.progress-bar.tone-success {
  background: var(--gradient-success);
}

.progress-bar.tone-danger {
  background: linear-gradient(135deg, var(--accent4), #dc2626);
}

.progress-bar.tone-muted {
  background: rgba(255, 255, 255, .14);
}

.progress-bar.tone-active {
  background: var(--gradient-primary);
}

[data-theme="light"] .progress-bar.tone-muted {
  background: rgba(15, 23, 42, .12);
}

.progress-bar.is-active {
  background: linear-gradient(135deg,
      var(--accent) 0%,
      rgba(105, 38, 111, 1) 20%,
      var(--accent3) 40%,
      rgba(234, 179, 8, 1) 60%,
      var(--accent2) 80%,
      var(--accent) 100%);
  background-size: 300% 300%;
  animation: progressFlow 3s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(0, 152, 195, .15),
    0 0 12px rgba(0, 152, 195, .25),
    0 0 24px rgba(16, 185, 129, .15),
    inset 0 1px 0 rgba(255, 255, 255, .25);
}

.progress-bar.is-active::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 30%, rgba(255, 255, 255, .12) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: buildFlowShimmer 2s linear infinite;
}

.progress-bar.is-active::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .65), transparent);
  animation: progressShine 1.2s ease-in-out infinite;
  border-radius: 999px;
}

.progress-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 11px;
  flex-wrap: wrap;
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .04);
  color: var(--text);
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}

[data-theme="light"] .stage-pill {
  background: rgba(15, 23, 42, .04);
}

.stage-pill.is-active {
  border-color: rgba(0, 152, 195, .45);
  background: linear-gradient(135deg, rgba(0, 152, 195, .28) 0%, rgba(105, 38, 111, .22) 50%, rgba(16, 185, 129, .16) 100%);
  background-size: 200% 200%;
  animation: buildFlowShimmer 4s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(0, 152, 195, .15), 0 2px 8px rgba(0, 0, 0, .1);
}

.stage-pill.is-done {
  border-color: rgba(16, 185, 129, .5);
  background: linear-gradient(135deg, rgba(16, 185, 129, .22), rgba(6, 182, 212, .16));
  box-shadow: 0 0 14px rgba(16, 185, 129, .14), 0 2px 8px rgba(0, 0, 0, .1);
}

.stage-pill.is-danger {
  border-color: rgba(239, 68, 68, .55);
  background: linear-gradient(135deg, rgba(239, 68, 68, .26), rgba(249, 115, 22, .18));
  box-shadow: 0 0 16px rgba(239, 68, 68, .18), 0 2px 8px rgba(0, 0, 0, .1);
}

.progress-submeta {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.status-dot.tone-success {
  background: var(--accent2);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, .12);
}

.status-dot.tone-danger {
  background: var(--accent4);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, .12);
}

.status-dot.tone-muted {
  background: rgba(255, 255, 255, .35);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .08);
}

.status-dot.tone-active {
  background: linear-gradient(135deg, var(--accent3), var(--accent));
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .15), 0 0 12px rgba(245, 158, 11, .3);
}

.status-dot.pulse {
  animation: pulseDot 1s ease-in-out infinite;
}

.status-dot.pulse.tone-active {
  animation: pulseDot 1s ease-in-out infinite, orbActiveRainbow 3s ease-in-out infinite;
  background: linear-gradient(135deg, var(--accent3) 0%, var(--accent) 50%, var(--accent2) 100%);
  background-size: 200% 200%;
}

/* ============================================================================
   PLASMA PIPELINE — Ultra-modern build progress display
   Stage-specific colors via CSS custom properties (--node-color, --node-glow)
   ============================================================================ */

/* Core keyframes */
@keyframes buildFlowShimmer {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 200% 50%;
  }
}

@keyframes buildFlowPulse {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-4px) scale(1.04);
  }
}

@keyframes orbRingPulse1 {
  0% {
    transform: scale(1.0);
    opacity: 0.7;
  }

  60% {
    transform: scale(1.65);
    opacity: 0.2;
  }

  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

@keyframes orbRingPulse2 {
  0% {
    transform: scale(1.0);
    opacity: 0.45;
  }

  60% {
    transform: scale(2.0);
    opacity: 0.12;
  }

  100% {
    transform: scale(2.7);
    opacity: 0;
  }
}

@keyframes orbCelebrate {

  0%,
  100% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.07);
  }
}

@keyframes particleComet {
  0% {
    transform: translateX(0) scale(0.5);
    opacity: 0;
  }

  12% {
    opacity: 1;
    transform: translateX(12%) scale(1.1);
  }

  88% {
    opacity: 1;
    transform: translateX(88%) scale(1.1);
  }

  100% {
    transform: translateX(100%) scale(0.5);
    opacity: 0;
  }
}

@keyframes countPop {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.18);
  }

  55% {
    transform: scale(0.94);
  }

  80% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes countGlow {

  0%,
  100% {
    text-shadow: none;
  }

  50% {
    text-shadow: 0 0 14px currentColor, 0 0 28px currentColor;
  }
}

@keyframes mcBarShimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

@keyframes mcIconPulse {

  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px var(--mc-glow, rgba(0, 152, 195, .5)));
  }

  50% {
    transform: scale(1.18);
    filter: drop-shadow(0 0 10px var(--mc-glow, rgba(0, 152, 195, .8)));
  }
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(5px) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ─── Wrapper ─────────────────────────────────────────── */
.build-flow-wrap {
  overflow-x: hidden;
  padding: 0 4px 16px 4px;
}

/* ─── Build dashboard gauges (server-driven progress_ui) ─ */
.build-dashboard {
  display: grid;
  gap: 12px;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    radial-gradient(ellipse 520px 120px at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    radial-gradient(ellipse 420px 100px at 100% 0%, color-mix(in srgb, var(--accent2) 12%, transparent), transparent 65%),
    var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
}

.build-dashboard-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 10px;
  align-items: start;
}

.build-gauge {
  position: relative;
  width: var(--gauge-size, 76px);
  height: var(--gauge-size, 76px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.build-gauge-svg {
  display: block;
  transform: rotate(-90deg);
}

.build-gauge-track {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 28%, transparent);
  stroke-width: var(--gauge-stroke, 6px);
}

.build-gauge-fill {
  fill: none;
  stroke-width: var(--gauge-stroke, 6px);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.65s cubic-bezier(.4, 0, .2, 1);
}

.build-gauge-center {
  position: absolute;
  /* Keep hub copy inside the stroke band */
  inset: calc(var(--gauge-stroke, 6px) + 4px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-align: center;
  pointer-events: none;
  padding: 2px;
  box-sizing: border-box;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.build-gauge-value {
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  overflow: hidden;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

.build-gauge-label {
  flex: 0 0 auto;
  margin-top: 0;
  max-width: 100%;
  min-width: 0;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Long stage names (not numeric %): shrink to fit the hub */
.build-gauge--text .build-gauge-value {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.build-gauge--text-long .build-gauge-value {
  font-size: 9px;
  font-weight: 750;
  line-height: 1.05;
}

.build-gauge--text .build-gauge-label {
  font-size: 6.5px;
  letter-spacing: 0.08em;
}

.build-gauge--active .build-gauge-fill { stroke: var(--accent); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 45%, transparent)); }
.build-gauge--success .build-gauge-fill { stroke: var(--good); }
.build-gauge--danger .build-gauge-fill { stroke: var(--bad); }
.build-gauge--indigo .build-gauge-fill { stroke: var(--accent); }
.build-gauge--violet .build-gauge-fill { stroke: color-mix(in srgb, var(--accent) 82%, var(--accent4)); }
.build-gauge--cyan .build-gauge-fill { stroke: var(--accent2); }
.build-gauge--mint .build-gauge-fill { stroke: var(--good); }
.build-gauge--amber .build-gauge-fill { stroke: var(--accent3); }
.build-gauge--pink .build-gauge-fill { stroke: var(--accent4); }
.build-gauge--good .build-gauge-fill { stroke: var(--good); }
.build-gauge--muted .build-gauge-fill { stroke: color-mix(in srgb, var(--muted) 55%, transparent); }

.build-gauge.is-indeterminate .build-gauge-fill {
  stroke-dashoffset: 0;
  opacity: 0.85;
}

.build-gauge.is-indeterminate .build-gauge-svg {
  animation: gaugeSpin 1.4s linear infinite;
  transform-origin: 50% 50%;
}

@keyframes gaugeSpin {
  from { transform: rotate(-90deg); }
  to { transform: rotate(270deg); }
}

.build-dashboard-meters {
  display: grid;
  gap: 8px;
}

.build-meter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.build-meter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.build-meter-value {
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.build-meter-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  border: 1px solid var(--border);
}

.build-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
}

.build-meter-fill.tone-active,
.build-meter-fill.tone-indigo { background: var(--gradient-primary); }
.build-meter-fill.tone-success,
.build-meter-fill.tone-good,
.build-meter-fill.tone-mint { background: var(--gradient-success); }
.build-meter-fill.tone-danger,
.build-meter-fill.tone-pink { background: linear-gradient(135deg, var(--accent4), var(--bad)); }
.build-meter-fill.tone-violet { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent4) 40%, var(--accent))); }
.build-meter-fill.tone-cyan { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 55%, var(--accent))); }
.build-meter-fill.tone-amber { background: linear-gradient(135deg, var(--accent3), color-mix(in srgb, var(--accent3) 50%, var(--warn))); }

.build-dashboard-timing {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.build-dashboard-etc {
  color: var(--muted);
}

.build-dashboard[data-build-live="1"] {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.build-dashboard--compact {
  padding: 12px 14px;
  gap: 10px;
}

.build-quality-strip {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent4) 28%, var(--border));
  background: color-mix(in srgb, var(--accent4) 6%, var(--surface));
}

.build-quality-strip-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.build-quality-strip-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text);
}

.build-quality-scored {
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.build-quality-retry {
  font-size: 10px;
  font-weight: 800;
  color: var(--warn);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.build-quality-gauges {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  gap: 8px;
}

.build-quality-failures {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  word-break: break-word;
}

/* ─── Mission Control 2026 telemetry ─────────────────── */
.mc-flow-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}

.mc-dashboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
}

.mc-dashboard[data-build-live="1"] {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
}

.mc-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 20px;
  align-items: start;
}

.mc-hero-gauge {
  position: relative;
  flex-shrink: 0;
}

.mc-hero-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  pointer-events: none;
}

.mc-hero-gauge .build-gauge-center {
  opacity: 0;
}

.mc-hero-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.mc-hero-status {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-hero-stage {
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}

.mc-hero-meta {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.mc-hero-meters {
  display: grid;
  gap: 8px;
}

.mc-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.mc-hero-throughput,
.mc-hero-queue {
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.mc-meter {
  display: grid;
  gap: 5px;
}

.mc-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.mc-meter-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.mc-meter-value {
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.mc-meter-track {
  position: relative;
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.mc-meter-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
}

.mc-meter-fill.tone-active,
.mc-meter-fill.tone-indigo { background: var(--gradient-primary); }
.mc-meter-fill.tone-success,
.mc-meter-fill.tone-good,
.mc-meter-fill.tone-mint { background: var(--gradient-success); }
.mc-meter-fill.tone-danger,
.mc-meter-fill.tone-pink { background: linear-gradient(135deg, var(--accent4), var(--bad)); }
.mc-meter-fill.tone-violet { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent4) 40%, var(--accent))); }
.mc-meter-fill.tone-cyan { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 55%, var(--accent))); }
.mc-meter-fill.tone-amber { background: linear-gradient(135deg, var(--accent3), color-mix(in srgb, var(--accent3) 50%, var(--warn))); }
.mc-meter-fill.tone-muted { background: color-mix(in srgb, var(--muted) 45%, transparent); }

.mc-meter.is-indeterminate .mc-meter-fill {
  width: 28% !important;
  animation: mcMeterPulse 1.2s ease-in-out infinite;
}

.mc-meter-indeterminate {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 8%, transparent), transparent);
  animation: mcMeterShimmer 1.4s linear infinite;
}

@keyframes mcMeterPulse {
  0%, 100% { opacity: 0.55; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(140%); }
}

@keyframes mcMeterShimmer {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.mc-quality {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent4) 22%, var(--border));
  background: color-mix(in srgb, var(--accent4) 5%, var(--panel));
}

.mc-quality-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-quality-title {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  color: var(--text);
}

.mc-quality-meta {
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mc-quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}

.mc-pipeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: min(52vh, 520px);
  overflow: auto;
  padding: 4px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 88%, transparent);
}

.mc-stage {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background 0.25s ease;
}

.mc-stage:last-child {
  border-bottom: none;
}

.mc-stage-rail {
  display: flex;
  justify-content: center;
  padding-top: 6px;
}

.mc-stage-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--muted) 40%, transparent);
  background: var(--surface);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.mc-stage-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mc-stage-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mc-stage-idx {
  flex-shrink: 0;
  width: 22px;
  font-size: 10px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.mc-stage-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-stage-badge {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.35px;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  color: var(--muted);
}

.mc-stage-metric {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  padding: 2px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--code-bg) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.mc-stage-meter-track {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.mc-stage-meter-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(.4, 0, .2, 1);
}

.mc-stage-meter-track.is-indeterminate .mc-stage-meter-fill.is-indeterminate {
  width: 32% !important;
  animation: mcMeterPulse 1.2s ease-in-out infinite;
}

[data-build-pipeline-live="1"] .mc-stage-meter-track.is-indeterminate .mc-stage-meter-fill.is-indeterminate {
  animation: mcMeterPulse 1s ease-in-out infinite;
}

.mc-stage-detail {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.35;
}

.mc-stage.is-active {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.mc-stage.is-active .mc-stage-dot {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 35%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.mc-stage.is-active .mc-stage-badge {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mc-stage.is-done .mc-stage-dot {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 40%, var(--surface));
}

.mc-stage.is-done .mc-stage-badge {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}

.mc-stage.is-failed .mc-stage-dot {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 35%, var(--surface));
}

.mc-stage.is-failed .mc-stage-badge {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
}

.mc-stage.is-active .mc-stage-meter-fill {
  animation: mcStagePulse 1.6s ease-in-out infinite;
}

@keyframes mcStagePulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

.mc-kpi {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mc-kpi-item {
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-left: 3px solid var(--border);
}

.mc-kpi-item[data-tone="cyan"] { border-left-color: var(--accent2); }
.mc-kpi-item[data-tone="indigo"] { border-left-color: var(--accent); }
.mc-kpi-item[data-tone="pink"] { border-left-color: var(--accent4); }
.mc-kpi-item[data-tone="good"] { border-left-color: var(--good); }

.mc-kpi-value {
  font-size: 22px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1.1;
}

.mc-kpi-label {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

.mc-kpi-sub {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.35;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-variant-numeric: tabular-nums;
}

.mc-shell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 2px;
}

/* Never stack the boot skeleton over hydrated Mission Control (run detail bug). */
.ops-detail-body--mission.is-hydrated .mc-shell,
.ops-detail-body--mission.is-hydrated .build-mission-boot-skeleton,
.ops-detail-body--mission:has(.build-mission-card) .mc-shell,
.ops-detail-body--mission:has(.build-mission-card) .build-mission-boot-skeleton {
  display: none !important;
}

.mc-shell--compact .mc-shell-pipeline {
  display: none;
}

.build-mission-boot-skeleton {
  padding: 24px 4px;
  font-size: 13px;
  text-align: center;
}

.mc-shell-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}

.mc-shell-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  animation: buildLivePulse 1.2s ease-in-out infinite;
}

.mc-shell-hero {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.mc-shell-ring {
  width: 112px;
  height: 112px;
  border-radius: 999px;
  border: 3px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-top-color: var(--accent);
  animation: gaugeSpin 0.9s linear infinite;
}

.mc-shell-lines {
  display: grid;
  gap: 8px;
}

.mc-shell-line {
  display: block;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 16%, transparent);
  animation: build-boot-pulse 1.4s ease-in-out infinite;
}

.mc-shell-line--wide {
  width: 72%;
  height: 10px;
}

.mc-shell-pipeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow: hidden;
}

.mc-shell-stage {
  display: block;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  animation: build-boot-pulse 1.6s ease-in-out infinite;
  animation-delay: calc(var(--mc-shell-i, 0) * 40ms);
}

.mc-run-meta {
  margin-bottom: 4px;
}

@media (max-width: 900px) {
  .mc-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .mc-hero-gauge {
    justify-self: center;
  }

  .mc-quality-grid {
    grid-template-columns: minmax(0, 1fr);
  }

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

@media (max-width: 520px) {
  .mc-kpi {
    grid-template-columns: minmax(0, 1fr);
  }
}

.build-workflow-compact .build-compact-actions {
  margin-top: 10px;
}

.build-mission-card {
  border-radius: 16px;
}

.build-mission-title h1 {
  letter-spacing: -0.2px;
}

.build-mission-page .card-inner {
  padding: 0;
}

.ops-detail-body--mission {
  padding: 16px 18px 20px;
  min-height: 420px;
}

.build-mission-boot {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.build-mission-boot-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.build-mission-boot-meta {
  font-size: 12px;
}

.build-mission-boot-gauges {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.build-mission-boot-gauge {
  display: block;
  aspect-ratio: 1;
  max-width: 76px;
  margin: 0 auto;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 8%, transparent),
    color-mix(in srgb, var(--accent2) 6%, transparent)
  );
  animation: build-boot-pulse 1.4s ease-in-out infinite;
}

.build-mission-boot-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.build-mission-boot-card {
  display: block;
  min-height: 72px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  animation: build-boot-pulse 1.8s ease-in-out infinite;
}

@keyframes build-boot-pulse {
  0%,
  100% {
    opacity: 0.72;
  }
  50% {
    opacity: 1;
  }
}

@media (max-width: 960px) {
  .build-mission-boot-gauges {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .build-mission-boot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.ops-detail-header--build {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.ops-detail-hint {
  font-size: 11px;
  font-weight: 600;
  margin-left: auto;
}

.build-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 45%, transparent);
}

.build-live-dot.is-live {
  animation: buildLivePulse 1.6s ease-in-out infinite;
}

@keyframes buildLivePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 50%, transparent);
    opacity: 1;
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--good) 0%, transparent);
    opacity: 0.85;
  }
}

/* Stage/node tone tokens (design system) */
.build-flow-node[data-tone="violet"],
.build-mc-strip[data-tone="violet"] {
  --node-color: color-mix(in srgb, var(--accent) 82%, var(--accent4));
  --node-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="indigo"],
.build-mc-strip[data-tone="indigo"] {
  --node-color: var(--accent);
  --node-glow: color-mix(in srgb, var(--accent) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="cyan"],
.build-mc-strip[data-tone="cyan"] {
  --node-color: var(--accent2);
  --node-glow: color-mix(in srgb, var(--accent2) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="mint"],
.build-mc-strip[data-tone="mint"] {
  --node-color: var(--good);
  --node-glow: color-mix(in srgb, var(--good) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="amber"],
.build-mc-strip[data-tone="amber"] {
  --node-color: var(--accent3);
  --node-glow: color-mix(in srgb, var(--accent3) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="pink"],
.build-mc-strip[data-tone="pink"] {
  --node-color: var(--accent4);
  --node-glow: color-mix(in srgb, var(--accent4) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-node[data-tone="good"],
.build-mc-strip[data-tone="good"] {
  --node-color: var(--good);
  --node-glow: color-mix(in srgb, var(--good) 35%, transparent);
  --mc-color: var(--node-color);
  --mc-glow: var(--node-glow);
}

.build-flow-orb .build-gauge {
  position: absolute;
  inset: -2px;
  z-index: 1;
  pointer-events: none;
}

.build-flow-orb .build-gauge-value {
  display: none;
}

.build-flow-orb .build-gauge-label {
  display: none;
}

.build-flow-summary-item[data-tone="cyan"] { border-left-color: var(--accent2); }
.build-flow-summary-item[data-tone="cyan"] .build-flow-summary-value { color: var(--accent2); text-shadow: none; }
.build-flow-summary-item[data-tone="indigo"] { border-left-color: var(--accent); }
.build-flow-summary-item[data-tone="indigo"] .build-flow-summary-value { color: var(--accent); text-shadow: none; }
.build-flow-summary-item[data-tone="pink"] { border-left-color: var(--accent4); }
.build-flow-summary-item[data-tone="pink"] .build-flow-summary-value { color: var(--accent4); text-shadow: none; }
.build-flow-summary-item[data-tone="good"] { border-left-color: var(--good); }
.build-flow-summary-item[data-tone="good"] .build-flow-summary-value { color: var(--good); text-shadow: none; }

[data-theme="light"] .build-dashboard {
  background:
    radial-gradient(ellipse 520px 120px at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 70%),
    var(--panel);
}

/* ─── Mission Control Strip ───────────────────────────── */
.build-mc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 18px;
  margin-bottom: 12px;
  border-radius: 14px;
  background:
    radial-gradient(ellipse 200px 60px at 0% 50%, var(--mc-glow, rgba(0, 152, 195, .25)), transparent 65%),
    rgba(255, 255, 255, .03);
  border: 1px solid var(--mc-color, rgba(0, 152, 195, .35));
  border-left: 3px solid var(--mc-color, #0098c3);
  box-shadow: 0 0 24px var(--mc-glow, rgba(0, 152, 195, .15)), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
}

.build-mc-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .04) 50%, transparent 100%);
  background-size: 300% 100%;
  animation: mcBarShimmer 4s linear infinite;
  pointer-events: none;
}

.build-mc-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--mc-color, #0098c3);
  filter: drop-shadow(0 0 6px var(--mc-glow, rgba(0, 152, 195, .5)));
  animation: mcIconPulse 2.5s ease-in-out infinite;
  flex-shrink: 0;
}

.build-mc-stage {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--mc-color, #0098c3);
  text-shadow: 0 0 16px var(--mc-glow, rgba(0, 152, 195, .5));
  white-space: nowrap;
}

.build-mc-sep {
  color: rgba(255, 255, 255, .2);
  font-size: 14px;
}

.build-mc-meta {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.build-mc-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 0;
}

.build-mc-bar {
  width: 80px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.build-dashboard[data-build-live="1"] {
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

.build-dashboard[data-build-live="1"] .build-gauge--active .build-gauge-fill {
  animation: gaugeLivePulse 2s ease-in-out infinite;
}

@keyframes gaugeLivePulse {
  0%, 100% { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent) 35%, transparent)); }
  50% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); }
}

.build-flow-node.is-done .build-flow-state-pill {
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
}

.build-mc-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--mc-color, #0098c3) 0%, rgba(255, 255, 255, .75) 50%, var(--mc-color, #0098c3) 100%);
  background-size: 200% 100%;
  animation: mcBarShimmer 2s linear infinite;
  box-shadow: 0 0 8px var(--mc-glow, rgba(0, 152, 195, .5));
  transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
}

.build-mc-pct {
  font-size: 11px;
  font-weight: 800;
  color: var(--mc-color, #0098c3);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* ─── Main pipeline container ─────────────────────────── */
.build-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: start;
  gap: 10px;
  box-sizing: border-box;
  padding: 12px 12px 14px;
  border-radius: 20px;
  border: 1px solid rgba(0, 152, 195, .22);
  background:
    radial-gradient(ellipse 1400px 200px at 5% 0%, rgba(0, 152, 195, .20), transparent 58%),
    radial-gradient(ellipse 1000px 200px at 95% 10%, rgba(16, 185, 129, .16), transparent 53%),
    radial-gradient(ellipse 800px 160px at 50% 100%, rgba(245, 158, 11, .12), transparent 53%),
    radial-gradient(ellipse 600px 100px at 30% 50%, rgba(105, 38, 111, .09), transparent 60%),
    linear-gradient(135deg, rgba(10, 15, 30, .97) 0%, rgba(20, 28, 48, .94) 100%);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, .12),
    0 24px 64px rgba(0, 0, 0, .40),
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 0 0 1px rgba(0, 152, 195, .07);
  backdrop-filter: blur(10px);
}

.mc-pipeline--map.build-flow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

.build-flow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(110deg, transparent 20%, rgba(0, 152, 195, .05) 40%, rgba(16, 185, 129, .04) 60%, transparent 80%);
  background-size: 300% 100%;
  animation: buildFlowShimmer 10s ease-in-out infinite;
  pointer-events: none;
}

.mc-pipeline--map.build-flow::before {
  display: none !important;
}

/* ─── Node container ──────────────────────────────────── */
.build-flow-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  box-sizing: border-box;
  min-width: 0;
  min-height: 88px;
  padding: 10px 10px 8px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .06);
  background: linear-gradient(180deg, rgba(255, 255, 255, .03) 0%, rgba(255, 255, 255, .012) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 6px 16px rgba(0, 0, 0, .14);
  cursor: default;
  transition: transform 0.35s cubic-bezier(.4, 0, .2, 1), filter 0.35s ease, background 0.35s ease;
  z-index: 1;
}

.build-flow-node:hover {
  transform: translateY(-1px);
  z-index: 3;
}

.build-flow-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.build-flow-main {
  min-width: 0;
  flex: 1;
}

.build-flow-kicker {
  margin-bottom: 2px;
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: 0.55px;
  color: rgba(255, 255, 255, .34);
  text-transform: uppercase;
}

/* ─── Orb container ───────────────────────────────────── */
.build-flow-orb {
  position: relative;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Dual pulse rings */
.build-flow-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid transparent;
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
}

/* ─── Main orb dot ────────────────────────────────────── */
.build-flow-dot {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .2);
  transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}

/* Stage glyph icon */
.build-flow-icon {
  font-size: 13px;
  line-height: 1;
  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  user-select: none;
}

/* ─── Label ───────────────────────────────────────────── */
.build-flow-label {
  font-weight: 800;
  letter-spacing: 0.1px;
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: none;
  min-height: 0;
  color: var(--text);
  text-transform: none;
  opacity: 0.88;
  transition: opacity 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
}

.build-flow-state-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 52px;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .62);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.build-flow-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

/* ─── Count badge ─────────────────────────────────────── */
.build-flow-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .04);
  color: var(--muted);
  min-width: 32px;
  transition: all 0.4s cubic-bezier(.4, 0, .2, 1);
}

.build-flow-detail {
  min-width: 0;
  flex: 1;
  font-size: 10px;
  line-height: 1.25;
  color: rgba(255, 255, 255, .44);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.build-flow-detail.is-empty {
  display: none;
}

.build-flow-count.is-empty {
  opacity: .42;
  font-size: 13px;
  color: rgba(255, 255, 255, .22);
}

.build-flow-count[data-animating="true"] {
  animation: countPop 0.5s cubic-bezier(.4, 0, .2, 1);
}

.build-flow-count[data-animating="true"] .count-value {
  animation: countGlow 0.5s ease;
}

/* ─── Connector plasma beam ───────────────────────────── */
/* Connectors are hidden in wrapped layout — flow implied by order */
.build-flow-link {
  display: none;
}

@media (max-width: 980px) {
  .build-flow {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
  }

  .build-flow-node {
    min-height: 84px;
    padding: 9px 9px 8px;
  }
}

@media (max-width: 640px) {
  .build-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 8px 14px;
  }

  .build-flow-card-top {
    gap: 8px;
  }

  .build-flow-label {
    font-size: 10px;
  }

  .build-flow-state-pill {
    min-width: 46px;
    padding: 3px 6px;
  }

  .build-flow-detail {
    font-size: 9px;
  }
}

@media (max-width: 420px) {
  .build-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 360px) {
  .build-flow {
    grid-template-columns: minmax(0, 1fr);
  }
}

.build-flow-link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .14), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.build-flow-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 999px;
  pointer-events: none;
}

.build-flow-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  top: 50%;
  left: 0;
  margin-top: -3.5px;
  background: linear-gradient(135deg, var(--node-color, #0098c3), rgba(255, 255, 255, .8));
  box-shadow: 0 0 8px var(--node-glow, rgba(0, 152, 195, .6)), 0 0 16px var(--node-color, #0098c3);
  opacity: 0;
}

/* ── STATE: Pending ───────────────────────────────────── */
.build-flow-node.is-pending {
  opacity: .62;
  filter: saturate(.82) brightness(.92);
}

.build-flow-node.is-pending .build-flow-dot {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .09);
}

.build-flow-node.is-pending .build-flow-icon {
  opacity: 0.4;
}

.build-flow-node.is-pending .build-flow-label {
  opacity: 0.38;
}

.build-flow-node.is-pending .build-flow-link {
  background: rgba(255, 255, 255, .03);
}

/* ── STATE: Active ────────────────────────────────────── */
.build-flow-node.is-active {
  animation: none;
  background:
    radial-gradient(ellipse 90px 52px at 14% 16%, var(--node-glow, rgba(0, 152, 195, .11)), transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, .02) 100%);
  border-color: color-mix(in srgb, var(--node-color, #0098c3) 42%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), 0 8px 18px rgba(0, 0, 0, .16);
  filter: saturate(1.04);
}

.mc-pipeline--map .mc-stage.build-flow-node.is-active {
  background: color-mix(in srgb, var(--surface) 94%, var(--panel)) !important;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  box-shadow: none !important;
  filter: none !important;
}

.build-flow-node.is-active .build-flow-dot {
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, .5), var(--node-color, #0098c3) 55%, rgba(0, 0, 0, .25) 100%);
  border-color: rgba(255, 255, 255, .4);
  box-shadow:
    0 0 0 3px var(--node-glow, rgba(0, 152, 195, .12)),
    0 0 12px var(--node-glow, rgba(0, 152, 195, .18)),
    inset 0 2px 5px rgba(255, 255, 255, .24);
}

.build-flow-node.is-active .build-flow-icon {
  color: #fff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .45));
  transform: none;
}

.build-flow-node.is-active .build-flow-ring.r1 {
  opacity: .28;
  border-color: var(--node-color, #0098c3);
  transform: scale(1.14);
  animation: none;
}

.build-flow-node.is-active .build-flow-ring.r2 {
  opacity: 0;
  animation: none;
}

.build-flow-node.is-active .build-flow-label {
  color: var(--node-color, #0098c3);
  opacity: 1;
  text-shadow: none;
}

.build-flow-node.is-active .build-flow-state-pill {
  color: rgba(255, 255, 255, .92);
  border-color: color-mix(in srgb, var(--node-color, #0098c3) 55%, rgba(255, 255, 255, .1));
  background: rgba(255, 255, 255, .07);
  box-shadow: none;
}

.build-flow-node.is-active .build-flow-count {
  color: rgba(255, 255, 255, .98);
  background: rgba(255, 255, 255, .07);
  border-color: var(--node-color, #0098c3);
  box-shadow: none;
}

.build-flow-node.is-active .build-flow-link {
  background: linear-gradient(90deg, var(--node-color, #0098c3) 0%, rgba(255, 255, 255, .5) 50%, var(--node-color, #0098c3) 100%);
  background-size: 200% 100%;
  animation: buildFlowShimmer 1.4s linear infinite;
  box-shadow: 0 0 12px var(--node-glow, rgba(0, 152, 195, .55)), 0 0 24px var(--node-glow, rgba(0, 152, 195, .3));
}

.mc-pipeline--map .mc-stage.build-flow-node.is-active .build-flow-link {
  box-shadow: none !important;
  animation: none !important;
}

.build-flow-node.is-active .build-flow-link::before {
  opacity: 1;
}

.build-flow-node.is-active .build-flow-particle {
  animation: particleComet 2s ease-in-out infinite;
}

.build-flow-node.is-active .build-flow-particle:nth-child(2) {
  animation-delay: 0.45s;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
}

.build-flow-node.is-active .build-flow-particle:nth-child(3) {
  animation-delay: 0.9s;
  animation-duration: 2.2s;
}

.build-flow-node.is-active .build-flow-particle:nth-child(4) {
  animation-delay: 1.35s;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  animation-duration: 1.6s;
}

/* ── STATE: Done ──────────────────────────────────────── */
.build-flow-node.is-done .build-flow-dot {
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, .38), var(--node-color, #0098c3) 62%);
  border-color: var(--node-color, #0098c3);
  box-shadow:
    0 0 0 2px var(--node-glow, rgba(0, 152, 195, .12)),
    0 0 10px var(--node-glow, rgba(0, 152, 195, .16)),
    inset 0 2px 5px rgba(255, 255, 255, .2);
  animation: none;
}

.build-flow-node.is-done .build-flow-icon {
  color: rgba(255, 255, 255, .88);
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, .5));
}

.build-flow-node.is-done .build-flow-ring.r1 {
  opacity: 0.45;
  border-color: var(--node-color, #0098c3);
  transform: scale(1.48);
}

.build-flow-node.is-done .build-flow-label {
  color: var(--node-color, #0098c3);
  opacity: 1;
}

.build-flow-node.is-done .build-flow-count {
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .06);
  border-color: var(--node-color, #0098c3);
  box-shadow: none;
}

.build-flow-node.is-done .build-flow-link {
  background: linear-gradient(90deg, var(--node-color, #0098c3), rgba(255, 255, 255, .3), var(--node-color, #0098c3));
  background-size: 200% 100%;
  animation: buildFlowShimmer 5s linear infinite;
  box-shadow: 0 0 10px var(--node-glow, rgba(0, 152, 195, .3)), 0 0 20px var(--node-glow, rgba(0, 152, 195, .15));
}

.build-flow-node.is-done .build-flow-link::before {
  opacity: 0.4;
  animation: buildFlowShimmer 5s linear infinite;
}

/* ── STATE: Blocked ───────────────────────────────────── */
.build-flow-node.is-blocked {
  filter: saturate(1.05);
  background: linear-gradient(180deg, rgba(245, 158, 11, .06) 0%, rgba(255, 255, 255, .015) 100%);
}

.build-flow-node.is-blocked .build-flow-dot {
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, .45), #f59e0b 56%, rgba(0, 0, 0, .25) 100%);
  border-color: rgba(251, 191, 36, .75);
  box-shadow:
    0 0 0 4px rgba(245, 158, 11, .18),
    0 0 18px rgba(245, 158, 11, .38),
    inset 0 2px 6px rgba(255, 255, 255, .28);
}

.build-flow-node.is-blocked .build-flow-label {
  color: #fbbf24;
  opacity: 1;
}

.build-flow-node.is-blocked .build-flow-count {
  border-color: rgba(245, 158, 11, .5);
  background: rgba(245, 158, 11, .14);
  color: #fde68a;
}

.build-flow-node.is-blocked .build-flow-link {
  background: rgba(245, 158, 11, .22);
  box-shadow: 0 0 10px rgba(245, 158, 11, .22);
}

/* ── STATE: Failed ────────────────────────────────────── */
.build-flow-node.is-failed {
  filter: saturate(1.05);
  background: linear-gradient(180deg, rgba(239, 68, 68, .07) 0%, rgba(255, 255, 255, .015) 100%);
}

.build-flow-node.is-failed .build-flow-dot {
  background: radial-gradient(circle at 32% 32%, rgba(255, 255, 255, .4), #ef4444 58%, rgba(0, 0, 0, .28) 100%);
  border-color: rgba(248, 113, 113, .82);
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, .18),
    0 0 22px rgba(239, 68, 68, .42),
    inset 0 2px 6px rgba(255, 255, 255, .24);
}

.build-flow-node.is-failed .build-flow-label {
  color: #fca5a5;
  opacity: 1;
}

.build-flow-node.is-failed .build-flow-count {
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .14);
  color: #fecaca;
}

.build-flow-node.is-failed .build-flow-link {
  background: rgba(239, 68, 68, .2);
  box-shadow: 0 0 10px rgba(239, 68, 68, .24);
}

/* ─── Record summary: stat chips ──────────────────────── */
.build-flow-summary {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .025);
  border: 1px solid rgba(255, 255, 255, .07);
}

.build-flow-summary-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 8px 14px 8px 12px;
  border-radius: 10px;
  border-left: 3px solid var(--chip-color, #0098c3);
  background: rgba(255, 255, 255, .03);
  min-width: 80px;
  transition: transform 0.2s ease;
}

.build-flow-summary-item:hover {
  transform: translateY(-1px);
}

.build-flow-summary-value {
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--chip-color, #fff);
  text-shadow: 0 0 12px var(--chip-color, rgba(0, 152, 195, .5));
  line-height: 1;
}

.build-flow-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
}

/* ─── Floating stage tooltip ──────────────────────────── */
#bflow-tooltip,
.bflow-tooltip {
  position: fixed;
  z-index: 99999;
  max-width: 280px;
  min-width: 200px;
  padding: 0;
  border-radius: 14px;
  background: rgba(10, 15, 30, .93);
  border: 1px solid var(--tt-color, rgba(0, 152, 195, .35));
  border-top: 3px solid var(--tt-color, #0098c3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .04),
    0 8px 32px rgba(0, 0, 0, .55),
    0 0 24px var(--tt-color, rgba(0, 152, 195, .2));
  backdrop-filter: blur(16px);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px) scale(0.97);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#bflow-tooltip.is-visible,
.bflow-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: tooltipFadeIn 0.15s ease forwards;
}

.bflow-tt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.bflow-tt-icon {
  font-size: 20px;
  color: var(--tt-color, #0098c3);
  filter: drop-shadow(0 0 6px var(--tt-color, rgba(0, 152, 195, .5)));
  flex-shrink: 0;
  line-height: 1;
}

.bflow-tt-name {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  flex: 1;
}

.bflow-tt-state {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .5);
}

.bflow-tt-state[data-state="active"] {
  background: rgba(0, 152, 195, .25);
  color: #a5b4fc;
}

.bflow-tt-state[data-state="done"] {
  background: rgba(16, 185, 129, .20);
  color: #6ee7b7;
}

.bflow-tt-state[data-state="blocked"] {
  background: rgba(245, 158, 11, .22);
  color: #fcd34d;
}

.bflow-tt-state[data-state="failed"] {
  background: rgba(239, 68, 68, .2);
  color: #fca5a5;
}

.bflow-tt-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 14px;
  border-top: 1px solid rgba(255, 255, 255, .04);
}

.bflow-tt-key {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tt-color, rgba(0, 152, 195, .8));
  min-width: 44px;
  padding-top: 1px;
  flex-shrink: 0;
}

.bflow-tt-val {
  font-size: 11px;
  color: rgba(255, 255, 255, .68);
  line-height: 1.45;
}

.bflow-tt-row--live .bflow-tt-val {
  color: var(--text);
  font-weight: 600;
}

.bflow-tt-about {
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  margin-top: 2px;
  padding-top: 2px;
  opacity: 0.88;
}

.bflow-tt-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
}

/* ─── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .build-flow::before,
  .build-mc-strip::before,
  .build-mc-bar-fill,
  .build-mc-icon {
    animation: none;
  }

  .build-flow-node.is-active,
  .build-flow-node.is-active .build-flow-ring.r1,
  .build-flow-node.is-active .build-flow-ring.r2,
  .build-flow-node.is-active .build-flow-link,
  .build-flow-node.is-active .build-flow-count {
    animation: none;
  }

  .build-flow-node.is-active .build-flow-particle {
    display: none;
  }

  .build-flow-node.is-done .build-flow-dot,
  .build-flow-node.is-done .build-flow-count,
  .build-flow-node.is-done .build-flow-link {
    animation: none;
  }

  .build-flow-count[data-animating="true"] {
    animation: none;
  }
}

/* ─── Light theme overrides ───────────────────────────── */
[data-theme="light"] .build-flow {
  background:
    radial-gradient(ellipse 1400px 200px at 5% 0%, rgba(0, 152, 195, .10), transparent 58%),
    radial-gradient(ellipse 1000px 200px at 95% 10%, rgba(16, 185, 129, .08), transparent 53%),
    linear-gradient(135deg, rgba(255, 255, 255, .99) 0%, rgba(248, 250, 252, .97) 100%);
  border-color: rgba(0, 152, 195, .15);
  box-shadow:
    0 4px 6px rgba(0, 0, 0, .04),
    0 20px 60px rgba(0, 152, 195, .10),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

[data-theme="light"] .build-mc-strip {
  background:
    radial-gradient(ellipse 200px 60px at 0% 50%, var(--mc-glow, rgba(0, 152, 195, .12)), transparent 65%),
    rgba(255, 255, 255, .8);
  border-color: var(--mc-color, rgba(0, 152, 195, .28));
  border-left-color: var(--mc-color, #0098c3);
  box-shadow: 0 0 20px var(--mc-glow, rgba(0, 152, 195, .08)), inset 0 1px 0 rgba(255, 255, 255, .9);
}

[data-theme="light"] .build-mc-meta {
  color: var(--muted);
}

[data-theme="light"] .build-mc-sep {
  color: color-mix(in srgb, var(--muted) 55%, transparent);
}

[data-theme="light"] .build-flow-dot {
  border-color: rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .05);
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .07), 0 2px 8px rgba(0, 0, 0, .05);
}

[data-theme="light"] .build-flow-label {
  color: var(--text);
}

[data-theme="light"] .build-flow-count,
[data-theme="light"] .mc-stage-metric,
[data-theme="light"] .mc-pipeline--map .build-flow-count,
[data-theme="light"] .mc-pipeline--map .mc-stage-metric {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--card));
  color: var(--text);
}

[data-theme="light"] .build-flow-count .count-value,
[data-theme="light"] .mc-stage-metric .count-value {
  color: inherit;
}

[data-theme="light"] .build-flow-count.is-empty,
[data-theme="light"] .mc-stage-metric.is-empty {
  color: var(--muted);
  opacity: 1;
  background: color-mix(in srgb, var(--muted) 6%, var(--card));
  border-color: var(--line-strong, var(--border));
}

/* State pills keep dark-mode white text — force readable on light */
[data-theme="light"] .build-flow-node.is-active .build-flow-count,
[data-theme="light"] .mc-stage.is-active .mc-stage-metric,
[data-theme="light"] .mc-pipeline--map .build-flow-node.is-active .build-flow-count {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

[data-theme="light"] .build-flow-node.is-done .build-flow-count,
[data-theme="light"] .mc-stage.is-done .mc-stage-metric,
[data-theme="light"] .mc-pipeline--map .build-flow-node.is-done .build-flow-count {
  color: var(--text);
  background: color-mix(in srgb, var(--good) 10%, var(--card));
  border-color: color-mix(in srgb, var(--good) 40%, var(--border));
}

[data-theme="light"] .build-flow-node.is-blocked .build-flow-count,
[data-theme="light"] .mc-stage.is-blocked .mc-stage-metric {
  color: #92400e;
  background: #fef3c7;
  border-color: #f59e0b;
}

[data-theme="light"] .build-flow-node.is-failed .build-flow-count,
[data-theme="light"] .mc-stage.is-failed .mc-stage-metric {
  color: #991b1b;
  background: #fee2e2;
  border-color: #f87171;
}

[data-theme="light"] .build-flow-node.is-active .build-flow-state-pill {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

[data-theme="light"] .build-flow-link {
  background: rgba(15, 23, 42, .05);
}

[data-theme="light"] .build-flow-node.is-pending .build-flow-dot {
  background: rgba(15, 23, 42, .03);
  border-color: rgba(15, 23, 42, .07);
}

[data-theme="light"] .build-flow-node.is-active .build-flow-dot {
  box-shadow:
    0 0 0 5px var(--node-glow, rgba(0, 152, 195, .16)),
    0 0 22px var(--node-glow, rgba(0, 152, 195, .28)),
    0 0 48px var(--node-glow, rgba(0, 152, 195, .16)),
    inset 0 2px 6px rgba(255, 255, 255, .5);
}

[data-theme="light"] .build-flow-summary {
  background: rgba(15, 23, 42, .02);
  border-color: rgba(15, 23, 42, .06);
}

[data-theme="light"] .build-flow-node.is-blocked .build-flow-dot {
  box-shadow:
    0 0 0 4px rgba(245, 158, 11, .14),
    0 0 18px rgba(245, 158, 11, .24),
    inset 0 2px 6px rgba(255, 255, 255, .55);
}

[data-theme="light"] .build-flow-node.is-failed .build-flow-dot {
  box-shadow:
    0 0 0 4px rgba(239, 68, 68, .14),
    0 0 20px rgba(239, 68, 68, .24),
    inset 0 2px 6px rgba(255, 255, 255, .55);
}

[data-theme="light"] .stage-pill.is-done {
  border-color: rgba(5, 150, 105, .4);
  background: linear-gradient(135deg, rgba(5, 150, 105, .15), rgba(14, 165, 233, .12));
}

[data-theme="light"] .stage-pill.is-danger {
  border-color: rgba(220, 38, 38, .45);
  background: linear-gradient(135deg, rgba(220, 38, 38, .14), rgba(249, 115, 22, .12));
}

[data-theme="light"] .build-flow-summary-item {
  background: rgba(15, 23, 42, .025);
}

[data-theme="light"] .build-flow-summary-label {
  color: var(--muted);
}

[data-theme="light"] #bflow-tooltip,
[data-theme="light"] .bflow-tooltip {
  background: #ffffff;
  border: 1px solid var(--border);
  border-top: 3px solid var(--tt-color, #0098c3);
  box-shadow: 0 10px 28px rgba(26, 30, 33, .16), 0 0 0 1px rgba(26, 30, 33, .04);
}

[data-theme="light"] .bflow-tt-name {
  color: var(--text);
}

[data-theme="light"] .bflow-tt-key {
  color: var(--label, #066880);
}

[data-theme="light"] .bflow-tt-val {
  color: var(--text);
}

[data-theme="light"] .bflow-tt-count {
  color: var(--text);
}

[data-theme="light"] .bflow-tt-header {
  border-bottom-color: var(--border);
}

[data-theme="light"] .bflow-tt-row {
  border-top-color: var(--border);
}

[data-theme="light"] .bflow-tt-state {
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  color: var(--muted);
}

[data-theme="light"] .bflow-tt-state[data-state="active"] {
  background: rgba(0, 152, 195, .12);
  color: #0098c3;
}

[data-theme="light"] .bflow-tt-state[data-state="done"] {
  background: rgba(16, 185, 129, .10);
  color: #059669;
}

[data-theme="light"] .bflow-tt-state[data-state="blocked"] {
  background: rgba(245, 158, 11, .14);
  color: #b45309;
}

[data-theme="light"] .bflow-tt-state[data-state="failed"] {
  background: rgba(239, 68, 68, .12);
  color: #b91c1c;
}

/* ========================================
   LIGHT THEME OVERRIDES
   ======================================== */
[data-theme="light"] .hero {
  background:
    linear-gradient(135deg, rgba(0, 152, 195, .06) 0%, rgba(105, 38, 111, .04) 50%, rgba(16, 185, 129, .03) 100%),
    var(--card);
  border-color: rgba(0, 152, 195, .1);
}

[data-theme="light"] .card {
  background: var(--card);
  border-color: var(--border);
  box-shadow: var(--shadow);
}

[data-theme="light"] .card:hover {
  box-shadow: var(--fun-shadow);
}

/* Global light contrast hardening — kill washed secondary chrome */
[data-theme="light"] .muted,
[data-theme="light"] .mc-kpi-label,
[data-theme="light"] .mc-kpi-sub,
[data-theme="light"] .mc-shell-head,
[data-theme="light"] .build-mission-heading p,
[data-theme="light"] .build-mission-meta,
[data-theme="light"] .instrument-meter-head {
  color: var(--muted);
  opacity: 1;
}

[data-theme="light"] .badge,
[data-theme="light"] .pill,
[data-theme="light"] .exec-badge {
  border-color: color-mix(in srgb, var(--border) 80%, var(--muted) 20%);
}

[data-theme="light"] .badge.success,
[data-theme="light"] .pill.success,
[data-theme="light"] .exec-badge.done,
[data-theme="light"] .exec-badge.success {
  color: #047857;
  background: #d1fae5;
  border-color: #6ee7b7;
}

[data-theme="light"] code {
  background: rgba(0, 152, 195, .08);
}

[data-theme="light"] td code {
  background: rgba(0, 152, 195, .06);
}

[data-theme="light"] .btn {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

[data-theme="light"] .btn:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
}

[data-theme="light"] .btn.primary {
  background: linear-gradient(135deg, #0098c3 0%, #69266f 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .3);
}

[data-theme="light"] .btn.primary:hover {
  background: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  box-shadow: 0 6px 20px rgba(79, 70, 229, .4);
}

[data-theme="light"] .btn.success {
  background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  border: none;
  color: #ffffff;
}

[data-theme="light"] .btn.danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  border: none;
  color: #ffffff;
}

[data-theme="light"] .btn-ghost {
  background: transparent;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .btn-ghost:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
  color: #1e293b;
}

[data-theme="light"] .btn-ghost.danger {
  color: #dc2626;
}

[data-theme="light"] .btn-ghost.danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
}

[data-theme="light"] input,
[data-theme="light"] textarea,
[data-theme="light"] select {
  background-color: #ffffff;
  border: 1px solid #e2e8f0;
  color: #1e293b;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8;
}

[data-theme="light"] input:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  background-color: #ffffff;
  border-color: #0098c3;
  box-shadow: 0 0 0 3px rgba(0, 152, 195, .1);
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%234f46e5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

[data-theme="light"] label {
  color: #334155;
}

[data-theme="light"] input[type="checkbox"] {
  background: #fff;
  border-color: #cbd5e1;
}

[data-theme="light"] input[type="checkbox"]:checked {
  background: #0098c3;
  border-color: #0098c3;
}

[data-theme="light"] input[type="checkbox"]:focus {
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
}

[data-theme="light"] thead th {
  background: #f8fafc;
}

[data-theme="light"] tbody tr:hover td {
  background: rgba(0, 152, 195, .04);
}

[data-theme="light"] .badge.ok,
[data-theme="light"] .badge.published,
[data-theme="light"] .badge.success {
  background: rgba(16, 185, 129, .1);
  border-color: rgba(16, 185, 129, .2);
}

[data-theme="light"] .badge.danger,
[data-theme="light"] .badge.failed,
[data-theme="light"] .badge.error {
  background: rgba(239, 68, 68, .1);
  border-color: rgba(239, 68, 68, .2);
  color: #b91c1c;
}

[data-theme="light"] .badge.warn {
  background: rgba(245, 158, 11, .1);
  border-color: rgba(245, 158, 11, .2);
}

[data-theme="light"] .chip {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

[data-theme="light"] .chip:hover {
  background: #e2e8f0;
  border-color: #0098c3;
  color: #1e293b;
}

[data-theme="light"] .chip.primary {
  background: rgba(0, 152, 195, .1);
  border-color: rgba(0, 152, 195, .2);
  color: #0098c3;
}

[data-theme="light"] .pill-toggle {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .toast {
  background: var(--card);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, .15);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, .25);
}

[data-theme="light"] .source-card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

[data-theme="light"] .source-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

[data-theme="light"] .geo-search-results {
  background: var(--card);
}

[data-theme="light"] .geo-search-row:hover {
  background: #f1f5f9;
}

[data-theme="light"] .geo-selected-item {
  background: #f8fafc;
}

[data-theme="light"] .dow-pill {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #64748b;
}

[data-theme="light"] .dow-pill:hover {
  background: #e2e8f0;
  border-color: #0098c3;
  color: #1e293b;
}

[data-theme="light"] .dow-pill.is-on {
  background: linear-gradient(135deg, #0098c3 0%, #69266f 100%);
  border-color: transparent;
  color: #ffffff;
}

/* ========================================
   EIGEN FLOW - Executive Visualization
   Deep color, 3D depth, stunning animation
   ======================================== */

/* Stage container - the universe (full-width breakout) */
.lunflow-stage {
  position: relative;
  min-height: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, rgba(0, 152, 195, .16) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 80% 100%, rgba(16, 185, 129, .12) 0%, transparent 45%),
    radial-gradient(ellipse 60% 60% at 20% 80%, rgba(105, 38, 111, .14) 0%, transparent 45%),
    linear-gradient(180deg, #0c122b 0%, #101a38 55%, #0c122b 100%);
  overflow: hidden;
  padding: 8px 14px;
  /* With left-nav shell, keep within main pane */
  margin-left: 0;
  margin-right: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Canvas for particles/effects */
.lunflow-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 3D depth layers + nebula */
.lunflow-depth-1,
.lunflow-depth-2,
.lunflow-depth-3,
.lunflow-depth-4,
.lunflow-depth-5 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

/* Floating “math + data” overlay (subtle, readable) */
.lunflow-equations {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
  opacity: .9;
}

.lunflow-eq {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(var(--eq-rot, 0deg)) scale(var(--eq-scale, 1));
  transform-origin: center;
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: hsla(var(--eq-hue, 230), 90%, 78%, .88);
  opacity: 0;
  white-space: nowrap;
  text-shadow:
    0 0 14px hsla(var(--eq-hue, 230), 90%, 70%, .22),
    0 0 26px hsla(var(--eq-hue, 230), 90%, 65%, .12);
  mix-blend-mode: screen;
  filter: blur(.25px);
}

.lunflow-eq.show {
  animation: lunflowEqFade 7.2s ease-in-out forwards;
}

@keyframes lunflowEqFade {
  0% {
    opacity: 0;
    filter: blur(1.2px);
    transform: translate(-50%, -50%) rotate(var(--eq-rot, 0deg)) scale(var(--eq-scale, 1));
  }

  18% {
    opacity: .52;
    filter: blur(.12px);
  }

  60% {
    opacity: .22;
    filter: blur(.22px);
  }

  100% {
    opacity: 0;
    filter: blur(1.1px);
    transform: translate(-50%, -60%) rotate(var(--eq-rot, 0deg)) scale(var(--eq-scale, 1));
  }
}

.lunflow-depth-1 {
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 152, 195, .10) 0%, transparent 30%),
    radial-gradient(circle at 80% 70%, rgba(16, 185, 129, .08) 0%, transparent 30%),
    radial-gradient(circle, rgba(255, 255, 255, .18) 1px, transparent 1.2px),
    radial-gradient(circle, rgba(255, 255, 255, .10) 1px, transparent 1.2px);
  background-size: auto, auto, 220px 220px, 340px 340px;
  background-position: 0 0, 0 0, 0 0, 110px 140px;
  z-index: 2;
  opacity: .65;
  animation: lunflowFloat1 44s linear infinite;
}

.lunflow-depth-2 {
  background:
    radial-gradient(circle at 70% 20%, rgba(105, 38, 111, .12) 0%, transparent 35%),
    radial-gradient(circle at 30% 80%, rgba(6, 182, 212, .10) 0%, transparent 35%),
    radial-gradient(circle, rgba(255, 255, 255, .16) 1px, transparent 1.2px);
  background-size: auto, auto, 260px 260px;
  background-position: 0 0, 0 0, 80px 30px;
  z-index: 3;
  opacity: .6;
  animation: lunflowFloat2 34s linear infinite;
}

.lunflow-depth-3 {
  /* Keep “space travel” depth, but avoid streaky “shooting star” lines. */
  background:
    radial-gradient(circle at 18% 28%, rgba(105, 38, 111, .10) 0%, transparent 52%),
    radial-gradient(circle at 82% 74%, rgba(16, 185, 129, .08) 0%, transparent 56%),
    radial-gradient(circle at 55% 12%, rgba(0, 152, 195, .06) 0%, transparent 62%);
  z-index: 4;
  opacity: .55;
  animation: lunflowFloat3 60s linear infinite;
}

@keyframes lunflowFloat1 {
  0% {
    transform: translate3d(0, -20px, 0) scale(1);
  }

  100% {
    transform: translate3d(0, 80px, 0) scale(1.01);
  }
}

@keyframes lunflowFloat2 {
  0% {
    transform: translate3d(0, -30px, 0) scale(1);
  }

  100% {
    transform: translate3d(-12px, 120px, 0) scale(0.995);
  }
}

@keyframes lunflowFloat3 {
  0% {
    transform: translate3d(0, -40px, 0);
    opacity: 0.35;
  }

  100% {
    transform: translate3d(18px, 150px, 0);
    opacity: 0.55;
  }
}

/* Nebula layers: soft, large, mesmerizing blobs */
.lunflow-depth-4.lunflow-nebula {
  background:
    radial-gradient(ellipse 90% 70% at 15% 25%, rgba(0, 152, 195, .14) 0%, transparent 50%),
    radial-gradient(ellipse 80% 60% at 88% 65%, rgba(105, 38, 111, .12) 0%, transparent 48%),
    radial-gradient(ellipse 70% 80% at 50% 90%, rgba(6, 182, 212, .08) 0%, transparent 45%),
    radial-gradient(ellipse 60% 50% at 72% 15%, rgba(236, 72, 153, .06) 0%, transparent 40%);
  z-index: 3;
  opacity: .7;
  animation: lunflowNebulaDrift 90s ease-in-out infinite;
}

.lunflow-depth-5.lunflow-nebula-far {
  background:
    radial-gradient(ellipse 120% 100% at 50% 30%, rgba(0, 152, 195, .06) 0%, transparent 55%),
    radial-gradient(ellipse 100% 90% at 20% 70%, rgba(105, 38, 111, .05) 0%, transparent 50%),
    radial-gradient(ellipse 110% 80% at 80% 50%, rgba(16, 185, 129, .04) 0%, transparent 52%);
  z-index: 2;
  opacity: .85;
  animation: lunflowNebulaFar 120s ease-in-out infinite;
}

@keyframes lunflowNebulaDrift {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: .7;
  }

  25% {
    transform: translate3d(2%, -1%, 0) scale(1.02);
    opacity: .75;
  }

  50% {
    transform: translate3d(-1.5%, 1%, 0) scale(0.98);
    opacity: .65;
  }

  75% {
    transform: translate3d(1%, 1.5%, 0) scale(1.01);
    opacity: .72;
  }
}

@keyframes lunflowNebulaFar {

  0%,
  100% {
    transform: translate3d(0, 0, 0);
    opacity: .85;
  }

  33% {
    transform: translate3d(-0.5%, 0.3%, 0);
    opacity: .9;
  }

  66% {
    transform: translate3d(0.3%, -0.2%, 0);
    opacity: .8;
  }
}

/* Header */
.lunflow-header {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 12px 12px 18px;
}

/* Corner lockup: brand top-left, hero still centered */
.lunflow-header.lunflow-header-corner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lunflow-header.lunflow-header-corner .lunflow-brand {
  align-self: flex-start;
  justify-content: flex-start;
}

.lunflow-header.lunflow-header-corner .lunflow-brand-text {
  align-items: center;
  text-align: center;
}

.lunflow-header.lunflow-header-corner .lunflow-brand-company,
.lunflow-header.lunflow-header-corner .lunflow-brand-services {
  text-align: center;
}

.lunflow-header.lunflow-header-corner .lunflow-badge-row {
  margin-top: 6px;
}

.lunflow-header.lunflow-header-corner .lunflow-title {
  margin-top: 6px;
}

/* Branding */
.lunflow-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.lunflow-brand-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(51, 65, 85, .85), rgba(30, 41, 59, .88));
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, .3),
    0 0 26px rgba(0, 152, 195, .18),
    0 0 40px rgba(16, 185, 129, .10),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lunflow-logo-img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.lunflow-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}

.lunflow-brand-product {
  font-size: 26px;
  font-weight: 950;
  letter-spacing: -.02em;
  background: linear-gradient(135deg, #f8fafc 0%, #a5b4fc 45%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.05;
  text-shadow:
    0 0 40px rgba(165, 180, 252, .18),
    0 0 60px rgba(110, 231, 183, .10);
}

.lunflow-brand-product-tag {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .55);
  -webkit-text-fill-color: rgba(255, 255, 255, .55);
  text-transform: none;
  vertical-align: middle;
}

.lunflow-brand-company {
  margin-top: 6px;
  display: block;
  width: 100%;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .03em;
  color: rgba(255, 255, 255, .54);
  line-height: 1.15;
}

.lunflow-brand-services {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .44);
  letter-spacing: .02em;
  margin-top: 2px;
}

.lunflow-badge-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

.lunflow-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .03);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .7);
}

.lunflow-badge.purple {
  border-color: rgba(105, 38, 111, .5);
  background: linear-gradient(135deg, rgba(105, 38, 111, .20), rgba(0, 152, 195, .10));
  color: #c4b5fd;
  box-shadow: 0 4px 20px rgba(105, 38, 111, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.lunflow-badge.teal {
  border-color: rgba(16, 185, 129, .5);
  background: linear-gradient(135deg, rgba(16, 185, 129, .20), rgba(6, 182, 212, .10));
  color: #6ee7b7;
  box-shadow: 0 4px 20px rgba(16, 185, 129, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.lunflow-badge.gold {
  border-color: rgba(245, 158, 11, .5);
  background: linear-gradient(135deg, rgba(245, 158, 11, .20), rgba(251, 191, 36, .10));
  color: #fcd34d;
  box-shadow: 0 4px 20px rgba(245, 158, 11, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.lunflow-title {
  font-size: clamp(22px, 4vw, 34px);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 30%, #c4b5fd 50%, #6ee7b7 70%, #f8fafc 100%);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lunflowTitleShine 8s linear infinite;
  text-shadow: 0 0 80px rgba(105, 38, 111, .3);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease, text-shadow .6s ease;
}

@keyframes lunflowTitleShine {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 300% center;
  }
}

.lunflow-subtitle {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  line-height: 1.55;
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
}

/* Keep header present but let flow dominate. */
.lunflow-header.is-quiet .lunflow-badge-row {
  opacity: .22;
  filter: saturate(.9) blur(.2px);
  transform: translateY(-4px) scale(.98);
}

.lunflow-header.is-quiet .lunflow-title {
  opacity: .28;
  filter: saturate(.9) blur(.15px);
  transform: translateY(-2px) scale(.99);
  text-shadow: none;
}

.lunflow-header.is-quiet .lunflow-subtitle {
  opacity: .22;
  filter: saturate(.9) blur(.2px);
  transform: translateY(-2px);
}

.lunflow-subtitle code {
  color: #a5b4fc;
  background: rgba(0, 152, 195, .15);
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
}

.lunflow-badge-icon {
  font-size: 12px;
  margin-right: 4px;
}

/* Main Pipeline - Horizontal Left to Right */
.lunflow-pipeline-main {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 16px 20px;
  min-height: 0;
  margin-top: 8px;
  margin-bottom: 10px;
}

/* Stage boxes */
.lunflow-stage-box {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(51, 65, 85, .52), rgba(30, 41, 59, .62));
  border: 1px solid rgba(255, 255, 255, .10);
  backdrop-filter: blur(12px);
  min-width: 180px;
  box-shadow:
    0 24px 90px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .05) inset;
}

.lunflow-stage-box::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  background: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .10), transparent 55%);
  opacity: .55;
  pointer-events: none;
  mix-blend-mode: screen;
}

.lunflow-stage-sources,
.lunflow-stage-output {
  min-width: 200px;
}

.lunflow-stage-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lunflow-stage-icon {
  font-size: 16px;
}

.lunflow-stage-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .7);
}

.lunflow-source-stack,
.lunflow-output-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.lunflow-source-item,
.lunflow-output-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: all .3s ease;
}

.lunflow-source-item:hover,
.lunflow-output-item:hover {
  border-color: rgba(0, 152, 195, .30);
  background: rgba(0, 152, 195, .08);
}

.lunflow-source-item.is-active {
  border-color: rgba(0, 152, 195, .50);
  background: rgba(0, 152, 195, .12);
  box-shadow: 0 0 20px rgba(0, 152, 195, .15);
}

.lunflow-output-item.is-active {
  border-color: rgba(16, 185, 129, .50);
  background: rgba(16, 185, 129, .12);
  box-shadow: 0 0 20px rgba(16, 185, 129, .15);
}

.lunflow-item-icon {
  font-size: 16px;
}

.lunflow-item-info {
  flex: 1;
}

.lunflow-item-name {
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
}

.lunflow-item-type {
  font-size: 9px;
  color: rgba(255, 255, 255, .4);
  text-transform: none;
  letter-spacing: -0.01em;
}

.lunflow-stage-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 10px;
  background: rgba(0, 152, 195, .10);
  border: 1px solid rgba(0, 152, 195, .20);
  margin-top: 4px;
}

.lunflow-stage-stat-iconbox {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .20),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: lunflowStatIcoPulse 2.4s ease-in-out infinite;
}

@keyframes lunflowStatIcoPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 10px 28px rgba(0, 152, 195, .25), 0 0 0 1px rgba(0, 152, 195, .15) inset;
  }
}

.lunflow-stage-output .lunflow-stage-stat-iconbox {
  animation: lunflowStatIcoPulseGreen 2.4s ease-in-out infinite;
}

@keyframes lunflowStatIcoPulseGreen {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20), 0 0 0 1px rgba(16, 185, 129, .06) inset;
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 10px 28px rgba(16, 185, 129, .25), 0 0 0 1px rgba(16, 185, 129, .15) inset;
  }
}

.lunflow-stage-stat.green {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .25);
}

.lunflow-stage-stat.green .lunflow-stage-stat-iconbox {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .25);
  box-shadow:
    0 10px 28px rgba(16, 185, 129, .10),
    0 0 0 1px rgba(16, 185, 129, .12) inset;
}

.lunflow-big-number {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-stage-stat.green .lunflow-big-number {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .5);
}

/* Flow arrows with particles */
.lunflow-flow-arrow {
  display: flex;
  align-items: center;
  width: 76px;
  height: 6px;
  position: relative;
  margin: 0 8px;
  /* Crisp “laser” beam: no blur filter */
  filter: none;
  z-index: 1;
}

.lunflow-flow-arrow::before {
  /* Remove the “fuzzy halo” look */
  display: none;
}

.lunflow-flow-arrow.arrow-out::before {
  display: none;
}

@keyframes lunflowArrowHalo {

  0%,
  100% {
    opacity: .18;
  }

  50% {
    opacity: .34;
  }
}

/* Make the arrow beam feel alive */
.lunflow-arrow-line {
  background-size: 320% 100%;
  animation: lunflowArrowGlow 2.4s linear infinite;
}

@keyframes lunflowArrowGlow {
  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 320% 50%;
  }
}

.lunflow-arrow-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg,
      rgba(0, 152, 195, .00) 0%,
      rgba(0, 152, 195, .95) 18%,
      rgba(105, 38, 111, .98) 42%,
      rgba(34, 211, 238, .92) 62%,
      rgba(16, 185, 129, .95) 82%,
      rgba(16, 185, 129, .00) 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(0, 152, 195, .18);
  position: relative;
  z-index: 1;
}

/* Single traveling spark (no “ants”) */
.lunflow-arrow-line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 22px;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75), rgba(255, 255, 255, 0));
  mix-blend-mode: screen;
  opacity: 0;
  animation: lunflowBeamSpark 1.8s linear infinite;
}

.lunflow-flow-arrow.arrow-out .lunflow-arrow-line::after {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0), rgba(16, 185, 129, .9), rgba(16, 185, 129, 0));
  animation-duration: 1.7s;
}

@keyframes lunflowBeamSpark {
  0% {
    left: -26px;
    opacity: 0;
  }

  12% {
    opacity: .55;
  }

  82% {
    opacity: .55;
  }

  100% {
    left: calc(100% + 26px);
    opacity: 0;
  }
}

.lunflow-flow-arrow.arrow-out .lunflow-arrow-line {
  background: linear-gradient(90deg,
      rgba(105, 38, 111, .00) 0%,
      rgba(34, 211, 238, .92) 18%,
      rgba(16, 185, 129, .98) 44%,
      rgba(234, 179, 8, .88) 70%,
      rgba(16, 185, 129, .95) 82%,
      rgba(234, 179, 8, .00) 100%);
  box-shadow: 0 0 10px rgba(16, 185, 129, .18);
}

.lunflow-arrow-head {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 10px solid rgba(105, 38, 111, .95);
  filter: none;
  position: relative;
  z-index: 1;
}

.lunflow-flow-arrow.arrow-out .lunflow-arrow-head {
  border-left-color: rgba(16, 185, 129, .95);
  filter: none;
}

.lunflow-arrow-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  /* Remove “bubble” particles for crisp lines */
  display: none;
}

.lunflow-particle {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #69266f;
  box-shadow: 0 0 10px rgba(105, 38, 111, .9);
  animation: lunflowParticleMove 1.5s linear infinite;
}

.lunflow-flow-arrow.arrow-out .lunflow-particle {
  background: #10b981;
  box-shadow: 0 0 10px rgba(16, 185, 129, .9);
}

@keyframes lunflowParticleMove {
  0% {
    left: 0;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 6px);
    opacity: 0;
  }
}

/* Zones */
.lunflow-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lunflow-zone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.lunflow-zone-icon {
  font-size: 16px;
}

.lunflow-zone-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .6);
}

/* Source/Output cards */
.lunflow-source-cards,
.lunflow-output-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lunflow-io-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(30, 41, 59, .7), rgba(15, 23, 42, .8));
  backdrop-filter: blur(12px);
  transition: all .3s ease;
}

.lunflow-io-card:hover {
  transform: translateX(4px);
  border-color: rgba(0, 152, 195, .3);
  box-shadow: 0 8px 32px rgba(0, 152, 195, .15);
}

.lunflow-zone-output .lunflow-io-card:hover {
  transform: translateX(-4px);
  border-color: rgba(16, 185, 129, .3);
  box-shadow: 0 8px 32px rgba(16, 185, 129, .15);
}

.lunflow-io-card.is-active {
  border-color: rgba(0, 152, 195, .5);
  box-shadow: 0 0 24px rgba(0, 152, 195, .20);
}

.lunflow-zone-output .lunflow-io-card.is-active {
  border-color: rgba(16, 185, 129, .5);
  box-shadow: 0 0 24px rgba(16, 185, 129, .20);
}

.lunflow-io-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(0, 152, 195, .20), rgba(105, 38, 111, .15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.lunflow-zone-output .lunflow-io-icon {
  background: linear-gradient(145deg, rgba(16, 185, 129, .20), rgba(6, 182, 212, .15));
}

.lunflow-io-info {
  flex: 1;
  min-width: 0;
}

.lunflow-io-name {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

.lunflow-io-type {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
}

/* Zone stats */
.lunflow-zone-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(0, 152, 195, .08);
  border: 1px solid rgba(0, 152, 195, .15);
}

.lunflow-zone-stat.green {
  background: rgba(16, 185, 129, .08);
  border-color: rgba(16, 185, 129, .15);
}

.lunflow-stat-value {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-zone-stat.green .lunflow-stat-value {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-stat-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .5);
}

/* Engine Stage */
.lunflow-stage-engine {
  padding: 24px 32px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .5), rgba(15, 23, 42, .6));
  border-color: rgba(105, 38, 111, .20);
  overflow: hidden;
}

/* Animated flow wiring inside the engine (data moving between elements) */
.lunflow-engine-wires {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .9;
  mix-blend-mode: screen;
}

.lunflow-engine-wires svg {
  width: 100%;
  height: 100%;
  display: block;
  shape-rendering: geometricPrecision;
}

.lunflow-engine-wires .wire-base {
  fill: none;
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 2.2;
  opacity: .22;
}

.lunflow-engine-wires .wire-flow {
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  opacity: .65;
}

.lunflow-engine-wires .wire-pulse {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 26 1200;
  /* single pulse, not marching ants */
  opacity: .95;
  animation: lunflowWirePulse var(--wire-pulse, 2.4s) linear infinite;
}

@keyframes lunflowWirePulse {
  to {
    stroke-dashoffset: -1200;
  }
}

.lunflow-engine-wires .wire-node {
  fill: rgba(255, 255, 255, .10);
  stroke: rgba(255, 255, 255, .18);
  stroke-width: 1;
  opacity: .7;
}

.lunflow-engine-wires .wire-packet {
  opacity: .9;
  filter: none;
  animation: lunflowPacketPulse 1.9s ease-in-out infinite;
}

@keyframes lunflowPacketPulse {

  0%,
  100% {
    opacity: .55;
    transform: scale(.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.lunflow-engine-wires .wire-node.pulse {
  animation: lunflowNodePulse 2.4s ease-in-out infinite;
}

@keyframes lunflowNodePulse {

  0%,
  100% {
    opacity: .55;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.18);
  }
}

.lunflow-engine-core,
.lunflow-engine-stats,
.lunflow-automation-strip {
  position: relative;
  z-index: 2;
}

.lunflow-engine-core {
  position: relative;
  width: 140px;
  height: 140px;
}

.lunflow-engine-rings {
  position: absolute;
  inset: 0;
}

.lunflow-engine-ring {
  position: absolute;
  border-radius: 50%;
}

.lunflow-engine-ring.ring-1 {
  inset: 0;
  border: 2px dashed rgba(105, 38, 111, .35);
  animation: lunflowRingSpin 20s linear infinite;
}

.lunflow-engine-ring.ring-2 {
  inset: 12px;
  border: 1px solid rgba(0, 152, 195, .45);
  animation: lunflowRingSpin 14s linear infinite reverse;
}

.lunflow-engine-ring.ring-3 {
  inset: 24px;
  border: 2px solid rgba(16, 185, 129, .40);
  animation: lunflowRingSpin 10s linear infinite;
}

@keyframes lunflowRingSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lunflow-engine-center {
  position: absolute;
  inset: 35px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(105, 38, 111, .50) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, rgba(0, 152, 195, .40) 0%, transparent 50%),
    linear-gradient(145deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1));
  border: 1px solid rgba(105, 38, 111, .50);
  box-shadow:
    0 0 50px rgba(105, 38, 111, .35),
    0 0 100px rgba(0, 152, 195, .20);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  animation: lunflowCorePulse 3s ease-in-out infinite;
}

@keyframes lunflowCorePulse {

  0%,
  100% {
    box-shadow: 0 0 50px rgba(105, 38, 111, .35), 0 0 100px rgba(0, 152, 195, .20);
  }

  50% {
    box-shadow: 0 0 70px rgba(105, 38, 111, .50), 0 0 140px rgba(0, 152, 195, .30);
  }
}

.lunflow-engine-icon {
  width: 24px;
  height: 24px;
  color: #c4b5fd;
}

.lunflow-engine-icon svg {
  width: 100%;
  height: 100%;
}

.lunflow-engine-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #e0e7ff;
}

.lunflow-engine-sub {
  font-size: 7px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, .4);
  text-transform: none;
}

.lunflow-engine-stats {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.lunflow-automation-strip {
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
}

.lunflow-automation-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .65);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: transform .25s ease, border-color .25s ease, background .25s ease;
  position: relative;
  overflow: hidden;
}

.lunflow-automation-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .10) 14%, transparent 28%);
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}

.lunflow-automation-pill:hover::after {
  opacity: 1;
  animation: lunflowPillSheen 1.1s ease-out;
}

@keyframes lunflowPillSheen {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }

  15% {
    opacity: .25;
  }

  60% {
    opacity: .08;
  }

  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

.lunflow-automation-pill:hover {
  transform: translateY(-1px);
  border-color: rgba(105, 38, 111, .25);
  background: rgba(105, 38, 111, .06);
}

.lunflow-automation-ico {
  width: 18px;
  height: 18px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  font-size: 11px;
  filter: drop-shadow(0 0 10px rgba(105, 38, 111, .12));
  animation: lunflowAutoIco 2.8s ease-in-out infinite;
}

.lunflow-automation-pill:nth-child(2) .lunflow-automation-ico {
  animation-delay: .35s;
}

.lunflow-automation-pill:nth-child(3) .lunflow-automation-ico {
  animation-delay: .7s;
}

@keyframes lunflowAutoIco {

  0%,
  100% {
    transform: translateY(0);
    opacity: .9;
  }

  50% {
    transform: translateY(-2px);
    opacity: 1;
  }
}

.lunflow-automation-text {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
}

.lunflow-engine-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
}

.lunflow-engine-stat.highlight {
  background: rgba(16, 185, 129, .10);
  border-color: rgba(16, 185, 129, .25);
}

.lunflow-engine-value {
  font-size: 14px;
  font-weight: 900;
  color: #f8fafc;
}

.lunflow-engine-stat.highlight .lunflow-engine-value {
  color: #6ee7b7;
}

.lunflow-engine-stat-label {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
}

/* Value Panel */
.lunflow-value-panel {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  z-index: 10;
}

.lunflow-value-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  min-width: 80px;
  transition: all .3s ease;
}

.lunflow-value-item:hover {
  border-color: rgba(105, 38, 111, .30);
  transform: translateY(-2px);
}

.lunflow-value-item.highlight {
  background: linear-gradient(145deg, rgba(16, 185, 129, .12), rgba(6, 182, 212, .08));
  border-color: rgba(16, 185, 129, .25);
}

.lunflow-value-number {
  font-size: 20px;
  font-weight: 900;
  color: #f8fafc;
}

.lunflow-value-item.highlight .lunflow-value-number {
  background: linear-gradient(135deg, #6ee7b7, #34d399);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-value-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .5);
}

/* Intelligence orbit */
.lunflow-intelligence-orbit {
  position: absolute;
  inset: -60px;
  pointer-events: none;
  z-index: 5;
}

/* Main orchestration grid */
.lunflow-orchestration {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: 280px 1fr 280px;
  gap: 32px;
  padding: 0 48px;
  min-height: 380px;
  align-items: start;
  margin-bottom: 24px;
}

/* Columns */
.lunflow-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lunflow-column-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .5);
  margin: 0 0 8px;
}

.lunflow-column-icon {
  font-size: 12px;
  opacity: .6;
}

.lunflow-column-left .lunflow-column-title {
  color: #a5b4fc;
}

.lunflow-column-right .lunflow-column-title {
  color: #6ee7b7;
}

/* Card stack for sources/outputs */
.lunflow-card-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Individual cards with 3D depth */
.lunflow-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: linear-gradient(145deg, rgba(30, 41, 59, .8), rgba(15, 23, 42, .9));
  backdrop-filter: blur(20px);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
}

.lunflow-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .08) 0%, transparent 50%);
  pointer-events: none;
}

.lunflow-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  background: linear-gradient(135deg, rgba(0, 152, 195, .3) 0%, transparent 30%, transparent 70%, rgba(16, 185, 129, .2) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity .3s ease;
}

.lunflow-card:hover {
  transform: perspective(1000px) rotateX(-2deg) rotateY(3deg) translateY(-4px);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, .3),
    0 0 60px rgba(0, 152, 195, .10);
}

.lunflow-card:hover::after {
  opacity: 1;
}

.lunflow-card.is-active {
  border-color: rgba(0, 152, 195, .5);
  box-shadow:
    0 0 0 1px rgba(0, 152, 195, .3) inset,
    0 8px 32px rgba(0, 152, 195, .20),
    0 0 60px rgba(0, 152, 195, .15);
}

.lunflow-card.is-active::after {
  opacity: 1;
  background: linear-gradient(135deg, rgba(0, 152, 195, .4) 0%, transparent 40%, transparent 60%, rgba(105, 38, 111, .3) 100%);
}

.lunflow-column-right .lunflow-card.is-active {
  border-color: rgba(16, 185, 129, .5);
  box-shadow:
    0 0 0 1px rgba(16, 185, 129, .3) inset,
    0 8px 32px rgba(16, 185, 129, .20),
    0 0 60px rgba(16, 185, 129, .15);
}

.lunflow-column-right .lunflow-card.is-active::after {
  background: linear-gradient(135deg, rgba(16, 185, 129, .4) 0%, transparent 40%, transparent 60%, rgba(6, 182, 212, .3) 100%);
}

.lunflow-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(0, 152, 195, .25), rgba(105, 38, 111, .15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(0, 152, 195, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
  flex-shrink: 0;
}

.lunflow-column-right .lunflow-card-icon {
  background: linear-gradient(145deg, rgba(16, 185, 129, .25), rgba(6, 182, 212, .15));
  box-shadow: 0 4px 12px rgba(16, 185, 129, .15), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.lunflow-card-info {
  flex: 1;
  min-width: 0;
}

.lunflow-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  margin-bottom: 2px;
}

.lunflow-card-type {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
}

/* Center core orb */
.lunflow-column-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lunflow-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.lunflow-core-orb {
  position: relative;
  width: 180px;
  height: 180px;
}

.lunflow-core-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid transparent;
}

.lunflow-core-ring.ring-outer {
  inset: 0;
  border-color: rgba(0, 152, 195, .25);
  border-style: dashed;
  animation: lunflowRingSpin 30s linear infinite;
  box-shadow: 0 0 40px rgba(0, 152, 195, .10) inset;
}

.lunflow-core-ring.ring-middle {
  inset: 20px;
  border-color: rgba(105, 38, 111, .35);
  animation: lunflowRingSpin 20s linear infinite reverse;
  box-shadow: 0 0 30px rgba(105, 38, 111, .15) inset;
}

.lunflow-core-ring.ring-inner {
  inset: 40px;
  border-width: 2px;
  border-color: rgba(16, 185, 129, .4);
  animation: lunflowRingSpin 12s linear infinite;
  box-shadow: 0 0 20px rgba(16, 185, 129, .20) inset;
}

@keyframes lunflowRingSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lunflow-core-center {
  position: absolute;
  inset: 50px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(105, 38, 111, .5) 0%, transparent 40%),
    radial-gradient(circle at 70% 60%, rgba(0, 152, 195, .4) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, rgba(16, 185, 129, .3) 0%, transparent 40%),
    linear-gradient(145deg, rgba(30, 41, 59, 1), rgba(15, 23, 42, 1));
  border: 1px solid rgba(105, 38, 111, .4);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 0 80px rgba(105, 38, 111, .35),
    0 0 120px rgba(0, 152, 195, .20),
    0 0 160px rgba(16, 185, 129, .10),
    0 20px 60px rgba(0, 0, 0, .5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  animation: lunflowCorePulse 4s ease-in-out infinite;
}

@keyframes lunflowCorePulse {

  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .05) inset, 0 0 80px rgba(105, 38, 111, .35), 0 0 120px rgba(0, 152, 195, .20), 0 0 160px rgba(16, 185, 129, .10), 0 20px 60px rgba(0, 0, 0, .5);
  }

  50% {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 0 100px rgba(105, 38, 111, .45), 0 0 150px rgba(0, 152, 195, .30), 0 0 200px rgba(16, 185, 129, .15), 0 24px 80px rgba(0, 0, 0, .6);
  }
}

.lunflow-core-center svg {
  width: 32px;
  height: 32px;
  color: #c4b5fd;
  filter: drop-shadow(0 0 10px rgba(105, 38, 111, .6));
}

.lunflow-core-center span {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .10em;
  background: linear-gradient(135deg, #e0e7ff, #c4b5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Core metrics */
.lunflow-core-metrics {
  display: flex;
  gap: 12px;
}

.lunflow-metric {
  text-align: center;
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  backdrop-filter: blur(12px);
  min-width: 70px;
}

.lunflow-metric-value {
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #f8fafc;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.lunflow-metric-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
  margin-top: 2px;
}

/* SVG overlay */
.lunflow-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 15;
  pointer-events: none;
  overflow: visible;
}

/* Flow line styles */
.lunflow-flow-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

.lunflow-flow-line.base {
  stroke: rgba(0, 152, 195, .12);
}

.lunflow-flow-line.active {
  stroke: url(#gradIn);
  stroke-dasharray: 6 10;
  animation: lunflowFlowDash 1.2s linear infinite;
  filter: url(#softGlow);
}

.lunflow-flow-line.active.out {
  stroke: url(#gradOut);
}

@keyframes lunflowFlowDash {
  0% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -16;
  }
}

/* Journey Section */
.lunflow-journey-section {
  position: relative;
  z-index: 20;
  padding: 24px 32px 16px;
}

.lunflow-journey-header {
  text-align: center;
  margin-bottom: 20px;
}

.lunflow-journey-title {
  font-size: 18px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 4px;
}

.lunflow-journey-sub {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
}

.lunflow-journey-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

/* Journey step */
.lunflow-journey-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  min-width: 90px;
}

.lunflow-journey-marker {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, 1));
  border: 2px solid rgba(0, 152, 195, .25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
  position: relative;
}

.lunflow-journey-step.is-checkpoint .lunflow-journey-marker {
  border-radius: 50%;
  border-color: rgba(16, 185, 129, .5);
  background: linear-gradient(145deg, rgba(16, 185, 129, .15), rgba(6, 182, 212, .10));
}

.lunflow-journey-step.is-active .lunflow-journey-marker {
  border-color: #0098c3;
  background: linear-gradient(145deg, rgba(0, 152, 195, .25), rgba(105, 38, 111, .20));
  transform: scale(1.12);
  box-shadow:
    0 0 0 3px rgba(0, 152, 195, .20),
    0 8px 32px rgba(0, 152, 195, .35),
    0 0 50px rgba(105, 38, 111, .20);
}

.lunflow-journey-step.is-checkpoint.is-active .lunflow-journey-marker {
  border-color: #10b981;
  background: linear-gradient(145deg, rgba(16, 185, 129, .30), rgba(6, 182, 212, .20));
  box-shadow:
    0 0 0 3px rgba(16, 185, 129, .20),
    0 8px 32px rgba(16, 185, 129, .35),
    0 0 50px rgba(52, 211, 153, .20);
}

.lunflow-journey-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  max-width: 80px;
  line-height: 1.3;
  transition: color .3s ease;
}

.lunflow-journey-step.is-active .lunflow-journey-label {
  color: #a5b4fc;
}

.lunflow-journey-step.is-checkpoint.is-active .lunflow-journey-label {
  color: #6ee7b7;
}

/* Journey connector */
.lunflow-journey-connector {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, rgba(0, 152, 195, .12) 0%, rgba(0, 152, 195, .35) 50%, rgba(0, 152, 195, .12) 100%);
  position: relative;
  flex-shrink: 0;
}

.lunflow-journey-connector::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(0, 152, 195, .40);
}

/* THE EIGEN ADVANTAGE - Animated Showcase */
.lunflow-advantage {
  position: relative;
  z-index: 20;
  padding: 24px 20px 16px;
}

.lunflow-advantage-header {
  text-align: center;
  margin-bottom: 14px;
}

.lunflow-advantage-title {
  font-size: 18px;
  font-weight: 900;
  color: #f8fafc;
  margin-bottom: 4px;
}

.eigenflow-eigen-highlight {
  background: linear-gradient(135deg, #a5b4fc 0%, #6ee7b7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.lunflow-advantage-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}

.lunflow-advantage-showcase {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
}

/* Advantage Cards — sequential color cascade: red → yellow → blue → green (flashing) */
.lunflow-adv-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(51, 65, 85, .50), rgba(30, 41, 59, .65));
  border: 3px solid rgba(255, 255, 255, .12);
  overflow: hidden;
  position: relative;
  box-shadow:
    0 30px 120px rgba(0, 0, 0, .22),
    0 0 0 1px rgba(255, 255, 255, .05) inset;
  transition: border-color .35s ease, box-shadow .35s ease;
}

/* Card 1: Red phase at 0-25% of 4s cycle */
.lunflow-adv-card:nth-child(1) {
  animation: lunflowCard1 4s ease-in-out infinite;
}

@keyframes lunflowCard1 {

  0%,
  5% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }

  8%,
  22% {
    border-color: #ef4444;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 30px rgba(239, 68, 68, .45), 0 0 0 1px rgba(239, 68, 68, .25) inset;
  }

  28%,
  100% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }
}

/* Card 2: Yellow phase at 25-50% */
.lunflow-adv-card:nth-child(2) {
  animation: lunflowCard2 4s ease-in-out infinite;
}

@keyframes lunflowCard2 {

  0%,
  23% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }

  28%,
  47% {
    border-color: #fbbf24;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 30px rgba(251, 191, 36, .45), 0 0 0 1px rgba(251, 191, 36, .25) inset;
  }

  53%,
  100% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }
}

/* Card 3: Blue phase at 50-75% */
.lunflow-adv-card:nth-child(3) {
  animation: lunflowCard3 4s ease-in-out infinite;
}

@keyframes lunflowCard3 {

  0%,
  48% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }

  53%,
  72% {
    border-color: #3b82f6;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 30px rgba(59, 130, 246, .45), 0 0 0 1px rgba(59, 130, 246, .25) inset;
  }

  78%,
  100% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }
}

/* Card 4: Flashing green celebration at 75-100% */
.lunflow-adv-card:nth-child(4) {
  animation: lunflowCard4 4s ease-in-out infinite;
}

@keyframes lunflowCard4 {

  0%,
  73% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }

  76% {
    border-color: #22c55e;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 40px rgba(34, 197, 94, .6), 0 0 0 1px rgba(34, 197, 94, .30) inset;
  }

  80% {
    border-color: #4ade80;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 50px rgba(74, 222, 128, .7), 0 0 0 1px rgba(74, 222, 128, .35) inset;
  }

  84% {
    border-color: #22c55e;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 35px rgba(34, 197, 94, .55), 0 0 0 1px rgba(34, 197, 94, .28) inset;
  }

  88% {
    border-color: #86efac;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 55px rgba(134, 239, 172, .75), 0 0 0 1px rgba(134, 239, 172, .40) inset;
  }

  92% {
    border-color: #22c55e;
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 30px rgba(34, 197, 94, .50), 0 0 0 1px rgba(34, 197, 94, .25) inset;
  }

  97%,
  100% {
    border-color: rgba(255, 255, 255, .12);
    box-shadow: 0 30px 120px rgba(0, 0, 0, .22), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  }
}

.lunflow-adv-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .10) 15%, transparent 30%);
  transform: translateX(-140%);
  opacity: 0;
  pointer-events: none;
}

.lunflow-adv-card.is-active::before {
  opacity: 1;
  animation: lunflowCardSheen 1.6s ease-in-out infinite;
}

@keyframes lunflowCardSheen {
  0% {
    transform: translateX(-140%);
    opacity: 0;
  }

  20% {
    opacity: .35;
  }

  60% {
    opacity: .10;
  }

  100% {
    transform: translateX(140%);
    opacity: 0;
  }
}

.lunflow-adv-card:hover {
  border-color: rgba(105, 38, 111, .40);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(105, 38, 111, .15);
}

.lunflow-adv-card.is-active {
  border-color: rgba(16, 185, 129, .50);
  box-shadow: 0 0 50px rgba(16, 185, 129, .20);
}

/* Visual Demo Area */
.lunflow-adv-visual {
  height: 140px;
  padding: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .45), rgba(15, 23, 42, .65));
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.lunflow-adv-demo {
  width: 100%;
  height: 100%;
  position: relative;
}

/* ============================================
   QUALITY DEMO - Funnel Animation
   ============================================ */
.lunflow-quality-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  height: 100%;
}

.lunflow-funnel-input {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 4px;
}

.lunflow-lead-blob {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: rgba(16, 185, 129, .20);
  border: 2px solid rgba(16, 185, 129, .50);
  color: #6ee7b7;
  opacity: 0;
  transform: translateY(-20px);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  box-shadow: 0 4px 12px rgba(16, 185, 129, .25);
}

.lunflow-lead-blob.bad {
  background: rgba(239, 68, 68, .20);
  border-color: rgba(239, 68, 68, .50);
  color: #fca5a5;
  box-shadow: 0 4px 12px rgba(239, 68, 68, .25);
}

.lunflow-lead-blob.visible {
  opacity: 1;
  transform: translateY(0);
}

.lunflow-lead-blob.dropping {
  animation: lunflowBlobDrop .45s ease-in forwards;
}

.lunflow-lead-blob.bad.rejected {
  animation: lunflowBlobReject .35s ease-out forwards;
}

@keyframes lunflowBlobDrop {
  0% {
    transform: translateY(0) scale(1);
  }

  100% {
    transform: translateY(28px) scale(0.8);
    opacity: 0;
  }
}

@keyframes lunflowBlobReject {
  0% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateX(40px) scale(0.5) rotate(180deg);
    opacity: 0;
  }
}

.lunflow-funnel-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
}

.lunflow-filter-line {
  flex: 1;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .50), transparent);
}

.lunflow-filter-label {
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #6ee7b7;
  padding: 2px 8px;
  background: rgba(16, 185, 129, .15);
  border-radius: 4px;
}

.lunflow-funnel-output {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lunflow-verified-count {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lunflow-verified-num {
  font-size: 32px;
  font-weight: 900;
  color: #6ee7b7;
  text-shadow: 0 0 24px rgba(16, 185, 129, .6);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  letter-spacing: .15em;
}

.lunflow-verified-label {
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, .5);
  text-transform: none;
  letter-spacing: -0.01em;
}

/* ============================================
   TERRITORY DEMO - Radar Animation
   ============================================ */
.lunflow-territory-radar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle, rgba(16, 185, 129, .08) 0%, rgba(15, 23, 42, .8) 70%);
  border: 2px solid rgba(16, 185, 129, .40);
  margin: 0 auto 6px;
  box-shadow: 0 0 30px rgba(16, 185, 129, .15), inset 0 0 20px rgba(16, 185, 129, .08);
}

.lunflow-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, .15);
}

.lunflow-radar-ring.ring-1 {
  inset: 10%;
}

.lunflow-radar-ring.ring-2 {
  inset: 30%;
}

.lunflow-radar-ring.ring-3 {
  inset: 50%;
}

.lunflow-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(16, 185, 129, .40) 30deg, transparent 60deg);
  animation: lunflowRadarSweep 1.4s linear infinite;
}

@keyframes lunflowRadarSweep {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.lunflow-radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
  filter: drop-shadow(0 0 8px rgba(16, 185, 129, .5));
}

.lunflow-radar-blips {
  position: absolute;
  inset: 0;
}

.lunflow-radar-blip {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 14px rgba(16, 185, 129, .9);
  opacity: 0;
  transform: scale(0);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-radar-blip.visible {
  opacity: 1;
  transform: scale(1);
  animation: lunflowBlipPulse .7s ease-in-out infinite;
}

.lunflow-radar-blip.out {
  background: #ef4444;
  box-shadow: 0 0 10px rgba(239, 68, 68, .8);
}

.lunflow-radar-blip.out.visible {
  animation: lunflowBlipFade .8s ease-out forwards;
}

@keyframes lunflowBlipPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, .8);
  }

  50% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 1);
  }
}

@keyframes lunflowBlipFade {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.lunflow-territory-counter {
  display: flex;
  justify-content: center;
  gap: 12px;
  font-size: 9px;
  color: rgba(255, 255, 255, .5);
}

.lunflow-territory-in {
  color: #6ee7b7;
  font-weight: 800;
}

.lunflow-territory-out {
  color: #fca5a5;
  font-weight: 800;
}

/* ============================================
   COMPLIANCE DEMO - Scanner Animation
   ============================================ */
.lunflow-compliance-scanner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  width: 100%;
}

.lunflow-scan-subject {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(0, 152, 195, .18);
  border: 1px solid rgba(0, 152, 195, .40);
  box-shadow: 0 4px 16px rgba(0, 152, 195, .15);
}

.lunflow-scan-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 6px rgba(105, 38, 111, .5));
}

.lunflow-scan-name {
  font-size: 12px;
  font-weight: 800;
  color: #c4b5fd;
  letter-spacing: .02em;
}

.lunflow-scan-beam {
  width: 90%;
  height: 4px;
  background: linear-gradient(90deg, transparent, #69266f 30%, #a78bfa 50%, #69266f 70%, transparent);
  border-radius: 2px;
  opacity: 0;
  animation: none;
  box-shadow: 0 0 12px rgba(105, 38, 111, .6);
}

.lunflow-scan-beam.active {
  opacity: 1;
  animation: lunflowScanBeam .8s ease-in-out;
}

@keyframes lunflowScanBeam {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }

  25% {
    transform: scaleX(1);
    opacity: 1;
  }

  75% {
    transform: scaleX(1);
    opacity: 1;
  }

  100% {
    transform: scaleX(0);
    opacity: 0;
  }
}

.lunflow-scan-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
}

.lunflow-scan-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, .45);
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, .03);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-scan-status {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-scan-check.passed {
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
  transform: scale(1.02);
}

.lunflow-scan-check.passed .lunflow-scan-status {
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, .7);
}

.lunflow-scan-check.passed .lunflow-scan-status::after {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: white;
  font-weight: bold;
}

.lunflow-scan-verdict {
  font-size: 12px;
  font-weight: 900;
  color: transparent;
  padding: 6px 16px;
  border-radius: 8px;
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-scan-verdict.approved {
  background: linear-gradient(135deg, rgba(16, 185, 129, .25), rgba(6, 182, 212, .18));
  border: 1px solid rgba(16, 185, 129, .50);
  color: #6ee7b7;
  box-shadow: 0 4px 16px rgba(16, 185, 129, .20);
  transform: scale(1.05);
}

/* ============================================
   SCORING DEMO - Ranked Stack Animation
   ============================================ */
.lunflow-score-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.lunflow-score-lead {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  transform: translateX(-24px);
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-score-lead.visible {
  opacity: 1;
  transform: translateX(0);
}

.lunflow-score-lead.highlight {
  background: linear-gradient(135deg, rgba(16, 185, 129, .18), rgba(6, 182, 212, .12));
  border-color: rgba(16, 185, 129, .50);
  box-shadow: 0 4px 16px rgba(16, 185, 129, .18);
  box-shadow: 0 0 15px rgba(16, 185, 129, .20);
}

.lunflow-lead-rank {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 152, 195, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #a5b4fc;
}

.lunflow-score-lead.highlight .lunflow-lead-rank {
  background: #10b981;
  color: white;
  box-shadow: 0 0 10px rgba(16, 185, 129, .5);
}

.lunflow-lead-name {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .75);
}

.lunflow-lead-score {
  font-size: 11px;
  font-weight: 800;
  color: rgba(255, 255, 255, .55);
  padding: 3px 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, .06);
}

.lunflow-lead-score.hot {
  color: #6ee7b7;
  background: rgba(16, 185, 129, .15);
}

.lunflow-lead-score.warm {
  color: #fcd34d;
  background: rgba(251, 191, 36, .15);
}

.lunflow-score-insight {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(105, 38, 111, .14), rgba(0, 152, 195, .08));
  border: 1px solid rgba(105, 38, 111, .35);
  margin-top: 4px;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
}

.lunflow-score-insight.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  box-shadow: 0 4px 16px rgba(105, 38, 111, .15);
}

.lunflow-insight-icon {
  font-size: 12px;
}

.lunflow-insight-text {
  font-size: 8px;
  font-weight: 600;
  color: #c4b5fd;
}

/* Advantage Content */
/* Replaced .lunflow-adv-content with new footer pill style */
.lunflow-adv-content {
  display: none;
  /* legacy, replaced by lunflow-adv-footer */
}

.lunflow-adv-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .6), rgba(15, 23, 42, .7));
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.lunflow-adv-iconbox {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .10);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .20),
    0 0 0 1px rgba(255, 255, 255, .06) inset;
  animation: lunflowAdvIcoPulse 2.4s ease-in-out infinite;
}

@keyframes lunflowAdvIcoPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .20), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(105, 38, 111, .25), 0 0 0 1px rgba(105, 38, 111, .15) inset;
  }
}

.lunflow-adv-card:nth-child(2) .lunflow-adv-iconbox {
  animation-delay: .6s;
}

.lunflow-adv-card:nth-child(3) .lunflow-adv-iconbox {
  animation-delay: 1.2s;
}

.lunflow-adv-card:nth-child(4) .lunflow-adv-iconbox {
  animation-delay: 1.8s;
}

.lunflow-adv-name {
  font-size: 10px;
  font-weight: 800;
  color: #f8fafc;
  letter-spacing: .02em;
}

.lunflow-adv-icon {
  display: none;
  /* legacy */
}

.lunflow-adv-desc {
  display: none;
  /* legacy */
}

/* Responsive */
@media (max-width: 900px) {
  .lunflow-advantage-showcase {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .lunflow-advantage-showcase {
    grid-template-columns: 1fr;
  }

  .lunflow-pipeline-main {
    flex-direction: column;
    gap: 16px;
  }

  .lunflow-flow-arrow {
    transform: rotate(90deg);
    margin: 8px 0;
  }
}

/* Status bar */
.lunflow-status {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
  padding: 16px 24px;
  margin-top: 18px;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, .35) 100%);
  border-top: 1px solid rgba(255, 255, 255, .05);
}

.lunflow-status-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lunflow-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 12px rgba(16, 185, 129, .6);
  animation: lunflowStatusPulse 2s ease-in-out infinite;
}

@keyframes lunflowStatusPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: .6;
    transform: scale(1.3);
  }
}

.lunflow-status-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: none;
  color: rgba(255, 255, 255, .4);
}

.lunflow-status-value {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  font-family: 'SF Mono', 'Fira Code', monospace;
}

.lunflow-status-value.highlight {
  color: #6ee7b7;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  .lunflow-depth-1,
  .lunflow-depth-2,
  .lunflow-depth-3,
  .lunflow-depth-4,
  .lunflow-depth-5,
  .lunflow-core-ring,
  .lunflow-core-center,
  .lunflow-title,
  .lunflow-status-dot,
  .lunflow-flow-line.active {
    animation: none !important;
  }
}

/* Responsive - only stack on small screens */
@media (max-width: 768px) {
  .lunflow-orchestration {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
  }

  .lunflow-column-left,
  .lunflow-column-right {
    order: 2;
  }

  .lunflow-column-center {
    order: 1;
  }

  .lunflow-card-stack {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .lunflow-card {
    min-width: 200px;
    flex: 1 1 200px;
    max-width: 280px;
  }
}

@media (max-width: 640px) {
  .lunflow-stage {
    padding: 16px;
  }

  .lunflow-orchestration {
    padding: 0 16px;
  }

  .lunflow-pipeline {
    padding: 24px 16px 16px;
  }

  .lunflow-core-orb {
    width: 140px;
    height: 140px;
  }

  .lunflow-core-center {
    inset: 35px;
  }

  .lunflow-status {
    flex-wrap: wrap;
    gap: 20px;
    padding: 16px;
  }
}

/* ========================================
   LUNFLOW V2: IMMERSIVE NEURAL VISUALIZATION
   Ultra-premium futuristic data flow
   ======================================== */
.lunflow-v2 {
  --lf-primary: #0098c3;
  --lf-secondary: #69266f;
  --lf-success: #10b981;
  --lf-cyan: #06b6d4;
  --lf-gold: #f59e0b;
  --lf-rose: #ec4899;
  --lf-bg-deep: #020617;
  --lf-bg-mid: #0f172a;
}

.lunflow-v2 .lunflow-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Neural grid overlay */
.lunflow-neural-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 152, 195, .03) 1px, transparent 1px),
    linear-gradient(0deg, rgba(0, 152, 195, .03) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 0%, transparent 70%);
  animation: lunflowGridPulse 8s ease-in-out infinite;
}

@keyframes lunflowGridPulse {

  0%,
  100% {
    opacity: .4;
  }

  50% {
    opacity: .7;
  }
}

/* Dense equations overlay - more visible */
.lunflow-equations-dense .lunflow-eq {
  font-size: 13px;
  opacity: 0;
  color: hsla(var(--eq-hue, 220), 70%, 75%, .55);
  text-shadow: 0 0 20px hsla(var(--eq-hue, 220), 80%, 60%, .40);
}

/* Hero section — cleaner, more impact */
.lunflow-hero {
  position: relative;
  z-index: 20;
  text-align: center;
  padding: 56px 32px 40px;
}

.lunflow-hero-title h1 {
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 950;
  letter-spacing: -.03em;
  color: #f8fafc;
  margin: 0;
  line-height: 1.1;
}

.lunflow-gradient-text {
  background: linear-gradient(135deg, var(--lf-primary), var(--lf-secondary), var(--lf-cyan));
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: lunflowGradientShift 6s ease-in-out infinite;
}

@keyframes lunflowGradientShift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.lunflow-hero-sub {
  margin-top: 14px;
  font-size: 15px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .02em;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* Section styling — more breathing room, modern spacing */
.lunflow-v2 section {
  position: relative;
  z-index: 20;
  padding: 48px 32px;
}

.lunflow-v2 section+section {
  margin-top: 0;
}

.lunflow-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 28px;
}

.lunflow-section-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(0, 152, 195, .20), rgba(105, 38, 111, .15));
  border: 1px solid rgba(0, 152, 195, .30);
  margin-bottom: 16px;
  animation: lunflowIconFloat 4s ease-in-out infinite;
}

.lunflow-section-icon svg {
  width: 26px;
  height: 26px;
  color: #a5b4fc;
}

.lunflow-section-icon.rag {
  background: linear-gradient(145deg, rgba(105, 38, 111, .20), rgba(236, 72, 153, .15));
  border-color: rgba(105, 38, 111, .30);
}

.lunflow-section-icon.rag svg {
  color: #c4b5fd;
}

.lunflow-section-icon.scoring {
  background: linear-gradient(145deg, rgba(245, 158, 11, .20), rgba(236, 72, 153, .15));
  border-color: rgba(245, 158, 11, .30);
}

.lunflow-section-icon.scoring svg {
  color: #fcd34d;
}

.lunflow-section-icon.compliance {
  background: linear-gradient(145deg, rgba(16, 185, 129, .20), rgba(6, 182, 212, .15));
  border-color: rgba(16, 185, 129, .30);
}

.lunflow-section-icon.compliance svg {
  color: #6ee7b7;
}

.lunflow-section-icon.delivery {
  background: linear-gradient(145deg, rgba(6, 182, 212, .20), rgba(0, 152, 195, .15));
  border-color: rgba(6, 182, 212, .30);
}

.lunflow-section-icon.delivery svg {
  color: #67e8f9;
}

@keyframes lunflowIconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.lunflow-section-header h2 {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: #f8fafc;
  margin: 0 0 6px;
}

.lunflow-section-header p {
  font-size: 13px;
  color: rgba(255, 255, 255, .50);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   THE PIPELINE — Time-dimensional spotlight (one stage at a time)
   ═══════════════════════════════════════════════════════════════════════ */
.lunflow-pipeline-wrap {
  position: relative;
  z-index: 20;
  padding: 12px 14px 14px;
  background: radial-gradient(ellipse 100% 60% at 50% 50%, rgba(0, 152, 195, .06) 0%, transparent 55%);
}

.lunflow-pipeline-spotlight .lunflow-pipeline-header {
  margin-bottom: 12px;
}

.lunflow-pipeline-header {
  text-align: center;
  margin-bottom: 18px;
}

.lunflow-pipeline-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 650;
  color: rgba(255, 255, 255, .60);
}

.lunflow-pipeline-title {
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #f8fafc;
  margin: 0;
  text-transform: none;
}

/* Pipeline Map (all stages at-a-glance) */
.lunflow-pipeline-map-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
  max-width: 980px;
  margin: 0 auto;
}

@media (max-width: 980px) {
  .lunflow-pipeline-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .lunflow-pipeline-map-grid {
    grid-template-columns: 1fr;
  }
}

.lunflow-pipeline-map-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(320px 140px at 30% 40%, rgba(0, 152, 195, .10), transparent 68%),
    linear-gradient(180deg, rgba(15, 23, 42, .40), rgba(2, 6, 23, .26));
  box-shadow:
    0 12px 34px rgba(0, 0, 0, .28),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.lunflow-pipeline-map-scene {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(160px 120px at 48% 55%, rgba(105, 38, 111, .18), transparent 62%),
    radial-gradient(160px 120px at 70% 40%, rgba(16, 185, 129, .08), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(2, 6, 23, .72));
  box-shadow:
    0 10px 22px rgba(0, 0, 0, .34),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
  flex: 0 0 38px;
}

.lunflow-pipeline-map-scene dotlottie-wc {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .30));
}

.lunflow-pipeline-map-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.lunflow-pipeline-map-label {
  font-size: 12px;
  font-weight: 800;
  color: rgba(255, 255, 255, .92);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════
   eigenFlow — code-derived animated pipeline (ef-*)
   Self-contained dark showcase palette (always-dark surface).
   ═══════════════════════════════════════════════════════════════════ */
.ef-flow-section {
  position: relative;
}

/* Live run ribbon */
.ef-live-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 22px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(226, 232, 240, .92);
  border: 1px solid rgba(105, 38, 111, .30);
  background:
    radial-gradient(120px 60px at 0% 50%, rgba(16, 185, 129, .18), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, .60), rgba(2, 6, 23, .50));
  box-shadow: 0 10px 28px rgba(0, 0, 0, .34), 0 0 0 1px rgba(255, 255, 255, .04) inset;
}

.ef-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 12px 2px rgba(52, 211, 153, .8);
  animation: efLivePulse 1.6s ease-in-out infinite;
}

@keyframes efLivePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.7); }
}

.ef-live-label { color: rgba(148, 163, 184, .9); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
.ef-live-id { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: #c4b5fd; }
.ef-live-sep { color: rgba(148, 163, 184, .5); }
.ef-live-status { color: #fbbf24; font-weight: 800; text-transform: capitalize; }
.ef-live-node { color: #67e8f9; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; }

/* Track + vertical spine */
.ef-flow-track {
  position: relative;
  max-width: 780px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.ef-flow-track::before {
  content: "";
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 31px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    rgba(105, 38, 111, .10),
    rgba(105, 38, 111, .55) 14%,
    rgba(6, 182, 212, .55) 50%,
    rgba(16, 185, 129, .55) 86%,
    rgba(16, 185, 129, .10));
  box-shadow: 0 0 18px rgba(0, 152, 195, .35);
}

/* Traveling energy pulse down the spine */
.ef-flow-track::after {
  content: "";
  position: absolute;
  left: 27px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(167, 139, 250, .9) 40%, transparent 72%);
  box-shadow: 0 0 18px 6px rgba(167, 139, 250, .7);
  animation: efSpineTravel 6.5s cubic-bezier(.5, 0, .5, 1) infinite;
  pointer-events: none;
}

@keyframes efSpineTravel {
  0% { top: 22px; opacity: 0; }
  6% { opacity: 1; }
  94% { opacity: 1; }
  100% { top: calc(100% - 30px); opacity: 0; }
}

/* Per-stage hue */
.ef-stage { --ef-hue: 250; }
.ef-stage[data-visual-stage="trigger"] { --ef-hue: 280; }
.ef-stage[data-visual-stage="rag"] { --ef-hue: 258; }
.ef-stage[data-visual-stage="budget"] { --ef-hue: 42; }
.ef-stage[data-visual-stage="acquire"] { --ef-hue: 200; }
.ef-stage[data-visual-stage="enrich"] { --ef-hue: 190; }
.ef-stage[data-visual-stage="dedupe"] { --ef-hue: 168; }
.ef-stage[data-visual-stage="repair"] { --ef-hue: 24; }
.ef-stage[data-visual-stage="policy"] { --ef-hue: 12; }
.ef-stage[data-visual-stage="contact"] { --ef-hue: 210; }
.ef-stage[data-visual-stage="demo"] { --ef-hue: 152; }
.ef-stage[data-visual-stage="quality"] { --ef-hue: 142; }
.ef-stage[data-visual-stage="geocode"],
.ef-stage[data-visual-stage="geo"] { --ef-hue: 174; }
.ef-stage[data-visual-stage="signal"] { --ef-hue: 48; }
.ef-stage[data-visual-stage="score"] { --ef-hue: 38; }
.ef-stage[data-visual-stage="explain"] { --ef-hue: 50; }
.ef-stage[data-visual-stage="comply"] { --ef-hue: 158; }
.ef-stage[data-visual-stage="pack"] { --ef-hue: 268; }
.ef-stage[data-visual-stage="deliver"] { --ef-hue: 300; }

.ef-stage {
  position: relative;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  padding: 9px 0;
  opacity: 0;
  transform: translateY(14px);
  animation: efStageIn .55s ease-out forwards;
  animation-delay: calc(var(--ef-i, 0) * 55ms);
}

@keyframes efStageIn {
  to { opacity: 1; transform: translateY(0); }
}

.ef-stage-rail {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ef-stage-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  color: hsla(var(--ef-hue), 70%, 78%, .85);
  letter-spacing: .04em;
}

.ef-stage-orb {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, hsla(var(--ef-hue), 90%, 72%, .55), transparent 60%),
    linear-gradient(180deg, hsla(var(--ef-hue), 60%, 24%, .95), hsla(var(--ef-hue), 70%, 14%, .95));
  border: 1px solid hsla(var(--ef-hue), 85%, 70%, .55);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .40), 0 0 16px hsla(var(--ef-hue), 85%, 60%, .35);
  transition: transform .35s ease, box-shadow .35s ease;
}

.ef-stage-orb-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid hsla(var(--ef-hue), 90%, 72%, .45);
  opacity: .55;
}

.ef-stage-emoji { font-size: 20px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

/* Connector segment below each orb */
.ef-stage-connector {
  position: absolute;
  left: 31px;
  top: 56px;
  bottom: -9px;
  width: 2px;
  overflow: hidden;
  z-index: 1;
}

.ef-stage:last-child .ef-stage-connector { display: none; }

/* Body card */
.ef-stage-body {
  border-radius: 14px;
  padding: 12px 16px;
  border: 1px solid hsla(var(--ef-hue), 60%, 60%, .16);
  background:
    radial-gradient(320px 120px at 0% 0%, hsla(var(--ef-hue), 80%, 55%, .10), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, .50), rgba(2, 6, 23, .34));
  box-shadow: 0 12px 30px rgba(0, 0, 0, .26), 0 0 0 1px rgba(255, 255, 255, .03) inset;
  transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.ef-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ef-stage-title {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #f1f5f9;
}

.ef-stage-kind {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
  color: hsla(var(--ef-hue), 85%, 80%, 1);
  background: hsla(var(--ef-hue), 70%, 50%, .14);
  border: 1px solid hsla(var(--ef-hue), 75%, 65%, .35);
}

.ef-kind-delivery { --ef-hue: 300; }
.ef-kind-worker_publish { --ef-hue: 268; }

.ef-stage-summary {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(203, 213, 225, .82);
}

.ef-stage-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}

.ef-stage-file {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: hsla(var(--ef-hue), 80%, 80%, .92);
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(2, 6, 23, .50);
  border: 1px solid rgba(255, 255, 255, .07);
}

.ef-stage-chip {
  font-size: 10px;
  font-weight: 700;
  color: rgba(148, 163, 184, .9);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
}

/* Active (cycled) state */
.ef-stage.is-active .ef-stage-orb {
  transform: scale(1.16);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 28px 4px hsla(var(--ef-hue), 90%, 60%, .65);
}

.ef-stage.is-active .ef-stage-orb-ring {
  opacity: 1;
  animation: efOrbRing 1.4s ease-out infinite;
}

@keyframes efOrbRing {
  0% { transform: scale(1); opacity: .8; }
  100% { transform: scale(1.7); opacity: 0; }
}

.ef-stage.is-active .ef-stage-body {
  transform: translateX(4px);
  border-color: hsla(var(--ef-hue), 85%, 65%, .55);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .4), 0 0 0 1px hsla(var(--ef-hue), 85%, 65%, .35) inset;
}

.ef-stage.is-active .ef-stage-connector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsla(var(--ef-hue), 90%, 70%, .9), transparent);
  animation: efConnectorFlow 1s ease-in-out infinite;
}

@keyframes efConnectorFlow {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* RAG corpus chips (intel card) */
.intel-corpus-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 2px 0 4px;
}

.intel-corpus-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: rgba(196, 181, 253, .85);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(105, 38, 111, .10);
  border: 1px solid rgba(105, 38, 111, .22);
}

.intel-corpus-chip.req {
  color: #5eead4;
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .35);
}

/* ── Phase rail: at-a-glance macro flow (easy to follow) ── */
.ef-phase-rail {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1080px;
  margin: 0 auto 30px;
  padding: 0 8px;
}

.ef-group-hue { --ef-hue: 250; }
[data-group="plan"] { --ef-hue: 280; }
[data-group="acquire"] { --ef-hue: 200; }
[data-group="normalize"] { --ef-hue: 168; }
[data-group="enrich"] { --ef-hue: 210; }
[data-group="gate"] { --ef-hue: 142; }
[data-group="score"] { --ef-hue: 38; }
[data-group="comply"] { --ef-hue: 158; }
[data-group="publish"] { --ef-hue: 300; }

.ef-phase-pill {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border-radius: 13px;
  border: 1px solid hsla(var(--ef-hue), 70%, 62%, .30);
  background:
    radial-gradient(120px 60px at 0% 0%, hsla(var(--ef-hue), 85%, 55%, .16), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(2, 6, 23, .40));
  box-shadow: 0 8px 22px rgba(0, 0, 0, .26);
}

.ef-phase-emoji {
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 0 8px hsla(var(--ef-hue), 85%, 60%, .5));
}

.ef-phase-text { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }

.ef-phase-name {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: #eef2ff;
}

.ef-phase-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
  color: hsla(var(--ef-hue), 80%, 78%, 1);
  margin-right: 6px;
}

.ef-phase-count {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(148, 163, 184, .8);
}

.ef-phase-arrow {
  align-self: center;
  font-size: 16px;
  font-weight: 700;
  color: rgba(148, 163, 184, .45);
}

/* ── Phase divider inside the detailed timeline ── */
.ef-group-divider {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: 16px;
  margin: 14px 0 4px;
  position: relative;
  z-index: 2;
}

.ef-group-dot {
  justify-self: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, hsla(var(--ef-hue), 95%, 78%, 1), hsla(var(--ef-hue), 75%, 42%, 1));
  border: 2px solid hsla(var(--ef-hue), 90%, 72%, .65);
  box-shadow: 0 0 16px 2px hsla(var(--ef-hue), 90%, 60%, .55);
}

.ef-group-name {
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: hsla(var(--ef-hue), 75%, 80%, 1);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.ef-group-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, hsla(var(--ef-hue), 80%, 60%, .45), transparent);
}

@media (max-width: 620px) {
  .ef-phase-rail { gap: 6px; }
  .ef-phase-arrow { display: none; }
  .ef-phase-pill { flex: 1 1 calc(50% - 6px); }
  .ef-group-divider { grid-template-columns: 52px 1fr; gap: 12px; }
}

@media (max-width: 620px) {
  .ef-stage { grid-template-columns: 52px 1fr; gap: 12px; }
  .ef-flow-track::before, .ef-stage-connector { left: 25px; }
  .ef-flow-track::after { left: 21px; }
  .ef-stage-orb { width: 40px; height: 40px; }
  .ef-stage-emoji { font-size: 17px; }
}

/* Spotlight: one stage, 3D-ish orb, time tunnel */
.lunflow-spotlight {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lunflow-spotlight-tunnel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.lunflow-spotlight-past,
.lunflow-spotlight-future {
  flex: 1;
  min-width: 60px;
  max-width: 120px;
  height: 4px;
  position: relative;
  align-self: center;
}

.lunflow-spotlight-flow {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 152, 195, .2));
  border-radius: 2px;
  animation: lunflowSpotlightFlowPulse 2s ease-in-out infinite;
}

.lunflow-spotlight-future .lunflow-spotlight-flow {
  background: linear-gradient(90deg, rgba(0, 152, 195, .2), transparent);
}

@keyframes lunflowSpotlightFlowPulse {

  0%,
  100% {
    opacity: .5;
  }

  50% {
    opacity: 1;
  }
}

.lunflow-spotlight-now {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
}

/* 5-step vertical flow container (compact, executive) */
.lunflow-spotlight-flow-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 4px 0;
  position: relative;
}

.lunflow-spotlight-flow-vertical {
  flex-direction: column;
}

.lunflow-spotlight-flow-wrap::before {
  content: "";
  position: absolute;
  /* Align to the center of the scene block (padding-left 8px + 56px/2) */
  left: 36px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg,
      rgba(0, 152, 195, .00) 0%,
      rgba(0, 152, 195, .28) 15%,
      rgba(34, 211, 238, .22) 50%,
      rgba(16, 185, 129, .22) 80%,
      rgba(16, 185, 129, .00) 100%);
  box-shadow: 0 0 22px rgba(0, 152, 195, .18);
  pointer-events: none;
}

.lunflow-spotlight-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .06);
  background:
    radial-gradient(240px 120px at 40% 40%, rgba(0, 152, 195, .06), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, .25), rgba(2, 6, 23, .20));
  opacity: 0.72;
  transform: translateY(0) scale(0.96);
  transition:
    opacity .55s cubic-bezier(.2, .8, .2, 1),
    transform .55s cubic-bezier(.2, .8, .2, 1),
    background .55s cubic-bezier(.2, .8, .2, 1),
    border-color .55s cubic-bezier(.2, .8, .2, 1);
  position: relative;
  /* Executive: keep it crisp (blur reads hazy) */
}

.lunflow-spotlight-step::before {
  content: "";
  position: absolute;
  left: 36px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(0, 152, 195, .55);
  box-shadow:
    0 0 0 3px rgba(0, 152, 195, .12),
    0 0 18px rgba(0, 152, 195, .20);
  pointer-events: none;
}

.lunflow-spotlight-step.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  border-color: rgba(0, 152, 195, .26);
  background:
    radial-gradient(280px 140px at 40% 40%, rgba(0, 152, 195, .14), transparent 70%),
    linear-gradient(180deg, rgba(15, 23, 42, .40), rgba(2, 6, 23, .30));
}

.lunflow-spotlight-step.active::before {
  background: rgba(34, 211, 238, .70);
  box-shadow:
    0 0 0 4px rgba(34, 211, 238, .14),
    0 0 22px rgba(34, 211, 238, .22);
}

.lunflow-spotlight-step.active .lunflow-spotlight-scene {
  border-color: rgba(0, 152, 195, .5);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .45),
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 0 40px rgba(0, 152, 195, .25);
}

.lunflow-spotlight-scene {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(200px 150px at 48% 55%, rgba(105, 38, 111, .18), transparent 62%),
    radial-gradient(200px 150px at 70% 40%, rgba(16, 185, 129, .08), transparent 60%),
    linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(2, 6, 23, .72));
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}


.lunflow-spotlight-step-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  text-align: left;
  max-width: 300px;
  line-height: 1.25;
  transition: color .4s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lunflow-spotlight-step.active .lunflow-spotlight-step-label {
  color: rgba(255, 255, 255, .95);
  font-weight: 600;
}

/* Flow arrows between steps */
.lunflow-spotlight-arrow {
  width: 100%;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 152, 195, .45);
  flex-shrink: 0;
}

.lunflow-spotlight-arrow svg {
  width: 12px;
  height: 12px;
}

/* Executive wants a seamless timeline, not “steppy” arrows */
.lunflow-spotlight-flow-vertical .lunflow-spotlight-arrow {
  display: none;
}

/* Print-only pipeline (full list) */
.lunflow-print-only {
  display: none;
}

@media print {

  /* Make it printable and single-page friendly */
  html,
  body {
    background: #ffffff !important;
    color: #0b1220 !important;
  }

  /* Ensure this overrides older dark print rules later in the file */
  .lunflow-stage.lunflow-v2.lunflow-single-page {
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  #eigenFlowModeExecBtn,
  #eigenFlowModeShowtimeBtn,
  #eigenFlowPrintBtn,
  #eigenFlowShareBtn {
    display: none !important;
  }

  .lunflow-gl,
  .lunflow-depth-1,
  .lunflow-depth-2,
  .lunflow-depth-3,
  .lunflow-depth-4,
  .lunflow-depth-5,
  .lunflow-neural-grid,
  .lunflow-equations,
  .lunflow-status,
  .lunflow-intelligence-hero,
  .lunflow-hero,
  #intelNeuralSvg {
    display: none !important;
  }

  .lunflow-pipeline-spotlight {
    display: none !important;
  }

  .lunflow-print-only {
    display: block !important;
    padding: 12px 0 !important;
  }

  .lunflow-print-only h2 {
    margin: 0 0 10px;
    font-size: 16px;
    font-weight: 800;
    color: #0b1220;
  }

  .lunflow-print-list {
    margin: 0;
    padding-left: 18px;
    column-count: 2;
    column-gap: 24px;
    font-size: 12px;
  }

  .lunflow-print-list li {
    break-inside: avoid;
    padding: 4px 0;
  }

  .lunflow-print-step {
    font-weight: 700;
  }

  .lunflow-print-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 10px;
    color: #334155;
    margin-left: 8px;
  }
}

.lunflow-spotlight-scene dotlottie-wc {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .3));
}

/* Legacy lottie-player support */
.lunflow-spotlight-scene lottie-player {
  max-height: 85%;
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, .3));
}

.lunflow-spotlight-scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.lunflow-spotlight-scene svg {
  width: 100%;
  height: 100%;
  display: block;
}

.lunflow-spotlight-scene.lunflow-spotlight-icon-pop {
  animation: lunflowIconPop .4s ease-out;
}

.lunflow-spotlight-orb-wrap {
  perspective: 400px;
}

.lunflow-spotlight-orb {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  transform: rotateX(8deg) rotateY(-4deg);
  background: linear-gradient(145deg, rgba(50, 60, 90, .95) 0%, rgba(20, 28, 50, 1) 50%, rgba(15, 23, 42, 1) 100%);
  border: 2px solid rgba(0, 152, 195, .5);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .06) inset,
    0 12px 32px rgba(0, 0, 0, .5),
    0 0 40px rgba(0, 152, 195, .35),
    0 0 80px rgba(105, 38, 111, .2);
  transition: border-color .5s ease, box-shadow .5s ease, transform .5s ease;
}

.lunflow-spotlight-orb-inner {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(0, 152, 195, .15), transparent 60%);
  pointer-events: none;
}

.lunflow-spotlight-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 152, 195, .25) 0%, rgba(105, 38, 111, .12) 40%, transparent 70%);
  animation: lunflowSpotlightGlow 4s ease-in-out infinite;
  pointer-events: none;
}

@keyframes lunflowSpotlightGlow {

  0%,
  100% {
    opacity: .8;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Legacy: orb icon (replaced by wide scene). Keep minimal to avoid surprises elsewhere. */
.lunflow-spotlight-icon {
  display: none;
}

.lunflow-spotlight-icon svg {
  display: none;
}

@keyframes lunflowIconPop {
  0% {
    transform: scale(0.9);
    opacity: .75;
  }

  65% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.lunflow-spotlight-icon-pop {
  animation: lunflowIconPop .4s ease-out;
}

/* Stage-specific icon color + glow — step-specific, executive-ready */
/* Legacy stage color rules removed (orb icon replaced by scene). */

.lunflow-spotlight-label {
  font-size: clamp(16px, 2.5vw, 20px);
  font-weight: 800;
  color: #f8fafc;
  text-align: center;
  text-transform: none;
  letter-spacing: -.02em;
  min-height: 1.4em;
  transition: opacity .5s ease, transform .5s ease;
}

.lunflow-spotlight-label:empty {
  opacity: 0;
}

/* Step X of Y removed */
.lunflow-spotlight-progress {
  display: none;
}

/* Orb color by visual_stage (set by JS) — colorful, 3D-ish */
.lunflow-spotlight-orb[data-stage="trigger"] {
  border-color: rgba(245, 158, 11, .55);
  box-shadow: 0 0 40px rgba(245, 158, 11, .3), 0 0 80px rgba(245, 158, 11, .15);
}

.lunflow-spotlight-orb[data-stage="rag"] {
  border-color: rgba(105, 38, 111, .55);
  box-shadow: 0 0 40px rgba(105, 38, 111, .4), 0 0 80px rgba(105, 38, 111, .25);
}

.lunflow-spotlight-orb[data-stage="acquire"] {
  border-color: rgba(6, 182, 212, .55);
  box-shadow: 0 0 40px rgba(6, 182, 212, .35), 0 0 80px rgba(6, 182, 212, .2);
}

.lunflow-spotlight-orb[data-stage="enrich"] {
  border-color: rgba(0, 152, 195, .55);
  box-shadow: 0 0 40px rgba(0, 152, 195, .4), 0 0 80px rgba(105, 38, 111, .25);
}

.lunflow-spotlight-orb[data-stage="dedupe"] {
  border-color: rgba(236, 72, 153, .55);
  box-shadow: 0 0 40px rgba(236, 72, 153, .35), 0 0 80px rgba(236, 72, 153, .2);
}

.lunflow-spotlight-orb[data-stage="repair"] {
  border-color: rgba(251, 146, 60, .55);
  box-shadow: 0 0 40px rgba(251, 146, 60, .3), 0 0 80px rgba(251, 146, 60, .15);
}

.lunflow-spotlight-orb[data-stage="contact"] {
  border-color: rgba(0, 152, 195, .5);
  box-shadow: 0 0 40px rgba(0, 152, 195, .35), 0 0 80px rgba(105, 38, 111, .2);
}

.lunflow-spotlight-orb[data-stage="demo"] {
  border-color: rgba(105, 38, 111, .5);
  box-shadow: 0 0 40px rgba(105, 38, 111, .35), 0 0 80px rgba(105, 38, 111, .2);
}

.lunflow-spotlight-orb[data-stage="quality"],
.lunflow-spotlight-orb[data-stage="geo"],
.lunflow-spotlight-orb[data-stage="comply"] {
  border-color: rgba(16, 185, 129, .55);
  box-shadow: 0 0 40px rgba(16, 185, 129, .35), 0 0 80px rgba(16, 185, 129, .2);
}

.lunflow-spotlight-orb[data-stage="geocode"] {
  border-color: rgba(6, 182, 212, .5);
  box-shadow: 0 0 40px rgba(6, 182, 212, .35), 0 0 80px rgba(6, 182, 212, .2);
}

.lunflow-spotlight-orb[data-stage="score"] {
  border-color: rgba(245, 158, 11, .55);
  box-shadow: 0 0 40px rgba(245, 158, 11, .3), 0 0 80px rgba(245, 158, 11, .15);
}

.lunflow-spotlight-orb[data-stage="explain"] {
  border-color: rgba(245, 158, 11, .5);
  box-shadow: 0 0 40px rgba(245, 158, 11, .3), 0 0 80px rgba(245, 158, 11, .15);
}

.lunflow-spotlight-orb[data-stage="pack"] {
  border-color: rgba(0, 152, 195, .5);
  box-shadow: 0 0 40px rgba(0, 152, 195, .35), 0 0 80px rgba(105, 38, 111, .2);
}

.lunflow-spotlight-orb[data-stage="deliver"] {
  border-color: rgba(16, 185, 129, .6);
  box-shadow: 0 0 48px rgba(16, 185, 129, .4), 0 0 96px rgba(6, 182, 212, .25);
}

/* Single-page: fit key content in one viewport */
.lunflow-v2.lunflow-single-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Override base stage padding so the whole view fits at-a-glance */
  padding: 6px 10px;
}

.lunflow-v2.lunflow-single-page .lunflow-hero {
  padding: 18px 12px 12px;
}

.lunflow-v2.lunflow-single-page .lunflow-intelligence-hero {
  padding: 18px 12px;
}

/* ========================================
   eigenFlow — Executive default mode
   ======================================== */
.lunflow-stage[data-lunflow-mode="exec"] {
  background:
    radial-gradient(900px 520px at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(700px 420px at 15% 10%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 60%),
    var(--bg);
}

.lunflow-stage[data-lunflow-mode="exec"] .lunflow-gl,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-depth-1,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-depth-2,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-depth-3,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-depth-4,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-depth-5,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-neural-grid,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-equations,
.lunflow-stage[data-lunflow-mode="exec"] .intel-bg-layer,
.lunflow-stage[data-lunflow-mode="exec"] .intel-neural-svg {
  display: none !important;
}

.lunflow-stage[data-lunflow-mode="exec"] .lunflow-hero,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-intelligence-hero,
.lunflow-stage[data-lunflow-mode="exec"] .adv-hero,
.lunflow-stage[data-lunflow-mode="exec"] .lunflow-status {
  display: none !important;
}

/* Showtime can be long; allow scrolling */
.lunflow-stage[data-lunflow-mode="showtime"] {
  overflow: auto;
}

/* The JS sets `data-eigenflow-mode` (not `data-lunflow-mode`). In Executive
   mode keep the surface calm by removing the floating-equation overlay and the
   neural grid — but DO keep the hero / intelligence / advantage / pipeline
   content visible. Equations still render (faint, behind content) in Showtime. */
.lunflow-stage[data-eigenflow-mode="exec"] .lunflow-equations,
.lunflow-stage[data-eigenflow-mode="exec"] .lunflow-neural-grid {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────
   FINAL PRINT OVERRIDE (must be last in file)
   Reason: older “dark print” rules exist later in CSS; when
   “Background graphics” is OFF, content can become invisible.
   ───────────────────────────────────────────────────────────── */
@media print {

  html,
  body {
    background: #ffffff !important;
    color: #0b1220 !important;
  }

  .lunflow-stage.lunflow-v2 {
    background: #ffffff !important;
    color: #0b1220 !important;
  }

  /* Always show the full pipeline list when printing eigenFlow */
  .lunflow-pipeline-spotlight {
    display: none !important;
  }

  .lunflow-print-only {
    display: block !important;
    padding: 12px 0 !important;
  }

  .lunflow-print-only,
  .lunflow-print-only * {
    color: #0b1220 !important;
  }

  .lunflow-print-id {
    color: #334155 !important;
  }

  /* Remove UI controls */
  #eigenFlowModeExecBtn,
  #eigenFlowModeShowtimeBtn,
  #eigenFlowPrintBtn,
  #eigenFlowShareBtn {
    display: none !important;
  }

  /* Avoid “blank” prints due to filters/shadows */
  .lunflow-stage.lunflow-v2 * {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }
}

/* 6-phase journey — horizontal flow (left → right), no list stack (legacy) */
.lunflow-journey {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 100%;
  margin: 0 auto 28px;
  padding: 0 16px 16px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.lunflow-journey::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  width: min(90%, 980px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 152, 195, .25) 15%, rgba(105, 38, 111, .3) 50%, rgba(0, 152, 195, .25) 85%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.lunflow-journey-phase {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  max-width: 160px;
  flex-shrink: 0;
  padding: 20px 14px;
  border-radius: 16px;
  background: rgba(15, 23, 42, .75);
  border: 1px solid rgba(0, 152, 195, .25);
  transition: border-color .25s ease, box-shadow .25s ease;
}

.lunflow-journey-phase:hover {
  border-color: rgba(0, 152, 195, .4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}

.lunflow-journey-orb {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, 1));
  border: 2px solid rgba(0, 152, 195, .4);
  flex-shrink: 0;
}

.lunflow-journey-orb.trigger {
  border-color: rgba(245, 158, 11, .5);
}

.lunflow-journey-orb.acquire {
  border-color: rgba(6, 182, 212, .5);
}

.lunflow-journey-orb.enrich {
  border-color: rgba(0, 152, 195, .5);
}

.lunflow-journey-orb.quality {
  border-color: rgba(16, 185, 129, .5);
}

.lunflow-journey-orb.score {
  border-color: rgba(245, 158, 11, .5);
}

.lunflow-journey-orb.deliver {
  border-color: rgba(16, 185, 129, .55);
}

.lunflow-journey-label {
  font-size: 15px;
  font-weight: 700;
  color: #f8fafc;
  text-align: center;
  line-height: 1.2;
  text-transform: none;
}

.lunflow-journey-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
  line-height: 1.3;
}

.lunflow-journey-arrow {
  width: 16px;
  min-width: 16px;
  align-self: center;
  flex-shrink: 0;
  border: none;
  border-top: 2px solid rgba(0, 152, 195, .4);
  margin: 0 2px;
  position: relative;
  z-index: 1;
}

@media (max-width: 900px) {
  .lunflow-journey {
    justify-content: flex-start;
    padding-left: 24px;
  }

  .lunflow-journey::before {
    display: none;
  }
}

/* Full pipeline (18 steps) — collapsible, readable when open */
.lunflow-full-pipeline-details {
  margin-top: 24px;
  border-radius: 12px;
  border: 1px solid rgba(0, 152, 195, .2);
  background: rgba(15, 23, 42, .4);
  overflow: hidden;
}

.lunflow-full-pipeline-summary {
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  list-style: none;
  text-transform: none;
}

.lunflow-full-pipeline-summary::-webkit-details-marker {
  display: none;
}

.lunflow-full-pipeline-details[open] .lunflow-full-pipeline-summary {
  border-bottom: 1px solid rgba(0, 152, 195, .2);
}

.lunflow-full-pipeline-details .lunflow-main-flow {
  padding: 24px 20px;
}

/* Full pipeline: orb + label only (no descriptions) so flow and animation read clearly */
.lunflow-full-pipeline-details .lunflow-stage-detail {
  display: none !important;
}

.lunflow-full-pipeline-details .lunflow-flow-stage {
  min-width: 52px;
  max-width: 64px;
  gap: 6px;
}

.lunflow-full-pipeline-details .lunflow-stage-label {
  font-size: 9px;
  font-weight: 700;
  max-width: 58px;
  text-transform: none;
}

.lunflow-full-pipeline-details .lunflow-stage-orb {
  width: 40px;
  height: 40px;
}

.lunflow-full-pipeline-details .lunflow-flow-connector {
  min-width: 20px;
}

/* ═══════════════════════════════════════════════════════════════════════
   MAIN DATA FLOW: Horizontal Pipeline (inside details)
   ═══════════════════════════════════════════════════════════════════════ */
.lunflow-main-flow {
  position: relative;
  z-index: 20;
  padding: 12px 4px 16px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.lunflow-main-flow::-webkit-scrollbar {
  display: none;
}

.lunflow-main-flow::-webkit-scrollbar {
  height: 6px;
}

.lunflow-main-flow::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .03);
  border-radius: 10px;
}

.lunflow-main-flow::-webkit-scrollbar-thumb {
  background: rgba(0, 152, 195, .35);
  border-radius: 10px;
}

.lunflow-flow-track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 12px 4px;
  flex-wrap: nowrap;
}

/* Stage node - ultra compact with better spacing */
.lunflow-flow-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 60px;
  max-width: 76px;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}

.lunflow-flow-stage.wide {
  min-width: 68px;
  max-width: 84px;
}

/* Stage orb - ultra compact */
.lunflow-stage-orb {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, 1));
  border: 2px solid rgba(0, 152, 195, .40);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 4px 12px rgba(0, 0, 0, .40);
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
  z-index: 2;
}

.lunflow-stage-orb .lunflow-orb-glow {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 152, 195, .25) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -1;
}

.lunflow-flow-stage.is-active .lunflow-stage-orb {
  border-color: var(--lf-primary);
  transform: scale(1.12);
  box-shadow:
    0 0 24px rgba(0, 152, 195, .50),
    0 0 48px rgba(105, 38, 111, .25),
    0 4px 16px rgba(0, 0, 0, .40);
}

.lunflow-flow-stage.is-active .lunflow-orb-glow {
  opacity: 1;
}

.lunflow-orb-icon {
  font-size: 14px;
  z-index: 2;
}

/* Orb rings - ultra compact */
.lunflow-orb-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 152, 195, .30);
  animation: lunflowOrbRingSpin 12s linear infinite;
}

.lunflow-orb-ring.r2 {
  inset: -7px;
  border-color: rgba(105, 38, 111, .20);
  animation-duration: 18s;
  animation-direction: reverse;
}

@keyframes lunflowOrbRingSpin {
  to {
    transform: rotate(360deg);
  }
}

/* Checkpoint (gate) styling */
.lunflow-flow-stage.checkpoint .lunflow-stage-orb {
  border-color: rgba(16, 185, 129, .50);
  background: linear-gradient(145deg, rgba(16, 185, 129, .12), rgba(6, 182, 212, .08));
}

.lunflow-flow-stage.checkpoint.is-active .lunflow-stage-orb {
  border-color: var(--lf-success);
  box-shadow:
    0 0 40px rgba(16, 185, 129, .50),
    0 0 80px rgba(52, 211, 153, .25),
    0 8px 32px rgba(0, 0, 0, .40);
}

.lunflow-checkpoint-badge {
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--lf-success);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, .40);
}

/* Stage labels — InitCap (backend sends Title Case) */
.lunflow-stage-label {
  font-size: 7px;
  font-weight: 800;
  text-align: center;
  color: rgba(255, 255, 255, .70);
  line-height: 1.1;
  text-transform: none;
  letter-spacing: 0;
  transition: color .3s ease;
  max-width: 60px;
}

.lunflow-flow-stage.is-active .lunflow-stage-label {
  color: #a5b4fc;
}

.lunflow-flow-stage.checkpoint.is-active .lunflow-stage-label {
  color: #6ee7b7;
}

.lunflow-stage-detail {
  font-size: 6px;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  max-width: 70px;
  line-height: 1.25;
  margin-top: 1px;
  display: none;
  /* Hide details on compact view */
}

@media (min-width: 1200px) {
  .lunflow-stage-detail {
    display: block;
  }
}

/* Math equations on stages */
.lunflow-stage-math {
  font-size: 8px;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  color: rgba(105, 38, 111, .55);
  text-shadow: 0 0 10px rgba(105, 38, 111, .25);
  margin-top: 2px;
  opacity: .6;
  transition: opacity .3s ease;
  max-width: 70px;
  line-height: 1.2;
}

.lunflow-flow-stage.is-active .lunflow-stage-math {
  opacity: 1;
  color: rgba(167, 139, 250, .85);
}

/* Gate checks */
.lunflow-gate-checks {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.lunflow-gate-checks span {
  font-size: 7px;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(16, 185, 129, .12);
  color: rgba(110, 231, 183, .80);
  line-height: 1.2;
}

/* Brokers mini display */
.lunflow-brokers-mini {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90px;
  margin-top: 2px;
}

.lunflow-broker-dot {
  font-size: 12px;
  opacity: .5;
  transition: all .2s ease;
  cursor: default;
}

.lunflow-flow-stage.is-active .lunflow-broker-dot {
  opacity: 1;
  transform: scale(1.1);
}

/* Score factors mini */
.lunflow-score-factors {
  display: flex;
  gap: 2px;
  margin-top: 2px;
  justify-content: center;
}

.lunflow-factor-pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--f-color, #0098c3);
  opacity: .5;
  transition: all .2s ease;
}

.lunflow-flow-stage.is-active .lunflow-factor-pip {
  opacity: 1;
  box-shadow: 0 0 8px var(--f-color, #0098c3);
}

/* Artifacts mini */
.lunflow-artifacts-mini {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2px;
}

.lunflow-artifact-dot {
  font-size: 7px;
  font-family: 'JetBrains Mono', monospace;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .50);
  line-height: 1.2;
}

.lunflow-artifact-dot[data-a="json"] {
  color: #fcd34d;
}

.lunflow-artifact-dot[data-a="csv"] {
  color: #6ee7b7;
}

.lunflow-artifact-dot[data-a="pdf"] {
  color: #f87171;
}

/* Flow connectors - ultra compact */
.lunflow-flow-connector {
  min-width: 20px;
  width: 24px;
  height: 4px;
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.lunflow-connector-beam {
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg,
      rgba(0, 152, 195, .25) 0%,
      rgba(105, 38, 111, .6) 50%,
      rgba(0, 152, 195, .25) 100%);
  position: relative;
  box-shadow: 0 0 12px rgba(0, 152, 195, .5), 0 0 24px rgba(105, 38, 111, .25);
}

.lunflow-connector-particle {
  position: absolute;
  width: 24px;
  height: 6px;
  border-radius: 3px;
  left: 0;
  background: linear-gradient(90deg, transparent, var(--lf-primary), var(--lf-cyan), var(--lf-secondary), transparent);
  animation: lunflowParticleFlow 1.4s linear infinite;
  box-shadow: 0 0 16px rgba(0, 152, 195, .9), 0 0 24px rgba(6, 182, 212, .6);
}

@keyframes lunflowParticleFlow {
  0% {
    left: -24px;
    opacity: 0;
  }

  5% {
    opacity: 1;
  }

  95% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 24px);
    opacity: 0;
  }
}

.lunflow-flow-connector.final .lunflow-connector-beam {
  background: linear-gradient(90deg,
      rgba(16, 185, 129, .15) 0%,
      rgba(16, 185, 129, .50) 50%,
      rgba(6, 182, 212, .15) 100%);
}

.lunflow-flow-connector.final .lunflow-connector-particle {
  background: linear-gradient(90deg, transparent, var(--lf-success), var(--lf-cyan), transparent);
  box-shadow: 0 0 12px rgba(16, 185, 129, .60);
}

/* Orb color variants */
.lunflow-stage-orb.trigger {
  border-color: rgba(245, 158, 11, .50);
}

.lunflow-stage-orb.trigger .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.rag {
  border-color: rgba(105, 38, 111, .50);
}

.lunflow-stage-orb.rag .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(105, 38, 111, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.acquire {
  border-color: rgba(6, 182, 212, .50);
}

.lunflow-stage-orb.acquire .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(6, 182, 212, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.enrich {
  border-color: rgba(0, 152, 195, .50);
}

.lunflow-stage-orb.dedupe {
  border-color: rgba(236, 72, 153, .50);
}

.lunflow-stage-orb.dedupe .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(236, 72, 153, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.score {
  border-color: rgba(245, 158, 11, .50);
}

.lunflow-stage-orb.score .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.pack {
  border-color: rgba(0, 152, 195, .50);
}

.lunflow-stage-orb.deliver {
  border-color: rgba(16, 185, 129, .60);
}

.lunflow-stage-orb.deliver .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, .30) 0%, transparent 70%);
}

.lunflow-stage-orb.quality {
  border-color: rgba(16, 185, 129, .50);
}

.lunflow-stage-orb.quality .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.geo {
  border-color: rgba(6, 182, 212, .50);
}

.lunflow-stage-orb.geo .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(6, 182, 212, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.comply {
  border-color: rgba(16, 185, 129, .50);
}

.lunflow-stage-orb.comply .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(16, 185, 129, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.repair {
  border-color: rgba(251, 146, 60, .50);
}

.lunflow-stage-orb.repair .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(251, 146, 60, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.contact {
  border-color: rgba(0, 152, 195, .50);
}

.lunflow-stage-orb.contact .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(0, 152, 195, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.demo {
  border-color: rgba(105, 38, 111, .50);
}

.lunflow-stage-orb.demo .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(105, 38, 111, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.geocode {
  border-color: rgba(6, 182, 212, .50);
}

.lunflow-stage-orb.geocode .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(6, 182, 212, .25) 0%, transparent 70%);
}

.lunflow-stage-orb.explain {
  border-color: rgba(245, 158, 11, .50);
}

.lunflow-stage-orb.explain .lunflow-orb-glow {
  background: radial-gradient(circle, rgba(245, 158, 11, .25) 0%, transparent 70%);
}

/* Dense track: 18 code-derived phases (smaller stages) */
.lunflow-flow-track-dense .lunflow-flow-stage {
  min-width: 44px;
  max-width: 58px;
}

.lunflow-flow-track-dense .lunflow-flow-stage.wide {
  min-width: 52px;
  max-width: 64px;
}

.lunflow-flow-track-dense .lunflow-stage-orb {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.lunflow-flow-track-dense .lunflow-stage-label {
  font-size: 5.5px;
  line-height: 1.2;
  word-break: break-word;
  text-align: center;
}

.lunflow-flow-track-dense .lunflow-stage-detail {
  font-size: 4.5px;
  max-width: 52px;
}

.lunflow-flow-track-dense .lunflow-flow-connector {
  min-width: 14px;
}

/* ═══════════════════════════════════════════════════════════════════════
   INTELLIGENCE LAYERS - THE HOLY MOLY CENTERPIECE - APPLE BEAUTIFUL
   ═══════════════════════════════════════════════════════════════════════ */
.lunflow-intelligence-hero {
  position: relative;
  z-index: 25;
  padding: 48px 24px 56px;
  overflow: hidden;
}

/* ─── Background Layers ─── */
.intel-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intel-bg-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(0, 152, 195, .18) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 20% 100%, rgba(105, 38, 111, .12) 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 80% 100%, rgba(6, 182, 212, .10) 0%, transparent 50%),
    linear-gradient(180deg, rgba(15, 23, 42, .95) 0%, rgba(10, 15, 30, 1) 100%);
}

.intel-bg-mesh {
  background-image:
    linear-gradient(rgba(0, 152, 195, .03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 152, 195, .03) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, black 20%, transparent 70%);
  animation: intelMeshDrift 20s linear infinite;
}

@keyframes intelMeshDrift {
  to {
    background-position: 40px 40px;
  }
}

.intel-bg-particles {
  background: transparent;
}

.intel-bg-glow {
  background:
    radial-gradient(circle at 25% 30%, rgba(105, 38, 111, .08) 0%, transparent 30%),
    radial-gradient(circle at 75% 70%, rgba(6, 182, 212, .08) 0%, transparent 30%),
    radial-gradient(circle at 50% 50%, rgba(0, 152, 195, .06) 0%, transparent 40%);
  animation: intelGlowPulse 8s ease-in-out infinite;
}

@keyframes intelGlowPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .6;
  }
}

/* ─── Neural SVG Connections ─── */
.intel-neural-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* ─── Header ─── */
.intel-header {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 36px;
}

.intel-header-glow {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 60px;
  background: radial-gradient(ellipse, rgba(0, 152, 195, .18) 0%, transparent 70%);
  filter: blur(20px);
  animation: intelHeaderGlow 4s ease-in-out infinite;
}

@keyframes intelHeaderGlow {

  0%,
  100% {
    opacity: .6;
    transform: translateX(-50%) scale(1);
  }

  50% {
    opacity: .8;
    transform: translateX(-50%) scale(1.05);
  }
}

.intel-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.2;
}

.intel-title-pre {
  display: block;
  font-size: .55em;
  font-weight: 600;
  color: rgba(255, 255, 255, .45);
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 2px;
}

.intel-title-main {
  background: linear-gradient(135deg,
      #a5b4fc 0%,
      #c4b5fd 25%,
      #f9a8d4 50%,
      #67e8f9 75%,
      #a5b4fc 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: intelTitleShimmer 6s ease-in-out infinite;
}

@keyframes intelTitleShimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.intel-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .50);
  letter-spacing: .01em;
}

/* ─── Cards Container ─── */
.intel-cards-container {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  max-width: 1320px;
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .intel-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .intel-cards-container {
    grid-template-columns: 1fr;
  }
}

/* ─── Individual Cards ─── */
.intel-card {
  position: relative;
  padding: 24px;
  border-radius: 24px;
  background: rgba(15, 23, 42, .70);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overflow: hidden;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.intel-card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 26px;
  background: conic-gradient(from 0deg,
      var(--card-c1, #0098c3) 0deg,
      var(--card-c2, #69266f) 90deg,
      var(--card-c3, #06b6d4) 180deg,
      var(--card-c4, #10b981) 270deg,
      var(--card-c1, #0098c3) 360deg);
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -2;
  animation: intelCardGlowRotate 8s linear infinite;
}

@keyframes intelCardGlowRotate {
  to {
    filter: hue-rotate(360deg);
  }
}

.intel-card-border {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .08);
  pointer-events: none;
  transition: border-color .4s ease;
}

.intel-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .03) 45%,
      rgba(255, 255, 255, .08) 50%,
      rgba(255, 255, 255, .03) 55%,
      transparent 100%);
  transform: skewX(-20deg);
  animation: intelCardShine 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes intelCardShine {

  0%,
  100% {
    left: -100%;
  }

  50% {
    left: 100%;
  }
}

.intel-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .50),
    0 0 0 1px rgba(255, 255, 255, .10);
}

.intel-card:hover .intel-card-glow {
  opacity: .35;
}

.intel-card:hover .intel-card-border {
  border-color: rgba(255, 255, 255, .15);
}

/* Card color variants */
.intel-card[data-intel="rag"] {
  --card-c1: #69266f;
  --card-c2: #ec4899;
  --card-c3: #a855f7;
  --card-c4: #c084fc;
}

.intel-card[data-intel="scoring"] {
  --card-c1: #f59e0b;
  --card-c2: #ef4444;
  --card-c3: #f97316;
  --card-c4: #eab308;
}

.intel-card[data-intel="compliance"] {
  --card-c1: #10b981;
  --card-c2: #06b6d4;
  --card-c3: #14b8a6;
  --card-c4: #22c55e;
}

.intel-card[data-intel="delivery"] {
  --card-c1: #06b6d4;
  --card-c2: #0098c3;
  --card-c3: #0ea5e9;
  --card-c4: #3b82f6;
}

/* ─── Card Header ─── */
.intel-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.intel-icon-orb {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(30, 41, 59, .90), rgba(15, 23, 42, 1));
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .08) inset,
    0 8px 24px rgba(0, 0, 0, .40);
}

.intel-icon-orb.rag {
  border: 2px solid rgba(105, 38, 111, .50);
  box-shadow: 0 0 30px rgba(105, 38, 111, .30), 0 8px 24px rgba(0, 0, 0, .40);
}

.intel-icon-orb.scoring {
  border: 2px solid rgba(245, 158, 11, .50);
  box-shadow: 0 0 30px rgba(245, 158, 11, .30), 0 8px 24px rgba(0, 0, 0, .40);
}

.intel-icon-orb.compliance {
  border: 2px solid rgba(16, 185, 129, .50);
  box-shadow: 0 0 30px rgba(16, 185, 129, .30), 0 8px 24px rgba(0, 0, 0, .40);
}

.intel-icon-orb.delivery {
  border: 2px solid rgba(6, 182, 212, .50);
  box-shadow: 0 0 30px rgba(6, 182, 212, .30), 0 8px 24px rgba(0, 0, 0, .40);
}

.intel-icon-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, .20);
  animation: intelIconRingSpin 12s linear infinite;
}

.intel-icon-ring.r2 {
  inset: -12px;
  border-color: rgba(255, 255, 255, .10);
  animation-duration: 20s;
  animation-direction: reverse;
}

@keyframes intelIconRingSpin {
  to {
    transform: rotate(360deg);
  }
}

.intel-icon-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--lf-success);
  animation: intelIconPulse 2s ease-out infinite;
}

@keyframes intelIconPulse {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

.intel-icon-orbit {
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px dashed rgba(6, 182, 212, .30);
  animation: intelIconRingSpin 8s linear infinite;
}

.intel-orbit-dot {
  position: absolute;
  top: 50%;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-cyan);
  box-shadow: 0 0 12px rgba(6, 182, 212, .80);
  transform: translateY(-50%);
}

.intel-icon-emoji {
  font-size: 22px;
  z-index: 2;
}

.intel-card-title {
  font-size: 16px;
  font-weight: 900;
  color: #f8fafc;
  margin: 0;
  letter-spacing: -.01em;
  text-transform: none;
}

/* ─── Card Body ─── */
.intel-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.intel-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.intel-label {
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  flex-shrink: 0;
}

.intel-value {
  font-size: 11px;
  color: rgba(255, 255, 255, .80);
  text-align: right;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.intel-value.highlight {
  color: #a5b4fc;
  font-weight: 600;
}

.intel-tech {
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 152, 195, .15);
  font-size: 10px;
  font-weight: 600;
}

.intel-tech.highlight {
  background: linear-gradient(135deg, rgba(105, 38, 111, .25), rgba(0, 152, 195, .25));
  color: #c4b5fd;
}

.intel-arrow {
  color: rgba(255, 255, 255, .30);
  font-size: 12px;
}

.intel-code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(30, 41, 59, .80);
  color: #67e8f9;
}

.intel-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(245, 158, 11, .20);
  color: #fcd34d;
}

/* ─── Scoring Bars (Apple-style) ─── */
.intel-scoring-body {
  gap: 8px;
}

.intel-score-bar {
  display: grid;
  grid-template-columns: 60px 1fr 36px;
  align-items: center;
  gap: 10px;
}

.intel-score-label {
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
}

.intel-score-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.intel-score-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--bar-pct, 50%);
  border-radius: 3px;
  background: linear-gradient(90deg,
      hsl(var(--bar-hue, 240), 80%, 65%) 0%,
      hsl(calc(var(--bar-hue, 240) + 30), 85%, 70%) 100%);
  box-shadow: 0 0 12px hsla(var(--bar-hue, 240), 80%, 60%, .50);
  animation: intelBarFill 1.5s ease-out forwards;
  transform-origin: left;
}

@keyframes intelBarFill {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.intel-score-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 20px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .40));
  animation: intelBarGlow 2s ease-in-out infinite;
  animation-delay: calc(var(--bar-pct, 50%) * 0.01s);
}

@keyframes intelBarGlow {

  0%,
  100% {
    opacity: 0;
    transform: translateX(-100%);
  }

  50% {
    opacity: 1;
    transform: translateX(0);
  }
}

.intel-score-pct {
  font-size: 10px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, .80);
  text-align: right;
}

/* ─── Compliance Checks (Apple-style) ─── */
.intel-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  animation: intelCheckFadeIn .6s ease-out backwards;
}

.intel-check-item:nth-child(1) {
  animation-delay: .1s;
}

.intel-check-item:nth-child(2) {
  animation-delay: .2s;
}

.intel-check-item:nth-child(3) {
  animation-delay: .3s;
}

.intel-check-item:nth-child(4) {
  animation-delay: .4s;
}

.intel-check-item:nth-child(5) {
  animation-delay: .5s;
}

@keyframes intelCheckFadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.intel-check-orb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(16, 185, 129, .25), rgba(6, 182, 212, .20));
  border: 1.5px solid rgba(16, 185, 129, .50);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(16, 185, 129, .35);
  animation: intelCheckPulse 3s ease-in-out infinite;
}

@keyframes intelCheckPulse {

  0%,
  100% {
    box-shadow: 0 0 16px rgba(16, 185, 129, .35);
  }

  50% {
    box-shadow: 0 0 24px rgba(16, 185, 129, .55);
  }
}

.intel-check-orb svg {
  width: 12px;
  height: 12px;
  color: var(--lf-success);
}

.intel-check-text {
  font-size: 11px;
  color: rgba(255, 255, 255, .70);
}

/* ─── Card Equation ─── */
.intel-card-equation {
  position: relative;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  text-align: center;
}

.intel-eq-glow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--card-c1, #0098c3), transparent);
  opacity: .50;
}

.intel-eq-text {
  font-size: 12px;
  font-family: 'Times New Roman', 'Georgia', serif;
  font-style: italic;
  color: rgba(200, 180, 255, .80);
  text-shadow: 0 0 20px rgba(105, 38, 111, .50);
  letter-spacing: .03em;
}

/* ─── Vector Visualization (RAG card) ─── */
.intel-vector-viz {
  position: absolute;
  bottom: 60px;
  right: 10px;
  width: 60px;
  height: 60px;
  opacity: .30;
  pointer-events: none;
}

.intel-vector-dot {
  position: absolute;
  left: var(--vx, 50%);
  top: var(--vy, 50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #c4b5fd;
  box-shadow: 0 0 8px rgba(196, 181, 253, .80);
  animation: intelVectorPulse 2s ease-in-out infinite;
  animation-delay: calc(var(--vx) * 0.02s);
}

@keyframes intelVectorPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .6;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

/* ─── Delivery Pulses ─── */
.intel-delivery-pulses {
  position: absolute;
  bottom: 50px;
  right: 15px;
  width: 50px;
  height: 50px;
  pointer-events: none;
}

.intel-pulse-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(6, 182, 212, .40);
  animation: intelPulseRing 3s ease-out infinite;
}

.intel-pulse-ring.r2 {
  animation-delay: 1s;
}

.intel-pulse-ring.r3 {
  animation-delay: 2s;
}

@keyframes intelPulseRing {
  0% {
    transform: scale(.5);
    opacity: .8;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* ─── Floating Equations ─── */
.intel-floating-eq {
  position: absolute;
  left: var(--fx, 50%);
  top: var(--fy, 50%);
  font-size: 11px;
  font-family: 'Times New Roman', serif;
  font-style: italic;
  color: rgba(167, 139, 250, .35);
  text-shadow: 0 0 15px rgba(105, 38, 111, .25);
  pointer-events: none;
  animation: intelFloatEq 12s ease-in-out infinite;
  white-space: nowrap;
}

.intel-floating-eq:nth-child(odd) {
  animation-delay: -3s;
}

.intel-floating-eq:nth-child(even) {
  animation-delay: -6s;
}

@keyframes intelFloatEq {

  0%,
  100% {
    opacity: .25;
    transform: translateY(0);
  }

  50% {
    opacity: .45;
    transform: translateY(-8px);
  }
}

/* Neural edge flow animation */
@keyframes intelEdgeFlow {
  0% {
    stroke-dashoffset: 48;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

/* Particle float animation */
@keyframes intelParticleFloat {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: var(--p-opacity, .3);
  }

  25% {
    transform: translateY(-20px) translateX(10px);
    opacity: calc(var(--p-opacity, .3) * 1.3);
  }

  50% {
    transform: translateY(-30px) translateX(-5px);
    opacity: var(--p-opacity, .3);
  }

  75% {
    transform: translateY(-15px) translateX(-10px);
    opacity: calc(var(--p-opacity, .3) * 1.2);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   EIGENLEADS ADVANTAGE
   ═══════════════════════════════════════════════════════════════════════ */
.adv-hero {
  position: relative;
  z-index: 25;
  padding: 48px 24px 56px;
  overflow: hidden;
}

/* Background layers */
.adv-bg-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.adv-bg-gradient {
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(16, 185, 129, .12) 0%, transparent 60%),
    radial-gradient(ellipse 100% 60% at 20% 0%, rgba(0, 152, 195, .10) 0%, transparent 50%),
    radial-gradient(ellipse 100% 60% at 80% 0%, rgba(245, 158, 11, .08) 0%, transparent 50%),
    linear-gradient(180deg, rgba(10, 15, 30, 1) 0%, rgba(15, 23, 42, .95) 100%);
}

.adv-bg-mesh {
  background-image:
    linear-gradient(rgba(16, 185, 129, .02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 185, 129, .02) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 20%, transparent 70%);
  animation: advMeshDrift 25s linear infinite;
}

@keyframes advMeshDrift {
  to {
    background-position: 50px 50px;
  }
}

.adv-bg-glow {
  background:
    radial-gradient(circle at 20% 80%, rgba(16, 185, 129, .06) 0%, transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(245, 158, 11, .06) 0%, transparent 30%);
  animation: advGlowPulse 10s ease-in-out infinite;
}

@keyframes advGlowPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: .5;
  }
}

/* Header */
.adv-header {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-bottom: 36px;
}

.adv-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.3;
}

.adv-title-pre {
  color: rgba(255, 255, 255, .50);
  font-weight: 600;
}

.adv-title-main {
  background: linear-gradient(135deg, #a5b4fc 0%, #6ee7b7 50%, #fcd34d 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: advTitleShimmer 5s ease-in-out infinite;
  margin: 0 6px;
}

@keyframes advTitleShimmer {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

.adv-title-post {
  color: #f8fafc;
}

.adv-subtitle {
  margin: 6px 0 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .50);
}

/* Cards Grid */
.adv-cards-grid {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .adv-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .adv-cards-grid {
    grid-template-columns: 1fr;
    max-width: 320px;
  }
}

/* Individual Cards */
.adv-card {
  position: relative;
  border-radius: 20px;
  background: rgba(15, 23, 42, .70);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all .4s cubic-bezier(.4, 0, .2, 1);
}

.adv-card-glow {
  position: absolute;
  inset: -2px;
  border-radius: 22px;
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -2;
}

.adv-card[data-adv="quality"] .adv-card-glow {
  background: conic-gradient(from 0deg, #ef4444, #f97316, #ef4444);
}

.adv-card[data-adv="territory"] .adv-card-glow {
  background: conic-gradient(from 90deg, #eab308, #f59e0b, #eab308);
}

.adv-card[data-adv="compliance"] .adv-card-glow {
  background: conic-gradient(from 180deg, #3b82f6, #0098c3, #3b82f6);
}

.adv-card[data-adv="scoring"] .adv-card-glow {
  background: conic-gradient(from 270deg, #10b981, #22c55e, #10b981);
}

.adv-card-border {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, .08);
  pointer-events: none;
  transition: border-color .4s ease;
}

/* Animated border cascade */
.adv-card[data-adv="quality"] .adv-card-border {
  border-color: rgba(239, 68, 68, .50);
  box-shadow: 0 0 20px rgba(239, 68, 68, .20);
  animation: advBorderPulse 4s ease-in-out infinite;
}

.adv-card[data-adv="territory"] .adv-card-border {
  border-color: rgba(234, 179, 8, .50);
  box-shadow: 0 0 20px rgba(234, 179, 8, .20);
  animation: advBorderPulse 4s ease-in-out infinite .5s;
}

.adv-card[data-adv="compliance"] .adv-card-border {
  border-color: rgba(59, 130, 246, .50);
  box-shadow: 0 0 20px rgba(59, 130, 246, .20);
  animation: advBorderPulse 4s ease-in-out infinite 1s;
}

.adv-card[data-adv="scoring"] .adv-card-border {
  border-color: rgba(16, 185, 129, .50);
  box-shadow: 0 0 20px rgba(16, 185, 129, .20);
  animation: advBorderPulse 4s ease-in-out infinite 1.5s;
}

@keyframes advBorderPulse {

  0%,
  100% {
    opacity: .6;
  }

  50% {
    opacity: 1;
  }
}

.adv-card-shine {
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 255, 255, .02) 45%,
      rgba(255, 255, 255, .06) 50%,
      rgba(255, 255, 255, .02) 55%,
      transparent 100%);
  transform: skewX(-20deg);
  animation: advCardShine 8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes advCardShine {

  0%,
  100% {
    left: -100%;
  }

  50% {
    left: 100%;
  }
}

.adv-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}

.adv-card:hover .adv-card-glow {
  opacity: .30;
}

/* Card Visual Area */
.adv-card-visual {
  flex: 1;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
}

/* Card Footer */
.adv-card-footer {
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, .06);
  background: rgba(0, 0, 0, .20);
}

.adv-icon-orb {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .90), rgba(15, 23, 42, 1));
  box-shadow: 0 4px 12px rgba(0, 0, 0, .30);
}

.adv-icon-orb.quality {
  border: 2px solid rgba(239, 68, 68, .50);
}

.adv-icon-orb.territory {
  border: 2px solid rgba(234, 179, 8, .50);
}

.adv-icon-orb.compliance {
  border: 2px solid rgba(59, 130, 246, .50);
}

.adv-icon-orb.scoring {
  border: 2px solid rgba(16, 185, 129, .50);
}

.adv-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
  text-transform: none;
}

/* ─── Quality Visualization ─── */
.adv-quality-viz {
  width: 100%;
}

.adv-quality-funnel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.adv-funnel-stage {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.adv-funnel-stage.top {
  opacity: .7;
}

.adv-funnel-blob {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  animation: advBlobFloat 3s ease-in-out infinite;
}

.adv-funnel-blob.bad {
  background: rgba(239, 68, 68, .50);
  border: 1px solid rgba(239, 68, 68, .60);
}

.adv-funnel-blob.good {
  background: rgba(16, 185, 129, .50);
  border: 1px solid rgba(16, 185, 129, .60);
}

.adv-funnel-blob:nth-child(odd) {
  animation-delay: -.5s;
}

.adv-funnel-blob:nth-child(even) {
  animation-delay: -1s;
}

@keyframes advBlobFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

.adv-funnel-gate {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.adv-gate-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, .50), transparent);
}

.adv-gate-label {
  font-size: 8px;
  font-weight: 800;
  color: var(--lf-success);
  letter-spacing: .08em;
  padding: 2px 8px;
  border: 1px solid rgba(16, 185, 129, .40);
  border-radius: 10px;
  background: rgba(16, 185, 129, .10);
}

.adv-verified-orb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(16, 185, 129, .25), rgba(6, 182, 212, .20));
  border: 1.5px solid rgba(16, 185, 129, .50);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: advVerifiedPulse 2s ease-in-out infinite;
}

.adv-verified-orb svg {
  width: 12px;
  height: 12px;
  color: var(--lf-success);
}

.adv-verified-orb:nth-child(2) {
  animation-delay: .3s;
}

.adv-verified-orb:nth-child(3) {
  animation-delay: .6s;
}

@keyframes advVerifiedPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 8px rgba(16, 185, 129, .30);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 16px rgba(16, 185, 129, .50);
  }
}

/* ─── Territory Visualization ─── */
.adv-territory-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.adv-radar {
  position: relative;
  width: 100px;
  height: 100px;
}

.adv-radar-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(16, 185, 129, .20);
}

.adv-radar-ring.r1 {
  inset: 35%;
}

.adv-radar-ring.r2 {
  inset: 15%;
}

.adv-radar-ring.r3 {
  inset: 0;
}

.adv-radar-sweep {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(16, 185, 129, .25) 30deg, transparent 60deg);
  animation: advRadarSweep 3s linear infinite;
}

@keyframes advRadarSweep {
  to {
    transform: rotate(360deg);
  }
}

.adv-radar-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--lf-success);
  box-shadow: 0 0 12px rgba(16, 185, 129, .60);
}

.adv-radar-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--lf-success);
  animation: advRadarPulse 2s ease-out infinite;
}

@keyframes advRadarPulse {
  0% {
    transform: scale(1);
    opacity: .8;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.adv-radar-blip {
  position: absolute;
  left: var(--bx, 50%);
  top: var(--by, 50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-success);
  box-shadow: 0 0 8px rgba(16, 185, 129, .60);
  animation: advBlipPulse 1.5s ease-in-out infinite;
}

.adv-radar-blip.out {
  background: rgba(239, 68, 68, .60);
  box-shadow: 0 0 8px rgba(239, 68, 68, .40);
}

.adv-radar-blip:nth-child(odd) {
  animation-delay: -.3s;
}

@keyframes advBlipPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .8;
  }

  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

.adv-territory-legend {
  display: flex;
  gap: 12px;
  font-size: 9px;
}

.adv-legend-in {
  color: var(--lf-success);
}

.adv-legend-out {
  color: rgba(239, 68, 68, .70);
}

/* ─── Compliance Visualization ─── */
.adv-compliance-viz {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.adv-scan-subject {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adv-avatar {
  position: relative;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 152, 195, .20);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.adv-avatar-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px dashed rgba(0, 152, 195, .40);
  animation: advAvatarRing 4s linear infinite;
}

@keyframes advAvatarRing {
  to {
    transform: rotate(360deg);
  }
}

.adv-subject-name {
  font-size: 11px;
  font-weight: 700;
  color: #f8fafc;
}

.adv-scan-beam {
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, .60), transparent);
  position: relative;
  overflow: hidden;
}

.adv-scan-beam::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .80), transparent);
  animation: advScanBeam 2s ease-in-out infinite;
}

@keyframes advScanBeam {
  0% {
    left: -50%;
  }

  100% {
    left: 100%;
  }
}

.adv-scan-checks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.adv-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: rgba(255, 255, 255, .70);
  animation: advCheckFade .5s ease-out backwards;
}

.adv-check-row:nth-child(1) {
  animation-delay: .2s;
}

.adv-check-row:nth-child(2) {
  animation-delay: .4s;
}

.adv-check-row:nth-child(3) {
  animation-delay: .6s;
}

@keyframes advCheckFade {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.adv-check-orb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(16, 185, 129, .25), rgba(6, 182, 212, .20));
  border: 1px solid rgba(16, 185, 129, .50);
  display: flex;
  align-items: center;
  justify-content: center;
}

.adv-check-orb svg {
  width: 10px;
  height: 10px;
  color: var(--lf-success);
}

/* ─── Scoring Visualization ─── */
.adv-scoring-viz {
  width: 100%;
}

.adv-lead-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adv-lead-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  animation: advLeadSlide .6s ease-out backwards;
}

.adv-lead-row.top {
  animation-delay: .1s;
}

.adv-lead-row.mid {
  animation-delay: .2s;
}

.adv-lead-row.low {
  animation-delay: .3s;
}

@keyframes advLeadSlide {
  from {
    opacity: 0;
    transform: translateX(20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.adv-lead-rank {
  font-size: 14px;
  opacity: .7;
}

.adv-lead-name {
  flex: 1;
  font-size: 11px;
  color: rgba(255, 255, 255, .80);
}

.adv-lead-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(107, 114, 128, .30);
  color: rgba(255, 255, 255, .60);
}

.adv-lead-badge.hot {
  background: linear-gradient(135deg, rgba(16, 185, 129, .30), rgba(6, 182, 212, .25));
  color: var(--lf-success);
  border: 1px solid rgba(16, 185, 129, .40);
  box-shadow: 0 0 12px rgba(16, 185, 129, .25);
}

.adv-lead-badge.warm {
  background: rgba(245, 158, 11, .20);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, .40);
}

/* Neural Graph Section */
.lunflow-graph-section {
  padding: 24px;
}

.lunflow-graph-container {
  position: relative;
  width: 100%;
  max-width: 1100px;
  height: 280px;
  margin: 0 auto;
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(15, 23, 42, .70), rgba(2, 6, 23, .80));
  border: 1px solid rgba(0, 152, 195, .20);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .03) inset,
    0 40px 100px rgba(0, 0, 0, .50),
    0 0 80px rgba(0, 152, 195, .10);
}

.lunflow-graph-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.lunflow-graph-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.lunflow-graph-node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transform: translate(-50%, -50%);
  transition: all .3s ease;
}

.lunflow-graph-node-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(30, 41, 59, .95), rgba(15, 23, 42, 1));
  border: 2px solid rgba(0, 152, 195, .40);
  font-size: 18px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 8px 32px rgba(0, 0, 0, .40);
  transition: all .3s ease;
}

.lunflow-graph-node.is-active .lunflow-graph-node-circle {
  border-color: var(--lf-primary);
  box-shadow:
    0 0 30px rgba(0, 152, 195, .50),
    0 0 60px rgba(105, 38, 111, .25);
  transform: scale(1.15);
}

.lunflow-graph-node.is-checkpoint .lunflow-graph-node-circle {
  border-color: var(--lf-success);
  background: linear-gradient(145deg, rgba(16, 185, 129, .15), rgba(6, 182, 212, .10));
}

.lunflow-graph-node.is-active.is-checkpoint .lunflow-graph-node-circle {
  box-shadow:
    0 0 30px rgba(16, 185, 129, .50),
    0 0 60px rgba(52, 211, 153, .25);
}

.lunflow-graph-node-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(255, 255, 255, .45);
  text-align: center;
  max-width: 70px;
  line-height: 1.2;
  transition: color .3s ease;
}

.lunflow-graph-node.is-active .lunflow-graph-node-label {
  color: #a5b4fc;
}

/* Brokers Grid */
.lunflow-brokers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
}

.lunflow-broker-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .60), rgba(15, 23, 42, .70));
  border: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}

.lunflow-broker-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
}

.lunflow-broker-card:hover::before {
  transform: translateX(100%);
}

.lunflow-broker-card:hover {
  border-color: rgba(0, 152, 195, .40);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .30);
}

.lunflow-broker-card.is-active {
  border-color: var(--lf-success);
  box-shadow: 0 0 30px rgba(16, 185, 129, .20);
}

.lunflow-broker-icon {
  font-size: 22px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, .05);
}

.lunflow-broker-info {
  flex: 1;
  min-width: 0;
}

.lunflow-broker-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #f8fafc;
}

.lunflow-broker-type {
  display: block;
  font-size: 10px;
  color: rgba(255, 255, 255, .45);
  margin-top: 2px;
}

.lunflow-broker-pulse {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 152, 195, .60);
  animation: lunflowBrokerPulse 2s ease-in-out infinite;
}

.lunflow-broker-card.is-active .lunflow-broker-pulse {
  background: var(--lf-success);
}

@keyframes lunflowBrokerPulse {

  0%,
  100% {
    opacity: .4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Data tier colors */
.lunflow-broker-card[data-tier="b2b"] .lunflow-broker-icon {
  background: rgba(0, 152, 195, .15);
}

.lunflow-broker-card[data-tier="b2c"] .lunflow-broker-icon {
  background: rgba(16, 185, 129, .15);
}

.lunflow-broker-card[data-tier="open"] .lunflow-broker-icon {
  background: rgba(6, 182, 212, .15);
}

.lunflow-broker-card[data-tier="verify"] .lunflow-broker-icon {
  background: rgba(245, 158, 11, .15);
}

/* RAG Section */
.lunflow-rag-visual {
  display: flex;
  align-items: stretch;
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.lunflow-rag-layer {
  flex: 1;
  min-width: 200px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .60), rgba(15, 23, 42, .70));
  border: 1px solid rgba(105, 38, 111, .20);
  position: relative;
  overflow: hidden;
}

.lunflow-rag-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lf-secondary), var(--lf-rose));
  opacity: .6;
}

.lunflow-rag-layer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  color: #e0e7ff;
}

.lunflow-rag-icon {
  font-size: 16px;
}

.lunflow-rag-label {
  margin-top: 12px;
  font-size: 10px;
  color: rgba(255, 255, 255, .40);
  text-align: center;
}

.lunflow-rag-vectors {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  min-height: 60px;
}

.lunflow-vector-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-secondary);
  opacity: .6;
  animation: lunflowVectorPulse 1.5s ease-in-out infinite;
  animation-delay: var(--v-delay, 0s);
}

@keyframes lunflowVectorPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .4;
  }

  50% {
    transform: scale(1.5);
    opacity: .9;
  }
}

.lunflow-rag-flow {
  display: flex;
  align-items: center;
  padding: 0 8px;
}

.lunflow-rag-arrow {
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, rgba(105, 38, 111, .50), rgba(0, 152, 195, .80));
  position: relative;
}

.lunflow-rag-arrow::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: rgba(0, 152, 195, .80);
}

.lunflow-rag-corpora {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lunflow-corpus-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06);
  transition: all .3s ease;
}

.lunflow-corpus-item:hover {
  border-color: rgba(105, 38, 111, .40);
  background: rgba(105, 38, 111, .08);
}

.lunflow-corpus-icon {
  font-size: 16px;
}

.lunflow-corpus-name {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: #c4b5fd;
}

.lunflow-corpus-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, .40);
  margin-left: auto;
}

.lunflow-rag-output {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lunflow-retrieval-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(16, 185, 129, .08);
  border: 1px solid rgba(16, 185, 129, .20);
}

.lunflow-result-score {
  font-size: 13px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: #6ee7b7;
}

.lunflow-result-text {
  font-size: 11px;
  color: rgba(255, 255, 255, .60);
}

/* Scoring Section */
.lunflow-scoring-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
  max-width: 800px;
  margin: 0 auto;
}

.lunflow-score-factor {
  padding: 16px;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .60), rgba(15, 23, 42, .70));
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all .3s ease;
}

.lunflow-score-factor:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 152, 195, .30);
}

.lunflow-factor-bar {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-bottom: 12px;
}

.lunflow-factor-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--factor-color, var(--lf-primary));
  width: 0;
  animation: lunflowFactorFill 2s ease-out forwards;
  animation-delay: var(--factor-delay, 0s);
}

@keyframes lunflowFactorFill {
  to {
    width: 100%;
  }
}

.lunflow-factor-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.lunflow-factor-name {
  font-size: 12px;
  font-weight: 700;
  color: #f8fafc;
}

.lunflow-factor-weight {
  font-size: 11px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(255, 255, 255, .50);
}

.lunflow-factor-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, .40);
}

/* Compliance Section */
.lunflow-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.lunflow-compliance-card {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .60), rgba(15, 23, 42, .70));
  border: 1px solid rgba(16, 185, 129, .20);
  position: relative;
  overflow: hidden;
  transition: all .3s ease;
}

.lunflow-compliance-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lf-success), var(--lf-cyan));
}

.lunflow-compliance-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .30);
}

.lunflow-gate-icon {
  font-size: 28px;
  margin-bottom: 12px;
}

.lunflow-gate-title {
  font-size: 14px;
  font-weight: 800;
  color: #f8fafc;
  margin-bottom: 12px;
}

.lunflow-gate-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}

.lunflow-gate-items span {
  font-size: 11px;
  color: rgba(255, 255, 255, .55);
  padding-left: 14px;
  position: relative;
}

.lunflow-gate-items span::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--lf-success);
}

.lunflow-gate-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .60);
}

.lunflow-gate-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lf-success);
  animation: lunflowGatePulse 1.5s ease-in-out infinite;
}

@keyframes lunflowGatePulse {

  0%,
  100% {
    opacity: .5;
  }

  50% {
    opacity: 1;
    box-shadow: 0 0 12px rgba(16, 185, 129, .60);
  }
}

/* Delivery Section */
.lunflow-delivery-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px 0;
}

.lunflow-delivery-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px;
  min-width: 110px;
}

.lunflow-delivery-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(30, 41, 59, .90), rgba(15, 23, 42, 1));
  border: 2px solid rgba(6, 182, 212, .30);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 12px 36px rgba(0, 0, 0, .35);
  transition: all .3s ease;
}

.lunflow-delivery-stage:hover .lunflow-delivery-icon {
  border-color: var(--lf-cyan);
  box-shadow:
    0 0 30px rgba(6, 182, 212, .40),
    0 12px 36px rgba(0, 0, 0, .35);
  transform: scale(1.08);
}

.lunflow-delivery-title {
  font-size: 12px;
  font-weight: 800;
  color: #f8fafc;
}

.lunflow-delivery-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, .45);
  text-align: center;
}

.lunflow-delivery-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  max-width: 120px;
}

.lunflow-artifact {
  font-size: 9px;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .60);
}

.lunflow-artifact[data-type="json"] {
  color: #fcd34d;
}

.lunflow-artifact[data-type="csv"] {
  color: #6ee7b7;
}

.lunflow-artifact[data-type="pdf"] {
  color: #f87171;
}

.lunflow-artifact[data-type="parquet"] {
  color: #a5b4fc;
}

.lunflow-delivery-connector {
  width: 48px;
  height: 4px;
  position: relative;
  display: flex;
  align-items: center;
}

.lunflow-connector-line {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, rgba(6, 182, 212, .30), rgba(0, 152, 195, .50));
}

.lunflow-connector-spark {
  position: absolute;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--lf-cyan), transparent);
  animation: lunflowConnectorSpark 1.8s linear infinite;
}

@keyframes lunflowConnectorSpark {
  0% {
    left: -12px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: calc(100% + 12px);
    opacity: 0;
  }
}

/* Responsive adjustments for v2 */
@media (max-width: 768px) {
  .lunflow-rag-visual {
    flex-direction: column;
  }

  .lunflow-rag-flow {
    transform: rotate(90deg);
    padding: 12px 0;
  }

  .lunflow-delivery-pipeline {
    flex-direction: column;
    gap: 8px;
  }

  .lunflow-delivery-connector {
    width: 4px;
    height: 32px;
    flex-direction: column;
  }

  .lunflow-connector-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(6, 182, 212, .30), rgba(0, 152, 195, .50));
  }

  .lunflow-connector-spark {
    width: 4px;
    height: 12px;
    animation: lunflowConnectorSparkV 1.8s linear infinite;
  }

  @keyframes lunflowConnectorSparkV {
    0% {
      top: -12px;
      opacity: 0;
    }

    10% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    100% {
      top: calc(100% + 12px);
      opacity: 0;
    }
  }
}

/* ========================================
   PACK WIZARD (enterprise-grade + animated)
   ======================================== */
.packwiz-shell {
  max-width: 980px;
  margin: 0 auto;
}

/* ── Connected stepper ── */
.packwiz-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0 0 16px 0;
  padding: 0;
}

.packwiz-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.packwiz-step:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.packwiz-step.is-active {
  color: #fff;
  background: var(--gradient-primary);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 6px 20px rgba(0, 152, 195, .18);
}

.packwiz-step.is-done {
  color: var(--accent-light, var(--accent));
}

.packwiz-step.is-warn {
  border-color: rgba(245, 158, 11, .28);
  background: rgba(245, 158, 11, .08);
  color: #fbbf24;
}

.packwiz-step.is-blocked {
  border-color: rgba(239, 68, 68, .35);
  background: rgba(239, 68, 68, .10);
  color: #fca5a5;
}

.packwiz-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  background: color-mix(in srgb, var(--card-hover) 70%, transparent);
  border: 1.5px solid var(--border);
  flex-shrink: 0;
  transition: background .18s ease, border-color .18s ease;
  position: relative;
}

.packwiz-step.is-active .packwiz-step-dot {
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .3);
}

.packwiz-step.is-done .packwiz-step-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.packwiz-step.is-warn .packwiz-step-dot {
  border-color: rgba(245, 158, 11, .45);
  background: rgba(245, 158, 11, .16);
  color: #fbbf24;
}

.packwiz-step.is-blocked .packwiz-step-dot {
  border-color: rgba(239, 68, 68, .55);
  background: rgba(239, 68, 68, .18);
  color: #fca5a5;
}

.packwiz-step-num {
  display: inline;
}

.packwiz-step-check {
  display: none;
}

.packwiz-step.is-done .packwiz-step-num {
  display: none;
}

.packwiz-step.is-done .packwiz-step-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.packwiz-step-label {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* Connector lines between steps */
.packwiz-step-line {
  flex: 1;
  min-width: 12px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  position: relative;
  overflow: hidden;
}

.packwiz-step-line-fill {
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.packwiz-step-line.is-filled .packwiz-step-line-fill {
  transform: scaleX(1);
}

@media (max-width: 720px) {
  .packwiz-stepper {
    flex-wrap: wrap;
    gap: 4px;
  }

  .packwiz-step-line {
    display: none;
  }

  .packwiz-step {
    padding: 6px 10px;
  }

  .packwiz-step-label {
    font-size: 11px;
  }
}

/* ── Wizard card ── */
.packwiz-card {
  position: relative;
  overflow: hidden;
}

.packwiz-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(ellipse 70% 40% at 20% 0%, rgba(0, 152, 195, .18), transparent 60%),
    radial-gradient(ellipse 55% 38% at 90% 20%, rgba(16, 185, 129, .12), transparent 60%),
    radial-gradient(ellipse 50% 35% at 70% 100%, rgba(105, 38, 111, .12), transparent 60%);
  opacity: .65;
  pointer-events: none;
  filter: blur(10px);
}

.packwiz-card>.card-inner {
  position: relative;
}

.packwiz-panel {
  display: none;
}

.packwiz-panel.is-active {
  display: block;
}

.packwiz-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.packwiz-hicon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.packwiz-htitle {
  font-size: 14px;
  font-weight: 950;
  letter-spacing: -.01em;
}

.packwiz-hint {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Step indicator in footer */
.packwiz-step-indicator {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}

/* Target audience step (pack wizard) */
.aud-toggle {
  margin-top: 10px;
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
}

.aud-toggle-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.aud-toggle-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 152, 195, .22);
  background: rgba(0, 152, 195, .08);
}

.aud-toggle-btn input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.aud-toggle-btn.is-on {
  border-color: rgba(0, 152, 195, .38);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  box-shadow: 0 10px 28px rgba(0, 152, 195, .12);
}

.aud-toggle-ico {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}

.aud-toggle-btn.is-on .aud-toggle-ico {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .14);
}

.aud-toggle-btn span {
  font-weight: 950;
  letter-spacing: -.01em;
}

.aud-toggle-sub {
  margin-left: 2px;
  font-weight: 800;
  font-size: 11px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: -0.01em;
}

.aud-multi {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px;
  background: rgba(255, 255, 255, .02);
}

.aud-multi-hint {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 10px;
}

.aud-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 860px) {
  .aud-grid {
    grid-template-columns: 1fr;
  }
}

.aud-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  user-select: none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}

.aud-option:hover {
  transform: translateY(-1px);
  border-color: rgba(0, 152, 195, .22);
  background: rgba(0, 152, 195, .06);
}

.aud-option input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.aud-option-ico {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  background: rgba(255, 255, 255, .06);
  flex-shrink: 0;
}

.aud-option-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.aud-option-title {
  font-weight: 950;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.aud-option-sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.25;
}

[data-theme="light"] .aud-toggle-btn {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .aud-toggle-btn:hover {
  background: #e2e8f0;
  border-color: rgba(0, 152, 195, .28);
}

[data-theme="light"] .aud-multi {
  background: #ffffff;
}

[data-theme="light"] .aud-option {
  background: #f8fafc;
  border-color: #e2e8f0;
}

[data-theme="light"] .aud-option:hover {
  background: #eef2ff;
  border-color: rgba(0, 152, 195, .28);
}

/* ============================================================
   Demographic Filters (Pack Wizard Step 3) — metadata-driven grid
   ============================================================ */
.demo-filters {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Section grouping */
.demo-section {
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--card-hover) 30%, transparent);
}

.demo-section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.demo-section-ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent-light, var(--accent));
  flex-shrink: 0;
}

.demo-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Multi-column grids within sections */
.demo-filter-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px 14px;
}

.demo-filter-4col {
  grid-template-columns: repeat(4, 1fr);
}

.demo-filter-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}

@media (max-width: 900px) {
  .demo-filter-3col,
  .demo-filter-4col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 680px) {
  .demo-filter-2col,
  .demo-filter-3col,
  .demo-filter-4col {
    grid-template-columns: 1fr;
  }
}

.demo-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.demo-filter-group>label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.demo-filter-options {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.demo-filter-radio {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
}

.demo-filter-radio:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--card-hover));
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--text);
}

.demo-filter-radio input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.demo-filter-radio.is-selected {
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent-light);
}

.demo-filter-radio svg {
  width: 14px;
  height: 14px;
  opacity: .85;
}

.demo-filter-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.demo-filter-to {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  flex-shrink: 0;
}

.demo-filter-select {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  transition: all .15s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23818cf8' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 26px;
}

/* text/number inputs in filters don't need caret icon */
input.demo-filter-select {
  background-image: none;
  padding-right: 12px;
}

.demo-filter-select:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.demo-filter-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.demo-filter-select:disabled {
  opacity: .5;
  cursor: not-allowed;
  background-color: color-mix(in srgb, var(--panel) 80%, transparent);
}

.demo-filter-sub {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* Light theme overrides — design tokens only (no hardcoded hex) */
[data-theme="light"] .demo-section {
  background: color-mix(in srgb, var(--card-hover) 45%, var(--card));
  border-color: var(--border);
}

[data-theme="light"] .demo-filter-radio {
  background: color-mix(in srgb, var(--card-hover) 70%, var(--card));
  border-color: var(--border);
}

[data-theme="light"] .demo-filter-radio:hover {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

[data-theme="light"] .demo-filter-radio.is-selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 50%, transparent);
  color: var(--accent);
}

[data-theme="light"] .demo-filter-select {
  background-color: var(--card);
  border-color: var(--border);
}

[data-theme="light"] .demo-filter-select:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

[data-theme="light"] .demo-section-ico {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

[data-theme="light"] .packwiz-step-dot {
  background: #f1f5f9;
  border-color: #e2e8f0;
}

[data-theme="light"] .packwiz-step.is-warn {
  border-color: rgba(217, 119, 6, .28);
  background: rgba(251, 191, 36, .16);
  color: #92400e;
}

[data-theme="light"] .packwiz-step.is-blocked {
  border-color: rgba(220, 38, 38, .3);
  background: rgba(254, 226, 226, .75);
  color: #991b1b;
}

[data-theme="light"] .packwiz-step.is-warn .packwiz-step-dot {
  border-color: rgba(217, 119, 6, .35);
  background: rgba(251, 191, 36, .26);
  color: #92400e;
}

[data-theme="light"] .packwiz-step.is-blocked .packwiz-step-dot {
  border-color: rgba(220, 38, 38, .35);
  background: rgba(254, 202, 202, .6);
  color: #991b1b;
}

[data-theme="light"] .packwiz-step-line {
  background: #e2e8f0;
}

.packwiz-review {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  padding: 14px;
}

.packwiz-review-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

@media (max-width: 600px) {
  .packwiz-review-grid {
    grid-template-columns: 1fr;
  }
}

.packwiz-review-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  background: color-mix(in srgb, var(--card-hover) 45%, transparent);
}

.packwiz-review-k {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 5px;
}

.packwiz-review-v {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.packwiz-review-note {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 4px 0;
  margin-top: 4px;
}

.packwiz-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

/* Launch overlay */
.packwiz-launch {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(2, 6, 23, .58);
  backdrop-filter: blur(14px);
  z-index: 9999;
}

.packwiz-launch.show {
  display: flex;
}

.packwiz-launch-card {
  width: min(560px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(8, 10, 18, .80);
  box-shadow: 0 26px 90px rgba(0, 0, 0, .60);
  padding: 18px 18px;
  position: relative;
  overflow: hidden;
}

.packwiz-launch-aurora {
  position: absolute;
  inset: -40px;
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 152, 195, .28), transparent 50%),
    radial-gradient(circle at 80% 10%, rgba(105, 38, 111, .20), transparent 55%),
    radial-gradient(circle at 70% 90%, rgba(16, 185, 129, .14), transparent 55%);
  filter: blur(18px);
  opacity: .8;
  animation: packwizAurora 5.5s ease-in-out infinite;
}

@keyframes packwizAurora {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  50% {
    transform: translate3d(-10px, 6px, 0) scale(1.05);
  }
}

.packwiz-launch-title {
  position: relative;
  font-weight: 950;
  font-size: 18px;
  letter-spacing: -.02em;
}

.packwiz-launch-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
}

.packwiz-timeline {
  position: relative;
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.packwiz-tick {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .70);
  font-size: 12px;
  font-weight: 800;
}

.packwiz-tick.is-on {
  background: var(--gradient-primary);
  border-color: color-mix(in srgb, var(--accent) 55%, rgba(255, 255, 255, .12));
  color: #fff;
  box-shadow: 0 12px 30px rgba(0, 152, 195, .18);
}

.packwiz-tick.is-active {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 12px 34px rgba(0, 152, 195, .24);
}

@media (prefers-reduced-motion: reduce) {

  .packwiz-step,
  .packwiz-launch-aurora {
    animation: none !important;
    transition: none !important;
  }
}

/* ========================================
   Integration Cost Telemetry (Dashboard)
   ======================================== */
.ic-exec-strip .dash-metric {
  min-width: 0;
}

.ic-exec-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
}

.ic-exec-alert a {
  font-weight: 700;
}

.ic-exec-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ic-exec-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(72px, 1fr) 72px 44px;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}

.ic-exec-row:hover,
.ic-exec-row:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
  outline: none;
}

.ic-exec-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ic-exec-bar {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
  overflow: hidden;
}

.ic-exec-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  min-width: 4px;
}

.ic-exec-row.has-errors .ic-exec-bar > span {
  background: linear-gradient(90deg, var(--accent3), var(--accent4));
}

.ic-exec-cost {
  font-size: 13px;
  font-weight: 900;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}

.ic-exec-status {
  text-align: right;
}

.ic-exec-status .badge {
  min-width: 0;
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.2;
}

.ic-telemetry {
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 14px;
  align-items: start;
}

.ic-left {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ic-table-card {
  border-radius: 18px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow);
}

.ic-rank-table {
  width: 100%;
}

.ic-rank-table th,
.ic-rank-table td {
  vertical-align: middle;
}

.ic-rank-table tbody tr.ic-row {
  cursor: pointer;
}

.ic-provider-key {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.35;
  word-break: break-word;
}

.ic-provider-key code {
  font-size: 10px;
}

.ic-health-map {
  margin-top: 0;
}

.ic-chart-compact {
  height: 220px;
  margin-top: 10px;
}

@media (max-width: 980px) {
  .ic-telemetry {
    grid-template-columns: 1fr;
  }
}

.ic-chart-card {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(320px 220px at 12% 10%, rgba(0, 152, 195, .16), transparent 60%),
    radial-gradient(320px 220px at 90% 30%, rgba(16, 185, 129, .12), transparent 55%),
    rgba(255, 255, 255, .02);
  padding: 14px 14px 12px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .25);
}

.ic-chart-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ic-chart-title strong {
  font-size: 13px;
  font-weight: 950;
  letter-spacing: -.01em;
}

.ic-chart {
  height: 320px;
  margin-top: 10px;
}

.ic-chart-foot {
  margin-top: 8px;
  font-size: 11px;
}

.ic-detail {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .10);
  background:
    radial-gradient(260px 180px at 30% 0%, rgba(245, 158, 11, .12), transparent 55%),
    radial-gradient(260px 180px at 100% 40%, rgba(105, 38, 111, .12), transparent 55%),
    rgba(255, 255, 255, .02);
  padding: 14px 14px 12px;
  box-shadow: 0 18px 70px rgba(0, 0, 0, .20);
}

.ic-detail-title {
  font-size: 14px;
  font-weight: 1000;
  letter-spacing: -.02em;
  color: var(--text);
  word-break: break-word;
}

.ic-detail-kpis {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.ic-kpi {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(0, 0, 0, .14);
}

.ic-k {
  font-size: 11px;
  color: var(--muted);
}

.ic-v {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.ic-detail-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ic-detail-note {
  margin-top: 10px;
  font-size: 11px;
}

.ic-table {
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .01);
  padding: 10px 12px;
}

.ic-table-summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
  font-weight: 900;
}

.ic-row.is-selected {
  outline: 2px solid rgba(0, 152, 195, .35);
  outline-offset: -2px;
  background: linear-gradient(90deg, rgba(0, 152, 195, .12), rgba(16, 185, 129, .06));
}

/* ========================================
   EXECUTIVE POLISH - PREMIUM COMPONENTS
   ======================================== */

/* Icon spin animation for loaders */
.ti.spin {
  animation: execSpin 1s linear infinite;
}

@keyframes execSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   EXECUTIVE KPI CARDS
   ======================================== */
.exec-kpi {
  position: relative;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: linear-gradient(145deg, var(--card) 0%, color-mix(in srgb, var(--card) 92%, transparent) 100%);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: all .2s ease;
}

.exec-kpi::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(0, 152, 195, .12), transparent 70%);
  pointer-events: none;
}

.exec-kpi:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 152, 195, .25);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}

.exec-kpi.primary::before {
  background: radial-gradient(circle, rgba(0, 152, 195, .15), transparent 70%);
}

.exec-kpi.success::before {
  background: radial-gradient(circle, rgba(16, 185, 129, .15), transparent 70%);
}

.exec-kpi.warning::before {
  background: radial-gradient(circle, rgba(245, 158, 11, .15), transparent 70%);
}

.exec-kpi.danger::before {
  background: radial-gradient(circle, rgba(239, 68, 68, .15), transparent 70%);
}

.exec-kpi.info::before {
  background: radial-gradient(circle, rgba(6, 182, 212, .15), transparent 70%);
}

.exec-kpi-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.exec-kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0, 152, 195, .2), rgba(105, 38, 111, .15));
  border: 1px solid rgba(0, 152, 195, .2);
  color: var(--accent-light);
  font-size: 18px;
}

.exec-kpi.success .exec-kpi-icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, .2), rgba(6, 182, 212, .15));
  border-color: rgba(16, 185, 129, .25);
  color: var(--accent2-light);
}

.exec-kpi.warning .exec-kpi-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, .2), rgba(251, 191, 36, .15));
  border-color: rgba(245, 158, 11, .25);
  color: var(--accent3-light);
}

.exec-kpi.danger .exec-kpi-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, .2), rgba(248, 113, 113, .15));
  border-color: rgba(239, 68, 68, .25);
  color: #f87171;
}

.exec-kpi-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.exec-kpi-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.03em;
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.exec-kpi.success .exec-kpi-value {
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.exec-kpi.warning .exec-kpi-value {
  background: linear-gradient(135deg, var(--accent3), var(--accent3-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.exec-kpi.danger .exec-kpi-value {
  background: linear-gradient(135deg, var(--accent4), #f87171);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.exec-kpi-subtitle {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.exec-kpi-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--border);
  color: var(--muted);
}

.exec-kpi-trend.up {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .25);
  color: var(--accent2-light);
}

.exec-kpi-trend.down {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .25);
  color: #f87171;
}

.exec-kpi-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-light);
  transition: color .15s ease;
}

.exec-kpi-link:hover {
  color: var(--accent);
}

/* ========================================
   STAT PILLS
   ======================================== */
.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
}

.stat-pill-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
}

.stat-pill-value {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.stat-pill.success .stat-pill-value {
  color: var(--success);
}

.stat-pill.warning .stat-pill-value {
  color: var(--warn);
}

.stat-pill.danger .stat-pill-value {
  color: var(--danger);
}

/* ========================================
   EXECUTIVE PROGRESS BARS
   ======================================== */
.exec-progress {
  width: 100%;
}

.exec-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--muted);
}

.exec-progress-pct {
  font-weight: 700;
  color: var(--text);
}

.exec-progress-track {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
}

.exec-progress-bar {
  height: 100%;
  border-radius: 999px;
  background: var(--gradient-primary);
  box-shadow: 0 0 12px rgba(0, 152, 195, .3);
  transition: width .6s cubic-bezier(.4, 0, .2, 1);
}

.exec-progress-bar.success {
  background: var(--gradient-success);
  box-shadow: 0 0 12px rgba(16, 185, 129, .3);
}

.exec-progress-bar.warning {
  background: linear-gradient(90deg, var(--accent3), var(--accent3-light));
  box-shadow: 0 0 12px rgba(245, 158, 11, .3);
}

.exec-progress-bar.danger {
  background: linear-gradient(90deg, var(--accent4), #f87171);
  box-shadow: 0 0 12px rgba(239, 68, 68, .3);
}

.exec-progress.large .exec-progress-track {
  height: 12px;
}

.exec-progress.small .exec-progress-track {
  height: 4px;
}

/* ========================================
   CIRCULAR PROGRESS
   ======================================== */
.exec-circular-progress {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.exec-circular-progress svg {
  width: 100%;
  height: 100%;
}

.exec-circular-progress circle {
  fill: none;
}

.exec-circular-progress .track {
  stroke: rgba(255, 255, 255, .08);
}

.exec-circular-progress .bar {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1);
}

.exec-circular-progress.success .bar {
  stroke: var(--accent2);
}

.exec-circular-progress.warning .bar {
  stroke: var(--accent3);
}

.exec-circular-progress.danger .bar {
  stroke: var(--accent4);
}

.exec-circular-value {
  position: absolute;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.exec-circular-label {
  position: absolute;
  bottom: -4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--muted);
}

/* ========================================
   EXECUTIVE BADGES
   ======================================== */
.exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
}

.exec-badge i {
  font-size: 12px;
}

.exec-badge.small {
  padding: 3px 8px;
  font-size: 9px;
}

.exec-badge.small i {
  font-size: 10px;
}

.exec-badge.published,
.exec-badge.success,
.exec-badge.ok,
.exec-badge.delivered,
.exec-badge.done {
  background: rgba(16, 185, 129, .12);
  border-color: rgba(16, 185, 129, .25);
  color: var(--accent2-light);
}

.exec-badge.running,
.exec-badge.processing {
  background: rgba(0, 152, 195, .12);
  border-color: rgba(0, 152, 195, .25);
  color: var(--accent-light);
}

.exec-badge.pending,
.exec-badge.queued {
  background: rgba(245, 158, 11, .12);
  border-color: rgba(245, 158, 11, .25);
  color: var(--accent3-light);
}

.exec-badge.failed,
.exec-badge.error {
  background: rgba(239, 68, 68, .12);
  border-color: rgba(239, 68, 68, .25);
  color: #f87171;
}

.exec-badge.cancelled,
.exec-badge.canceled {
  background: rgba(255, 255, 255, .05);
  border-color: var(--border);
  color: var(--muted);
}

/* ========================================
   EMPTY STATES
   ======================================== */
.exec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.exec-empty-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, rgba(0, 152, 195, .12), rgba(105, 38, 111, .08));
  border: 1px solid rgba(0, 152, 195, .15);
  margin-bottom: 20px;
}

.exec-empty-icon i {
  font-size: 32px;
  color: var(--accent-light);
  opacity: .7;
}

.exec-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}

.exec-empty-desc {
  font-size: 13px;
  color: var(--muted);
  max-width: 320px;
  margin-bottom: 20px;
}

/* ========================================
   DATA CARDS
   ======================================== */
.exec-data-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  overflow: hidden;
}

.exec-data-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent);
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

.exec-data-card-header i {
  font-size: 16px;
  color: var(--accent-light);
}

.exec-data-card-body {
  padding: 18px;
}

.exec-data-card-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, .01);
  font-size: 12px;
  color: var(--muted);
}

/* ========================================
   SPARKLINES (ECharts containers)
   ======================================== */
.exec-sparkline {
  width: 100%;
  min-height: 40px;
}

/* ========================================
   ENHANCED METRIC TILES (with icon support)
   ======================================== */
.dash-metric-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dash-metric-header i {
  font-size: 12px;
  color: inherit;
}

/* ========================================
   TABULATOR THEME OVERRIDES
   ======================================== */
.tabulator {
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.tabulator-header {
  background: linear-gradient(180deg, var(--surface-2), var(--card)) !important;
  border-bottom: 1px solid var(--border) !important;
}

.tabulator-header .tabulator-col {
  background: transparent !important;
  border-right: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
}

.tabulator-header .tabulator-col-content {
  padding: 12px 14px !important;
}

.tabulator-header .tabulator-col-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--muted) !important;
}

.tabulator-row {
  background: var(--card) !important;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent) !important;
  transition: background .14s ease !important;
}

.tabulator-row:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--card)) !important;
}

.tabulator-row.tabulator-selected {
  background: color-mix(in srgb, var(--accent) 12%, var(--card)) !important;
}

.tabulator-cell {
  padding: 12px 14px !important;
  border-right: 1px solid color-mix(in srgb, var(--border) 30%, transparent) !important;
  font-size: 13px !important;
  color: var(--text) !important;
}

.tabulator-footer {
  background: linear-gradient(180deg, var(--card), var(--surface-2)) !important;
  border-top: 1px solid var(--border) !important;
  padding: 10px 14px !important;
}

.tabulator-page {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  margin: 0 2px !important;
}

.tabulator-page:hover:not(.disabled) {
  background: var(--card-hover) !important;
  border-color: var(--accent) !important;
}

.tabulator-page.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #fff !important;
}

/* ========================================
   SORTABLEJS DRAG STYLING
   ======================================== */
.sortable-ghost {
  opacity: .4;
  background: color-mix(in srgb, var(--accent) 15%, var(--card)) !important;
  border: 2px dashed var(--accent) !important;
}

.sortable-chosen {
  box-shadow: 0 12px 40px rgba(0, 0, 0, .4) !important;
  transform: scale(1.02);
}

.sortable-drag {
  opacity: 1 !important;
}

/* ========================================
   ECHARTS CONTAINER STYLING
   ======================================== */
.echart-container {
  width: 100%;
  min-height: 200px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
  overflow: hidden;
}

/* ========================================
   LIGHT THEME ADJUSTMENTS FOR EXEC COMPONENTS
   ======================================== */
[data-theme="light"] .exec-kpi {
  background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 4px 20px rgba(15, 23, 42, .06);
}

[data-theme="light"] .exec-kpi:hover {
  box-shadow: 0 8px 30px rgba(15, 23, 42, .1);
}

[data-theme="light"] .exec-progress-track {
  background: rgba(15, 23, 42, .06);
  border-color: rgba(15, 23, 42, .08);
}

[data-theme="light"] .exec-circular-progress .track {
  stroke: rgba(15, 23, 42, .08);
}

[data-theme="light"] .exec-empty-icon {
  background: linear-gradient(145deg, rgba(0, 152, 195, .08), rgba(105, 38, 111, .05));
}

[data-theme="light"] .stat-pill {
  background: #ffffff;
}

[data-theme="light"] .exec-data-card {
  background: #ffffff;
}

[data-theme="light"] .exec-data-card-header {
  background: linear-gradient(180deg, #f8fafc, #ffffff);
}

[data-theme="light"] .tabulator {
  background: #ffffff !important;
}

[data-theme="light"] .tabulator-header {
  background: linear-gradient(180deg, #f8fafc, #ffffff) !important;
}

[data-theme="light"] .tabulator-row {
  background: #ffffff !important;
}

[data-theme="light"] .tabulator-row:hover {
  background: #f1f5f9 !important;
}

[data-theme="light"] .tabulator-footer {
  background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   LUNFLOW PRINT STYLES - Single Page Optimized
   ═══════════════════════════════════════════════════════════════════════ */
@media print {

  /* Force dark background for print (looks better) */
  .lunflow-stage.lunflow-v2 {
    background: #0a0f1e !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide non-essential elements (do not hide .app-shell — it contains page content) */
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .lunflow-status,
  .lunflow-gl,
  .lunflow-depth-1,
  .lunflow-depth-2,
  .lunflow-depth-3,
  .lunflow-depth-4,
  .lunflow-depth-5,
  .lunflow-neural-grid,
  .lunflow-equations,
  .intel-bg-particles,
  .intel-neural-svg,
  .intel-floating-eq,
  .adv-card-shine,
  .intel-card-shine,
  .lunflow-connector-particle,
  .lunflow-orb-ring,
  .intel-icon-ring,
  .intel-icon-pulse,
  .intel-icon-orbit,
  .adv-radar-sweep,
  .adv-radar-pulse,
  .adv-scan-beam,
  .adv-avatar-ring,
  .intel-vector-viz,
  .intel-delivery-pulses,
  .intel-bg-layer,
  .adv-bg-layer {
    display: none !important;
  }

  /* Page setup */
  @page {
    size: letter portrait;
    margin: 0.4in;
  }

  /* Main container - full width, no scroll */
  .lunflow-stage.lunflow-v2 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding: 0 !important;
  }

  /* ─── Header/Branding - Compact ─── */
  .lunflow-header {
    padding: 8px 0 !important;
    margin-bottom: 6px !important;
  }

  .lunflow-brand {
    gap: 8px !important;
  }

  .lunflow-logo-img {
    width: 28px !important;
    height: 28px !important;
  }

  .lunflow-brand-product {
    font-size: 12px !important;
  }

  .lunflow-brand-company,
  .lunflow-brand-services {
    font-size: 8px !important;
  }

  /* ─── Hero - Very compact ─── */
  .lunflow-hero {
    padding: 8px 0 6px !important;
  }

  .lunflow-hero-title h1 {
    font-size: 18px !important;
    margin: 0 !important;
  }

  .lunflow-hero-sub {
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  /* ─── Main Flow Pipeline - Horizontal, compact ─── */
  .lunflow-main-flow {
    padding: 6px 0 !important;
    overflow: visible !important;
  }

  .lunflow-flow-track {
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 0 !important;
    padding: 4px 0 !important;
  }

  .lunflow-flow-stage {
    min-width: 48px !important;
    max-width: 56px !important;
    gap: 2px !important;
  }

  .lunflow-stage-orb {
    width: 26px !important;
    height: 26px !important;
    border-width: 1.5px !important;
  }

  .lunflow-orb-icon {
    font-size: 11px !important;
  }

  .lunflow-stage-label {
    font-size: 5px !important;
    line-height: 1.1 !important;
  }

  .lunflow-stage-detail,
  .lunflow-stage-math,
  .lunflow-brokers-mini,
  .lunflow-gate-checks,
  .lunflow-artifacts-mini,
  .lunflow-checkpoint-badge {
    display: none !important;
  }

  .lunflow-flow-connector {
    width: 10px !important;
    height: 2px !important;
  }

  .lunflow-connector-beam {
    height: 1.5px !important;
  }

  /* ─── Intelligence Layers - Compact grid ─── */
  .lunflow-intelligence-hero {
    padding: 10px 0 !important;
    page-break-inside: avoid !important;
  }

  .intel-header {
    margin-bottom: 8px !important;
  }

  .intel-title {
    font-size: 12px !important;
  }

  .intel-title-pre {
    font-size: 7px !important;
    margin-bottom: 1px !important;
  }

  .intel-subtitle {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  .intel-cards-container {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  .intel-card {
    padding: 10px !important;
    border-radius: 8px !important;
    background: rgba(30, 41, 59, .90) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
  }

  .intel-card-glow,
  .intel-card-border {
    display: none !important;
  }

  .intel-card-header {
    gap: 6px !important;
    margin-bottom: 8px !important;
  }

  .intel-icon-orb {
    width: 24px !important;
    height: 24px !important;
  }

  .intel-icon-emoji {
    font-size: 12px !important;
  }

  .intel-card-title {
    font-size: 9px !important;
  }

  .intel-card-body {
    gap: 4px !important;
  }

  .intel-row {
    gap: 4px !important;
  }

  .intel-label {
    font-size: 7px !important;
  }

  .intel-value {
    font-size: 7px !important;
  }

  .intel-tech,
  .intel-code {
    font-size: 6px !important;
    padding: 1px 3px !important;
  }

  .intel-badge {
    font-size: 6px !important;
    padding: 1px 4px !important;
  }

  .intel-score-bar {
    grid-template-columns: 40px 1fr 24px !important;
    gap: 4px !important;
  }

  .intel-score-label {
    font-size: 6px !important;
  }

  .intel-score-track {
    height: 4px !important;
  }

  .intel-score-pct {
    font-size: 6px !important;
  }

  .intel-check-item {
    gap: 4px !important;
    padding: 2px 0 !important;
  }

  .intel-check-orb {
    width: 12px !important;
    height: 12px !important;
  }

  .intel-check-orb svg {
    width: 8px !important;
    height: 8px !important;
  }

  .intel-check-text {
    font-size: 7px !important;
  }

  .intel-card-equation {
    margin-top: 6px !important;
    padding-top: 6px !important;
  }

  .intel-eq-text {
    font-size: 7px !important;
  }

  /* ─── Advantage Section - Compact grid ─── */
  .adv-hero {
    padding: 10px 0 !important;
    page-break-inside: avoid !important;
  }

  .adv-header {
    margin-bottom: 8px !important;
  }

  .adv-title {
    font-size: 12px !important;
  }

  .adv-subtitle {
    font-size: 8px !important;
    margin-top: 2px !important;
  }

  .adv-cards-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }

  .adv-card {
    border-radius: 8px !important;
    background: rgba(30, 41, 59, .90) !important;
    border: 1px solid rgba(255, 255, 255, .15) !important;
  }

  .adv-card-glow {
    display: none !important;
  }

  .adv-card-border {
    border-width: 1.5px !important;
    animation: none !important;
  }

  .adv-card-visual {
    padding: 10px 8px !important;
    min-height: 80px !important;
  }

  .adv-card-footer {
    padding: 8px !important;
    gap: 6px !important;
  }

  .adv-icon-orb {
    width: 20px !important;
    height: 20px !important;
    font-size: 10px !important;
  }

  .adv-card-name {
    font-size: 8px !important;
  }

  /* Quality viz */
  .adv-funnel-blob {
    width: 8px !important;
    height: 8px !important;
  }

  .adv-gate-label {
    font-size: 5px !important;
    padding: 1px 4px !important;
  }

  .adv-verified-orb {
    width: 12px !important;
    height: 12px !important;
  }

  .adv-verified-orb svg {
    width: 8px !important;
    height: 8px !important;
  }

  /* Territory viz */
  .adv-radar {
    width: 60px !important;
    height: 60px !important;
  }

  .adv-radar-blip {
    width: 5px !important;
    height: 5px !important;
  }

  .adv-radar-center {
    width: 8px !important;
    height: 8px !important;
  }

  .adv-territory-legend {
    font-size: 6px !important;
    gap: 6px !important;
  }

  /* Compliance viz */
  .adv-avatar {
    width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
  }

  .adv-subject-name {
    font-size: 8px !important;
  }

  .adv-check-row {
    gap: 4px !important;
    font-size: 7px !important;
  }

  .adv-check-orb {
    width: 10px !important;
    height: 10px !important;
  }

  .adv-check-orb svg {
    width: 7px !important;
    height: 7px !important;
  }

  /* Scoring viz */
  .adv-lead-row {
    padding: 4px 6px !important;
    gap: 4px !important;
    border-radius: 4px !important;
  }

  .adv-lead-rank {
    font-size: 10px !important;
  }

  .adv-lead-name {
    font-size: 7px !important;
  }

  .adv-lead-badge {
    font-size: 6px !important;
    padding: 2px 4px !important;
  }

  /* Ensure colors print */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* No page breaks inside key sections */
  .lunflow-main-flow,
  .lunflow-intelligence-hero,
  .adv-hero {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
}

/* =========================================================
   Lead cards (eigen) — Pack leads / Leads index parity
   ========================================================= */
.lead-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.lead-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--card);
  cursor: pointer;
  min-width: 0;
  transition: border-color .15s ease, background-color .15s ease;
}

.lead-card:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--card));
}

.lead-card.is-selected {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--card));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.lead-card.is-muted {
  opacity: .75;
}

.lead-card-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

.lead-card-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  min-width: 0;
}

.lead-card-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lead-card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lead-card-score-pill {
  flex: 0 0 auto;
  min-width: 30px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--text);
}

.lead-card-score-pill.high {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}

.lead-card-score-pill.medium {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
}

.lead-card-score-pill.low {
  color: var(--muted);
}

.lead-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  min-width: 0;
  font-size: 12px;
  color: var(--muted);
}

.lead-status-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.lead-status-legend-group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.lead-status-legend-title {
  font-weight: 650;
  letter-spacing: 0.02em;
  color: var(--text);
  opacity: 0.72;
}

.lead-status-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.lead-status-legend-item .badge {
  transform: scale(0.92);
  transform-origin: center left;
}

.lead-status-legend-sep {
  opacity: 0.45;
}

@media (max-width: 720px) {
  .lead-status-legend-sep {
    display: none;
  }
}

.lead-card.has-disposition {
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--good) 8%, var(--card, var(--panel))),
    var(--card, var(--panel))
  );
}

.lead-card.needs-disposition {
  border-color: color-mix(in srgb, var(--warn) 48%, var(--border));
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--warn) 75%, transparent);
}

.lead-card-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  min-width: 0;
}

.lead-card-status .wq-disposition-badge {
  margin-left: 0;
  flex: 0 1 auto;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}

.lead-card-status .wq-disposition-pending,
.wq-disposition-badge.wq-disposition-pending {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 14%, var(--surface));
  color: var(--text);
  opacity: 1;
  font-weight: 700;
}

.lead-card-contact {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-sep {
  opacity: .55;
}

.lead-card-pack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  min-width: 0;
  font-size: 11px;
  line-height: 1.35;
}

.lead-sel-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.lead-sel-head .lead-card-avatar {
  width: 36px;
  height: 36px;
  font-size: 12px;
}

.lead-sel-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.lead-sel-name {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  word-break: break-word;
}

.lead-sel-subtitle {
  margin-top: 4px;
  font-size: 12px;
}

.lead-sel-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: 0 0 auto;
}

.lead-sel-details {
  margin-top: 8px;
}

.lead-sel-actions {
  margin-top: 16px;
}

.lead-sel-routing {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}

/* Leads browser shell — cards + sticky side panel (eigenCRM mockup parity) */
.leads-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(360px, 34vw);
  gap: 14px;
  align-items: start;
}

.leads-split.leads-split--full {
  grid-template-columns: 1fr;
}

#leadsMainArea {
  min-width: 0;
  grid-column: 1;
}

#leadsSidePanel {
  grid-column: 2;
  position: sticky;
  top: calc(86px + 8px);
  align-self: start;
  max-height: calc(100vh - 86px - 24px);
  overflow: auto;
}

.leads-split.leads-split--full #leadsSidePanel {
  display: none;
}

.lead-map {
  height: 180px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 85%, transparent);
}

.lead-map.is-collapsed {
  display: none;
}

.lead-group {
  margin-top: 14px;
}

.lead-group:first-child {
  margin-top: 0;
}

.lead-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 88%, transparent);
}

.lead-group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.lead-group-title .muted {
  font-size: 12px;
}

.leads-toolbar-select {
  width: auto;
  min-width: 170px;
}

.sel-kv {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 13px;
}

.sel-kv span:last-child {
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

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

  #leadsMainArea,
  #leadsSidePanel {
    grid-column: 1;
  }

  #leadsSidePanel {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

.lead-card-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.lead-card-avatar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--accent) 85%, var(--text));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  flex: 0 0 auto;
}

.lead-card-identity {
  flex: 1 1 auto;
  min-width: 0;
}

.lead-card-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1.3;
  word-break: break-word;
}

.lead-card-title-row .lead-card-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-card > .lead-card-name {
  flex: none;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

.lead-card-company {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lead-card-badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.lead-card-time {
  flex: 0 0 auto;
  white-space: nowrap;
}

.lead-card-body {
  margin-top: 10px;
}

.lead-card-row {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  margin-top: 6px;
  min-width: 0;
}

.lead-card-row-icon {
  width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-light, var(--accent));
  opacity: .9;
  flex: 0 0 auto;
}

.lead-card-row-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lead-card-footer {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lead-card-score {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lead-card-score-ring {
  position: relative;
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
}

.lead-card-score-ring svg {
  width: 56px;
  height: 56px;
  display: block;
  transform: rotate(-90deg);
}

.lead-card-score-ring circle {
  fill: none;
  /* critical: avoids giant filled circles */
  stroke-width: 3.2;
}

.lead-card-score-ring .ring-bg {
  stroke: rgba(255, 255, 255, .12);
}

[data-theme="light"] .lead-card-score-ring .ring-bg {
  stroke: rgba(15, 23, 42, .12);
}

.lead-card-score-ring .ring-fill {
  stroke: var(--accent2, #25D6A2);
  stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}

.lead-card-score-ring.high .ring-fill {
  stroke: var(--accent2, #25D6A2);
}

.lead-card-score-ring.medium .ring-fill {
  stroke: var(--accent3, #FFCF5A);
}

.lead-card-score-ring.low .ring-fill {
  stroke: var(--accent4, #FF5A7A);
}

.lead-card-score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.lead-card-score-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--muted);
}

.lead-source-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
  font-size: 12px;
}

.lead-source-logo {
  width: 22px;
  height: 22px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
}

.lead-source-logo svg {
  width: 14px;
  height: 14px;
  fill: var(--accent-light, var(--accent));
}

/* ============================================================
   Shared Confirm Dialog (eigenLeads + eigenCRM)
   ============================================================ */
.eigen-confirm-dialog {
  --width: min(440px, calc(100vw - 2rem));
}

.eigen-confirm-dialog::part(panel) {
  border: 1px solid rgba(255, 255, 255, .10);
  background: color-mix(in srgb, var(--card) 92%, #0b1020);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .55), 0 10px 30px rgba(0, 0, 0, .35);
  max-width: calc(100vw - 2rem);
}

.eigen-confirm-dialog::part(header) {
  display: none;
}

.eigen-confirm-dialog::part(body) {
  padding: 1.1rem 1.25rem 0.5rem;
}

.eigen-confirm-dialog::part(footer) {
  padding: 0.85rem 1.25rem 1.15rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}

[data-theme="light"] .eigen-confirm-dialog::part(panel) {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow: 0 22px 70px rgba(15, 23, 42, .14), 0 8px 22px rgba(15, 23, 42, .08);
}

[data-theme="light"] .eigen-confirm-dialog::part(footer) {
  background: #f8fafc;
}

.eigen-confirm-title {
  font-weight: 950;
  letter-spacing: -.02em;
  font-size: 16px;
  color: var(--text);
}

.eigen-confirm-body {
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.eigen-confirm-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
}

/* Plain overlay confirm (shared.js S.confirm — no Shoelace) */
.eigen-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: rgba(0, 0, 0, 0.55);
  box-sizing: border-box;
}

.eigen-confirm-overlay.is-open {
  display: flex;
}

body.eigen-confirm-open {
  overflow: hidden;
}

.eigen-confirm-panel {
  width: min(440px, calc(100vw - 2rem));
  max-height: calc(100vh - 2.5rem);
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 92%, #0b1020);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
}

.eigen-confirm-panel-body {
  padding: 1.1rem 1.25rem 0.5rem;
}

.eigen-confirm-panel .eigen-confirm-actions {
  padding: 0.85rem 1.25rem 1.15rem;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
}

[data-theme="light"] .eigen-confirm-panel {
  background: #ffffff;
  border-color: #e2e8f0;
  box-shadow:
    0 22px 70px rgba(15, 23, 42, 0.14),
    0 8px 22px rgba(15, 23, 42, 0.08);
}

[data-theme="light"] .eigen-confirm-panel .eigen-confirm-actions {
  background: #f8fafc;
}

/* ============================================================
   Command palette (⌘K) — instant navigation
   ============================================================ */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 12vh 1.25rem 1.25rem;
  background: var(--overlay);
  backdrop-filter: var(--overlay-blur);
  box-sizing: border-box;
}

.cmdk.is-open {
  display: flex;
  animation: cmdkFade .12s ease;
}

@keyframes cmdkFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

body.cmdk-open {
  overflow: hidden;
}

.cmdk-panel {
  width: min(640px, calc(100vw - 2rem));
  max-height: calc(100vh - 16vh);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--modal-bg, var(--card));
  box-shadow: 0 32px 90px rgba(2, 6, 23, .45), 0 12px 34px rgba(2, 6, 23, .28);
  overflow: hidden;
  animation: cmdkRise .14s cubic-bezier(.2, .8, .3, 1);
}

@keyframes cmdkRise {
  from { transform: translateY(-8px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

.cmdk-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.cmdk-search-ico {
  color: var(--muted);
  display: inline-flex;
  flex-shrink: 0;
}

.cmdk-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--text);
  font-size: 15.5px;
  font-weight: 600;
  font-family: inherit;
}

.cmdk-input::placeholder {
  color: var(--muted);
  font-weight: 500;
}

.cmdk-kbd {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--muted);
}

.cmdk-list {
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cmdk-section {
  padding: 10px 10px 4px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--muted);
  opacity: .8;
}

.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

.cmdk-item.is-active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
}

.cmdk-item-ico {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  border: 1px solid var(--border);
  color: var(--text);
}

.cmdk-item.is-active .cmdk-item-ico {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.cmdk-item-label {
  flex: 1;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cmdk-mark {
  background: color-mix(in srgb, var(--accent3) 45%, transparent);
  color: inherit;
  border-radius: 4px;
  padding: 0 1px;
}

.cmdk-item-group {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
}

.cmdk-item-go {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--accent);
  opacity: 0;
  width: 16px;
  text-align: center;
}

.cmdk-item.is-active .cmdk-item-go {
  opacity: 1;
}

.cmdk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
}

.cmdk-foot {
  display: flex;
  gap: 16px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 45%, transparent);
}

.cmdk-hint {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

@media (max-width: 600px) {
  .cmdk { padding: 8vh .75rem 1rem; }
  .cmdk-item-group { display: none; }
  .cmdk-foot { display: none; }
}

/* ============================================================
   Topbar global search trigger (opens ⌘K palette)
   ============================================================ */
.topbar-search {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 38px;
  padding: 0 10px 0 12px;
  min-width: 200px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: text;
  transition: border-color .15s ease, background .15s ease;
}

.topbar-search:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.topbar-search .topbar-search-ico {
  display: inline-flex;
  flex-shrink: 0;
}

.topbar-search .topbar-search-text {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-search .topbar-search-kbd {
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .topbar-search {
    min-width: 0;
    width: 38px;
    padding: 0;
    justify-content: center;
  }
  .topbar-search .topbar-search-text,
  .topbar-search .topbar-search-kbd {
    display: none;
  }
}

/* ============================================================
   Collapsed-rail flyout — one-click access to grouped items
   ============================================================ */
body.sidebar-collapsed details.snav-group {
  position: relative;
}

/* Hide grouped items in the collapsed rail regardless of open/closed state.
   Specificity (0,3,2) beats the base .snav-group-items{display:flex}. */
body.sidebar-collapsed details.snav-group > .snav-group-items {
  display: none;
}

/* Reveal as a floating flyout on hover/focus. Specificity (0,4,2) ties the
   pre-existing :not([open]) hide rule and, being later in the cascade, wins —
   so the flyout appears for both closed and open groups. */
body.sidebar-collapsed details.snav-group:hover > .snav-group-items,
body.sidebar-collapsed details.snav-group:focus-within > .snav-group-items {
  display: flex;
  position: fixed;
  left: var(--sidebar-w-collapsed, 76px);
  min-width: 224px;
  max-height: 80vh;
  overflow-y: auto;
  padding: 10px;
  margin: 0 0 0 8px;
  gap: 4px;
  background: var(--modal-bg, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(2, 6, 23, .38);
  z-index: 1200;
}

body.sidebar-collapsed details.snav-group:hover > .snav-group-items .snav-label,
body.sidebar-collapsed details.snav-group:focus-within > .snav-group-items .snav-label {
  display: inline;
}

body.sidebar-collapsed details.snav-group > .snav-group-items .snav.snav-sub::before,
body.sidebar-collapsed details.snav-group > .snav-group-items .snav.snav-sub::after {
  display: none;
}

body.sidebar-collapsed details.snav-group:hover > .snav-group-items .snav.snav-sub,
body.sidebar-collapsed details.snav-group:focus-within > .snav-group-items .snav.snav-sub {
  justify-content: flex-start;
}

/* ============================================================
   Lead detail (shared styles, used by /ui/leads/{id})
   ============================================================ */
.help-text {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}

.field-label-row,
.detail-label-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.field-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.field-help-trigger {
  display: inline;
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: help;
  text-align: inherit;
  border-radius: 4px;
  line-height: 1.35;
}

.field-help-trigger-text {
  border-bottom: 1px dotted color-mix(in srgb, var(--muted) 55%, transparent);
  transition: border-color 0.15s ease, color 0.15s ease;
}

.field-help-trigger:hover .field-help-trigger-text,
.field-help-trigger:focus-visible .field-help-trigger-text,
.field-help-trigger.is-help-active .field-help-trigger-text {
  color: var(--text);
  border-bottom-color: color-mix(in srgb, var(--accent) 65%, var(--border));
}

.field-help-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cov-stat .field-help-trigger {
  display: inline-flex;
  justify-content: center;
  cursor: help;
}

.cov-stat-hint {
  font-size: 10px;
  line-height: 1.35;
  color: var(--muted);
  margin-top: 5px;
}

body.is-field-help-open details:not([open]) summary {
  color: var(--muted);
}

body.is-field-help-open .glass-ev-breakdown:not([open]) {
  pointer-events: none;
}

body.is-field-help-open .is-help-active {
  pointer-events: auto;
}

.glass-ev-breakdown {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 14px 14px;
}

.glass-ev-breakdown-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  padding: 12px 0;
}

.glass-ev-breakdown-body {
  padding-top: 4px;
}

.glass-ev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 10px;
}

.glass-ev-table th,
.glass-ev-table td {
  text-align: left;
  padding: 7px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.glass-ev-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

.glass-ev-table tfoot th,
.glass-ev-table tfoot td {
  font-weight: 700;
  border-bottom: none;
  border-top: 1px solid var(--border);
}

#eigen-field-help,
.eigen-field-help {
  position: fixed;
  z-index: 2147483000;
  max-width: min(340px, calc(100vw - 24px));
  min-width: 200px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--modal-bg, var(--card));
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  box-shadow: var(--shadow), 0 0 0 1px color-mix(in srgb, var(--border) 80%, transparent);
  pointer-events: auto;
  isolation: isolate;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

#eigen-field-help.is-visible,
.eigen-field-help.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.eigen-field-help-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
  margin-bottom: 6px;
}

.eigen-field-help-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.field-help-text {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  margin: 4px 0 10px;
}

.subsection-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 16px 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.score-ev {
  font-size: 22px;
  font-weight: 800;
  color: var(--accent2);
}

.score-ev-sep {
  font-size: 16px;
}

.ev-formula-block {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.ev-formula-code {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}

.cov-stat-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
}

.empty-state {
  color: var(--muted);
  font-style: italic;
}

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

table.detail-table th {
  text-align: left;
  padding: 12px 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border);
  width: 240px;
  background: rgba(255, 255, 255, .01);
}

table.detail-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}

[data-theme="light"] table.detail-table th {
  background: rgba(15, 23, 42, .02);
}

table.data-table thead th {
  background: rgba(255, 255, 255, .02);
}

[data-theme="light"] table.data-table thead th {
  background: rgba(15, 23, 42, .02);
}

.score-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.score-value {
  font-size: 44px;
  font-weight: 950;
  letter-spacing: -.02em;
}

.score-label {
  font-size: 16px;
  color: var(--muted);
}

.score-high {
  background: var(--gradient-success);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-medium {
  background: linear-gradient(135deg, var(--accent3) 0%, var(--accent3-light) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.score-low {
  background: linear-gradient(135deg, var(--accent4), #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.explanation {
  margin: 10px 0 0 0;
  color: var(--text);
  background: rgba(255, 255, 255, .03);
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.5;
}

[data-theme="light"] .explanation {
  background: rgba(15, 23, 42, .03);
}

.lead-progress-bar {
  display: inline-block;
  width: 110px;
  height: 8px;
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.lead-progress-bar.tw-w-full,
.cap-meter .lead-progress-bar {
  display: block;
  width: 100%;
}

.cap-person-input {
  width: 4.5rem;
  min-width: 4.5rem;
  padding: 0.25rem 0.4rem;
  font-size: 11px;
  text-align: right;
}

.cap-person-bar {
  height: 6px;
  width: auto;
  min-width: 0;
}

.cap-meter-row .cap-person-bar {
  display: block;
}

.progress-fill.warn {
  background: var(--warn);
}

.cap-override-row .cap-person-input {
  width: 5.5rem;
  min-width: 5.5rem;
}

.cap-override-add .cap-override-amount {
  text-align: right;
}

.cap-override-remove {
  flex-shrink: 0;
  font-size: 10px;
  padding: 0.2rem 0.45rem;
}

.cap-by-person summary {
  list-style: none;
}

.cap-by-person summary::-webkit-details-marker {
  display: none;
}

.monthly-lead-cap-card {
  scroll-margin-top: 72px;
}

[data-theme="light"] .lead-progress-bar {
  background: rgba(15, 23, 42, .06);
}

.progress-fill {
  height: 100%;
}

.progress-fill.positive {
  background: var(--accent2);
}

.progress-fill.negative {
  background: var(--accent4);
}

.progress-value {
  margin-left: 8px;
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.citations-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.citations-list li {
  padding: 10px 12px;
  background: rgba(255, 255, 255, .03);
  margin-bottom: 8px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="light"] .citations-list li {
  background: rgba(15, 23, 42, .03);
}

.citation-kind {
  display: inline-block;
  padding: 3px 8px;
  background: rgba(0, 152, 195, .15);
  color: var(--accent-light);
  border-radius: 999px;
  font-size: 11px;
  margin-right: 8px;
  font-weight: 800;
  border: 1px solid rgba(0, 152, 195, .28);
}

/* Eigen 3D Animated Logo */
.eigen-anim-scene {
  width: 24px;
  height: 24px;
  perspective: 200px;
  position: relative;
  flex-shrink: 0;
  margin-right: 8px;
}

.eigen-anim-scaler {
  width: 200px;
  height: 200px;
  transform: translate(-50%, -50%) scale(0.10);
  transform-origin: center;
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}

.eigen-anim-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: eigen-spin-and-pulse 6s infinite linear;
}

.eigen-anim-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 10px solid rgba(56, 189, 248, 0.9);
  /* Sharper, thicker border for scale */
  background: rgba(56, 189, 248, 0.05);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  backface-visibility: visible;
}

.eigen-anim-face--front {
  transform: rotateY(0deg) translateZ(100px);
}

.eigen-anim-face--right {
  transform: rotateY(90deg) translateZ(100px);
}

.eigen-anim-face--back {
  transform: rotateY(180deg) translateZ(100px);
}

.eigen-anim-face--left {
  transform: rotateY(-90deg) translateZ(100px);
}

.eigen-anim-face--top {
  transform: rotateX(90deg) translateZ(100px);
}

.eigen-anim-face--bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

/* Internal "Eigen" Vector representation */
.eigen-anim-vector-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
}

.eigen-anim-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 16px solid #7f1d1d;
  /* Deep flat red (Tailwind red-900), thicker for small scale */
  box-shadow: none;
  /* Flat */
}

.eigen-anim-ring:nth-child(1) {
  transform: rotateX(0deg);
  animation: eigen-rotate-ring 1.5s infinite linear reverse;
}

.eigen-anim-ring:nth-child(2) {
  transform: rotateX(60deg);
  animation: eigen-rotate-ring 2s infinite linear;
}

.eigen-anim-ring:nth-child(3) {
  transform: rotateX(-60deg);
  animation: eigen-rotate-ring 2.5s infinite linear reverse;
}

@keyframes eigen-spin-and-pulse {
  0% {
    transform: rotateX(0) rotateY(0) scale(0.8);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg) scale(1.0);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) scale(0.8);
  }
}

@keyframes eigen-rotate-ring {
  0% {
    transform: rotateX(var(--deg, 0)) rotateZ(0deg);
  }

  100% {
    transform: rotateX(var(--deg, 0)) rotateZ(360deg);
  }
}

/* =========================================================================
   EIGEN ORB — signature motif (canonical; shared by eigenLeads + eigenCRM)
   Tokenized descendant of the sidebar logo cube. Three modes:
     --loading    ambient state for async waits (packs building, pages loading)
     --empty      settled/dormant state for empty lists/detail panels
     --celebrate  one-shot burst triggered via JS (.is-active) for agent "wins"
   Reduced-motion users get an opacity-only fallback; no bespoke JS required
   for --loading / --empty, only for --celebrate (see shared.js celebrateOrb).
   ========================================================================= */

.eigen-orb {
  --orb-size: 96;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.eigen-orb-scene {
  width: calc(var(--orb-size) * 1px);
  height: calc(var(--orb-size) * 1px);
  perspective: calc(var(--orb-size) * 6px);
  position: relative;
}

.eigen-orb-scaler {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(calc(var(--orb-size) / 200));
  transform-origin: center;
  pointer-events: none;
}

.eigen-orb-cube {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: eigen-orb-spin 6s infinite linear;
}

.eigen-orb-face {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 10px solid color-mix(in srgb, var(--accent) 65%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 22%, transparent);
  backface-visibility: visible;
}

.eigen-orb-face--front {
  transform: rotateY(0deg) translateZ(100px);
}

.eigen-orb-face--right {
  transform: rotateY(90deg) translateZ(100px);
}

.eigen-orb-face--back {
  transform: rotateY(180deg) translateZ(100px);
}

.eigen-orb-face--left {
  transform: rotateY(-90deg) translateZ(100px);
}

.eigen-orb-face--top {
  transform: rotateX(90deg) translateZ(100px);
}

.eigen-orb-face--bottom {
  transform: rotateX(-90deg) translateZ(100px);
}

.eigen-orb-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  transform: translate(-50%, -50%) rotateX(45deg) rotateY(45deg);
  transform-style: preserve-3d;
}

.eigen-orb-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 14px solid color-mix(in srgb, var(--accent2) 70%, transparent);
  box-shadow: none;
}

.eigen-orb-ring:nth-child(1) {
  animation: eigen-orb-ring-spin 1.6s infinite linear reverse;
}

.eigen-orb-ring:nth-child(2) {
  transform: rotateX(60deg);
  animation: eigen-orb-ring-spin 2.1s infinite linear;
}

.eigen-orb-ring:nth-child(3) {
  transform: rotateX(-60deg);
  animation: eigen-orb-ring-spin 2.6s infinite linear reverse;
}

.eigen-orb-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.eigen-orb-subtitle {
  font-size: 12px;
  line-height: 1.5;
  max-width: 32ch;
}

@keyframes eigen-orb-spin {
  0% {
    transform: rotateX(0) rotateY(0) scale(0.82);
  }

  50% {
    transform: rotateX(180deg) rotateY(180deg) scale(1);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg) scale(0.82);
  }
}

@keyframes eigen-orb-ring-spin {
  0% {
    transform: rotateX(var(--deg, 0)) rotateZ(0deg);
  }

  100% {
    transform: rotateX(var(--deg, 0)) rotateZ(360deg);
  }
}

/* ── empty / dormant mode: slower, quieter, tonal ── */
.eigen-orb--empty .eigen-orb-cube {
  animation-duration: 16s;
}

.eigen-orb--empty .eigen-orb-face {
  border-color: color-mix(in srgb, var(--muted) 55%, transparent);
  background: color-mix(in srgb, var(--muted) 5%, transparent);
  box-shadow: none;
}

.eigen-orb--empty .eigen-orb-ring {
  border-color: color-mix(in srgb, var(--muted) 45%, transparent);
}

.eigen-orb--empty .eigen-orb-ring:nth-child(1) {
  animation-duration: 7s;
}

.eigen-orb--empty .eigen-orb-ring:nth-child(2) {
  animation-duration: 9s;
}

.eigen-orb--empty .eigen-orb-ring:nth-child(3) {
  animation-duration: 11s;
}

.eigen-orb--empty .eigen-orb-title {
  color: var(--text);
}

/* ── celebrate mode: idle until .is-active, then one-shot burst ── */
.eigen-orb--celebrate {
  position: relative;
}

.eigen-orb--celebrate .eigen-orb-cube {
  animation-duration: 5s;
}

.eigen-orb--celebrate.is-active .eigen-orb-cube {
  animation-duration: 1s;
}

.eigen-orb--celebrate.is-active .eigen-orb-face {
  border-color: color-mix(in srgb, var(--accent2) 78%, transparent);
  box-shadow: 0 0 30px color-mix(in srgb, var(--accent2) 45%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.eigen-orb--celebrate .eigen-orb-scene::before,
.eigen-orb--celebrate .eigen-orb-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.eigen-orb--celebrate.is-active .eigen-orb-scene::before {
  border: 3px solid var(--accent2);
  animation: eigen-orb-burst-ring 0.9s var(--ease-delight, ease-out);
}

.eigen-orb--celebrate.is-active .eigen-orb-scene::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 45%, transparent), transparent 70%);
  animation: eigen-orb-burst-glow 1.1s var(--ease-delight, ease-out);
}

.eigen-orb-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.eigen-orb-spark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--accent2);
  opacity: 0;
  --angle: calc(var(--i) * 36deg);
}

.eigen-orb-spark:nth-child(odd) {
  background: var(--accent3);
}

.eigen-orb-spark:nth-child(3n) {
  background: var(--accent4);
}

.eigen-orb--celebrate.is-active .eigen-orb-spark {
  animation: eigen-orb-spark-fly 0.85s var(--ease-delight, ease-out) forwards;
}

@keyframes eigen-orb-burst-ring {
  0% {
    transform: scale(0.6);
    opacity: 0.9;
  }

  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes eigen-orb-burst-glow {
  0% {
    opacity: 0.85;
  }

  100% {
    opacity: 0;
  }
}

@keyframes eigen-orb-spark-fly {
  0% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(calc(var(--orb-size) * 0.9px)) scale(0.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .eigen-orb-cube,
  .eigen-orb-ring,
  .eigen-orb-spark {
    animation: none !important;
  }

  .eigen-orb--celebrate.is-active .eigen-orb-scene::before,
  .eigen-orb--celebrate.is-active .eigen-orb-scene::after {
    animation-duration: 0.3s;
  }

  .eigen-orb--loading .eigen-orb-face,
  .eigen-orb--loading .eigen-orb-ring {
    opacity: 0.9;
  }
}

/* =========================================================================
   DATA LAKE EXPLORER — lineage / provenance canvas
   Command bar (clickable KPI tiles) + slim filter toolbar + flow ribbon +
   split view: selectable record rail + interactive graph + node inspector.
   Tokens only; dark + light parity.
   ========================================================================= */

/* ── Command bar: clickable KPI tiles ── */
.dl-statbar .dl-stat {
  flex: 1 1 220px;
  min-width: 200px;
  flex-direction: column;
  align-items: stretch;
  gap: 7px;
  padding: 11px 14px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .16s var(--ease-smooth), border-color .18s ease, box-shadow .2s ease;
  animation: dlStatPop .5s var(--ease-smooth) both;
}

.dl-statbar .dl-stat:nth-child(1) { animation-delay: .04s; }
.dl-statbar .dl-stat:nth-child(2) { animation-delay: .10s; }
.dl-statbar .dl-stat:nth-child(3) { animation-delay: .16s; }
.dl-statbar .dl-stat:nth-child(4) { animation-delay: .22s; }

@keyframes dlStatPop {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dl-statbar .dl-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--node-accent, var(--accent));
  opacity: .75;
}

.dl-statbar .dl-stat:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--node-accent, var(--accent)) 45%, var(--border));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--node-accent, var(--accent)) 14%, transparent);
}

.dl-statbar .dl-stat:focus-visible {
  outline: 2px solid var(--node-accent, var(--accent));
  outline-offset: 1px;
}

.dl-statbar .dl-stat.is-on {
  border-color: var(--node-accent, var(--accent));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-accent, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 8%, var(--card));
}

.dl-stat-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-stat-ico {
  color: var(--node-accent, var(--accent));
  display: inline-flex;
}

.dl-stat-top .ops-stat-value {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.dl-stat-sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 18px;
}

/* mini status drill-down segments (inside a tile) */
.dl-seg {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .12s ease, filter .15s ease;
}

.dl-seg b { font-weight: 800; }

.dl-seg:hover { transform: translateY(-1px); filter: brightness(1.12); }

.dl-seg.s-good { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 36%, transparent); }
.dl-seg.s-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 36%, transparent); }
.dl-seg.s-bad { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 36%, transparent); }
.dl-seg.s-muted { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }

/* duplicate-rate mini bar */
.dl-dupbar {
  flex: 0 0 74px;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 18%, transparent);
  overflow: hidden;
}

.dl-dupbar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--warn), var(--danger));
  transition: width .8s var(--ease-smooth);
}

/* ── Slim filter toolbar + quick drill-down chips ── */
.dl-toolbar {
  padding: 10px 12px;
}

.dl-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dl-tb-search {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
}

.dl-tb-search-ico {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  display: inline-flex;
  pointer-events: none;
}

.dl-tb-search input {
  width: 100%;
  padding-left: 32px;
}

.dl-toolbar-row select {
  width: auto;
  flex: 0 1 150px;
  min-width: 110px;
}

.dl-toolbar-row input[type="date"] {
  width: auto;
  flex: 0 1 148px;
  min-width: 128px;
}

@media (max-width: 720px) {
  .dl-tb-search {
    flex-basis: 100%;
  }

  .dl-toolbar-row select,
  .dl-toolbar-row input[type="date"] {
    flex: 1 1 44%;
  }
}

.dl-quickrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.dl-quickrow:empty {
  display: none;
  margin-top: 0;
}

.dl-quickrow-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px;
}

.dl-qchip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card-hover) 50%, transparent);
  transition: border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
  cursor: pointer;
  user-select: none;
}

.dl-qchip b,
.dl-qchip-count {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-size: 10.5px;
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  opacity: 0.92;
}

.dl-qchip-label {
  font-weight: 700;
  letter-spacing: 0.02em;
}

.dl-qchip:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.dl-qchip.is-on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
}

.dl-qchip.is-on b,
.dl-qchip.is-on .dl-qchip-count {
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
  opacity: 1;
  font-weight: 700;
}

.dl-qchip:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}

.dl-explorer {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}

@media (max-width: 980px) {
  .dl-explorer {
    grid-template-columns: 1fr;
  }
}

/* ── Record rail ── */
.dl-rail {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: linear-gradient(180deg,
      color-mix(in srgb, var(--card) 94%, transparent),
      color-mix(in srgb, var(--panel) 94%, transparent));
  display: flex;
  flex-direction: column;
  min-height: 480px;
  max-height: min(70vh, 860px);
  overflow: hidden;
}

.dl-rail-head {
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.dl-rail-title {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.dl-rail-filter {
  position: relative;
  padding: 8px 10px 4px;
}

.dl-rail-filter-ico {
  position: absolute;
  left: 19px;
  top: 50%;
  transform: translateY(-30%);
  color: var(--muted);
  pointer-events: none;
  display: inline-flex;
}

.dl-rail-filter input {
  width: 100%;
  padding: 7px 10px 7px 30px;
  font-size: 12px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 45%, transparent);
  color: var(--text);
}

.dl-rail-filter input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 16%, transparent);
}

.dl-rail-list {
  overflow: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dl-rec {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--card-hover) 45%, transparent);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
  text-align: left;
  width: 100%;
}

.dl-rec:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
}

.dl-rec:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.dl-rec.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  box-shadow: var(--glow-primary);
}

.dl-rec-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 18%, transparent);
  color: var(--node-accent, var(--accent));
}

.dl-rec-main {
  min-width: 0;
}

.dl-rec-name {
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dl-rec-sub {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* node-type accents (shared by rail icons, graph nodes, legend) */
.dl-t-import { --node-accent: var(--accent); }
.dl-t-lead { --node-accent: var(--accent2); }
.dl-t-identity { --node-accent: var(--accent3); }
.dl-t-source { --node-accent: var(--accent5); }
.dl-t-artifact,
.dl-t-batch { --node-accent: var(--accent6); }
.dl-t-run { --node-accent: var(--accent-light); }
.dl-t-pack { --node-accent: var(--accent2-light); }
.dl-t-deliver { --node-accent: var(--accent6); }
.dl-t-dedupe { --node-accent: var(--accent4); }
.dl-t-score { --node-accent: var(--accent3); }
.dl-t-comply { --node-accent: var(--good); }
.dl-t-outcome { --node-accent: var(--accent2-light); }

/* Lake-at-a-glance pipeline flow strip */
.dl-flow-panel { border-radius: 16px; }
.dl-flow-lake {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px 4px;
}
.dl-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--node-accent, var(--accent)) 28%, var(--border));
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 8%, var(--surface));
}
.dl-flow-step-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dl-flow-step-val {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--text);
}
.dl-flow-step-arrow {
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  opacity: 0.7;
}

/* Geographic supply audit panel (page footer — full readable block) */
#dlGeoPanel {
  scroll-margin-top: 28px;
}
.dl-geo-panel {
  border-radius: 16px;
  overflow: visible;
}
.card.dl-geo-panel {
  overflow: visible;
}
.dl-geo-panel > .card-inner.compact {
  padding: 22px 24px 28px;
}
.dl-geo-panel .section-title {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 14px;
}
.dl-geo-panel .section-title h1 {
  font-size: 15px;
  line-height: 1.3;
}
.dl-geo-panel .section-title .muted {
  line-height: 1.4;
  max-width: 52rem;
}
.dl-geo-loading { min-height: 72px; }
.dl-geo-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.dl-geo-summary .dl-qchip {
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.35;
}
.dl-geo-summary .dl-qchip b {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dl-geo-warn {
  border-color: color-mix(in srgb, var(--warn) 55%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.dl-geo-warn b { color: var(--warn); }
.dl-geo-insights {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 18px;
}
.dl-geo-insight {
  font-size: 12.5px;
  line-height: 1.5;
  padding: 11px 13px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
  color: var(--text);
}
.dl-geo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 960px) {
  .dl-geo-grid { grid-template-columns: 1fr; }
}
.dl-geo-col {
  padding: 14px 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
  min-height: 140px;
}
.dl-geo-col-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 10px;
}
.dl-geo-subhead {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 6px;
}
.dl-geo-subhead:first-of-type { margin-top: 0; }
.dl-geo-rank {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dl-geo-rank-link,
.dl-geo-rank-static {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.4;
  padding: 4px 0;
}
.dl-geo-rank-link {
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  padding: 4px 6px;
  margin: 0 -6px;
}
.dl-geo-rank-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.dl-geo-rank-label {
  min-width: 0;
  overflow-wrap: anywhere;
}
.dl-geo-rank-count {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  flex: 0 0 auto;
}
.dl-geo-rank-link:hover .dl-geo-rank-count { color: var(--accent); }
.dl-geo-fit-table-wrap { overflow-x: auto; margin-top: 6px; }
.dl-geo-fit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.dl-geo-fit-table th,
.dl-geo-fit-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.dl-geo-fit-table th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.dl-geo-fit-counties {
  max-width: 280px;
  color: var(--muted);
  line-height: 1.35;
}
.dl-geo-fit-blocked td:first-child code { color: var(--bad); }
.dl-geo-fit-empty td:first-child code { color: var(--warn); }

/* Embedded lineage (CRM lead detail, public share) */
.dl-embed .dl-stage {
  min-height: 460px;
  max-height: min(68vh, 780px);
}
.dl-embed .dl-explorer {
  display: block;
}
.dl-embed-note {
  margin-top: 8px;
  font-size: 12px;
}

/* ── Stage / canvas ── */
.dl-stage {
  position: relative;
  border: 1px solid var(--border);
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--card) 92%, transparent), color-mix(in srgb, var(--panel) 96%, transparent));
  min-height: 480px;
  max-height: min(70vh, 860px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dl-stage-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 40%, transparent);
  flex-wrap: wrap;
}

.dl-stage-root {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.dl-stage-root-title {
  font-size: 13.5px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 360px;
}

/* ── Provenance flow ribbon: per-stage counts, click to focus ── */
.dl-ribbon {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--panel) 28%, transparent);
}

.dl-ribbon:empty {
  display: none;
}

.dl-rib-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--node-accent, var(--accent)) 32%, var(--border));
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 9%, transparent);
  transition: transform .14s var(--ease-smooth), border-color .16s ease, background .16s ease, box-shadow .18s ease;
  animation: dlRibIn .4s var(--ease-smooth) backwards;
}

@keyframes dlRibIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dl-rib-pill:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--node-accent, var(--accent)) 60%, transparent);
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 16%, transparent);
}

.dl-rib-pill:focus-visible {
  outline: 2px solid var(--node-accent, var(--accent));
  outline-offset: 1px;
}

.dl-rib-pill.is-active {
  border-color: var(--node-accent, var(--accent));
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 22%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-accent, var(--accent)) 40%, transparent),
    0 0 14px color-mix(in srgb, var(--node-accent, var(--accent)) 25%, transparent);
}

.dl-rib-ico {
  display: inline-flex;
  color: var(--node-accent, var(--accent));
}

.dl-rib-label {
  letter-spacing: .02em;
}

.dl-rib-count {
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 24%, transparent);
  color: var(--node-accent, var(--accent));
}

.dl-rib-arrow {
  display: inline-flex;
  color: var(--muted);
  opacity: .7;
  padding: 0 1px;
  animation: dlRibIn .4s var(--ease-smooth) backwards;
}

/* relative region below the toolbar; hosts canvas + floating detail card */
.dl-stage-main {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* scroll viewport holding the positioned graph */
.dl-canvas-wrap {
  position: absolute;
  inset: 0;
  overflow: auto;
}

.dl-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
}

.dl-canvas-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.dl-edge {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 60%, var(--muted));
  stroke-width: 1.6;
  opacity: .55;
  transition: stroke .2s ease, opacity .2s ease, stroke-width .2s ease;
}

.dl-edge.is-lit {
  stroke: var(--accent);
  stroke-width: 2.4;
  opacity: 1;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 60%, transparent));
}

.dl-edge-flow {
  stroke-dasharray: 4 7;
  animation: dlEdgeIn .5s ease backwards, dl-flow 1.1s linear infinite;
}

@keyframes dl-flow {
  to { stroke-dashoffset: -22; }
}

@keyframes dlEdgeIn {
  from { opacity: 0; }
  to { opacity: .55; }
}

/* stage column header labels floating above first node row */
.dl-col-label {
  position: absolute;
  top: 8px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  transform: translateX(-50%);
  white-space: nowrap;
}

/* graph node card */
.dl-node {
  position: absolute;
  width: var(--dl-node-w, 178px);
  box-sizing: border-box;
  min-width: 0;
  max-height: 96px;
  border: 1px solid color-mix(in srgb, var(--node-accent, var(--accent)) 38%, var(--border));
  border-radius: 13px;
  background: linear-gradient(165deg,
      color-mix(in srgb, var(--node-accent, var(--accent)) 14%, var(--card)),
      color-mix(in srgb, var(--panel) 92%, transparent));
  padding: 9px 11px;
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: transform .14s var(--ease-smooth), box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow) 55%, transparent);
  color: var(--text);
  font: inherit;
}

.dl-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--shadow) 70%, transparent);
}

.dl-node:focus-visible {
  outline: 2px solid var(--node-accent, var(--accent));
  outline-offset: 2px;
}

.dl-node.dl-enter {
  animation: dlNodePop .45s var(--ease-smooth) backwards;
}

@keyframes dlNodePop {
  from { opacity: 0; transform: translateY(12px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.dl-node.is-root {
  border-color: var(--node-accent, var(--accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--node-accent, var(--accent)) 45%, transparent),
    0 14px 32px color-mix(in srgb, var(--shadow) 75%, transparent);
}

/* root node pulse ring — settles after a few beats */
.dl-node.is-root::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 15px;
  border: 2px solid var(--node-accent, var(--accent));
  pointer-events: none;
  opacity: 0;
  animation: dlRootPulse 1.6s ease-out .4s 3;
}

@keyframes dlRootPulse {
  0% { opacity: .8; transform: scale(1); }
  70% { opacity: 0; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(1.08); }
}

.dl-node.is-selected {
  border-color: var(--node-accent, var(--accent));
  box-shadow: 0 0 0 2px var(--node-accent, var(--accent)),
    0 16px 36px color-mix(in srgb, var(--shadow) 80%, transparent);
  transform: translateY(-2px);
  z-index: 2;
}

.dl-node.is-dim {
  opacity: .38;
}

.dl-node-head {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.dl-node-ico {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 24%, transparent);
  color: var(--node-accent, var(--accent));
  flex: 0 0 auto;
}

.dl-node-kind {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--node-accent, var(--accent));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-node-title {
  margin-top: 5px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.dl-node-sub {
  font-size: 10.5px;
  color: color-mix(in srgb, var(--muted) 70%, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
  min-width: 0;
  line-height: 1.3;
}

.dl-node-foot {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}

.dl-root-pill {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--node-accent, var(--accent));
  color: var(--on-accent);
  flex: 0 0 auto;
}

/* status chip variants reuse semantic tokens */
.dl-status {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  text-transform: capitalize;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
}

.dl-status.s-good { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.dl-status.s-warn { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.dl-status.s-bad { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.dl-status.s-muted { background: color-mix(in srgb, var(--muted) 16%, transparent); color: var(--muted); }

/* empty / loading state */
.dl-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 40px;
}

.dl-empty-inner {
  max-width: 360px;
}

.dl-empty-orb {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.dl-empty-orb.is-loading::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 2px solid transparent;
  border-top-color: var(--accent);
  border-right-color: color-mix(in srgb, var(--accent2) 70%, var(--accent));
  animation: dlOrbSpin .8s linear infinite;
}

@keyframes dlOrbSpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dl-empty-orb.is-loading::after,
  .dl-statbar .dl-stat,
  .dl-rib-pill,
  .dl-rib-arrow,
  .dl-node.dl-enter,
  .dl-edge-flow,
  .dl-node.is-root::after {
    animation: none;
  }
}

.dl-root-open {
  margin-left: auto;
  flex: 0 0 auto;
}

/* ── Inspector (floating, draggable, resizable detail card) ── */
.dl-stage-main.has-inspector .dl-canvas-wrap {
  /* legacy class no longer shrinks the canvas */
  inset: 0;
}

.dl-inspector {
  position: absolute;
  top: 16px;
  right: 16px;
  left: auto;
  bottom: auto;
  width: min(420px, calc(100% - 32px));
  height: min(520px, calc(100% - 32px));
  min-width: 300px;
  min-height: 220px;
  max-width: calc(100% - 16px);
  max-height: calc(100% - 16px);
  background: linear-gradient(165deg,
      color-mix(in srgb, var(--surface-2, var(--panel)) 96%, transparent),
      color-mix(in srgb, var(--card) 94%, transparent));
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--node-accent, var(--accent)));
  border-radius: 16px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--node-accent, var(--accent)) 12%, transparent),
    0 18px 48px color-mix(in srgb, var(--shadow) 72%, transparent),
    0 4px 14px color-mix(in srgb, var(--shadow) 40%, transparent);
  opacity: 0;
  transform: translateY(10px) scale(.97);
  pointer-events: none;
  transition:
    opacity .2s var(--ease-smooth),
    transform .22s var(--ease-smooth),
    box-shadow .2s ease;
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow: hidden;
}

.dl-inspector.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.dl-inspector.is-dragging,
.dl-inspector.is-resizing {
  transition: none;
  user-select: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent),
    0 22px 56px color-mix(in srgb, var(--shadow) 80%, transparent);
}

@media (max-width: 720px) {
  .dl-inspector {
    width: calc(100% - 20px);
    height: min(62%, 480px);
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dl-inspector {
    transition: none;
  }
}

body.dl-insp-gesturing {
  user-select: none;
}

body.dl-insp-gesturing-drag,
body.dl-insp-gesturing-drag * {
  cursor: grabbing !important;
}

body.dl-insp-gesturing-resize,
body.dl-insp-gesturing-resize * {
  cursor: nwse-resize !important;
}

.dl-insp-handle {
  display: none;
}

.dl-insp-head {
  padding: 12px 14px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  cursor: grab;
  touch-action: none;
  background: linear-gradient(135deg,
      color-mix(in srgb, var(--node-accent, var(--accent)) 18%, var(--panel)),
      color-mix(in srgb, var(--panel) 90%, transparent));
}

.dl-inspector.is-dragging .dl-insp-head {
  cursor: grabbing;
}

.dl-insp-drag {
  width: 14px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: 10px;
  border-radius: 4px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--muted) 70%, transparent) 1.2px, transparent 1.4px) 0 0 / 6px 6px,
    radial-gradient(circle, color-mix(in srgb, var(--muted) 70%, transparent) 1.2px, transparent 1.4px) 3px 3px / 6px 6px;
  opacity: .7;
}

.dl-insp-close {
  flex: 0 0 auto;
  margin-left: 4px;
}

.dl-insp-resize {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
  border-radius: 0 0 12px 0;
  background:
    linear-gradient(135deg,
      transparent 45%,
      color-mix(in srgb, var(--muted) 55%, transparent) 46%,
      color-mix(in srgb, var(--muted) 55%, transparent) 52%,
      transparent 53%),
    linear-gradient(135deg,
      transparent 62%,
      color-mix(in srgb, var(--muted) 55%, transparent) 63%,
      color-mix(in srgb, var(--muted) 55%, transparent) 69%,
      transparent 70%);
}

.dl-insp-resize:hover {
  background:
    linear-gradient(135deg,
      transparent 45%,
      color-mix(in srgb, var(--accent) 70%, transparent) 46%,
      color-mix(in srgb, var(--accent) 70%, transparent) 52%,
      transparent 53%),
    linear-gradient(135deg,
      transparent 62%,
      color-mix(in srgb, var(--accent) 70%, transparent) 63%,
      color-mix(in srgb, var(--accent) 70%, transparent) 69%,
      transparent 70%);
}

.dl-insp-hero-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.dl-insp-hero-ico {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--card-hover) 55%, transparent);
  color: var(--node-accent, var(--accent));
}

.dl-insp-hero-ico.is-good {
  background: radial-gradient(220px 120px at 30% 0%, color-mix(in srgb, var(--good) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--good) 10%, transparent);
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
  color: var(--good);
}

.dl-insp-hero-ico.is-warn {
  background: radial-gradient(220px 120px at 30% 0%, color-mix(in srgb, var(--warn) 16%, transparent), transparent 55%),
    color-mix(in srgb, var(--warn) 10%, transparent);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
  color: var(--warn);
}

.dl-insp-hero-ico.is-bad {
  background: radial-gradient(220px 120px at 30% 0%, color-mix(in srgb, var(--bad) 14%, transparent), transparent 55%),
    color-mix(in srgb, var(--bad) 8%, transparent);
  border-color: color-mix(in srgb, var(--bad) 30%, transparent);
  color: var(--bad);
}

.dl-insp-hero-main {
  flex: 1;
  min-width: 0;
}

.dl-insp-title {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dl-insp-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
  margin-top: 3px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dl-insp-sub.is-kind-only {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--node-accent, var(--accent));
  display: block;
  -webkit-line-clamp: unset;
}

.dl-insp-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.dl-insp-type-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 14%, transparent);
  border-color: color-mix(in srgb, var(--node-accent, var(--accent)) 32%, transparent);
  color: var(--node-accent, var(--accent));
}

.dl-insp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 45%, transparent);
}

.dl-insp-chip-k {
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 9px;
}

.dl-insp-chip-v {
  font-weight: 700;
  color: var(--text);
}

.dl-insp-chip.tone-accent {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.dl-insp-chip.tone-accent2 {
  border-color: color-mix(in srgb, var(--accent2) 35%, transparent);
  background: color-mix(in srgb, var(--accent2) 10%, transparent);
}

.dl-insp-chip.tone-accent3 {
  border-color: color-mix(in srgb, var(--accent3) 35%, transparent);
  background: color-mix(in srgb, var(--accent3) 10%, transparent);
}

.dl-insp-chip.tone-accent4 {
  border-color: color-mix(in srgb, var(--accent4) 35%, transparent);
  background: color-mix(in srgb, var(--accent4) 10%, transparent);
}

.dl-insp-body {
  padding: 12px 14px 16px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overscroll-behavior: contain;
}

.dl-insp-panel {
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--card-hover) 38%, transparent);
  overflow: hidden;
}

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

.dl-inspector.show .dl-insp-panel,
.dl-inspector.show .dl-insp-actions {
  animation: dlInspReveal .42s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
}

.dl-inspector.show .dl-insp-panel:nth-child(1) { animation-delay: .04s; }
.dl-inspector.show .dl-insp-panel:nth-child(2) { animation-delay: .10s; }
.dl-inspector.show .dl-insp-panel:nth-child(3) { animation-delay: .16s; }
.dl-inspector.show .dl-insp-panel:nth-child(4) { animation-delay: .22s; }
.dl-inspector.show .dl-insp-actions { animation-delay: .26s; }

.dl-inspector.show .dl-insp-chip {
  animation: dlInspReveal .4s ease both;
}

.dl-inspector.show .dl-insp-chip:nth-child(2) { animation-delay: .06s; }
.dl-inspector.show .dl-insp-chip:nth-child(3) { animation-delay: .10s; }
.dl-inspector.show .dl-insp-chip:nth-child(4) { animation-delay: .14s; }
.dl-inspector.show .dl-insp-chip:nth-child(5) { animation-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  .dl-inspector.show .dl-insp-panel,
  .dl-inspector.show .dl-insp-actions,
  .dl-inspector.show .dl-insp-chip {
    animation: none;
  }
}

.dl-insp-panel-title {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 45%, var(--text));
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}

.dl-insp-panel-ico {
  display: inline-flex;
  color: var(--node-accent, var(--accent));
  opacity: .9;
}

.dl-insp-flow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 2px;
  padding: 10px 11px;
}

.dl-insp-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card) 70%, transparent);
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  transition: border-color .15s, background .15s;
}

.dl-insp-flow-step:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.dl-insp-flow-step.is-current {
  border-color: color-mix(in srgb, var(--node-accent, var(--accent)) 45%, transparent);
  background: color-mix(in srgb, var(--node-accent, var(--accent)) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--node-accent, var(--accent)) 18%, transparent);
}

.dl-insp-flow-ico {
  display: inline-flex;
  color: var(--node-accent, var(--accent));
}

.dl-insp-flow-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.dl-insp-flow-label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-insp-flow-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 50%, var(--text));
}

.dl-insp-flow-arrow {
  font-size: 12px;
  color: var(--muted);
  padding: 0 2px;
  opacity: .75;
}

.dl-insp-fields {
  display: flex;
  flex-direction: column;
}

.dl-insp-field {
  display: grid;
  grid-template-columns: minmax(92px, 118px) minmax(0, 1fr);
  gap: 6px 12px;
  align-items: start;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.dl-insp-field:first-child {
  border-top: none;
}

.dl-insp-field.is-stack {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.dl-insp-field-k {
  font-size: 10.5px;
  font-weight: 800;
  color: color-mix(in srgb, var(--muted) 40%, var(--text));
  letter-spacing: .02em;
  line-height: 1.35;
  padding-top: 1px;
}

.dl-insp-field-v {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
}

.dl-insp-mono {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: -.01em;
  line-height: 1.4;
}

.dl-insp-timeline {
  list-style: none;
  margin: 0;
  padding: 10px 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dl-insp-tl-item {
  display: flex;
  gap: 10px;
  padding: 0 0 12px;
  position: relative;
}

.dl-insp-tl-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background: color-mix(in srgb, var(--border) 90%, transparent);
}

.dl-insp-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-top: 3px;
  flex: 0 0 auto;
  background: var(--accent3);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent3) 22%, transparent);
}

.dl-insp-tl-body {
  flex: 1;
  min-width: 0;
}

.dl-insp-tl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.dl-insp-tl-stage {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.dl-insp-tl-time {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
  white-space: nowrap;
}

.dl-insp-empty {
  margin: 0;
}

.dl-insp-cta {
  flex: 1 1 auto;
  min-width: 140px;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent2) 40%, var(--accent)));
  border: none;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--accent) 28%, transparent);
}

.dl-insp-actions {
  margin-top: 4px;
  padding-top: 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ========================================
   IMPORT BATCH DETAIL
   ======================================== */
.ibatch-page {
  padding-bottom: 28px;
}

/* Executive entrance choreography (record pages) */
@keyframes ibReveal {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes ibPop {
  0% { opacity: 0; transform: translateY(8px) scale(.96); }
  60% { opacity: 1; transform: translateY(0) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ibSegGrow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ibGaugeDraw {
  from { stroke-dasharray: 0, 100; }
}

.ibatch-page .hero {
  animation: ibReveal .5s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
}

.ibatch-stats {
  animation: ibReveal .5s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
  animation-delay: .06s;
}

.ibatch-stats .ops-stat {
  animation: ibPop .5s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
}

.ibatch-stats .ops-stat:nth-child(1) { animation-delay: .10s; }
.ibatch-stats .ops-stat:nth-child(2) { animation-delay: .16s; }
.ibatch-stats .ops-stat:nth-child(3) { animation-delay: .22s; }
.ibatch-stats .ops-stat:nth-child(4) { animation-delay: .28s; }
.ibatch-stats .ops-stat:nth-child(5) { animation-delay: .34s; }
.ibatch-stats .ops-stat:nth-child(6) { animation-delay: .40s; }

.ibatch-body > * {
  animation: ibReveal .55s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
}

.ibatch-body > *:nth-child(1) { animation-delay: .14s; }
.ibatch-body > *:nth-child(2) { animation-delay: .22s; }
.ibatch-body > *:nth-child(3) { animation-delay: .30s; }
.ibatch-body > *:nth-child(4) { animation-delay: .38s; }
.ibatch-body > *:nth-child(5) { animation-delay: .46s; }

.ibatch-flow-node {
  animation: ibPop .5s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
}

.ibatch-flow-node:nth-of-type(1) { animation-delay: .30s; }
.ibatch-flow-node:nth-of-type(2) { animation-delay: .40s; }
.ibatch-flow-node:nth-of-type(3) { animation-delay: .50s; }
.ibatch-flow-node:nth-of-type(4) { animation-delay: .60s; }

.ibatch-flow-arrow {
  animation: ibReveal .4s ease both;
  animation-delay: .55s;
}

.ibatch-seg {
  transform-origin: left center;
  animation: ibSegGrow .7s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
  animation-delay: .45s;
}

.ibatch-gauge-fill {
  animation: ibGaugeDraw 1s var(--ease-smooth, cubic-bezier(.4, 0, .2, 1)) both;
  animation-delay: .4s;
}

@media (prefers-reduced-motion: reduce) {
  .ibatch-page .hero,
  .ibatch-stats,
  .ibatch-stats .ops-stat,
  .ibatch-body > *,
  .ibatch-flow-node,
  .ibatch-flow-arrow,
  .ibatch-seg,
  .ibatch-gauge-fill {
    animation: none;
  }
}

.ibatch-page .hero {
  margin-bottom: 0;
}

.ibatch-stats {
  margin: 16px 28px 0;
  padding: 0;
}

.ibatch-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 16px 28px 0;
  max-width: 100%;
}

.ibatch-panel .card-inner {
  padding: 16px 18px;
}

.ibatch-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.ibatch-panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 800;
  margin: 0;
}

.ibatch-map-gauge {
  position: relative;
  flex: 0 0 auto;
}

.ibatch-gauge-svg {
  transform: rotate(-90deg);
}

.ibatch-gauge-bg {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 90%, transparent);
  stroke-width: 3;
}

.ibatch-gauge-fill {
  fill: none;
  stroke: var(--accent2);
  stroke-width: 3;
  stroke-linecap: round;
}

.ibatch-gauge-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: var(--text);
}

.ibatch-flow {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 6px 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--card-hover) 35%, transparent);
  margin-bottom: 14px;
}

.ibatch-flow-node {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card) 75%, transparent);
  min-width: 120px;
  flex: 1 1 120px;
  max-width: 220px;
}

.ibatch-flow-node.is-current {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.ibatch-flow-node.is-pending {
  opacity: .55;
  border-style: dashed;
}

.ibatch-flow-node.is-pending .ibatch-flow-ico {
  color: var(--muted);
}

.ibatch-flow-ico {
  display: inline-flex;
  color: var(--accent);
}

.ibatch-flow-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.ibatch-flow-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
}

.ibatch-flow-arrow {
  align-self: center;
  font-size: 14px;
  color: var(--muted);
  opacity: .75;
  padding: 0 2px;
}

.ibatch-lifecycle-block {
  margin-bottom: 14px;
}

.ibatch-meta-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.ibatch-meta-chip {
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.ibatch-meta-k {
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.ibatch-meta-v {
  font-size: 12px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ibatch-meta-v code {
  font-size: 11px;
}

.ibatch-map-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  .ibatch-map-cols {
    grid-template-columns: 1fr;
  }

  .ibatch-stats,
  .ibatch-body {
    margin-left: 16px;
    margin-right: 16px;
  }
}

.ibatch-map-unmapped {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

.ibatch-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.ibatch-rows-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
}

.ibatch-rows-table th {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
}

.ibatch-rows-table td {
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  vertical-align: top;
}

.ibatch-hero-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.ibatch-hero-ico {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
  color: var(--text);
}

.ibatch-hero-ico.ok {
  background: radial-gradient(240px 140px at 30% 0%, color-mix(in srgb, var(--good) 18%, transparent), transparent 55%),
    color-mix(in srgb, var(--good) 10%, transparent);
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
  color: var(--good);
}

.ibatch-hero-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.ibatch-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 45%, transparent);
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibatch-chip.tone-accent {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.ibatch-export {
  position: relative;
}

.ibatch-export summary {
  list-style: none;
  cursor: pointer;
}

.ibatch-export summary::-webkit-details-marker {
  display: none;
}

.ibatch-export-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--modal-bg, var(--surface));
  box-shadow: var(--shadow);
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ibatch-export-menu a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
}

.ibatch-export-menu a:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.ibatch-segbar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--card-hover) 40%, transparent);
}

.ibatch-seg {
  display: block;
  min-width: 2px;
  transition: width .25s var(--ease-smooth);
}

.ibatch-seg.is-staged {
  background: linear-gradient(90deg, color-mix(in srgb, var(--good) 85%, transparent), var(--good));
}

.ibatch-seg.is-claimed {
  background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 85%, transparent), var(--warn));
}

.ibatch-seg.is-consumed {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent), var(--accent));
}

.ibatch-seg.is-rejected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 80%, transparent), var(--bad));
}

.ibatch-seg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}

.ibatch-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 5px;
  vertical-align: -1px;
}

.ibatch-dot.is-staged { background: var(--good); }
.ibatch-dot.is-claimed { background: var(--warn); }
.ibatch-dot.is-consumed { background: var(--accent); }
.ibatch-dot.is-rejected { background: var(--bad); }

.ibatch-map-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.1fr);
  gap: 10px;
  align-items: center;
  padding: 9px 11px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  background: color-mix(in srgb, var(--card-hover) 35%, transparent);
}

.ibatch-map-row.is-mapped {
  border-color: color-mix(in srgb, var(--accent2) 32%, transparent);
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
}

.ibatch-map-canonical {
  min-width: 0;
}

.ibatch-map-k {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.ibatch-map-code {
  display: block;
  font-size: 10px;
  margin-top: 2px;
  color: var(--muted);
}

.ibatch-map-arrow {
  display: inline-flex;
  color: var(--muted);
  opacity: .8;
}

.ibatch-map-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ibatch-rows-table tbody tr {
  cursor: pointer;
  transition: background .12s;
}

.ibatch-rows-table tbody tr:hover,
.ibatch-rows-table tbody tr:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  outline: none;
}

.ibatch-contact {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ibatch-contact-line code {
  font-size: 11px;
}

.ibatch-loc {
  font-size: 12px;
}

.irow-raw > summary {
  cursor: pointer;
  list-style: none;
  margin-bottom: 0;
}

.irow-raw > summary::-webkit-details-marker {
  display: none;
}

.irow-raw[open] > summary {
  margin-bottom: 12px;
}

  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Territory configuration report (builder + printable)
   ═══════════════════════════════════════════════════════════════════════ */
.tr-report {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 0 2rem;
}

.tr-report-toolbar {
  margin-bottom: 1rem;
}

.tr-report-header {
  margin-bottom: 1.25rem;
}

.tr-report-title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}

.tr-report-lede {
  margin: 0 0 0.5rem;
  color: var(--muted);
  max-width: 820px;
  line-height: 1.55;
}

.tr-report-meta {
  font-size: 12px;
}

.tr-report-stats {
  margin-bottom: 1.25rem;
}

.tr-report-callout {
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 92%, transparent);
}

.tr-report-callout-warn {
  border-color: color-mix(in srgb, var(--accent3) 35%, var(--border));
  background: color-mix(in srgb, var(--accent3) 8%, var(--panel));
}

.tr-report-callout-title {
  font-weight: 800;
  margin-bottom: 6px;
}

.tr-report-callout-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

.tr-report-section {
  margin-bottom: 1.75rem;
}

.tr-report-section h2 {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.tr-report-section-note {
  font-size: 12px;
  margin: 0 0 0.75rem;
}

.tr-report-table th.num,
.tr-report-table td.num {
  text-align: right;
}

.tr-report-table-compact {
  font-size: 12px;
}

.tr-report-territory {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 14px;
  background: color-mix(in srgb, var(--panel) 94%, transparent);
}

.tr-report-territory-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.tr-report-territory-head h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
}

.tr-report-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 10px 0;
}

.tr-report-carriers h4 {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 700;
}

.tr-report-carriers {
  margin-bottom: 10px;
}

.tr-report-footer {
  font-size: 12px;
  line-height: 1.5;
  margin-top: 1rem;
}

.tr-report-form .tr-report-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}

.tr-report-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  background: color-mix(in srgb, var(--panel) 96%, transparent);
}

.tr-report-option:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.tr-report-option input {
  margin-top: 3px;
}

.tr-report-option-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tr-report-option-id {
  font-weight: 800;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}

.tr-report-option-name {
  font-weight: 700;
}

@media print {
  html,
  body {
    background: #ffffff !important;
    color: #0b1220 !important;
  }

  body:has(.tr-report) .app-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  body:has(.tr-report) .app-main,
  body:has(.tr-report) .wrap {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    max-width: none !important;
  }

  body:has(.tr-report) .sidebar,
  body:has(.tr-report) .sidebar-backdrop,
  body:has(.tr-report) .topbar,
  body:has(.tr-report) .toast-host,
  .tr-report-no-print {
    display: none !important;
  }

  .tr-report {
    max-width: 100%;
    padding: 0;
    color: #0b1220 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .tr-report * {
    text-shadow: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  .tr-report .muted,
  .tr-report .tr-report-meta,
  .tr-report .tr-report-lede,
  .tr-report-section-note {
    color: #475569 !important;
  }

  .tr-report-title,
  .tr-report-section h2,
  .tr-report-section h3,
  .tr-report-territory-head h3 {
    color: #0b1220 !important;
  }

  .tr-report .stat-card,
  .tr-report-callout,
  .tr-report-territory {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
  }

  .tr-report-territory {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .tr-report-table {
    font-size: 9px;
    width: 100% !important;
  }

  .tr-report-table th,
  .tr-report-table td {
    border: 1px solid #cbd5e1 !important;
    padding: 4px 6px !important;
    color: #0b1220 !important;
  }

  .tr-report-table thead {
    display: table-header-group;
  }

  .tr-report-table tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  @page {
    size: letter portrait;
    margin: 0.45in;
  }
}

/* ── Routing canvas (territory ↔ subscriber assignments) ── */
.routing-canvas-page {
  padding-bottom: 32px;
}

.routing-stats {
  margin-top: 8px;
}

.routing-layout {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 440px);
  align-items: start;
}

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

.routing-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.routing-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.routing-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 180px;
}

.routing-search-wrap input {
  flex: 1;
  min-width: 0;
}

.routing-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 220px;
  overflow: auto;
  padding: 2px;
}

/* Scope boards: full-width readable assign rows (no truncated names) */
.routing-scope-pool.routing-chip-grid,
.routing-scope-lane.routing-chip-grid {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  max-height: min(52vh, 420px);
  padding: 6px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 72%, var(--surface));
}

.routing-chip {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
  max-width: 160px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: grab;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.routing-scope-pool .routing-chip,
.routing-scope-lane .routing-chip {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 10px 12px;
  border-radius: 10px;
}

.routing-scope-pool .routing-chip.assigned,
.routing-scope-lane .routing-chip.assigned {
  min-width: 0;
  max-width: none;
}

.routing-chip:active {
  cursor: grabbing;
}

.routing-chip.is-unassigned {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
}

.routing-chip.has-warn {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 35%, transparent);
}

.routing-chip.assigned {
  min-width: 100px;
  max-width: 140px;
}

.routing-chip-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  padding-right: 4px;
}

.routing-chip-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.routing-scope-pool .routing-chip-title,
.routing-scope-lane .routing-chip-title {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

.routing-chip-id {
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.routing-chip-status {
  flex: 0 0 auto;
  align-self: center;
  max-width: 42%;
  text-align: right;
}

.routing-chip-status .badge {
  white-space: normal;
  text-align: right;
  line-height: 1.25;
}

.routing-chip-meta {
  font-size: 10px;
}

.routing-chip-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font-size: 14px;
}

.routing-scope-pool .routing-chip-remove,
.routing-scope-lane .routing-chip-remove {
  position: static;
  flex: 0 0 auto;
  align-self: center;
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.routing-chip-remove:hover {
  color: var(--bad);
  background: color-mix(in srgb, var(--bad) 12%, var(--panel));
}

.routing-scope-note {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.routing-scope-empty-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.routing-drop-zone {
  margin-top: 10px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}

.routing-drop-zone.is-drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.routing-lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.routing-lane.is-catch-all {
  border-style: dashed;
}

.routing-lane.is-focused {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.routing-lane-title {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
}

.routing-lane-title:hover {
  color: var(--accent);
}

.routing-lane-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 52px;
  margin-top: 10px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  transition: border-color 0.15s, background 0.15s;
}

.routing-lane-chips.is-drag-over {
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 8%, var(--surface));
}

.routing-lane-empty {
  width: 100%;
  align-self: center;
  text-align: center;
  pointer-events: none;
}

.routing-lane-chips:not(:empty) .routing-lane-empty {
  display: none;
}

.routing-inspector-panel {
  position: sticky;
  top: 72px;
}

.routing-inspector-block {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.routing-inspector-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.routing-inspector-link {
  font-weight: 700;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}

.routing-inspector-link:hover {
  color: var(--accent);
}

.routing-inspector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 4px 0;
  font-size: 12px;
  color: var(--text);
  text-decoration: none;
}

.routing-inspector-row.row-click:hover {
  color: var(--accent);
}

.routing-disposition-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.routing-inspector-embed {
  margin-top: 14px;
}

.routing-inspector-embed .routing-inspector-panel {
  position: static;
}

.routing-assign-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.routing-assign-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 11px;
  font-weight: 700;
}

.routing-view-toggle {
  margin-left: auto;
}

.routing-map-panel:not(.tw-hidden) + .routing-board {
  display: none;
}

.routing-coverage-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.routing-coverage-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.routing-coverage-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent2);
  line-height: 1;
}

.routing-catch-all-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent2) 40%, var(--border));
  background: color-mix(in srgb, var(--accent2) 6%, var(--surface));
}

.routing-quick-assign-card {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
}

.routing-quick-assign-grid {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .routing-quick-assign-grid {
    grid-template-columns: 1fr;
  }
}

.routing-quick-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 6px;
}

.routing-quick-select,
.routing-quick-search {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
}

.routing-quick-help a {
  color: var(--accent);
  font-weight: 700;
}

.routing-quick-terr-list {
  min-height: 140px;
  padding: 0;
  border: none;
  background: transparent;
}

.routing-quick-terr-list .routing-scope-board {
  width: 100%;
}

.routing-scope-board {
  margin-top: 4px;
}

.routing-scope-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
}

.routing-scope-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 22px;
  font-weight: 800;
  padding-top: 28px;
}

.routing-scope-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}

.routing-scope-search {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 12px;
}

.routing-scope-toolbar-hint {
  flex: 1 1 100%;
}

.routing-scope-chip.is-picked {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  border-color: var(--accent);
}

.routing-linked-summary {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--panel));
}

.routing-linked-summary--received {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
}

.routing-linked-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.routing-chip.is-read-only,
.routing-chip.is-received {
  cursor: default;
  pointer-events: auto;
}

.routing-chip.is-received {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
}

.routing-chip.is-read-only {
  text-decoration: none;
}

.packwiz-geo-batch-item {
  cursor: pointer;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.packwiz-geo-batch-item input {
  flex-shrink: 0;
}

.packwiz-geo-batch-list {
  max-height: 220px;
  overflow: auto;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
}

@media (max-width: 640px) {
  .routing-scope-columns {
    grid-template-columns: 1fr;
  }

  .routing-scope-bridge {
    padding-top: 0;
    transform: rotate(90deg);
  }
}

.routing-scope-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 120px;
}

.routing-scope-col-head {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}

.routing-scope-col-head--actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.routing-scope-col-title {
  flex: 1 1 auto;
  min-width: 0;
}

.routing-scope-col-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.routing-scope-col-actions .btn.tiny,
.routing-scope-col-actions .btn-ghost.tiny {
  font-size: 10px;
  padding: 4px 8px;
}

.routing-scope-clear-assigned:not(:disabled) {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
}

.routing-scope-pool,
.routing-scope-lane {
  flex: 1;
  min-height: 100px;
  padding: 8px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: var(--panel);
  transition: border-color 0.15s, background 0.15s;
}

.routing-scope-pool.is-drag-over,
.routing-scope-lane.is-drag-over {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
}

.routing-scope-lane .routing-scope-empty {
  width: 100%;
  text-align: center;
  font-size: 11px;
  padding: 24px 8px;
  pointer-events: none;
}

.routing-scope-lane:not(:has(.routing-chip.assigned)) .routing-scope-empty {
  display: block;
}

.routing-scope-lane:has(.routing-chip.assigned) .routing-scope-empty {
  display: none;
}

.routing-scope-primary-gate {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.routing-scope-primary-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--accent);
}

.routing-quick-terr-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
}

.routing-quick-terr-item:hover {
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.routing-quick-terr-item:has(input:checked) {
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}

.routing-assign-grid {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 900px) {
  .routing-assign-grid {
    grid-template-columns: 1fr;
  }
}

.routing-subscriber-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-subscriber-item {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.routing-subscriber-item:hover,
.routing-subscriber-item:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.routing-subscriber-item.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.routing-subscriber-name {
  font-size: 13px;
  font-weight: 800;
}

.routing-catch-all-row {
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}

.routing-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 80%, var(--surface));
}

.routing-territory-groups {
  max-height: min(62vh, 560px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-state-group {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.routing-state-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  list-style: none;
}

.routing-state-summary::-webkit-details-marker {
  display: none;
}

.routing-territory-rows {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.routing-territory-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.14s ease, box-shadow 0.14s ease;
}

.routing-territory-row:last-child {
  border-bottom: none;
}

.routing-territory-row:hover {
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}

.routing-territory-row:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.routing-territory-row.is-active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.routing-territory-row.is-unassigned {
  background: color-mix(in srgb, var(--warn) 5%, transparent);
}

.routing-territory-row.has-warn {
  box-shadow: inset 3px 0 0 var(--warn);
}

.routing-territory-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 auto;
}

.routing-territory-row > .routing-territory-name {
  flex: 1 1 auto;
}

.routing-territory-name {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.routing-territory-meta {
  flex: 0 0 auto;
}

.routing-territory-assign-btn {
  flex: 0 0 auto;
  opacity: 0.85;
}

.routing-territory-row:hover .routing-territory-assign-btn,
.routing-territory-row.is-active .routing-territory-assign-btn {
  opacity: 1;
}

.routing-inspector-assign-block {
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
}

.routing-inspector-assign-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-inspector-assign-grid-scroll {
  max-height: 220px;
  overflow: auto;
}

.routing-inspector-assign-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font-size: 12px;
}

.routing-inspector-assign-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.routing-inspector-assign-toggle:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.routing-inspector-assign-name {
  flex: 1 1 auto;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-inspector-drill {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  font: inherit;
  color: var(--text);
  padding: 8px 10px;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.routing-inspector-drill:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.routing-inspector-territory-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.routing-inspector-territory-chips .routing-assign-chip,
.routing-inspector-territory-chips .routing-inspector-drill {
  width: auto;
  margin-bottom: 0;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
}

.routing-inspector-drill-inline {
  flex: 1 1 auto;
  width: auto;
  margin-bottom: 0;
  padding: 0;
  border: none;
  background: transparent;
  font-weight: 700;
  text-align: left;
  min-width: 0;
}

.routing-inspector-drill-inline:hover {
  color: var(--accent);
  background: transparent;
  border: none;
}

.routing-inspector-pack-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-inspector-pack-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 10px;
  background: var(--surface);
}

.routing-inspector-pack-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  margin-bottom: 6px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--text);
  text-align: left;
}

.routing-inspector-pack-main:hover {
  color: var(--accent);
}

.routing-inspector-pack-title {
  font-size: 12px;
  font-weight: 700;
}

.routing-inspector-pack-meta {
  align-items: center;
}

.routing-inspector-subscriber-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-inspector-subscriber-card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.routing-inspector-subscriber-card:hover,
.routing-inspector-subscriber-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--panel));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.routing-inspector-subscriber-card.is-read-only {
  opacity: 0.92;
}

.routing-inspector-subscriber-card.is-read-only:hover,
.routing-inspector-subscriber-card.is-read-only:focus-visible {
  border-color: color-mix(in srgb, var(--muted) 35%, var(--border));
  background: color-mix(in srgb, var(--muted) 6%, var(--panel));
  box-shadow: none;
}

.routing-inspector-subscriber-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.routing-inspector-drill-hint {
  margin-left: auto;
  flex: 0 0 auto;
}

.routing-inspector-chain {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 85%, var(--surface));
}

.routing-inspector-chain-node {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 4px 8px;
  border-radius: 8px;
}

.routing-inspector-chain-node:not(.is-current):hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.routing-inspector-chain-node.is-current {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-radius: 8px;
}

.routing-inspector-chain-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.routing-inspector-chain-value {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.routing-inspector-chain-arrow {
  color: var(--muted);
  font-size: 12px;
  flex: 0 0 auto;
}

.routing-inspector-delivery-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
}

.routing-inspector-delivery-row:last-child {
  border-bottom: none;
}

.routing-inspector-delivery-url {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 10px;
  word-break: break-all;
  color: var(--muted);
  background: transparent;
  padding: 0;
}

.routing-subscriber-item.is-primary {
  opacity: 0.85;
}

/* Hover-reveal "inspect" affordance — replaces the old per-row 360° button. */
.routing-row-go {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.14s ease, transform 0.14s ease, color 0.14s ease;
  pointer-events: none;
}

.routing-territory-row:hover .routing-row-go,
.routing-territory-row:focus-visible .routing-row-go {
  opacity: 0.85;
  transform: translateX(0);
}

.routing-territory-row.is-active .routing-row-go {
  opacity: 1;
  transform: translateX(0);
  color: var(--accent);
}

/* Icon-only inspector trigger on subscriber lanes (replaces text 360°). */
.routing-inspect-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}

.routing-inspect-btn:hover,
.routing-inspect-btn:focus-visible {
  outline: none;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

/* Delivery 360 inspector — titlebar + empty state */
.routing-inspector-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.routing-inspector-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 11px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
}

.routing-inspector-titlebar-text {
  min-width: 0;
}

.routing-inspector-title {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.routing-inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 28px 16px;
}

.routing-inspector-empty-glyph {
  display: inline-flex;
  color: color-mix(in srgb, var(--accent) 55%, var(--muted));
  opacity: 0.7;
  margin-bottom: 2px;
}

.routing-inspector-empty-title {
  font-size: 13px;
  font-weight: 800;
}

/* Inspector head — focus-type kicker */
.routing-inspector-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 2px;
}

.routing-inspector-headline {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.25;
}

/* ===== Delivery 360 — radial chain visualization ===== */
.routing-360 {
  margin: 6px 0 4px;
}

.r360-svg {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin: 0 auto;
}

.r360-orbit {
  fill: none;
  stroke: color-mix(in srgb, var(--border) 80%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 3 7;
  opacity: 0.7;
}

.r360-orbit.spin {
  transform-origin: center;
  animation: r360spin 90s linear infinite;
}

@keyframes r360spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .r360-orbit.spin {
    animation: none;
  }
}

.r360-spoke {
  stroke: color-mix(in srgb, var(--border) 75%, transparent);
  stroke-width: 1.4;
}

.r360-spoke.is-on {
  stroke: color-mix(in srgb, var(--accent) 55%, var(--border));
  stroke-width: 1.8;
}

.r360-hub-bg {
  fill: color-mix(in srgb, var(--accent) 10%, var(--panel));
  stroke: color-mix(in srgb, var(--accent) 55%, var(--border));
  stroke-width: 1.6;
}

.r360-hub-kind {
  fill: var(--accent);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.r360-hub-name {
  fill: var(--text);
  font-size: 12px;
  font-weight: 800;
}

.r360-hub-meta {
  fill: var(--muted);
  font-size: 8.5px;
  font-weight: 600;
}

.r360-node-bg {
  fill: var(--surface);
  stroke: var(--border);
  stroke-width: 1.4;
  transition: stroke 0.15s ease, fill 0.15s ease;
}

.r360-count {
  fill: var(--text);
  font-size: 15px;
  font-weight: 800;
}

.r360-label {
  fill: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.r360-node.tone-accent .r360-node-bg {
  fill: color-mix(in srgb, var(--accent) 12%, var(--surface));
  stroke: color-mix(in srgb, var(--accent) 60%, var(--border));
}

.r360-node.tone-accent .r360-count {
  fill: var(--accent);
}

.r360-node.tone-good .r360-node-bg {
  fill: color-mix(in srgb, var(--success) 14%, var(--surface));
  stroke: color-mix(in srgb, var(--success) 60%, var(--border));
}

.r360-node.tone-good .r360-count {
  fill: var(--success);
}

.r360-node.tone-warn .r360-node-bg {
  fill: color-mix(in srgb, var(--warn) 14%, var(--surface));
  stroke: color-mix(in srgb, var(--warn) 60%, var(--border));
}

.r360-node.tone-warn .r360-count {
  fill: color-mix(in srgb, var(--warn) 85%, var(--text));
}

.r360-node.tone-bad .r360-node-bg {
  fill: color-mix(in srgb, var(--danger) 14%, var(--surface));
  stroke: color-mix(in srgb, var(--danger) 60%, var(--border));
}

.r360-node.tone-bad .r360-count {
  fill: var(--danger);
}

.r360-node.tone-idle .r360-node-bg {
  stroke-dasharray: 3 4;
  opacity: 0.55;
}

.r360-node.tone-idle .r360-count,
.r360-node.tone-idle .r360-label {
  fill: var(--muted);
  opacity: 0.7;
}

.r360-node.clickable {
  cursor: pointer;
}

.r360-node.clickable:hover .r360-node-bg,
.r360-node.clickable:focus-visible .r360-node-bg {
  outline: none;
  stroke: var(--accent);
  fill: color-mix(in srgb, var(--accent) 18%, var(--surface));
}

/* Subscriber rail — catch-all cards are clickable inspect targets */
.routing-subscriber-item.is-catch-all {
  border-style: dashed;
}

.routing-subscriber-item.is-viewing {
  border-color: color-mix(in srgb, var(--accent) 60%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

.routing-subscriber-group-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 12px 0 6px;
}

.routing-subscriber-empty {
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 70%, var(--surface));
  font-size: 12px;
}

.routing-matrix-scroll {
  overflow: auto;
  max-height: min(62vh, 560px);
}

.routing-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.routing-matrix-table th,
.routing-matrix-table td {
  border: 1px solid var(--border);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

.routing-matrix-terr-head {
  text-align: left;
  min-width: 140px;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 1;
}

.routing-matrix-terr-btn {
  border: none;
  background: none;
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.routing-matrix-terr-btn:hover {
  color: var(--accent);
}

.routing-matrix-col-head span {
  display: block;
  max-width: 88px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.routing-matrix-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--border);
}

.routing-matrix-dot.is-on {
  background: var(--accent2);
}

.routing-assign-menu {
  position: absolute;
  z-index: 120;
  min-width: 180px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--modal-bg);
  box-shadow: var(--shadow);
}

.routing-assign-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  color: var(--text);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
}

.routing-assign-menu-item:hover,
.routing-assign-menu-item:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  outline: none;
}

.routing-chip-assign-btn {
  margin-top: 4px;
  width: 100%;
  cursor: pointer;
}

.tw-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.routing-chip.is-dragging {
  opacity: 0.55;
}

/* ============================================================================
   eigenFlow v3 — single-screen, at-a-glance executive surface (efx-)
   Self-contained dark cinematic panel. Crisp type, modern SVG gauges + flow.
   ========================================================================== */
.efx-stage {
  --efx-ink: #f1f5ff;
  --efx-mut: rgba(203, 213, 225, 0.66);
  --efx-faint: rgba(148, 163, 184, 0.5);
  --efx-line: rgba(255, 255, 255, 0.1);
  --efx-line-2: rgba(255, 255, 255, 0.16);
  --efx-panel: rgba(255, 255, 255, 0.045);
  --efx-panel-2: rgba(255, 255, 255, 0.07);
  --efx-violet: #69266f;
  --efx-cyan: #38bdf8;
  --efx-mint: #34d399;
  --efx-amber: #fbbf24;
  --efx-pink: #f472b6;
  --efx-indigo: #4c9fce;

  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.8vh, 20px);
  min-height: calc(100vh - 108px);
  padding: clamp(16px, 2.2vh, 26px) clamp(18px, 2vw, 30px);
  border-radius: 22px;
  overflow: hidden;
  isolation: isolate;
  color: var(--efx-ink);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(105, 38, 111, 0.16), transparent 55%),
    radial-gradient(110% 90% at 100% 0%, rgba(56, 189, 248, 0.12), transparent 52%),
    radial-gradient(120% 100% at 50% 120%, rgba(52, 211, 153, 0.1), transparent 55%),
    linear-gradient(160deg, #0a0f24 0%, #0c1330 48%, #0a0e22 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 30px 80px -40px rgba(0, 0, 0, 0.8),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.efx-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}
.efx-aurora {
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 18% 22%, rgba(105, 38, 111, 0.22), transparent 60%),
    radial-gradient(36% 44% at 82% 18%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(44% 50% at 70% 92%, rgba(52, 211, 153, 0.14), transparent 60%);
  filter: blur(8px);
  animation: efxDrift 26s ease-in-out infinite alternate;
}
.efx-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 35%, transparent 85%);
}
@keyframes efxDrift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(2%, 1.5%, 0) scale(1.06); }
}

.efx-head,
.efx-arch,
.efx-flow,
.efx-gauges,
.efx-drilldown,
.efx-status,
.efx-print-only { position: relative; z-index: 1; }

/* ── Architecture strip ─────────────────────────────────────────────── */
.efx-arch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--efx-line);
  font-size: 12px;
  color: var(--efx-mut);
}
.efx-arch-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--efx-ink);
  background: linear-gradient(135deg, rgba(105, 38, 111, 0.35), rgba(56, 189, 248, 0.25));
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.efx-arch-item { font-weight: 500; }
.efx-arch-item b { color: var(--efx-ink); font-weight: 750; font-variant-numeric: tabular-nums; }
.efx-arch-sep { opacity: 0.45; }

/* ── Stage drill-down ─────────────────────────────────────────────────── */
.efx-drilldown {
  border-radius: 16px;
  border: 1px solid var(--efx-line);
  background: rgba(255, 255, 255, 0.03);
  padding: 0 14px 14px;
}
.efx-drilldown-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 2px;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--efx-ink);
  list-style: none;
}
.efx-drilldown-summary::-webkit-details-marker { display: none; }
.efx-drilldown-hint {
  margin-left: auto;
  font-weight: 500;
  font-size: 11px;
  color: var(--efx-faint);
}
.efx-drilldown-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.efx-drill-group h4 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--efx-ink);
}
.efx-drill-count {
  display: inline-flex;
  min-width: 18px;
  justify-content: center;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--efx-mut);
}
.efx-drill-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.efx-drill-item {
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.efx-drill-item[data-kind="worker_publish"],
.efx-drill-item[data-kind="delivery"] {
  border-color: rgba(52, 211, 153, 0.25);
}
.efx-drill-label {
  display: block;
  font-size: 12px;
  font-weight: 650;
  color: var(--efx-ink);
}
.efx-drill-id {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  color: var(--efx-faint);
}
.efx-drill-sum,
.efx-drill-file {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.35;
  color: var(--efx-mut);
}
.efx-subgraph-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--efx-line);
}
.efx-subgraph-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--efx-mut);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.efx-policy-body { padding-top: 2px; }
.efx-policy-body .efx-checks li { font-size: 12.5px; }

.efx-card[data-accent="dedupe"] { --efx-acc: var(--efx-cyan); }
.efx-card[data-accent="quality"] { --efx-acc: var(--efx-amber); }

/* ── Header ───────────────────────────────────────────────────────────── */
.efx-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.efx-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.efx-logo { width: 34px; height: 34px; border-radius: 9px; flex: none; }
.efx-brand-text { display: flex; flex-direction: column; min-width: 0; }
.efx-brand-name {
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.efx-brand-sub {
  font-size: 12px;
  color: var(--efx-mut);
  font-weight: 500;
  letter-spacing: 0.002em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.efx-head-right { display: flex; align-items: center; gap: 10px; flex: none; }

.efx-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.1);
  border: 1px solid rgba(52, 211, 153, 0.28);
  font-size: 11.5px;
  font-weight: 600;
}
.efx-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--efx-mint);
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: efxPing 1.8s ease-out infinite;
}
@keyframes efxPing {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
}
.efx-live-status { color: var(--efx-mint); }
.efx-live-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--efx-mut);
}

.efx-seg {
  display: inline-flex;
  padding: 3px;
  border-radius: 11px;
  background: var(--efx-panel);
  border: 1px solid var(--efx-line);
}
.efx-seg-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--efx-mut);
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 6px 13px;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s;
}
.efx-seg-btn:hover { color: var(--efx-ink); }
.efx-seg-btn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--efx-violet), #6d28d9);
  box-shadow: 0 6px 18px -8px rgba(105, 38, 111, 0.9);
}
.efx-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--efx-panel);
  border: 1px solid var(--efx-line);
  color: var(--efx-mut);
  cursor: pointer;
  font-size: 17px;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.efx-icon-btn:hover {
  color: var(--efx-ink);
  border-color: var(--efx-line-2);
  background: var(--efx-panel-2);
}

/* ── The Flow rail ────────────────────────────────────────────────────── */
.efx-flow {
  border-radius: 16px;
  padding: clamp(12px, 1.6vh, 18px) clamp(14px, 1.6vw, 22px) clamp(16px, 2vh, 22px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015));
  border: 1px solid var(--efx-line);
}
.efx-flow-meta {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: clamp(12px, 1.8vh, 20px);
}
.efx-flow-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.efx-flow-sub { font-size: 11.5px; color: var(--efx-faint); font-weight: 500; }

.efx-rail {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  align-items: start;
}
.efx-rail-line {
  position: absolute;
  top: 22px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg,
    var(--efx-violet), var(--efx-cyan), var(--efx-mint),
    var(--efx-amber), var(--efx-pink) 90%);
  opacity: 0.5;
  border-radius: 2px;
  overflow: visible;
}
.efx-rail-pulse {
  position: absolute;
  top: 50%;
  left: 0;
  width: 70px;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 4px;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  filter: blur(0.5px);
  opacity: 0.9;
  animation: efxTravel 4.6s linear infinite;
}
@keyframes efxTravel {
  0% { left: -8%; opacity: 0; }
  8% { opacity: 0.95; }
  92% { opacity: 0.95; }
  100% { left: 102%; opacity: 0; }
}

.efx-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
  animation: efxRise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--efx-i) * 0.06s);
}
@keyframes efxRise {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.efx-orb {
  position: relative;
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--efx-line-2);
  color: #fff;
  font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.efx-orb-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: var(--efx-glow, var(--efx-violet));
  border-right-color: var(--efx-glow, var(--efx-violet));
  opacity: 0.7;
  animation: efxSpin 7s linear infinite;
}
@keyframes efxSpin { to { transform: rotate(360deg); } }

.efx-step[data-group="plan"] { --efx-glow: var(--efx-violet); }
.efx-step[data-group="acquire"] { --efx-glow: var(--efx-cyan); }
.efx-step[data-group="normalize"] { --efx-glow: var(--efx-indigo); }
.efx-step[data-group="enrich"] { --efx-glow: var(--efx-mint); }
.efx-step[data-group="gate"] { --efx-glow: var(--efx-amber); }
.efx-step[data-group="score"] { --efx-glow: var(--efx-pink); }
.efx-step[data-group="comply"] { --efx-glow: var(--efx-mint); }
.efx-step[data-group="publish"] { --efx-glow: var(--efx-cyan); }
.efx-step .efx-orb {
  color: var(--efx-glow);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 18px -4px var(--efx-glow);
}

.efx-step-num {
  margin-top: 9px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  color: var(--efx-glow, var(--efx-faint));
  letter-spacing: 0.06em;
}
.efx-step-name {
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.efx-step-count { font-size: 10.5px; color: var(--efx-faint); font-weight: 500; margin-top: 1px; }
.efx-step-desc {
  margin-top: 5px;
  max-width: 15ch;
  font-size: 10.5px;
  line-height: 1.35;
  font-weight: 450;
  color: var(--efx-mut);
  text-wrap: balance;
}

/* ── Gauges grid ──────────────────────────────────────────────────────── */
.efx-gauges {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(12px, 1.2vw, 18px);
  min-height: 0;
}
.efx-card {
  --efx-acc: var(--efx-violet);
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 14px 16px 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02));
  border: 1px solid var(--efx-line);
  overflow: hidden;
}
.efx-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--efx-acc) 55%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0.8;
}
.efx-card::after {
  content: "";
  position: absolute;
  top: -40%;
  left: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, color-mix(in srgb, var(--efx-acc) 30%, transparent), transparent 70%);
  filter: blur(28px);
  opacity: 0.5;
  pointer-events: none;
}
.efx-card[data-accent="score"] { --efx-acc: var(--efx-violet); }
.efx-card[data-accent="comply"] { --efx-acc: var(--efx-mint); }
.efx-card[data-accent="rag"] { --efx-acc: var(--efx-cyan); }
.efx-card[data-accent="deliver"] { --efx-acc: var(--efx-amber); }

.efx-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.efx-card-head .ti-svg { color: var(--efx-acc); flex: none; }
.efx-card-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
}
.efx-card-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 8px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--efx-acc) 85%, #fff);
  background: color-mix(in srgb, var(--efx-acc) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--efx-acc) 30%, transparent);
  white-space: nowrap;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.efx-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 14px;
  min-height: 0;
}

/* ── Shared gauge layout ─────────────────────────────────────────────── */
.efx-score-top,
.efx-comply-body,
.efx-deliver-body,
.efx-rag-body {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  width: 100%;
}
.efx-score-body {
  gap: 12px;
}
.efx-gauge-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: none;
  min-width: 108px;
}
.efx-gauge-caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--efx-mut);
  text-align: center;
  line-height: 1.25;
  max-width: 108px;
}

/* ── KPI stack (hero metrics beside gauges) ───────────────────────────── */
.efx-kpi-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  min-width: 0;
  padding-top: 4px;
}
.efx-kpi {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.efx-kpi-val {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--efx-ink);
  font-variant-numeric: tabular-nums;
}
.efx-kpi-lbl {
  font-size: 12px;
  font-weight: 550;
  color: var(--efx-mut);
  line-height: 1.25;
}

/* ── Scoring donut ────────────────────────────────────────────────────── */
.efx-donut {
  position: relative;
  width: 108px;
  aspect-ratio: 1;
  flex: none;
}
.efx-donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.efx-donut-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 13;
}
.efx-donut-seg {
  fill: none;
  stroke-width: 13;
  stroke-linecap: round;
  transform-origin: 65px 65px;
  opacity: 0;
  animation: efxSegIn 0.6s ease both;
  animation-delay: var(--seg-delay, 0s);
  filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 60%, transparent));
}
@keyframes efxSegIn { to { opacity: 1; } }
.efx-c1 { stroke: var(--efx-violet); color: var(--efx-violet); }
.efx-c2 { stroke: var(--efx-cyan); color: var(--efx-cyan); }
.efx-c3 { stroke: var(--efx-mint); color: var(--efx-mint); }
.efx-c4 { stroke: var(--efx-amber); color: var(--efx-amber); }
.efx-c5 { stroke: var(--efx-pink); color: var(--efx-pink); }
.efx-c6 { stroke: var(--efx-indigo); color: var(--efx-indigo); }

.efx-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 0 8px;
}
.efx-donut-v {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.efx-donut-s {
  font-size: 11px;
  color: var(--efx-mut);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.efx-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
}
.efx-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.3;
}
.efx-dot { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.efx-legend-lbl { color: var(--efx-mut); font-weight: 550; }
.efx-legend-val {
  margin-left: auto;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--efx-ink);
}

/* ── Ring gauges (compliance + delivery) ──────────────────────────────── */
.efx-ring {
  position: relative;
  width: 108px;
  aspect-ratio: 1;
  flex: none;
}
.efx-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.efx-ring-track { fill: none; stroke: rgba(255, 255, 255, 0.07); stroke-width: 11; }
.efx-ring-fill {
  fill: none;
  stroke: var(--efx-acc);
  stroke-width: 11;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--efx-acc) 60%, transparent));
  animation: efxDraw 1.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes efxDraw { from { stroke-dashoffset: 339.29; } }
.efx-ring-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.efx-ring-v {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.efx-comply-body, .efx-deliver-body, .efx-rag-body { gap: 16px; }

.efx-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.efx-checks li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--efx-ink);
  font-weight: 520;
}
.efx-checks li .ti-svg {
  color: var(--efx-mint);
  background: rgba(52, 211, 153, 0.16);
  border-radius: 50%;
  width: 18px; height: 18px;
  padding: 3px;
  flex: none;
  margin-top: 1px;
}
.efx-checks li span {
  flex: 1;
  min-width: 0;
}

/* ── RAG orbit ────────────────────────────────────────────────────────── */
.efx-orbit {
  position: relative;
  width: 108px;
  aspect-ratio: 1;
  flex: none;
}
.efx-orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(56, 189, 248, 0.22);
}
.efx-orbit-ring.r1 { inset: 6%; }
.efx-orbit-ring.r2 { inset: 24%; border-color: rgba(56, 189, 248, 0.14); }
.efx-orbit-spin { position: absolute; inset: 0; animation: efxSpin 16s linear infinite; }
.efx-orbit-dot {
  position: absolute;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--efx-cyan);
  box-shadow: 0 0 10px 1px rgba(56, 189, 248, 0.8);
  left: 50%; top: 50%;
  margin: -5.5px;
}
.efx-orbit-dot.d1 { transform: translateY(-38px); }
.efx-orbit-dot.d2 { transform: translateX(38px); background: var(--efx-mint); box-shadow: 0 0 10px 1px rgba(52,211,153,.8); }
.efx-orbit-dot.d3 { transform: translateY(38px); background: var(--efx-violet); box-shadow: 0 0 10px 1px rgba(105,38,111,.8); }
.efx-orbit-dot.d4 { transform: translateX(-38px); background: var(--efx-indigo); box-shadow: 0 0 10px 1px rgba(129,140,248,.8); }
.efx-orbit-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.efx-orbit-v {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.efx-rag-right { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.efx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.efx-chip {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--efx-mut);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--efx-line);
}
.efx-chip.req {
  color: color-mix(in srgb, var(--efx-cyan) 90%, #fff);
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.34);
}
.efx-kv { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.efx-kv > div { display: flex; align-items: baseline; gap: 8px; }
.efx-kv dt { font-size: 12px; color: var(--efx-mut); font-weight: 600; min-width: 58px; }
.efx-kv dd { margin: 0; font-size: 12.5px; font-weight: 600; min-width: 0; line-height: 1.35; }
.efx-kv dd code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; color: var(--efx-ink); }

/* ── Delivery meters ──────────────────────────────────────────────────── */
.efx-meters { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; justify-content: center; }
.efx-meters li { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 8px; }
.efx-meter-lbl { font-size: 12px; color: var(--efx-mut); font-weight: 600; }
.efx-meter-bar { height: 6px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.efx-meter-fill {
  display: block;
  height: 100%;
  width: var(--w, 100%);
  border-radius: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--efx-amber) 60%, transparent), var(--efx-amber));
  animation: efxGrow 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes efxGrow { from { width: 0; } }
.efx-meter-val { grid-column: 2; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums; line-height: 1.3; }
.efx-meter-pill {
  grid-column: 2;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 650;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--efx-line);
}
.efx-meter-pill i { font-size: 12px; color: var(--efx-amber); }
.efx-meter-pill.ok i { color: var(--efx-mint); }

/* ── Status strip ─────────────────────────────────────────────────────── */
.efx-status {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
  font-size: 11.5px;
  color: var(--efx-mut);
  border-top: 1px solid var(--efx-line);
  padding-top: 12px;
}
.efx-status-item { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; }
.efx-status-item b { color: var(--efx-ink); font-weight: 750; }
.efx-status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--efx-mint); box-shadow: 0 0 8px 1px rgba(52, 211, 153, 0.7); }
.efx-status-spacer { flex: 1; }
.efx-status-brand { font-size: 11px; color: var(--efx-faint); font-weight: 500; }

/* ══════════════════════════════════════════════════════════════════════
   Executive vs Showtime — two genuinely different presentation modes
   ══════════════════════════════════════════════════════════════════════ */

/* Segmented control shows a title + sub caption */
.efx-seg-btn { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; gap: 1px; }
.efx-seg-title { font-size: 12px; font-weight: 700; }
.efx-seg-sub { font-size: 9.5px; font-weight: 500; letter-spacing: 0.02em; opacity: 0.62; }
.efx-seg-btn.primary .efx-seg-sub { opacity: 0.85; }

/* Mode banner — always visible so Exec vs Showtime is unmistakable */
.efx-mode-banner {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--efx-line);
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.efx-mode-banner-label {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--efx-ink);
}
.efx-mode-banner-hint {
  color: var(--efx-mut);
  font-weight: 500;
}

/* ── EXECUTIVE (default): flat boardroom — no ambient theatre ── */
.efx-stage[data-eigenflow-mode="exec"] {
  background: #0e1420;
  box-shadow:
    0 18px 48px -36px rgba(0, 0, 0, 0.75),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.efx-stage[data-eigenflow-mode="exec"] .efx-aurora,
.efx-stage[data-eigenflow-mode="exec"] .efx-gl,
.efx-stage[data-eigenflow-mode="exec"] .efx-grid {
  display: none !important;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-rail-pulse { display: none; }
.efx-stage[data-eigenflow-mode="exec"] .efx-orbit-spin,
.efx-stage[data-eigenflow-mode="exec"] .efx-orb-ring,
.efx-stage[data-eigenflow-mode="exec"] .efx-live-dot {
  animation: none !important;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-card {
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-card::before {
  opacity: 0.35;
  animation: none !important;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-card::after { display: none !important; }
.efx-stage[data-eigenflow-mode="exec"] .efx-kpi-val,
.efx-stage[data-eigenflow-mode="exec"] .efx-ring-v,
.efx-stage[data-eigenflow-mode="exec"] .efx-orbit-v,
.efx-stage[data-eigenflow-mode="exec"] .efx-donut-v {
  text-shadow: none;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-orb {
  box-shadow: none;
  filter: none;
}
.efx-stage[data-eigenflow-mode="exec"] .efx-mode-banner {
  border-color: rgba(148, 163, 184, 0.28);
  background: rgba(148, 163, 184, 0.08);
}
.efx-stage[data-eigenflow-mode="exec"] .efx-mode-banner-label { color: #94a3b8; }

/* ── SHOWTIME: cinematic ambient motion + staged reveal ── */
.efx-stage[data-eigenflow-mode="showtime"] {
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(105, 38, 111, 0.32), transparent 55%),
    radial-gradient(110% 90% at 100% 0%, rgba(56, 189, 248, 0.24), transparent 52%),
    radial-gradient(120% 100% at 50% 120%, rgba(52, 211, 153, 0.18), transparent 55%),
    linear-gradient(160deg, #070b1c 0%, #0c1330 48%, #080c1c 100%);
  box-shadow:
    0 40px 100px -40px rgba(88, 28, 235, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-aurora {
  display: block;
  opacity: 1;
  animation-duration: 16s;
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-gl {
  display: block;
  opacity: 0.85;
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-grid {
  display: block;
  opacity: 0.55;
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-rail-pulse { display: block; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-mode-banner {
  border-color: rgba(167, 139, 250, 0.45);
  background: linear-gradient(135deg, rgba(105, 38, 111, 0.28), rgba(56, 189, 248, 0.16));
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-mode-banner-label { color: #e9d5ff; }

/* Staged card entrance */
.efx-stage[data-eigenflow-mode="showtime"] .efx-card {
  animation: efxCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(1) { animation-delay: 0.10s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(2) { animation-delay: 0.18s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(3) { animation-delay: 0.26s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(4) { animation-delay: 0.34s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(5) { animation-delay: 0.42s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(6) { animation-delay: 0.50s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-arch,
.efx-stage[data-eigenflow-mode="showtime"] .efx-flow {
  animation: efxCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes efxCardIn {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
/* Staged rail step reveal */
.efx-stage[data-eigenflow-mode="showtime"] .efx-step {
  animation: efxStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--efx-i, 0) * 0.06s + 0.25s);
}
@keyframes efxStepIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
/* Living glow on card borders + sheen sweep */
.efx-stage[data-eigenflow-mode="showtime"] .efx-card::before {
  animation: efxBorderGlow 6s ease-in-out infinite;
}
@keyframes efxBorderGlow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-card::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transform: skewX(-18deg);
  animation: efxSheen 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(2)::after { animation-delay: 0.9s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(3)::after { animation-delay: 1.8s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(4)::after { animation-delay: 2.7s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(5)::after { animation-delay: 3.6s; }
.efx-stage[data-eigenflow-mode="showtime"] .efx-gauges .efx-card:nth-child(6)::after { animation-delay: 4.5s; }
@keyframes efxSheen {
  0%, 72% { left: -60%; }
  85%, 100% { left: 130%; }
}
/* Hero numbers pulse subtly in showtime */
.efx-stage[data-eigenflow-mode="showtime"] .efx-kpi-val,
.efx-stage[data-eigenflow-mode="showtime"] .efx-ring-v,
.efx-stage[data-eigenflow-mode="showtime"] .efx-orbit-v,
.efx-stage[data-eigenflow-mode="showtime"] .efx-donut-v {
  text-shadow: 0 0 18px color-mix(in srgb, var(--efx-acc) 45%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Clickable capability cards
   ══════════════════════════════════════════════════════════════════════ */
.efx-card[data-efx-card] {
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.22s ease, border-color 0.22s ease;
}
.efx-card[data-efx-card]:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px -26px color-mix(in srgb, var(--efx-acc) 70%, #000);
}
.efx-card[data-efx-card]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--efx-acc) 80%, transparent),
    0 22px 48px -26px color-mix(in srgb, var(--efx-acc) 70%, #000);
}
.efx-card-cue {
  position: absolute;
  top: 12px; right: 14px;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  width: 24px; height: 24px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: color-mix(in srgb, var(--efx-acc) 90%, #fff);
  background: color-mix(in srgb, var(--efx-acc) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--efx-acc) 34%, transparent);
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.efx-card[data-efx-card]:hover .efx-card-cue,
.efx-card[data-efx-card]:focus-visible .efx-card-cue { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   Floating detail popup — movable, resizable, primary card stays visible
   ══════════════════════════════════════════════════════════════════════ */
.efx-docs { display: none; }
.efx-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.efx-popup[hidden] { display: none; }
.efx-popup-panel {
  --efx-acc: var(--efx-violet);
  position: fixed;
  left: 0;
  top: 0;
  width: 400px;
  height: 520px;
  min-width: 320px;
  min-height: 280px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
  pointer-events: auto;
  color: var(--efx-ink, #f1f5ff);
  background-color: color-mix(in srgb, var(--efx-ink, #f1f5ff) 4%, #070b18);
  background-image:
    radial-gradient(120% 60% at 100% 0%, color-mix(in srgb, var(--efx-acc) 22%, transparent), transparent 58%);
  border: 1px solid color-mix(in srgb, var(--efx-acc) 42%, rgba(255, 255, 255, 0.1));
  box-shadow:
    0 28px 80px -24px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  opacity: 0;
  transform: scale(0.96) translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.efx-popup.open .efx-popup-panel {
  opacity: 1;
  transform: none;
}
.efx-popup-panel.is-dragging,
.efx-popup-panel.is-resizing {
  transition: none;
  user-select: none;
}
.efx-popup-panel[data-accent="score"] { --efx-acc: var(--efx-violet); }
.efx-popup-panel[data-accent="plan"] { --efx-acc: var(--efx-violet); }
.efx-popup-panel[data-accent="acquire"] { --efx-acc: var(--efx-cyan); }
.efx-popup-panel[data-accent="normalize"] { --efx-acc: var(--efx-indigo); }
.efx-popup-panel[data-accent="enrich"] { --efx-acc: var(--efx-mint); }
.efx-popup-panel[data-accent="gate"] { --efx-acc: var(--efx-amber); }
.efx-popup-panel[data-accent="comply"] { --efx-acc: var(--efx-mint); }
.efx-popup-panel[data-accent="publish"] { --efx-acc: var(--efx-cyan); }
.efx-popup-panel[data-accent="rag"] { --efx-acc: var(--efx-cyan); }
.efx-popup-panel[data-accent="deliver"] { --efx-acc: var(--efx-amber); }
.efx-popup-panel[data-accent="dedupe"] { --efx-acc: var(--efx-cyan); }
.efx-popup-panel[data-accent="quality"] { --efx-acc: var(--efx-amber); }

.efx-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  cursor: grab;
  touch-action: none;
}
.efx-popup-panel.is-dragging .efx-popup-head { cursor: grabbing; }
.efx-popup-grip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.35) 1.5px, transparent 1.6px) 0 0 / 7px 7px;
  opacity: 0.65;
  flex-shrink: 0;
}
.efx-popup-drag-label {
  flex: 1 1 auto;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(203, 213, 225, 0.55);
}
.efx-popup-x {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(241, 245, 255, 0.75);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, transform 0.18s;
}
.efx-popup-x:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  transform: rotate(90deg);
}

.efx-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 22px 8px;
}
.efx-popup-body::-webkit-scrollbar { width: 8px; }
.efx-popup-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 8px; }

.efx-popup-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 45%, color-mix(in srgb, var(--efx-acc) 55%, rgba(255, 255, 255, 0.25)) 45% 52%, transparent 52% 62%, rgba(255, 255, 255, 0.18) 62% 68%, transparent 68%);
  opacity: 0.85;
}
.efx-popup-resize:hover { opacity: 1; }

.efx-card[data-efx-card].is-efx-active,
.efx-step[data-efx-stage].is-efx-active {
  position: relative;
  z-index: 3;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--efx-acc, var(--efx-violet)) 72%, transparent),
    0 22px 48px -26px color-mix(in srgb, var(--efx-acc, var(--efx-violet)) 55%, #000);
}
.efx-step[data-efx-stage].is-efx-active {
  background: rgba(255, 255, 255, 0.05);
}

.efx-doc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--efx-acc) 88%, #fff);
}
.efx-doc-eyebrow .ti-svg { color: var(--efx-acc); }
.efx-doc-title {
  margin: 12px 0 0;
  font-size: clamp(21px, 4.6vw, 26px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: #fff;
}
.efx-doc-lead {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: #dbe4f0;
}
.efx-doc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 22px 0 4px;
}
.efx-doc-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 14px 13px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--efx-acc) 8%, rgba(255, 255, 255, 0.03));
  border: 1px solid color-mix(in srgb, var(--efx-acc) 22%, rgba(255, 255, 255, 0.06));
}
.efx-doc-stat .v {
  font-size: clamp(18px, 2vw, 23px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.efx-doc-stat .k {
  font-size: 11px;
  font-weight: 550;
  line-height: 1.3;
  color: #aeb9cc;
}
.efx-doc-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 26px 0 6px;
}
.efx-doc-sections h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--efx-acc) 82%, #fff);
}
.efx-doc-sections p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #c7d2e0;
}
.efx-doc-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.efx-doc-steps li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: #dbe4f0;
  font-weight: 600;
}
.efx-doc-steps li::before {
  content: "";
  position: absolute;
  left: 2px; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--efx-acc);
  box-shadow: 0 0 8px color-mix(in srgb, var(--efx-acc) 70%, transparent);
}
.efx-doc-steps li span {
  font-weight: 450;
  color: #a9b5c8;
}
.efx-doc-kicker {
  margin: 28px 0 24px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.55;
  font-weight: 600;
  color: #fff;
  background: color-mix(in srgb, var(--efx-acc) 14%, rgba(255, 255, 255, 0.02));
  border-left: 3px solid var(--efx-acc);
}
.efx-doc-kicker span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--efx-acc) 90%, #fff);
  margin-bottom: 4px;
}

.efx-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
.efx-popup-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 550;
  color: rgba(203, 213, 225, 0.6);
}
.efx-popup-logo { width: 18px; height: 18px; border-radius: 5px; }
.efx-popup-nav { display: inline-flex; gap: 8px; }
.efx-popup-navbtn {
  appearance: none;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 7px 13px;
  border-radius: 10px;
  cursor: pointer;
  color: rgba(241, 245, 255, 0.82);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.efx-popup-navbtn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.efx-popup-navbtn.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--efx-acc), color-mix(in srgb, var(--efx-acc) 55%, #000));
  border-color: transparent;
  box-shadow: 0 8px 22px -10px color-mix(in srgb, var(--efx-acc) 90%, transparent);
}

@media (max-width: 520px) {
  .efx-doc-stats { grid-template-columns: 1fr 1fr; }
}

/* ── Pipeline rail steps are clickable (open the stage detail popup) ── */
.efx-step[data-efx-stage] {
  cursor: pointer;
  border-radius: 14px;
  padding: 8px 6px 10px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease;
}
.efx-step[data-efx-stage]:hover,
.efx-step[data-efx-stage]:focus-visible {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}
.efx-step[data-efx-stage]:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--efx-glow) 75%, transparent);
}
.efx-step[data-efx-stage]:hover .efx-orb {
  transform: scale(1.08);
  transition: transform 0.2s ease;
}
.efx-step-more {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--efx-glow, var(--efx-accent));
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.efx-step[data-efx-stage]:hover .efx-step-more,
.efx-step[data-efx-stage]:focus-visible .efx-step-more { opacity: 1; transform: none; }

.efx-print-only { display: none; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .efx-gauges { grid-template-columns: repeat(2, 1fr); }
  .efx-drilldown-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .efx-stage { min-height: 0; }
  .efx-rail { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .efx-rail-line { display: none; }
  .efx-gauges { grid-template-columns: 1fr; }
  .efx-drilldown-grid { grid-template-columns: 1fr; }
  .efx-brand-sub { display: none; }
  .efx-drilldown-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .efx-aurora, .efx-rail-pulse, .efx-orb-ring, .efx-orbit-spin, .efx-live-dot { animation: none !important; }
  .efx-donut-seg, .efx-ring-fill, .efx-meter-fill, .efx-step { animation-duration: 0.01s !important; }
  .efx-stage[data-eigenflow-mode="showtime"] .efx-card,
  .efx-stage[data-eigenflow-mode="showtime"] .efx-card::before,
  .efx-stage[data-eigenflow-mode="showtime"] .efx-card::after,
  .efx-stage[data-eigenflow-mode="showtime"] .efx-arch,
  .efx-stage[data-eigenflow-mode="showtime"] .efx-flow,
  .efx-popup-panel { animation: none !important; transition: none !important; }
  .efx-stage[data-eigenflow-mode="showtime"] .efx-card::after { display: none; }
}

@media print {
  .efx-gl, .efx-aurora, .efx-grid, .efx-seg, .efx-icon-btn, .efx-mode-banner { display: none !important; }
  .efx-stage { background: #fff !important; color: #0b1220 !important; box-shadow: none !important; border-color: #e2e8f0 !important; }
  .efx-print-only { display: block !important; color: #0b1220; }
  .efx-print-only ol { font-size: 12px; line-height: 1.5; }
  .efx-print-only code { color: #475569; font-size: 10px; }
}

/* ─── Mission Control clarity redesign ─────────────────────────────── */
.build-mission-card {
  padding: 0;
  border: 1px solid var(--border);
  background: var(--surface);
}

.build-mission-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
}

.build-mission-heading {
  min-width: 0;
}

.build-mission-kicker,
.build-control-kicker,
.mc-stage-map-kicker,
.mc-command-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--label, var(--accent));
}

.build-mission-heading h1,
.build-control-head h2,
.mc-stage-map-head h2 {
  margin: 0;
  color: var(--text);
  letter-spacing: -0.03em;
}

.build-mission-heading h1 {
  font-size: 17px;
  font-weight: 650;
  line-height: 1.2;
}

.build-mission-heading p {
  margin: 4px 0 0;
  max-width: 56ch;
  font-size: 12px;
  color: var(--muted);
}

.build-mission-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 24px 0;
  color: var(--muted);
  font-size: 12px;
}

.build-mission-meta > span,
.mc-command-foot > span,
.mc-hero-throughput,
.mc-hero-queue {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 78%, transparent);
}

.build-mission-meta > span code {
  font-size: 11px;
  letter-spacing: 0.02em;
}

.build-mission-live {
  display: grid;
  gap: 14px;
  padding: 18px 24px 24px;
  min-width: 0;
  overflow-x: clip;
}

.build-mission-live .mc-run-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--panel) 70%, transparent);
}

.build-mission-live #runInlineTime {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.mc-dashboard--command {
  gap: 16px;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(ellipse 520px 160px at 0% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%),
    radial-gradient(ellipse 460px 140px at 100% 0%, color-mix(in srgb, var(--accent2) 10%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 92%, var(--panel));
}

.mc-command-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
}

.mc-command-main {
  min-width: 0;
}

.mc-command-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.mc-command-title {
  max-width: 880px;
  font-size: clamp(28px, 5vw, 54px);
  line-height: 0.95;
  font-weight: 950;
  letter-spacing: -0.06em;
  color: var(--text);
}

.mc-command-copy,
.mc-command-message {
  max-width: 860px;
  color: var(--muted);
}

.mc-command-copy {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 750;
}

.mc-command-message {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
}

.mc-command-gauge {
  justify-self: end;
  width: 126px;
}

.mc-command-gauge .build-gauge {
  width: 112px;
  height: 112px;
}

.mc-command-meters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.mc-command-meters .mc-meter {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--panel) 68%, transparent);
}

.mc-command-meters .mc-meter-track {
  height: 10px;
}

.mc-command-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.mc-evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mc-evidence-card {
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  border-left: 3px solid var(--border);
}

.mc-evidence-card[data-tone="cyan"] { border-left-color: var(--accent2); }
.mc-evidence-card[data-tone="indigo"] { border-left-color: var(--accent); }
.mc-evidence-card[data-tone="pink"] { border-left-color: var(--accent4); }
.mc-evidence-card[data-tone="good"] { border-left-color: var(--good); }

.mc-evidence-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.mc-evidence-value {
  margin-top: 5px;
  color: var(--text);
  font-size: 22px;
  font-weight: 950;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.mc-stage-map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 4px 2px 0;
}

.mc-stage-map-head h2 {
  margin-top: 3px;
  font-size: 18px;
}

.mc-stage-map-count {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.mc-pipeline.mc-pipeline--map {
  display: grid;
  gap: 8px;
  max-height: none;
  overflow: visible;
  padding: 0;
  border: 0;
  background: transparent;
}

.mc-pipeline--map .mc-stage.build-flow-node {
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
  min-height: 0;
  padding: 13px 14px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent) !important;
  background: color-mix(in srgb, var(--panel) 76%, transparent) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  opacity: 1;
}

.mc-pipeline--map .mc-stage.build-flow-node:hover {
  transform: none !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--panel)) !important;
}

/* Stage map uses mc-stage layout — block plasma .build-flow-node overrides. */
.mc-pipeline--map .mc-stage.build-flow-node.is-active,
.mc-pipeline--map .mc-stage.build-flow-node.is-done,
.mc-pipeline--map .mc-stage.build-flow-node.is-pending,
.mc-pipeline--map .mc-stage.build-flow-node.is-blocked,
.mc-pipeline--map .mc-stage.build-flow-node.is-failed {
  animation: none !important;
  filter: none !important;
  box-shadow: none !important;
  min-height: 0;
  background: color-mix(in srgb, var(--panel) 76%, transparent) !important;
  border-color: color-mix(in srgb, var(--border) 78%, transparent) !important;
}

.mc-pipeline--map .mc-stage.build-flow-node.is-active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--panel)) !important;
}

.mc-pipeline--map.build-flow {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  backdrop-filter: none !important;
}

.mc-pipeline--map .mc-stage.build-flow-node.is-active {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 94%, var(--panel)) !important;
}

.mc-pipeline--map .mc-stage-rail {
  position: relative;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}

.mc-pipeline--map .mc-stage-rail::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -18px;
  width: 1px;
  background: color-mix(in srgb, var(--border) 80%, transparent);
}

.mc-pipeline--map .mc-stage:last-child .mc-stage-rail::after {
  display: none;
}

.mc-pipeline--map .mc-stage-dot {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  border-width: 2px;
  background: var(--surface);
}

.mc-pipeline--map .mc-stage-body {
  gap: 8px;
  min-width: 0;
}

.mc-pipeline--map .mc-stage-row {
  gap: 10px;
  align-items: center;
}

.mc-pipeline--map .mc-stage-idx {
  width: 26px;
  color: var(--muted);
}

.mc-pipeline--map .mc-stage-name {
  font-size: 13px;
  font-weight: 850;
  white-space: normal;
}

.mc-pipeline--map .mc-stage-badge,
.mc-pipeline--map .build-flow-state-pill {
  min-width: 70px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  color: var(--muted);
  box-shadow: none;
}

.mc-pipeline--map .mc-stage-metric,
.mc-pipeline--map .build-flow-count {
  min-width: 48px;
  border-radius: 999px;
  color: var(--text);
  border-color: color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--code-bg) 75%, transparent);
  box-shadow: none;
}

.mc-pipeline--map .mc-stage-detail,
.mc-pipeline--map .build-flow-detail {
  color: var(--muted);
  text-align: left;
  white-space: normal;
  overflow: visible;
}

.mc-pipeline--map .mc-stage-meter-track {
  height: 5px;
  background: color-mix(in srgb, var(--muted) 13%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.mc-stage-meter-fill.tone-violet,
.mc-stage-meter-fill.tone-indigo { background: var(--gradient-primary); }
.mc-stage-meter-fill.tone-cyan { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 55%, var(--accent))); }
.mc-stage-meter-fill.tone-mint,
.mc-stage-meter-fill.tone-good { background: var(--gradient-success); }
.mc-stage-meter-fill.tone-amber { background: linear-gradient(135deg, var(--accent3), color-mix(in srgb, var(--accent3) 50%, var(--warn))); }
.mc-stage-meter-fill.tone-pink { background: linear-gradient(135deg, var(--accent4), var(--bad)); }

.mc-pipeline--map .mc-stage.is-active {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 95%, var(--panel)) !important;
}

.mc-pipeline--map .mc-stage.is-active .mc-stage-dot {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 36%, var(--surface));
}

.mc-pipeline--map .mc-stage.is-active .mc-stage-badge {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 36%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mc-pipeline--map .mc-stage.is-done .mc-stage-dot {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 38%, var(--surface));
}

.mc-pipeline--map .mc-stage.is-done .mc-stage-badge {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 10%, transparent);
}

.mc-pipeline--map .mc-stage.is-failed .mc-stage-dot {
  border-color: var(--bad);
  background: color-mix(in srgb, var(--bad) 34%, var(--surface));
}

.mc-pipeline--map .mc-stage.is-failed .mc-stage-badge {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 34%, var(--border));
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}

.mc-pipeline--map .mc-stage.is-blocked .mc-stage-dot {
  border-color: var(--warn);
  background: color-mix(in srgb, var(--warn) 34%, var(--surface));
}

.mc-pipeline--map .mc-stage.is-blocked .mc-stage-badge {
  color: var(--warn);
  border-color: color-mix(in srgb, var(--warn) 34%, var(--border));
  background: color-mix(in srgb, var(--warn) 9%, transparent);
}

.build-control-panel {
  display: grid;
  gap: 12px;
  margin: 0 24px 24px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel) 76%, transparent);
}

.build-control-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.build-control-head h2 {
  margin-top: 3px;
  font-size: 16px;
}

.build-control-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.build-control-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

@media (max-width: 900px) {
  .build-mission-header,
  .mc-command-layout,
  .build-control-head,
  .mc-stage-map-head {
    align-items: stretch;
  }

  .build-mission-header,
  .mc-stage-map-head,
  .build-control-head {
    flex-direction: column;
  }

  .mc-command-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .mc-command-gauge {
    justify-self: start;
  }

  .mc-command-meters,
  .mc-evidence-grid,
  .mc-kpi,
  .mission-kpi-deck {
    grid-template-columns: minmax(0, 1fr);
  }

  .build-mission-live #runInlineTime {
    margin-left: 0;
  }
}

@media (max-width: 560px) {
  .build-mission-header,
  .build-mission-live,
  .build-control-panel {
    margin-left: 0;
    margin-right: 0;
    padding-left: 14px;
    padding-right: 14px;
  }

  .build-mission-meta {
    padding-left: 14px;
    padding-right: 14px;
  }

  .mc-pipeline--map .mc-stage.build-flow-node {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 12px;
  }

  .mc-pipeline--map .mc-stage-row {
    flex-wrap: wrap;
  }

  .mc-pipeline--map .mc-stage-name {
    flex-basis: calc(100% - 42px);
  }
}

/* ─── Mission Dial — executive build progress view ─────────────────── */
.mission-dial-shell {
  --mission-tone: var(--accent);
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2.4vw, 24px);
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, var(--panel)), var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 4%, transparent);
}

.mission-dial-shell[data-tone="violet"],
.mission-dial-shell[data-tone="indigo"],
.mission-dial-shell[data-tone="active"] {
  --mission-tone: var(--accent);
  border-top: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
}

.mission-dial-shell[data-tone="cyan"] {
  --mission-tone: var(--accent2);
  border-top: 2px solid color-mix(in srgb, var(--accent2) 42%, transparent);
}

.mission-dial-shell[data-tone="mint"],
.mission-dial-shell[data-tone="good"],
.mission-dial-shell[data-tone="success"] {
  --mission-tone: var(--good);
  border-top: 2px solid color-mix(in srgb, var(--good) 42%, transparent);
}

.mission-dial-shell[data-tone="amber"] {
  --mission-tone: var(--accent3);
  border-top: 2px solid color-mix(in srgb, var(--accent3) 42%, transparent);
}

.mission-dial-shell[data-tone="pink"] {
  --mission-tone: var(--accent4);
}

.mission-dial-shell[data-tone="danger"] {
  --mission-tone: var(--bad);
  border-top: 2px solid color-mix(in srgb, var(--bad) 42%, transparent);
}

.mission-dial-shell[data-tone="muted"] {
  --mission-tone: var(--muted);
}

.mission-exec-top {
  display: grid;
  gap: 18px;
}

.mission-kpi-grid.mc-kpi {
  margin-top: 2px;
}

.mission-kpi-grid .mc-kpi-item {
  background: color-mix(in srgb, var(--panel) 55%, var(--surface));
  border-color: color-mix(in srgb, var(--border) 86%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.mission-kpi-grid .mc-kpi-item:hover {
  border-color: color-mix(in srgb, var(--mission-tone) 28%, var(--border));
  background: color-mix(in srgb, var(--surface) 92%, var(--panel));
}

.mission-dial-stage {
  display: grid;
  grid-template-columns: minmax(132px, 160px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 3vw, 28px);
}

.mission-dial-wrap {
  position: relative;
  justify-self: start;
  width: min(100%, 160px);
  max-width: 108px;
  aspect-ratio: 1;
  overflow: hidden;
  contain: layout paint;
}

.mission-dial-wrap .build-gauge {
  width: 100%;
  height: 100%;
}

.mission-dial-wrap .build-gauge-svg {
  width: 100%;
  height: 100%;
}

.mission-dial-wrap .build-gauge-track {
  stroke: color-mix(in srgb, var(--muted) 14%, transparent);
}

.mission-dial-gauge {
  width: 100%;
  height: 100%;
}

.mission-dial-svg .mission-dial-stop--accent { stop-color: var(--accent); }
.mission-dial-svg .mission-dial-stop--mint { stop-color: var(--accent2); }
.mission-dial-svg .mission-dial-stop--good { stop-color: var(--good); }
.mission-dial-svg .mission-dial-stop--bad { stop-color: var(--bad); }
.mission-dial-svg .mission-dial-stop--amber { stop-color: var(--accent3); }
.mission-dial-svg .mission-dial-stop--accent3 { stop-color: var(--accent3); }
.mission-dial-svg .mission-dial-stop--accent4 { stop-color: var(--accent4); }

.mission-dial-track-outer {
  stroke: color-mix(in srgb, var(--muted) 16%, transparent);
  opacity: 1;
}

.mission-dial-track-inner {
  fill: none;
  stroke: color-mix(in srgb, var(--muted) 10%, transparent);
  stroke-width: var(--gauge-inner-stroke, 4px);
}

.mission-dial-ring-outer {
  stroke-width: var(--gauge-stroke, 7px);
  filter: none;
  transition: stroke-dashoffset 0.65s cubic-bezier(.4, 0, .2, 1);
}

.mission-dial-ring-inner {
  stroke-width: var(--gauge-inner-stroke, 4px);
  filter: none;
  transition: stroke-dashoffset 0.5s cubic-bezier(.4, 0, .2, 1);
}

.mission-dial-gauge.is-indeterminate .mission-dial-ring-outer {
  animation: missionDialOuterSpin 2.4s linear infinite;
  stroke-dashoffset: 0;
  opacity: 0.75;
}

.mission-dial-gauge.is-phase-indeterminate .mission-dial-ring-inner {
  animation: missionDialInnerSpin 1.8s linear infinite;
  stroke-dashoffset: 0;
  opacity: 0.7;
}

@keyframes missionDialOuterSpin {
  from { transform: rotate(0deg); transform-origin: 50% 50%; }
  to { transform: rotate(360deg); transform-origin: 50% 50%; }
}

@keyframes missionDialInnerSpin {
  from { transform: rotate(360deg); transform-origin: 50% 50%; }
  to { transform: rotate(0deg); transform-origin: 50% 50%; }
}

.mission-dial-wrap .build-gauge-fill {
  stroke: var(--mission-tone);
  filter: none;
}

.mission-dial-wrap .build-gauge-center {
  opacity: 0;
}

.mission-dial-center {
  position: absolute;
  inset: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  pointer-events: none;
}

.mission-dial-percent {
  color: var(--text);
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.mission-dial-percent-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-dial-phase-hint {
  margin-top: 2px;
  color: color-mix(in srgb, var(--mission-tone) 70%, var(--muted));
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.mission-dial-phase {
  display: none;
}

.mission-dial-copy {
  min-width: 0;
}

.mission-dial-kicker,
.mission-narrative-kicker {
  color: color-mix(in srgb, var(--mission-tone) 72%, var(--muted));
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mission-dial-copy h2 {
  margin: 5px 0 0;
  color: var(--text);
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.mission-dial-copy p {
  margin: 10px 0 0;
  max-width: 720px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.mission-dial-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.mission-dial-chips--status span:first-child {
  color: var(--mission-tone);
  border-color: color-mix(in srgb, var(--mission-tone) 30%, var(--border));
  background: color-mix(in srgb, var(--mission-tone) 8%, var(--panel));
}

.mission-dial-chips span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 65%, transparent);
  color: color-mix(in srgb, var(--text) 82%, var(--muted));
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.mission-progress-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mission-progress-strip .mc-meter {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 58%, transparent);
}

.mission-progress-strip .mc-meter-head {
  margin-bottom: 8px;
}

.mission-progress-strip .mc-meter-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--muted);
}

.mission-progress-strip .mc-meter-value {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mission-progress-strip .mc-meter-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.mission-progress-strip .mc-meter-fill {
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--mission-tone),
    color-mix(in srgb, var(--mission-tone) 55%, var(--accent2))
  );
}

.mission-narrative {
  padding: clamp(16px, 2vw, 20px);
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 52%, transparent);
  border-left: 3px solid color-mix(in srgb, var(--mission-tone) 55%, var(--border));
}

.mission-narrative p {
  margin: 8px 0 0;
  max-width: 980px;
  color: var(--text);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 1.6;
}

.mission-dial-shell .mc-quality {
  border-color: color-mix(in srgb, var(--border) 84%, transparent);
  background: color-mix(in srgb, var(--panel) 52%, transparent);
}

.mission-dial-shell[data-build-live="1"] {
  border-color: color-mix(in srgb, var(--mission-tone) 34%, var(--border));
  animation: missionShellBorderShimmer 3.2s ease-in-out infinite;
}

.mission-dial-shell[data-build-queued="1"] {
  border-color: color-mix(in srgb, var(--accent3) 34%, var(--border));
  animation: missionShellQueueShimmer 2.8s ease-in-out infinite;
}

.mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-outer,
.mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-inner {
  animation: missionDialPulse 2s ease-in-out infinite;
}

.mission-dial-shell[data-build-queued="1"] .mission-dial-wrap .mission-dial-ring-outer {
  animation: missionDialQueuePulse 2.4s ease-in-out infinite;
}

.mission-dial-shell[data-build-live="1"] .mission-dial-gauge.is-indeterminate .mission-dial-ring-outer {
  animation: missionDialOuterSpin 1.8s linear infinite, missionDialPulse 2s ease-in-out infinite;
}

.mission-dial-shell[data-build-live="1"] .mission-dial-gauge.is-phase-indeterminate .mission-dial-ring-inner {
  animation: missionDialInnerSpin 1.25s linear infinite, missionDialPulse 2.2s ease-in-out infinite;
}

.mission-dial-shell[data-build-queued="1"] .mission-dial-gauge.is-indeterminate .mission-dial-ring-outer,
.mission-dial-shell[data-build-queued="1"] .mission-dial-gauge.is-phase-indeterminate .mission-dial-ring-inner {
  animation: missionDialOuterSpin 2.2s linear infinite, missionDialQueuePulse 2.4s ease-in-out infinite;
}

@keyframes missionDialPulse {
  0%, 100% {
    filter: drop-shadow(0 0 9px color-mix(in srgb, var(--mission-tone) 36%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 20px color-mix(in srgb, var(--mission-tone) 62%, transparent));
  }
}

@keyframes missionDialQueuePulse {
  0%, 100% {
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent3) 34%, transparent));
  }
  50% {
    filter: drop-shadow(0 0 18px color-mix(in srgb, var(--accent3) 58%, transparent));
  }
}

@keyframes missionShellBorderShimmer {
  0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 16px 48px color-mix(in srgb, var(--shadow) 42%, transparent); }
  50% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--mission-tone) 14%, transparent), 0 20px 56px color-mix(in srgb, var(--mission-tone) 18%, transparent); }
}

@keyframes missionShellQueueShimmer {
  0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent), 0 16px 48px color-mix(in srgb, var(--shadow) 42%, transparent); }
  50% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent3) 12%, transparent), 0 20px 56px color-mix(in srgb, var(--accent3) 16%, transparent); }
}

.mission-dial-shell--settled .mission-dial-wrap .mission-dial-ring-outer,
.mission-dial-shell--settled .mission-dial-wrap .mission-dial-ring-inner {
  animation: missionDialSettle 0.9s ease-out 1;
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--good) 42%, transparent));
}

@keyframes missionDialSettle {
  0% {
    transform: scale(0.98);
    opacity: 0.72;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Mission dial — compact executive refinement (overrides v2 bloat) */
.mission-dial-shell {
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 98%, var(--panel));
  box-shadow: none;
  animation: none !important;
  min-width: 0;
  overflow: hidden;
}

.mission-dial-shell[data-tone="violet"],
.mission-dial-shell[data-tone="indigo"],
.mission-dial-shell[data-tone="active"],
.mission-dial-shell[data-tone="cyan"],
.mission-dial-shell[data-tone="mint"],
.mission-dial-shell[data-tone="good"],
.mission-dial-shell[data-tone="success"],
.mission-dial-shell[data-tone="amber"],
.mission-dial-shell[data-tone="danger"] {
  border-top-width: 1px;
}

.mission-dial-shell[data-build-live="1"],
.mission-dial-shell[data-build-queued="1"] {
  animation: none !important;
}

.mission-exec-top {
  gap: 12px;
}

.mission-hero-row {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
}

.mission-dial-wrap {
  width: 108px;
  max-width: 108px;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}

.mission-dial-wrap .build-gauge-svg {
  overflow: hidden;
}

.mission-dial-aurora,
.mission-dial-orbit,
.mission-dial-legend,
.mission-dial-percent-label,
.mission-dial-chips {
  display: none !important;
}

.mission-dial-ring-outer {
  stroke-width: var(--gauge-stroke, 5px);
  filter: none;
}

.mission-dial-ring-inner {
  stroke-width: var(--gauge-inner-stroke, 3px);
  filter: none;
}

.mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-outer,
.mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-inner,
.mission-dial-shell[data-build-queued="1"] .mission-dial-wrap .mission-dial-ring-outer {
  animation: none;
}

.mission-dial-percent {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.mission-dial-phase-hint {
  font-size: 9px;
  font-weight: 600;
  margin-top: 1px;
}

.mission-dial-copy h2 {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.mission-dial-copy p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.mission-dial-kicker,
.mission-narrative-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.mission-kpi-strip {
  display: flex;
  align-items: stretch;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  background: color-mix(in srgb, var(--panel) 55%, var(--surface));
}

.mission-kpi-stat {
  flex: 1 1 0;
  display: grid;
  align-content: center;
  gap: 2px;
  min-width: 0;
  padding: 10px 14px;
  border-right: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  background: transparent;
}

.mission-kpi-stat:last-child {
  border-right: none;
}

.mission-kpi-stat[data-tone="indigo"] {
  box-shadow: inset 2px 0 0 0 var(--accent);
}

.mission-kpi-stat[data-tone="cyan"] {
  box-shadow: inset 2px 0 0 0 var(--accent2);
}

.mission-kpi-stat[data-tone="good"] {
  box-shadow: inset 2px 0 0 0 var(--good);
}

.mission-kpi-stat[data-tone="pink"] {
  box-shadow: inset 2px 0 0 0 var(--accent4);
}

.mission-kpi-stat[data-tone="amber"] {
  box-shadow: inset 2px 0 0 0 var(--accent3);
}

.mission-kpi-stat-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--muted) 92%, var(--text));
}

.mission-kpi-stat-value {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.mission-kpi-stat-value.is-ticking {
  color: var(--mission-tone, var(--accent));
}

.mission-kpi-stat-sub {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Legacy KPI cards — retired; hide if stale cache serves old markup */
.mission-kpi-deck,
.mission-kpi-card,
.mission-kpi-card-ring,
.mission-kpi-stat-only {
  display: none !important;
}

.mission-poll-rail {
  height: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
  overflow: hidden;
}

.mission-poll-rail::after {
  content: "";
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent2);
  opacity: 0;
}

.mission-poll-rail.is-poll-refresh::after {
  animation: missionPollFlash 0.55s ease-out;
}

@keyframes missionPollFlash {
  0% { width: 0; opacity: 0; margin-left: 0; }
  20% { width: 28%; opacity: 0.9; margin-left: 0; }
  100% { width: 100%; opacity: 0; margin-left: 0; }
}

.mission-progress-strip {
  gap: 8px;
}

.mission-progress-strip .mc-meter {
  padding: 8px 10px;
  border-radius: 8px;
}

.mission-progress-strip .mc-meter-track {
  height: 3px;
}

.mission-progress-strip .mc-meter-value {
  font-size: 12px;
  font-weight: 650;
}

.mission-narrative {
  padding: 12px 14px;
  border-radius: 10px;
  border-left-width: 2px;
}

.mission-narrative p,
.mission-brief-narrative {
  font-size: 13px;
  line-height: 1.5;
}

.mission-brief-grid {
  gap: 8px 12px;
}

.mission-queue-banner {
  margin-bottom: 10px;
  padding: 10px 12px;
}

.mission-agentic-section {
  margin-top: 12px;
  padding-top: 12px;
  gap: 10px;
}

.mission-agentic-head h3 {
  font-size: 15px;
  font-weight: 700;
}

.mission-agentic-head p {
  font-size: 12px;
}

.mission-agentic-spotlight {
  padding: 12px 14px;
  border-radius: 10px;
  animation: none !important;
}

.mission-agentic-spotlight.is-live {
  animation: none !important;
  box-shadow: none;
}

.mission-agentic-map {
  max-height: min(360px, 42vh);
}

.mission-agentic-map .mc-pipeline--map .mc-stage.build-flow-node {
  padding: 8px 10px;
  border-radius: 10px;
  gap: 8px;
  grid-template-columns: 24px minmax(0, 1fr);
}

.mission-agentic-map .mc-pipeline--map .mc-stage-row {
  gap: 6px;
}

.mission-agentic-map .mc-pipeline--map .mc-stage-name {
  font-size: 12px;
  font-weight: 700;
}

.mission-agentic-map .mc-pipeline--map .mc-stage-badge,
.mission-agentic-map .mc-pipeline--map .build-flow-state-pill {
  min-width: 58px;
  padding: 2px 7px;
  font-size: 10px;
}

.mission-agentic-map .mc-pipeline--map .mc-stage-ring-slot {
  width: 28px;
}

.mission-agentic-map .mc-stage.is-agentic.is-active {
  animation: none !important;
  box-shadow: none;
}

.mission-dial-shell.is-entering {
  animation: missionShellEnter 0.35s ease-out both;
}

.mission-dial-shell.is-hud-pulse {
  animation: none;
}

.mission-dial-shell.is-hud-pulse .mission-poll-rail::after {
  animation: missionPollFlash 0.55s ease-out;
}

.mission-dial-halo {
  display: none;
}

@media (max-width: 1100px) {
  .mission-kpi-strip {
    flex-wrap: wrap;
  }

  .mission-kpi-stat {
    flex: 1 1 calc(50% - 1px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }
}

@media (max-width: 920px) {
  .mission-kpi-strip {
    flex-direction: column;
  }

  .mission-kpi-stat {
    flex: 1 1 auto;
    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  }

  .mission-kpi-stat:last-child {
    border-bottom: none;
  }

  .mission-hero-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .mission-dial-wrap {
    width: 88px;
    max-width: 88px;
  }
}

.mission-pipeline-rail {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--panel) 55%, transparent);
}

.mission-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.mission-rail-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mission-rail-count {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.mission-rail-track {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.mission-rail-cell {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
}

.mission-rail-cell[data-state="done"] {
  background: linear-gradient(135deg, var(--good), color-mix(in srgb, var(--good) 60%, var(--accent2)));
  border-color: color-mix(in srgb, var(--good) 45%, var(--border));
}

.mission-rail-cell[data-state="active"] {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 45%, transparent);
  transform: scale(1.08);
}

.mission-rail-more {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  padding-left: 4px;
}

/* ── Agentic pipeline execution map ───────────────────── */
.mission-agentic-section {
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
}

.mission-agentic-head {
  gap: 10px;
  padding: 6px 0 4px;
}

.mission-agentic-kicker {
  font-size: 10px;
  font-weight: 650;
}

.mission-agentic-head h3 {
  font-size: 14px;
  font-weight: 700;
}

.mission-agentic-head p {
  font-size: 12px;
}

.mission-agentic-stat {
  min-width: 72px;
  padding: 7px 9px;
  border-radius: 8px;
}

.mission-agentic-stat[data-tone="violet"] {
  background: color-mix(in srgb, var(--surface) 92%, var(--panel));
}

.mission-agentic-stat-value {
  font-size: 14px;
  font-weight: 700;
}

.mission-agentic-spine {
  position: relative;
  height: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

.mission-agentic-spine-fill {
  position: absolute;
  inset: 0 auto 0 0;
  max-width: 100%;
  border-radius: inherit;
  background: var(--gradient-primary);
  transition: width 0.65s cubic-bezier(.4, 0, .2, 1);
}

.mission-agentic-spine-glow {
  position: absolute;
  inset: -2px auto -2px 0;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent2) 55%, transparent), transparent);
  opacity: 0;
  filter: blur(4px);
  transition: width 0.65s cubic-bezier(.4, 0, .2, 1);
}

.mission-agentic-section[data-build-pipeline-live="1"] .mission-agentic-spine-glow {
  opacity: 0.35;
  animation: none;
}

@keyframes agenticSpineSweep {
  0%, 100% { transform: translateX(-8%); opacity: .35; }
  50% { transform: translateX(6%); opacity: .85; }
}

.mission-agentic-spotlight {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 14px 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, var(--panel));
}

.mission-agentic-spotlight.is-live {
  animation: none !important;
  box-shadow: none;
}

.mission-agentic-spotlight.is-live .mission-agentic-spotlight-orb {
  animation: none;
}

.mission-agentic-spotlight.is-idle {
  grid-template-columns: minmax(0, 1fr);
}

.mission-agentic-spotlight.is-idle .mission-agentic-spotlight-gauge,
.mission-agentic-spotlight.is-idle .mission-agentic-spotlight-orb {
  display: none;
}

@keyframes agenticSpotlightAura {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 8px 28px color-mix(in srgb, var(--accent) 16%, transparent); }
}

.mission-agentic-spotlight-gauge .build-gauge-value {
  font-size: 11px;
  font-weight: 800;
}

.mission-agentic-spotlight-orb {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.mission-agentic-spotlight.is-live .mission-agentic-spotlight-orb {
  animation: agenticOrbPulse 2s ease-in-out infinite;
}

@keyframes agenticOrbPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 10px transparent; }
}

.mission-agentic-spotlight-icon {
  font-size: 22px;
  line-height: 1;
  z-index: 1;
}

.mission-agentic-spotlight-pulse {
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--accent2) 35%, transparent);
  opacity: 0;
}

.mission-agentic-spotlight.is-live .mission-agentic-spotlight-pulse {
  animation: agenticOrbRing 2.4s ease-out infinite;
}

@keyframes agenticOrbRing {
  0% { transform: scale(.92); opacity: .75; }
  100% { transform: scale(1.35); opacity: 0; }
}

.mission-agentic-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.mission-agentic-spotlight.is-live .mission-agentic-badge {
  animation: agenticBadgeShimmer 2.8s linear infinite;
}

.mission-agentic-badge--idle {
  color: var(--muted);
  border-color: color-mix(in srgb, var(--border) 85%, transparent);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

@keyframes agenticBadgeShimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}

.mission-agentic-spotlight h4 {
  margin: 8px 0 4px;
  font-size: 17px;
  font-weight: 850;
  color: var(--text);
}

.mission-agentic-spotlight p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}

.mission-agentic-value {
  margin-top: 6px !important;
  color: var(--text) !important;
  font-weight: 650;
}

.mission-agentic-live {
  margin-top: 6px !important;
  color: var(--text) !important;
  font-weight: 650;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px !important;
}

.mission-live-activity {
  margin: 14px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  background: color-mix(in srgb, var(--surface) 94%, var(--panel));
}

.mission-live-activity-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.mission-live-activity-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--accent);
}

.mission-live-activity-pulse {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--good);
  animation: missionLivePulse 1.8s ease infinite;
}

@keyframes missionLivePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 40%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px transparent;
  }
}

.mission-live-activity-primary {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mission-live-activity-hint {
  margin: 0 0 10px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--muted);
}

.mission-live-activity-hint.is-empty {
  display: none;
}

.mission-live-activity-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 12px;
  margin: 0;
}

.mission-live-activity-meta div {
  min-width: 0;
}

.mission-live-activity-meta dt {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
}

.mission-live-activity-meta dd {
  margin: 2px 0 0;
  font-size: 12px;
  font-weight: 650;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.mission-agentic-idle-copy {
  margin-top: 8px !important;
}

.mission-agentic-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent2);
  font-variant-numeric: tabular-nums;
}

.mission-agentic-meta.is-measuring {
  color: var(--muted);
  animation: missionHudPulse 1.8s ease-in-out infinite;
}

.mission-agentic-map {
  max-height: min(520px, 58vh);
  overflow: auto;
  padding-right: 4px;
  scrollbar-gutter: stable;
}

.mission-agentic-map .mc-pipeline--map .mc-stage-ring-slot {
  flex: none;
  width: 38px;
  display: grid;
  place-items: center;
}

.mission-agentic-map .mc-pipeline--map .mc-stage-ring-slot .build-gauge-value {
  display: none;
}

.mission-agentic-pip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  vertical-align: middle;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.mc-pipeline--map .mc-stage.is-agentic {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.mc-pipeline--map .mc-stage.is-agentic.is-active {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--border)) !important;
  background: color-mix(in srgb, var(--surface) 95%, var(--panel)) !important;
  animation: none !important;
  box-shadow: none !important;
}

@keyframes agenticStageGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
  50% { box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 14%, transparent); }
}

.mc-pipeline--map .mc-stage.is-agentic.is-active .mc-stage-dot {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 42%, var(--surface));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
}

.mc-pipeline--map .mc-stage.is-agentic.is-active .mc-stage-badge {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.mc-pipeline--map .mc-stage.is-active .mc-stage-meter-fill {
  transition: width 0.55s cubic-bezier(.4, 0, .2, 1);
}

.mission-agentic-section[data-build-pipeline-live="1"] .mc-stage.is-active .mc-stage-meter-fill {
  animation: agenticMeterPulse 1.6s ease-in-out infinite;
}

@keyframes agenticMeterPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .72; }
}

@media (max-width: 720px) {
  .mission-agentic-spotlight {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-agentic-spotlight-gauge,
  .mission-agentic-spotlight-orb {
    justify-self: start;
  }
}

.mission-progress-strip .mc-meter-track {
  height: 8px;
}

.mission-queue-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin-bottom: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent3) 38%, var(--border));
  background: color-mix(in srgb, var(--accent3) 10%, var(--panel));
}

.mission-queue-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--accent3);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent3) 45%, transparent);
  animation: missionQueuePulse 2.2s ease-in-out infinite;
}

@keyframes missionQueuePulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent3) 40%, transparent); }
  50% { box-shadow: 0 0 0 8px transparent; }
}

.mission-queue-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.mission-queue-copy p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

.mission-brief-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin: 0 0 14px;
}

.mission-brief-item dt {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.mission-brief-item dd {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text);
  font-weight: 650;
}

.mission-brief-narrative {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 78%, transparent);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.build-mission-meta > span code {
  font-size: 11px;
  letter-spacing: 0.02em;
}

/* ── Mission HUD 2026 — aurora, orbit, live feedback ── */
.mission-dial-svg .mission-dial-stop--pink { stop-color: var(--accent4); }

.mission-dial-halo {
  display: none !important;
}

@keyframes missionDialHaloBreath {
  0%, 100% { opacity: 0.45; transform: scale(1); transform-origin: 50% 50%; }
  50% { opacity: 0.85; transform: scale(1.03); transform-origin: 50% 50%; }
}

.mission-dial-aurora {
  position: absolute;
  inset: -12%;
  border-radius: 999px;
  background:
    conic-gradient(from 0deg,
      color-mix(in srgb, var(--accent) 0%, transparent),
      color-mix(in srgb, var(--accent) 22%, transparent),
      color-mix(in srgb, var(--accent2) 18%, transparent),
      color-mix(in srgb, var(--accent4) 14%, transparent),
      color-mix(in srgb, var(--accent) 0%, transparent));
  filter: blur(18px);
  opacity: 0.55;
  animation: missionAuroraSpin 14s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.mission-dial-orbit {
  position: absolute;
  inset: 4%;
  border-radius: 999px;
  border: 1px dashed color-mix(in srgb, var(--accent2) 22%, transparent);
  animation: missionOrbitSpin 9s linear infinite;
  pointer-events: none;
  z-index: 2;
}

.mission-dial-orbit-dot {
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 999px;
  background: var(--accent2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent2) 70%, transparent);
}

@keyframes missionAuroraSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes missionOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(-360deg); }
}

.mission-dial-wrap .mission-dial-gauge {
  position: relative;
  z-index: 1;
}

.mission-dial-percent.is-ticking {
  animation: missionPctTick 0.72s cubic-bezier(.2, .9, .2, 1);
}

.mission-kpi-card-value.is-ticking,
.mission-dial-percent.is-ticking {
  color: var(--mission-tone);
}

@keyframes missionPctTick {
  0% { transform: scale(1); opacity: 0.72; }
  45% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

.mission-dial-shell.is-entering {
  animation: missionShellEnter 0.9s cubic-bezier(.2, .9, .2, 1) both;
}

.mission-dial-shell.is-hud-pulse {
  animation: missionHudPulse 0.85s ease-out;
}

@keyframes missionShellEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes missionHudPulse {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.06); }
  100% { filter: brightness(1); }
}

.mission-kpi-card--enter {
  animation: missionKpiEnter 0.65s cubic-bezier(.2, .9, .2, 1) both;
  animation-delay: calc(var(--mc-kpi-i, 0) * 80ms);
}

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

.mission-dial-shell[data-build-live="1"] .mission-kpi-card,
.mission-dial-shell[data-build-queued="1"] .mission-kpi-card {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 70%, transparent), color-mix(in srgb, var(--surface) 88%, transparent));
}

.mission-dial-shell[data-build-live="1"] .mission-kpi-card-ring .build-gauge-fill,
.mission-dial-shell[data-build-queued="1"] .mission-kpi-card-ring .build-gauge-fill {
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 35%, transparent));
}

.mission-rail-cell[data-state="active"] {
  animation: missionRailActive 1.6s ease-in-out infinite;
}

@keyframes missionRailActive {
  0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 40%, transparent); transform: scale(1.08); }
  50% { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 62%, transparent); transform: scale(1.14); }
}

.mission-rail-cell[data-state="done"] {
  animation: missionRailDone 0.5s ease-out both;
}

@keyframes missionRailDone {
  from { opacity: 0.4; transform: scale(0.85); }
  to { opacity: 1; transform: scale(1); }
}

.mission-progress-strip .mc-meter-fill {
  position: relative;
  overflow: visible;
}

.mission-progress-strip .mc-meter-fill::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 999px;
  background: var(--text);
  box-shadow: 0 0 10px color-mix(in srgb, var(--mission-tone) 55%, transparent);
  opacity: 0.85;
}

.mission-dial-shell[data-build-live="1"] .mission-progress-strip .mc-meter.is-indeterminate .mc-meter-fill,
.mission-dial-shell[data-build-queued="1"] .mission-progress-strip .mc-meter.is-indeterminate .mc-meter-fill {
  animation: mcMeterPulse 1.2s ease-in-out infinite;
}

.mission-dial-chips span {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mission-dial-shell[data-build-live="1"] .mission-dial-chips span:first-child,
.mission-dial-shell[data-build-queued="1"] .mission-dial-chips span:first-child {
  animation: missionChipLive 2.4s ease-in-out infinite;
}

@keyframes missionChipLive {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mission-tone) 0%, transparent); }
  50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--mission-tone) 0%, transparent); }
}

.mission-legend-swatch--run,
.mission-legend-swatch--phase {
  animation: missionLegendGlow 2.8s ease-in-out infinite;
}

@keyframes missionLegendGlow {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@media (max-width: 1100px) {
  .mission-kpi-deck {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 920px) {
  .mission-kpi-deck,
  .mission-brief-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-dial-wrap {
    width: min(48vw, 196px);
  }
}

.build-mission-card--terminal .build-live-dot,
.build-mission-card--terminal [data-build-live="1"] {
  animation: none;
}

.build-disposition {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px 18px;
  margin-top: 18px;
  padding: clamp(16px, 2vw, 22px);
  border-radius: 20px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: var(--shadow);
}

.build-disposition--success {
  border-color: color-mix(in srgb, var(--good) 34%, var(--border));
  background: color-mix(in srgb, var(--good) 8%, var(--panel));
}

.build-disposition--danger {
  border-color: color-mix(in srgb, var(--bad) 34%, var(--border));
  background: color-mix(in srgb, var(--bad) 8%, var(--panel));
}

.build-disposition--muted {
  border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
}

.build-disposition-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--border);
}

.build-disposition--success .build-disposition-icon {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 36%, var(--border));
}

.build-disposition--danger .build-disposition-icon {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 36%, var(--border));
}

.build-disposition-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.build-disposition-title {
  margin: 6px 0 0;
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 700;
  color: var(--text);
}

.build-disposition-summary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.build-disposition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

@media (max-width: 920px) {
  .mission-dial-stage,
  .mission-progress-strip,
  .mission-kpi-deck,
  .mission-brief-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mission-hero-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .mission-dial-wrap {
    width: 88px;
    max-width: 88px;
    justify-self: center;
  }

  .mission-dial-copy {
    text-align: center;
  }

  .mission-dial-copy p,
  .mission-brief-narrative {
    margin-left: auto;
    margin-right: auto;
  }

  .mission-dial-chips {
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-outer,
  .mission-dial-shell[data-build-live="1"] .mission-dial-wrap .mission-dial-ring-inner,
  .mission-dial-shell[data-build-queued="1"] .mission-dial-wrap .mission-dial-ring-outer,
  .mission-dial-gauge.is-indeterminate .mission-dial-ring-outer,
  .mission-dial-gauge.is-phase-indeterminate .mission-dial-ring-inner,
  .mission-dial-aurora,
  .mission-dial-orbit,
  .mission-dial-halo,
  .mission-kpi-card--enter,
  .mission-rail-cell[data-state="active"],
  .mission-queue-dot,
  .mission-dial-shell[data-build-live="1"],
  .mission-dial-shell[data-build-queued="1"] {
    animation: none !important;
  }
}

/* ── Analytics dashboard (gauges, rings, funnel, charts) ── */
.analytics-kpi-grid {
  display: grid;
  gap: 8px;
}

.analytics-kpi-grid.g4 {
  grid-template-columns: repeat(4, 1fr);
}

.analytics-kpi-grid.g3 {
  grid-template-columns: repeat(3, 1fr);
}

.analytics-kpi-grid.g2 {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1100px) {

  .analytics-kpi-grid.g4,
  .analytics-kpi-grid.g3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {

  .analytics-kpi-grid.g4,
  .analytics-kpi-grid.g3,
  .analytics-kpi-grid.g2 {
    grid-template-columns: 1fr;
  }
}

.analytics-section-hd {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.analytics-section-hd .dot {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
  background: var(--instrument-tick, var(--border));
}

.analytics-dot-violet,
.analytics-dot-mint,
.analytics-dot-amber,
.analytics-dot-pink,
.analytics-dot-good {
  background: var(--instrument-tick, var(--border));
}

.analytics-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  display: inline-block;
  animation: analyticsPulseLive 2s infinite;
}

@keyframes analyticsPulseLive {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 40%, transparent);
  }

  50% {
    opacity: .7;
    box-shadow: 0 0 0 6px transparent;
  }
}

.analytics-metric-card {
  background: var(--instrument-face, var(--panel));
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 8px 10px;
  position: relative;
  overflow: hidden;
  color: var(--text);
  box-shadow: inset 0 1px 0 var(--bevel-highlight, transparent);
}

.analytics-metric-card:hover {
  border-color: color-mix(in srgb, var(--border) 70%, var(--text));
}

.analytics-metric-card.accent-violet,
.analytics-metric-card.accent-mint,
.analytics-metric-card.accent-amber,
.analytics-metric-card.accent-pink,
.analytics-metric-card.accent-good {
  border-left: 1px solid var(--border);
}

.analytics-metric-card .am-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.analytics-metric-card .am-value {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 26px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--text);
}

.analytics-metric-card .am-value.tone-violet,
.analytics-metric-card .am-value.tone-mint,
.analytics-metric-card .am-value.tone-amber,
.analytics-metric-card .am-value.tone-good,
.analytics-metric-card .am-value.tone-pink {
  color: var(--text);
}

.analytics-metric-card .am-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.45;
}

.analytics-metric-card .am-body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.analytics-metric-card .am-copy {
  min-width: 0;
  flex: 1;
}

.analytics-ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 84px;
  height: 84px;
  flex-shrink: 0;
}

.analytics-ring--sm { width: 72px; height: 72px; }
.analytics-ring--lg { width: 96px; height: 96px; }

.analytics-ring .ring-svg {
  display: block;
}

.analytics-ring .ring-bg,
.analytics-ring .ring-inner-bg,
.analytics-ring .ring-fill,
.analytics-ring .ring-inner-fill {
  fill: none;
  stroke-linecap: round;
  transform-origin: center;
  transform: rotate(-90deg);
  transform-box: fill-box;
}

.analytics-ring .ring-bg {
  stroke: color-mix(in srgb, var(--border) 80%, transparent);
  stroke-width: 7;
}

.analytics-ring .ring-inner-bg {
  stroke: color-mix(in srgb, var(--border) 45%, transparent);
  stroke-width: 3.5;
}

.analytics-ring .ring-fill {
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.55s cubic-bezier(.22, 1, .36, 1);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 28%, transparent));
}

.analytics-ring .ring-inner-fill {
  stroke-width: 3.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.75s cubic-bezier(.22, 1, .36, 1) .12s;
  opacity: .55;
}

.analytics-ring .ring-fill.tone-violet,
.analytics-ring .ring-inner-fill.tone-violet { stroke: var(--accent); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent) 35%, transparent)); }
.analytics-ring .ring-fill.tone-mint,
.analytics-ring .ring-inner-fill.tone-mint { stroke: var(--accent2); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--accent2) 35%, transparent)); }
.analytics-ring .ring-fill.tone-amber,
.analytics-ring .ring-inner-fill.tone-amber { stroke: var(--accent3); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent3) 30%, transparent)); }
.analytics-ring .ring-fill.tone-good,
.analytics-ring .ring-inner-fill.tone-good { stroke: var(--good); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--good) 35%, transparent)); }
.analytics-ring .ring-fill.tone-pink,
.analytics-ring .ring-inner-fill.tone-pink { stroke: var(--accent4); filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent4) 30%, transparent)); }

.analytics-ring .ring-ticks {
  pointer-events: none;
}

.analytics-ring .ring-tick {
  stroke: color-mix(in srgb, var(--muted) 45%, transparent);
  stroke-width: 1;
}

.analytics-ring .ring-tick.is-major {
  stroke: color-mix(in srgb, var(--muted) 75%, transparent);
  stroke-width: 1.4;
}

.analytics-ring .ring-needle {
  transition: transform 1.55s cubic-bezier(.22, 1, .36, 1);
  transform: rotate(0deg);
}

.analytics-ring .needle-shaft {
  stroke-width: 2;
  stroke-linecap: round;
}

.analytics-ring .needle-shaft.tone-violet { stroke: var(--accent); }
.analytics-ring .needle-shaft.tone-mint { stroke: var(--accent2); }
.analytics-ring .needle-shaft.tone-amber { stroke: var(--accent3); }
.analytics-ring .needle-shaft.tone-good { stroke: var(--good); }
.analytics-ring .needle-shaft.tone-pink { stroke: var(--accent4); }

.analytics-ring .needle-hub {
  fill: var(--panel);
  stroke: var(--border);
  stroke-width: 1.5;
}

.analytics-ring .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.analytics-ring .ring-label {
  font-size: 14px;
  font-weight: 800;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1;
  text-align: center;
  max-width: 62%;
}

.analytics-ring--sm .ring-label { font-size: 12px; }
.analytics-ring--lg .ring-label { font-size: 16px; }

/* KPI spark (count + micro arc + meter) */
.analytics-kpi-spark {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analytics-kpi-spark .spark-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.analytics-kpi-spark .spark-copy {
  min-width: 0;
  flex: 1;
}

.analytics-kpi-spark .spark-arc {
  flex-shrink: 0;
  transform: rotate(-90deg);
}

.analytics-kpi-spark .spark-arc-bg,
.analytics-kpi-spark .spark-arc-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}

.analytics-kpi-spark .spark-arc-bg {
  stroke: color-mix(in srgb, var(--border) 70%, transparent);
}

.analytics-kpi-spark .spark-arc-fill {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.4s cubic-bezier(.22, 1, .36, 1);
}

.analytics-kpi-spark .spark-arc-fill.tone-violet { stroke: var(--accent); }
.analytics-kpi-spark .spark-arc-fill.tone-mint { stroke: var(--accent2); }
.analytics-kpi-spark .spark-arc-fill.tone-amber { stroke: var(--accent3); }
.analytics-kpi-spark .spark-arc-fill.tone-good { stroke: var(--good); }
.analytics-kpi-spark .spark-arc-fill.tone-pink { stroke: var(--accent4); }

.analytics-kpi-spark .spark-meter {
  height: 4px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.analytics-kpi-spark .spark-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
}

.analytics-kpi-spark .spark-meter-fill.tone-violet { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.analytics-kpi-spark .spark-meter-fill.tone-mint { background: linear-gradient(90deg, var(--accent2), var(--good)); }
.analytics-kpi-spark .spark-meter-fill.tone-amber { background: linear-gradient(90deg, var(--accent3), var(--accent2)); }
.analytics-kpi-spark .spark-meter-fill.tone-good { background: var(--gradient-success); }
.analytics-kpi-spark .spark-meter-fill.tone-pink { background: linear-gradient(90deg, var(--accent4), var(--accent)); }

.analytics-funnel-card {
  margin-top: 18px;
}

.analytics-funnel-steps {
  display: grid;
  gap: 14px;
}

.analytics-funnel-step {
  display: grid;
  grid-template-columns: 120px 1fr 72px;
  gap: 12px;
  align-items: center;
}

@media (max-width: 640px) {
  .analytics-funnel-step {
    grid-template-columns: 88px 1fr 56px;
    gap: 8px;
  }
}

.analytics-funnel-step .step-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.analytics-funnel-step .step-track {
  height: 26px;
  border-radius: 10px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 45%, transparent);
  border: 1px solid var(--border);
  position: relative;
}

.analytics-funnel-step .step-fill {
  height: 100%;
  width: 0;
  border-radius: 9px;
  position: relative;
  transition: width 1.35s cubic-bezier(.22, 1, .36, 1);
  overflow: hidden;
}

.analytics-funnel-step .step-fill-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, #fff 22%, transparent) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: analyticsShimmer 2.4s ease-in-out infinite;
  pointer-events: none;
}

.analytics-funnel-step .step-fill.tone-violet {
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 70%, var(--accent4)));
}

.analytics-funnel-step .step-fill.tone-mint {
  background: linear-gradient(90deg, var(--accent2), color-mix(in srgb, var(--accent2) 75%, var(--good)));
}

.analytics-funnel-step .step-fill.tone-amber {
  background: linear-gradient(90deg, var(--accent3), color-mix(in srgb, var(--accent3) 70%, var(--accent2)));
}

.analytics-funnel-step .step-fill.tone-good {
  background: var(--gradient-success);
}

.analytics-funnel-step .step-count {
  font-size: 13px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  text-align: right;
}

/* Pyramid / trapezoid funnel — always-visible colored bands */
.analytics-funnel-pyramid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 10px 4px 6px;
  min-height: 220px;
  background:
    radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 55%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 80%, transparent), transparent);
  border-radius: 14px;
}

.analytics-funnel-pyramid .funnel-band {
  width: var(--band-width, 100%);
  max-width: 100%;
  margin: 0 auto;
}

.analytics-funnel-pyramid .funnel-band-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  border-radius: 14px;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0% 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    0 10px 24px color-mix(in srgb, var(--bg) 28%, transparent);
}

.analytics-funnel-pyramid .funnel-band:first-child .funnel-band-inner,
.analytics-funnel-pyramid .funnel-band.analytics-anim-delay-0 .funnel-band-inner {
  clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%);
}

.analytics-funnel-pyramid .funnel-band-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    color-mix(in srgb, #fff 18%, transparent) 42%,
    transparent 68%
  );
  background-size: 220% 100%;
  animation: analyticsShimmer 2.8s ease-in-out infinite;
  opacity: 0.55;
}

.analytics-funnel-pyramid .funnel-band-inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--band-fill, 100%);
  max-width: 100%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--funnel-tone, var(--accent)) 55%, transparent),
    color-mix(in srgb, var(--funnel-tone, var(--accent)) 18%, transparent)
  );
  pointer-events: none;
  z-index: 0;
}

.analytics-funnel-pyramid .funnel-band-label,
.analytics-funnel-pyramid .funnel-band-meta {
  position: relative;
  z-index: 1;
}

.analytics-funnel-pyramid .funnel-band.tone-violet {
  --funnel-tone: var(--accent);
}
.analytics-funnel-pyramid .funnel-band.tone-mint {
  --funnel-tone: var(--accent2);
}
.analytics-funnel-pyramid .funnel-band.tone-good {
  --funnel-tone: var(--good);
}
.analytics-funnel-pyramid .funnel-band.tone-amber {
  --funnel-tone: var(--accent3);
}

.analytics-funnel-pyramid .funnel-band.tone-violet .funnel-band-inner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent) 42%, var(--panel)),
    color-mix(in srgb, var(--accent) 16%, var(--panel))
  );
}
.analytics-funnel-pyramid .funnel-band.tone-mint .funnel-band-inner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent2) 40%, var(--panel)),
    color-mix(in srgb, var(--accent2) 14%, var(--panel))
  );
}
.analytics-funnel-pyramid .funnel-band.tone-good .funnel-band-inner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--good) 38%, var(--panel)),
    color-mix(in srgb, var(--good) 12%, var(--panel))
  );
}
.analytics-funnel-pyramid .funnel-band.tone-amber .funnel-band-inner {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--accent3) 40%, var(--panel)),
    color-mix(in srgb, var(--accent3) 14%, var(--panel))
  );
}

.analytics-funnel-pyramid .funnel-band-label {
  font-size: 13px;
  letter-spacing: 0.02em;
}

.analytics-funnel-pyramid .funnel-band-meta {
  display: grid;
  justify-items: end;
  gap: 2px;
}

.analytics-funnel-pyramid .funnel-band-count {
  font-size: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.analytics-funnel-pyramid .funnel-band-share {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.analytics-funnel-pyramid .funnel-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: min(72%, 280px);
  margin: 4px 0;
}

.analytics-funnel-pyramid .funnel-drop-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--border) 85%, transparent),
    transparent
  );
}

.analytics-funnel-pyramid .funnel-drop-chip {
  flex: 0 0 auto;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  background: color-mix(in srgb, var(--panel) 88%, var(--funnel-tone, var(--accent)));
  color: var(--text);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.analytics-funnel-pyramid .funnel-drop-chip.tone-violet {
  --funnel-tone: var(--accent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}
.analytics-funnel-pyramid .funnel-drop-chip.tone-mint {
  --funnel-tone: var(--accent2);
  color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent2) 35%, var(--border));
}
.analytics-funnel-pyramid .funnel-drop-chip.tone-good {
  --funnel-tone: var(--good);
  color: var(--good);
  background: color-mix(in srgb, var(--good) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
}
.analytics-funnel-pyramid .funnel-drop-chip.tone-amber {
  --funnel-tone: var(--accent3);
  color: var(--accent3);
  background: color-mix(in srgb, var(--accent3) 14%, var(--panel));
  border-color: color-mix(in srgb, var(--accent3) 35%, var(--border));
}

.analytics-funnel-pyramid .funnel-connector {
  display: none;
}

/* Detailed funnel flow — precision gauge board */
.analytics-funnel-flow {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.analytics-funnel-flow .funnel-flow-lede {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.analytics-funnel-flow .funnel-flow-stage-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.analytics-funnel-flow .funnel-flow-stage-legend-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.analytics-funnel-flow .funnel-flow-step-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--funnel-tone, var(--accent)) 35%, var(--border));
  background: color-mix(in srgb, var(--funnel-tone, var(--accent)) 12%, var(--panel));
  color: var(--funnel-tone, var(--accent));
  font-size: 12px;
  font-weight: 800;
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.analytics-funnel-flow .funnel-flow-stage-legend-item.tone-violet,
.analytics-funnel-flow .funnel-flow-stage.tone-violet { --funnel-tone: var(--accent); }
.analytics-funnel-flow .funnel-flow-stage-legend-item.tone-mint,
.analytics-funnel-flow .funnel-flow-stage.tone-mint { --funnel-tone: var(--accent2); }
.analytics-funnel-flow .funnel-flow-stage-legend-item.tone-amber,
.analytics-funnel-flow .funnel-flow-stage.tone-amber { --funnel-tone: var(--accent3); }
.analytics-funnel-flow .funnel-flow-stage-legend-item.tone-good,
.analytics-funnel-flow .funnel-flow-stage.tone-good { --funnel-tone: var(--good); }

.analytics-funnel-flow .funnel-flow-stage-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.analytics-funnel-flow .funnel-flow-stage-title {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  color: var(--text);
}

.analytics-funnel-flow .funnel-flow-stage-desc {
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}

.analytics-funnel-flow .funnel-flow-stage-gauges {
  margin-top: 2px;
}

.analytics-funnel-flow .funnel-flow-of-worked {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.analytics-funnel-flow .funnel-flow-transitions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

.analytics-funnel-flow .funnel-flow-transitions .instrument-gauge-card .instrument-dial-label {
  max-width: 16ch;
  text-align: center;
  line-height: 1.25;
}

@media (max-width: 1050px) {
  .analytics-funnel-flow .funnel-flow-stage-legend,
  .analytics-funnel-flow .funnel-flow-transitions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .analytics-funnel-flow .funnel-flow-stage-legend,
  .analytics-funnel-flow .funnel-flow-transitions {
    grid-template-columns: 1fr;
  }
}

/* Active work ops dashboard — gauges + agent workload cards (analytics) */
.analytics-active-work-dashboard {
  display: grid;
  gap: 14px;
  margin-top: 4px;
}

.analytics-active-work-summary {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 12px;
  align-items: stretch;
}

.analytics-active-work-dial-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px 16px;
  border-radius: 14px;
}

.analytics-active-work-meters {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.analytics-active-work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  gap: 12px;
  align-items: start;
}

.analytics-active-work-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.analytics-active-work-panel-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.analytics-active-work-agents,
.analytics-active-work-aside-panel {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: inset 0 1px 0 var(--bevel-highlight);
}

.analytics-active-work-aside {
  display: grid;
  gap: 12px;
  align-content: start;
  max-height: min(560px, 72vh);
}

.analytics-active-work-aside-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(268px, 36vh);
}

.analytics-active-work-aside-panel .analytics-active-work-panel-head {
  margin-bottom: 8px;
  flex-shrink: 0;
}

.analytics-active-work-aside-scroll {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
  padding-right: 2px;
  overscroll-behavior: contain;
}

.analytics-active-work-agent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}

.analytics-active-work-agent {
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.analytics-active-work-agent:hover,
.analytics-active-work-agent:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}

.analytics-active-work-agent-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px;
  align-items: center;
}

.analytics-active-work-agent-name {
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-active-work-agent-count {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.analytics-active-work-agent-sub {
  font-size: 10px;
  margin-top: 1px;
  line-height: 1.3;
}

.analytics-active-work-empty {
  font-size: 11px;
  line-height: 1.4;
}

.analytics-active-work-disposition-meters {
  display: grid;
  gap: 8px;
}

@media (max-width: 960px) {
  .analytics-active-work-summary,
  .analytics-active-work-grid {
    grid-template-columns: 1fr;
  }
}

.analytics-chart-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 300px;
}

.analytics-chart-box .chart-title {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}

.analytics-chart-box .chart-sub {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.analytics-echart {
  width: 100%;
  height: 280px;
}

.analytics-echart.tall {
  height: 320px;
}

.analytics-echart.gauge-host {
  height: 220px;
}

.analytics-chart-box.is-gauge {
  min-height: 280px;
}

.analytics-inline-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.analytics-inline-bar .bar-track {
  width: 88px;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 55%, transparent);
}

.analytics-inline-bar .bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1s cubic-bezier(.4, 0, .2, 1);
}

.analytics-roi-meter {
  margin-top: 14px;
}

.analytics-roi-meter .meter-row {
  display: grid;
  grid-template-columns: 96px 1fr 80px;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.analytics-roi-meter .meter-label {
  font-size: 12px;
  color: var(--muted);
}

.analytics-roi-meter .meter-track {
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  position: relative;
}

.analytics-roi-meter .meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: width 1.25s cubic-bezier(.22, 1, .36, 1);
}

.analytics-roi-meter .meter-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 28%, transparent), transparent);
  background-size: 200% 100%;
  animation: analyticsShimmer 2.2s ease-in-out infinite;
  pointer-events: none;
}

.analytics-roi-meter .meter-fill.tone-revenue {
  background: linear-gradient(90deg, var(--accent2), var(--good));
}

.analytics-roi-meter .meter-fill.tone-cost {
  background: linear-gradient(90deg, var(--accent4), var(--accent));
}

.analytics-roi-meter .meter-value {
  font-size: 12px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  text-align: right;
  color: var(--text);
}

/* Source performance as horizontal chart rows (less table) */
.analytics-source-chart {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.analytics-source-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr auto;
  gap: 12px;
  align-items: center;
}

@media (max-width: 720px) {
  .analytics-source-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

.analytics-source-row .src-key {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.analytics-source-row .src-track {
  height: 18px;
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  border: 1px solid var(--border);
  position: relative;
}

.analytics-source-row .src-fill {
  height: 100%;
  width: 0;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width 1.3s cubic-bezier(.22, 1, .36, 1);
  position: relative;
  overflow: hidden;
}

.analytics-source-row .src-meta {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
  min-width: 110px;
}

.analytics-anim-up {
  opacity: 0;
  transform: translateY(10px);
  animation: analyticsFadeUp .55s ease forwards;
}

@keyframes analyticsFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes analyticsShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes analyticsNeedleSettle {
  0% { transform: rotate(var(--needle-from, 0deg)); }
  70% { transform: rotate(calc(var(--needle-to, 0deg) + 4deg)); }
  100% { transform: rotate(var(--needle-to, 0deg)); }
}

.analytics-anim-delay-1 { animation-delay: .08s; }
.analytics-anim-delay-2 { animation-delay: .16s; }
.analytics-anim-delay-3 { animation-delay: .24s; }
.analytics-anim-delay-4 { animation-delay: .32s; }

@media (prefers-reduced-motion: reduce) {
  .analytics-live-dot,
  .analytics-ring .ring-fill,
  .analytics-ring .ring-inner-fill,
  .analytics-ring .ring-needle,
  .analytics-funnel-step .step-fill,
  .analytics-funnel-step .step-fill-glow,
  .analytics-funnel-pyramid .funnel-band-inner,
  .analytics-funnel-pyramid .funnel-band-glow,
  .analytics-inline-bar .bar-fill,
  .analytics-roi-meter .meter-fill,
  .analytics-roi-meter .meter-shimmer,
  .analytics-kpi-spark .spark-arc-fill,
  .analytics-kpi-spark .spark-meter-fill,
  .analytics-source-row .src-fill,
  .analytics-anim-up {
    animation: none !important;
    transition: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ── Rep Map (territory ↔ planned rep coverage) ── */
.rep-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.rep-map-card {
  position: relative;
  overflow: hidden;
}
.rep-map-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 3px;
}
.rep-map-card.is-bench::before {
  background: var(--border);
}
.rep-map-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 16px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  flex: 0 0 auto;
}
.rep-map-card.is-bench .rep-map-avatar {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  border-color: var(--border);
}
.rep-map-avatar.is-open {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
}
.rep-map-county-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rep-map-county-chips .chip {
  font-size: 11px;
  padding: 3px 9px;
}
.rep-map-name-form {
  display: flex;
  gap: 8px;
  align-items: center;
}
.rep-map-name-form input {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
}
.rep-map-meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Routing v2 + Rep Map v2 (streamlined assign workflows) ── */
.routing-v2-head {
  border-bottom: 1px solid var(--border);
}

.routing-v2-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.routing-v2-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.routing-v2-kpi-accent .routing-v2-kpi-value {
  color: var(--accent2);
}

.routing-v2-kpi-warn .routing-v2-kpi-value {
  color: var(--warn);
}

.routing-v2-kpi-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
}

.routing-v2-kpi-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.routing-v2-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--accent2) 40%, var(--border));
  background: color-mix(in srgb, var(--accent2) 6%, var(--surface));
}

.routing-v2-notice-warn {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.badge.accent {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.routing-recipients {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.routing-recipient-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  line-height: 1.3;
}

.routing-recipient-chip[data-reason="assigned"] {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.routing-recipient-name {
  font-weight: 700;
  color: var(--text);
}

.routing-history-scroll {
  overflow-x: auto;
}

.routing-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.routing-history-table th,
.routing-history-table td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.routing-history-table th {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
}

.routing-history-row:hover {
  background: color-mix(in srgb, var(--accent) 4%, transparent);
}

.routing-v2-toolbar-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.routing-v2-unlinked-filter {
  margin-left: auto;
}

.routing-v2-layout .routing-main {
  min-width: 0;
}

.routing-v2-assign-grid {
  align-items: stretch;
}

.routing-v2-row-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
}

.routing-v2-link-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.routing-v2-link-label-on {
  display: none;
  color: var(--accent2);
}

.routing-v2-link-label-off {
  color: var(--muted);
}

.routing-v2-terr-row.is-assigned .routing-v2-link-label-on {
  display: inline;
}

.routing-v2-terr-row.is-assigned .routing-v2-link-label-off {
  display: none;
}

.routing-v2-unlink-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  color: var(--muted);
}

.routing-v2-unlink-btn:not([hidden]) {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
  background: color-mix(in srgb, var(--bad) 8%, var(--surface));
}

.routing-v2-unlink-btn:not([hidden]):hover {
  background: color-mix(in srgb, var(--bad) 16%, var(--surface));
}

.routing-v2-unlink-all:not(:disabled) {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
}

.routing-v2-terr-head {
  align-items: flex-start;
}

.routing-v2-quick-actions {
  justify-content: flex-end;
}

.routing-v2-terr-row.is-picked {
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent);
}

.routing-v2-row-check input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.routing-v2-check-ui {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.routing-v2-row-check input:checked + .routing-v2-check-ui {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  box-shadow: inset 0 0 0 3px var(--surface);
}

.routing-v2-row-check input:focus-visible + .routing-v2-check-ui {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.routing-v2-terr-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.routing-v2-terr-row.is-assigned {
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
}

.routing-v2-terr-row.is-assigned .routing-v2-check-ui {
  border-color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 22%, var(--surface));
}

.routing-v2-info-btn {
  flex-shrink: 0;
  opacity: 0.55;
}

.routing-v2-info-btn:hover {
  opacity: 1;
}

.routing-v2-floating-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--modal-bg);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.routing-v2-floating-count {
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}

.routing-v2-inspector .routing-inspector-titlebar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.routing-v2-inspector-close {
  margin-left: auto;
}

.routing-v2-inspector.is-collapsed {
  display: none;
}

@media (max-width: 1100px) {
  .routing-v2-inspector.is-collapsed {
    display: none;
  }
}

/* ── Rep Map modern shell (assign-first) ── */
.rm-page {
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 48px;
}

.rm-page-head {
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--border);
}

.rm-page-head-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.rm-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.rm-page-sub {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 52ch;
  line-height: 1.45;
}

.rm-page-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.rm-page-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.rm-sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.rm-sub-pill {
  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);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: border-color .15s, background .15s, box-shadow .15s;
}

.rm-sub-pill:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.rm-sub-pill.is-active {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent);
}

.rm-sub-pill-tag {
  font-size: 10px;
  font-weight: 800;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.rm-empty-hint {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

.rm-page-body {
  padding: 18px 28px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rm-settings {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 0 16px;
}

.rm-settings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 14px 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.rm-settings > summary::-webkit-details-marker { display: none; }

.rm-settings-body {
  padding: 0 0 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.rm-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
}

.rm-check input {
  margin-top: 2px;
}

.rm-main-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  padding: 20px 20px 18px;
}

.cov-board--modern .rm-board-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.rm-board-title {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.rm-board-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}

.rm-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.rm-kpi {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--surface);
  min-width: 0;
}

.rm-kpi.is-warn {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.rm-kpi.is-clear {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
}

.rm-kpi-value {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text);
  font-family: 'JetBrains Mono', monospace;
}

.rm-kpi-value.tone-good { color: var(--good); }

.rm-kpi-label {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.rm-kpi-progress {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 8px;
}

.rm-progress-track {
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
  overflow: hidden;
}

.rm-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  transition: width .6s cubic-bezier(.22, 1, .36, 1);
}

.rm-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
  margin-bottom: 12px;
}

.rm-alert.is-info {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.rm-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 10px 0 12px;
  margin-bottom: 4px;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  backdrop-filter: blur(8px);
}

.rm-search {
  flex: 1;
  min-width: 200px;
}

.rm-view-toggle {
  display: inline-flex;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.rm-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.rm-view-btn.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--panel));
  color: var(--text);
}

.rm-gaps-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.rm-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.rm-select-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.rm-list-wrap {
  max-height: min(62vh, 640px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.rm-assign-table .rm-terr-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rm-terr-id {
  font-size: 13px;
  font-weight: 800;
  color: var(--text);
}

.rm-terr-name {
  font-size: 12px;
  color: var(--muted);
}

.rm-terr-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.rm-meta-stack {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rm-row-actions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
}

.rm-panel[hidden] { display: none !important; }

.rm-secondary {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 0 14px 12px;
}

.rm-secondary > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  font-size: 13px;
  font-weight: 800;
}

.rm-secondary > summary::-webkit-details-marker { display: none; }

.rm-overview-head {
  margin-bottom: 4px;
}

.rm-overview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rm-overview-card {
  display: block;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

.rm-overview-card:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.rm-overview-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.rm-overview-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.rm-overview-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.rm-overview-status {
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.rm-overview-status.is-good {
  color: var(--good);
  background: color-mix(in srgb, var(--good) 12%, transparent);
}

.rm-overview-status.is-warn {
  color: var(--warn);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
}

.rm-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.rm-overview-chip {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  min-width: 96px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  color: var(--muted);
}

.rm-overview-chip.is-gap {
  border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
  color: var(--warn);
  font-weight: 700;
}

.rm-overview-chip.is-more {
  justify-content: center;
  font-weight: 700;
}

.rm-overview-cta {
  margin-top: 12px;
  font-size: 12px;
  font-weight: 800;
  color: var(--accent);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 800px) {
  .rm-kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-page-head,
  .rm-page-body { padding-left: 16px; padding-right: 16px; }
  .rm-col-meta { display: none; }
  .rm-assign-table .rep-map-v2-col-actions { display: none; }
}

.rep-map-v2-head {
  border-bottom: 1px solid var(--border);
}

.rep-map-v2-sub-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rep-map-v2-sub-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 700;
}

.rep-map-v2-sub-pill.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.rep-map-v2-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.rep-map-v2-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.rep-map-v2-search {
  flex: 1;
  min-width: 200px;
}

.rep-map-v2-bulk-rep {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Territory Coverage board (exec-grade, glanceable) ── */
.cov-board {
  display: block;
}

.cov-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.cov-stat {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}

.cov-stat::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--muted);
  opacity: 0.5;
}

.cov-stat--accent::before { background: var(--accent); opacity: 1; }
.cov-stat--good::before { background: var(--good); opacity: 1; }
.cov-stat--warn::before { background: var(--warn); opacity: 1; }
.cov-stat--warn { background: color-mix(in srgb, var(--warn) 7%, var(--surface)); }
.cov-stat--warn.is-clear { background: var(--surface); }
.cov-stat--warn.is-clear::before { background: var(--good); }

.cov-stat-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.cov-stat-label {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  color: var(--muted);
}

.rep-cov-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rep-cov-sub {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rep-cov-sub:hover,
.rep-cov-sub:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
  outline: none;
}

.rep-cov-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.rep-cov-sub-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

.rep-cov-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rep-cov-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
  padding: 7px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}

.rep-cov-cell:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.rep-cov-cell.is-gap {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.rep-cov-cell-terr {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
}

.rep-cov-cell-rep {
  font-size: 11px;
  color: var(--muted);
}

.rep-cov-cell.is-gap .rep-cov-cell-rep {
  color: var(--warn);
  font-weight: 700;
}

.cov-lanes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cov-lane {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  background: var(--surface);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.cov-lane:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow: var(--shadow);
}

.cov-lane--unassigned {
  border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface));
}

.cov-lane-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  max-width: 200px;
}

.cov-avatar {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.cov-avatar--1 { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #000)); }
.cov-avatar--2 { background: linear-gradient(135deg, var(--accent2), color-mix(in srgb, var(--accent2) 55%, #000)); }
.cov-avatar--3 { background: linear-gradient(135deg, var(--accent3), color-mix(in srgb, var(--accent3) 55%, #000)); }
.cov-avatar--4 { background: linear-gradient(135deg, var(--accent4), color-mix(in srgb, var(--accent4) 55%, #000)); }
.cov-avatar--warn {
  background: color-mix(in srgb, var(--warn) 22%, var(--panel));
  color: var(--warn);
  font-size: 20px;
}

.cov-lane-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
}

.cov-lane-meta {
  margin-top: 2px;
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
}

.cov-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-content: flex-start;
}

.cov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px 4px 11px;
  font-size: 12px;
  font-weight: 700;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s, transform 0.05s;
}

.cov-chip:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
}

.cov-chip:active { transform: scale(0.97); }
.cov-chip .cov-chip-id { font-family: var(--font-mono, monospace); }

.cov-chip-tier {
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--good) 18%, transparent);
  color: var(--good);
}

.cov-note {
  border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, transparent);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--text);
}

.cov-empty {
  border: 1px dashed var(--border);
  border-radius: 14px;
  padding: 28px 16px;
  text-align: center;
}

.cov-edit {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel) 60%, transparent);
  padding: 4px 14px 14px;
}

.cov-edit > .cov-edit-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 12px 2px;
  font-size: 13px;
  font-weight: 800;
}

.cov-edit > .cov-edit-summary::-webkit-details-marker { display: none; }

.cov-edit > .cov-edit-summary::after {
  content: "▾";
  margin-left: auto;
  color: var(--muted);
  transition: transform 0.15s;
}

.cov-edit[open] > .cov-edit-summary::after { transform: rotate(180deg); }

.rep-map-v2-row.is-flash {
  box-shadow: inset 0 0 0 2px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent) !important;
}

.rep-map-v2-table-wrap-embed {
  max-height: 460px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
}

@media (max-width: 640px) {
  .cov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cov-lane { flex-direction: column; gap: 10px; }
  .cov-lane-head { max-width: none; min-width: 0; }
}

.rep-map-v2-bulk-rep input,
.rep-map-v2-bulk-rep select {
  min-width: 180px;
}

.rep-map-v2-table-wrap {
  overflow: auto;
}

.rep-map-v2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.rep-map-v2-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.rep-map-v2-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  vertical-align: middle;
}

.rep-map-v2-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.rep-map-v2-table tbody tr.is-open {
  background: color-mix(in srgb, var(--warn) 6%, transparent);
}

.rep-map-v2-col-check {
  width: 40px;
}

.rep-map-v2-col-actions {
  width: 72px;
  text-align: right;
}

.rep-map-v2-rep-select {
  width: 100%;
  min-width: 160px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.rep-map-v2-rep-select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.rep-map-v2-rep-select.is-saving {
  opacity: 0.65;
}

.rep-map-v2-rep-select.is-saved {
  border-color: var(--good);
}

.rep-map-v2-counties {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

@media (max-width: 768px) {
  .routing-v2-floating-bar {
    left: 12px;
    right: 12px;
    transform: none;
    bottom: 12px;
  }

  .rep-map-v2-table thead {
    display: none;
  }

  .rep-map-v2-table tbody tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
  }

  .rep-map-v2-table tbody td {
    display: block;
    border: none;
    padding: 4px 12px;
  }
}

/* ── Shared tab primitive (eigen-tabs) ── */
[data-eigen-tabs] {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.eigen-tabs-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px;
  margin-bottom: 20px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  background:
    var(--gradient-card),
    color-mix(in srgb, var(--panel) 88%, transparent);
}

.eigen-tab-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-smooth),
    color var(--duration-fast) var(--ease-smooth),
    border-color var(--duration-fast) var(--ease-smooth),
    box-shadow var(--duration-fast) var(--ease-smooth);
  white-space: nowrap;
}

.eigen-tab-btn:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.eigen-tab-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.eigen-tab-btn.is-active {
  color: var(--text);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow: 0 1px 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.eigen-tab-panel {
  display: none;
}

.eigen-tab-panel.is-active {
  display: block;
}

.eigen-tab-panel[hidden] {
  display: none !important;
}

/* Subscriber command header */
.sub-command-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.sub-command-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.sub-health-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--muted);
}

.sub-health-strip strong {
  color: var(--text);
  font-weight: 700;
}

.sub-health-alert {
  color: var(--bad);
  font-weight: 600;
}

/* Subscriber hero — reuses global .hero gradient; tone kicker from live state */
.sub-hero .hero-kicker {
  margin-bottom: 10px;
}

.sub-hero-kicker--good {
  border-color: color-mix(in srgb, var(--good) 35%, transparent);
  background: color-mix(in srgb, var(--good) 12%, transparent);
  color: var(--good);
}

.sub-hero-kicker--warn {
  border-color: color-mix(in srgb, var(--warn) 35%, transparent);
  background: color-mix(in srgb, var(--warn) 12%, transparent);
  color: var(--warn);
}

.sub-hero-kicker--off {
  border-color: color-mix(in srgb, var(--muted) 35%, transparent);
  background: color-mix(in srgb, var(--muted) 10%, transparent);
  color: var(--muted);
}

.sub-hero-kicker--accent {
  border-color: color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.sub-workspace-card.card:hover {
  transform: none;
}

.sub-graph-panel {
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  border-radius: 16px;
  padding: 16px 12px 8px;
  background:
    var(--gradient-card),
    var(--surface);
}

.sub-overview-stats {
  margin-bottom: 22px;
}

.sub-overview-stats .cov-stat {
  background:
    var(--gradient-card),
    var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--shadow) 40%, transparent);
}

.sub-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.sub-kpi-card {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 60%, transparent);
}

.sub-kpi-value {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.sub-kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.sub-routing-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent2) 35%, var(--border));
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
  font-size: 12px;
  color: var(--muted);
}

.sub-routing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

/* Scope board restyle — segmented mode control */
.routing-scope-mode-bar {
  display: inline-flex;
  padding: 3px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--panel) 80%, transparent);
}

.routing-scope-mode-bar .routing-scope-mode-btn {
  border: none;
  border-radius: 9px;
  margin: 0;
  box-shadow: none;
}

.routing-scope-mode-bar .routing-scope-mode-btn.primary {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 2px var(--shadow);
}

.routing-scope-col-head .routing-scope-col-title {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.02em;
}

@media (max-width: 768px) {
  .eigen-tabs-bar {
    flex-direction: column;
  }

  .eigen-tab-btn {
    width: 100%;
    text-align: left;
  }
}

/* ── Glass Box / Provable Leads ─────────────────────────────────────────── */

.glass-panel {
  border: 1px solid color-mix(in srgb, var(--accent2) 22%, var(--border));
  border-radius: 16px;
  padding: 20px 22px;
  background:
    var(--gradient-card),
    color-mix(in srgb, var(--accent2) 4%, var(--surface));
}

.glass-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.glass-panel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--accent2-light);
  margin-bottom: 6px;
}

.glass-panel-title {
  font-size: 18px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}

.glass-panel-sub {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
  max-width: 52ch;
  line-height: 1.5;
}

.glass-panel-actions {
  flex-shrink: 0;
}

.glass-panel-stats,
.glass-dashboard-stats,
.glass-receipt-stats {
  margin-top: 4px;
}

.glass-panel-empty {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px dashed var(--border);
  font-size: 13px;
  margin-top: 8px;
}

.glass-pipeline {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.glass-pipeline-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.glass-pipeline-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: none;
  color: var(--muted);
}

.glass-pipeline-meta {
  font-size: 12px;
  line-height: 1.4;
}

.glass-pipeline-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 12px;
}

.glass-pipeline-endpoint {
  font-weight: 600;
  color: var(--text);
}

.glass-pipeline-route-ellipsis {
  font-size: 11px;
  letter-spacing: 0.04em;
}

.glass-pipeline-spine {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
}

.glass-spine-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 12px;
  line-height: 1.3;
  min-height: 38px;
}

.glass-spine-node.is-unknown {
  border-style: dashed;
}

.glass-spine-node--plan { border-top: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); }
.glass-spine-node--acquire { border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.glass-spine-node--normalize { border-top: 2px solid color-mix(in srgb, var(--accent2) 70%, transparent); }
.glass-spine-node--enrich { border-top: 2px solid color-mix(in srgb, var(--accent3) 70%, transparent); }
.glass-spine-node--quality { border-top: 2px solid color-mix(in srgb, var(--good) 70%, transparent); }
.glass-spine-node--geo { border-top: 2px solid color-mix(in srgb, var(--accent2) 55%, transparent); }
.glass-spine-node--signal { border-top: 2px solid color-mix(in srgb, var(--accent4) 70%, transparent); }
.glass-spine-node--score { border-top: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.glass-spine-node--publish { border-top: 2px solid color-mix(in srgb, var(--accent2) 45%, transparent); }
.glass-spine-node--deliver { border-top: 2px solid color-mix(in srgb, var(--accent2) 85%, transparent); }
.glass-spine-node--other { border-top: 2px solid var(--border); }

.glass-spine-name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-spine-count {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-mono, ui-monospace, monospace);
}

.glass-pipeline-path {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.glass-pipeline-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  line-height: 1.35;
}

.glass-pipeline-step:not(:last-child)::after {
  content: "→";
  margin: 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.glass-pipeline-step-name {
  font-weight: 600;
  color: var(--text);
}

.glass-pipeline-step-count {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
}

.glass-pipeline-raw {
  margin-top: 10px;
}

.glass-pipeline-loops,
.glass-pipeline-linear {
  margin-top: 10px;
}

.glass-pipeline-loops-summary,
.glass-pipeline-linear-summary,
.glass-pipeline-raw-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.glass-pipeline-loops-table-wrap {
  margin-top: 8px;
  overflow: auto;
  max-height: 180px;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.glass-pipeline-loops-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.glass-pipeline-loops-table th,
.glass-pipeline-loops-table td {
  text-align: left;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
}

.glass-pipeline-loops-table th {
  font-size: 11px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: var(--surface);
  position: sticky;
  top: 0;
}

.glass-pipeline-linear-list {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
}

.glass-pipeline-linear-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  font-size: 12px;
}

.glass-pipeline-linear-item:last-child {
  border-bottom: none;
}

.glass-pipeline-raw-summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.glass-pipeline-raw-body {
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 11px;
  line-height: 1.55;
  max-height: 160px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.glass-pipeline--compact {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.glass-pipeline-run-detail .glass-pipeline-spine {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.glass-retrieval-details {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}

.glass-retrieval-summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  color: var(--text);
}

.glass-retrieval-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

.glass-retrieval-row:last-child {
  border-bottom: none;
}

.glass-receipt {
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 14px;
  padding: 16px 18px;
  background:
    var(--gradient-card),
    var(--surface);
}

.glass-receipt-head {
  margin-bottom: 12px;
}

.glass-receipt-sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

a.glass-receipt-stat {
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

a.glass-receipt-stat:hover {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-1px);
}

.glass-recent-packs table {
  width: 100%;
}

@media (max-width: 768px) {
  .glass-panel-head {
    flex-direction: column;
  }

  .glass-panel-actions {
    width: 100%;
  }
}

/* ── Delivery 360 (routing canvas) ──────────────────────────────────────── */

.routing-360-page .routing-360-layout {
  display: grid;
  grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
  align-items: start;
}

.routing-360-page .routing-360-layout--unified {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(200px, 240px);
}

.routing-360-legend {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.routing-360-context {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.routing-360-context-title {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 800;
}

.routing-360-context-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.routing-360-context-pack {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.routing-360-context-pack:hover,
.routing-360-context-pack:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  outline: none;
}

.routing-360-context-pack.is-current {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.routing-360-context-pack-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

.routing-default-banner .card-inner {
  background: color-mix(in srgb, var(--good) 6%, var(--surface));
}

.r360-workspace-section {
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.r360-recipient-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r360-recipient-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
}

.r360-recipient-row:hover,
.r360-recipient-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  outline: none;
}

@media (max-width: 1100px) {
  .routing-360-page .routing-360-layout--unified {
    grid-template-columns: minmax(200px, 1fr) minmax(0, 2fr);
  }

  .routing-360-context {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .routing-360-page .routing-360-layout--unified {
    grid-template-columns: 1fr;
  }
}

.routing-360-rail {
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 120px);
  overflow: auto;
}

.routing-360-lens {
  flex-wrap: wrap;
}

.routing-360-lens-btn.is-active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  color: var(--text);
  font-weight: 700;
}

.routing-360-list-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.routing-360-entity-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.routing-360-entity-item {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.routing-360-entity-item:hover,
.routing-360-entity-item:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  outline: none;
}

.routing-360-entity-item.is-selected {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}

.routing-360-entity-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.routing-360-entity-action {
  flex-shrink: 0;
  margin-top: 2px;
}

.routing-360-entity-name {
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}

.routing-360-main .routing-inspector-host {
  min-height: 420px;
}

.r360-focus {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.r360-kind {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent2-light);
  margin-bottom: 4px;
}

.r360-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 4px;
  letter-spacing: -0.02em;
}

.r360-sub {
  font-size: 12px;
  margin: 0;
}

.r360-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.r360-col {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: var(--surface);
  min-height: 280px;
}

.r360-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.r360-col-head h3 {
  font-size: 13px;
  font-weight: 800;
  margin: 0;
}

.r360-count {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  background: color-mix(in srgb, var(--border) 40%, var(--surface));
  padding: 2px 8px;
  border-radius: 999px;
}

.r360-col-help {
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 10px;
  line-height: 1.45;
}

.r360-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.r360-list-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.r360-list-row:hover,
.r360-list-row:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  outline: none;
}

.r360-list-row.is-current {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.r360-list-title {
  font-weight: 700;
  font-size: 12px;
}

.r360-list-meta {
  font-size: 10px;
}

.r360-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel);
  cursor: pointer;
}

.r360-card.is-current {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
  background: color-mix(in srgb, var(--accent) 6%, var(--panel));
}

.r360-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.r360-chip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--panel);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.r360-inspector .routing-scope-columns {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

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

@media (max-width: 900px) {
  .routing-360-page .routing-360-layout {
    grid-template-columns: 1fr;
  }

  .routing-360-rail {
    position: static;
    max-height: none;
  }
}

/* ── Territory Owners 360 ── */
.rep-map-360-page .rep-map-360-scope .chip.ok {
  border-color: var(--good);
}

.rep-map-360-embed-layout {
  grid-template-columns: 220px minmax(0, 1fr);
}

.rep-map-360-embed .routing-360-rail {
  max-height: 420px;
}

.routing-scope-chip.is-owned-by-other {
  opacity: 0.72;
  border-style: dashed;
}

.rep-map-360-settings summary {
  list-style: none;
}

.rep-map-360-settings summary::-webkit-details-marker {
  display: none;
}

/* ── Agent profile (call list synopsis + detail grid) ── */
.agent-profile-synopsis {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.agent-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.agent-profile-tile {
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.agent-profile-tile-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}

.agent-profile-tile-label .field-help-trigger {
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
}

.agent-profile-tile-value {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.agent-profile-tile-value.insurance-insured {
  color: var(--accent2);
}

.agent-profile-tile-value.insurance-lapse {
  color: var(--warn);
}

/* ── Territory detail (geoset) ──────────────────────────────────────────── */

.territory-detail-page {
  width: 100%;
}

.territory-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

.territory-detail-stats {
  margin-top: 16px;
}

.territory-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.territory-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr);
  gap: 20px;
  margin-top: 18px;
  align-items: start;
}

.territory-detail-grid.no-map {
  grid-template-columns: 1fr;
}

.territory-detail-map-card #geoDetailMap {
  min-height: 420px;
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.territory-detail-places-card .geo-selected-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.territory-detail-section {
  margin-top: 18px;
}

.territory-detail-section h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
}

.territory-detail-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

.territory-detail-table-wrap {
  overflow-x: auto;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

.territory-detail-table-wrap table.data-table {
  width: 100%;
  min-width: 640px;
  margin: 0;
}

.territory-detail-table-wrap table.data-table th,
.territory-detail-table-wrap table.data-table td {
  white-space: nowrap;
}

.territory-detail-table-wrap table.data-table td.td-wrap {
  white-space: normal;
  min-width: 140px;
}

.territory-detail-table-wrap table.data-table td.td-pack {
  min-width: 180px;
}

.territory-routing-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.territory-detail-routing-card .footer-note {
  margin-top: 8px;
}

@media (max-width: 960px) {
  .territory-detail-grid {
    grid-template-columns: 1fr;
  }

  .territory-detail-map-card #geoDetailMap {
    min-height: 280px;
  }
}

/* ─── Build Detail — stability overrides (no SVG circle transforms) ─── */
.build-detail-page .build-mission-live,
.ops-detail-body--mission {
  isolation: isolate;
}

.build-detail-page .mission-dial-wrap,
.ops-detail-body--mission .mission-dial-wrap {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  min-width: 88px !important;
  flex: 0 0 88px !important;
  overflow: hidden !important;
  contain: strict !important;
}

.build-detail-page .mission-dial-wrap .build-gauge,
.ops-detail-body--mission .mission-dial-wrap .build-gauge {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  overflow: hidden !important;
}

.build-detail-page .mission-dial-wrap .build-gauge-svg,
.ops-detail-body--mission .mission-dial-wrap .build-gauge-svg {
  width: 88px !important;
  height: 88px !important;
  max-width: 88px !important;
  max-height: 88px !important;
  overflow: hidden !important;
}

/* Never animate transforms/filters on SVG geometry — causes full-viewport paint blowout. */
.build-detail-page .mission-dial-ring-outer,
.build-detail-page .mission-dial-ring-inner,
.build-detail-page .build-gauge-fill,
.ops-detail-body--mission .mission-dial-ring-outer,
.ops-detail-body--mission .mission-dial-ring-inner,
.ops-detail-body--mission .build-gauge-fill {
  animation: none !important;
  filter: none !important;
  transform: none !important;
}

.build-detail-page .mission-dial-gauge.is-indeterminate .build-gauge-svg,
.build-detail-page .mission-dial-gauge.is-phase-indeterminate .build-gauge-svg,
.ops-detail-body--mission .mission-dial-gauge.is-indeterminate .build-gauge-svg,
.ops-detail-body--mission .mission-dial-gauge.is-phase-indeterminate .build-gauge-svg {
  animation: gaugeSpin 1.4s linear infinite;
  transform-origin: 50% 50%;
}

.build-detail-page .build-gauge.is-indeterminate .build-gauge-fill,
.ops-detail-body--mission .build-gauge.is-indeterminate .build-gauge-fill {
  animation: none !important;
}

.build-detail-page .mission-dial-shell[data-build-live="1"],
.build-detail-page .mission-dial-shell[data-build-queued="1"],
.ops-detail-body--mission .mission-dial-shell[data-build-live="1"],
.ops-detail-body--mission .mission-dial-shell[data-build-queued="1"] {
  animation: none !important;
  box-shadow: none !important;
}

.build-detail-page .mission-dial-shell,
.ops-detail-body--mission .mission-dial-shell {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

.build-detail-page .mission-agentic-spotlight-gauge .build-gauge,
.ops-detail-body--mission .mission-agentic-spotlight-gauge .build-gauge {
  width: 56px !important;
  height: 56px !important;
  max-width: 56px !important;
  max-height: 56px !important;
  overflow: hidden;
}

.build-detail-page .mission-agentic-map .mc-stage-ring-slot .build-gauge,
.ops-detail-body--mission .mission-agentic-map .mc-stage-ring-slot .build-gauge {
  width: 36px !important;
  height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  overflow: hidden;
}

.build-detail-page .mission-hero-row,
.ops-detail-body--mission .mission-hero-row {
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 920px) {
  .build-detail-page .mission-hero-row,
  .ops-detail-body--mission .mission-hero-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
}

/* ── API Economics / Cost Report ───────────────────────────────────────── */
.cost-report-surface {
  display: grid;
  gap: 0;
  padding-bottom: 28px;
}

.cost-report-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  overflow: hidden;
  padding: clamp(24px, 4vw, 46px);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 26px;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 42%),
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent2) 18%, transparent), transparent 38%),
    radial-gradient(circle at 70% 90%, color-mix(in srgb, var(--accent4) 12%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel) 88%, var(--accent)), var(--panel));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
    0 28px 80px color-mix(in srgb, var(--accent) 12%, transparent);
}

.cost-report-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.cost-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .55;
  animation: costOrbFloat 9s ease-in-out infinite;
}

.cost-orb-a {
  width: 180px;
  height: 180px;
  top: -40px;
  left: 8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 42%, transparent), transparent 70%);
}

.cost-orb-b {
  width: 140px;
  height: 140px;
  top: 18%;
  right: 28%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent2) 38%, transparent), transparent 70%);
  animation-delay: -2s;
}

.cost-orb-c {
  width: 120px;
  height: 120px;
  bottom: -30px;
  left: 42%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent3) 34%, transparent), transparent 70%);
  animation-delay: -4s;
}

.cost-orb-d {
  width: 100px;
  height: 100px;
  bottom: 20%;
  right: 8%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent4) 36%, transparent), transparent 70%);
  animation-delay: -6s;
}

.cost-report-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto -8% -65% 34%;
  height: 220px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent2) 16%, transparent);
  filter: blur(60px);
}

.cost-report-hero-aura {
  position: absolute;
  z-index: -1;
  width: 220px;
  height: 220px;
  top: -120px;
  right: 22%;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-radius: 50%;
  box-shadow:
    0 0 0 38px color-mix(in srgb, var(--accent) 4%, transparent),
    0 0 0 76px color-mix(in srgb, var(--accent2) 3%, transparent);
  animation: costAuraDrift 8s ease-in-out infinite;
}

.cost-report-eyebrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: var(--accent2);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.cost-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 36%, transparent);
  animation: costLivePulse 2.2s ease-out infinite;
}

.cost-report-scope {
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  color: var(--muted);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  letter-spacing: .04em;
}

.cost-report-hero h1 {
  margin: 0;
  max-width: 820px;
  font-size: clamp(34px, 4.5vw, 64px);
  line-height: .98;
  letter-spacing: -.055em;
  color: var(--text);
  background: linear-gradient(120deg, var(--text) 20%, var(--accent) 55%, var(--accent2) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

[data-theme="light"] .cost-report-hero h1 {
  background: linear-gradient(120deg, var(--text) 10%, var(--accent) 60%, var(--accent6) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cost-report-hero-copy > p {
  max-width: 720px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
}

.cost-report-hero-copy code {
  padding: 1px 6px;
  border-radius: 6px;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
  font-size: .86em;
}

.cost-report-period {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.cost-report-period svg {
  color: var(--accent3);
}

.cost-report-period span {
  color: var(--muted);
  font-weight: 500;
}

.cost-hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.cost-hero-pill {
  --cost-tone: var(--accent);
  min-width: 118px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 28%, var(--border));
  border-radius: 14px;
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--cost-tone) 16%, transparent), color-mix(in srgb, var(--panel) 70%, transparent));
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent);
  animation: costPillGlow 4.5s ease-in-out infinite;
}

.cost-hero-pill.tone-mint { --cost-tone: var(--accent2); animation-delay: .4s; }
.cost-hero-pill.tone-amber { --cost-tone: var(--accent3); animation-delay: .8s; }
.cost-hero-pill.tone-pink { --cost-tone: var(--accent4); animation-delay: 1.2s; }
.cost-hero-pill.tone-violet { --cost-tone: var(--accent); }

.cost-hero-pill span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cost-hero-pill strong {
  display: block;
  margin-top: 5px;
  color: var(--cost-tone);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.cost-report-hero-actions {
  position: relative;
  display: grid;
  gap: 14px;
  align-self: stretch;
  align-content: end;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, var(--text) 4%);
  border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 76%, transparent);
  backdrop-filter: blur(14px);
}

.cost-report-hero-actions > .btn {
  width: 100%;
  justify-content: center;
}

.cost-window-form {
  display: grid;
  gap: 7px;
}

.cost-window-form label {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.cost-window-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.cost-window-control select {
  width: 100%;
  min-width: 0;
}

.cost-kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.cost-kpi-card {
  --cost-tone: var(--accent);
  position: relative;
  min-height: 158px;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 26%, var(--border));
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--cost-tone) 12%, var(--panel)), var(--panel) 66%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 6%, transparent);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.cost-kpi-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cost-tone) 52%, var(--border));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--cost-tone) 14%, transparent);
}

.cost-kpi-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    color-mix(in srgb, var(--cost-tone) 14%, transparent) 48%,
    transparent 66%
  );
  transform: translateX(-120%);
  animation: costShimmer 4.8s ease-in-out infinite;
  pointer-events: none;
}

.cost-kpi-card.tone-mint,
.cost-unit-card.tone-mint,
.cost-executive-strip > div.tone-mint {
  --cost-tone: var(--accent2);
}

.cost-kpi-card.tone-good {
  --cost-tone: var(--good);
}

.cost-kpi-card.tone-amber,
.cost-unit-card.tone-amber,
.cost-executive-strip > div.tone-amber {
  --cost-tone: var(--accent3);
}

.cost-kpi-card.tone-pink,
.cost-unit-card.tone-pink,
.cost-executive-strip > div.tone-pink {
  --cost-tone: var(--accent4);
}

.cost-kpi-card.tone-cyan,
.cost-executive-strip > div.tone-cyan {
  --cost-tone: var(--accent6);
}

.cost-kpi-card.tone-violet,
.cost-unit-card.tone-violet,
.cost-executive-strip > div.tone-violet {
  --cost-tone: var(--accent);
}

.cost-executive-strip > div.tone-warn {
  --cost-tone: var(--warn);
}

.cost-kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cost-kpi-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 28%, transparent);
  border-radius: 10px;
  color: var(--cost-tone);
  background: color-mix(in srgb, var(--cost-tone) 10%, transparent);
  animation: costIconBob 3.6s ease-in-out infinite;
}

.cost-kpi-label,
.cost-strip-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.cost-kpi-value {
  margin-top: 16px;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(20px, 1.9vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}

.cost-kpi-value-sm {
  margin-top: 8px;
  font-size: clamp(18px, 1.6vw, 24px);
}

.cost-kpi-meta {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.cost-kpi-track {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 70%, transparent);
}

.cost-kpi-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cost-tone), color-mix(in srgb, var(--cost-tone) 40%, var(--accent2)));
  box-shadow: 0 0 10px color-mix(in srgb, var(--cost-tone) 40%, transparent);
  transition: width 1.2s cubic-bezier(.22, 1, .36, 1);
}

.cost-kpi-accent {
  position: absolute;
  width: 90px;
  height: 90px;
  right: -32px;
  bottom: -38px;
  border: 16px solid color-mix(in srgb, var(--cost-tone) 12%, transparent);
  border-radius: 50%;
  animation: costAuraDrift 10s ease-in-out infinite;
}

.cost-kpi-card:has(.cost-kpi-ring) {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cost-kpi-copy {
  min-width: 0;
}

.cost-kpi-ring,
.cost-vendor-ring {
  position: relative;
  flex: 0 0 auto;
}

.cost-kpi-ring {
  width: 86px;
  height: 86px;
}

.cost-vendor-ring {
  width: 42px;
  height: 42px;
}

.cost-kpi-ring svg,
.cost-vendor-ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.cost-kpi-ring circle,
.cost-vendor-ring circle {
  fill: none;
  stroke-width: 5;
}

.cost-vendor-ring circle {
  stroke-width: 3.5;
}

.cost-ring-track {
  stroke: color-mix(in srgb, var(--border) 72%, transparent);
}

.cost-ring-value {
  stroke: var(--cost-tone, var(--accent2));
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--cost-tone, var(--accent2)) 42%, transparent));
  transition: stroke-dashoffset 1.4s cubic-bezier(.22, 1, .36, 1) .18s;
}

.cost-kpi-ring span,
.cost-vendor-ring span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 800;
  letter-spacing: -.04em;
}

.cost-kpi-ring span {
  font-size: 15px;
}

.cost-vendor-ring span {
  font-size: 9px;
}

.cost-executive-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}

.cost-executive-strip > div {
  --cost-tone: var(--accent);
  position: relative;
  min-width: 0;
  padding: 16px 18px;
  border-right: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cost-tone) 7%, transparent), transparent 70%);
}

.cost-executive-strip > div:last-child {
  border-right: 0;
}

.cost-executive-strip > div::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cost-tone), transparent);
  opacity: .7;
}

.cost-executive-strip strong {
  display: block;
  overflow: hidden;
  margin-top: 7px;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin: 34px 0 13px;
}

.cost-section-heading h2 {
  margin: 3px 0 0;
  color: var(--text);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.15;
  letter-spacing: -.035em;
}

.cost-section-heading > p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}

.cost-section-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.cost-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cost-chart-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-chart-card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--accent) 5%, var(--panel)), var(--panel) 55%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 5%, transparent);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.cost-chart-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--border));
  box-shadow: 0 16px 34px color-mix(in srgb, var(--accent) 8%, transparent);
}

.cost-chart-card-wide {
  margin-top: 14px;
}

.cost-chart-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px 4px;
}

.cost-chart-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  letter-spacing: -.02em;
}

.cost-chart-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.cost-chart-chip {
  flex: 0 0 auto;
  padding: 6px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}

.cost-chart-chip.tone-amber {
  color: var(--accent3);
  border-color: color-mix(in srgb, var(--accent3) 28%, var(--border));
  background: color-mix(in srgb, var(--accent3) 8%, transparent);
}

.cost-chart-chip.tone-mint {
  color: var(--accent2);
  border-color: color-mix(in srgb, var(--accent2) 28%, var(--border));
  background: color-mix(in srgb, var(--accent2) 8%, transparent);
}

.cost-chart-chip.tone-cyan {
  color: var(--accent6);
  border-color: color-mix(in srgb, var(--accent6) 28%, var(--border));
  background: color-mix(in srgb, var(--accent6) 8%, transparent);
}

.cost-chart-stage {
  position: relative;
  min-height: 310px;
}

.cost-chart-stage-wide {
  min-height: 360px;
}

.cost-chart {
  width: 100%;
  height: 310px;
}

.cost-chart-wide {
  height: 360px;
}

.cost-chart-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.cost-chart-stage.is-ready .cost-chart-fallback {
  display: none;
}

.cost-chart-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 12px;
  color: var(--muted);
  font-size: 10px;
}

.cost-chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cost-chart-legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.cost-chart-legend .legend-good {
  background: var(--accent2);
}

.cost-chart-legend .legend-warn {
  background: var(--accent3);
}

.cost-chart-legend .legend-vol {
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

.cost-vendor-list {
  display: grid;
  gap: 8px;
}

.cost-vendor-row {
  --cost-tone: var(--accent);
  display: grid;
  grid-template-columns: minmax(210px, .9fr) minmax(220px, 1.25fr) minmax(360px, 1.25fr) minmax(180px, .9fr);
  gap: 18px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 18%, var(--border));
  border-radius: 15px;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--cost-tone) 6%, var(--panel)), var(--panel) 48%);
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
  animation-delay: var(--cost-delay, 0ms);
}

.cost-vendor-row.cost-cat-acquisition { --cost-tone: var(--accent3); }
.cost-vendor-row.cost-cat-verification,
.cost-vendor-row.cost-cat-free { --cost-tone: var(--accent2); }
.cost-vendor-row.cost-cat-internal,
.cost-vendor-row.cost-cat-infra { --cost-tone: var(--accent6); }
.cost-vendor-row.cost-cat-other { --cost-tone: var(--accent5); }

.cost-vendor-row:hover {
  transform: translateX(4px);
  border-color: color-mix(in srgb, var(--cost-tone) 42%, var(--border));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cost-tone) 10%, transparent);
}

.cost-vendor-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cost-vendor-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 24%, var(--border));
  border-radius: 9px;
  color: var(--cost-tone);
  background: color-mix(in srgb, var(--cost-tone) 8%, transparent);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 800;
}

.cost-vendor-identity h3 {
  overflow: hidden;
  margin: 0 0 5px;
  color: var(--text);
  font-size: 13px;
  letter-spacing: -.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-category {
  display: inline-flex;
  padding: 3px 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  border-radius: 999px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.cost-category-verification,
.cost-category-free {
  border-color: color-mix(in srgb, var(--accent2) 22%, var(--border));
  color: var(--accent2);
  background: color-mix(in srgb, var(--accent2) 7%, transparent);
}

.cost-category-acquisition {
  border-color: color-mix(in srgb, var(--accent3) 25%, var(--border));
  color: var(--accent3);
  background: color-mix(in srgb, var(--accent3) 7%, transparent);
}

.cost-category-internal,
.cost-category-infra {
  border-color: color-mix(in srgb, var(--accent6) 22%, var(--border));
  color: var(--accent6);
  background: color-mix(in srgb, var(--accent6) 7%, transparent);
}

.cost-vendor-volume {
  min-width: 0;
}

.cost-vendor-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 10px;
}

.cost-vendor-bar-head span:first-child {
  color: var(--text);
  font-weight: 700;
}

.cost-vendor-bar,
.cost-vendor-cost-bar {
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 66%, transparent);
}

.cost-vendor-cost-bar {
  height: 4px;
  margin-top: 6px;
  opacity: .85;
}

.cost-vendor-bar span,
.cost-vendor-cost-bar span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  transition: width 1.1s cubic-bezier(.22, 1, .36, 1) var(--cost-delay, 0ms);
}

.cost-vendor-bar span {
  background: linear-gradient(90deg, var(--cost-tone), var(--accent2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--cost-tone) 30%, transparent);
}

.cost-vendor-cost-bar span {
  background: linear-gradient(90deg, var(--accent4), var(--accent3));
}

.cost-vendor-row[data-vendor-share] .cost-vendor-bar span,
.cost-vendor-cost-bar span {
  width: var(--cost-share, 0%);
}

.cost-vendor-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.cost-vendor-metrics > div {
  min-width: 0;
  padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.cost-vendor-metrics span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.cost-vendor-metrics strong {
  display: block;
  overflow: hidden;
  margin-top: 4px;
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cost-vendor-metrics strong.is-good {
  color: var(--good);
}

.cost-vendor-metrics strong.is-warn {
  color: var(--warn);
}

.cost-vendor-metrics strong.is-bad {
  color: var(--bad);
}

.cost-vendor-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.cost-unit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.cost-unit-card {
  --cost-tone: var(--accent);
  position: relative;
  overflow: hidden;
  padding: 18px;
  border: 1px solid color-mix(in srgb, var(--cost-tone) 22%, var(--border));
  border-radius: 15px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--cost-tone) 10%, var(--panel)), var(--panel));
  transition: transform .25s ease, box-shadow .25s ease;
}

.cost-unit-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px color-mix(in srgb, var(--cost-tone) 12%, transparent);
}

.cost-unit-glow {
  position: absolute;
  width: 90px;
  height: 90px;
  right: -28px;
  top: -28px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--cost-tone) 28%, transparent), transparent 70%);
  animation: costOrbFloat 7s ease-in-out infinite;
}

.cost-unit-card::after {
  content: "";
  position: absolute;
  width: 54px;
  height: 54px;
  right: -22px;
  top: -22px;
  border: 10px solid color-mix(in srgb, var(--cost-tone) 10%, transparent);
  border-radius: 50%;
}

.cost-unit-card > span {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.cost-unit-card strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 12px;
  color: var(--cost-tone);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.cost-unit-card small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 9px;
}

.cost-detail-panel {
  overflow: hidden;
  margin-top: 12px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--panel);
}

.cost-detail-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 19px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style: none;
  transition: background .2s ease;
}

.cost-detail-panel > summary::-webkit-details-marker {
  display: none;
}

.cost-detail-panel > summary:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

.cost-detail-panel > summary > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.cost-detail-icon {
  display: inline-flex;
  color: var(--accent);
}

.cost-detail-meta {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.cost-detail-meta svg {
  transition: transform .2s ease;
}

.cost-detail-panel[open] .cost-detail-meta svg {
  transform: rotate(180deg);
}

.cost-detail-body {
  padding: 0 19px 19px;
  border-top: 1px solid var(--border);
}

.cost-operation-group {
  padding-top: 18px;
}

.cost-operation-group + .cost-operation-group {
  margin-top: 18px;
  border-top: 1px solid var(--border);
}

.cost-operation-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.cost-operation-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 13px;
}

.cost-operation-head span {
  color: var(--muted);
  font-size: 10px;
}

.cost-methodology {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
  padding: 15px 17px;
  border: 1px solid color-mix(in srgb, var(--accent2) 18%, var(--border));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent2) 5%, var(--panel));
}

.cost-methodology-icon {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--accent2);
}

.cost-methodology strong {
  color: var(--text);
  font-size: 11px;
}

.cost-methodology p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.cost-empty-state {
  display: grid;
  place-items: center;
  min-height: 430px;
  padding: 60px 24px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 38%),
    var(--panel);
  text-align: center;
}

.cost-empty-icon {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  margin-bottom: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  border-radius: 20px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  animation: costIconBob 3s ease-in-out infinite;
}

.cost-empty-state h2 {
  margin: 0;
  color: var(--text);
}

.cost-empty-state p {
  max-width: 480px;
  margin: 9px 0 20px;
  color: var(--muted);
  font-size: 13px;
}

.cost-animate-in {
  animation: costReveal .7s cubic-bezier(.22, 1, .36, 1) both;
}

.cost-delay-1 { animation-delay: 80ms; }
.cost-delay-2 { animation-delay: 160ms; }
.cost-delay-3 { animation-delay: 240ms; }
.cost-delay-4 { animation-delay: 320ms; }
.cost-delay-5 { animation-delay: 400ms; }
.cost-delay-6 { animation-delay: 480ms; }

@keyframes costReveal {
  from {
    opacity: 0;
    transform: translateY(18px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes costLivePulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--good) 38%, transparent); }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes costAuraDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, 12px, 0) scale(1.08); }
}

@keyframes costOrbFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -16px, 0) scale(1.12); }
}

@keyframes costShimmer {
  0%, 55% { transform: translateX(-120%); }
  85%, 100% { transform: translateX(120%); }
}

@keyframes costIconBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}

@keyframes costPillGlow {
  0%, 100% { box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent); }
  50% {
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--text) 8%, transparent),
      0 0 18px color-mix(in srgb, var(--cost-tone) 18%, transparent);
  }
}

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

  .cost-chart-grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1280px) {
  .cost-executive-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cost-executive-strip > div:nth-child(3) {
    border-right: 0;
  }

  .cost-executive-strip > div:nth-child(-n + 3) {
    border-bottom: 1px solid var(--border);
  }

  .cost-vendor-row {
    grid-template-columns: minmax(200px, .9fr) minmax(220px, 1.2fr) minmax(300px, 1.2fr);
  }

  .cost-vendor-note {
    grid-column: 1 / -1;
    padding-left: 44px;
  }
}

@media (max-width: 900px) {
  .cost-report-hero {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cost-report-hero-actions {
    width: min(100%, 520px);
  }

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

  .cost-vendor-row {
    grid-template-columns: minmax(160px, .7fr) minmax(0, 1.3fr);
  }

  .cost-vendor-metrics {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-vendor-note {
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .cost-report-hero {
    padding: 22px 18px;
    border-radius: 19px;
  }

  .cost-report-hero h1 {
    font-size: 38px;
  }

  .cost-hero-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-kpi-grid,
  .cost-chart-grid,
  .cost-chart-grid-3,
  .cost-unit-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cost-executive-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cost-executive-strip > div {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .cost-executive-strip > div:nth-child(2n) {
    border-right: 0;
  }

  .cost-executive-strip > div:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .cost-section-heading {
    display: block;
  }

  .cost-section-heading > p {
    margin-top: 8px;
    text-align: left;
  }

  .cost-chart-head,
  .cost-operation-head {
    display: block;
  }

  .cost-chart-chip,
  .cost-chart-legend {
    display: inline-flex;
    margin-top: 10px;
  }

  .cost-vendor-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cost-vendor-metrics,
  .cost-vendor-note {
    grid-column: auto;
  }

  .cost-detail-panel > summary {
    align-items: flex-start;
  }

  .cost-detail-meta {
    justify-content: flex-end;
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cost-animate-in,
  .cost-report-hero-aura,
  .cost-live-dot,
  .cost-orb,
  .cost-kpi-shimmer,
  .cost-kpi-icon,
  .cost-kpi-accent,
  .cost-unit-glow,
  .cost-hero-pill,
  .cost-empty-icon {
    animation: none !important;
  }

  .cost-kpi-card,
  .cost-vendor-row,
  .cost-chart-card,
  .cost-unit-card,
  .cost-ring-value,
  .cost-vendor-bar span,
  .cost-vendor-cost-bar span,
  .cost-kpi-track span,
  .cost-detail-meta svg {
    transition: none !important;
  }
}

/* Outcomes & Propensity — unique-lead closed-loop analytics */
.outcomes-surface {
  display: grid;
  gap: 18px;
  padding: 0 28px 32px;
}

.outcomes-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -28px;
}

.outcomes-hero-copy {
  min-width: 0;
}

.outcomes-hero .core-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.outcomes-hero .hero-subtitle {
  margin-top: 6px;
}

.outcomes-window-note {
  display: inline-flex;
  align-items: center;
  margin-left: 7px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
  color: var(--text);
  font-weight: 650;
}

.outcomes-hero-actions,
.outcomes-filter-actions,
.outcomes-section-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.outcomes-filter-panel {
  padding: 14px 16px;
}

.outcomes-filter-form {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 180px)) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.outcomes-filter-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.outcomes-filter-field select {
  width: 100%;
}

.outcomes-filter-context {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.outcomes-filter-context strong {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.outcomes-filter-actions {
  justify-content: flex-end;
}

.outcomes-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.outcomes-kpi-grid .instrument-readout-card {
  min-width: 0;
}

.outcomes-kpi-grid .instrument-readout {
  font-size: clamp(24px, 2.6vw, 34px);
}

.outcomes-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
}

.outcomes-funnel-card {
  margin: 0;
}

.outcomes-funnel-card .analytics-funnel-pyramid {
  margin-top: 14px;
}

.outcomes-funnel-dropoffs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.outcomes-dropoff {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 80%, transparent);
}

.outcomes-dropoff-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.outcomes-dropoff strong {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 16px;
}

.outcomes-dropoff .muted {
  font-size: 10px;
}

.outcomes-baseline-dial {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.outcomes-baseline-formula {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  text-align: center;
}

.outcomes-filter-sep {
  margin-inline: 4px;
  color: var(--border);
}

.outcomes-overlap-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--accent3) 35%, var(--border));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent3) 8%, var(--surface));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.outcomes-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.outcomes-insight-card {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}

.outcomes-insight-card.success {
  border-color: color-mix(in srgb, var(--good) 35%, var(--border));
  background: color-mix(in srgb, var(--good) 8%, var(--panel));
}

.outcomes-insight-card.danger {
  border-color: color-mix(in srgb, var(--bad) 35%, var(--border));
  background: color-mix(in srgb, var(--bad) 8%, var(--panel));
}

.outcomes-insight-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.outcomes-insight-card strong {
  font-size: 13px;
}

.outcomes-insight-metric {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
}

.outcomes-table-total td {
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  font-size: 12px;
}

.outcomes-baseline-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.outcomes-baseline-head,
.outcomes-baseline-body,
.outcomes-learning-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.outcomes-baseline-copy {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.outcomes-rate-stack {
  display: grid;
  flex: 1;
  gap: 14px;
  min-width: 180px;
}

.outcomes-table-card,
.outcomes-rep-card {
  margin: 0;
}

.outcomes-section-title {
  align-items: flex-start;
}

.outcomes-section-title h2 {
  margin: 0;
  font-size: 15px;
}

.outcomes-section-title p {
  margin-top: 4px;
  font-size: 11px;
}

.outcomes-section-meta {
  justify-content: flex-end;
  font-size: 11px;
}

.outcomes-table-wrap {
  width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.outcomes-table {
  min-width: 860px;
  margin: 0;
}

.outcomes-table thead th {
  white-space: nowrap;
}

.outcomes-table tbody tr:last-child td {
  border-bottom: 0;
}

.outcomes-dimension-key {
  max-width: 240px;
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcomes-dimension-key + code {
  display: block;
  max-width: 240px;
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outcomes-cell-rate {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
}

.outcomes-conversion-cell {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 130px;
}

.outcomes-conversion-track {
  height: 7px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--instrument-track);
}

.outcomes-conversion-track span {
  display: block;
  width: clamp(0%, calc(var(--outcomes-value, 0) * 1%), 100%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent2) 28%, transparent);
}

.outcomes-empty {
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
}

.outcomes-inline-empty {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, transparent);
}

.outcomes-inline-empty-icon {
  display: grid;
  width: 38px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--accent2);
  background: var(--panel);
}

.outcomes-inline-empty p {
  margin-top: 3px;
  font-size: 11px;
}

.outcomes-footer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.outcomes-footer-grid > .card {
  margin: 0;
}

.outcomes-method-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
}

.outcomes-method-summary::-webkit-details-marker {
  display: none;
}

.outcomes-method-summary > span:first-child {
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--accent);
  background: var(--surface);
}

.outcomes-method-summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.outcomes-method-body {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.outcomes-method-body strong {
  color: var(--text);
}

.outcomes-learning-card {
  height: 100%;
}

.outcomes-learning-card p {
  margin-top: 4px;
  font-size: 11px;
}

@media (max-width: 1180px) {
  .outcomes-filter-form {
    grid-template-columns: repeat(3, minmax(130px, 1fr));
  }

  .outcomes-filter-context {
    grid-column: 1 / 3;
  }

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

  .outcomes-funnel-dropoffs,
  .outcomes-insight-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 820px) {
  .outcomes-surface {
    padding-inline: 16px;
  }

  .outcomes-hero {
    margin-inline: -16px;
  }

  .outcomes-hero,
  .outcomes-baseline-body,
  .outcomes-learning-card {
    align-items: stretch;
    flex-direction: column;
  }

  .outcomes-filter-form,
  .outcomes-overview-grid,
  .outcomes-footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .outcomes-filter-context {
    grid-column: auto;
  }

  .outcomes-filter-actions {
    justify-content: flex-start;
  }

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

  .outcomes-baseline-body .instrument-dial-wrap {
    align-self: center;
  }
}

@media (max-width: 520px) {
  .outcomes-kpi-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .outcomes-section-title,
  .outcomes-baseline-head {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .outcomes-conversion-track span {
    transition: none;
  }
}

/* Lead Billing — LaaS/DaaS economics dashboard */
.billing-surface {
  display: grid;
  gap: 18px;
  padding: 0 28px 32px;
}

.billing-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -28px;
}

.billing-hero-copy { min-width: 0; }

.billing-hero .core-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.billing-window-note {
  display: inline-flex;
  margin-left: 7px;
  padding-left: 9px;
  border-left: 1px solid var(--border);
  color: var(--text);
  font-weight: 650;
}

.billing-hero-actions,
.billing-filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.billing-error-card { margin: 0; }

.billing-filter-panel { padding: 14px 16px; }

.billing-filter-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(130px, 180px)) minmax(180px, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.billing-filter-field {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}

.billing-filter-field select { width: 100%; }

.billing-filter-context {
  align-self: center;
  color: var(--muted);
  font-size: 12px;
}

.billing-filter-context strong {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.billing-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.billing-kpi-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 14px;
}

.billing-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 16px;
}

.billing-value-flow {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.billing-value-band {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.billing-value-band.tone-violet { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.billing-value-band.tone-amber { border-color: color-mix(in srgb, var(--accent3) 35%, var(--border)); }
.billing-value-band.tone-good { border-color: color-mix(in srgb, var(--good) 35%, var(--border)); }

.billing-value-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.billing-value-amount {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
}

.billing-value-share { font-size: 10px; }

.billing-value-connector {
  width: 2px;
  height: 10px;
  margin: 0 auto;
  border-radius: 999px;
  background: var(--border);
}

.billing-flow-notes,
.billing-flow-note {
  display: grid;
  gap: 3px;
}

.billing-flow-notes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.billing-flow-note {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  font-size: 10px;
  color: var(--muted);
  font-weight: 750;
  text-transform: uppercase;
}

.billing-flow-note strong {
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 14px;
  text-transform: none;
}

.billing-baseline-panel {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.billing-baseline-head,
.billing-baseline-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.billing-baseline-copy {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.billing-baseline-dial {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.billing-baseline-formula {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  text-align: center;
}

.billing-rate-stack {
  display: grid;
  flex: 1;
  gap: 14px;
  min-width: 180px;
}

.billing-table-card,
.billing-funnel-card { margin: 0; }

.billing-section-title {
  align-items: flex-start;
}

.billing-section-title h2 {
  margin: 0;
  font-size: 15px;
}

.billing-section-copy {
  margin-top: 4px;
  font-size: 12px;
}

.billing-table-wrap {
  width: 100%;
  margin-top: 14px;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.billing-table {
  min-width: 760px;
  margin: 0;
}

.billing-table code {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
}

.billing-empty {
  margin-top: 14px;
  border: 1px dashed var(--border);
  border-radius: 14px;
}

.billing-config-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.billing-form { margin-top: 12px; }

.billing-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 12px 0;
}

.billing-form-grid--single { grid-template-columns: minmax(0, 1fr); }

.billing-form-wide { grid-column: 1 / -1; }

.billing-method-summary {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  list-style: none;
}

.billing-method-summary::-webkit-details-marker { display: none; }

.billing-method-summary > span:first-child {
  display: grid;
  width: 36px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 11px;
  color: var(--accent);
  background: var(--surface);
}

.billing-method-summary small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.billing-method-body {
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.billing-method-body strong { color: var(--text); }

@media (max-width: 1180px) {
  .billing-filter-form { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .billing-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .billing-kpi-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .billing-flow-notes { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .billing-surface { padding-inline: 16px; }
  .billing-hero { margin-inline: -16px; flex-direction: column; }
  .billing-filter-form,
  .billing-overview-grid,
  .billing-config-grid { grid-template-columns: minmax(0, 1fr); }
  .billing-baseline-body { flex-direction: column; align-items: stretch; }
  .billing-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .billing-kpi-grid,
  .billing-kpi-grid--compact { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   Delivery Activity (integrations/activity)
   ========================================================= */
.da-page {
  display: grid;
  gap: 16px;
  padding-bottom: 24px;
}

.da-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
}

.da-eyebrow {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.da-title {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.da-subtitle {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 13px;
  line-height: 1.45;
}

.da-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.da-health-inner {
  display: grid;
  grid-template-columns: auto 1fr minmax(200px, 240px);
  gap: 20px 24px;
  align-items: start;
  padding: 18px 20px;
}

.da-health-dial {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 140px;
}

.da-health-dial-note {
  margin: 0;
  max-width: 160px;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.da-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

.da-status-grid .instrument-readout-card {
  min-height: 92px;
}

.da-channel-panel {
  min-width: 0;
}

.da-panel-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.da-panel-foot {
  margin: 10px 0 0;
  font-size: 11px;
}

.da-attention {
  display: grid;
  gap: 12px;
}

.da-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.da-attention-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.da-attention-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--panel);
  text-decoration: none;
  color: inherit;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.da-attention-card:hover,
.da-attention-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
  transform: translateY(-1px);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--bg) 40%, transparent);
  outline: none;
}

.da-attention-card--warn {
  border-color: color-mix(in srgb, var(--warn) 28%, var(--border));
  background: color-mix(in srgb, var(--warn) 6%, var(--panel));
}

.da-attention-card--fail {
  border-color: color-mix(in srgb, var(--bad) 28%, var(--border));
  background: color-mix(in srgb, var(--bad) 6%, var(--panel));
}

.da-attention-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.da-attention-domain {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-attention-label {
  font-size: 12px;
  color: var(--muted);
}

.da-attention-cta {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-light, var(--accent));
}

.da-filters-inner {
  padding: 16px 18px;
}

.da-filters-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 14px;
}

.da-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 148px;
  margin: 0;
}

.da-filter-search {
  flex: 1 1 220px;
  min-width: 200px;
  max-width: 360px;
}

.da-filter-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.da-filter-field select,
.da-filter-field input {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 13px;
}

.da-filter-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.da-table-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.da-table-wrap {
  overflow-x: auto;
}

.da-table td,
.da-table th {
  vertical-align: top;
}

.da-pack-code {
  font-size: 11px;
}

.da-target-name {
  font-weight: 650;
  font-size: 13px;
}

.da-target-type {
  font-size: 11px;
  margin-top: 2px;
}

.da-recipients {
  font-size: 12px;
  max-width: 220px;
}

.da-recipient-domains {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.da-last-attempt {
  font-size: 12px;
  white-space: nowrap;
}

.da-empty {
  text-align: center;
  padding: 32px 16px;
}

.da-table-foot {
  margin: 12px 0 0;
  font-size: 12px;
}

@media (max-width: 1080px) {
  .da-health-inner {
    grid-template-columns: 1fr 1fr;
  }

  .da-channel-panel {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .da-health-inner {
    grid-template-columns: 1fr;
  }

  .da-status-grid {
    grid-template-columns: 1fr;
  }

  .da-filter-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* Keep shared product controls inside constrained topbars. */
@media (max-width: 1100px) {
  .topbar-actions {
    min-width: 0;
    gap: 6px;
  }

  .topbar-profile {
    flex: 0 0 auto;
    gap: 4px;
    padding-inline: 6px;
  }

  .topbar-profile-name,
  .topbar-profile-role {
    display: none;
  }

  .topbar-profile-logout {
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .topbar-actions {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 6px;
    overflow: hidden;
  }

  .topbar-actions .tenant-chip {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }

  .topbar-actions .tenant-chip select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .topbar-profile {
    flex: 0 0 auto;
    gap: 4px;
    padding-inline: 6px;
  }

  .topbar-profile-name,
  .topbar-profile-role {
    display: none;
  }

  .topbar-profile-logout {
    margin-left: 0;
  }
}