/* ─────────────────────────────────────────────────────────────────────────
   Cosmic Premium Design System — ported into the Bootstrap MI app.
   Tokens taken VERBATIM from .claude/skills/ui-design-system/assets/design-system.css.
   LIGHT lives on :root; DARK under [data-bs-theme="dark"] (the skill ships
   [data-theme]; we adapt the selector to Bootstrap's data-bs-theme).
   Dark is the default first paint (index.html sets data-bs-theme="dark").
   app.css loads AFTER bootstrap, so we layer on top — every existing class/
   helper view lanes rely on is preserved; new tokens/classes are additive.
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Core Brand ── */
  --color-primary: hsl(266 90% 64%);
  --color-primary-light: hsl(270 94% 74%);
  --color-primary-dark: hsl(262 82% 54%);
  --color-accent: hsl(330 90% 60%);
  --color-accent-light: hsl(330 94% 70%);
  --gradient-brand: linear-gradient(135deg, hsl(266 92% 64%), hsl(296 88% 62%) 48%, hsl(330 96% 64%));

  /* ── Status / Severity System ── */
  --color-info: hsl(215 90% 58%);
  --color-info-bg: hsl(215 90% 58% / 0.08);
  --color-info-border: hsl(215 90% 58% / 0.20);
  --color-success: hsl(155 70% 40%);
  --color-success-bg: hsl(155 70% 40% / 0.08);
  --color-success-border: hsl(155 70% 40% / 0.20);
  --color-warning: hsl(42 95% 52%);
  --color-warning-bg: hsl(42 95% 52% / 0.08);
  --color-warning-border: hsl(42 95% 52% / 0.20);
  --color-danger: hsl(4 80% 58%);
  --color-danger-bg: hsl(4 80% 58% / 0.08);
  --color-danger-border: hsl(4 80% 58% / 0.20);
  --color-critical: hsl(338 80% 52%);
  --color-critical-bg: hsl(338 80% 52% / 0.08);
  --color-critical-border: hsl(338 80% 52% / 0.20);

  /* ── Surfaces (Refined Light) ── */
  --surface-0: hsl(220 25% 99%);
  --surface-50: hsl(220 22% 97%);
  --surface-100: hsl(220 18% 95%);
  --surface-200: hsl(220 15% 91%);
  --surface-300: hsl(220 12% 83%);
  --surface-400: hsl(220 10% 70%);
  --surface-500: hsl(220 8% 55%);
  --surface-600: hsl(220 10% 40%);
  --surface-700: hsl(220 14% 26%);
  --surface-800: hsl(220 18% 16%);
  --surface-900: hsl(220 22% 9%);

  /* ── Text ── */
  --text-primary: hsl(220 20% 10%);
  --text-secondary: hsl(220 10% 38%);
  --text-tertiary: hsl(220 8% 54%);
  --text-inverse: hsl(0 0% 100%);

  /* ── Borders ── */
  --border-default: hsl(220 16% 88%);
  --border-subtle: hsl(220 16% 93%);
  --border-strong: hsl(220 16% 78%);

  /* ── Glass ── */
  --glass-bg: rgba(255, 255, 255, 0.58);
  --glass-bg-strong: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.42);
  --glass-border-subtle: rgba(255, 255, 255, 0.18);
  --glass-blur: 10px;
  --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, rgba(255,255,255,0) 50%);

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.04), 0 2px 6px rgba(16,24,40,0.04);
  --shadow-md: 0 2px 4px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.06);
  --shadow-lg: 0 4px 8px rgba(16,24,40,0.04), 0 16px 32px rgba(16,24,40,0.08);
  --shadow-xl: 0 8px 16px rgba(16,24,40,0.05), 0 28px 56px rgba(16,24,40,0.10);
  --shadow-glass: 0 8px 32px rgba(16,24,40,0.06);
  --shadow-glow: 0 0 24px rgba(150,92,240,0.16);
  --shadow-glow-primary: 0 0 32px hsl(266 90% 64% / 0.12);
  --shadow-glow-accent: 0 0 32px hsl(330 90% 60% / 0.14);
  --hairline: inset 0 0 0 1px var(--border-subtle);

  /* ── Radii ── */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px;
  --radius-xl: 20px; --radius-2xl: 28px;

  /* ── Typography ── */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem;
  --text-3xl: 1.875rem; --text-4xl: 2.25rem;

  /* ── Spacing ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* ── Motion ── */
  --transition-fast: 150ms ease-out;
  --transition-base: 200ms ease-out;
  --transition-slow: 300ms ease-out;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Chart Palette (harmonious 8-color) ── */
  --chart-1: hsl(266 85% 60%);
  --chart-2: hsl(170 75% 42%);
  --chart-3: hsl(42 95% 52%);
  --chart-4: hsl(4 80% 58%);
  --chart-5: hsl(270 65% 58%);
  --chart-6: hsl(155 70% 40%);
  --chart-7: hsl(338 75% 55%);
  --chart-8: hsl(195 80% 48%);

  /* ─────────────────────────────────────────────────────────────────────
     BACK-COMPAT ALIASES — every --mi-* token the existing views/components
     already read maps onto a Cosmic token so nothing breaks. Keep these.
     ───────────────────────────────────────────────────────────────────── */
  --mi-bg: var(--surface-0);
  --mi-panel: var(--glass-bg-strong);
  --mi-panel-2: var(--surface-50);
  --mi-border: var(--border-default);
  --mi-accent: var(--color-primary);
  --mi-accent-strong: var(--color-primary-light);
  --mi-text: var(--text-primary);
  --mi-muted: var(--text-tertiary);
  --mi-hover: var(--surface-100);
  --mi-link: var(--color-primary);
  --mi-on-accent: var(--text-inverse);
  --mi-scroll-thumb: var(--surface-300);

  --mi-radius: var(--radius-lg);
  --mi-radius-sm: var(--radius-md);
  --mi-shadow-sm: var(--shadow-sm);
  --mi-shadow: var(--shadow-md);
  --mi-shadow-hover: var(--shadow-lg);
  --mi-shadow-pop: var(--shadow-xl);
  --mi-ring: 0 0 0 3.5px hsl(266 90% 64% / 0.16);
  --mi-trans: var(--transition-base);
  --mi-card-grad: var(--glass-bg-strong);
}

