/* ===================== DASHBOARD LAYOUT ===================== */
html, body { height: 100%; overflow: hidden; margin: 0; }

.dashboard {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 1fr;
  height: 100dvh;
}

/* ===================== SIDEBAR ===================== */
.sidebar {
  grid-row: 1 / -1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 50;
}

.sidebar-header {
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.logo-svg {
  width: 36px;
  height: 36px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.logo-text {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.logo-text strong {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  display: block;
}

.sidebar-nav {
  flex: 1;
  padding: var(--space-3) var(--space-3);
  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);
}
.nav-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.nav-item.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  font-weight: 600;
}
.nav-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}
.nav-item.active svg {
  opacity: 1;
  stroke: var(--color-primary);
}

.sidebar-footer {
  padding: var(--space-4) var(--space-3);
  border-top: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.theme-toggle,
.export-pdf-btn {
  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);
  color: var(--color-text-muted);
  width: 100%;
  cursor: pointer;
}
.theme-toggle:hover,
.export-pdf-btn:hover {
  background: var(--color-surface-2);
  color: var(--color-text);
}
.export-pdf-btn {
  color: var(--color-primary);
}
.export-pdf-btn:hover {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}

/* ===================== MOBILE HEADER ===================== */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  position: sticky;
  top: 0;
  z-index: 40;
}
.hamburger {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text);
}
.hamburger:hover { background: var(--color-surface-2); }

.mobile-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-primary);
}
.mobile-logo span {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.theme-toggle-mobile {
  padding: var(--space-2);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
.theme-toggle-mobile:hover { background: var(--color-surface-2); }

.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.5);
  z-index: 45;
}

/* ===================== LANGUAGE TOGGLE (v4) ===================== */
.lang-toggle {
  display: flex;
  gap: var(--space-1);
  align-items: center;
  margin-left: auto;
}
.lang-btn {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all var(--transition-interactive);
  border: 1px solid transparent;
}
.lang-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.lang-btn.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* ===================== MAIN CONTENT ===================== */
.main {
  grid-column: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-8);
  background: var(--color-bg);
}

.phase-section {
  margin-bottom: var(--space-16);
  max-width: 1200px;
}

.phase-header {
  margin-bottom: var(--space-6);
}
.phase-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-2);
}
.phase-title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}

/* ===================== KPI CARDS ===================== */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

.kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive);
}
.kpi-card:hover {
  box-shadow: var(--shadow-md);
}

.kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--color-text);
  line-height: 1.2;
}
.kpi-value.error { color: var(--color-error); }
.kpi-delta {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.kpi-delta.up { color: var(--color-success); }
.kpi-delta.down { color: var(--color-error); }
.kpi-subtext {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

.sparkline {
  width: 100%;
  height: 24px;
  margin-top: var(--space-2);
}

/* ===================== CONTENT CARDS ===================== */
.content-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}
.card-heading {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.chart-container {
  position: relative;
  width: 100%;
  height: 300px;
}
.chart-container canvas { max-height: 300px; }

/* ===================== SKELETON LOADER (v4) ===================== */
.chart-skeleton {
  width: 100%;
  height: 300px;
  border-radius: var(--radius-md);
  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;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chart-skeleton-text {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  font-weight: 500;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===================== PHASE 1 — CRISIS ===================== */
.crisis-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
}
.crisis-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.crisis-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* ===================== TWO COLUMN ===================== */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

/* ===================== PHASE 2 — TRANSIT ===================== */
.transit-info { text-align: center; }
.transit-icon {
  margin: 0 auto var(--space-4);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-xl);
}
.transit-icon svg { display: inline-block; }
.stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-4);
}
.stat-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-2);
  color: var(--color-secondary);
  border: 1px solid var(--color-divider);
}

/* ===================== DATA TABLE ===================== */
.table-wrap { overflow-x: auto; }
.data-table {
  width: 100%;
  font-size: var(--text-sm);
}
.data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  border-bottom: 2px solid var(--color-divider);
  position: sticky;
  top: 0;
  background: var(--color-surface);
}
.data-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: top;
}
.data-table tr:hover td {
  background: var(--color-surface-2);
}
.trigger-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-2);
}

/* ===================== PHASE 3 — MODEL ===================== */
.model-hero {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}
.model-card {
  flex: 1;
  min-width: 200px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-sm);
}
.model-card.primary-model {
  border-color: var(--color-primary);
  border-width: 2px;
}
.model-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  display: block;
}
.model-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
}
.model-value.small { font-size: var(--text-xl); }
.model-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Flow diagram */
.flow-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.flow-step { text-align: center; }
.flow-box {
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface-2);
}
.flow-box.accent {
  border-color: var(--color-secondary);
  color: var(--color-secondary);
  background: color-mix(in oklch, var(--color-secondary) 6%, var(--color-surface));
}
.flow-box.gold {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: var(--color-primary-highlight);
  font-family: var(--font-display);
  font-size: var(--text-lg);
}
.flow-label {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}
.flow-arrow {
  font-size: var(--text-xl);
  color: var(--color-text-faint);
  font-weight: 300;
}

/* ===================== PHASE 4 — ARCHITECTURE ===================== */
.arch-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-4) 0;
}
.arch-layer {
  width: 100%;
  max-width: 600px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  position: relative;
}
.arch-layer.orchestration { border-color: var(--color-primary); }
.arch-layer.intelligence { border-color: var(--color-secondary); }
.arch-layer.execution { border-color: var(--color-text-faint); }
.arch-layer-label {
  position: absolute;
  top: -10px;
  left: var(--space-4);
  background: var(--color-surface);
  padding: 0 var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
}
.arch-layer.intelligence .arch-layer-label { color: var(--color-secondary); }
.arch-layer.execution .arch-layer-label { color: var(--color-text-muted); }
.arch-layer-content {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.arch-box {
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  text-align: center;
  border: 1px solid var(--color-divider);
}
.arch-tag {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.arch-arrow-down {
  display: flex;
  justify-content: center;
  padding: var(--space-1) 0;
}

/* ===================== PHASE 5 — DATA FACTORY v3 ===================== */
.source-grid-v3 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--space-4);
}
.source-card-v3 {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-interactive);
}
.source-card-v3:hover {
  box-shadow: var(--shadow-md);
}
.source-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.source-body {
  flex: 1;
  min-width: 0;
}
.source-body strong {
  font-size: var(--text-sm);
  display: block;
  color: var(--color-text);
}
.source-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.priority-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.priority-critical {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.priority-high {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.priority-medium {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

/* Pipeline v3 */
.pipeline-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-6) 0;
}
.pipe-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
}
.pipe-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-divider);
}
.pipe-icon svg { display: inline-block; }
.pipe-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.pipe-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.pipe-connector {
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
}

/* v4: Signal Processing Pipeline Stats */
.pipeline-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.pipe-stat {
  text-align: center;
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}
.pipe-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
}
.pipe-stat-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-top: var(--space-1);
}

/* v4: OTA Scraper Panel */
.ota-measures {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.ota-measure {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-divider);
}
.ota-measure-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

/* ===================== CODE BLOCKS ===================== */
.code-block {
  background: #1d1f21;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
}
.code-block code {
  font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
}

/* ===================== ML ENGINE — ENSEMBLE ===================== */
.ensemble-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) 0;
}
.ensemble-row {
  display: flex;
  gap: var(--space-6);
  justify-content: center;
  flex-wrap: wrap;
}
.ensemble-box {
  text-align: center;
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  min-width: 200px;
}
.ensemble-box.xgb { border-color: var(--color-success); }
.ensemble-box.lstm { border-color: var(--color-secondary); }
.ensemble-box.output { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.ensemble-box.final { border-color: var(--color-primary); border-width: 3px; }
.ensemble-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.ensemble-sub {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}
.ensemble-weight {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-primary);
}
.ensemble-merge {
  display: flex;
  justify-content: center;
  padding: var(--space-1) 0;
}

