@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&display=swap');
:root {
  --surface-page: #0d1021;
  --surface-page-linear-1: #0a0d1c;
  --surface-page-linear-2: #090c1a;
  --surface-page-linear-3: #0b1126;
  --surface-radial-1: rgba(96,164,255,0.18);
  --surface-radial-2: rgba(124,243,194,0.18);
  --surface-card: rgba(255,255,255,0.06);
  --surface-glass: rgba(255,255,255,0.14);
  --surface-muted: rgba(255,255,255,0.04);
  --surface-muted-2: rgba(255,255,255,0.02);
  --surface-elevated: #17181b;
  --surface-elevated-2: #1e1f23;
  --surface-live: #141416;
  --surface-live-card: #1d1d1f;
  --surface-live-line: #2a2a2d;
  --surface-input: rgba(255,255,255,0.06);
  --surface-chip: rgba(255,255,255,0.08);
  --surface-overlay: rgba(255,255,255,0.03);
  --text-primary: #e9edf4;
  --text-muted: #a6b0c3;
  --text-on-accent: #0b0d1c;
  --border-subtle: rgba(255,255,255,0.08);
  --border-muted: rgba(255,255,255,0.06);
  --border-strong: rgba(255,255,255,0.12);
  --accent-primary: #7cf3c2;
  --accent-secondary: #60a4ff;
  --accent-strong: #4aa3ff;
  --status-danger: #ff8a8a;
  --status-warning: #ff7a7a;
  --status-success: #45d07d;
  --status-red: #ff3b30;
  --status-orange: #ff7a18;
  --status-yellow: #ffd60a;
  --status-green: #34c759;
  --status-cyan: #64d2ff;
  --status-blue: #0a84ff;
  --temp-line-normal: #ff7a7a;
  --temp-line-alert: #ff1e1e;
  --temp-alert-glow: rgba(255,30,30,0.25);
  --centroid-line-start: #5fe0ff;
  --centroid-line-end: #a6f0ff;
  --centroid-line-highlight: #c2f4ff;
  --centroid-line-glow: rgba(96,200,255,0.35);
  --rotation-bubble-bg: rgba(10,18,28,0.55);
  --rotation-bubble-border: rgba(120,200,255,0.25);
  --rotation-bubble-shadow: 0 12px 28px rgba(0,0,0,0.35), 0 0 18px rgba(96,200,255,0.12);
  --rotation-bubble-title: rgba(230,245,255,0.95);
  --rotation-bubble-body: rgba(200,220,235,0.85);
  --rotation-bubble-meta: rgba(180,210,235,0.9);
  --band-stable: rgba(52,199,89,0.12);
  --band-warning: rgba(255,214,10,0.12);
  --band-critical: rgba(255,59,48,0.14);
  --chart-baseline: rgba(255,255,255,0.4);
  --stability-ok: var(--status-green);
  --stability-warning: var(--status-yellow);
  --stability-critical: var(--status-red);
  --chart-grid: rgba(255,255,255,0.08);
  --chart-label: rgba(255,255,255,0.5);
  --chart-label-weak: rgba(255,255,255,0.45);
  --shadow-card: 0 20px 50px rgba(0,0,0,0.25);
  --shadow-soft: 0 12px 28px rgba(0,0,0,0.35);
  --shadow-strong: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-node: 0 6px 14px rgba(0,0,0,0.25);
  --shadow-center: 0 12px 28px rgba(0,0,0,0.3);
  --shadow-group: 0 12px 30px rgba(0,0,0,0.25);
  --shadow-chart: 0 12px 24px rgba(0,0,0,0.28);
  --shadow-accent-1: 0 12px 30px rgba(124,243,194,0.18);
  --shadow-accent-2: 0 10px 24px rgba(96,164,255,0.14);
  --glow-success: 0 0 10px rgba(69,208,125,0.6);
  --shadow-dot: rgba(0,0,0,0.12);
  --surface-hub: #0f1116;
  --surface-badge: rgba(12,14,18,0.7);
  --live-panel-bg: linear-gradient(180deg, rgba(20,20,22,0.9), rgba(15,15,17,0.95));

  --bg: var(--surface-page);
  --card: var(--surface-card);
  --glass: var(--surface-glass);
  --accent: var(--accent-primary);
  --accent-2: var(--accent-secondary);
  --text: var(--text-primary);
  --muted: var(--text-muted);
  --danger: var(--status-danger);
  --live-bg: var(--surface-live);
  --live-card: var(--surface-live-card);
  --live-line: var(--surface-live-line);
  --live-accent: var(--accent-strong);
  --live-success: var(--status-success);
  --live-warning: var(--status-warning);
}

