:root {
  --brand-bg: #1a1a2e;
  --brand-bg-2: #151523;
  --brand-card: #1f233b;
  --brand-card-2: #232847;
  --brand-accent: #ff6600;
  --brand-accent-2: #ffa24c;
  --brand-text: #e9edf6;
  --brand-muted: #a9b0c7;
  --brand-border: #2f3655;
  --brand-success: #2d6a4f;
  --brand-warning: #ffb703;
  --brand-danger: #9b2226;
  --bs-body-bg: var(--brand-bg);
  --bs-body-color: var(--brand-text);
  --bs-primary: var(--brand-accent);
  --bs-primary-rgb: 255, 102, 0;
  --bs-secondary-bg: #2a2f4c;
  --bs-warning: #ffb703;
  --bs-success: #2d6a4f;
  --bs-danger: #9b2226;
  --bs-border-color: var(--brand-border);
  --bs-tertiary-bg: var(--brand-card-2);
  --bs-secondary-color: var(--brand-muted);
}

* {
  box-sizing: border-box;
}

body {
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(255, 102, 0, 0.16), transparent 60%),
    radial-gradient(900px 400px at 90% 10%, rgba(76, 110, 255, 0.2), transparent 55%),
    linear-gradient(180deg, var(--brand-bg) 0%, var(--brand-bg-2) 100%);
  color: var(--brand-text);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  min-height: 100vh;
  color-scheme: dark;
}

h1,
h2,
h3,
h4,
h5,
h6,
.navbar-brand {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.accent {
  color: var(--brand-accent);
}

.brand-nav {
  background: rgba(20, 21, 36, 0.9);
  border-bottom: 1px solid rgba(255, 102, 0, 0.2);
  backdrop-filter: blur(12px);
}

.navbar-brand {
  font-weight: 600;
  letter-spacing: 0.02em;
}

.navbar .btn {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero {
  margin-top: 2rem;
}

.hero-panel {
  padding: 2.5rem;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, rgba(35, 40, 71, 0.9), rgba(25, 27, 49, 0.95));
  border: 1px solid rgba(255, 102, 0, 0.25);
  box-shadow: 0 25px 80px rgba(10, 10, 25, 0.4);
  animation: fade-up 0.7s ease both;
}

.eyebrow {
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  color: var(--brand-accent-2);
}

.narrative {
  max-width: 720px;
}

.demo-card {
  border-radius: 1rem;
  background: var(--brand-card);
  border: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 20px 60px rgba(5, 8, 24, 0.45);
  animation: fade-up 0.7s ease both;
}

.card,
.card-header,
.card-body,
.list-group-item {
  background-color: var(--brand-card);
  color: var(--brand-text);
  border-color: var(--brand-border);
}

#settings-form details {
  border: 1px solid var(--brand-border);
  background: var(--brand-card);
}

#settings-form summary {
  list-style: none;
  cursor: pointer;
}

#settings-form summary::marker {
  display: none;
}

#settings-form summary::-webkit-details-marker {
  display: none;
}

#settings-form .card-body {
  background: var(--brand-card);
}

#settings-form .form-control,
#settings-form .form-select,
#settings-form textarea {
  background: #101428;
  color: var(--brand-text);
  border: 1px solid var(--brand-border);
}

#settings-form .form-control::placeholder,
#settings-form textarea::placeholder {
  color: var(--brand-muted);
}

#settings-form .form-control:focus,
#settings-form .form-select:focus,
#settings-form textarea:focus {
  border-color: rgba(255, 102, 0, 0.6);
  box-shadow: 0 0 0 0.2rem rgba(255, 102, 0, 0.15);
}

.card-header {
  background: var(--brand-card-2);
}

.synthetic-data-disclosure {
  border-top: 1px solid var(--brand-border);
  background: var(--brand-card);
}

.synthetic-data-disclosure summary {
  list-style: none;
  cursor: pointer;
}

.synthetic-data-disclosure summary::marker {
  display: none;
}

.synthetic-data-disclosure summary::-webkit-details-marker {
  display: none;
}

.synthetic-data-summary {
  padding: 0.9rem 1rem;
}

.synthetic-data-disclosure[open] > .synthetic-data-summary {
  border-bottom: 1px solid var(--brand-border);
}

.list-group-item {
  background: var(--brand-card);
  border-color: var(--brand-border);
}

.list-group-item-action:hover {
  background: rgba(255, 102, 0, 0.08);
}

.list-group-item.active {
  background: rgba(255, 102, 0, 0.2);
  border-color: rgba(255, 102, 0, 0.4);
}

.flowchart-canvas {
  min-height: 620px;
  width: 100%;
  height: 68vh;
  position: relative;
  overflow: hidden;
  background: #171a2b;
  transition: height 0.3s ease;
  border: 1px solid rgba(255, 102, 0, 0.25);
  max-height: 82vh;
}

.flow-output-panel {
  max-height: none;
}

.flow-status-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.85rem;
}

.flow-status-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(23, 27, 45, 0.88);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
}

.flow-status-card-running {
  border-color: rgba(255, 183, 3, 0.45);
  box-shadow: 0 10px 24px rgba(255, 183, 3, 0.12);
}

.flow-status-card-done {
  border-color: rgba(45, 106, 79, 0.45);
}

.flow-status-card-issue {
  border-color: rgba(155, 34, 38, 0.45);
}

.flow-status-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
  margin-bottom: 0.35rem;
}

.flow-status-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--brand-text);
  line-height: 1.1;
  margin-bottom: 0.45rem;
}

.flow-status-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.flow-status-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  font-size: 0.76rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: var(--brand-text);
}

.flow-status-pill.running {
  border-color: rgba(255, 183, 3, 0.45);
  background: rgba(255, 183, 3, 0.16);
  color: #ffd166;
}

.flow-status-pill.neutral {
  color: var(--brand-muted);
}

.flow-status-note {
  font-size: 0.8rem;
  color: var(--brand-muted);
}

.flow-status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.flow-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--brand-muted);
}

.flow-live-switcher {
  display: grid;
  gap: 0.65rem;
}

.flow-live-disclosure {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(23, 27, 45, 0.88);
  border-radius: 1rem;
  overflow: hidden;
}

.flow-live-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1rem;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.flow-live-disclosure > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--brand-accent-2);
  flex-shrink: 0;
}

.flow-live-disclosure > summary::marker,
.flow-live-disclosure > summary::-webkit-details-marker {
  display: none;
}

.flow-live-disclosure > summary:hover {
  background: rgba(255, 102, 0, 0.06);
}

.flow-live-disclosure[open] > summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
}

.flow-live-disclosure[open] > summary::after {
  content: "-";
}

.flow-live-disclosure-copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.flow-live-disclosure-label {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
}

.flow-live-disclosure-title {
  color: var(--brand-text);
  font-weight: 700;
  line-height: 1.3;
}

