/* style.css — Spectral MVP Design Tokens & Component Styles */

/* ── FONTS ── */
:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}

/* ── TYPE SCALE ── */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.8125rem);
  --text-sm:   clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --text-base: clamp(0.875rem, 0.84rem + 0.2vw, 1rem);
  --text-lg:   clamp(1.125rem, 0.95rem + 0.85vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2rem);
}

/* ── SPACING ── */
:root {
  --space-0: 0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 200ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 120ms ease;

  --sidebar-width: 200px;
  --sidebar-collapsed: 56px;
}

/* ── LIGHT MODE ── */
:root, [data-theme="light"] {
  --color-bg:             #F8FAFC;
  --color-surface:        #FFFFFF;
  --color-surface-2:      #F1F5F9;
  --color-surface-offset: #E2E8F0;
  --color-border:         #CBD5E1;
  --color-text:           #0F172A;
  --color-text-muted:     #64748B;
  --color-text-faint:     #94A3B8;
  --color-text-inverse:   #F8FAFC;
  --color-primary:        #0EA5E9;
  --color-primary-hover:  #0284C7;
  --color-primary-light:  rgba(14,165,233,0.12);
  --color-success:        #10B981;
  --color-success-light:  rgba(16,185,129,0.12);
  --color-warning:        #FBBF24;
  --color-warning-light:  rgba(251,191,36,0.12);
  --color-error:          #EF4444;
  --color-error-light:    rgba(239,68,68,0.12);

  --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-md: 0 4px 12px rgba(15,23,42,0.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,0.12);
}

/* ── DARK MODE (DEFAULT) ── */
[data-theme="dark"] {
  --color-bg:             #0B1221;
  --color-surface:        #0F1B2D;
  --color-surface-2:      #162236;
  --color-surface-offset: #1B2A40;
  --color-border:         #1E3A5F;
  --color-text:           #E2E8F0;
  --color-text-muted:     #94A3B8;
  --color-text-faint:     #64748B;
  --color-text-inverse:   #0B1221;
  --color-primary:        #0EA5E9;
  --color-primary-hover:  #38BDF8;
  --color-primary-light:  rgba(14,165,233,0.12);
  --color-success:        #10B981;
  --color-success-light:  rgba(16,185,129,0.15);
  --color-warning:        #FBBF24;
  --color-warning-light:  rgba(251,191,36,0.15);
  --color-error:          #EF4444;
  --color-error-light:    rgba(239,68,68,0.15);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
}

/* ── LAYOUT: DASHBOARD SHELL ── */
.dashboard {
  display: flex;
  height: 100vh;
  height: 100dvh;
  width: 100%;
  overflow: hidden;
}

/* ── SIDEBAR ── */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 20;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.sidebar-brand svg { flex-shrink: 0; }
.sidebar-brand .wordmark {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-text);
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: all var(--transition-interactive);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.nav-item:hover {
  background: var(--color-primary-light);
  color: var(--color-text);
}
.nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.nav-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-item.active svg { opacity: 1; }

.sidebar-footer {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}

/* ── MAIN CONTENT ── */
.main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-bg);
}

.main-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  backdrop-filter: blur(8px);
}
.main-header h1 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}
.header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.main-content {
  padding: var(--space-6);
}

/* ── SCREEN SECTIONS ── */
.screen { display: none; }
.screen.active { display: block; }

/* ── KPI CARDS ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.kpi-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}
.kpi-value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.1;
}

/* Agent accuracy card — compact layout */

.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 500;
  margin-top: var(--space-2);
  font-variant-numeric: tabular-nums lining-nums;
}
.kpi-delta.positive { color: var(--color-success); }
.kpi-delta.negative { color: var(--color-error); }

/* ── CHARTS ── */
.chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.chart-card h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}
.chart-wrapper {
  position: relative;
  height: 240px;
}

/* ── DATA TABLE ── */
.table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.table-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.table-card-header h3 {
  font-size: var(--text-sm);
  font-weight: 600;
}

.data-table-wrapper {
  overflow-x: auto;
  overscroll-behavior: contain;
}
.data-table {
  width: 100%;
  font-variant-numeric: tabular-nums lining-nums;
}
.data-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}
.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--color-surface-2);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.data-table th:hover { color: var(--color-text); }
.data-table th.num { text-align: right; }
.data-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  border-top: 1px solid var(--color-border);
  white-space: nowrap;
}
.data-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.data-table td.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.data-table tbody tr {
  transition: background var(--transition-interactive);
}
.data-table tbody tr:hover {
  background: var(--color-primary-light);
  cursor: pointer;
}

/* Score color coding */
.score-high { color: var(--color-success); }
.score-mid { color: var(--color-warning); }
.score-low { color: var(--color-error); }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-secondary {
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover:not(:disabled) { background: var(--color-surface-offset); }
.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) { color: var(--color-text); border-color: var(--color-text-faint); }
.btn-danger {
  background: var(--color-error-light);
  color: var(--color-error);
  border: 1px solid rgba(239,68,68,0.2);
}
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.2); }
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

/* ── BADGES ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.badge-primary { background: var(--color-primary-light); color: var(--color-primary); }
.badge-success { background: var(--color-success-light); color: var(--color-success); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning); }
.badge-error { background: var(--color-error-light); color: var(--color-error); }
.badge-neutral { background: var(--color-surface-offset); color: var(--color-text-muted); }

/* ── SELECT / DROPDOWN ── */
.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.select-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.select-wrap label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  margin-right: var(--space-2);
}
.select-wrap select {
  appearance: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-interactive);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.select-wrap select:focus { border-color: var(--color-primary); }

/* ── EXPAND ROW DETAIL ── */
.trace-detail {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-2);
  border-top: 1px solid var(--color-border);
}

/* ── FAILURE ANALYSIS ── */
.failure-bar-chart {
  margin-bottom: var(--space-6);
}

/* ── EXPERIMENTS ── */
.experiment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.experiment-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.experiment-card:hover { border-color: var(--color-primary); }
.experiment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.experiment-card-header h4 {
  font-size: var(--text-sm);
  font-weight: 600;
}
.experiment-card .meta {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-2);
}

.experiment-detail { margin-top: var(--space-4); }

/* ── PROMOTION GATE ── */
.promotion-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-6);
  align-items: start;
}
.promotion-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.promotion-panel.champion { border-color: var(--color-warning); }
.promotion-panel-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.promotion-panel h3 {
  font-size: var(--text-sm);
  font-weight: 600;
}
.promotion-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}
.promotion-metric:last-child { border-bottom: none; }
.promotion-metric .metric-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.promotion-metric .metric-value {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  font-family: var(--font-mono);
}

.delta-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: 68px; /* align with first metric */
}
.delta-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
  border-bottom: 1px solid transparent;
  min-height: 44px;
}
.delta-item.improved { color: var(--color-success); }
.delta-item.neutral { color: var(--color-text-faint); }

.promotion-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

/* ── CONFIGS ── */
.config-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.config-card:hover { border-color: var(--color-primary); }
.config-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.config-card h4 {
  font-size: var(--text-sm);
  font-weight: 600;
}
.config-card .description {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.config-card .config-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}
.config-json-block {
  margin-top: var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: none;
}
.config-json-block.open { display: block; }
.config-json-block pre {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.6;
  max-height: 300px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* ── LOADING / SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-2) 25%, var(--color-surface-offset) 50%, var(--color-surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton-card { height: 100px; }

/* Loading overlay for buttons */
.btn.loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── ERROR STATE ── */
.error-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-muted);
}
.error-state p { font-size: var(--text-sm); }

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-faint);
}
.empty-state p {
  font-size: var(--text-sm);
  margin: 0 auto;
}

/* ── THEME TOGGLE ── */
.theme-toggle {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-2); }

/* ── TABULAR NUMS ── */
.tabular { font-variant-numeric: tabular-nums lining-nums; }

/* ── FOOTER ── */
.app-footer {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
}
.app-footer a {
  color: var(--color-text-faint);
  text-decoration: none;
  transition: color var(--transition-interactive);
}
.app-footer a:hover { color: var(--color-primary); }

/* ── RESPONSIVE ── */
@media (max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  .promotion-layout { grid-template-columns: 1fr; }
  .delta-column { display: none; }
}

@media (max-width: 768px) {
  .dashboard { flex-direction: column; }
  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transition: left var(--transition-interactive);
    z-index: 100;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 99;
  }
  .sidebar.open ~ .sidebar-overlay { display: block; }
  .mobile-menu-btn { display: flex !important; }
  .kpi-grid { grid-template-columns: 1fr; }
}

.mobile-menu-btn { display: none; }

/* ── CHART.JS TOOLTIP FIXES ── */

/* ── EVALUATIONS SCREEN ── */
.eval-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* Active rubric info */
.active-rubric-info {
  padding: var(--space-3);
}
.rubric-name-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.rubric-name {
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.rubric-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin: 0 0 var(--space-2) 0;
  line-height: 1.5;
}
.rubric-meta {
  display: flex;
  gap: var(--space-4);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* Dimension cards */
.dimension-card {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3);
}
.dimension-card:last-child { border-bottom: none; }
.dimension-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.dimension-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}
.dimension-badges {
  display: flex;
  gap: var(--space-1);
}
.dimension-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  line-height: 1.5;
}

/* Rubric list items */
.rubric-list-item {
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-3);
  transition: background 0.15s;
}
.rubric-list-item:last-child { border-bottom: none; }
.rubric-list-item:hover { background: var(--bg-surface); }
.rubric-list-item.active { background: rgba(14,165,233,0.06); }
.rubric-list-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 2px;
}
.rubric-list-name {
  font-weight: 500;
  font-size: 0.88rem;
  color: var(--text-primary);
}
.rubric-list-meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.rubric-list-actions {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

/* Eval run controls */

/* Modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: var(--space-4);
}
.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 680px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);
  position: relative;
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.modal-header h3 {
  margin: 0;
  font-size: 1rem;
}
.modal-body {
  padding: var(--space-4);
}
.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

/* Form elements */
.form-group {
  margin-bottom: var(--space-3);
}
.form-group label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.form-input {
  width: 100%;
  padding: var(--space-2);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.85rem;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.15);
}
textarea.form-input {
  resize: vertical;
}