/* LSTM Visual */
.lstm-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-3) 0;
}
.lstm-layer {
  width: 100%;
  max-width: 280px;
  text-align: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.lstm-layer span:first-child {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.lstm-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.lstm-layer.input-layer { border-color: var(--color-secondary); }
.lstm-layer.output-layer { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.lstm-layer.dropout-layer { opacity: 0.7; border-style: dashed; }
.lstm-layer.attention-layer { border-color: var(--color-warning); background: var(--color-warning-highlight); }
.lstm-arrow {
  font-size: var(--text-base);
  color: var(--color-text-faint);
  padding: var(--space-1) 0;
}

/* ===================== ECONOMIC INTELLIGENCE ===================== */
.elasticity-table .elasticity-val {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-weight: 700;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}
.elasticity-val.high-elastic {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.elasticity-val.med-elastic {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.elasticity-val.low-elastic {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.elasticity-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}
.el-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.el-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.el-dot.high-elastic { background: var(--color-error); }
.el-dot.med-elastic { background: var(--color-warning); }
.el-dot.low-elastic { background: var(--color-success); }

/* Price Finder */
.price-finder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.finder-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.finder-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.finder-detail {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  flex-wrap: wrap;
  justify-content: center;
}
.finder-tag {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}
.finder-tag.success {
  background: var(--color-success-highlight);
  color: var(--color-success);
}

/* Anomaly Panel */
.anomaly-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.anomaly-item {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
}
.anomaly-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.anomaly-time {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}
.anomaly-zscore {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.anomaly-zscore.high {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.anomaly-zscore.medium {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.anomaly-item p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* v4: Competitor Intelligence Panel */
.competitor-intel-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-6);
  align-items: start;
}
.comp-table-wrap { overflow-x: auto; }
.position-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-lg);
  margin-top: var(--space-4);
}
.position-badge {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}
.position-gap {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
}

/* v4: Weather & Event Impact */
.weather-premium-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.weather-card {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border-left: 3px solid var(--color-warning);
  text-align: center;
}
.weather-card-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}
.weather-card-value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-warning);
}
.weather-card.typhoon { border-left-color: var(--color-error); }
.weather-card.typhoon .weather-card-value { color: var(--color-error); }
.weather-card.stranded { border-left-color: var(--color-error); background: var(--color-error-highlight); }
.weather-card.stranded .weather-card-value { color: var(--color-error); }

/* v4: Price Sensitivity Map */
.sensitivity-map-container {
  height: 350px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.district-info {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: none;
}
.district-info.visible { display: block; }
.district-info-title {
  font-weight: 700;
  font-size: var(--text-sm);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.sensitivity-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.sens-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.sens-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}
.sens-dot.low { background: #2E8B57; }
.sens-dot.medium { background: #D4762C; }
.sens-dot.high { background: #C0392B; }

/* ===================== PHASE 6 — PRICING ENGINE ===================== */
.formula-card { border: 2px solid var(--color-primary); }
.formula-display {
  text-align: center;
  padding: var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}
.formula-display code {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

/* Quick Presets */
.preset-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.preset-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.preset-btn:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.preset-btn.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.preset-icon { font-size: var(--text-lg); }

.pricing-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
.pricing-steps .content-card { margin-bottom: 0; }

.step-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-inverse);
  background: var(--color-primary);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-3);
}

.baseline-display {
  text-align: center;
  padding: var(--space-6) 0;
}
.baseline-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums lining-nums;
}
.baseline-sub {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Multiplier bars */
.multiplier-table { display: flex; flex-direction: column; gap: var(--space-4); }
.mult-row {
  display: grid;
  grid-template-columns: 120px 1fr 60px;
  align-items: center;
  gap: var(--space-3);
}
.mult-trigger {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.mult-bar-wrap {
  height: 8px;
  background: var(--color-surface-2);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.mult-bar {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mult-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Ceiling visual */
.ceiling-visual { display: flex; flex-direction: column; gap: var(--space-3); }
.ceiling-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.ceiling-bar.five-star { background: var(--color-surface-offset); color: var(--color-text-muted); }
.ceiling-bar.ceiling {
  background: color-mix(in oklch, var(--color-warning) 10%, var(--color-surface));
  border: 1px dashed var(--color-warning);
  color: var(--color-warning);
}
.ceiling-bar.recommended {
  background: var(--color-primary-highlight);
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
}
.ceiling-divider { text-align: center; padding: var(--space-1); }
.ceiling-rule {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ceiling-label { font-weight: 500; }
.ceiling-amount {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ===================== SIMULATOR ===================== */
.simulator-card { border: 2px solid var(--color-primary); }
.simulator-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}
.simulator-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.slider-group { display: flex; flex-direction: column; gap: var(--space-2); }
.slider-label {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.slider-value {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  color: var(--color-primary);
  font-weight: 700;
}

/* v4: Numeric slider input */
.slider-with-input {
  display: flex;
  gap: var(--space-3);
  align-items: center;
}
.slider-with-input .range-slider { flex: 1; }
.slider-num-input {
  width: 70px;
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.slider-num-input:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.zone-select {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--transition-interactive);
}
.zone-select:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  outline: none;
  cursor: pointer;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-interactive);
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.range-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-primary);
  cursor: pointer;
  border: none;
  box-shadow: var(--shadow-md);
}
.slider-range {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.simulator-result {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.result-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.result-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums lining-nums;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.result-usd {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.active-multipliers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-4);
}
.mult-badge {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-full);
  font-variant-numeric: tabular-nums;
  transition: all var(--transition-interactive);
}
.mult-badge.inactive {
  background: var(--color-surface-offset);
  color: var(--color-text-faint);
}
.mult-badge.active {
  background: var(--color-primary-highlight);
  color: var(--color-primary);
}
.ceiling-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-success);
}
.ceiling-check.exceeded { color: var(--color-error); }

/* v4: Scenario Saving */
.scenario-panel {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.scenario-save-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-secondary);
  color: #fff;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: background var(--transition-interactive);
}
.scenario-save-btn:hover { background: var(--color-secondary-hover); }
.scenario-chips {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.scenario-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
  border: 1px solid var(--color-divider);
  transition: all var(--transition-interactive);
}
.scenario-chip:hover {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.scenario-chip .chip-remove {
  font-size: 10px;
  color: var(--color-text-faint);
  cursor: pointer;
  margin-left: var(--space-1);
}

/* ===================== PHASE 7 — COMMAND CENTER ===================== */
.success-pool { border-left: 4px solid var(--color-success); }
.signals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.signal-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.signal-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-success);
  position: relative;
  flex-shrink: 0;
}
.signal-indicator.weather { background: var(--color-warning); }
.signal-indicator.event { background: var(--color-primary); }
.signal-pulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  animation: pulse 2s ease-in-out infinite;
}
.signal-indicator.weather .signal-pulse { border-color: var(--color-warning); }
.signal-indicator.event .signal-pulse { border-color: var(--color-primary); }

@keyframes pulse {
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}

.signal-info { flex: 1; }
.signal-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  display: block;
}
.signal-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.live-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-success);
  text-transform: none;
  letter-spacing: 0;
}