/* ═══════════════════════════════════════════════════════════════
   COSMIC DARK THEME (default first paint)
   ═══════════════════════════════════════════════════════════════ */
[data-bs-theme="dark"] {
  --color-primary: hsl(266 92% 66%);
  --color-primary-light: hsl(272 96% 76%);
  --color-primary-dark: hsl(262 82% 56%);
  --color-accent: hsl(330 92% 62%);
  --color-accent-light: hsl(330 96% 72%);

  /* Status colors — brighter for dark bg */
  --color-info: hsl(215 95% 65%);
  --color-info-bg: hsl(215 95% 65% / 0.10);
  --color-info-border: hsl(215 95% 65% / 0.22);
  --color-success: hsl(155 75% 48%);
  --color-success-bg: hsl(155 75% 48% / 0.10);
  --color-success-border: hsl(155 75% 48% / 0.22);
  --color-warning: hsl(42 100% 60%);
  --color-warning-bg: hsl(42 100% 60% / 0.10);
  --color-warning-border: hsl(42 100% 60% / 0.22);
  --color-danger: hsl(4 85% 62%);
  --color-danger-bg: hsl(4 85% 62% / 0.10);
  --color-danger-border: hsl(4 85% 62% / 0.22);
  --color-critical: hsl(338 85% 58%);
  --color-critical-bg: hsl(338 85% 58% / 0.12);
  --color-critical-border: hsl(338 85% 58% / 0.24);

  /* Deep space surfaces — even darker for cosmic feel */
  --surface-0: hsl(230 28% 4%);
  --surface-50: hsl(230 26% 6%);
  --surface-100: hsl(230 22% 9%);
  --surface-200: hsl(230 18% 13%);
  --surface-300: hsl(230 16% 20%);
  --surface-400: hsl(230 14% 32%);
  --surface-500: hsl(230 12% 46%);
  --surface-600: hsl(230 10% 60%);
  --surface-700: hsl(230 14% 76%);
  --surface-800: hsl(230 18% 87%);
  --surface-900: hsl(230 22% 94%);

  /* Text contrast bump for the deep-space surface-0. */
  --text-primary: hsl(220 18% 94%);
  --text-secondary: hsl(220 12% 70%);
  --text-tertiary: hsl(220 10% 52%);
  --text-inverse: hsl(228 22% 7%);

  /* Sharper borders so cards have a real visible edge in dark mode. */
  --border-default: hsl(228 16% 22%);
  --border-subtle: hsl(228 16% 16%);
  --border-strong: hsl(228 16% 32%);

  --glass-bg: rgba(10, 12, 20, 0.68);
  --glass-bg-strong: rgba(10, 12, 20, 0.85);
  --glass-border: rgba(255, 255, 255, 0.07);
  --glass-border-subtle: rgba(255, 255, 255, 0.03);
  --glass-highlight: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 50%);

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 2px 6px rgba(0,0,0,0.32);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.40), 0 6px 16px rgba(0,0,0,0.36);
  --shadow-lg: 0 4px 8px rgba(0,0,0,0.42), 0 16px 32px rgba(0,0,0,0.42);
  --shadow-xl: 0 8px 16px rgba(0,0,0,0.45), 0 28px 56px rgba(0,0,0,0.48);
  --shadow-glass: 0 8px 32px rgba(0,0,0,0.45);
  --shadow-glow: 0 0 30px rgba(96, 165, 250, 0.20);
  --shadow-glow-primary: 0 0 40px rgba(96, 165, 250, 0.28);
  --shadow-glow-accent: 0 0 40px rgba(240,80,170,0.26);

  /* Chart palette — higher saturation for dark bg */
  --chart-1: hsl(266 90% 64%);
  --chart-2: hsl(330 90% 60%);
  --chart-3: hsl(42 100% 60%);
  --chart-4: hsl(4 85% 62%);
  --chart-5: hsl(270 70% 64%);
  --chart-6: hsl(155 75% 48%);
  --chart-7: hsl(338 80% 60%);
  --chart-8: hsl(195 85% 55%);

  /* Back-compat ring uses the dark primary glow */
  --mi-ring: 0 0 0 3.5px hsl(266 90% 64% / 0.20);
}

/* ═══ RESET / BASE (layered over Bootstrap) ═══ */
* { scrollbar-color: var(--surface-300) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; margin: 4px 0; }
::-webkit-scrollbar-thumb {
  background: var(--surface-300);
  border-radius: 100px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover { background: var(--surface-400); }
::-webkit-scrollbar-corner { background: transparent; }
::selection { background: hsl(266 85% 60% / 0.18); color: var(--text-primary); }

body {
  background: var(--surface-0);
  color: var(--text-primary);
  font-family: var(--font-sans);
  /* Inter's character-variant alternates — makes it read like an Apple system face. */
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
  transition: background-color var(--transition-slow), color var(--transition-base);
}

/* Inter heading tracking — display sizes set notably negative. */
h1, .h1 { letter-spacing: -0.035em; }
h2, .h2 { letter-spacing: -0.025em; }
h3, .h3 { letter-spacing: -0.018em; }
h4, .h4 { letter-spacing: -0.012em; }

/* Tabular, lining figures for any number in a column or KPI. */
.tnum { font-feature-settings: 'tnum', 'lnum', 'cv02', 'cv03', 'cv04'; font-variant-numeric: tabular-nums lining-nums; }

/* Hero display number — heavy, very tight tracking, tabular. */
.display-figure {
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums lining-nums;
}

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-light); }

/* ── Login ── */
#login-screen { min-height: 100vh; display: grid; place-items: center; }
.login-card {
  width: 380px; max-width: 92vw; padding: 2.4rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--shadow-xl), var(--hairline);
  position: relative; z-index: 1;
}
.login-card .brand { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; }

/* ═══ GLASS SURFACES ═══ */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}