/* Dimension editor rows */
.dim-editor-row {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  position: relative;
}
.dim-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr 0.6fr;
  gap: var(--space-2);
}
.dim-remove-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  color: var(--color-error);
  font-size: 1.1rem;
}

/* Badge primary */
.badge-primary {
  background: rgba(14,165,233,0.15);
  color: var(--color-primary);
}

/* ── AGENT TAB BAR ── */


/* ── AGENT RUBRIC PANELS (Evaluations) ── */
.agent-rubric-panel {
  margin-bottom: var(--space-4);
}

.agent-rubric-panel .dimension-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-3);
  padding: var(--space-3);
}

/* ── SPECTRAL SCAN ── */
.scan-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--color-primary);
}
.scan-hero-text h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.scan-hero-text p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 50ch;
}
.scan-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Pipeline visualization */
.scan-pipeline {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  margin-bottom: var(--space-6);
  padding: var(--space-6) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

.pipeline-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  min-width: 120px;
  position: relative;
}
.stage-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.stage-icon svg {
  width: 22px;
  height: 22px;
  color: var(--color-text-faint);
  transition: color 0.4s;
}
.stage-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
  transition: color 0.4s;
}
.stage-detail {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-align: center;
  max-width: 140px;
  line-height: 1.4;
  min-height: 2.8em;
  transition: color 0.3s;
}

/* Pipeline connectors */
.pipeline-connector {
  display: flex;
  align-items: center;
  padding-top: 12px; /* align with icon center */
  min-width: 48px;
  flex: 1;
  max-width: 80px;
}
.connector-line {
  height: 2px;
  flex: 1;
  background: var(--color-border);
  border-radius: 1px;
  transition: background 0.4s;
}

/* Stage states */
.pipeline-stage.completed .stage-icon {
  border-color: var(--color-success);
  background: var(--color-success-light);
}
.pipeline-stage.completed .stage-icon svg { color: var(--color-success); }
.pipeline-stage.completed .stage-label { color: var(--color-success); }
.pipeline-stage.completed .stage-detail { color: var(--color-text-muted); }
.pipeline-stage.completed + .pipeline-connector .connector-line {
  background: var(--color-success);
}

.pipeline-stage.active .stage-icon {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  animation: pulse-ring 1.8s ease-in-out infinite;
}
.pipeline-stage.active .stage-icon svg { color: var(--color-primary); }
.pipeline-stage.active .stage-label { color: var(--color-primary); }
.pipeline-stage.active .stage-detail { color: var(--color-text); }

.pipeline-stage.failed .stage-icon {
  border-color: var(--color-error);
  background: var(--color-error-light);
}
.pipeline-stage.failed .stage-icon svg { color: var(--color-error); }
.pipeline-stage.failed .stage-label { color: var(--color-error); }

@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(14,165,233,0.35); }
  70% { box-shadow: 0 0 0 10px rgba(14,165,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}

/* Go/No-Go badges */
.verdict-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.verdict-badge.go {
  background: var(--color-success-light);
  color: var(--color-success);
}
.verdict-badge.caution {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.verdict-badge.no-go {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* Scan results cards */
.scan-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-6);
}
.scan-result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.scan-result-card h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Score comparison */
.score-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}
.score-block {
  text-align: center;
}
.score-block .score-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}
.score-block .score-value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
}
.score-block .score-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.score-vs {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-faint);
}
.score-delta-display {
  text-align: center;
}
.score-delta-display .delta-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-mono);
}
.delta-value.positive { color: var(--color-success); }
.delta-value.negative { color: var(--color-error); }
.delta-value.neutral { color: var(--color-text-faint); }

/* Changes list */
.changes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.changes-list li {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
  padding-left: var(--space-3);
  position: relative;
}
.changes-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  transform: translateY(-50%);
}
.changes-list li:last-child { border-bottom: none; }

/* Failure cluster mini cards in scan results */

/* Scan error */
.scan-error {
  padding: var(--space-5);
  background: var(--color-error-light);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}
.scan-error h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-error);
  margin-bottom: var(--space-2);
}
.scan-error p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 1024px) {
  .scan-results-grid { grid-template-columns: 1fr; }
  .score-comparison { flex-direction: column; gap: var(--space-4); }
}

@media (max-width: 768px) {
  .scan-hero { flex-direction: column; }
  .scan-pipeline { flex-wrap: wrap; justify-content: center; }
  .pipeline-connector { min-width: 24px; max-width: 40px; }
  .dim-editor-grid {
    grid-template-columns: 1fr 1fr;
  }
  .agent-rubric-panel .dimension-list {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════
   SPECTRAL REBUILD — VISION SPEC OVERRIDES
   ═══════════════════════════════════════════════ */

/* ── VISION SPEC COLORS (dark mode default) ── */
[data-theme="dark"],
:root {
  --sp-bg:            #0F1117;
  --sp-surface:       #1A1D27;
  --sp-border:        #2A2D3A;
  --sp-primary:       #4F7EF7;
  --sp-primary-glow:  rgba(79,126,247,0.18);
  --sp-success:       #22C55E;
  --sp-success-glow:  rgba(34,197,94,0.15);
  --sp-warning:       #F59E0B;
  --sp-warning-glow:  rgba(245,158,11,0.15);
  --sp-critical:      #EF4444;
  --sp-critical-glow: rgba(239,68,68,0.15);
  --sp-text:          #F1F5F9;
  --sp-text-secondary:#94A3B8;
  --sp-text-muted:    #475569;

  /* Override existing tokens to match spec */
  --color-bg:             #0F1117;
  --color-surface:        #1A1D27;
  --color-surface-2:      #1E2130;
  --color-surface-offset: #252836;
  --color-border:         #2A2D3A;
  --color-text:           #F1F5F9;
  --color-text-muted:     #94A3B8;
  --color-text-faint:     #475569;
  --color-primary:        #4F7EF7;
  --color-primary-hover:  #6B93F8;
  --color-primary-light:  rgba(79,126,247,0.12);
  --color-success:        #22C55E;
  --color-success-light:  rgba(34,197,94,0.12);
  --color-warning:        #F59E0B;
  --color-warning-light:  rgba(245,158,11,0.12);
  --color-error:          #EF4444;
  --color-error-light:    rgba(239,68,68,0.12);
}

/* ── FONTS: Override DM Sans → Inter + JetBrains Mono ── */
:root {
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
}
body { font-family: var(--font-body); }
.mono { font-family: var(--font-mono) !important; }

/* ── SIDEBAR NAV SECTION HEADERS & DIVIDERS ── */
.nav-item { font-family: var(--font-body); }

/* ── PULSING DOT ── */
.pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--dot-color, #4F7EF7);
  flex-shrink: 0;
  animation: pulse-dot-anim 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 var(--dot-color, #4F7EF7);
}
@keyframes pulse-dot-anim {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-color, #4F7EF7) 40%, transparent); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── CONTROL PLANE: WORKFLOW ROWS ── */
.workflow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--sp-border);
  transition: background var(--transition-interactive);
}
.workflow-row:last-child { border-bottom: none; }
.workflow-row:hover { background: var(--color-primary-light); }

.workflow-row-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.wf-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wf-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text);
}
.wf-meta {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.workflow-row-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}
.wf-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.wf-bar {
  width: 80px;
  height: 4px;
  background: var(--sp-border);
  border-radius: 2px;
  overflow: hidden;
}
.wf-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.16,1,0.3,1);
}
.wf-accuracy { font-size: var(--text-xs); color: var(--sp-text); width: 44px; text-align: right; }
.wf-delta { font-size: var(--text-xs); width: 52px; text-align: right; }
.wf-status-badge { font-size: var(--text-xs); font-weight: 500; width: 64px; text-align: right; }

/* ── CONTROL PLANE: ACTIVE JOBS ── */
.job-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--sp-border);
}
.job-row:last-child { border-bottom: none; }
.job-info { display: flex; flex-direction: column; gap: 2px; }
.job-name { font-size: var(--text-sm); font-weight: 500; color: var(--sp-text); }
.job-detail { font-size: var(--text-xs); color: var(--sp-text-muted); }

/* ── WORKFLOW OVERVIEW HEADER ── */
.wo-title h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: var(--space-1);
}
.wo-subtitle {
  font-size: var(--text-sm);
  color: var(--sp-text-muted);
}

/* ── WORKFLOW OVERVIEW BODY GRID ── */
@media (max-width: 1200px) {
}

/* ── ACTIVITY FEED ── */
.activity-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--sp-border);
}
.activity-row:last-child { border-bottom: none; }
.activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.activity-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-event {
  font-size: var(--text-sm);
  color: var(--sp-text);
  line-height: 1.4;
}
.activity-time {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}