/* A/B Strategy Comparison */
.ab-grid {
  display: flex;
  align-items: stretch;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.ab-card {
  flex: 1;
  min-width: 220px;
  padding: var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-divider);
}
.ab-card.conservative { border-color: var(--color-success); }
.ab-card.aggressive { border-color: var(--color-warning); }
.ab-card h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-4);
  color: var(--color-text);
}
.ab-kpis { display: flex; flex-direction: column; gap: var(--space-3); }
.ab-kpi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ab-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ab-val {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.ab-vs {
  display: flex;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 800;
  color: var(--color-text-faint);
  padding: 0 var(--space-2);
}

/* Revenue Leakage */
.leakage-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.leakage-amount {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.leakage-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}
.leakage-val {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-error);
}
.leakage-blocks {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-2);
}
.leak-block {
  text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
}
.leak-block[data-intensity="low"] {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.leak-block[data-intensity="medium"] {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.leak-block[data-intensity="high"] {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.leakage-legend {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.leak-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-1);
}
.leak-dot.low { background: var(--color-success); }
.leak-dot.medium { background: var(--color-warning); }
.leak-dot.high { background: var(--color-error); }

/* Veto Calendar */
.veto-calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.veto-day {
  text-align: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.veto-day.header {
  color: var(--color-text-muted);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
}
.veto-day.empty { background: transparent; }
.veto-day.low { background: var(--color-success-highlight); color: var(--color-success); }
.veto-day.medium { background: var(--color-warning-highlight); color: var(--color-warning); }
.veto-day.high { background: var(--color-error-highlight); color: var(--color-error); }
.veto-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.veto-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--space-1);
}
.veto-dot.low { background: var(--color-success); }
.veto-dot.medium { background: var(--color-warning); }
.veto-dot.high { background: var(--color-error); }

/* v4: Historical Playback */
.playback-controls {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.playback-btn {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.playback-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }
.playback-btn.active {
  background: var(--color-primary-highlight);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Fee Calculator */
.fee-calculator-card { border-left: 4px solid var(--color-primary); }
.fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.fee-item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.fee-item.highlight {
  background: var(--color-primary-highlight);
  border: 1px solid var(--color-primary);
}
.fee-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.fee-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.fee-value.gold { color: var(--color-primary); }
.fee-formula {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* Alert Settings */
.alert-settings-card { border-left: 4px solid var(--color-warning); }
.alert-checks { display: flex; flex-direction: column; gap: var(--space-3); }
.alert-check-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}
.alert-check-item:hover { background: var(--color-surface-2); }
.alert-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.alert-check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-interactive);
}
.alert-checkbox:checked + .alert-check-box {
  background: var(--color-warning);
  border-color: var(--color-warning);
}
.alert-checkbox:checked + .alert-check-box::after {
  content: '\2713';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.alert-check-text { font-size: var(--text-sm); color: var(--color-text); }

/* Monitor grid */
.monitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.competitor-card { border-left: 4px solid var(--color-success); }
.competitor-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.comp-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}
.comp-icon.success { background: var(--color-success-highlight); color: var(--color-success); }
.comp-icon.warning { background: var(--color-warning-highlight); color: var(--color-warning); }
.competitor-status strong { font-size: var(--text-sm); display: block; }
.competitor-status p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.comp-subtext { font-size: var(--text-xs); color: var(--color-text-faint); }

.booking-pace-card { border-left: 4px solid var(--color-warning); }
.pace-status { display: flex; align-items: center; gap: var(--space-3); }
.pace-indicator { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.pace-indicator.on-track { background: var(--color-success); }
.pace-indicator.hyper { background: var(--color-warning); animation: pulse 1.5s ease-in-out infinite; }
.pace-status strong { font-size: var(--text-sm); display: block; }
.pace-status p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

.freshness-card { border-left: 4px solid var(--color-success); }
.freshness-status { display: flex; align-items: center; gap: var(--space-3); }
.freshness-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.freshness-dot.green { background: var(--color-success); }
.freshness-dot.yellow { background: var(--color-warning); }
.freshness-dot.red { background: var(--color-error); }
.freshness-status strong { font-size: var(--text-sm); display: block; font-variant-numeric: tabular-nums; }
.freshness-status p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Leaflet Map */
.leaflet-map-container {
  height: 400px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.map-legend { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.legend-pill {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.legend-pill::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.legend-high { background: var(--color-error-highlight); color: var(--color-error); }
.legend-high::before { background: var(--color-error); }
.legend-stable {
  background: color-mix(in oklch, var(--color-secondary) 12%, var(--color-surface));
  color: var(--color-secondary);
}
.legend-stable::before { background: var(--color-secondary); }

/* ===================== PHASE 8 — AGREEMENT ===================== */
.agreement-card { border: 1px solid var(--color-primary); }
.agreement-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-divider);
}
.agreement-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}
.agreement-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.agreement-section p, .agreement-section ul {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.metrics-list { list-style: none; padding: 0; }
.metrics-list li {
  position: relative;
  padding-left: var(--space-5);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}
.metrics-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--color-success);
  font-weight: 700;
}

/* Signature Pad */
.signature-section { border: 2px solid var(--color-primary); }
.signature-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface-2);
  margin-bottom: var(--space-4);
  max-width: 400px;
}
.signature-wrap canvas {
  display: block;
  width: 100%;
  height: 200px;
  touch-action: none;
}
.signature-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.sig-btn {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.sig-clear {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.sig-clear:hover { background: var(--color-surface-offset); color: var(--color-text); }
.sig-approve {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
}
.sig-approve:hover:not(:disabled) { background: var(--color-primary-hover); }
.sig-approve:disabled { opacity: 0.4; cursor: not-allowed; }
.sig-success-msg {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-success-highlight);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-success);
}

/* ===================== PRODUCTION ARCHITECTURE ===================== */
.checklist { display: flex; flex-direction: column; gap: var(--space-3); }
.check-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: background var(--transition-interactive);
}
.check-item:hover { background: var(--color-surface-2); }
.check-input { position: absolute; opacity: 0; width: 0; height: 0; }
.check-box {
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-interactive);
  margin-top: 2px;
}
.check-input:checked + .check-box { background: var(--color-primary); border-color: var(--color-primary); }
.check-input:checked + .check-box::after {
  content: '\2713';
  color: var(--color-text-inverse);
  font-size: 12px;
  font-weight: 700;
}
.check-text { font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; }
.check-input:checked ~ .check-text { color: var(--color-text-muted); text-decoration: line-through; }

/* System Health */
.system-health-card { border-left: 4px solid var(--color-success); }
.health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.health-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
}
.health-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.health-dot.green { background: var(--color-success); }
.health-dot.yellow { background: var(--color-warning); }
.health-dot.red { background: var(--color-error); }
.health-dot.gray { background: var(--color-text-faint); }
.health-item strong { font-size: var(--text-sm); display: block; }
.health-item p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: var(--space-1); }
.health-recovery {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-highlight);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
}