/* Hero glass surface — escalated glass treatment for prominent moments. */
.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  box-shadow: var(--shadow-glass);
  transition: transform 0.4s var(--spring-soft), box-shadow 0.4s var(--spring-soft), border-color 0.3s ease;
  position: relative; overflow: hidden;
  --mx: 50%; --my: 50%;
}
.glass-card::before {
  content: ''; position: absolute; inset: 0;
  background: var(--glass-highlight); pointer-events: none; border-radius: inherit;
}
.glass-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx) var(--my),
    hsl(220 95% 65% / 0.10), transparent 50%);
  opacity: 0; transition: opacity 0.4s var(--spring-soft); pointer-events: none;
}
.glass-card > * { position: relative; z-index: 1; }
.glass-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg), var(--shadow-glass), var(--shadow-glow-primary);
  border-color: hsl(266 90% 64% / 0.28);
}
.glass-card:hover::after { opacity: 1; }
[data-bs-theme="dark"] .glass-card::after {
  background: radial-gradient(420px circle at var(--mx) var(--my),
    hsl(220 95% 70% / 0.16), transparent 55%);
}

/* ═══ WORK-SURFACE CARD (.card) — frosted glass, cursor sheen, hairline edge ═══
   Bootstrap's .card is reskinned here. We keep .card-header/.card-body working. */
.card {
  background: var(--glass-bg-strong);
  border: none;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: var(--hairline), var(--shadow-xs);
  transition: box-shadow 0.35s var(--spring-soft), transform 0.35s var(--spring-soft);
  position: relative; overflow: hidden;
  --mx: 50%; --my: 50%;
}
.card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit; background: var(--glass-highlight); opacity: 0.6; z-index: 0;
}
.card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(480px circle at var(--mx) var(--my),
    hsl(266 92% 64% / 0.07), transparent 55%);
  opacity: 0; transition: opacity 0.4s var(--spring-soft); z-index: 0;
}
.card > * { position: relative; z-index: 1; }
.card:hover { box-shadow: var(--hairline), var(--shadow-md); }
.card:hover::after { opacity: 1; }
[data-bs-theme="dark"] .card::after {
  background: radial-gradient(480px circle at var(--mx) var(--my),
    hsl(266 92% 72% / 0.11), transparent 60%);
}
.card .card-header { background: transparent; border-bottom: 1px solid var(--border-subtle); font-weight: 600; }
.card .card-body { position: relative; z-index: 1; }

/* ═══ METRIC CARDS — KPI tile pattern (single source of truth) ═══ */
.metric-card {
  position: relative;
  background: var(--glass-bg-strong);
  border: none;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  backdrop-filter: blur(10px) saturate(1.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.45);
  box-shadow: var(--hairline), var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transform-style: preserve-3d;
  transition:
    transform 260ms var(--spring-soft),
    box-shadow 260ms var(--spring-soft);
  overflow: hidden;
  --mx: 50%; --my: 50%;
}
.metric-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--metric-accent, transparent);
  opacity: 0.78;                                  /* color-coded accent always visible */
  transition: opacity 260ms var(--spring-soft);
  z-index: 2;
}
.metric-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    hsl(266 92% 64% / 0.10), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s var(--spring-soft);
  z-index: 1;
}
.metric-card > * { position: relative; z-index: 1; }
.metric-card:hover {
  box-shadow: var(--hairline), var(--shadow-lg), var(--shadow-glow-primary, 0 0 32px hsl(266 90% 64% / 0.12));
}
.metric-card:hover::before { opacity: 1; }
.metric-card:hover::after { opacity: 1; }
[data-bs-theme="dark"] .metric-card::after {
  background: radial-gradient(360px circle at var(--mx) var(--my),
    hsl(266 92% 72% / 0.16), transparent 60%);
}
.metric-card--primary { --metric-accent: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%); }
.metric-card--accent  { --metric-accent: linear-gradient(90deg, var(--color-accent)  0%, transparent 100%); }
.metric-card--success { --metric-accent: linear-gradient(90deg, var(--color-success) 0%, transparent 100%); }
.metric-card--warning { --metric-accent: linear-gradient(90deg, var(--color-warning) 0%, transparent 100%); }
.metric-card--danger  { --metric-accent: linear-gradient(90deg, var(--color-danger)  0%, transparent 100%); }
.metric-card--info    { --metric-accent: linear-gradient(90deg, var(--color-info)    0%, transparent 100%); }

/* Clickable KPI tiles — cursor, stronger hover lift, and a reveal-on-hover arrow. */
.metric-card--link { cursor: pointer; }
.metric-card--link:hover { box-shadow: var(--hairline), var(--shadow-xl), 0 0 36px hsl(266 92% 66% / 0.18); }
.metric-card .kpi-cta {
  position: absolute; right: .85rem; bottom: .6rem; color: var(--color-primary);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--transition-fast), transform var(--transition-fast); z-index: 2;
}
.metric-card--link:hover .kpi-cta { opacity: .95; transform: translateX(0); }
a:has(.metric-card) { color: inherit; }
.metric-card--persistent::before { opacity: 1; }

/* ═══ KPI — composes the metric-card treatment (preserved class names) ═══
   .kpi/.kpi-val/.kpi-label/.kpi-spark are still consumed by views. We repoint
   .kpi to the live glass tile look + the 3D tilt the global pointer hook drives. */