/* ── FAILURES: TWO-COLUMN ── */
.failure-two-col {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
@media (max-width: 1024px) {
  .failure-two-col { grid-template-columns: 1fr; }
}
.failure-cluster-list {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.failure-cluster-item {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sp-border);
  cursor: pointer;
  transition: background var(--transition-interactive);
}
.failure-cluster-item:last-child { border-bottom: none; }
.failure-cluster-item:hover { background: var(--color-primary-light); }
.failure-cluster-item.active { background: var(--color-primary-light); border-left: 2px solid var(--sp-primary); }
.fci-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.fci-name { font-size: var(--text-sm); font-weight: 600; color: var(--sp-text); }
.fci-pct { font-size: var(--text-xs); font-weight: 600; }
.fci-bar { height: 3px; background: var(--sp-border); border-radius: 2px; overflow: hidden; }
.fci-bar-fill { height: 100%; border-radius: 2px; transition: width 0.8s cubic-bezier(0.16,1,0.3,1); }

.failure-detail-panel {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-lg);
  min-height: 200px;
}
.failure-detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--sp-text-muted);
  font-size: var(--text-sm);
}
.failure-detail-content { padding: var(--space-5); }
.fd-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: var(--space-5); flex-wrap: wrap; gap: var(--space-2); }
.fd-header h3 { font-size: var(--text-base); font-weight: 700; color: var(--sp-text); }
.fd-meta { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.fd-section { margin-bottom: var(--space-4); }
.fd-section-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.fd-section p { font-size: var(--text-sm); color: var(--sp-text-secondary); line-height: 1.6; }
.fd-actions { margin-top: var(--space-4); }

/* ── EXPERIMENTS ── */
.objective-function {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  flex-wrap: wrap;
}
.obj-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.obj-sep { color: var(--sp-border); }
.obj-weight { color: var(--sp-text-secondary); }
.obj-weight-warn { color: var(--sp-warning); }
.obj-weight-crit { color: var(--sp-critical); }

.exp-status-icon {
  font-size: 14px;
  width: 18px;
  text-align: center;
}
.exp-status-running { color: var(--sp-warning); animation: pulse-text 1.5s ease-in-out infinite; }
@keyframes pulse-text {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}
.experiment-card.selected { border-color: var(--sp-primary); background: var(--color-primary-light); }
.experiment-meta { font-size: var(--text-xs); color: var(--sp-text-muted); margin-top: var(--space-2); }

.exp-detail-objective {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  flex-wrap: wrap;
}
.data-table tbody tr.winner-row {
  border-left: 3px solid var(--sp-warning);
  background: var(--color-warning-light);
}

/* ── PROMOTION GATE ── */
.promotion-criteria-card { margin-bottom: var(--space-4); }
.criteria-list { padding: var(--space-2) var(--space-5); }
.criteria-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sp-border);
}
.criteria-row:last-child { border-bottom: none; }
.criteria-check {
  font-size: var(--text-sm);
  font-weight: 700;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}
.criteria-check.pass { color: var(--sp-success); }
.criteria-check.fail { color: var(--sp-critical); }
.criteria-label { font-size: var(--text-sm); color: var(--sp-text); flex: 1; }
.criteria-value { font-size: var(--text-xs); color: var(--sp-text-muted); width: 64px; text-align: right; }

.promotion-deploy-card { margin-top: var(--space-4); }
.deploy-path {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  flex-wrap: wrap;
}
.deploy-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-md);
}
.deploy-step-final { border-color: var(--sp-success); background: var(--sp-success-glow); }
.deploy-step-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sp-primary);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.deploy-step-info { display: flex; flex-direction: column; gap: 2px; }
.deploy-step-name { font-size: var(--text-sm); font-weight: 600; color: var(--sp-text); }
.deploy-step-detail { font-size: var(--text-xs); color: var(--sp-text-muted); }
.deploy-arrow { font-size: var(--text-lg); color: var(--sp-text-muted); }
.rollback-note {
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  border-top: 1px solid var(--sp-border);
}
.btn-disabled-criteria { opacity: 0.6; }

/* ── DELTA ITEMS: fix class names ── */
.delta-item.delta-positive { color: var(--sp-success); }
.delta-item.delta-negative { color: var(--sp-critical); }

/* ── SPECTRAL FINDING CARD ── */
.finding-card {
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-4);
  position: relative;
  box-shadow: 0 0 24px rgba(79,126,247,0.08);
}
.finding-header { margin-bottom: var(--space-3); }
.finding-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.finding-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sp-primary);
  text-transform: uppercase;
}
.finding-headline {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--sp-text);
  line-height: 1.3;
}
.finding-narrative {
  font-size: var(--text-sm);
  color: var(--sp-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.finding-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sp-border);
}
.finding-detail-item { display: flex; flex-direction: column; gap: var(--space-1); }
.finding-detail-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.finding-detail-value {
  font-size: var(--text-sm);
  color: var(--sp-text);
  line-height: 1.4;
}
@media (max-width: 640px) {
  .finding-details { grid-template-columns: 1fr; }
}

/* ── RUBRIC SCORECARD ── */
.rubric-scorecard-grid {
  padding: var(--space-4) var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.scorecard-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.scorecard-dim {
  font-size: var(--text-sm);
  color: var(--sp-text);
  width: 180px;
  flex-shrink: 0;
}
.scorecard-bar-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}
.scorecard-bar {
  flex: 1;
  height: 6px;
  background: var(--sp-border);
  border-radius: 3px;
  overflow: hidden;
}
.scorecard-bar-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
}
.scorecard-pct { font-size: var(--text-xs); width: 40px; text-align: right; color: var(--sp-text); }

/* ── RUBRIC LIBRARY ── */
.rubric-lib-group { margin-bottom: var(--space-6); }
.rubric-lib-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.rubric-lib-agent {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--sp-text-muted);
  text-transform: uppercase;
}
.rubric-lib-count { font-size: var(--text-xs); color: var(--sp-text-muted); }
.rubric-lib-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.rubric-lib-card {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: border-color var(--transition-interactive);
}
.rubric-lib-card:hover { border-color: var(--sp-primary); }
.rlc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.rlc-name { font-size: var(--text-sm); font-weight: 600; color: var(--sp-text); }
.rlc-desc { font-size: var(--text-xs); color: var(--sp-text-muted); line-height: 1.5; margin-bottom: var(--space-3); }
.rlc-meta { font-size: var(--text-xs); color: var(--sp-text-muted); margin-bottom: var(--space-3); }
.rlc-dims { display: flex; flex-wrap: wrap; gap: var(--space-1); }

/* ── KPI CARD VALUES: use JetBrains Mono ── */
.kpi-value { font-family: var(--font-mono); }

/* ── CASE EXPLORER fix ── */
#caseExplorerCard { margin-top: 0; }

/* ── SCAN PIPELINE: update pulse color to Spectral blue ── */
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(79,126,247,0.35); }
  70%  { box-shadow: 0 0 0 10px rgba(79,126,247,0); }
  100% { box-shadow: 0 0 0 0 rgba(79,126,247,0); }
}
.pipeline-stage.active .stage-icon {
  border-color: var(--sp-primary);
  background: rgba(79,126,247,0.12);
}
.pipeline-stage.active .stage-icon svg { color: var(--sp-primary); }
.pipeline-stage.active .stage-label   { color: var(--sp-primary); }

/* ── MODAL: use correct background vars ── */
.modal { background: var(--sp-surface); border-color: var(--sp-border); }
.modal-header { border-color: var(--sp-border); }
.modal-footer { border-color: var(--sp-border); }

/* ── FORM INPUTS: correct background ── */
.form-input {
  background: var(--color-surface-2);
  border-color: var(--sp-border);
  color: var(--sp-text);
}
.form-input:focus { border-color: var(--sp-primary); box-shadow: 0 0 0 2px rgba(79,126,247,0.15); }

/* ── DIM EDITOR ROW ── */
.dim-editor-row { background: var(--color-surface-2); border-color: var(--sp-border); }

/* ── RESPONSIVE: stacks for smaller screens ── */
@media (max-width: 768px) {
  .workflow-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
  .workflow-row-right { width: 100%; }
  .wf-bar { width: 100px; }
  .rubric-lib-cards { grid-template-columns: 1fr; }
  .deploy-path { flex-direction: column; align-items: flex-start; }
  .deploy-arrow { transform: rotate(90deg); }
}

/* ── CONNECT SCREEN ── */

/* Status bar at top */

/* Tab group */
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--sp-text-muted);
  cursor: pointer;
  transition: color var(--transition-interactive), border-color var(--transition-interactive);
  margin-bottom: -1px;
  font-family: var(--font-body);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-btn:hover { color: var(--sp-text); }
.tab-btn.active {
  color: var(--sp-primary);
  border-bottom-color: var(--sp-primary);
}

/* Connect card */
.connect-desc {
  font-size: var(--text-sm);
  color: var(--sp-text-muted);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.connect-desc code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface-offset);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  color: var(--sp-primary);
}

/* Upload zone */
.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-10) var(--space-6);
  border: 2px dashed var(--sp-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
  margin-bottom: var(--space-5);
  user-select: none;
}
.upload-zone:hover,
.upload-zone:focus {
  border-color: var(--sp-primary);
  background: rgba(79, 126, 247, 0.04);
  outline: none;
}
.upload-zone.dragover {
  border-color: var(--sp-primary);
  background: rgba(79, 126, 247, 0.08);
}
.upload-zone-label {
  font-size: var(--text-sm);
  color: var(--sp-text);
  margin: 0 0 var(--space-1);
}
.upload-zone-link {
  color: var(--sp-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.upload-zone-hint {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin: 0;
}

/* Format example */

/* Code block */
.code-block {
  background: #0B1221;
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: #A9C2E8;
  overflow-x: auto;
  white-space: pre;
  line-height: 1.65;
  margin: 0;
}
[data-theme="light"] .code-block {
  background: #1A1D27;
  color: #A9C2E8;
}

/* Upload filename + result */
.connect-upload-filename {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.connect-upload-result { margin-top: var(--space-4); }
.connect-upload-success {
  background: var(--color-success-light);
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--sp-text);
  line-height: 1.6;
}
.connect-upload-hint {
  color: var(--sp-text-muted);
  font-size: var(--text-xs);
}
.connect-upload-link {
  color: var(--sp-primary);
  text-decoration: none;
  font-size: var(--text-xs);
  font-weight: 500;
}
.connect-upload-link:hover { text-decoration: underline; }
.connect-upload-error {
  background: var(--color-error-light);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-error);
}
.connect-upload-status {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}

/* API key display */

/* Webhook note */

/* Responsive */
@media (max-width: 768px) {
  .tab-btn { padding: var(--space-2) var(--space-3); }
}

/* ─────────────────────────────────────────────────
   NEW FEATURES: Schedules, Safety, Intervention Log, Reliability
   ───────────────────────────────────────────────── */

/* ── SCHEDULES SCREEN ── */

/* ── SAFETY SCREEN ── */
.safety-report {
  background: var(--sp-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.safety-dimension {
  background: var(--color-surface);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.safety-dim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.safety-dim-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text);
}
.safety-dim-desc {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-2);
}
.safety-pass {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
  background: var(--color-success-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.safety-fail {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-error);
  background: var(--color-error-light);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.safety-issue-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.safety-issue-list li {
  font-size: var(--text-xs);
  color: var(--color-error);
  padding-left: var(--space-3);
  position: relative;
  line-height: 1.5;
}
.safety-issue-list li::before {
  content: '✗';
  position: absolute;
  left: 0;
  color: var(--color-error);
  font-size: 10px;
}

/* ── INTERVENTION LOG ── */

/* ── RELIABILITY CARD ── */
.reliability-card {
  border-left: 2px solid var(--sp-primary) !important;
}
.reliability-bar-wrap {
  margin-top: var(--space-2);
}
.reliability-bar {
  height: 4px;
  background: var(--sp-border);
  border-radius: 2px;
  overflow: hidden;
  width: 100%;
}
.reliability-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: var(--sp-primary);
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reliability-score-display {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.reliability-score-display .kpi-value {
  font-size: var(--text-lg);
}

/* ── RELIABILITY BREAKDOWN ── */
.reliability-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sp-border);
}
.reliability-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.reliability-step-name {
  color: var(--sp-text-muted);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── CANDIDATE LIST (tournament) ── */
.candidate-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.candidate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-md);
}
.candidate-name {
  font-size: var(--text-sm);
  color: var(--sp-text);
  font-weight: 500;
}
.candidate-score {
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: var(--font-mono);
}

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

/* ── META-IMPROVEMENT SCREEN ── */
@media (max-width: 1100px) {
}
@media (max-width: 640px) {
}

.meta-two-col {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5);
  margin-top: var(--space-5);
}