/* Circuit Breaker */
.circuit-breaker-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.cb-state {
  text-align: center;
  padding: var(--space-4) var(--space-6);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-divider);
  min-width: 140px;
  transition: all var(--transition-interactive);
  cursor: pointer;
}
.cb-state.active-state {
  border-color: var(--color-success);
  background: var(--color-success-highlight);
}
.cb-state.active-state-open {
  border-color: var(--color-error);
  background: var(--color-error-highlight);
}
.cb-state.active-state-half {
  border-color: var(--color-warning);
  background: var(--color-warning-highlight);
}
.cb-indicator {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  margin: 0 auto var(--space-2);
}
.cb-indicator.green { background: var(--color-success); }
.cb-indicator.red { background: var(--color-error); }
.cb-indicator.yellow { background: var(--color-warning); }
.cb-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.cb-desc {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.cb-arrow {
  font-size: var(--text-lg);
  color: var(--color-text-faint);
}
.cb-error-rate {
  margin-top: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  text-align: center;
  color: var(--color-text-muted);
}
.cb-error-rate strong {
  color: var(--color-text);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Rate Limiting */
.rate-limit-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.rate-item {
  display: grid;
  grid-template-columns: 120px 1fr 100px;
  align-items: center;
  gap: var(--space-3);
}
.rate-source {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.rate-bar-wrap {
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rate-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  transition: width 1s ease;
}
.rate-bar.warning { background: var(--color-warning); }
.rate-bar.danger { background: var(--color-error); }
.rate-usage {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Fallback Diagram */
.fallback-diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.fallback-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  font-weight: 600;
}
.fallback-step.primary-fb {
  background: var(--color-success-highlight);
  border-color: var(--color-success);
  color: var(--color-success);
}
.fallback-step.last-resort {
  background: var(--color-surface-offset);
  border-style: dashed;
  color: var(--color-text-muted);
}
.fallback-step.fallback-active {
  background: var(--color-warning-highlight);
  border-color: var(--color-warning);
  color: var(--color-warning);
}
.fb-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-text-faint);
  color: var(--color-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.fallback-step.primary-fb .fb-num { background: var(--color-success); color: #fff; }
.fb-label { color: var(--color-text); }
.fallback-arrow { color: var(--color-text-faint); font-size: var(--text-lg); }

/* v4: CI/CD Pipeline */
.cicd-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.cicd-step {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-success-highlight);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-success);
}
.cicd-step.pending {
  background: var(--color-surface-2);
  border-color: var(--color-divider);
  color: var(--color-text-muted);
}
.cicd-arrow { color: var(--color-text-faint); }
.smoke-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.smoke-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
}
.smoke-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.smoke-dot.pass { background: var(--color-success); }
.smoke-dot.fail { background: var(--color-error); }

/* Docker / K8s */
.docker-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.docker-container {
  text-align: center;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
}
.dc-name { display: block; font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.dc-port { display: block; font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.dc-frontend { border-color: var(--color-secondary); }
.dc-api { border-color: var(--color-primary); }
.dc-redis { border-color: var(--color-error); }
.dc-postgres { border-color: var(--color-success); }
.dc-prometheus { border-color: var(--color-warning); }
.dc-grafana { border-color: #8B5CF6; }

.k8s-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.k8s-stat {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.k8s-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; }
.k8s-val {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

/* Infrastructure diagram */
.infra-diagram { display: flex; flex-direction: column; align-items: center; padding: var(--space-4) 0; }
.infra-row { display: flex; gap: var(--space-4); justify-content: center; width: 100%; }
.infra-row.two-boxes { gap: var(--space-6); }
.infra-box {
  text-align: center;
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-lg);
  border: 2px solid var(--color-border);
  background: var(--color-surface-2);
  min-width: 180px;
}
.infra-box.cloud { border-color: var(--color-secondary); background: color-mix(in oklch, var(--color-secondary) 6%, var(--color-surface)); }
.infra-box.security { border-color: var(--color-warning); background: color-mix(in oklch, var(--color-warning) 6%, var(--color-surface)); }
.infra-box.agent { border-color: var(--color-error); background: color-mix(in oklch, var(--color-error) 6%, var(--color-surface)); }
.infra-box.engine { border-color: var(--color-primary); background: var(--color-primary-highlight); }
.infra-label { font-weight: 700; font-size: var(--text-sm); color: var(--color-text); display: block; }
.infra-sublabel { font-size: var(--text-xs); color: var(--color-text-muted); display: block; margin-top: var(--space-1); }
.infra-connector { display: flex; justify-content: center; padding: var(--space-1) 0; }

/* ===================== OBSERVATORY ===================== */
.drift-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.drift-score {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.drift-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}
.drift-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
}
.drift-status {
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.drift-status.safe { background: var(--color-success-highlight); color: var(--color-success); }
.drift-status.warning { background: var(--color-warning-highlight); color: var(--color-warning); }
.drift-status.critical { background: var(--color-error-highlight); color: var(--color-error); }
.drift-bar-wrap {
  height: 12px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: visible;
  position: relative;
}
.drift-bar {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--color-success), var(--color-warning), var(--color-error));
  position: relative;
  transition: width 0.6s ease;
}
.drift-marker {
  position: absolute;
  top: -16px;
  font-size: 10px;
  color: var(--color-text-faint);
  transform: translateX(-50%);
}
.drift-scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* Feature Store */
.feature-store-grid { display: flex; flex-direction: column; gap: var(--space-4); }
.fs-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
}
.fs-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.fs-dot.green { background: var(--color-success); }
.fs-dot.gray { background: var(--color-text-faint); }
.fs-item strong { font-size: var(--text-sm); display: block; }
.fs-item p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Prometheus Metrics */
.prom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.prom-metric {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.prom-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); }
.prom-value {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.prom-value.success { color: var(--color-success); }

/* Alert Config */
.alert-config-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
}
.alert-config-item {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}
.alert-config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.alert-config-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text); }
.alert-config-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.alert-config-badge.active { background: var(--color-success-highlight); color: var(--color-success); }
.alert-config-badge.warning { background: var(--color-warning-highlight); color: var(--color-warning); }
.alert-config-item p { font-size: var(--text-xs); color: var(--color-text-muted); }

/* v4: Advanced Metrics — MAPE Gauge */
.mape-gauge-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.mape-gauge-chart { width: 180px; height: 100px; flex-shrink: 0; }
.mape-stats { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.mape-stat { display: flex; justify-content: space-between; font-size: var(--text-sm); }
.mape-stat-label { color: var(--color-text-muted); font-weight: 600; }
.mape-stat-value { font-family: var(--font-display); font-weight: 700; color: var(--color-text); }

/* ===================== EXECUTIVE ROI ===================== */
/* Shadow Report */
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}
.shadow-stat {
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  text-align: center;
}
.shadow-label {
  display: block;
  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);
}
.shadow-val {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.shadow-val.error { color: var(--color-error); }
.shadow-val.success { color: var(--color-success); }

/* Status badges */
.status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--radius-full);
}
.status-badge.safe { background: var(--color-success-highlight); color: var(--color-success); }
.status-badge.premium { background: var(--color-primary-highlight); color: var(--color-primary); }

/* v4: ROI Attribution */
.attribution-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.attr-item {
  padding: var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  text-align: center;
}
.attr-item-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
}
.attr-item-value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin-top: var(--space-1);
}

/* v4: Report Templates */
.report-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}
.report-template-card {
  padding: var(--space-5);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.report-template-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}
.report-template-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex: 1;
}
.report-gen-btn {
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-align: center;
  transition: background var(--transition-interactive);
}
.report-gen-btn:hover { background: var(--color-primary-hover); }
.report-gen-btn.generated {
  background: var(--color-success);
  cursor: default;
}

/* Readiness Checklist */
.readiness-list { display: flex; flex-direction: column; gap: var(--space-3); }
.readiness-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  transition: background 0.3s ease;
}
.readiness-item.checked { background: var(--color-success-highlight); }
.readiness-item.pending { background: var(--color-surface-2); color: var(--color-text-muted); }
.readiness-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-success);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.readiness-check.pending-check {
  background: var(--color-text-faint);
  font-size: 18px;
}

/* v4: Readiness Progress Bar */
.readiness-progress {
  margin-bottom: var(--space-4);
}
.readiness-progress-bar {
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin-bottom: var(--space-2);
}
.readiness-progress-fill {
  height: 100%;
  background: var(--color-success);
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}
.readiness-progress-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: right;
}

/* ===================== FOOTER ===================== */
.dashboard-footer {
  text-align: center;
  padding: var(--space-8) 0 var(--space-6);
  border-top: 1px solid var(--color-divider);
  margin-top: var(--space-8);
}
.dashboard-footer p {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-bottom: var(--space-2);
  max-width: none;
}
.dashboard-footer a {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-decoration: none;
}
.dashboard-footer a:hover { color: var(--color-primary); }