.kpi {
  position: relative;
  padding: 1rem 1.1rem;
  background: var(--glass-bg-strong);
  border: none;
  border-radius: var(--radius-lg);
  backdrop-filter: blur(10px) saturate(1.45);
  -webkit-backdrop-filter: blur(10px) saturate(1.45);
  box-shadow: var(--hairline), var(--shadow-sm);
  transform: perspective(900px) rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg));
  transform-style: preserve-3d;
  transition: transform 260ms var(--spring-soft), box-shadow 260ms var(--spring-soft);
  overflow: hidden;
  --mx: 50%; --my: 50%;
}
.kpi::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(360px circle at var(--mx) var(--my),
    hsl(266 92% 64% / 0.10), transparent 55%);
  opacity: 0; transition: opacity 0.35s var(--spring-soft); z-index: 1;
}
.kpi > * { position: relative; z-index: 1; }
.kpi:hover {
  box-shadow: var(--hairline), var(--shadow-lg), var(--shadow-glow-primary);
}
.kpi:hover::after { opacity: 1; }
[data-bs-theme="dark"] .kpi::after {
  background: radial-gradient(360px circle at var(--mx) var(--my),
    hsl(266 92% 72% / 0.16), transparent 60%);
}
.kpi .kpi-val { font-size: 1.7rem; font-weight: 700; line-height: 1.1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.kpi .kpi-label { color: var(--text-tertiary); font-size: .8rem; }
.kpi .kpi-spark { margin-top: .55rem; height: 34px; }
.kpi .kpi-spark canvas { width: 100% !important; }

/* ── Shell ── */
#app-shell { display: flex; min-height: 100vh; position: relative; z-index: 1; }
#sidebar {
  width: 268px; flex: 0 0 268px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  border-right: 1px solid var(--glass-border);
  position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 1.15rem .8rem 1.5rem;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
#sidebar .brand { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; padding: .25rem .6rem 1.1rem; margin-bottom: .35rem; display:flex; align-items:center; gap:.55rem; }
#sidebar .nav-group { color: var(--text-tertiary); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; margin: 1rem .6rem .25rem; }
#sidebar a.nav-link {
  color: var(--text-secondary); border-radius: var(--radius-md); padding: .42rem .6rem; display: flex; align-items: center; gap: .6rem;
  font-size: .9rem; position: relative;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
#sidebar a.nav-link:hover { background: var(--surface-100); color: var(--text-primary); }
#sidebar a.nav-link.active {
  background: hsl(266 90% 64% / 0.10);
  color: var(--color-primary);
  font-weight: 600;
}
[data-bs-theme="dark"] #sidebar a.nav-link.active { background: hsl(266 90% 64% / 0.12); }
#sidebar a.nav-link.active::before {
  content: ""; position: absolute; left: -.15rem; top: 50%; transform: translateY(-50%);
  height: 1.25rem; width: 3px; border-radius: 999px; background: var(--color-primary);
}
#sidebar a.nav-link i { width: 1.1rem; text-align: center; transition: transform var(--transition-fast); }
#sidebar a.nav-link.active i { transform: scale(1.05); }

/* ── 7-destination nav with collapsible headings (IA redesign) ── */
#sidebar .nav-divider { height: 1px; background: var(--border-subtle); margin: 1rem .5rem .65rem; }
#sidebar .nav-section { margin-bottom: .12rem; }
#sidebar .nav-dest {
  color: var(--text-secondary); border-radius: var(--radius-md);
  padding: .6rem .7rem; display: flex; align-items: center; gap: .7rem; width: 100%;
  font-size: .95rem; font-weight: 500; position: relative; text-decoration: none; cursor: pointer;
  margin-bottom: 2px;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
/* The section header is a <button> — strip native chrome so it reads as a nav row. */
#sidebar button.nav-dest { -webkit-appearance: none; appearance: none; background: transparent; border: 0; text-align: left; font-family: inherit; }
#sidebar .nav-dest > span { flex: 1 1 auto; min-width: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
#sidebar .nav-dest > i:first-child { width: 1.25rem; text-align: center; font-size: 1.05rem; transition: transform var(--transition-fast); }
#sidebar .nav-dest .nav-caret { font-size: .7rem; opacity: .5; transition: transform var(--transition-base); flex: 0 0 auto; }
#sidebar .nav-section.expanded .nav-dest .nav-caret { transform: rotate(180deg); opacity: .8; }
#sidebar .nav-dest:hover { background: var(--surface-100); color: var(--text-primary); }
#sidebar .nav-dest:hover .nav-caret { opacity: .9; }
#sidebar .nav-dest.current, #sidebar .nav-section.expanded > .nav-dest { color: var(--text-primary); }
#sidebar .nav-dest.current > i:first-child, #sidebar .nav-section.expanded > .nav-dest > i:first-child { color: var(--color-primary); transform: scale(1.05); }
#sidebar .nav-dest.active { background: hsl(266 90% 64% / 0.10); color: var(--color-primary); font-weight: 600; }
[data-bs-theme="dark"] #sidebar .nav-dest.active { background: hsl(266 90% 64% / 0.12); }
#sidebar .nav-dest.active::before {
  content: ""; position: absolute; left: -.2rem; top: 50%; transform: translateY(-50%);
  height: 1.3rem; width: 3px; border-radius: 999px; background: var(--color-primary);
}
/* Sub-tabs: collapsed by default; the user expands a heading to reveal them. The grid 0fr→1fr trick
   needs a SINGLE grid child (.nav-sub-inner) — with multiple direct children only the first lands in the
   0fr row and the rest fall into auto-height implicit rows (the bug that left every section open). */
#sidebar .nav-sub {
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  margin: 0 0 .1rem 1.45rem; padding-left: .7rem; border-left: 1px solid var(--border-subtle);
  transition: grid-template-rows var(--transition-base);
}
#sidebar .nav-section.expanded .nav-sub { grid-template-rows: 1fr; margin-top: .15rem; margin-bottom: .35rem; }
#sidebar .nav-sub-inner { min-height: 0; overflow: hidden; }
#sidebar .nav-sub a.nav-link { font-size: .875rem; padding: .42rem .6rem; gap: .55rem; margin-bottom: 1px; }
#sidebar .nav-sub a.nav-link.active::before { left: -.85rem; }
#main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#topbar {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--glass-bg-strong);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  position: sticky; top: 0; z-index: 20;
  transition: background-color var(--transition-base), border-color var(--transition-base);
}
.topbar-search { position: relative; flex: 1 1 auto; max-width: 560px; }
.topbar-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); }
.topbar-search input { padding-left: 2rem; background: var(--surface-0); border-color: var(--border-default); color: var(--text-primary); }
#global-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface-50);           /* SOLID surface — was see-through glass */
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); z-index: 1000; display: none; max-height: 64vh; overflow: hidden auto;
  box-shadow: var(--shadow-xl), 0 0 0 1px hsl(266 92% 66% / 0.12);
}
[data-bs-theme="dark"] #global-search-results { background: hsl(230 26% 7%); }
#global-search-results a {
  display:flex; align-items:center; gap:.6rem; padding:.6rem .85rem; color:var(--text-primary);
  border-bottom:1px solid var(--border-subtle); text-decoration:none; line-height:1.3;
  transition: background-color var(--transition-fast);
}
#global-search-results a:last-child { border-bottom: none; }
#global-search-results a:hover { background: var(--surface-200); }
#global-search-results a .badge { flex: 0 0 auto; }
.topbar-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.btn-ghost { color: var(--text-primary); transition: background-color var(--transition-fast), color var(--transition-fast); }
.btn-ghost:hover { background: var(--surface-100); color: var(--text-primary); }
#theme-toggle i { transition: transform var(--transition-fast); }
#theme-toggle:hover i { transform: rotate(-12deg) scale(1.08); }