.chart-subtitle {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin: calc(-1 * var(--space-2)) 0 var(--space-3);
}

/* Convergence Stats */
.meta-convergence-stats {
  display: flex;
  gap: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sp-border);
  margin-top: var(--space-4);
}
.conv-stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.conv-stat-label {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.conv-stat-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--sp-text);
}

/* Strategy Leaderboard */
.meta-strategy-card {
  max-height: 460px;
  overflow-y: auto;
}
.strat-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sp-border);
  transition: background 0.15s;
}
.strat-row:last-child { border-bottom: none; }
.strat-row:hover { background: var(--sp-surface-hover); }

.strat-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--sp-bg-tertiary);
  color: var(--sp-text-muted);
  flex-shrink: 0;
}
.strat-rank-gold {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
  border: 1px solid rgba(245, 158, 11, 0.3);
}
.strat-rank-silver {
  background: rgba(139, 143, 163, 0.15);
  color: #8B8FA3;
  border: 1px solid rgba(139, 143, 163, 0.3);
}
.strat-rank-bronze {
  background: rgba(180, 120, 60, 0.15);
  color: #C88B4A;
  border: 1px solid rgba(180, 120, 60, 0.3);
}

.strat-info { flex: 1; min-width: 0; }
.strat-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text);
  text-transform: capitalize;
}
.strat-desc {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.strat-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.strat-elo {
  font-size: var(--text-base);
  font-weight: 700;
}
.strat-meta {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  white-space: nowrap;
}

/* Rubric Health */
.table-card-desc {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  padding: 0 var(--space-4) var(--space-3);
  margin-top: calc(-1 * var(--space-2));
}
.rubric-health-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-4);
}
.rh-item {
  padding: var(--space-2) var(--space-3);
  background: var(--sp-bg-tertiary);
  border-radius: var(--radius-md);
}
.rh-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
}
.rh-dim {
  font-size: var(--text-sm);
  color: var(--sp-text);
  font-weight: 500;
  text-transform: capitalize;
}
.rh-corr {
  font-size: var(--text-sm);
  font-weight: 600;
}
.rh-bar {
  height: 4px;
  background: var(--sp-border);
  border-radius: 2px;
  margin-bottom: var(--space-1);
}
.rh-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.rh-meta {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}

/* Rubric Mutations */
.mut-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--sp-border);
}
.mut-row:last-child { border-bottom: none; }
.mut-icon {
  font-size: 18px;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
}
.mut-info { flex: 1; min-width: 0; }
.mut-type {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text);
  text-transform: capitalize;
}
.mut-desc {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.mut-reason {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  font-style: italic;
  margin-top: 2px;
}
.mut-status { flex-shrink: 0; }
.mut-corr {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}

/* Outcome Coverage */
.outcome-card {
  padding: var(--space-3);
  background: var(--sp-bg-tertiary);
  border-radius: var(--radius-md);
  border: 1px solid var(--sp-border);
}
.outcome-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.outcome-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.outcome-type {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text);
  text-transform: capitalize;
  flex: 1;
}
.outcome-count {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--sp-text);
}
.outcome-sources {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}

/* Layer Chip (Improvement Log) */
.layer-chip {
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  text-transform: capitalize;
}
.meta-log-desc {
  max-width: 340px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ENTERPRISE POLISH & NEW SCREENS — v2
   ═══════════════════════════════════════════════════════════════ */

/* ── SCREEN TRANSITIONS ── */
.screen {
  animation: none;
  opacity: 1;
}
.screen.active {
  display: block;
  animation: screenFadeIn 200ms ease forwards;
}
@keyframes screenFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── ENHANCED TABLE STRIPING & HOVER ── */
.data-table tbody tr:nth-child(even) {
  background: rgba(255,255,255,0.018);
}
[data-theme="light"] .data-table tbody tr:nth-child(even) {
  background: rgba(15,23,42,0.025);
}
.data-table tbody tr:hover {
  background: var(--color-primary-light) !important;
  cursor: pointer;
}

/* ── CARD SHADOW REFINEMENTS ── */
.kpi-card {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive), transform var(--transition-interactive);
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.table-card {
  box-shadow: var(--shadow-sm);
}
.chart-card {
  box-shadow: var(--shadow-sm);
}

/* ── TOAST NOTIFICATIONS ── */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  pointer-events: all;
  min-width: 280px;
  max-width: 420px;
  animation: toastIn 250ms cubic-bezier(0.16,1,0.3,1) forwards;
}
.toast.toast-exit {
  animation: toastOut 200ms ease forwards;
}
.toast-icon { font-size: 16px; flex-shrink: 0; }
.toast-close {
  margin-left: auto;
  padding: 0 var(--space-1);
  font-size: 16px;
  color: var(--color-text-faint);
  background: none;
  border: none;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.toast-close:hover { color: var(--color-text); }
@keyframes toastIn {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(24px); }
}

/* ── WORKFLOW SELECTOR IN HEADER ── */

/* ── MANAGE WORKFLOWS SCREEN ── */
.manage-wf-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  transition: border-color var(--transition-interactive);
}
.manage-wf-card:hover { border-color: var(--color-primary); }
.manage-wf-info { flex: 1; min-width: 0; }
.manage-wf-name { font-size: var(--text-sm); font-weight: 600; color: var(--color-text); }
.manage-wf-meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }
.manage-wf-count {
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Create workflow form */
@media (max-width: 768px) {
}

/* ── SETTINGS SCREEN ── */
.settings-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.settings-checkbox-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
}
.settings-checkbox-item:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.settings-checkbox-item input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
  cursor: pointer;
}
.settings-checkbox-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.settings-checkbox-desc {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: 1px;
}
#settingsSaveStatus {
  font-size: var(--text-sm);
}

/* ── SCAN MODE SELECTOR ── */
.scan-mode-group {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.scan-mode-option {
  position: relative;
}
.scan-mode-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.scan-mode-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-interactive), background var(--transition-interactive);
  min-width: 130px;
}
.scan-mode-option input[type="radio"]:checked + .scan-mode-label {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}
.scan-mode-label:hover {
  border-color: var(--color-primary);
}
.scan-mode-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.scan-mode-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}
.scan-mode-time {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: var(--font-mono);
  margin-top: var(--space-1);
}

/* ── EXEC SUMMARY CARD ── */
.exec-summary-card {
  background: linear-gradient(135deg, rgba(79,126,247,0.10) 0%, rgba(79,126,247,0.04) 100%);
  border: 1px solid rgba(79,126,247,0.25);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
[data-theme="light"] .exec-summary-card {
  background: linear-gradient(135deg, rgba(79,126,247,0.07) 0%, rgba(79,126,247,0.02) 100%);
}
.exec-summary-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.exec-summary-tag {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  text-transform: uppercase;
}
.exec-summary-narrative {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.exec-summary-cost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
}
.exec-cost-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.exec-cost-value {
  font-size: var(--text-base);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text);
}
.exec-summary-cost-grid {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
}
.exec-cost-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  flex: 1;
}
.cost-negative {
  color: var(--color-error) !important;
}
.cost-positive {
  color: var(--color-success) !important;
}

/* ── BUSINESS OUTCOMES CARD ── */
.business-outcomes-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.business-outcomes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.business-outcomes-header h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.outcomes-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.outcome-metric-item {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}
.outcome-metric-label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.outcome-metric-value {
  font-size: var(--text-lg);
  font-weight: 700;
  font-family: var(--font-mono);
  line-height: 1.1;
}
.directional-alignment {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.directional-alignment strong { color: var(--color-text); }

/* ── SAMPLE SIZE WARNING BANNER ── */
.sample-size-warning {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: rgba(245,158,11,0.1);
  border: 1px solid rgba(245,158,11,0.3);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-warning);
  line-height: 1.5;
}
.sample-size-warning svg {
  flex-shrink: 0;
  color: var(--color-warning);
}
.sample-size-warning strong { font-weight: 600; }