/* ===================== ANIMATIONS ===================== */
.phase-section {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  to { opacity: 1; }
}

#phase1 { animation-delay: 0.05s; }
#phase2 { animation-delay: 0.1s; }
#phase3 { animation-delay: 0.15s; }
#phase4 { animation-delay: 0.2s; }
#phase5 { animation-delay: 0.25s; }
#mlengine { animation-delay: 0.3s; }
#economic { animation-delay: 0.35s; }
#phase6 { animation-delay: 0.4s; }
#phase7 { animation-delay: 0.45s; }
#phase8 { animation-delay: 0.5s; }
#production { animation-delay: 0.55s; }
#observatory { animation-delay: 0.6s; }
#executive { animation-delay: 0.65s; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .dashboard {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .sidebar {
    position: fixed;
    left: -280px;
    top: 0;
    bottom: 0;
    width: 260px;
    transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 50;
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay.open { display: block; }
  .mobile-header { display: flex; }
  .main { grid-column: 1; padding: var(--space-4); }
  .two-col { grid-template-columns: 1fr; }
  .simulator-grid { grid-template-columns: 1fr; }
  .agreement-sections { grid-template-columns: 1fr; }
  .pricing-steps { grid-template-columns: 1fr; }
  .flow-diagram { flex-direction: column; }
  .flow-arrow { transform: rotate(90deg); }
  .monitor-grid { grid-template-columns: 1fr; }
  .price-finder-grid { grid-template-columns: 1fr; }
  .ab-grid { flex-direction: column; }
  .ab-vs { justify-content: center; }
  .docker-grid { grid-template-columns: repeat(2, 1fr); }
  .leakage-blocks { grid-template-columns: repeat(3, 1fr); }
  .competitor-intel-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .main { padding: var(--space-3); }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .content-card { padding: var(--space-4); }
  .phase-title { font-size: var(--text-lg); }
  .model-hero { flex-direction: column; }
  .signals-grid { grid-template-columns: 1fr; }
  .infra-row.two-boxes { flex-direction: column; align-items: center; }
  .mult-row { grid-template-columns: 90px 1fr 50px; }
  .fee-grid { grid-template-columns: 1fr; }
  .health-grid { grid-template-columns: 1fr; }
  .leaflet-map-container { height: 300px; }
  .sensitivity-map-container { height: 250px; }
  .source-grid-v3 { grid-template-columns: 1fr; }
  .docker-grid { grid-template-columns: 1fr; }
  .rate-item { grid-template-columns: 80px 1fr 70px; }
  .prom-grid { grid-template-columns: 1fr; }
  .k8s-info { grid-template-columns: 1fr; }
  .leakage-blocks { grid-template-columns: repeat(3, 1fr); }
  .circuit-breaker-grid { flex-direction: column; }
  .cb-arrow { transform: rotate(90deg); }
  .ensemble-row { flex-direction: column; align-items: center; }
  .cicd-pipeline { flex-direction: column; }
  .lang-toggle { display: none; }
}

@media (max-width: 375px) {
  .kpi-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .signal-pulse { animation: none; }
  .phase-section { opacity: 1; animation: none; }
  .pace-indicator.hyper { animation: none; }
  .chart-skeleton { animation: none; }
}

/* ===================== v5: MODEL ACCURACY METRICS ===================== */
.model-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.model-metric-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.model-metric-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.model-metric-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.model-metric-target {
  font-size: 10px;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.model-metric-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
}
.model-metric-bar-wrap {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
  margin-top: var(--space-1);
}
.model-metric-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.model-metric-bar.success {
  background: var(--color-success);
}
.model-metric-note {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.model-verdict {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.model-verdict.pass {
  background: rgba(46, 139, 87, 0.12);
  color: var(--color-success);
}
.model-verdict.warn {
  background: rgba(212, 118, 44, 0.12);
  color: var(--color-warning);
}

@media (max-width: 900px) {
  .model-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .model-metrics-grid { grid-template-columns: 1fr; }
  .model-metric-value { font-size: 22px; }
}

/* ===================== v6: SECURE ENTRY GATE ===================== */
.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  width: 100%;
  max-width: 440px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  border-top: 4px solid var(--color-primary);
}

.login-logo {
  width: 48px;
  height: 48px;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.login-card h2 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  margin-bottom: var(--space-2);
  color: var(--color-text);
}

.login-card p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}

.input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

#accessCodeInput {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-2);
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.2em;
  font-size: var(--text-base);
  color: var(--color-text);
  box-sizing: border-box;
}

#accessCodeInput:focus {
  border-color: var(--color-primary);
  outline: none;
}

#accessCodeInput::placeholder {
  color: var(--color-text-faint);
  letter-spacing: 0.1em;
}

.access-submit-btn {
  padding: var(--space-3) var(--space-4);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-interactive);
}
.access-submit-btn:hover {
  filter: brightness(1.1);
}

.error-msg {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-error-highlight);
  color: var(--color-error);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

.login-footer-info {
  margin-top: var(--space-6);
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.login-security-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

.login-security-badge svg {
  color: var(--color-success);
}

/* Suspended overlay variation */
.suspended-overlay {
  background: var(--color-bg);
}
.suspended-card {
  border-top-color: var(--color-error);
}
.suspended-code-display {
  margin-top: var(--space-4);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* ===================== v6: SUBSCRIPTION STATUS BANNER ===================== */
.subscription-banner {
  display: none;
  padding: var(--space-3) var(--space-4);
  background: var(--color-warning-highlight);
  border-bottom: 2px solid var(--color-warning);
  text-align: center;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-warning);
  position: sticky;
  top: 0;
  z-index: 40;
}
.subscription-banner.visible {
  display: block;
}
.subscription-banner svg {
  vertical-align: middle;
  margin-right: var(--space-1);
}

/* ===================== v6: SECURITY MONITORING ===================== */
.security-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.security-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}

.security-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.security-card-header h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-base);
}

.security-card-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}
.security-card-status.active {
  background: color-mix(in oklch, var(--color-success) 12%, var(--color-surface));
  color: var(--color-success);
}
.security-card-status.warning {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}

.security-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.security-stat {
  padding: var(--space-2);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
}
.security-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.security-stat-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}

/* ===================== v6: KILL-SWITCH WORKFLOW ===================== */
.killswitch-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}

.ks-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  min-width: 130px;
  text-align: center;
}
.ks-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}
.ks-step-tool {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.ks-arrow {
  color: var(--color-primary);
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* ===================== v6: ACCESS LEVELS TABLE ===================== */
.access-levels-table td:first-child {
  font-weight: 600;
}
.access-method-badge {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  font-family: 'JetBrains Mono', monospace;
}

/* ===================== v6: DOCUMENTATION SECTIONS ===================== */
.doc-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.doc-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.doc-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.doc-card ul li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.doc-card ul li:last-child {
  border-bottom: none;
}
.doc-card ul li::before {
  content: "\25CF";
  color: var(--color-primary);
  font-size: var(--text-xs);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ===================== v6: AUDIT LOG ===================== */
.audit-log {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}
.audit-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs);
}
.audit-entry:last-child { border-bottom: none; }
.audit-time {
  color: var(--color-text-faint);
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.audit-action {
  color: var(--color-text-muted);
  flex: 1;
}
.audit-user {
  color: var(--color-primary);
  font-weight: 600;
  white-space: nowrap;
}

/* ===================== v7: WECHAT ALERT ARCHITECTURE ===================== */
.wechat-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  padding: var(--space-4) 0;
}
.wechat-flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  min-width: 120px;
}
.wechat-flow-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wechat-flow-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}
.wechat-flow-sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.wechat-flow-arrow {
  color: #07C160;
  font-size: var(--text-lg);
  flex-shrink: 0;
}