/* ── Tables / forms / misc (token-repointed, classes preserved) ── */
.card .card-header { background: transparent; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--text-primary); --bs-table-border-color: var(--border-default); }
.table thead th { color: var(--text-tertiary); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; }
.table tbody tr { transition: background-color var(--transition-fast); }
.table-hover tbody tr:hover { background: var(--surface-100); }
.text-muted, .text-secondary { color: var(--text-tertiary) !important; }
.page-title {
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.025em; margin-bottom: .15rem;
  /* Neon violet→pink signature on page headings + the brand wordmark. */
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
#sidebar .brand { text-shadow: 0 0 18px hsl(266 92% 66% / 0.45); }
#sidebar .nav-dest.active, #sidebar a.nav-link.active { box-shadow: inset 0 0 0 1px hsl(266 92% 66% / 0.30), 0 0 16px hsl(266 92% 66% / 0.14); }
.score-pill { box-shadow: 0 0 14px hsl(266 92% 66% / 0.28); }
.page-sub { color: var(--text-tertiary); font-size: .9rem; margin-bottom: 1rem; }
.form-control, .form-select { background: var(--surface-0); border-color: var(--border-default); color: var(--text-primary); }
.form-control:focus, .form-select:focus { background: var(--surface-0); color: var(--text-primary); border-color: var(--color-primary); box-shadow: 0 0 0 3.5px hsl(266 90% 64% / 0.16); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { box-shadow: 0 0 0 3.5px hsl(266 90% 64% / 0.20); }
.form-control::placeholder { color: var(--text-tertiary); opacity: .85; }
.badge-soft { background: var(--surface-100); color: var(--text-primary); border: 1px solid var(--border-default); }
.score-pill { font-weight: 700; padding: .15rem .5rem; border-radius: 999px; font-size: .8rem; }
.muted-empty { color: var(--text-tertiary); text-align: center; padding: 2.5rem 1rem; }
.spinner-wrap { display: grid; place-items: center; padding: 3rem; }

/* ═══ STATUS BADGES ═══ */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.status-info { color: var(--color-info); background: var(--color-info-bg); border: 1px solid var(--color-info-border); }
.status-success { color: var(--color-success); background: var(--color-success-bg); border: 1px solid var(--color-success-border); }
.status-warning { color: var(--color-warning); background: var(--color-warning-bg); border: 1px solid var(--color-warning-border); }
.status-danger { color: var(--color-danger); background: var(--color-danger-bg); border: 1px solid var(--color-danger-border); }
.status-critical { color: var(--color-critical); background: var(--color-critical-bg); border: 1px solid var(--color-critical-border); }
.status-neutral { color: var(--text-tertiary); background: var(--surface-100); border: 1px solid var(--border-default); }

/* ═══ DESIGNED EMPTY STATE (H.empty) ═══ */
.empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem;
  padding: 2.75rem 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  color: var(--text-tertiary);
}
.empty .empty-icon { font-size: 1.75rem; color: var(--text-tertiary); opacity: .7; margin-bottom: .15rem; }
.empty .empty-title { color: var(--text-primary); font-weight: 600; font-size: 1rem; }
.empty .empty-hint { color: var(--text-tertiary); font-size: .875rem; max-width: 32rem; }
.empty .btn { margin-top: .35rem; }

/* ═══ SKELETON (shimmer placeholders) ═══ */
.skeleton {
  background: linear-gradient(90deg, var(--surface-200) 25%, var(--surface-100) 50%, var(--surface-200) 75%);
  background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm);
}
.skeleton-row { height: 14px; margin: .55rem 0; }
.skeleton-card { height: 96px; border-radius: var(--radius-lg); }

/* ═══ PROSE BRIEF — rich markdown for AI briefings / deep research / analysis ═══
   Ported from RFQ.MI.OLD globals.css:607-659; var names swapped to Cosmic. */