/* ── PDF DOWNLOAD BUTTON STATE ── */
.btn-pdf {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-interactive);
  white-space: nowrap;
  text-decoration: none;
}
.btn-pdf:hover:not(:disabled) {
  background: var(--color-surface-offset);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-pdf:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── NAV: SETTINGS ITEM ── */

/* ── WORKFLOW SELECTOR SIDEBAR ── */
.sidebar-workflow-select {
  padding: var(--space-3) var(--space-3) var(--space-1);
}
.sidebar-workflow-select .wf-sel-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--sp-text-muted);
  text-transform: uppercase;
  padding: 0 var(--space-1) var(--space-1);
  display: block;
}
.sidebar-workflow-select select {
  width: 100%;
  appearance: none;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-7) var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-text);
  cursor: pointer;
  outline: none;
  transition: border-color var(--transition-interactive);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394A3B8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.sidebar-workflow-select select:focus { border-color: var(--color-primary); }

/* ── SCAN FORM REFINEMENTS ── */
.scan-hero-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex-shrink: 0;
}
.scan-mode-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.scan-hero-actions-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* ── ENHANCED HEADER FOR MANAGE WORKFLOWS ── */

/* ── MAIN HEADER: WORKFLOW SELECTOR IN HEADER ACTIONS ── */

/* ── SPINNER OVERLAY FOR DATA SCREENS ── */
.loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-10);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}
.loading-overlay .spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .outcomes-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .scan-mode-group { flex-direction: column; }
}

/* ── CASE STUDY SCREEN (Track 4.13) ── */

/* Proof Layout: Before | Arrow+Mutations | After */
.cs-proof-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: start;
  margin-bottom: var(--space-6);
}
@media (max-width: 900px) {
  .cs-proof-layout {
    grid-template-columns: 1fr;
  }
}
.cs-state-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.cs-state-card.cs-before { border-left: 3px solid var(--color-error); }
.cs-state-card.cs-after  { border-left: 3px solid var(--color-success); }
.cs-state-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.cs-score-display {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.cs-score-num {
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}
.cs-score-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.cs-config-name {
  color: var(--color-text-faint);
  font-size: var(--text-xs);
}
.cs-clusters-title {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.cs-cluster-bars { display: flex; flex-direction: column; gap: var(--space-2); }
.cs-cluster-bar-row {
  display: grid;
  grid-template-columns: 1fr 80px 36px;
  align-items: center;
  gap: var(--space-2);
}
.cs-cluster-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-cluster-bar {
  height: 6px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.cs-cluster-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
}
.cs-cluster-pct { font-size: var(--text-xs); text-align: right; }
.cs-dominant {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: rgba(239,68,68,0.08);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.cs-dominant-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
}
.cs-dominant-name {
  font-size: var(--text-xs);
  color: var(--color-text);
  flex: 1;
}
.cs-dominant-pct { font-size: var(--text-xs); color: var(--color-error); }

/* Transition column */
.cs-transition {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-8);
}
.cs-transition-arrow {
  font-size: 2rem;
  font-weight: 300;
  color: var(--color-primary);
  line-height: 1;
}
.cs-mutation-card {
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  min-width: 200px;
  max-width: 240px;
}
.cs-mutation-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.cs-mutation-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.cs-changes-list {
  padding-left: var(--space-4);
  margin: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.cs-changes-list li { margin-bottom: var(--space-1); }

/* After state specifics */
.cs-delta-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-success-light);
  border-radius: var(--radius-md);
}
.cs-delta-value { font-size: var(--text-lg); font-weight: 700; }
.cs-delta-dir { font-size: var(--text-sm); color: var(--color-text-muted); }
.cs-resolved-tags {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-3);
}
.cs-resolved-tag {
  font-size: var(--text-xs);
  color: var(--color-success);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.cs-resolved-icon { font-weight: 700; }

/* Validation section */
.cs-validation {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.cs-validation-item {
  flex: 1;
  min-width: 160px;
}
.cs-val-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
}
.cs-val-grid { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.cs-val-metric { display: flex; flex-direction: column; gap: var(--space-1); }
.cs-val-metric-label { font-size: var(--text-xs); color: var(--color-text-faint); }
.cs-val-metric-value { font-size: var(--text-base); font-weight: 700; }
.cs-holdout-row { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.cs-verdict-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.verdict-badge-lg {
  font-size: var(--text-base) !important;
  padding: var(--space-2) var(--space-5) !important;
  letter-spacing: 0.12em;
}
.cs-recommendation {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  flex: 1;
  line-height: 1.5;
}

/* Timeline */
.cs-timeline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
}
.cs-timeline-title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.cs-timeline-track {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}
.cs-timeline-point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  cursor: default;
  flex-shrink: 0;
}
.cs-timeline-point.active .cs-timeline-dot {
  background: var(--color-primary);
  box-shadow: 0 0 8px var(--color-primary);
  transform: scale(1.4);
}
.cs-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
  transition: all var(--transition-interactive);
}
.cs-timeline-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.cs-tl-id { font-size: 10px; color: var(--color-text-faint); }
.cs-tl-score { font-size: var(--text-xs); }

/* ── TOPOLOGY SCREEN (Track 4.14) ── */
.topo-nodes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.topo-node-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: border-color var(--transition-interactive);
}
.topo-node-card.topo-bottleneck {
  border-color: var(--color-error);
  box-shadow: 0 0 12px rgba(239,68,68,0.15);
}
.topo-node-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.topo-node-name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.topo-node-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.topo-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.topo-metric-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-faint);
}
.topo-metric-val { font-size: var(--text-base); font-weight: 700; }
.topo-depends {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-top: var(--space-1);
}
.topo-edges-card { margin-bottom: var(--space-5); }
.topo-advisory-card {
  background: var(--color-surface);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-top: var(--space-5);
}
.topo-advisory-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
  margin-bottom: var(--space-3);
}
.topo-advisory-list {
  padding-left: var(--space-5);
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary, var(--color-text-muted));
  line-height: 1.8;
}
.topo-advisory-list li { margin-bottom: var(--space-2); }

/* badge-primary utility */
.badge-primary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}

/* ── VALIDATION SUITE ── */
.validate-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  gap: var(--space-4);
  flex-wrap: wrap;
}
.validate-running {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--sp-text-secondary);
  font-size: var(--text-sm);
}
.validate-report { display: flex; flex-direction: column; gap: var(--space-5); }
.validate-overall {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--sp-border);
}
.validate-overall.validate-pass {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.25);
}
.validate-overall.validate-pass .validate-overall-icon { color: var(--color-success); }
.validate-overall.validate-fail {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.25);
}
.validate-overall.validate-fail .validate-overall-icon { color: var(--color-error); }
.validate-overall.validate-inconclusive {
  background: rgba(245, 158, 11, 0.06);
  border-color: rgba(245, 158, 11, 0.25);
}
.validate-overall.validate-inconclusive .validate-overall-icon { color: var(--color-warning); }
.validate-overall-icon { flex-shrink: 0; }
.validate-overall-label {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.05em;
}
.validate-overall-meta {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin-top: var(--space-1);
}
.validate-scenarios { display: flex; flex-direction: column; gap: var(--space-4); }
.validate-scenario-card {
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-card);
  overflow: hidden;
  transition: border-color 0.15s;
}
.validate-scenario-card.scenario-pass { border-left: 3px solid var(--color-success); }
.validate-scenario-card.scenario-fail { border-left: 3px solid var(--color-error); }
.validate-scenario-card.scenario-pending { border-left: 3px solid var(--sp-text-muted); }

.scenario-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--sp-border-subtle);
}
.scenario-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
}
.scenario-title-group { flex: 1; min-width: 0; }
.scenario-name { font-weight: 600; color: var(--color-text); font-size: var(--text-sm); }
.scenario-desc { font-size: var(--text-xs); color: var(--sp-text-muted); margin-top: 2px; }
.scenario-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  flex-shrink: 0;
  letter-spacing: 0.05em;
}
.scenario-badge.scenario-pass { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
.scenario-badge.scenario-fail { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }
.scenario-badge.scenario-pending { background: var(--sp-border-subtle); color: var(--sp-text-muted); }

.scenario-body { padding: var(--space-4) var(--space-5); }
.scenario-expected, .scenario-verdict {
  font-size: var(--text-xs);
  color: var(--sp-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-2);
}
.scenario-verdict { color: var(--color-text); }
.scenario-scores {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sp-border-subtle);
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.scenario-score-item .mono { font-weight: 600; }
.scenario-clusters {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.cluster-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--sp-border-subtle);
  color: var(--sp-text-secondary);
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.validate-timestamp {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  text-align: right;
  padding-top: var(--space-3);
}
.validate-empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
}

/* ── VISUAL CLUSTER MAP (scan report) ── */
.cluster-map { display: flex; flex-direction: column; gap: var(--space-4); }
.cluster-severity-bar {
  display: flex;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
  gap: 1px;
  background: var(--sp-border-subtle);
}
.cluster-severity-segment {
  height: 100%;
  transition: width 0.3s ease;
  min-width: 4px;
}
.cluster-severity-segment:first-child { border-radius: 4px 0 0 4px; }
.cluster-severity-segment:last-child { border-radius: 0 4px 4px 0; }

.cluster-map-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.cluster-map-card {
  display: flex;
  border: 1px solid var(--sp-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color 0.15s;
}
.cluster-map-card:hover { border-color: var(--sp-border); }
.cluster-map-indicator {
  width: 4px;
  flex-shrink: 0;
}
.cluster-map-content {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  min-width: 0;
}
.cluster-map-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cluster-map-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
}
.cluster-map-badges {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  flex-shrink: 0;
}
.cluster-severity-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cluster-map-pct {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  font-weight: 600;
}
.cluster-map-cause {
  font-size: var(--text-xs);
  color: var(--sp-text-secondary);
  line-height: 1.5;
}
.cluster-map-rec {
  font-size: var(--text-xs);
  color: var(--sp-text-secondary);
  line-height: 1.5;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--sp-border-subtle);
}
.cluster-map-agents {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}
.agent-tag {
  font-size: 10px;
  padding: 1px 6px;
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-radius: var(--radius-full);
  font-weight: 500;
}