/* WeChat Controls */
.wechat-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
@media (max-width: 640px) {
  .wechat-controls { grid-template-columns: 1fr; }
}
.wechat-control-group {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.wechat-control-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
  display: block;
  margin-bottom: var(--space-3);
}

/* Channel Toggles */
.channel-toggles {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.channel-toggle-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}
.channel-toggle-item:hover {
  background: var(--color-surface);
}
.channel-checkbox {
  display: none;
}
.channel-toggle-box {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--color-divider);
  position: relative;
  transition: background 0.2s ease;
  flex-shrink: 0;
}
.channel-toggle-box::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: transform 0.2s ease;
}
.channel-checkbox:checked + .channel-toggle-box {
  background: #07C160;
}
.channel-checkbox:checked + .channel-toggle-box::after {
  transform: translateX(16px);
}
.channel-toggle-text {
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

/* Veto Statistics */
.veto-stat-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-3);
}
@media (max-width: 768px) {
  .veto-stat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .veto-stat-grid { grid-template-columns: repeat(2, 1fr); }
}
.veto-stat-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
}
.veto-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.veto-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lg);
}

/* ===================== v7: SIGNAL TYPE ACTION MATRIX ===================== */
.signal-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
@media (max-width: 640px) {
  .signal-type-grid { grid-template-columns: 1fr; }
}
.signal-type-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color 0.3s ease;
}
.signal-type-card.active-signal {
  border-color: var(--color-warning);
  box-shadow: 0 0 0 1px var(--color-warning);
}
.signal-type-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.signal-type-badge {
  font-size: var(--text-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.signal-type-badge.increase {
  background: var(--color-success-highlight);
  color: var(--color-success);
}
.signal-type-badge.decrease {
  background: var(--color-error-highlight);
  color: var(--color-error);
}
.signal-type-badge.hold {
  background: color-mix(in oklch, var(--color-text-muted) 12%, var(--color-surface));
  color: var(--color-text-muted);
}
.signal-type-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-sm);
}
.signal-type-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-warning);
  padding: var(--space-2) var(--space-3);
  background: var(--color-warning-highlight);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.signal-type-warning svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.signal-type-status {
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--color-text-muted) 10%, var(--color-surface));
  color: var(--color-text-muted);
  align-self: flex-start;
  transition: all 0.3s ease;
}
.signal-type-status.triggered {
  background: var(--color-warning-highlight);
  color: var(--color-warning);
}
.signal-type-status.active-alert {
  background: var(--color-error-highlight);
  color: var(--color-error);
  animation: pulse-status 1.5s ease infinite;
}
@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* ===================== v7.1: ADMIN PANEL ===================== */
.admin-generator {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.generator-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}
.generator-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.generator-field label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.admin-input,
.admin-select {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s;
}
.admin-input:focus,
.admin-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(201, 149, 43, 0.15);
}
.admin-input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}
.generator-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.btn-admin-generate {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: var(--text-sm);
  font-weight: 600;
  font-family: 'Space Grotesk', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.btn-admin-generate:hover {
  background: #b8862a;
  transform: translateY(-1px);
}
.btn-admin-generate:active {
  transform: translateY(0);
}
.generated-code-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(201, 149, 43, 0.08);
  border: 1px dashed var(--color-primary);
  border-radius: 8px;
  animation: fadeSlideIn 0.3s ease;
}
.generated-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.generated-code-value {
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
}
.btn-copy-code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.2s;
}
.btn-copy-code:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Admin Codes Table status badges */
.admin-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-status-badge.status-active {
  background: rgba(16, 185, 129, 0.12);
  color: #059669;
}
.admin-status-badge.status-pending {
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
}
.admin-status-badge.status-withdrawn {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}
.admin-status-badge .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.status-active .status-dot { background: #059669; }
.status-pending .status-dot { background: #d97706; }
.status-withdrawn .status-dot { background: #dc2626; }

/* Admin action buttons */
.admin-actions {
  display: flex;
  gap: var(--space-2);
}
.btn-admin-action {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: 'Inter', sans-serif;
}
.btn-admin-action:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}
.btn-admin-action.btn-danger {
  color: #dc2626;
  border-color: rgba(239, 68, 68, 0.3);
}
.btn-admin-action.btn-danger:hover {
  background: rgba(239, 68, 68, 0.08);
  border-color: #dc2626;
}

/* Admin Stats Grid */
.admin-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.admin-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-5) var(--space-4);
  border-radius: 12px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
  transition: transform 0.2s;
}
.admin-stat-card:hover {
  transform: translateY(-2px);
}
.admin-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text);
}
.admin-stat-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: var(--space-1);
}
.stat-active .admin-stat-value { color: #059669; }
.stat-pending .admin-stat-value { color: #d97706; }
.stat-withdrawn .admin-stat-value { color: #dc2626; }

/* Audit Log */
.admin-audit-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 300px;
  overflow-y: auto;
  padding-right: var(--space-2);
}
.audit-entry {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  font-size: var(--text-sm);
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
}
.audit-time {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-family: 'Space Grotesk', monospace;
  min-width: 80px;
}
.audit-action {
  color: var(--color-text);
}

/* Responsive */
@media (max-width: 768px) {
  .generator-controls {
    grid-template-columns: 1fr;
  }
  .admin-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .generator-actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .generated-code-display {
    width: 100%;
  }
}

@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===================== v8: SUPPLY-SIDE INTELLIGENCE ===================== */

/* OTA Channel Inventory */
.ota-inventory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.ota-channel-card {
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
}
.ota-channel-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ota-channel-icon {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}
.ota-channel-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.ota-inv-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-1);
  font-size: var(--text-xs);
}
.ota-inv-label { color: var(--color-text-muted); }
.ota-inv-value { font-weight: 700; font-family: 'Space Grotesk', monospace; color: var(--color-text); }
.ota-inv-status {
  font-weight: 600;
  font-size: var(--text-xs);
  padding: 1px 8px;
  border-radius: 10px;
}
.ota-inv-status.tight { background: rgba(239,68,68,0.12); color: #dc2626; }
.ota-inv-status.moderate { background: rgba(245,158,11,0.12); color: #d97706; }
.ota-inv-status.normal { background: rgba(16,185,129,0.12); color: #059669; }
.ota-inv-bar {
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  margin-top: var(--space-2);
  overflow: hidden;
}
.ota-inv-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}

/* Regional Supply Features */
.supply-feature-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.supply-feature-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
}
.supply-feature-rank {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
}
.supply-feature-body { flex: 1; }
.supply-feature-body strong {
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-sm);
  color: var(--color-text);
}
.supply-feature-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  line-height: 1.4;
}
.supply-feature-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: visible;
  position: relative;
}
.supply-feature-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease;
}
.supply-feature-bar span {
  position: absolute;
  right: 0;
  top: -16px;
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: 'Space Grotesk', monospace;
}

/* Zhuhai Cross-Border Module */
.zhuhai-module {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.zhuhai-controls {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.zhuhai-indicators {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
}
.zhuhai-indicator-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
  text-align: center;
}
.zhuhai-ind-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.zhuhai-ind-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-1) 0;
}
.zhuhai-ind-sub {
  font-size: 10px;
  color: var(--color-text-muted);
  line-height: 1.3;
}
.zhuhai-alert {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: rgba(225, 29, 72, 0.08);
  border: 1px solid rgba(225, 29, 72, 0.3);
  color: #E11D48;
  font-size: var(--text-sm);
  font-weight: 500;
  animation: fadeSlideIn 0.3s ease;
}