[data-theme="light"] {
  --surface-page: #f5f7fb;
  --surface-page-linear-1: #ffffff;
  --surface-page-linear-2: #f1f4f9;
  --surface-page-linear-3: #e9eef6;
  --surface-radial-1: rgba(96,164,255,0.22);
  --surface-radial-2: rgba(124,243,194,0.18);
  --surface-card: rgba(15,27,45,0.06);
  --surface-glass: rgba(15,27,45,0.12);
  --surface-muted: rgba(15,27,45,0.04);
  --surface-muted-2: rgba(15,27,45,0.03);
  --surface-elevated: #ffffff;
  --surface-elevated-2: #f6f8fc;
  --surface-live: #eef2f7;
  --surface-live-card: #ffffff;
  --surface-live-line: #dbe3ee;
  --surface-input: rgba(15,27,45,0.06);
  --surface-chip: rgba(15,27,45,0.08);
  --surface-overlay: rgba(15,27,45,0.03);
  --text-primary: #0c1626;
  --text-muted: #546478;
  --text-on-accent: #0f1b2d;
  --border-subtle: rgba(15,27,45,0.14);
  --border-muted: rgba(15,27,45,0.1);
  --border-strong: rgba(15,27,45,0.22);
  --temp-line-normal: #e55353;
  --temp-line-alert: #b80000;
  --temp-alert-glow: rgba(184,0,0,0);
  --centroid-line-start: #3ea7ff;
  --centroid-line-end: #7cc7ff;
  --centroid-line-highlight: #5ab8ff;
  --centroid-line-glow: rgba(62,167,255,0.25);
  --rotation-bubble-bg: rgba(245,250,255,0.75);
  --rotation-bubble-border: rgba(0,120,180,0.18);
  --rotation-bubble-shadow: 0 10px 22px rgba(15,27,45,0.12);
  --rotation-bubble-title: rgba(15,25,35,0.92);
  --rotation-bubble-body: rgba(35,55,70,0.86);
  --rotation-bubble-meta: rgba(20,50,70,0.9);
  --band-stable: rgba(52,199,89,0.14);
  --band-warning: rgba(255,214,10,0.14);
  --band-critical: rgba(184,0,0,0.16);
  --chart-baseline: rgba(15,27,45,0.45);
  --chart-grid: rgba(15,27,45,0.12);
  --chart-label: rgba(15,27,45,0.6);
  --chart-label-weak: rgba(15,27,45,0.5);
  --shadow-card: 0 18px 40px rgba(15,27,45,0.12);
  --shadow-soft: 0 12px 24px rgba(15,27,45,0.12);
  --shadow-strong: 0 20px 50px rgba(15,27,45,0.18);
  --shadow-node: 0 6px 14px rgba(15,27,45,0.16);
  --shadow-center: 0 12px 28px rgba(15,27,45,0.18);
  --shadow-group: 0 12px 30px rgba(15,27,45,0.16);
  --shadow-chart: 0 12px 24px rgba(15,27,45,0.14);
  --shadow-accent-1: 0 12px 30px rgba(96,164,255,0.16);
  --shadow-accent-2: 0 10px 24px rgba(96,164,255,0.12);
  --glow-success: 0 0 10px rgba(69,208,125,0.4);
  --shadow-dot: rgba(15,27,45,0.12);
  --surface-hub: #ffffff;
  --surface-badge: rgba(255,255,255,0.8);
  --live-panel-bg: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(244,247,252,0.95));
}