.flow-live-disclosure-note {
  color: var(--brand-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.flow-live-disclosure-progress {
  min-width: min(280px, 42vw);
  display: grid;
  gap: 0.45rem;
}

.flow-live-disclosure-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.flow-live-progress-value {
  color: var(--brand-text);
  font-size: 0.82rem;
  font-weight: 700;
}

.flow-live-progress-track {
  position: relative;
  height: 0.5rem;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}

.flow-live-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5a607b 0%, #a9b0c7 100%);
  transition: width 0.24s ease;
}

.flow-live-progress-fill.tone-primary {
  background: linear-gradient(90deg, #ffb703 0%, #ff6600 100%);
  box-shadow: 0 0 14px rgba(255, 183, 3, 0.24);
}

.flow-live-progress-fill.tone-success {
  background: linear-gradient(90deg, #2d6a4f 0%, #5fd190 100%);
  box-shadow: 0 0 14px rgba(45, 106, 79, 0.24);
}

.flow-live-progress-fill.tone-danger {
  background: linear-gradient(90deg, #9b2226 0%, #ff7c87 100%);
  box-shadow: 0 0 14px rgba(155, 34, 38, 0.24);
}

.flow-live-progress-fill.tone-secondary {
  background: linear-gradient(90deg, #5a607b 0%, #a9b0c7 100%);
}

.flow-live-disclosure-body {
  padding: 1rem;
}

.flow-live-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.flow-live-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--brand-text);
  border-radius: 0.85rem;
  padding: 0.55rem 0.7rem;
  min-width: 165px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.flow-live-tab:hover {
  border-color: rgba(255, 102, 0, 0.35);
  background: rgba(255, 102, 0, 0.08);
  transform: translateY(-1px);
}

.flow-live-tab.is-active {
  border-color: rgba(255, 102, 0, 0.58);
  background: rgba(255, 102, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.18) inset;
}

.flow-live-tab-name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--brand-text);
}

.flow-live-tab-status {
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.flow-live-tab-status.tone-primary {
  background: rgba(255, 183, 3, 0.18);
  color: #ffd166;
}

.flow-live-tab-status.tone-success {
  background: rgba(45, 106, 79, 0.18);
  color: #8df5c2;
}

.flow-live-tab-status.tone-danger {
  background: rgba(155, 34, 38, 0.2);
  color: #ffb4b8;
}

.flow-live-tab-status.tone-secondary {
  background: rgba(90, 96, 123, 0.18);
  color: #c8cddd;
}

.timeline-ribbon {
  border: 1px solid rgba(255, 102, 0, 0.2);
  background: rgba(25, 27, 45, 0.9);
}

.timeline-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.timeline-chip strong {
  font-weight: 600;
}

.timeline-chip.running {
  border-color: rgba(255, 183, 3, 0.6);
  color: var(--brand-warning);
}

.timeline-chip.done {
  border-color: rgba(45, 106, 79, 0.6);
  color: #8df5c2;
}

.timeline-chip.error {
  border-color: rgba(155, 34, 38, 0.8);
  color: #ffb4b8;
}

.timeline-duration {
  background: rgba(255, 102, 0, 0.2);
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
}

.compliance-banner {
  padding: 1rem 1.25rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 102, 0, 0.35);
  background: linear-gradient(135deg, rgba(155, 34, 38, 0.45), rgba(60, 16, 22, 0.8));
  color: #ffb4b8;
  box-shadow: 0 12px 30px rgba(155, 34, 38, 0.3);
  animation: pulse-red 1.6s ease-in-out infinite;
}

.compliance-banner i {
  font-size: 1.4rem;
}

.data-quality {
  background: rgba(255, 102, 0, 0.15);
  color: var(--brand-accent-2);
  border: 1px solid rgba(255, 102, 0, 0.3);
  font-weight: 500;
}

.makegood-card {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(45, 106, 79, 0.15), rgba(33, 44, 60, 0.9));
  border: 1px solid rgba(109, 211, 251, 0.25);
}

.makegood-metrics {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
}

.makegood-track {
  position: relative;
  height: 56px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  overflow: hidden;
}

.budget-chip {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.chip-linear {
  background: rgba(255, 102, 0, 0.2);
  color: var(--brand-accent-2);
}

.chip-digital {
  background: rgba(109, 211, 251, 0.2);
  color: #6dd3fb;
}

.chip-move {
  position: absolute;
  left: 20%;
  background: rgba(255, 183, 3, 0.2);
  color: #ffd166;
  animation: slide-chip 2.2s ease-in-out infinite;
}

.agent-stream {
  min-height: 150px;
  font-size: 0.95rem;
  max-height: calc(100vh - 360px);
  overflow-y: auto;
}

.stage-compact-card {
  background: linear-gradient(180deg, rgba(24, 28, 45, 0.94), rgba(15, 18, 31, 0.96));
}

.stage-sidebar-card,
.stage-output-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(24, 28, 45, 0.9), rgba(15, 18, 31, 0.94));
  border-radius: 1rem;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

.stage-sidebar-card::before,
.stage-output-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 102, 0, 0.95), rgba(255, 162, 76, 0.2));
}

.stage-sidebar-card > *,
.stage-output-card > * {
  position: relative;
  z-index: 1;
}

.stage-sidebar-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stage-output-card {
  min-height: 100%;
}

.stage-output-card.compact {
  background: linear-gradient(180deg, rgba(18, 21, 36, 0.78), rgba(11, 13, 25, 0.9));
}

.stage-panel-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: var(--brand-muted);
}

.stage-mission-card,
.stage-summary-panel,
.stage-snapshot-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
}

.stage-mission-text {
  color: var(--brand-text);
  line-height: 1.55;
}

.stage-summary-panel {
  display: grid;
  gap: 0.7rem;
}

.stage-summary-output-panel {
  margin-bottom: 1rem;
  gap: 0.85rem;
}

.stage-summary-metric-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stage-summary-metric-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 25, 0.38);
  border-radius: 0.8rem;
  padding: 0.7rem 0.8rem;
}

.stage-summary-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
  margin-bottom: 0.28rem;
}

.stage-summary-metric-value {
  color: var(--brand-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.stage-summary-pill-row {
  margin-top: 0.15rem;
}

.stage-summary-flow {
  display: grid;
  gap: 0.75rem;
}

.stage-summary-section {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 25, 0.34);
  border-radius: 0.85rem;
  padding: 0.85rem 0.95rem;
}

.stage-summary-impact {
  border-color: rgba(255, 183, 3, 0.22);
  background: rgba(255, 183, 3, 0.08);
}

.stage-summary-section-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #ffd166;
  margin-bottom: 0.45rem;
}

.stage-summary-copy {
  color: var(--brand-text);
  line-height: 1.58;
}

.stage-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.stage-summary-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--brand-text);
  line-height: 1.5;
}

.stage-summary-list li::before {
  content: "";
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.16);
}

.stage-takeaway-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.stage-takeaway-list li {
  position: relative;
  padding-left: 1rem;
  color: var(--brand-text);
  line-height: 1.45;
}

.stage-takeaway-list li::before {
  content: "";
  position: absolute;
  top: 0.48rem;
  left: 0;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--brand-accent);
  box-shadow: 0 0 0 4px rgba(255, 102, 0, 0.16);
}

.stage-snapshot-card {
  display: grid;
  gap: 0.9rem;
}

.stage-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.75rem;
}

.stage-progress-value {
  color: var(--brand-text);
  font-weight: 600;
}

.stage-progress-track {
  position: relative;
  height: 0.55rem;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.stage-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffb703 0%, #ff6600 100%);
  box-shadow: 0 0 18px rgba(255, 102, 0, 0.35);
}

.stage-snapshot-card.is-success .stage-progress-fill {
  background: linear-gradient(90deg, #2d6a4f 0%, #5fd190 100%);
  box-shadow: 0 0 18px rgba(45, 106, 79, 0.35);
}

.stage-snapshot-card.is-danger .stage-progress-fill {
  background: linear-gradient(90deg, #9b2226 0%, #ff7c87 100%);
  box-shadow: 0 0 18px rgba(155, 34, 38, 0.35);
}

.stage-stat-grid {
  display: grid;
  gap: 0.65rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.stage-stat-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 13, 25, 0.42);
  border-radius: 0.8rem;
  padding: 0.75rem 0.85rem;
  min-height: 74px;
}

.stage-stat-card.is-success {
  border-color: rgba(45, 106, 79, 0.35);
  background: rgba(45, 106, 79, 0.14);
}

.stage-stat-card.is-live {
  border-color: rgba(255, 183, 3, 0.35);
  background: rgba(255, 183, 3, 0.14);
}

.stage-stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--brand-muted);
  margin-bottom: 0.35rem;
}

.stage-stat-value {
  color: var(--brand-text);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
}

.stage-side-disclosure summary,
.stage-output-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-text);
  list-style: none;
}

.stage-side-disclosure summary::-webkit-details-marker,
.stage-output-disclosure summary::-webkit-details-marker {
  display: none;
}

.stage-side-disclosure summary::before,
.stage-output-disclosure summary::before {
  content: "+";
  display: inline-flex;
  width: 1.2rem;
  justify-content: center;
  color: var(--brand-accent-2);
  margin-right: 0.25rem;
}

.stage-side-disclosure[open] > summary::before,
.stage-output-disclosure[open] > summary::before {
  content: "-";
}

.stage-side-disclosure[open] > summary,
.stage-output-disclosure[open] > summary {
  margin-bottom: 0.85rem;
}

.stage-side-disclosure-body {
  display: grid;
  gap: 0.85rem;
}

.stage-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.22rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 183, 3, 0.14);
  border: 1px solid rgba(255, 183, 3, 0.28);
  color: #ffd166;
  font-size: 0.75rem;
  font-weight: 600;
}

.stage-live-indicator .spinner-border {
  color: currentColor;
}