/* Supply Scarcity Alert Panel */
.scarcity-alert-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.scarcity-gauge-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}
.scarcity-gauge-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.scarcity-gauge-value {
  font-family: 'Space Grotesk', monospace;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
}
.scarcity-gauge-bar {
  height: 12px;
  background: var(--color-border);
  border-radius: 6px;
  overflow: visible;
  position: relative;
}
.scarcity-gauge-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #dc2626, #f59e0b, #059669);
  transition: width 0.8s ease;
}
.scarcity-threshold-marker {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 20px;
  background: var(--color-text-muted);
  opacity: 0.5;
}
.scarcity-threshold-marker span {
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--color-text-muted);
  font-family: 'Space Grotesk', monospace;
}
.scarcity-gauge-scale {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.scarcity-status {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
}
.scarcity-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scarcity-status-icon.normal { background: rgba(16,185,129,0.12); color: #059669; }
.scarcity-status-icon.warning { background: rgba(245,158,11,0.12); color: #d97706; }
.scarcity-status-icon.critical { background: rgba(239,68,68,0.12); color: #dc2626; }
.scarcity-status-text strong { font-size: var(--text-sm); color: var(--color-text); }
.scarcity-status-text p { font-size: var(--text-xs); color: var(--color-text-muted); margin-top: 2px; }

/* Max Yield Toggle */
.max-yield-toggle { margin-top: var(--space-2); }
.max-yield-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.max-yield-checkbox { display: none; }
.max-yield-switch {
  width: 44px;
  height: 24px;
  background: var(--color-border);
  border-radius: 12px;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
}
.max-yield-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.max-yield-checkbox:checked + .max-yield-switch {
  background: #dc2626;
}
.max-yield-checkbox:checked + .max-yield-switch::after {
  transform: translateX(20px);
}
.max-yield-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

/* Cross-Category Spillover */
.spillover-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.spillover-tier {
  width: 100%;
  max-width: 500px;
  padding: var(--space-3) var(--space-4);
  border-radius: 10px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
}
.spillover-tier.spillover-target {
  border-color: var(--color-primary);
  border-width: 2px;
}
.spillover-tier-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}
.spillover-star {
  color: var(--color-primary);
  font-size: var(--text-xs);
  letter-spacing: -1px;
}
.spillover-vacancy-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.spillover-vacancy-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.6s ease;
}
.spillover-vacancy-info {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
}
.spillover-vacancy-pct {
  font-family: 'Space Grotesk', monospace;
  font-weight: 600;
  color: var(--color-text);
}
.spillover-vacancy-status {
  color: var(--color-text-muted);
  font-weight: 500;
}
.spillover-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: var(--space-1) 0;
}
.spillover-trigger-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: 6px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.spillover-trigger-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-text-muted);
  flex-shrink: 0;
}
.spillover-trigger-status.active {
  background: rgba(139, 92, 246, 0.08);
  color: #8B5CF6;
  border: 1px solid rgba(139, 92, 246, 0.2);
}
.spillover-trigger-status.active .spillover-trigger-dot {
  background: #8B5CF6;
  animation: pulse-status 1.5s infinite;
}

/* Supply Attrition Index */
.attrition-composite {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.attrition-factor {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4);
  border-radius: 10px;
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  border: 1px solid var(--color-border);
  min-width: 160px;
}
.attrition-factor-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.attrition-factor-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin: var(--space-1) 0;
}
.attrition-factor-bar {
  width: 100%;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}
.attrition-factor-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s ease;
}
.attrition-operator {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-muted);
}
.attrition-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-radius: 10px;
  background: var(--color-primary);
  color: #fff;
  min-width: 160px;
}
.attrition-result-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  opacity: 0.8;
}
.attrition-result-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--text-2xl);
  font-weight: 700;
  margin: var(--space-1) 0;
}
.attrition-result-strategy {
  font-size: var(--text-xs);
  font-weight: 500;
  opacity: 0.9;
}

/* ===================== v9: SHADOW MODE ===================== */
.shadow-timeline {
  position: relative;
  padding-left: var(--space-6);
}
.shadow-timeline::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}
.shadow-milestone {
  position: relative;
  padding-bottom: var(--space-5);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.shadow-milestone:last-child { padding-bottom: 0; }
.shadow-milestone-dot {
  position: absolute;
  left: calc(-1 * var(--space-6) + 4px);
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  z-index: 1;
}
.shadow-milestone.active .shadow-milestone-dot {
  border-color: #6366F1;
  background: #6366F1;
  box-shadow: 0 0 0 4px color-mix(in oklch, #6366F1 20%, transparent);
}
.shadow-milestone-body strong {
  font-size: var(--text-sm);
  color: var(--color-text);
}
.shadow-milestone-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ===================== v9: PEAK LEAKAGE ===================== */
.peak-heatmap {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.peak-heatmap-cell {
  aspect-ratio: 1.6;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text);
  transition: transform 0.2s ease;
  cursor: default;
  position: relative;
}
.peak-heatmap-cell:hover {
  transform: scale(1.08);
  z-index: 1;
}
.peak-heatmap-cell.peak-window {
  outline: 2px solid #DC2626;
  outline-offset: -1px;
}
.peak-heatmap-cell .cell-hour {
  font-size: 9px;
  opacity: 0.7;
}
.peak-heatmap-cell .cell-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
}
.peak-heatmap-legend {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  justify-content: center;
}
.peak-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.peak-legend-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* ===================== v9: MANAGER TRAINING ===================== */
.training-progress-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.training-progress-item {
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  padding: var(--space-3) var(--space-4);
  border-radius: 8px;
}
.training-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.training-progress-pct {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  color: #0EA5E9;
}
.training-progress-bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.training-progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.8s ease;
}
.training-guide-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.training-guide-card {
  background: var(--color-surface-alt, rgba(0,0,0,0.02));
  padding: var(--space-4);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.training-guide-card h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-2);
}
.training-guide-card p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.6;
}
.training-decision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.training-decision-card {
  padding: var(--space-4);
  border-radius: 10px;
  border: 1px solid var(--color-border);
}
.training-decision-card.approve {
  background: color-mix(in oklch, var(--color-success) 5%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-success) 30%, var(--color-border));
}
.training-decision-card.veto {
  background: color-mix(in oklch, var(--color-error) 5%, var(--color-surface));
  border-color: color-mix(in oklch, var(--color-error) 30%, var(--color-border));
}
.training-decision-card h4 {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}
.training-decision-card li {
  margin-bottom: var(--space-1);
  color: var(--color-text-muted);
}
.training-peak-tips {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.training-tip {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.training-tip-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #DC2626;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: var(--text-sm);
}
.training-tip strong {
  font-size: var(--text-sm);
  color: var(--color-text);
}
.training-tip p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Responsive */
@media (max-width: 768px) {
  .ota-inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .zhuhai-controls { grid-template-columns: 1fr; }
  .zhuhai-indicators { grid-template-columns: repeat(2, 1fr); }
  .attrition-composite { flex-direction: column; }
  .attrition-operator { transform: rotate(90deg); }
  .peak-heatmap { grid-template-columns: repeat(4, 1fr); }
  .training-guide-grid { grid-template-columns: 1fr; }
  .training-decision-grid { grid-template-columns: 1fr; }
}

/* ===================== v10: VALUE CAPTURE ENGINE ===================== */

/* Section header with badge */
.section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.version-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
}

/* VC KPI Grid — 4 columns, responsive */
.vc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

@media (max-width: 640px) {
  .vc-kpi-grid { grid-template-columns: 1fr; }
}

/* VC KPI Card */
.vc-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--vc-accent, #10B981);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive);
}

.vc-kpi-card:hover {
  box-shadow: var(--shadow-md);
}