/* ── CONTROL PLANE: BODY GRID (accuracy + activity) ── */
.cp-body-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-4);
  align-items: start;
  margin-top: var(--space-4);
}
@media (max-width: 1200px) {
  .cp-body-grid { grid-template-columns: 1fr; }
}

/* ── IMPORT TRACES: Collapsible <details> inside Spectral Scan ── */


/* ── TRACE DETAIL MODAL ── */
.trace-detail-section { margin-bottom: var(--space-4); }
.trace-detail-section h4 {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-2);
}
.trace-detail-meta {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.trace-scores-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.trace-score-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 13px;
}
.trace-score-label {
  color: var(--text-muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.trace-content-pre {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--space-3);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
  color: var(--text-primary);
}

/* ── QUICK ACTION BUTTONS ── */
.btn-xs {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
}
.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 150ms ease;
}
.btn-outline:hover {
  background: var(--surface-2);
  border-color: var(--accent);
  color: var(--accent);
}

/* ── CLICKABLE WORKFLOW ROWS ── */
.workflow-row[data-wf-name]:hover {
  background: var(--surface-2);
  border-color: var(--accent);
}
.workflow-row[data-wf-name]::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 150ms ease;
}
.workflow-row[data-wf-name]:hover::after {
  opacity: 1;
}
.workflow-row {
  position: relative;
}

/* ── FAIL ROW CLICKABLE ── */
#caseExplorerTable tr:hover td { background: var(--surface-2); }