.stage-output-note {
  color: var(--brand-muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.stage-output-state {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  color: var(--brand-text);
  line-height: 1.5;
}

.stage-output-state.is-warning {
  border-color: rgba(255, 183, 3, 0.35);
  background: rgba(255, 183, 3, 0.12);
  color: #ffe19a;
}

.stage-output-state.is-danger {
  border-color: rgba(155, 34, 38, 0.35);
  background: rgba(155, 34, 38, 0.16);
  color: #ffb4b8;
}

.stage-preview-shell {
  display: grid;
  gap: 0.55rem;
}

.stage-preview-text,
.stage-preview-live {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  color: var(--brand-text);
}

.stage-preview-text {
  line-height: 1.6;
}

.stage-preview-live {
  font-size: 0.84rem;
  white-space: pre-wrap;
  color: #f4f7ff;
  background: #101424;
  min-height: 132px;
  max-height: 180px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.stage-subagent-count {
  color: var(--brand-muted);
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.agent-markdown {
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  line-height: 1.6;
  color: var(--brand-text);
}

.agent-markdown :not(pre) > code {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--brand-accent-2);
  padding: 0.2em 0.4em;
  border-radius: 0.25rem;
  font-size: 0.875em;
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
}

.agent-markdown pre {
  display: block;
  padding: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 0.875em;
  color: #e6edf3;
  background-color: #0d1117;
  border-radius: 0.375rem;
  border: 1px solid var(--brand-border);
}

.agent-markdown pre code {
  background-color: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.agent-markdown table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.agent-markdown th,
.agent-markdown td {
  padding: 0.75rem;
  border: 1px solid var(--brand-border);
}

.agent-markdown th {
  background-color: rgba(255, 255, 255, 0.06);
  font-weight: 600;
  text-align: left;
}

.agent-markdown blockquote {
  border-left: 4px solid var(--brand-accent);
  padding-left: 1rem;
  margin-left: 0;
  color: var(--brand-muted);
}

.detail-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-text);
}

.detail-disclosure[open] > summary {
  margin-bottom: 0.85rem;
}

.detail-section {
  display: grid;
  gap: 0.55rem;
  margin-top: 0.9rem;
}

.detail-section-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
}

.detail-kv {
  display: grid;
  gap: 0.7rem;
}

.detail-kv-row,
.detail-card,
.detail-text-panel {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.75rem;
  padding: 0.8rem 0.9rem;
}

.detail-kv-key {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--brand-muted);
  margin-bottom: 0.35rem;
}

.detail-kv-value {
  color: var(--brand-text);
  word-break: break-word;
}

.detail-card-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.detail-card-title {
  font-weight: 600;
  color: var(--brand-text);
  margin-bottom: 0.45rem;
}

.subagent-switcher {
  display: grid;
  gap: 0.8rem;
}

.subagent-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.subagent-tab {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--brand-text);
  border-radius: 0.85rem;
  padding: 0.6rem 0.75rem;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
  text-align: left;
  transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.subagent-tab:hover {
  border-color: rgba(255, 102, 0, 0.35);
  background: rgba(255, 102, 0, 0.08);
  transform: translateY(-1px);
}

.subagent-tab.is-active {
  border-color: rgba(255, 102, 0, 0.58);
  background: rgba(255, 102, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 102, 0, 0.2) inset;
}

.subagent-tab-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--brand-text);
}

.subagent-tab-status {
  font-size: 0.72rem;
  line-height: 1;
  padding: 0.22rem 0.45rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.subagent-tab-status.tone-success {
  background: rgba(45, 106, 79, 0.18);
  color: #8df5c2;
}

.subagent-tab-status.tone-primary {
  background: rgba(255, 183, 3, 0.18);
  color: #ffd166;
}

.subagent-tab-status.tone-danger {
  background: rgba(155, 34, 38, 0.2);
  color: #ffb4b8;
}

.subagent-tab-status.tone-secondary {
  background: rgba(90, 96, 123, 0.18);
  color: #c8cddd;
}

.subagent-focus-card {
  background: rgba(255, 255, 255, 0.045);
  display: grid;
  gap: 0.75rem;
}

.detail-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.detail-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: rgba(255, 102, 0, 0.14);
  color: var(--brand-accent-2);
  border: 1px solid rgba(255, 102, 0, 0.28);
  font-size: 0.78rem;
}

.detail-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--brand-text);
}

.detail-list li + li {
  margin-top: 0.35rem;
}

.detail-null {
  color: var(--brand-muted);
  font-style: italic;
}

.detail-text-panel {
  white-space: pre-wrap;
  line-height: 1.55;
  color: var(--brand-text);
}

.detail-expanded {
  display: grid;
  gap: 0.75rem;
}

.campaign-input {
  background: rgba(18, 20, 35, 0.85);
  border: 1px solid rgba(255, 102, 0, 0.3);
  color: var(--brand-text);
}