.prose-brief { color: var(--text-primary); font-size: 13.5px; line-height: 1.75; max-width: none; }
.prose-brief p { margin: 0 0 0.9em; color: var(--text-secondary); }
.prose-brief p:last-child { margin-bottom: 0; }
.prose-brief h1 {
  font-size: 1.35em; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text-primary); margin: 1.1em 0 0.5em;
  padding-bottom: 0.3em; border-bottom: 1px solid var(--border-default);
}
.prose-brief h2 { font-size: 1.15em; font-weight: 700; letter-spacing: -0.015em; color: var(--text-primary); margin: 1em 0 0.45em; }
.prose-brief h3 { font-size: 1em; font-weight: 700; color: var(--color-primary); margin: 0.85em 0 0.35em; }
.prose-brief h4 { font-size: 0.9em; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.07em; margin: 0.75em 0 0.25em; }
.prose-brief h5, .prose-brief h6 { font-size: 0.85em; font-weight: 600; color: var(--text-secondary); margin: 0.7em 0 0.25em; }
.prose-brief ul { list-style: none; padding-left: 0; margin: 0.5em 0 0.9em; }
.prose-brief ul li { padding-left: 1.4em; position: relative; margin-bottom: 0.45em; line-height: 1.65; }
.prose-brief ul li::before { content: "▸"; position: absolute; left: 0.15em; top: 0.05em; color: var(--color-primary); font-size: 0.75em; }
.prose-brief ol { list-style: none; padding-left: 0; counter-reset: brief-ol; margin: 0.5em 0 0.9em; }
.prose-brief ol li { padding-left: 1.75em; position: relative; margin-bottom: 0.45em; line-height: 1.65; counter-increment: brief-ol; }
.prose-brief ol li::before {
  content: counter(brief-ol); position: absolute; left: 0; top: 0;
  width: 1.25em; height: 1.25em; display: flex; align-items: center; justify-content: center;
  background: hsl(266 90% 64% / 0.12); color: var(--color-primary);
  border-radius: 50%; font-size: 0.72em; font-weight: 700;
}
[data-bs-theme="dark"] .prose-brief ol li::before { background: hsl(266 90% 64% / 0.16); }
.prose-brief strong { font-weight: 700; color: var(--text-primary); }
.prose-brief em { font-style: italic; color: var(--text-secondary); }
.prose-brief code {
  font-family: var(--font-mono); font-size: 0.83em;
  background: var(--surface-100); border: 1px solid var(--border-default);
  border-radius: 4px; padding: 0.12em 0.4em; color: var(--color-primary);
}
.prose-brief pre { background: var(--surface-100); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 1em; overflow-x: auto; margin: 0.75em 0; }
.prose-brief pre code { background: none; border: none; padding: 0; color: var(--text-primary); font-size: 0.88em; }
.prose-brief blockquote {
  border-left: 3px solid var(--color-accent);
  padding: 0.6em 1em; margin: 0.85em 0;
  background: var(--color-info-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-secondary); font-style: italic;
}
.prose-brief table { width: 100%; border-collapse: collapse; margin: 0.85em 0; font-size: 12px; }
.prose-brief th { text-align: left; padding: 0.55em 0.75em; font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-tertiary); border-bottom: 2px solid var(--border-strong); }
.prose-brief td { padding: 0.5em 0.75em; border-bottom: 1px solid var(--border-default); color: var(--text-primary); vertical-align: top; }
.prose-brief tr:hover td { background: var(--surface-100); }
.prose-brief a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }
.prose-brief a:hover { color: var(--color-primary-light); }
.prose-brief hr { border: none; border-top: 1px solid var(--border-default); margin: 1.25em 0; }

/* Markdown <pre> code fences (H.markdown emits .md-pre). */
.md-pre {
  background: var(--surface-100); border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: .6rem .8rem; overflow-x: auto; font-size: .82rem; color: var(--text-primary); white-space: pre-wrap; word-break: break-word;
}

/* ═══ ANIMATIONS ═══ */
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
@keyframes blurIn { from { opacity: 0; filter: blur(8px); transform: scale(0.96); } to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@keyframes drift { 0% { transform: translate(0, 0) scale(1); } 25% { transform: translate(30px, -20px) scale(1.05); } 50% { transform: translate(-15px, 15px) scale(0.95); } 75% { transform: translate(20px, 10px) scale(1.02); } 100% { transform: translate(0, 0) scale(1); } }

.animate-fade-in { animation: fadeIn 0.5s var(--ease-expo) both; }
.animate-blur-in { animation: blurIn 0.6s var(--ease-expo) both; }
.animate-scale-in { animation: scaleIn 0.5s var(--spring) both; }
.animate-slide-in { animation: slideIn 0.4s var(--ease-expo) both; }
.animate-float { animation: float 4s ease-in-out infinite; }

.stagger-1 { animation-delay: 60ms; } .stagger-2 { animation-delay: 120ms; }
.stagger-3 { animation-delay: 180ms; } .stagger-4 { animation-delay: 240ms; }
.stagger-5 { animation-delay: 300ms; } .stagger-6 { animation-delay: 360ms; }
.stagger-7 { animation-delay: 420ms; } .stagger-8 { animation-delay: 480ms; }

/* ═══ COSMIC AMBIENT BACKGROUND ═══
   Paired with cosmic.js, which writes --px/--py from the pointer so the orbs
   parallax toward the cursor. Injected as the body's first child. */
.cosmic-bg {
  position: fixed; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.cosmic-bg .orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  animation: drift var(--dur, 40s) ease-in-out infinite;
  will-change: transform;
}
.cosmic-bg .orb-1 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, var(--color-primary) 0%, transparent 70%);
  top: -10%; left: -5%; opacity: 0.08;
  --dur: 40s;
}
.cosmic-bg .orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, var(--color-accent) 0%, transparent 70%);
  bottom: -15%; right: -8%; opacity: 0.06;
  --dur: 50s; animation-delay: -10s;
}
[data-bs-theme="dark"] .cosmic-bg .orb-1 { opacity: 0.12; }
[data-bs-theme="dark"] .cosmic-bg .orb-2 { opacity: 0.10; }

/* ═══ TEXT GRADIENTS / UTILITIES ═══ */
.text-gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-accent { color: var(--color-accent); }

/* ═══ GLOBAL FOCUS RING — soft brand halo, keyboard-only ═══ */
:where(button, a, [role="button"], [tabindex]):focus-visible {
  outline: none;
  box-shadow: 0 0 0 3.5px hsl(266 90% 64% / 0.18);
  border-radius: var(--radius-md);
}
[data-bs-theme="dark"] :where(button, a, [role="button"], [tabindex]):focus-visible {
  box-shadow: 0 0 0 3.5px hsl(266 90% 64% / 0.22);
}
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3.5px hsl(266 90% 64% / 0.16);
}
/* Preserve the existing keyboard-focus contract used by buttons/links/inputs. */
.btn:focus-visible, a:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible, #sidebar a.nav-link:focus-visible { outline: none; box-shadow: var(--mi-ring); }

@media (max-width: 992px) {
  #sidebar { position: fixed; left: 0; top: 0; z-index: 1050; transform: translateX(-100%); transition: transform .2s; }
  #sidebar.open { transform: translateX(0); }
}