/* ── EVAL SUMMARY STATS ── */
.eval-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.eval-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.eval-stat-value {
  font-size: var(--text-base);
  font-weight: 600;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.eval-stat-dim {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ── EVAL FILTER BAR ── */

/* ── EVAL PAGINATION ── */
.pagination-info {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ── HOLDOUT VALIDATION CARD ── */
.promotion-holdout-card {
  margin-bottom: var(--space-4);
}
.holdout-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-4);
}
.holdout-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.holdout-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.holdout-value {
  font-size: var(--text-lg);
  font-weight: 600;
}
.holdout-note {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  border-top: 1px solid var(--color-border);
}

/* ── SCENARIO CAUTION STATE ── */
.scenario-caution {
  border-color: var(--color-warning) !important;
}
.scenario-caution .scenario-badge {
  background: var(--color-warning-light);
  color: var(--color-warning);
}
.scenario-caution .scenario-num {
  background: var(--color-warning);
  color: var(--color-text-inverse);
}

/* ── EXPERIMENT HISTORY ── */
.exp-history-chart-wrap {
  padding: var(--space-4);
  height: 200px;
}

/* ── PRODUCT SCREENSHOT (LANDING) ── */
.dot { width: 10px; height: 10px; border-radius: 50%; }

/* ══════════════════════════════════════════════════════════════
   ONBOARD WORKFLOW WIZARD
   ══════════════════════════════════════════════════════════════ */

/* Stepper */
.onboard-stepper { margin-bottom: var(--space-6); }
.ob-stepper-track {
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  padding: var(--space-2) 0;
}
.ob-step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  min-width: 72px;
}
.ob-step-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--sp-text-muted, #64748b);
  background: var(--color-surface-2, #1e293b);
  border: 2px solid var(--color-border, #334155);
  transition: all 0.2s ease;
}
.ob-step-dot.ob-active {
  background: var(--color-primary, #3b82f6);
  border-color: var(--color-primary, #3b82f6);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.15);
}
.ob-step-dot.ob-done {
  background: var(--color-success, #22c55e);
  border-color: var(--color-success, #22c55e);
  color: #fff;
}
.ob-step-label {
  font-size: 11px;
  color: var(--sp-text-muted, #64748b);
  text-align: center;
  white-space: nowrap;
}
.ob-current .ob-step-label {
  color: var(--color-text, #e2e8f0);
  font-weight: 600;
}
.ob-step-line {
  flex: 1;
  height: 2px;
  min-width: 24px;
  background: var(--color-border, #334155);
  margin: 0 var(--space-1);
  margin-bottom: 20px;
  transition: background 0.2s ease;
}
.ob-step-line.ob-line-done {
  background: var(--color-success, #22c55e);
}

/* Cards */
.ob-card {
  background: var(--color-surface-2, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 12px;
  padding: var(--space-6);
  max-width: 640px;
}
.ob-card-title {
  font-size: var(--text-base, 16px);
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: var(--space-1);
}
.ob-card-desc {
  font-size: var(--text-sm, 14px);
  color: var(--sp-text-muted, #94a3b8);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}

/* Fields */
.ob-field { margin-bottom: var(--space-4); }
.ob-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.ob-label {
  display: block;
  font-size: var(--text-sm, 14px);
  font-weight: 500;
  color: var(--color-text, #e2e8f0);
  margin-bottom: var(--space-1);
}
.ob-req { color: var(--color-error, #ef4444); }
.ob-hint {
  display: block;
  font-size: 12px;
  color: var(--sp-text-muted, #64748b);
  margin-top: 4px;
}
.ob-input {
  width: 100%;
  padding: 8px 12px;
  font-size: var(--text-sm, 14px);
  color: var(--color-text, #e2e8f0);
  background: var(--color-surface-1, #0f172a);
  border: 1px solid var(--color-border, #334155);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}
.ob-input:focus {
  border-color: var(--color-primary, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.ob-textarea { resize: vertical; min-height: 60px; }
.ob-code { font-family: 'JetBrains Mono', monospace; font-size: 13px; }

/* Actions */
.ob-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.ob-skip { opacity: 0.7; }
.ob-skip:hover { opacity: 1; }

/* File Drop */
.ob-file-drop {
  border: 2px dashed var(--color-border, #334155);
  border-radius: 12px;
  padding: var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  color: var(--sp-text-muted, #64748b);
}
.ob-file-drop:hover, .ob-file-drop.ob-dragover {
  border-color: var(--color-primary, #3b82f6);
  background: rgba(59,130,246,0.05);
}
.ob-file-drop svg { margin: 0 auto var(--space-2); display: block; opacity: 0.5; }
.ob-file-drop p { font-size: var(--text-sm, 14px); margin: 0; }
.ob-file-name {
  font-size: var(--text-sm, 14px);
  color: var(--color-text, #e2e8f0);
  margin-top: var(--space-2);
}

/* Rubric blocks */
.ob-rubric-block {
  background: var(--color-surface-1, #0f172a);
  border: 1px solid var(--color-border, #334155);
  border-radius: 8px;
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.ob-rubric-agent {
  font-size: var(--text-sm, 14px);
  font-weight: 600;
  color: var(--color-primary, #3b82f6);
  margin-bottom: var(--space-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'JetBrains Mono', monospace;
}
.ob-dim-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.ob-dim-row .ob-input { flex: 1; }
.ob-dim-remove {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--color-border, #334155);
  border-radius: 6px;
  color: var(--sp-text-muted, #64748b);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ob-dim-remove:hover { color: var(--color-error, #ef4444); border-color: var(--color-error, #ef4444); }
.ob-add-dim {
  font-size: var(--text-sm, 14px);
  margin-top: var(--space-1);
}

/* Log */
.onboard-log {
  margin-top: var(--space-6);
  background: var(--color-surface-1, #0f172a);
  border: 1px solid var(--color-border, #334155);
  border-radius: 8px;
  padding: var(--space-4);
  max-height: 200px;
  overflow-y: auto;
}
.ob-log-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-size: 13px;
  padding: 3px 0;
  font-family: 'JetBrains Mono', monospace;
}
.ob-log-icon { font-size: 14px; flex-shrink: 0; }
.ob-log-ts { color: var(--sp-text-muted, #64748b); font-size: 11px; flex-shrink: 0; }

/* Complete */
.ob-complete { text-align: center; padding: var(--space-8) var(--space-4); }
.ob-complete-icon {
  color: var(--color-success, #22c55e);
  margin-bottom: var(--space-4);
}
.ob-complete-title {
  font-size: var(--text-lg, 20px);
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: var(--space-2);
}
.ob-summary {
  background: var(--color-surface-2, #1e293b);
  border: 1px solid var(--color-border, #334155);
  border-radius: 8px;
  padding: var(--space-4);
  margin: var(--space-4) auto;
  max-width: 400px;
  text-align: left;
}
.ob-summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-1) 0;
  font-size: var(--text-sm, 14px);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ob-summary-row:last-child { border-bottom: none; }
.ob-summary-label { color: var(--sp-text-muted, #94a3b8); }
.ob-summary-value { color: var(--color-text, #e2e8f0); font-weight: 500; }

/* Responsive */
@media (max-width: 640px) {
  .ob-field-row { grid-template-columns: 1fr; }
  .ob-dim-row { flex-wrap: wrap; }
  .ob-dim-row .ob-dim-weight { width: 100% !important; }
  .ob-stepper-track { gap: 0; }
  .ob-step-item { min-width: 56px; }
}

/* ═══════════════════════════════════════════════
   PRODUCT EXPERIENCE UX IMPROVEMENTS
   ═══════════════════════════════════════════════ */

/* ── Morning Briefing Banner ── */
.morning-briefing {
  background: var(--sp-surface, #1a1d27);
  border: 1px solid var(--sp-border, #2a2d3a);
  border-radius: 12px;
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  position: relative;
  overflow: hidden;
}
.morning-briefing::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 12px 0 0 12px;
}
.morning-briefing.verdict-go::before { background: var(--color-success, #22C55E); }
.morning-briefing.verdict-no-go::before { background: var(--sp-text-muted, #8B8FA3); }
.morning-briefing.verdict-caution::before { background: var(--color-warning, #F59E0B); }

.briefing-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.briefing-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--sp-text-muted);
}
.briefing-verdict {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 2px 10px;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.briefing-verdict.go { background: rgba(34,197,94,0.15); color: #22C55E; }
.briefing-verdict.no-go { background: rgba(139,143,163,0.15); color: #8B8FA3; }
.briefing-verdict.caution { background: rgba(245,158,11,0.15); color: #F59E0B; }

.briefing-narrative {
  font-size: var(--text-sm);
  color: var(--color-text, #e2e8f0);
  line-height: 1.7;
  margin-bottom: var(--space-3);
}
.briefing-score-row {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.briefing-score-item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.briefing-score-label {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.briefing-score-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
}
.briefing-cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.briefing-time {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin-top: var(--space-2);
}

/* ── Next Actions Grid ── */
.next-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.next-action-card {
  background: var(--sp-surface, #1a1d27);
  border: 1px solid var(--sp-border, #2a2d3a);
  border-radius: 8px;
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
  padding-left: calc(var(--space-4) + 4px);
}
.next-action-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 8px 0 0 8px;
}
.next-action-card:hover { border-color: var(--color-primary, #4F7EF7); background: rgba(79,126,247,0.04); }
.next-action-card[data-type="urgent"]::before { background: var(--color-error, #EF4444); }
.next-action-card[data-type="warning"]::before { background: var(--color-warning, #F59E0B); }
.next-action-card[data-type="success"]::before { background: var(--color-success, #22C55E); }
.next-action-card[data-type="info"]::before { background: var(--color-primary, #4F7EF7); }
.next-action-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
}
.next-action-content { flex: 1; min-width: 0; }
.next-action-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text, #e2e8f0);
  margin-bottom: 2px;
}
.next-action-detail {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  line-height: 1.5;
}
.next-action-arrow {
  flex-shrink: 0;
  color: var(--sp-text-muted);
  font-size: var(--text-sm);
  margin-top: 2px;
}

/* ── Verdict Action Buttons ── */
.verdict-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--sp-border, #2a2d3a);
}

/* ── Holdout Validation Card ── */
.holdout-card {
  background: var(--sp-surface, #1a1d27);
  border: 1px solid var(--sp-border, #2a2d3a);
  border-radius: 8px;
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.holdout-card h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.holdout-metrics {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.holdout-metric {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.holdout-metric-label {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
}
.holdout-metric-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
}
.holdout-pass { color: var(--color-success, #22C55E); }
.holdout-warn { color: var(--color-warning, #F59E0B); }
.holdout-fail { color: var(--color-error, #EF4444); }

/* ── NO-GO Explanation ── */
.nogo-explanation {
  background: rgba(139,143,163,0.06);
  border: 1px solid var(--sp-border, #2a2d3a);
  border-radius: 8px;
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.nogo-explanation h4 {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
  color: var(--sp-text-muted);
}
.nogo-explanation p {
  font-size: var(--text-sm);
  color: var(--sp-text-secondary, #94A3B8);
  line-height: 1.7;
}
.nogo-tried-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0 0;
}
.nogo-tried-item {
  font-size: var(--text-xs);
  color: var(--sp-text-secondary);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sp-border, #2a2d3a);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.nogo-tried-item:last-child { border-bottom: none; }

/* ── System Status Bar ── */
.system-status-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  margin-bottom: var(--space-5);
  font-size: var(--text-sm);
}
.system-status-bar.status-optimizing {
  background: rgba(79,126,247,0.08);
  border: 1px solid rgba(79,126,247,0.2);
  color: var(--color-primary, #4F7EF7);
}
.system-status-bar.status-converged {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  color: var(--color-success, #22C55E);
}
.system-status-bar.status-stalled {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--color-warning, #F59E0B);
}
.system-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}
@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.system-status-text { font-weight: 500; }
.system-status-detail {
  font-size: var(--text-xs);
  opacity: 0.8;
  margin-left: auto;
}

/* ── Transfer Learning Card ── */
.transfer-match {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--sp-border, #2a2d3a);
  font-size: var(--text-xs);
}
.transfer-match:last-child { border-bottom: none; }
.transfer-match-source {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-primary, #4F7EF7);
  white-space: nowrap;
}
.transfer-match-cluster {
  color: var(--sp-text-secondary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.transfer-match-outcome {
  font-family: var(--font-mono);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Convergence Annotations ── */
.conv-annotations {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--sp-border, #2a2d3a);
}
.conv-annotation {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--sp-text-secondary);
}
.conv-annotation-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.conv-annotation-dot.promoted { background: #22C55E; }
.conv-annotation-dot.rejected { background: #EF4444; }
.conv-annotation-dot.current { background: #4F7EF7; }
.conv-annotation-label { font-family: var(--font-mono); font-weight: 500; }
.conv-annotation-text { color: var(--sp-text-muted); }

/* ── KPI Sub-label ── */
.kpi-sub {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .next-actions-grid { grid-template-columns: 1fr; }
  .briefing-score-row { flex-direction: column; gap: var(--space-2); }
  .verdict-actions { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   SCAN PROGRESS BAR & ETA
   ═══════════════════════════════════════════════════════════════ */
.scan-progress-bar {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
}
.scan-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.scan-progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-1);
}
.scan-progress-eta {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-family: var(--font-mono);
}
.scan-progress-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}
.scan-progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.6s ease;
  position: relative;
}
.scan-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: scanProgressShimmer 1.5s ease infinite;
}
@keyframes scanProgressShimmer {
  0% { transform: translateX(-40px); }
  100% { transform: translateX(40px); }
}
.scan-progress-pct {
  text-align: right;
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 600;
  margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   PROMOTION GATE — FULL BUILDOUT
   ═══════════════════════════════════════════════════════════════ */
.promotion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-5);
}
.promotion-header h3 {
  font-size: var(--text-lg);
  font-weight: 700;
}
.promotion-tabs {
  display: flex;
  gap: var(--space-1);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: 2px;
}
.promotion-tab {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  color: var(--text-3);
  border: none;
  background: transparent;
  transition: all 0.15s;
}
.promotion-tab.active {
  background: var(--surface-1);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.promotion-tab:hover:not(.active) { color: var(--text-1); }

/* Promotion Timeline */
.promotion-timeline {
  position: relative;
  padding-left: var(--space-6);
}
.promotion-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}
.timeline-item {
  position: relative;
  padding-bottom: var(--space-5);
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: calc(-1 * var(--space-6) + 4px);
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface-1);
  z-index: 1;
}
.timeline-item.verdict-go .timeline-dot { border-color: var(--green); background: var(--green); }
.timeline-item.verdict-no-go .timeline-dot { border-color: var(--red); background: var(--red); }
.timeline-item.verdict-caution .timeline-dot { border-color: var(--yellow); background: var(--yellow); }

.timeline-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: border-color 0.15s;
}
.timeline-card:hover { border-color: var(--accent); }

.timeline-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.timeline-meta .badge { font-size: 10px; }
.timeline-time {
  font-size: var(--text-xs);
  color: var(--text-3);
}
.timeline-workflow {
  font-size: var(--text-xs);
  color: var(--text-3);
  font-weight: 500;
}
.timeline-scores {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.timeline-score-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.timeline-score-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
}
.timeline-score-value {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
}
.timeline-description {
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.4;
  margin-top: var(--space-2);
}
.promotion-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.promotion-summary-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  text-align: center;
}
.promotion-summary-card .promo-sum-value {
  font-size: var(--text-xl);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--text-1);
}
.promotion-summary-card .promo-sum-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  margin-top: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   CAUSAL CHAIN VISUALIZATION
   ═══════════════════════════════════════════════════════════════ */
.causal-chain {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.causal-chain-title {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.causal-chain-flow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.causal-agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  min-width: 100px;
  text-align: center;
  position: relative;
}
.causal-agent.causal-source {
  border-color: var(--red);
  background: rgba(239,68,68,0.08);
}
.causal-agent.causal-target {
  border-color: var(--yellow);
  background: rgba(245,158,11,0.08);
}
.causal-agent-name {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--text-1);
}
.causal-agent-tag {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.causal-source .causal-agent-tag {
  background: rgba(239,68,68,0.15);
  color: var(--red);
}
.causal-target .causal-agent-tag {
  background: rgba(245,158,11,0.15);
  color: var(--yellow);
}
.causal-arrow {
  color: var(--text-3);
  font-size: var(--text-lg);
  flex-shrink: 0;
}
.causal-arrow-label {
  font-size: 9px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.2;
}
.causal-explanation {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-2);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
  background: var(--surface-1);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--red);
}

@media (max-width: 640px) {
  .promotion-summary-row { grid-template-columns: repeat(2, 1fr); }
  .causal-chain-flow { flex-direction: column; }
  .causal-arrow { transform: rotate(90deg); }
}

/* ── Results Tab Bar ── */
.results-tab-bar {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
  padding-bottom: 0;
}
.results-tab {
  padding: var(--space-2) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--sp-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.results-tab:hover {
  color: var(--color-text);
}
.results-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}
.results-tab-content {
  display: none;
}
.results-tab-content[style*="display:block"],
.results-tab-content[style*="display: block"] {
  display: block;
}

/* Scan mode details/summary */
.scan-mode-section[open] .scan-mode-summary {
  margin-bottom: var(--space-3);
}
.scan-mode-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-primary);
  padding: var(--space-2) 0;
  list-style: none;
}
.scan-mode-summary::-webkit-details-marker { display: none; }
.scan-mode-summary::before { content: ""; }

/* Objective function details/summary */
.objective-function-details {
  flex: 1;
}
.obj-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--color-primary);
  list-style: none;
}
.obj-summary::-webkit-details-marker { display: none; }

/* ── Deploy Narrative Summary ── */
.deploy-narrative {
  padding: var(--space-5);
  border-radius: var(--space-2);
  margin-bottom: var(--space-5);
  border-left: 4px solid;
}
.deploy-narrative.narrative-go {
  background: rgba(34, 197, 94, 0.08);
  border-color: #22C55E;
}
.deploy-narrative.narrative-review {
  background: rgba(245, 158, 11, 0.08);
  border-color: #F59E0B;
}
.deploy-narrative.narrative-idle {
  background: rgba(148, 163, 184, 0.08);
  border-color: #64748B;
}
.deploy-narrative-verdict {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--sp-text-primary);
}
.deploy-narrative-text {
  font-size: 0.85rem;
  color: var(--sp-text-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Integration Tabs (Connect Your Agents) ── */
.integration-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--sp-border);
  padding-bottom: var(--space-1);
}
.integration-tab {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--sp-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.integration-tab:hover { color: var(--sp-text-primary); }
.integration-tab.active {
  color: var(--color-primary, #4F7EF7);
  border-bottom-color: var(--color-primary, #4F7EF7);
}
.integration-tab svg { flex-shrink: 0; }
.integration-tag {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: var(--radius-full);
  background: rgba(79, 126, 247, 0.12);
  color: var(--color-primary, #4F7EF7);
}
.integration-panel { margin-top: var(--space-1); }
.integration-desc {
  font-size: var(--text-sm);
  color: var(--sp-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}
.integration-desc p { margin: 0; }
.integration-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--sp-surface-offset, var(--color-surface-2));
  border-radius: var(--radius-md);
  line-height: 1.5;
}
.integration-note svg { flex-shrink: 0; margin-top: 1px; }

/* Code block enhancements */
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-4);
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.7rem;
  font-weight: 600;
  color: #6B7F9A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.code-block-header + pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}
.code-block-header .btn { font-size: 0.65rem; padding: 2px 8px; }
.code-highlight { color: #7DD3FC; }
.code-muted { color: #5C6B83; }
.code-comment { color: #4A5C73; font-style: italic; }

/* OTel Status Badge */
.otel-status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.otel-status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.otel-status-waiting {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}
.otel-status-waiting::before { background: #F59E0B; }
.otel-status-connected {
  background: rgba(34, 197, 94, 0.1);
  color: #22C55E;
}
.otel-status-connected::before {
  background: #22C55E;
  animation: otel-pulse 2s ease-in-out infinite;
}
@keyframes otel-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Live Ingest Indicator (dashboard header) */
.live-ingest-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--sp-text-muted);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--sp-surface-offset, var(--color-surface-2));
  border: 1px solid var(--sp-border-subtle);
  transition: all var(--transition-fast);
}
.live-ingest-indicator.active {
  color: #22C55E;
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.06);
}
.live-ingest-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sp-text-muted);
}
.live-ingest-indicator.active .live-ingest-dot {
  background: #22C55E;
  animation: otel-pulse 2s ease-in-out infinite;
}

/* ── Spectral Actions Card (Deploy tab) ── */
.actions-card {
  margin-top: var(--space-5);
}
.actions-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.action-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--sp-border);
  border-radius: var(--radius-md);
  background: var(--sp-surface, var(--color-surface));
  transition: border-color var(--transition-fast);
}
.action-item:hover { border-color: var(--sp-border-hover, var(--color-border-hover)); }
.action-item.action-applied {
  opacity: 0.5;
  border-color: rgba(34, 197, 94, 0.2);
}
.action-item.action-dismissed {
  opacity: 0.35;
}
.action-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}
.action-type-badge.type-prompt_patch {
  background: rgba(79, 126, 247, 0.1);
  color: var(--color-primary, #4F7EF7);
}
.action-type-badge.type-guardrail {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}
.action-type-badge.type-routing {
  background: rgba(139, 92, 246, 0.1);
  color: #8B5CF6;
}
.action-body {
  flex: 1;
  min-width: 0;
}
.action-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--sp-text-primary);
  margin-bottom: var(--space-1);
}
.action-desc {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.action-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.action-status {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sp-text-muted);
}
.action-status.applied { color: #22C55E; }
.action-status.dismissed { color: var(--sp-text-muted); }

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--sp-border);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.upload-zone:hover, .upload-zone.dragover {
  border-color: var(--color-primary, #4F7EF7);
  background: rgba(79, 126, 247, 0.03);
}
.upload-zone-label {
  font-size: var(--text-sm);
  color: var(--sp-text-secondary);
  margin: 0;
}
.upload-zone-link {
  color: var(--color-primary, #4F7EF7);
  cursor: pointer;
}
.upload-zone-hint {
  font-size: var(--text-xs);
  color: var(--sp-text-muted);
  margin: var(--space-1) 0 0;
}

/* ── Activity Feed Enhancements ── */
.activity-icon {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.activity-type-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
.activity-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--sp-border-subtle);
}
.activity-row:last-child {
  border-bottom: none;
}

/* ── EVAL WORKFLOW HEADER ── */
.eval-workflow-header {
  margin-bottom: var(--space-5);
}
.eval-wf-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.eval-wf-title h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
}
.eval-wf-insight {
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm, 6px);
  min-height: 1.6em;
}
.eval-wf-insight:empty {
  display: none;
}
.eval-insight-warn {
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid var(--color-warning, #F59E0B);
  color: var(--color-text-muted);
}
.eval-insight-ok {
  background: rgba(34, 197, 94, 0.08);
  border-left: 3px solid var(--color-success, #22C55E);
  color: var(--color-text-muted);
}
.eval-insight-icon {
  margin-right: var(--space-1);
}
.eval-wf-insight strong {
  color: var(--color-text);
}

/* ── SCAN HISTORY RECOMMENDATION ROW ── */
.scan-history-row {
  cursor: pointer;
  transition: background 0.15s ease;
}
.scan-history-row:hover {
  background: var(--sp-surface-hover, rgba(255,255,255,0.03));
}
.scan-history-rec-row td {
  padding: 0 var(--space-3) var(--space-3) var(--space-3) !important;
  border-bottom: 1px solid var(--sp-border-subtle, var(--color-border));
}
.scan-rec-text {
  display: block;
  font-size: var(--text-xs);
  color: var(--sp-text-secondary, var(--color-text-muted));
  line-height: 1.6;
  padding: var(--space-2) var(--space-3);
  background: var(--sp-surface-lower, rgba(0,0,0,0.15));
  border-radius: var(--radius-sm, 6px);
  border-left: 2px solid var(--color-primary, #4F7EF7);
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVENESS FIXES
   ══════════════════════════════════════════════════════════════ */

/* ── Results tab bar: scrollable on mobile ── */
@media (max-width: 768px) {
  .results-tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .results-tab-bar::-webkit-scrollbar { display: none; }
  .results-tab {
    flex-shrink: 0;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* ── Eval dimension badges: wrap on small screens ── */
@media (max-width: 640px) {
  .dimension-header {
    flex-wrap: wrap;
  }
  .dimension-badges {
    flex-wrap: wrap;
    gap: 4px;
  }
  .dimension-card {
    padding: var(--space-2);
  }
  .dimension-name {
    font-size: 0.82rem;
    flex: 1 1 100%;
    margin-bottom: 4px;
  }
}

/* ── Data tables: better horizontal scroll on mobile ── */
@media (max-width: 768px) {
  .table-card {
    overflow-x: auto;
    overflow-y: hidden;
  }
  .data-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table {
    min-width: 600px;
  }
  .data-table th,
  .data-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }
}

/* ── Scan history table: allow horizontal scroll ── */
@media (max-width: 768px) {
  .scan-history-rec-row td {
    white-space: normal;
  }
  .scan-rec-text {
    white-space: normal;
    word-break: break-word;
  }
}

/* ── KPI grid: 2 columns on small mobile ── */
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .kpi-card { padding: var(--space-3); }
  .kpi-value { font-size: 1.5rem; }
  .kpi-label { font-size: 0.65rem; }
}

/* ── Workflow rows: stack on mobile ── */
@media (max-width: 640px) {
  .workflow-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .workflow-row-right {
    width: 100%;
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .wf-bar-wrap { flex: 1; min-width: 120px; }
}

/* ── Morning briefing: tighter on mobile ── */
@media (max-width: 640px) {
  .briefing-card {
    padding: var(--space-3);
  }
  .briefing-score-row {
    flex-direction: column;
    gap: var(--space-2);
  }
}

/* ── Promotion grid: stack on mobile ── */
@media (max-width: 640px) {
  .promotion-summary-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .promotion-kpi {
    padding: var(--space-3);
  }
  .promotion-kpi .kpi-value {
    font-size: 1.4rem;
  }
}

/* ── Code blocks: scroll on mobile ── */
@media (max-width: 768px) {
  .code-block pre {
    font-size: 0.72rem;
    white-space: pre;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Strategy leaderboard rows: wrap on mobile ── */
@media (max-width: 640px) {
  .strat-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .strat-info { flex: 1 1 100%; }
  .strat-stats {
    flex: 1 1 100%;
    justify-content: flex-start;
  }
}

/* ── Convergence chart: reduce height on mobile ── */
@media (max-width: 640px) {
  #metaConvergenceChart {
    max-height: 180px;
  }
  .conv-stat {
    flex-direction: column;
    gap: 2px;
  }
}

/* ── Experiment detail: better mobile table ── */
@media (max-width: 768px) {
  .exp-card {
    padding: var(--space-3);
  }
  .exp-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
}

/* ── Page title: smaller on mobile ── */
@media (max-width: 640px) {
  .page-title {
    font-size: 1.2rem;
  }
  .main-header {
    padding: var(--space-3);
  }
}

/* ── Fix scan pipeline squish ── */
@media (max-width: 480px) {
  .pipeline-step {
    min-width: 50px;
    padding: var(--space-2);
  }
  .pipeline-step-label {
    font-size: 0.6rem;
  }
  .scan-hero {
    padding: var(--space-3);
  }
}

/* ── Sidebar overlay: visible when sidebar open ── */
@media (max-width: 768px) {
  .sidebar-overlay.active {
    display: block;
  }
}

/* ── Connect/Setup section: tighter padding ── */
@media (max-width: 640px) {
  .connect-card,
  .validate-card {
    padding: var(--space-3);
  }
}

/* ── Onboard wizard: tighter on mobile ── */
@media (max-width: 480px) {
  .ob-card {
    padding: var(--space-3);
  }
  .ob-card-title {
    font-size: 1rem;
  }
  .ob-actions {
    flex-direction: column;
  }
  .ob-actions .btn {
    width: 100%;
    justify-content: center;
  }
}