.vc-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.vc-kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.vc-kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.vc-kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--vc-accent, #10B981);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.vc-kpi-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* VC Panel */
.vc-panel {
  border-left: 4px solid #10B981;
}

/* Ceiling Status Row */
.vc-ceiling-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.vc-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Active ceiling row highlight */
.vc-ceiling-active td {
  background: color-mix(in oklch, #10B981 8%, var(--color-surface));
  font-weight: 600;
}

/* Condition rows for Peak Urgency panel */
.vc-conditions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.vc-condition-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  transition: background var(--transition-interactive);
}

.vc-condition-row.vc-cond-active {
  background: color-mix(in oklch, #10B981 8%, var(--color-surface));
  border-color: color-mix(in oklch, #10B981 40%, var(--color-divider));
}

.vc-condition-icon {
  font-size: var(--text-base);
  font-weight: 700;
  width: 24px;
  text-align: center;
  color: var(--color-text-faint);
  flex-shrink: 0;
}

.vc-condition-row.vc-cond-active .vc-condition-icon {
  color: #10B981;
}

.vc-condition-label {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}

.vc-condition-status {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.vc-condition-row.vc-cond-active .vc-condition-status {
  color: #10B981;
}

/* Urgency Result Banner */
.vc-urgency-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-divider);
}

.vc-urgency-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
}

.vc-urgency-badge {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
  transition: all var(--transition-interactive);
}

.vc-urgency-badge.vc-urgency-active {
  background: color-mix(in oklch, #10B981 15%, var(--color-surface));
  color: #10B981;
  border: 1px solid color-mix(in oklch, #10B981 40%, transparent);
}

/* Advisory Stack */
.vc-advisory-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.vc-advisory-level {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
  opacity: 0.45;
  transition: all var(--transition-interactive);
}

.vc-advisory-level.vc-advisory-active {
  opacity: 1;
  border-color: currentColor;
  box-shadow: var(--shadow-md);
}

#vcAdvisoryNormal.vc-advisory-active {
  background: color-mix(in oklch, #10B981 8%, var(--color-surface));
  border-color: color-mix(in oklch, #10B981 50%, transparent);
}

#vcAdvisoryReduce.vc-advisory-active {
  background: color-mix(in oklch, #F59E0B 8%, var(--color-surface));
  border-color: color-mix(in oklch, #F59E0B 50%, transparent);
}

#vcAdvisoryClose.vc-advisory-active {
  background: color-mix(in oklch, #EF4444 8%, var(--color-surface));
  border-color: color-mix(in oklch, #EF4444 50%, transparent);
}

.vc-advisory-indicator {
  font-size: var(--text-lg);
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.vc-advisory-body strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.vc-advisory-body p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin: 0;
}

/* ===================== v11: POLICY ADAPTATION ENGINE ===================== */

/* PA KPI Grid — 4 columns, responsive */
.pa-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

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

@media (max-width: 640px) {
  .pa-kpi-grid { grid-template-columns: 1fr; }
}

/* PA KPI Card */
.pa-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-top: 3px solid var(--pa-accent, #F59E0B);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-interactive);
}

.pa-kpi-card:hover {
  box-shadow: var(--shadow-md);
}

.pa-kpi-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-2);
}

.pa-kpi-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.pa-kpi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pa-kpi-value {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--pa-accent, #F59E0B);
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1.2;
  margin-bottom: var(--space-1);
}

.pa-kpi-sub {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* PA Monitor Row — 3 equal columns */
.pa-monitor-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

@media (max-width: 1100px) {
  .pa-monitor-row { grid-template-columns: 1fr; }
}

/* PA Monitor Panel — amber left border */
.pa-monitor-panel {
  border-left: 4px solid #F59E0B;
  margin-bottom: 0;
}

/* PA Status Badges for the macro table */
.pa-status-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pa-status-active {
  background: color-mix(in oklch, #F59E0B 12%, var(--color-surface));
  color: #d97706;
}

.pa-status-record {
  background: var(--color-error-highlight);
  color: var(--color-error);
}

.pa-status-tracking {
  background: var(--color-success-highlight);
  color: var(--color-success);
}

/* Supply Timeline */
.pa-supply-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.pa-supply-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.pa-supply-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.pa-supply-body {
  flex: 1;
}

.pa-supply-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}

.pa-supply-header strong {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
}

.pa-supply-weight {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-family: 'JetBrains Mono', monospace;
}

.pa-supply-detail {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.4;
}

.pa-supply-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  border: 1px solid var(--color-divider);
}

.pa-supply-total strong {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* PA Controls Panel */
.pa-controls-panel {
  border-left: 4px solid #F59E0B;
  margin-bottom: 0;
}

.pa-control-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.pa-control-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pa-control-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pa-control-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.pa-control-val {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Aggression Slider Gauge */
.pa-slider-gauge {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.pa-gauge-tick {
  font-size: 10px;
  color: var(--color-text-faint);
  text-align: center;
  line-height: 1.3;
  flex-shrink: 0;
}

.pa-gauge-tick small {
  display: block;
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

.pa-gauge-tick-right {
  text-align: right;
}

.pa-gauge-track {
  flex: 1;
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  position: relative;
  overflow: visible;
}

.pa-gauge-fill {
  height: 100%;
  background: #F59E0B;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.pa-gauge-thumb {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background: #F59E0B;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  border: 2px solid var(--color-surface);
}

/* Drift Bar */
.pa-drift-bar-wrap {
  height: 10px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: visible;
  position: relative;
}

.pa-drift-fill {
  height: 100%;
  background: #10B981;
  border-radius: var(--radius-full);
  transition: width 0.6s ease;
}

.pa-drift-threshold {
  position: absolute;
  top: -3px;
  width: 2px;
  height: 16px;
  background: var(--color-error);
  opacity: 0.6;
  transform: translateX(-50%);
}

.pa-drift-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-faint);
  margin-top: var(--space-1);
}

/* Yield Bar */
.pa-yield-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 8px;
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  overflow: hidden;
  position: relative;
}

.pa-yield-fill {
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, #10B981 0%, #F59E0B 100%);
  border-radius: var(--radius-full);
}

.pa-yield-label {
  position: absolute;
  right: 0;
  top: 12px;
  font-size: 10px;
  color: var(--color-success);
  font-weight: 600;
  white-space: nowrap;
}

/* Retrain Status */
.pa-retrain-status {
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-divider);
}

.pa-retrain-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.pa-retrain-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
  animation: pulse 2s ease-in-out infinite;
}

.pa-retrain-text {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-success);
}

/* PA Traffic Impact */
.pa-traffic-impact {
  border-left: 4px solid #10B981;
  margin-bottom: var(--space-6);
}

.pa-traffic-comparison {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

.pa-traffic-col {
  flex: 1;
}

.pa-traffic-col-header {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-3);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}

.pa-traffic-without {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
}

.pa-traffic-with {
  background: color-mix(in oklch, #10B981 10%, var(--color-surface));
  color: #10B981;
}

.pa-traffic-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
}

.pa-traffic-bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  transition: height 0.4s ease;
}

.pa-traffic-bar-without {
  background: color-mix(in oklch, var(--color-text-muted) 35%, var(--color-surface));
}

.pa-traffic-bar-with {
  background: color-mix(in oklch, #10B981 50%, var(--color-surface));
}

.pa-traffic-divider {
  display: flex;
  align-items: center;
  padding-top: 48px;
  flex-shrink: 0;
}

.pa-traffic-legend {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}

.pa-traffic-hours {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-faint);
  font-variant-numeric: tabular-nums;
  padding: 0 2px;
  margin-top: var(--space-1);
}

/* Animation delay for policy-adaptation section */
#policy-adaptation { animation-delay: 0.7s; }