/* ═══ BREATHEABLE LAYOUT — calmer rhythm, centred on wide screens (MIX) ═══ */
#view { max-width: 1560px; margin-inline: auto; }
/* A touch more room inside cards + clearer headers (p-0 utility still wins where set). */
.card > .card-body { padding: 1.15rem 1.3rem; }
.card > .card-header { padding: .8rem 1.3rem; font-weight: 600; letter-spacing: .005em; }
.metric-card { padding: 1.15rem 1.25rem; }
.kpi-val { line-height: 1.12; }
.kpi-label { color: var(--text-secondary); }
.page-title { margin-bottom: .12rem; line-height: 1.2; }
.page-sub { color: var(--text-secondary); font-size: .86rem; }
/* Soften dense table rows so big tables read calmer. */
.card .table > :not(caption) > * > * { padding-top: .55rem; padding-bottom: .55rem; }

/* ═══ TOOLTIPS (MIX-90) — single floating bubble driven by [data-tip] ═══ */
.mi-tip {
  position: fixed; z-index: 2200; max-width: 320px; pointer-events: none;
  background: var(--surface-100); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding: .5rem .65rem;
  font-size: .78rem; line-height: 1.4; font-weight: 450;
  opacity: 0; transform: translateY(2px); transition: opacity .12s ease, transform .12s ease;
}
.mi-tip.show { transform: translateY(0); }
.mi-tip::after {
  content: ""; position: absolute; left: var(--mi-tip-arrow, 50%); top: 100%;
  width: 0; height: 0; transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--border-strong);
}
.mi-tip.mi-tip-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--border-strong); }
.info-dot {
  font-size: .78em; color: var(--text-secondary); opacity: .7; margin-left: .28em;
  cursor: help; vertical-align: baseline; transition: color .15s, opacity .15s;
}
.info-dot:hover, .info-dot:focus { color: var(--color-primary); opacity: 1; outline: none; }
[data-tip] { cursor: help; }
button[data-tip], a[data-tip], .scope-opt[data-tip], .chart-tool[data-tip] { cursor: pointer; }

/* ═══ CHART CHROME (MIX-89) — hover toolbar + enlarge modal ═══ */
.chart-host { position: relative; }
.chart-toolbar {
  position: absolute; top: 6px; right: 6px; z-index: 5; display: flex; gap: 3px;
  opacity: 0; transform: translateY(-3px); transition: opacity .15s, transform .15s;
}
.chart-host:hover .chart-toolbar, .chart-host:focus-within .chart-toolbar { opacity: 1; transform: translateY(0); }
.chart-tool {
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--glass-bg-strong); color: var(--text-secondary);
  backdrop-filter: blur(6px); font-size: .8rem; cursor: pointer; transition: all .14s;
}
.chart-tool:hover { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }

.chart-modal-backdrop {
  position: fixed; inset: 0; z-index: 2100; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 6, 14, 0.66); backdrop-filter: blur(4px); padding: 3vh 3vw;
  animation: mi-fade-in .14s ease;
}
@keyframes mi-fade-in { from { opacity: 0; } to { opacity: 1; } }
.chart-modal {
  width: min(1100px, 94vw); height: min(760px, 90vh); display: flex; flex-direction: column;
  background: var(--surface-50); border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden;
}
.chart-modal-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--border-default); flex: 0 0 auto;
}
.chart-modal-title { font-weight: 600; font-size: .95rem; color: var(--text-primary); }
.chart-modal-actions { display: flex; gap: .35rem; align-items: center; }
.chart-modal-body { flex: 1 1 auto; min-height: 0; padding: 1rem; position: relative; }
.chart-modal-body canvas { width: 100% !important; height: 100% !important; }
.chart-modal-hint { flex: 0 0 auto; padding: .4rem 1rem .6rem; font-size: .72rem; color: var(--text-secondary); text-align: center; }

/* ═══ SCOPE TOGGLE (MIX-91) — Relevant ⇄ All ═══ */
.scope-toggle {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--radius-lg);
  background: var(--surface-100); border: 1px solid var(--border-default);
}
.scope-opt {
  display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem;
  border: 0; background: transparent; color: var(--text-secondary);
  font-size: .8rem; font-weight: 600; border-radius: calc(var(--radius-lg) - 3px);
  cursor: pointer; transition: all .15s; white-space: nowrap;
}
.scope-opt:hover { color: var(--text-primary); }
.scope-opt.active { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow-primary); }
.scope-opt i { font-size: .85em; }