.handoff-badge {
  background: rgba(255, 102, 0, 0.15);
  color: var(--brand-accent-2);
  border: 1px solid rgba(255, 102, 0, 0.3);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.raw-data {
  font-family: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.75rem;
  max-height: 280px;
  overflow: auto;
  background: #0f1325;
  border: 1px solid var(--brand-border);
  padding: 0.75rem;
  border-radius: 0.75rem;
  color: #d6dbe8;
}

.architect-loading-note {
  border: 1px solid rgba(255, 183, 3, 0.28);
  background: rgba(255, 183, 3, 0.1);
  border-radius: 0.9rem;
  padding: 0.9rem 1rem;
  color: #ffe19a;
  margin-bottom: 1rem;
}

.architect-scenario-card {
  border: 1px solid rgba(255, 162, 76, 0.35);
  border-radius: 1rem;
  background: #ffffff;
  color: #1a2238;
  box-shadow: 0 18px 42px rgba(8, 12, 24, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.architect-scenario-card.is-selected {
  border-color: rgba(45, 106, 79, 0.75);
  box-shadow: 0 0 0 2px rgba(45, 106, 79, 0.25), 0 18px 42px rgba(8, 12, 24, 0.22);
}

.architect-scenario-card.is-loading {
  pointer-events: none;
}

.architect-scenario-header {
  background: linear-gradient(135deg, #ff7a18 0%, #ff9f43 100%);
  color: #1f1408;
  padding: 1rem 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
}

.architect-scenario-title-wrap {
  display: grid;
  gap: 0.2rem;
}

.architect-scenario-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-weight: 700;
  color: rgba(31, 20, 8, 0.84);
}

.architect-scenario-statuses {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
}

.architect-scenario-body {
  padding: 1rem 1.05rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
  flex-grow: 1;
}

.architect-scenario-summary,
.architect-scenario-params,
.architect-agent-plan-card {
  border-radius: 0.9rem;
  padding: 0.9rem;
}

.architect-scenario-summary {
  border: 1px solid rgba(255, 162, 76, 0.24);
  background: #fff2e6;
}

.architect-scenario-params {
  border: 1px solid rgba(78, 102, 255, 0.15);
  background: #f4f7ff;
}

.architect-agent-plan-card {
  border: 1px solid rgba(26, 34, 56, 0.08);
  background: #fafbfe;
}

.architect-detail-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.architect-detail-button {
  min-height: 2.85rem;
  border-radius: 0.9rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.architect-section-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: #6b7280;
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.architect-summary-copy,
.architect-summary-support,
.architect-param-copy,
.architect-plan-step-summary,
.architect-prompt-detail,
.architect-compliance-copy,
.architect-empty-copy {
  color: #43506a;
}

.architect-summary-copy {
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.5;
}

.architect-summary-support,
.architect-param-copy,
.architect-plan-step-summary,
.architect-compliance-copy,
.architect-empty-copy {
  font-size: 0.9rem;
  line-height: 1.5;
}

.architect-param-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.architect-param-card {
  border: 1px solid rgba(26, 34, 56, 0.08);
  background: #ffffff;
  border-radius: 0.8rem;
  padding: 0.75rem 0.8rem;
  display: grid;
  gap: 0.3rem;
}

.architect-param-label,
.architect-prompt-detail-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.67rem;
  color: #7c879c;
  font-weight: 700;
}

.architect-plan-table-wrap {
  overflow: auto;
  border: 1px solid rgba(26, 34, 56, 0.1);
  border-radius: 0.95rem;
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.architect-plan-table {
  width: 100%;
  min-width: 960px;
  border-collapse: separate;
  border-spacing: 0;
  color: #1a2238;
}

.architect-scenario-table {
  min-width: 0;
}

.architect-scenario-matrix {
  min-width: 1120px;
}

.architect-stage-plan-table {
  min-width: 980px;
}

.architect-plan-table th,
.architect-plan-table td {
  padding: 0.9rem 0.85rem;
  vertical-align: top;
  border-top: 1px solid rgba(26, 34, 56, 0.08);
}

.architect-plan-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  border-top: none;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
}

.architect-plan-table tbody tr:first-child td,
.architect-plan-table tbody tr:first-child th {
  border-top: none;
}

.architect-plan-table .column-recommended {
  width: 160px;
  background: #fff5cd;
}

.architect-plan-table thead .column-recommended {
  background: linear-gradient(180deg, #f7cd57 0%, #efbc2a 100%);
  color: #4f3500;
}

.architect-plan-table .column-scenario {
  width: 240px;
  background: #edf5ff;
}

.architect-plan-table thead .column-scenario {
  background: #d9e9ff;
  color: #143b67;
}

.architect-plan-table .column-fit {
  background: #fff5ea;
}

.architect-plan-table thead .column-fit {
  background: #ffe6ca;
  color: #7a3d00;
}

.architect-plan-table .column-allocation {
  background: #eef8f2;
}

.architect-plan-table thead .column-allocation {
  background: #d8efdf;
  color: #1d5b37;
}

.architect-plan-table .column-timing {
  background: #f3f6ff;
}

.architect-plan-table thead .column-timing {
  background: #dfe8ff;
  color: #1e4279;
}

.architect-plan-table .column-stage {
  width: 120px;
  background: #fff5dc;
}

.architect-plan-table thead .column-stage {
  background: #ffe6a8;
  color: #6a4900;
}

.architect-plan-table .column-agent {
  width: 240px;
  background: #edf5ff;
}

.architect-plan-table thead .column-agent {
  background: #d9e9ff;
  color: #143b67;
}

.architect-plan-table .column-task {
  background: #fff7ef;
}

.architect-plan-table thead .column-task {
  background: #ffe8d1;
  color: #804000;
}

.architect-plan-table .column-detail {
  width: 260px;
  background: #f5f8fc;
}

.architect-plan-table thead .column-detail {
  background: #e6edf7;
  color: #314663;
}

.architect-plan-table .column-field {
  width: 210px;
  background: #f5f8fc;
}

.architect-plan-table thead .column-field {
  background: #e6edf7;
  color: #314663;
}

.architect-plan-table .column-value {
  background: #ffffff;
}

.architect-plan-table thead .column-value {
  background: #fff2d4;
  color: #6f4300;
}

.architect-plan-table .column-select {
  width: 190px;
  background: #f6f8ff;
}

.architect-plan-table thead .column-select {
  background: #e7ecff;
  color: #29457b;
}

.architect-plan-compare-table tbody tr.is-focus td {
  background-image: linear-gradient(180deg, rgba(45, 106, 79, 0.04), rgba(45, 106, 79, 0.02));
}

.architect-plan-compare-table tbody tr.is-focus .column-scenario {
  box-shadow: inset 4px 0 0 #2d6a4f;
}

.architect-plan-compare-table tbody tr.is-recommended .column-recommended {
  background: linear-gradient(180deg, #fff4b8 0%, #ffe68a 100%);
}

.architect-scenario-table tbody tr.is-focus td {
  background-image: linear-gradient(180deg, rgba(45, 106, 79, 0.04), rgba(45, 106, 79, 0.02));
}

.architect-scenario-table tbody tr.is-focus .column-field {
  box-shadow: inset 4px 0 0 #2d6a4f;
}

.architect-scenario-matrix .column-field {
  width: 180px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #51637d;
  background: #f4f7fb;
}

.architect-scenario-matrix thead .column-field {
  background: #e7edf6;
  color: #314663;
}

.architect-scenario-matrix .column-scenario {
  width: 31%;
  background: #fffdf8;
}

.architect-scenario-matrix thead .column-scenario {
  background: linear-gradient(180deg, #edf5ff 0%, #e2edff 100%);
  color: #173a63;
}

.architect-scenario-matrix thead .column-scenario.is-recommended {
  background: linear-gradient(180deg, #f7cd57 0%, #efbc2a 100%);
  color: #4f3500;
}

.architect-scenario-matrix tbody .column-scenario.is-recommended {
  background: #fff8dc;
}

.architect-scenario-matrix tbody .column-scenario.is-focus {
  box-shadow: inset 0 0 0 2px rgba(45, 106, 79, 0.22);
  background-image: linear-gradient(180deg, rgba(45, 106, 79, 0.04), rgba(45, 106, 79, 0.02));
}

.architect-scenario-matrix-head {
  display: grid;
  gap: 0.45rem;
  align-content: start;
}

.architect-scenario-matrix thead .architect-table-statuses {
  margin-top: 0.15rem;
}

.architect-table-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  font-size: 0.73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.architect-table-pill.is-recommended {
  background: #8b5e00;
  color: #fff8dd;
  box-shadow: 0 0 0 3px rgba(247, 205, 87, 0.36);
}

.architect-table-pill.is-alternative {
  background: #5b6679;
  color: #f5f7fb;
}

.architect-table-note {
  margin-top: 0.5rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #5c677d;
}

.architect-table-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

.architect-table-scenario {
  display: grid;
  gap: 0.24rem;
}

.architect-table-scenario-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #315b8d;
}

.architect-table-scenario-title,
.architect-table-primary {
  color: #1a2238;
  line-height: 1.5;
}

.architect-table-scenario-title,
.architect-table-agent-name {
  font-weight: 700;
}

.architect-table-secondary {
  margin-top: 0.45rem;
  color: #53627b;
  font-size: 0.86rem;
  line-height: 1.45;
}

.architect-stage-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 0.32rem 0.65rem;
  background: #8b5e00;
  color: #fff8dd;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.architect-table-button-stack {
  display: grid;
  gap: 0.55rem;
}

.architect-scenario-select-button {
  min-height: 2.85rem;
  border-radius: 0.85rem;
  font-weight: 700;
}

.architect-prompt-disclosure,
.architect-compliance-disclosure {
  margin-top: 0.75rem;
}

.architect-table-disclosure {
  margin-top: 0;
}

.architect-prompt-disclosure summary,
.architect-compliance-disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  color: #c45510;
  font-size: 0.82rem;
  font-weight: 700;
}

.architect-prompt-disclosure summary::marker,
.architect-compliance-disclosure summary::marker,
.architect-prompt-disclosure summary::-webkit-details-marker,
.architect-compliance-disclosure summary::-webkit-details-marker {
  display: none;
}

.architect-prompt-detail {
  border-top: 1px solid rgba(26, 34, 56, 0.08);
  margin-top: 0.65rem;
  padding-top: 0.7rem;
  font-size: 0.88rem;
  line-height: 1.55;
}

.architect-loading-steps {
  display: grid;
  gap: 0.8rem;
}

.architect-loading-step {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.architect-step-dot {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: rgba(255, 122, 24, 0.18);
  margin-top: 0.15rem;
}

.architect-loading-copy {
  display: grid;
  gap: 0.35rem;
  flex: 1;
}

.architect-loading-button {
  width: 100%;
  height: 2.85rem;
  border-radius: 0.9rem;
}

.architect-skeleton {
  display: block;
  height: 0.82rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 162, 76, 0.14), rgba(255, 122, 24, 0.28), rgba(255, 162, 76, 0.14));
  background-size: 220% 100%;
  animation: architect-shimmer 1.4s linear infinite;
}

.architect-skeleton.w-40 { width: 40%; }
.architect-skeleton.w-55 { width: 55%; }
.architect-skeleton.w-70 { width: 70%; }
.architect-skeleton.w-85 { width: 85%; }
.architect-skeleton.w-90 { width: 90%; }
.architect-skeleton.w-100 { width: 100%; }

.architect-detail-modal .modal-content,
.architect-detail-modal {
  background: #ffffff;
  color: #1a2238;
  border: 1px solid rgba(26, 34, 56, 0.12);
  border-radius: 1.1rem;
  box-shadow: 0 24px 60px rgba(8, 12, 24, 0.28);
}

.architect-detail-modal .modal-body {
  display: grid;
  gap: 1rem;
}

.architect-modal-heading {
  display: grid;
  gap: 0.25rem;
  flex: 1;
}

.architect-modal-header {
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.85rem;
}

.architect-modal-subtitle {
  color: #5c677d;
  font-size: 0.95rem;
}

.architect-modal-close {
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid rgba(26, 34, 56, 0.14);
  border-radius: 999px;
  background: #ffffff;
  color: #1a2238;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  padding: 0;
  margin: 0;
  flex-shrink: 0;
  box-shadow: 0 8px 18px rgba(8, 12, 24, 0.08);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.architect-modal-close:hover {
  background: #f7f9fc;
  border-color: rgba(11, 93, 166, 0.4);
  transform: translateY(-1px);
}

.architect-modal-close:focus-visible {
  outline: 2px solid rgba(11, 93, 166, 0.5);
  outline-offset: 2px;
}

.architect-modal-section {
  border: 1px solid rgba(26, 34, 56, 0.08);
  background: #f8faff;
  border-radius: 0.95rem;
  padding: 1rem;
}

.architect-detail-backdrop {
  background: rgba(8, 12, 24, 0.62);
}

.compliance-disclosure {
  border-radius: inherit;
}

.compliance-disclosure > summary {
  list-style: none;
  cursor: pointer;
}

.compliance-disclosure > summary::marker,
.compliance-disclosure > summary::-webkit-details-marker {
  display: none;
}

.compliance-disclosure-hint {
  font-size: 0.78rem;
  color: var(--brand-muted);
}

.campaign-summary-card {
  border: 1px solid rgba(255, 162, 76, 0.24);
  background: linear-gradient(180deg, rgba(255, 248, 240, 0.98), rgba(247, 250, 255, 0.98));
  border-radius: 1rem;
  padding: 1rem;
  color: #1a2238;
}

.campaign-summary-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 0.85rem;
}

.campaign-summary-label {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  color: #7c879c;
  font-weight: 700;
  margin-bottom: 0.28rem;
}

.campaign-summary-copy {
  color: #43506a;
  line-height: 1.55;
  margin-bottom: 0.95rem;
}

.campaign-summary-plain {
  border: 1px solid rgba(255, 162, 76, 0.22);
  background: rgba(255, 255, 255, 0.82);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
  margin-bottom: 0.95rem;
  color: #32405a;
  line-height: 1.6;
}

.campaign-summary-plain-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: #7c879c;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.campaign-summary-sections {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.campaign-summary-section {
  border: 1px solid rgba(26, 34, 56, 0.08);
  background: rgba(255, 255, 255, 0.78);
  border-radius: 0.85rem;
  padding: 0.85rem 0.95rem;
}

.campaign-summary-section-title {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: #7c879c;
  font-weight: 700;
  margin-bottom: 0.38rem;
}

.campaign-summary-section-text {
  margin: 0;
  color: #43506a;
  line-height: 1.58;
}

.campaign-summary-grid {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.campaign-summary-metric {
  border: 1px solid rgba(26, 34, 56, 0.08);
  background: rgba(255, 255, 255, 0.86);
  border-radius: 0.8rem;
  padding: 0.8rem 0.9rem;
}

.campaign-summary-metric-label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  color: #7c879c;
  font-weight: 700;
  margin-bottom: 0.28rem;
}

.campaign-summary-metric-value {
  color: #1a2238;
  font-weight: 700;
  line-height: 1.4;
}

.campaign-summary-metric-help {
  margin-top: 0.34rem;
  color: #6b7487;
  font-size: 0.78rem;
  line-height: 1.45;
}

.campaign-summary-note {
  margin-top: 0.85rem;
  border-radius: 0.8rem;
  background: rgba(255, 183, 3, 0.14);
  border: 1px solid rgba(255, 183, 3, 0.24);
  color: #6d4c00;
  padding: 0.8rem 0.9rem;
  line-height: 1.45;
}

.flow-output-notice {
  border: 1px solid rgba(255, 183, 3, 0.28);
  background: rgba(255, 183, 3, 0.1);
  color: #ffe19a;
  border-radius: 0.8rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 0.85rem;
  line-height: 1.45;
}

.explanation-panel {
  border: 1px solid rgba(255, 102, 0, 0.35);
  background: rgba(20, 24, 42, 0.7);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
}

.visualization-loading {
  border: 1px dashed rgba(255, 179, 3, 0.45);
  background: rgba(255, 179, 3, 0.08);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.visualization-loading .spinner-border {
  flex-shrink: 0;
}

.visualization-deck-shell {
  display: block;
  width: 100%;
}

/* ══════════════════════════════════════════════════════════
   SLIDE DECK — TOP-TIER REDESIGN
   ══════════════════════════════════════════════════════════ */

/* ── Counter animation ───────────────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.deck-metric-value.animating {
  animation: countUp 0.45s ease forwards;
}

/* ── Flip card ───────────────────────────────────────────── */
.deck-metric-card {
  perspective: 600px;
  cursor: pointer;
}
.deck-metric-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 72px;
  transform-style: preserve-3d;
  transition: transform 0.42s cubic-bezier(0.4,0,0.2,1);
}
.deck-metric-card.flipped .deck-metric-card-inner {
  transform: rotateY(180deg);
}
.deck-metric-card-front,
.deck-metric-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.deck-metric-card-front {
  background: #f8fafd;
}
.deck-metric-card-back {
  background: linear-gradient(135deg, #0d3160, #1554a0);
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.deck-metric-card-back p {
  color: rgba(255,255,255,0.88);
  font-size: 0.76rem;
  line-height: 1.45;
  margin: 0;
}

/* ── Keyboard hint ───────────────────────────────────────── */
.deck-keyboard-hint {
  position: absolute;
  bottom: 3rem;
  right: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  color: rgba(16,63,114,0.45);
  pointer-events: none;
  animation: hintFade 3s ease 1.5s forwards;
  opacity: 0;
}
@keyframes hintFade {
  0%   { opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.deck-kbd {
  border: 1px solid rgba(16,63,114,0.25);
  border-radius: 3px;
  padding: 0.1rem 0.35rem;
  font-size: 0.65rem;
  font-family: monospace;
  background: rgba(16,63,114,0.06);
}

/* ── Cover slide ─────────────────────────────────────────── */
.deck-cover-frame {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: linear-gradient(155deg, #071830 0%, #0d3160 45%, #1a5aa0 100%);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.deck-cover-bg-pattern {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}
.deck-cover-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0090c8, #7c3fe0, #27a05e);
}
.deck-cover-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.2rem 2.5rem 1.8rem;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.deck-cover-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255,255,255,0.5);
}
.deck-cover-eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #0090c8;
  flex-shrink: 0;
}
.deck-cover-title {
  font-family: "Space Grotesk","Segoe UI",sans-serif;
  font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 580px;
}
.deck-cover-subtitle {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
  max-width: 480px;
}
.deck-cover-meta {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-top: 0.4rem;
}
.deck-cover-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.deck-cover-meta-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.4);
}
.deck-cover-meta-value {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.deck-cover-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 1;
}
.deck-cover-footer-brand {
  font-family: "Space Grotesk","Segoe UI",sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.deck-cover-footer-conf {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.3);
}

/* ── Top progress bar ────────────────────────────────────── */
.deck-progress-track {
  display: flex;
  gap: 3px;
  padding: 0 1.35rem;
  margin-top: -0.25rem;
  margin-bottom: 0.1rem;
  flex-shrink: 0;
}
.deck-progress-seg {
  height: 3px;
  flex: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  transition: background 0.3s ease;
}
.deck-progress-seg.done  { background: rgba(255,255,255,0.7); }
.deck-progress-seg.active{ background: #ffffff; }

/* ── Slide content layers (z-index) ──────────────────────── */
.deck-slide-band,
.deck-slide-body,
.deck-slide-footer {
  position: relative;
  z-index: 1;
}

/* ── Left edge accent stripe ─────────────────────────────── */
.deck-slide-frame::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 4px;
  height: 100%;
  background: #103f72;
  z-index: 2;
}
.deck-slide-frame.kind-pacing::after     { background: #0090c8; }
.deck-slide-frame.kind-reach::after      { background: #7c3fe0; }
.deck-slide-frame.kind-make-good::after  { background: #c05f15; }
.deck-slide-frame.kind-actions::after    { background: #18a0a3; }
.deck-slide-frame.kind-next-steps::after { background: #27a05e; }

/* ── Key Insight callout ─────────────────────────────────── */
.deck-key-insight {
  display: flex;
  gap: 0.6rem;
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  border: 1px solid rgba(230,160,0,0.25);
  border-left: 3px solid #e6a200;
  border-radius: 0.65rem;
  padding: 0.6rem 0.75rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: #3a2800;
}
.deck-key-insight-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #b07800;
  white-space: nowrap;
  margin-top: 0.05rem;
}

/* ── Recommendation box ──────────────────────────────────── */
.deck-recommendation {
  background: linear-gradient(135deg, #0d3628, #186943);
  border-radius: 0.8rem;
  padding: 0.85rem 1rem;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.deck-recommendation-label {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.55);
}
.deck-recommendation-text {
  font-family: "Space Grotesk","Segoe UI",sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.4;
  color: #ffffff;
}

/* ── Allocation before/after bars ────────────────────────── */
.deck-alloc-bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.deck-alloc-row {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.deck-alloc-row-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
}
.deck-alloc-bar-track {
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}
.deck-alloc-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  transition: width 0.6s ease;
  white-space: nowrap;
  overflow: hidden;
  min-width: 0;
}
.deck-alloc-seg.seg-stream { background: #0090c8; }
.deck-alloc-seg.seg-linear { background: #e87c2d; }
.deck-alloc-seg.seg-reserve{ background: rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); }

.deck-alloc-arrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.3);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0.15rem 0;
}

.deck-alloc-arrow::before,
.deck-alloc-arrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,0.15);
}

/* ── Action table status badges (deck) ───────────────────── */
.deck-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.22rem 0.55rem;
  font-size: 0.67rem;
  font-weight: 700;
  white-space: nowrap;
}
.deck-status-badge.status-done  { background: rgba(39,160,94,0.12);  color: #1a7a45; }
.deck-status-badge.status-issue { background: rgba(220,130,0,0.12);  color: #994f00; }
.deck-status-badge.status-error { background: rgba(200,50,50,0.12);  color: #991c1c; }
.deck-status-badge::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  flex-shrink: 0;
}
.deck-status-badge.status-done::before  { background: #27a05e; }
.deck-status-badge.status-issue::before { background: #dc8200; }
.deck-status-badge.status-error::before { background: #c83232; }

/* ── Hard reset: undo Reveal.js white theme inside our deck ─ */
/* Reveal.js white.css forces h1-h3 to be large, uppercase, bold */
/* We nuke those here so our own styles apply cleanly           */
.wbd-output-deck h1,
.wbd-output-deck h2,
.wbd-output-deck h3,
.wbd-output-deck h4 {
  font-size: inherit !important;
  font-weight: inherit !important;
  text-transform: none !important;
  text-shadow: none !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  color: inherit !important;
  word-wrap: normal !important;
}

.wbd-output-deck .slides section {
  background: transparent !important;
}

/* ── Deck shell ──────────────────────────────────────────── */
.wbd-output-deck {
  width: 100%;
  min-height: 760px;
  height: min(88vh, 980px);
  border-radius: 1.35rem;
  overflow: hidden;
  border: 1px solid rgba(61, 91, 135, 0.16);
  background: #eef2f8;
  box-shadow: 0 4px 8px rgba(7, 18, 36, 0.08), 0 20px 55px rgba(7, 18, 36, 0.22);
}

.wbd-output-deck .slides {
  text-align: left;
  height: 100%;
}

.wbd-output-deck .slides .deck-slide-page {
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.wbd-output-deck .controls {
  color: #103f72;
}

.wbd-output-deck .progress {
  color: #0b5da6;
  height: 3px;
}

.wbd-output-deck .slide-number {
  background: rgba(16, 63, 114, 0.08);
  color: #103f72;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
}

/* ── Slide frame & per-kind accent colors ─────────────────── */
.deck-slide-frame {
  min-height: 100%;
  height: auto;
  max-height: none;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0 0 0;
  background: #ffffff;
  color: #10233e;
  overflow: visible;
  box-sizing: border-box;
  position: relative;
}

/* colored header band */
.deck-slide-band {
  width: 100%;
  padding: 0.85rem 1.35rem 0.8rem 1.7rem;
  background: linear-gradient(135deg, #0d3160 0%, #103f72 60%, #1554a0 100%) !important;
  flex-shrink: 0;
  overflow: visible;
}
.deck-slide-frame.kind-pacing    .deck-slide-band { background: linear-gradient(135deg, #06304f 0%, #085a8c 60%, #0090c8 100%) !important; }
.deck-slide-frame.kind-reach     .deck-slide-band { background: linear-gradient(135deg, #2a1458 0%, #4c2497 60%, #7c3fe0 100%) !important; }
.deck-slide-frame.kind-make-good .deck-slide-band { background: linear-gradient(135deg, #4a2000 0%, #8c4200 60%, #c05f15 100%) !important; }
.deck-slide-frame.kind-actions   .deck-slide-band { background: linear-gradient(135deg, #06393a 0%, #0e6e70 60%, #18a0a3 100%) !important; }
.deck-slide-frame.kind-next-steps .deck-slide-band { background: linear-gradient(135deg, #0d3628 0%, #186943 60%, #27a05e 100%) !important; }

.deck-slide-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.deck-slide-takeaway-line {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  font-style: italic;
  line-height: 1.45;
  margin-top: 0.3rem;
  max-width: 780px;
}

.deck-slide-body-text {
  font-size: 0.83rem;
  color: #2a3f56;
  line-height: 1.55;
  margin: 0;
}

.deck-slide-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 0.35rem;
}

.deck-slide-title {
  font-family: "Space Grotesk", "Segoe UI", sans-serif !important;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem) !important;
  line-height: 1.22 !important;
  color: #ffffff !important;
  margin: 0 !important;
  max-width: 820px;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  overflow: visible !important;
  white-space: normal !important;
  word-break: normal !important;
  display: block !important;
}

.deck-slide-number {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* ── Slide body (below the band) ──────────────────────────── */
.deck-slide-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem 1.2rem 0.75rem 1.55rem;
  flex: 1;
  min-height: 0;
}

.deck-slide-takeaway {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #f0f5ff;
  border: 1px solid rgba(11, 93, 166, 0.18);
  border-radius: 0.75rem;
  padding: 0.65rem 0.85rem;
  color: #0d2d52;
  font-size: 0.88rem;
  line-height: 1.5;
  font-weight: 600;
}

.deck-slide-takeaway::before {
  content: "\2192";
  font-size: 0.85rem;
  color: #0b5da6;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.deck-slide-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.88fr);
  gap: 0.75rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
  overflow: visible;
}

.deck-slide-grid-wide {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.9fr);
  align-items: stretch;
}

.deck-stack-layout {
  display: grid;
  gap: 0.6rem;
  min-height: 0;
  overflow: visible;
  flex: 1;
}

/* ── Panels ───────────────────────────────────────────────── */
.deck-side-panel,
.deck-chart-panel,
.deck-table-panel {
  background: #ffffff;
  border: 1px solid rgba(61, 91, 135, 0.13);
  border-radius: 0.85rem;
  padding: 0.85rem 0.9rem;
  box-shadow: 0 2px 8px rgba(9, 24, 48, 0.06), 0 8px 24px rgba(9, 24, 48, 0.05);
  min-height: 0;
  height: 100%;
  overflow: visible;
  box-sizing: border-box;
}

.deck-panel-title {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a7a99;
  margin-bottom: 0.5rem;
}

/* Long panel titles (insight callouts) render in sentence case */
.deck-panel-title.long {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.82rem;
  color: #2a3f56;
}

/* ── Narrative ────────────────────────────────────────────── */
.deck-narrative {
  display: grid;
  gap: 0.7rem;
}

.deck-body-copy {
  margin: 0;
  color: #2a3f56;
  line-height: 1.55;
  font-size: 0.86rem;
}

.deck-bullet-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #2a3f56;
  display: grid;
  gap: 0.38rem;
  font-size: 0.84rem;
}

.deck-bullet-list li {
  line-height: 1.45;
  padding-left: 1rem;
  position: relative;
}

.deck-bullet-list li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: rgba(11, 93, 166, 0.55);
  font-size: 0.7rem;
  top: 0.1rem;
}

.deck-note {
  border-top: 1px solid rgba(61, 91, 135, 0.12);
  padding-top: 0.6rem;
  color: #5a7a99;
  line-height: 1.45;
  font-size: 0.8rem;
}

/* ── Locked slide templates ───────────────────────────────── */
/* Template A: Chart (left) + Story column (right) */
.deck-template-a {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* Template B: Visual panel (left) + Story column (right) */
.deck-template-b {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 0.75rem;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* Template C: KPI strip + full-width table (stacked) */
.deck-template-c {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
  min-height: 0;
}

/* ── Story column (right side of template A/B) ─────────────── */
.deck-story-column {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}

.deck-story-card {
  background: #f8fafd;
  border: 1px solid rgba(61, 91, 135, 0.13);
  border-left: 4px solid #0b5da6;
  border-radius: 0 0.75rem 0.75rem 0;
  padding: 0.8rem 0.95rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.deck-slide-frame.kind-pacing    .deck-story-card { border-left-color: #0090c8; }
.deck-slide-frame.kind-reach     .deck-story-card { border-left-color: #7c3fe0; }
.deck-slide-frame.kind-make-good .deck-story-card { border-left-color: #c05f15; }
.deck-slide-frame.kind-actions   .deck-story-card { border-left-color: #18a0a3; }
.deck-slide-frame.kind-next-steps .deck-story-card { border-left-color: #27a05e; }

.deck-story-card-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #5a7a99;
  margin-bottom: 0.2rem;
}

.deck-story-bullet {
  font-size: 1rem;
  color: #1e3148;
  line-height: 1.48;
  padding-left: 1.1rem;
  position: relative;
}

.deck-story-bullet::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: rgba(11, 93, 166, 0.5);
  font-size: 0.8rem;
  top: 0.06rem;
}

.deck-slide-frame.kind-pacing    .deck-story-bullet::before { color: rgba(0, 144, 200, 0.6); }
.deck-slide-frame.kind-reach     .deck-story-bullet::before { color: rgba(124, 63, 224, 0.6); }
.deck-slide-frame.kind-make-good .deck-story-bullet::before { color: rgba(192, 95, 21, 0.6); }
.deck-slide-frame.kind-actions   .deck-story-bullet::before { color: rgba(24, 160, 163, 0.6); }
.deck-slide-frame.kind-next-steps .deck-story-bullet::before { color: rgba(39, 160, 94, 0.6); }

/* ── KPI strip (Template C header) ───────────────────────── */
.deck-kpi-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem;
  flex-shrink: 0;
}

.deck-kpi-chip {
  background: linear-gradient(135deg, #0f2d52, #1554a0);
  border-radius: 0.65rem;
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.deck-kpi-chip-value {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.deck-kpi-chip-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.55);
}

.deck-slide-frame.kind-actions   .deck-kpi-chip { background: linear-gradient(135deg, #06393a, #18a0a3); }
.deck-slide-frame.kind-next-steps .deck-kpi-chip { background: linear-gradient(135deg, #0d3628, #27a05e); }

/* ── Chart canvas wrapper (fixed height) ───────────────────── */
.deck-chart-canvas-wrap {
  position: relative;
  height: 220px;
  flex-shrink: 0;
}

.deck-chart-canvas-wrap svg {
  display: block;
  width: 100% !important;
  height: 220px !important;
}

.deck-reach-canvas-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
}

/* ── Metric cards ─────────────────────────────────────────── */
.deck-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

.deck-metric-card {
  background: #f8fafd;
  border: 1px solid rgba(61, 91, 135, 0.12);
  border-top: 3px solid #0b5da6;
  border-radius: 0.7rem;
  padding: 0.7rem 0.75rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.deck-slide-frame.kind-pacing    .deck-metric-card { border-top-color: #0090c8; }
.deck-slide-frame.kind-reach     .deck-metric-card { border-top-color: #7c3fe0; }
.deck-slide-frame.kind-make-good .deck-metric-card { border-top-color: #c05f15; }
.deck-slide-frame.kind-actions   .deck-metric-card { border-top-color: #18a0a3; }
.deck-slide-frame.kind-next-steps .deck-metric-card { border-top-color: #27a05e; }

.deck-metric-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #5a7a99;
  line-height: 1.3;
}

.deck-metric-value {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: #0d1f36;
  line-height: 1.15;
  margin: 0.1rem 0 0.05rem;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Shrink font for long metric values automatically */
.deck-metric-card:has(.deck-metric-value:not(:empty)) .deck-metric-value {
  font-size: clamp(0.82rem, 0.65rem + 0.8vw, 1.35rem);
}

.deck-metric-help {
  color: #5a7a99;
  line-height: 1.35;
  font-size: 0.75rem;
}

/* ── Chart panel controls ─────────────────────────────────── */
.deck-chart-panel .btn-group .btn {
  border-radius: 999px;
  font-size: 0.75rem;
  padding: 0.25rem 0.65rem;
}

.deck-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  color: #4a6480;
  font-size: 0.85rem;
  margin-top: 0.6rem;
}

.deck-chart-caption {
  margin-top: 0.6rem;
  text-align: center;
  color: #4a6480;
  font-size: 0.78rem;
  line-height: 1.4;
}

/* ── Make-good visual panel ───────────────────────────────── */
.deck-makegood-visual {
  display: grid;
  gap: 0.85rem;
  align-content: start;
  min-height: 100%;
  border-radius: 0.85rem;
  padding: 1.1rem;
  background: linear-gradient(160deg, #0d3160 0%, #0e2d4f 50%, #071e38 100%);
  color: #ffffff;
}

.deck-makegood-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

.deck-makegood-amount {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.deck-makegood-copy {
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.55;
  font-size: 0.84rem;
}

.deck-makegood-track {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.deck-budget-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0.42rem 0.75rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.deck-budget-chip.chip-linear {
  background: rgba(255, 160, 60, 0.2);
  color: #ffb347;
  border: 1px solid rgba(255, 160, 60, 0.3);
}

.deck-budget-chip.chip-digital {
  background: rgba(0, 180, 230, 0.2);
  color: #5ed4f3;
  border: 1px solid rgba(0, 180, 230, 0.3);
}

.deck-budget-chip.chip-arrow {
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1rem;
  padding: 0 0.25rem;
}

.deck-makegood-alloc-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
}

.deck-makegood-alloc-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}

.deck-makegood-alloc-val {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
}

.deck-makegood-arrow {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 1rem;
}

.deck-makegood-note {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.65rem;
  padding: 0.65rem 0.75rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
  font-size: 0.8rem;
}

/* ── Make-good delivery rate row ─────────────────────────── */
.deck-makegood-delivery-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.deck-mg-ch {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.deck-mg-ch.linear    { background: rgba(232, 124, 45, 0.25); color: #ffb980; }
.deck-mg-ch.streaming { background: rgba(0, 144, 200, 0.25); color: #7dd8f8; }
.deck-mg-sep          { font-size: 0.72rem; color: rgba(255,255,255,0.4); }
.deck-mg-gap          { font-size: 0.72rem; font-weight: 700; color: #ff9f6a; }

/* ── Make-good why-amount block ──────────────────────────── */
.deck-makegood-why {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.65rem;
  padding: 0.65rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}
.deck-makegood-why-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ff9f6a;
  margin-bottom: 0.1rem;
}
.deck-makegood-why-line {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.48;
  padding-left: 0.85rem;
  position: relative;
}
.deck-makegood-why-line::before {
  content: "\203A";
  position: absolute;
  left: 0;
  color: #ff9f6a;
  font-weight: 700;
}

/* ── Metric delta badge ───────────────────────────────────── */
.deck-metric-delta {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  display: inline-block;
  margin-top: 0.1rem;
}
.deck-metric-delta.positive { background: rgba(39, 160, 94, 0.15); color: #1a7a45; }
.deck-metric-delta.neutral  { background: rgba(90, 122, 153, 0.15); color: #3d5c7a; }

/* ── Executive scoreboard row ─────────────────────────────── */
.deck-scoreboard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-bottom: 0.1rem;
}

.deck-scoreboard-item {
  background: linear-gradient(135deg, #0f2d52, #1554a0);
  border-radius: 0.7rem;
  padding: 0.65rem 0.75rem;
  text-align: center;
}

.deck-scoreboard-value {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.deck-scoreboard-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0.35rem;
}

/* ── Channel comparison bars ──────────────────────────────── */
.deck-channel-comparison {
  background: #f8fafd;
  border: 1px solid rgba(61, 91, 135, 0.12);
  border-radius: 0.85rem;
  padding: 0.8rem 0.9rem;
  display: grid;
  gap: 0.55rem;
}

.deck-comparison-title {
  font-size: 0.67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #5a7a99;
  margin-bottom: 0.1rem;
}

.deck-comparison-row {
  display: grid;
  grid-template-columns: 64px 1fr 44px;
  align-items: center;
  gap: 0.5rem;
}

.deck-comparison-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2a3f56;
}

.deck-comparison-bar-wrap {
  background: rgba(61, 91, 135, 0.1);
  border-radius: 999px;
  height: 10px;
  overflow: hidden;
}

.deck-comparison-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.6s ease;
}
.deck-comparison-bar.streaming { background: linear-gradient(90deg, #0090c8, #5ed4f3); }
.deck-comparison-bar.linear    { background: linear-gradient(90deg, #e87c2d, #ffb347); }

.deck-comparison-val {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  text-align: right;
}
.deck-comparison-val.streaming { color: #0090c8; }
.deck-comparison-val.linear    { color: #c05f15; }

.deck-comparison-verdict {
  font-size: 0.82rem;
  color: #27a05e;
  background: rgba(39, 160, 94, 0.1);
  border-radius: 0.5rem;
  padding: 0.4rem 0.65rem;
  font-weight: 500;
  margin-top: 0.15rem;
}
.deck-comparison-verdict.neutral {
  color: #5a7a99;
  background: rgba(90, 122, 153, 0.1);
}
.deck-comparison-verdict.linear {
  color: #c05f15;
  background: rgba(192, 95, 21, 0.1);
}

/* ── Executive rationale box ──────────────────────────────── */
.deck-exec-rationale {
  background: #f0f5fb;
  border-left: 3px solid #0b5da6;
  border-radius: 0 0.65rem 0.65rem 0;
  padding: 0.6rem 0.8rem;
}
.deck-exec-rationale-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0b5da6;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.deck-exec-rationale-body {
  font-size: 0.75rem;
  color: #253b57;
  line-height: 1.45;
  margin: 0;
}

/* ── Slide footer ─────────────────────────────────────────── */
.deck-slide-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.2rem 0.5rem;
  border-top: 1px solid rgba(61, 91, 135, 0.1);
  background: #f8fafd;
  flex-shrink: 0;
  font-size: 0.68rem;
  color: #7a96b2;
  margin-top: auto;
}

.deck-footer-name {
  font-weight: 600;
  color: #4a6480;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.deck-footer-sep { opacity: 0.5; }
.deck-footer-confidential { opacity: 0.7; }

.deck-footer-page {
  margin-left: auto;
  font-weight: 700;
  color: #103f72;
  white-space: nowrap;
}

.deck-plain-panel {
  background: #f8fafd;
  border: 1px solid rgba(61, 91, 135, 0.12);
  border-radius: 0.85rem;
  padding: 1rem;
  color: #2a3f56;
  line-height: 1.55;
  font-size: 0.86rem;
}

.deck-table-panel {
  min-height: auto;
  max-height: none;
  overflow: visible;
}

.deck-action-table {
  margin-bottom: 0;
  color: #24364d;
}

.deck-action-table thead th {
  border-bottom: 1px solid rgba(61, 91, 135, 0.16);
  color: #4a6480;
  font-size: 0.67rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  background: transparent;
  padding: 0.5rem 0.6rem;
}

.deck-action-table tbody td {
  border-color: rgba(61, 91, 135, 0.1);
  background: transparent;
  color: #24364d;
  vertical-align: top;
  font-size: 0.84rem;
  padding: 0.45rem 0.6rem;
}

/* ── Slide progress dots ──────────────────────────────────── */
.deck-slide-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  flex-shrink: 0;
}

.deck-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(16, 63, 114, 0.22);
  transition: all 0.2s ease;
}

.deck-dot.active {
  width: 18px;
  background: #103f72;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.chart-card,
.donut-card {
  background: var(--brand-card);
  border: 1px solid var(--brand-border);
  border-radius: 1rem;
  padding: 1rem;
}

.chart-axis {
  stroke: rgba(37, 59, 87, 0.24);
  stroke-width: 1;
}

.chart-line-linear {
  stroke: var(--brand-accent);
  stroke-width: 3;
  fill: none;
}

.chart-line-digital {
  stroke: #6dd3fb;
  stroke-width: 3;
  fill: none;
}

.pacing-chart-wrap {
  position: relative;
}

.pacing-chart-d3 {
  position: relative;
  min-height: 220px;
}

.reach-chart-d3 {
  width: 180px;
  margin: 0 auto;
}

.reach-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  text-align: center;
}

.metric-label {
  font-size: 0.75rem;
  color: #3d5c7a;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.metric-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: #10233e;
}

.chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.35rem 0.6rem;
  border-radius: 0.6rem;
  background: rgba(15, 18, 36, 0.92);
  border: 1px solid rgba(255, 102, 0, 0.35);
  color: var(--brand-text);
  font-size: 0.75rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  z-index: 3;
}

.legend-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.legend-swatch.linear {
  background: var(--brand-accent);
}

.legend-swatch.digital {
  background: #6dd3fb;
}

.legend-swatch.status-running {
  background: #ffb703;
  box-shadow: 0 0 0 3px rgba(255, 183, 3, 0.2);
}

.legend-swatch.status-complete {
  background: #2d6a4f;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, 0.18);
}

.legend-swatch.status-pending {
  background: #5a607b;
}

.legend-swatch.status-error {
  background: #9b2226;
  box-shadow: 0 0 0 3px rgba(155, 34, 38, 0.16);
}

.donut {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto;
  background: conic-gradient(var(--brand-accent) 0 var(--linear-pct), #6dd3fb var(--linear-pct) 100%);
}

.donut-inner {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: var(--brand-card);
  display: grid;
  place-items: center;
  text-align: center;
}

.table-dark {
  --bs-table-bg: #1c2138;
  --bs-table-striped-bg: #222844;
  --bs-table-color: var(--brand-text);
  border-color: var(--brand-border);
}

.badge {
  letter-spacing: 0.04em;
}

.badge.status-running {
  background: rgba(255, 183, 3, 0.2);
  color: var(--brand-warning);
  animation: pulse 1.8s ease-in-out infinite;
}

.badge.status-issue {
  background: rgba(155, 34, 38, 0.2);
  color: #ffb4b8;
}

.badge.status-ok {
  background: rgba(45, 106, 79, 0.2);
  color: #8df5c2;
}

@media (max-width: 768px) {
  .hero-panel {
    padding: 1.5rem;
  }
  .wbd-output-deck {
    min-height: 620px;
    height: 84vh;
  }
  .deck-slide-frame {
    padding: 0;
  }
  .deck-slide-band {
    padding: 0.75rem 1rem 0.7rem;
  }
  .deck-slide-body {
    padding: 0.7rem 0.85rem 0.4rem;
  }
  .deck-slide-title {
    font-size: 0.9rem;
  }
  .deck-slide-grid,
  .deck-slide-grid-wide,
  .deck-metric-grid {
    grid-template-columns: 1fr;
  }
  .deck-scoreboard {
    grid-template-columns: repeat(2, 1fr);
  }
  .deck-slide-head {
    align-items: flex-start;
  }
  .architect-scenario-header,
  .campaign-summary-head {
    flex-direction: column;
  }
  .architect-scenario-matrix .column-field {
    width: 138px;
  }
  .architect-plan-table th,
  .architect-plan-table td {
    padding: 0.78rem 0.7rem;
  }
  .flow-live-disclosure > summary {
    flex-direction: column;
    align-items: stretch;
  }
  .flow-live-disclosure > summary::after {
    align-self: flex-end;
  }
  .flow-live-disclosure-progress {
    min-width: 0;
  }
  .architect-param-grid,
  .architect-detail-actions,
  .stage-summary-metric-grid {
    grid-template-columns: 1fr;
  }
  .stage-progress-meta {
    flex-direction: column;
  }
  .stage-stat-grid {
    grid-template-columns: 1fr;
  }
  .donut {
    width: 140px;
    height: 140px;
  }
  .donut-inner {
    width: 95px;
    height: 95px;
  }
  .flow-output-panel {
    max-height: none;
  }
  .agent-stream {
    max-height: calc(100vh - 300px);
  }
  .flow-status-board {
    grid-template-columns: 1fr;
  }
}

@keyframes architect-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -20% 0;
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 183, 3, 0.0);
  }
  50% {
    box-shadow: 0 0 12px rgba(255, 183, 3, 0.5);
  }
  100% {
    box-shadow: 0 0 0 rgba(255, 183, 3, 0.0);
  }
}

@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 rgba(155, 34, 38, 0.0);
  }
  50% {
    box-shadow: 0 0 18px rgba(155, 34, 38, 0.6);
  }
  100% {
    box-shadow: 0 0 0 rgba(155, 34, 38, 0.0);
  }
}

@keyframes slide-chip {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(220px);
  }
  100% {
    transform: translateX(0);
  }
}