/* ═══ ASSISTANT CHAT (rail + thread + composer) ═══ */
.chat-shell { display: flex; gap: 1rem; height: calc(100vh - 132px); min-height: 480px; position: relative; }
.chat-rail { flex: 0 0 264px; display: flex; flex-direction: column; background: var(--surface-100); border: 1px solid var(--border-default); border-radius: var(--radius-xl); padding: .75rem; overflow: hidden; }
.chat-rail-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); margin: .5rem .25rem .25rem; }
.chat-convs { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.chat-rail-empty { color: var(--text-secondary); font-size: .8rem; padding: .5rem .25rem; line-height: 1.5; }
.conv-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .55rem; border-radius: var(--radius-md); cursor: pointer; transition: background .14s; }
.conv-item:hover { background: var(--surface-200); }
.conv-item.active { background: var(--surface-200); box-shadow: inset 2px 0 0 var(--color-primary); }
.conv-ic { color: var(--text-secondary); font-size: .85rem; flex: 0 0 auto; }
.conv-body { min-width: 0; flex: 1; }
.conv-title { font-size: .82rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-primary); }
.conv-meta { font-size: .68rem; color: var(--text-secondary); }
.conv-del { border: 0; background: transparent; color: var(--text-secondary); opacity: 0; padding: .15rem .3rem; border-radius: 6px; transition: .14s; cursor: pointer; }
.conv-item:hover .conv-del { opacity: .65; }
.conv-del:hover { opacity: 1; color: var(--color-danger); background: var(--color-danger-bg); }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--surface-50); border: 1px solid var(--border-default); border-radius: var(--radius-xl); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.1rem; border-bottom: 1px solid var(--border-default); flex: 0 0 auto; }
.chat-head-titles { flex: 1; min-width: 0; }
.chat-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.chat-sub { font-size: .73rem; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-spark { color: var(--color-primary); font-size: 1.05rem; }

.chat-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.2rem; display: flex; flex-direction: column; }
.chat-row { display: flex; gap: .6rem; margin-bottom: 1rem; align-items: flex-start; }
.chat-row-user { justify-content: flex-end; }
.chat-avatar { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gradient-brand); color: #fff; font-size: .82rem; box-shadow: var(--shadow-glow-primary); }
.chat-avatar-err { background: var(--color-danger); box-shadow: none; }
.chat-bubble { max-width: 82%; padding: .7rem .95rem; border-radius: 14px; font-size: .9rem; line-height: 1.55; }
.chat-bubble-user { background: var(--gradient-brand); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble-asst { background: var(--surface-100); border: 1px solid var(--border-default); border-bottom-left-radius: 4px; width: 100%; }
.chat-md > :first-child { margin-top: 0; } .chat-md > :last-child { margin-bottom: 0; }
.chat-md h4, .chat-md h5, .chat-md h6 { margin: .7rem 0 .35rem; font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.chat-md h4 { font-size: 1rem; } .chat-md h5 { font-size: .92rem; } .chat-md h6 { font-size: .85rem; color: var(--color-primary); }
.chat-md p { margin: 0 0 .55rem; }
.chat-md ul, .chat-md ol { margin: .25rem 0 .6rem; padding-left: 1.25rem; }
.chat-md li { margin-bottom: .22rem; }
.chat-md strong { color: var(--text-primary); font-weight: 700; }
.chat-md code { background: var(--surface-200); padding: .05rem .35rem; border-radius: 5px; font-size: .85em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chat-md a { color: var(--color-primary); text-decoration: none; }
.chat-md a:hover { text-decoration: underline; }
.chat-md blockquote { border-left: 3px solid var(--color-primary); margin: .45rem 0; padding: .25rem .75rem; color: var(--text-secondary); background: var(--surface-100); border-radius: 0 8px 8px 0; }
.chat-md .table-responsive { overflow-x: auto; margin: .45rem 0; border-radius: 10px; border: 1px solid var(--border-default); }
.chat-md .table { font-size: .82rem; margin: 0; color: var(--text-primary); }
.chat-md .table th { color: #fff; background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; white-space: nowrap; padding: .4rem .55rem; }
.chat-md .table td { border-color: var(--border-default); padding: .38rem .55rem; vertical-align: top; }
.chat-md .table tbody tr:nth-child(even) { background: var(--surface-100); }
.chat-md pre.md-pre { background: var(--surface-200); padding: .6rem .8rem; border-radius: 8px; overflow-x: auto; font-size: .82rem; margin: .45rem 0; }
.chat-tools { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .55rem; }
.chat-tool { display: inline-flex; align-items: center; gap: .3rem; font-size: .69rem; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-200); color: var(--text-secondary); }
.chat-tool i { font-size: .82em; }
.chat-sources { margin-top: .7rem; padding-top: .6rem; border-top: 1px solid var(--border-default); }
.chat-sources-label { font-size: .71rem; color: var(--text-secondary); margin-bottom: .35rem; }
.chat-sources-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.chat-cite { display: inline-flex; align-items: center; gap: .3rem; font-size: .73rem; padding: .2rem .5rem; border-radius: 8px; background: var(--surface-200); color: var(--text-secondary); text-decoration: none; }
.chat-cite:hover { color: var(--text-primary); }
.chat-cite-n { background: var(--color-primary); color: #fff; border-radius: 5px; padding: 0 .32rem; font-size: .67rem; font-weight: 600; }
.chat-typing { display: inline-flex; gap: 3px; vertical-align: middle; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); animation: chat-bounce 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .16s; } .chat-typing span:nth-child(3) { animation-delay: .32s; }
@keyframes chat-bounce { 0%, 80%, 100% { transform: scale(.5); opacity: .4; } 40% { transform: scale(1); opacity: 1; } }

.chat-composer { border-top: 1px solid var(--border-default); padding: .7rem 1rem .8rem; background: var(--surface-100); flex: 0 0 auto; }
.chat-suggest { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .55rem; }
.chat-chip { font-size: .76rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); cursor: pointer; transition: .14s; }
.chat-chip:hover:not(:disabled) { color: var(--text-primary); border-color: var(--color-primary); }
.chat-chip:disabled { opacity: .5; cursor: not-allowed; }
.chat-input-row { display: flex; gap: .5rem; align-items: flex-end; }
.chat-input { flex: 1; resize: none; border-radius: 12px; border: 1px solid var(--border-default); background: var(--surface-50); color: var(--text-primary); padding: .6rem .8rem; font-size: .9rem; line-height: 1.4; max-height: 160px; overflow-y: auto; font-family: inherit; }
.chat-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(139, 92, 246, .22); }
.chat-send { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 12px; background: var(--gradient-brand); color: #fff; cursor: pointer; box-shadow: var(--shadow-glow-primary); transition: .14s; }
.chat-send:hover:not(:disabled) { filter: brightness(1.08); }
.chat-send:disabled { opacity: .5; cursor: not-allowed; }
.chat-foot { font-size: .69rem; color: var(--text-secondary); margin-top: .5rem; }

.chat-welcome { margin: auto; text-align: center; max-width: 540px; padding: 2rem 1rem; }
.chat-welcome-orb { width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; background: var(--gradient-brand); box-shadow: var(--shadow-glow-primary); }
.chat-welcome-title { font-size: 1.3rem; font-weight: 700; margin-bottom: .4rem; color: var(--text-primary); }
.chat-welcome-sub { color: var(--text-secondary); margin-bottom: 1.2rem; }
.chat-welcome-chips { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }

@media (max-width: 992px) {
  .chat-shell { height: calc(100vh - 116px); }
  .chat-rail { position: absolute; z-index: 20; left: 0; top: 0; bottom: 0; transform: translateX(-112%); transition: transform .2s; box-shadow: var(--shadow-xl); }
  .chat-rail.open { transform: translateX(0); }
  .chat-bubble { max-width: 88%; }
}

/* ═══ REDUCED MOTION ═══ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .glass-card:hover, .card:hover, .metric-card, .metric-card:hover, .kpi:hover { transform: none !important; }
  .cosmic-bg { display: none; }
  .mi-tip { transition: none; }
  .chat-typing span { animation: none; }
}