/* ===========================================
   Tape20 Design System - site.css
   Single source of truth for all styling
   Terminal-inspired aesthetic, harmonized dark/light themes
   =========================================== */

/* ===========================================
   LEVEL 1: BASE TOKENS
   =========================================== */

:root {
  /* Typography Scale */
  --font-family-base: 'SF Mono', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  --font-family-mono: 'SF Mono', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  --font-family-heading: 'SF Mono', 'Roboto Mono', 'Consolas', 'Monaco', monospace;
  
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;      /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;     /* 24px */
  --font-size-3xl: 1.875rem;   /* 30px */
  
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Spacing Scale */
  --spacing-0.5: 0.125rem; /* 2px */
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-1.5: 0.375rem; /* 6px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  
  /* Border Radius */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.375rem;  /* 6px */
  --radius-lg: 0.5rem;    /* 8px */
  --radius-t-lg: 0.5rem;  /* 8px - top corners only */
  --radius-xl: 0.75rem;   /* 12px */
  --radius-2xl: 1rem;     /* 16px */
  
  /* Z-Index Layers */
  --z-ticker: 50;
  --z-primary-nav: 40;
  --z-secondary-nav: 30;
  --z-context-bar: 20;
  --z-content: 10;
  --z-modal: 100;
  --z-tooltip: 90;
  
  /* Motion Durations */
  --duration-fast: 0.15s;
  --duration-normal: 0.3s;
  --duration-slow: 0.5s;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ===========================================
   LEVEL 2: SEMANTIC TOKENS - DARK THEME
   Terminal-inspired: Green on dark (Quotron style)
   =========================================== */

:root {
  /* Backgrounds */
  --bg: #020617;              /* slate-950 - terminal black */
  --bg-primary: #020617;      /* slate-950 - terminal black (alias for compatibility) */
  --surface: #0f172a;          /* slate-900 - card background */
  --surface-2: #1e293b;        /* slate-800 - inner card */
  --surface-3: #334155;        /* slate-700 - subtle surface */
  
  /* Legacy aliases for custom.css compatibility */
  --bg-card: var(--surface);           /* alias for --surface */
  --bg-card-inner: var(--surface-2);   /* alias for --surface-2 */
  --bg-card-half: rgba(30, 41, 59, 0.5); /* slate-800/50 */
  
  /* Text */
  --text: #00e639;             /* Terminal green - primary text (toned down) */
  --text-primary: #f8fafc;     /* slate-50 - legacy alias (for custom.css compatibility) */
  --text-secondary: #cbd5e1;    /* slate-300 - secondary text */
  --text-muted: #64748b;       /* slate-500 - muted text */
  --text-inverse: #0f172a;     /* For light backgrounds */
  
  /* Borders */
  --border: #1e293b;            /* slate-800 */
  --border-light: #334155;      /* slate-700 */
  --border-focus: #00e639;     /* Terminal green for focus (toned down) */
  
  /* RGB values for rgba() usage */
  --border-rgb: 30, 41, 59;     /* slate-800 RGB */
  --surface-2-rgb: 30, 41, 59;  /* slate-800 RGB */
  --terminal-green-rgb: 0, 230, 57; /* Terminal green RGB (toned down) */
  
  /* Links */
  --link: #00e639;              /* Terminal green (toned down) */
  --link-hover: #39ff14;        /* Brighter green */
  
  /* Focus */
  --focus: #00e639;             /* Terminal green (toned down) */
  --focus-ring: rgba(0, 230, 57, 0.3);
  
  /* Semantic Colors */
  --positive: #00e639;          /* Terminal green (toned down) */
  --positive-bg: rgba(0, 230, 57, 0.1);
  --negative: #ff4444;          /* Bright red */
  --negative-bg: rgba(255, 68, 68, 0.1);
  --warning: #ffaa00;           /* Amber/orange */
  --warning-bg: rgba(255, 170, 0, 0.1);
  --info: #00aaff;              /* Cyan blue */
  --info-bg: rgba(0, 170, 255, 0.1);
  
  /* Accent (for buttons, highlights) */
  --accent: #00e639;            /* Terminal green (toned down) */
  --accent-hover: #39ff14;      /* Brighter green */
  --accent-active: #00cc33;     /* Darker green */
  --accent-glow: rgba(0, 230, 57, 0.3); /* Legacy alias for custom.css compatibility */
  
  /* Slider Colors */
  --slider-emerald: #00e639;
  --slider-amber: #ffaa00;
  --slider-cyan: #00aaff;
}

/* ===========================================
   LEVEL 2: SEMANTIC TOKENS - LIGHT THEME
   Harmonized retro-inspired, clean professional
   =========================================== */

[data-theme="light"] {
  /* Backgrounds */
  --bg: #f8fafc;               /* slate-50 */
  --bg-primary: #f8fafc;       /* slate-50 (alias for compatibility) */
  --surface: #ffffff;          /* white */
  --surface-2: #f1f5f9;        /* slate-100 */
  --surface-3: #e2e8f0;        /* slate-200 */
  
  /* Legacy aliases for custom.css compatibility */
  --bg-card: var(--surface);           /* alias for --surface */
  --bg-card-inner: var(--surface-2);   /* alias for --surface-2 */
  --bg-card-half: rgba(241, 245, 249, 0.5); /* slate-100/50 */
  
  /* Text */
  --text: #0f172a;             /* slate-900 - primary text */
  --text-primary: #0f172a;     /* slate-900 - legacy alias (for custom.css compatibility) */
  --text-secondary: #475569;    /* slate-600 - secondary text */
  --text-muted: #94a3b8;       /* slate-400 - muted text */
  --text-inverse: #f8fafc;     /* For dark backgrounds */
  
  /* Borders */
  --border: #e2e8f0;           /* slate-200 */
  --border-light: #cbd5e1;     /* slate-300 */
  --border-focus: #059669;     /* emerald-600 for focus */
  
  /* RGB values for rgba() usage */
  --border-rgb: 226, 232, 240; /* slate-200 RGB */
  --surface-2-rgb: 241, 245, 249; /* slate-100 RGB */
  
  /* Links */
  --link: #059669;             /* emerald-600 */
  --link-hover: #047857;       /* emerald-700 */
  
  /* Focus */
  --focus: #059669;            /* emerald-600 */
  --focus-ring: rgba(5, 150, 105, 0.3);
  
  /* Semantic Colors */
  --positive: #059669;          /* emerald-600 */
  --positive-bg: rgba(5, 150, 105, 0.1);
  --negative: #dc2626;          /* red-600 */
  --negative-bg: rgba(220, 38, 38, 0.1);
  --warning: #d97706;           /* amber-600 */
  --warning-bg: rgba(217, 119, 6, 0.1);
  --info: #0284c7;              /* sky-600 */
  --info-bg: rgba(2, 132, 199, 0.1);
  
  /* Accent */
  --accent: #059669;            /* emerald-600 */
  --accent-hover: #047857;      /* emerald-700 */
  --accent-active: #065f46;     /* emerald-800 */
  --accent-glow: rgba(5, 150, 105, 0.3); /* Legacy alias for custom.css compatibility */
  
  /* Slider Colors */
  --slider-emerald: #059669;
  --slider-amber: #d97706;
  --slider-cyan: #0284c7;
}

/* ===========================================
   COLOR PALETTE (12 colors, theme-agnostic)
   Same values in light and dark themes
   Used for charts, data series, highlights
   =========================================== */

:root {
  --color-1: #10b981;   /* Emerald - Positive, success, "cheap" signals */
  --color-2: #3b82f6;   /* Blue - Data series, neutral info */
  --color-3: #a855f7;   /* Purple - Data series, historical */
  --color-4: #f59e0b;   /* Amber - Warnings, "rich", highlights */
  --color-5: #ec4899;   /* Pink - Data series, highlights */
  --color-6: #06b6d4;   /* Cyan - Info, "cheap", data series */
  --color-7: #ef4444;   /* Red - Errors, negative, "rich" */
  --color-8: #6366f1;   /* Indigo - Data series */
  --color-9: #14b8a6;   /* Teal - Data series */
  --color-10: #eab308;  /* Yellow - Highlights, warnings */
  --color-11: #64748b;  /* Slate - UI elements, borders, grids */
  --color-12: #8b5cf6;  /* Violet - Data series */
  
  /* RGB values for color palette (for rgba() usage) */
  --color-1-rgb: 16, 185, 129;   /* Emerald */
  --color-2-rgb: 59, 130, 246;   /* Blue */
  --color-3-rgb: 168, 85, 247;   /* Purple */
  --color-4-rgb: 245, 158, 11;   /* Amber */
  --color-5-rgb: 236, 72, 153;    /* Pink */
  --color-6-rgb: 6, 182, 212;     /* Cyan */
  --color-7-rgb: 239, 68, 68;     /* Red */
  --color-8-rgb: 99, 102, 241;    /* Indigo */
  --color-9-rgb: 20, 184, 166;    /* Teal */
  --color-10-rgb: 234, 179, 8;    /* Yellow */
  --color-11-rgb: 101, 116, 139;  /* Slate */
  --color-12-rgb: 139, 92, 246;   /* Violet */
}

[data-theme="light"] {
  /* Same color values - no change (colors work in both themes) */
  --color-1: #10b981;
  --color-2: #3b82f6;
  --color-3: #a855f7;
  --color-4: #f59e0b;
  --color-5: #ec4899;
  --color-6: #06b6d4;
  --color-7: #ef4444;
  --color-8: #6366f1;
  --color-9: #14b8a6;
  --color-10: #eab308;
  --color-11: #64748b;
  --color-12: #8b5cf6;
  
  /* RGB values - same as dark theme */
  --color-1-rgb: 16, 185, 129;
  --color-2-rgb: 59, 130, 246;
  --color-3-rgb: 168, 85, 247;
  --color-4-rgb: 245, 158, 11;
  --color-5-rgb: 236, 72, 153;
  --color-6-rgb: 6, 182, 212;
  --color-7-rgb: 239, 68, 68;
  --color-8-rgb: 99, 102, 241;
  --color-9-rgb: 20, 184, 166;
  --color-10-rgb: 234, 179, 8;
  --color-11-rgb: 101, 116, 139;
  --color-12-rgb: 139, 92, 246;
}

/* ===========================================
   LEVEL 3: CHART PALETTE TOKENS (Legacy - use --color-* instead)
   Maps to new color palette for backward compatibility
   =========================================== */

:root {
  --series-1: var(--color-1);   /* Emerald */
  --series-2: var(--color-2);   /* Blue */
  --series-3: var(--color-3);   /* Purple */
  --series-4: var(--color-4);   /* Amber */
  --series-5: var(--color-5);   /* Pink */
  --series-6: var(--color-6);   /* Cyan */
  --series-7: var(--color-7);   /* Red */
  --series-8: var(--color-4);   /* Amber (was Orange) */
  --series-9: var(--color-1);   /* Emerald */
  --series-10: var(--color-8);  /* Indigo */
  --series-11: var(--color-4);  /* Amber (was Orange-500) */
  --series-12: var(--color-9);  /* Teal */
}

[data-theme="light"] {
  /* Same as :root - colors are theme-agnostic */
  --series-1: var(--color-1);
  --series-2: var(--color-2);
  --series-3: var(--color-3);
  --series-4: var(--color-4);
  --series-5: var(--color-5);
  --series-6: var(--color-6);
  --series-7: var(--color-7);
  --series-8: var(--color-4);
  --series-9: var(--color-1);
  --series-10: var(--color-8);
  --series-11: var(--color-4);
  --series-12: var(--color-9);
}

/* ===========================================
   BASE STYLES
   =========================================== */

* {
  box-sizing: border-box;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0;
  transition: background-color var(--duration-normal) ease, color var(--duration-normal) ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===========================================
   TYPOGRAPHY
   =========================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0 0 var(--spacing-4) 0;
}

h1 { font-size: var(--font-size-3xl); }
h2 { font-size: var(--font-size-2xl); }
h3 { font-size: var(--font-size-xl); }
h4 { font-size: var(--font-size-lg); }
h5 { font-size: var(--font-size-base); }
h6 { font-size: var(--font-size-sm); }

p {
  margin: 0 0 var(--spacing-4) 0;
  line-height: var(--line-height-relaxed);
}

/* ===========================================
   HEADER UTILITY CLASSES
   Typography utilities for headings with minimal margins
   (spacing controlled via mb-* utilities)
   =========================================== */

.header-1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-lg {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-md {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

.header-sm {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  color: var(--text);
  margin: 0;
}

/* Legacy header classes for custom.css compatibility */
.header-2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-3) 0;
}

.header-3 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-2) 0;
}

.text-body {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  line-height: var(--line-height-normal);
}

/* Tabular Numbers - for all numeric data */
.font-tabular,
.tabular-nums {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Typography Utilities */
.text-xs { font-size: var(--font-size-xs); }
.text-sm { font-size: var(--font-size-sm); }
.text-base { font-size: var(--font-size-base); }
.text-lg { font-size: var(--font-size-lg); }
.text-xl { font-size: var(--font-size-xl); }
.text-2xl { font-size: var(--font-size-2xl); }
.text-3xl { font-size: var(--font-size-3xl); }

.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

/* Semantic Text Colors */
.text-positive { color: var(--positive); }
.text-negative { color: var(--negative); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

/* ===========================================
   TEXT STYLES
   Harmonized: 4 base patterns with font modifiers
   =========================================== */

/* Text Primary - Primary text color */
.text-primary {
  color: var(--text);
}

/* Text Secondary - Secondary text color */
.text-secondary {
  color: var(--text-secondary);
}

/* Text Muted - Muted text color */
.text-muted {
  color: var(--text-muted);
}

/* Text Mono - Monospace font (can be combined with above) */
.text-mono {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

/* Font Modifiers */
.font-mono {
  font-family: var(--font-family-mono);
}

.font-tabular {
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Text Color Modifiers - Use 12-color palette */
.text-color-1 { color: var(--color-1); }
.text-color-2 { color: var(--color-2); }
.text-color-3 { color: var(--color-3); }
.text-color-4 { color: var(--color-4); }
.text-color-5 { color: var(--color-5); }
.text-color-6 { color: var(--color-6); }
.text-color-7 { color: var(--color-7); }
.text-color-8 { color: var(--color-8); }
.text-color-9 { color: var(--color-9); }
.text-color-10 { color: var(--color-10); }
.text-color-11 { color: var(--color-11); }
.text-color-12 { color: var(--color-12); }

/* ===========================================
   CARDS / PANELS
   Harmonized: 5 base patterns with size modifiers
   =========================================== */

/* Base Card - Standard padding */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  transition: background-color var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

/* Size Modifiers */
.card-compact {
  padding: var(--spacing-2);
  border-radius: var(--radius-md);
}

.card-spacious {
  padding: var(--spacing-6);
  border-radius: var(--radius-xl);
}

/* Inner Card - Nested cards */
.card-inner {
  background: var(--surface-2);
  border-radius: var(--radius-md);
  padding: var(--spacing-2);
  transition: background-color var(--duration-normal) ease;
}

/* Alert Card - For alerts/warnings */
.card-alert {
  padding: var(--spacing-3);
  border-radius: var(--radius-lg);
  /* Colors applied via color modifiers below */
}

/* Color Modifiers - Border colors from 12-color palette */
.card-color-1 { border-color: var(--color-1); }
.card-color-2 { border-color: var(--color-2); }
.card-color-3 { border-color: var(--color-3); }
.card-color-4 { border-color: var(--color-4); }
.card-color-5 { border-color: var(--color-5); }
.card-color-6 { border-color: var(--color-6); }
.card-color-7 { border-color: var(--color-7); }
.card-color-8 { border-color: var(--color-8); }
.card-color-9 { border-color: var(--color-9); }
.card-color-10 { border-color: var(--color-10); }
.card-color-11 { border-color: var(--color-11); }
.card-color-12 { border-color: var(--color-12); }

/* Background Color Modifiers */
.card-bg-color-1 { background: rgba(var(--color-1-rgb), 0.1); border-color: rgba(var(--color-1-rgb), 0.3); }
.card-bg-color-2 { background: rgba(var(--color-2-rgb), 0.1); border-color: rgba(var(--color-2-rgb), 0.3); }
.card-bg-color-3 { background: rgba(var(--color-3-rgb), 0.1); border-color: rgba(var(--color-3-rgb), 0.3); }
.card-bg-color-4 { background: rgba(var(--color-4-rgb), 0.1); border-color: rgba(var(--color-4-rgb), 0.3); }
.card-bg-color-5 { background: rgba(var(--color-5-rgb), 0.1); border-color: rgba(var(--color-5-rgb), 0.3); }
.card-bg-color-6 { background: rgba(var(--color-6-rgb), 0.1); border-color: rgba(var(--color-6-rgb), 0.3); }
.card-bg-color-7 { background: rgba(var(--color-7-rgb), 0.1); border-color: rgba(var(--color-7-rgb), 0.3); }
.card-bg-color-8 { background: rgba(var(--color-8-rgb), 0.1); border-color: rgba(var(--color-8-rgb), 0.3); }
.card-bg-color-9 { background: rgba(var(--color-9-rgb), 0.1); border-color: rgba(var(--color-9-rgb), 0.3); }
.card-bg-color-10 { background: rgba(var(--color-10-rgb), 0.1); border-color: rgba(var(--color-10-rgb), 0.3); }
.card-bg-color-11 { background: var(--surface-2); border-color: var(--color-11); }
.card-bg-color-12 { background: rgba(var(--color-12-rgb), 0.1); border-color: rgba(var(--color-12-rgb), 0.3); }

/* Legacy - kept for backward compatibility */
.card-half {
  background: rgba(var(--surface-2-rgb), 0.5);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

[data-theme="light"] .card-half {
  background: rgba(var(--surface-2-rgb), 0.5);
}

/* ===========================================
   BUTTONS
   =========================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: none;
  text-decoration: none;
}

.btn:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary Button - includes base layout so it works with or without .btn */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid var(--accent);
  text-decoration: none;
  background: var(--accent);
  color: var(--text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
  background: var(--accent-active);
  transform: translateY(0);
}

.btn-primary:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

[data-theme="light"] .btn-primary {
  color: white;
}

/* Secondary Button - includes base layout so it works with or without .btn */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-3) var(--spacing-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  border: 1px solid var(--border);
  text-decoration: none;
  background: var(--surface-2);
  color: var(--text);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}

.btn-secondary:active:not(:disabled) {
  background: var(--surface-2);
  transform: translateY(0);
}

.btn-secondary:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Subtle Button */
.btn-subtle {
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-subtle:hover:not(:disabled) {
  background: var(--surface-2);
  color: var(--text);
}

/* Toggle Button */
.toggle-btn {
  padding: var(--spacing-2) var(--spacing-3);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
}

.toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
}

.toggle-btn.active {
  background: var(--accent);
  color: var(--text-inverse);
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--focus-ring);
}

[data-theme="light"] .toggle-btn.active {
  color: white;
}

/* Tab Button */
.btn-tab {
  padding: var(--spacing-2) var(--spacing-4);
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--radius-t-lg) var(--radius-t-lg) 0 0;
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.btn-tab:hover {
  background: rgba(var(--surface-2-rgb), 0.5);
  color: var(--text-secondary);
}

.btn-tab.active {
  background: var(--surface-2);
  color: var(--color-1); /* Emerald for active tab */
  border-bottom-color: var(--color-1);
}

/* Button Size Modifiers */
.btn-sm {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

.btn-md {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
}

.btn-lg {
  padding: var(--spacing-4) var(--spacing-6);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-xl);
}

/* Button Width Modifier */
.btn-full {
  width: 100%;
}

/* Button Color Modifiers (for active states, etc.) */
.btn-color-1.active { background: var(--color-1); color: white; border-color: var(--color-1); }
.btn-color-2.active { background: var(--color-2); color: white; border-color: var(--color-2); }
.btn-color-3.active { background: var(--color-3); color: white; border-color: var(--color-3); }
.btn-color-4.active { background: var(--color-4); color: white; border-color: var(--color-4); }
.btn-color-5.active { background: var(--color-5); color: white; border-color: var(--color-5); }
.btn-color-6.active { background: var(--color-6); color: white; border-color: var(--color-6); }
.btn-color-7.active { background: var(--color-7); color: white; border-color: var(--color-7); }
.btn-color-8.active { background: var(--color-8); color: white; border-color: var(--color-8); }
.btn-color-9.active { background: var(--color-9); color: white; border-color: var(--color-9); }
.btn-color-10.active { background: var(--color-10); color: white; border-color: var(--color-10); }
.btn-color-11.active { background: var(--color-11); color: white; border-color: var(--color-11); }
.btn-color-12.active { background: var(--color-12); color: white; border-color: var(--color-12); }

/* ===========================================
   FORM INPUTS
   =========================================== */

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
textarea,
select {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--surface);
}

/* Hide number input spinners */
input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Input Field Class */
.input-field {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  transition: border-color var(--duration-fast) ease;
}

.input-field:focus {
  border-color: var(--focus);
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* IV Input - Uses standard input-text styling */
.iv-input {
  /* Extends .input-text - uses same base styles */
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.iv-input:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ===========================================
   INPUT TYPES
   Harmonized: 3 base patterns
   =========================================== */

/* Input Text - Text input and select (unified base) */
.input-text {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-sm);
  color: var(--text);
  font-family: var(--font-family-base);
  transition: border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.input-text:focus {
  outline: none;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Select adds dropdown arrow */
select.input-text {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);
  appearance: none;
}

/* Input Range - Range slider (unified) */
.input-range {
  width: 100%;
  height: 0.5rem;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.input-range::-webkit-slider-runnable-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

.input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.375rem;
  background-color: var(--color-1); /* Default to emerald */
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: background-color var(--duration-fast) ease;
}

.input-range::-moz-range-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

.input-range::-moz-range-thumb {
  background-color: var(--color-1);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* Range Color Modifiers */
.input-range-color-1::-webkit-slider-thumb { background-color: var(--color-1); }
.input-range-color-1::-moz-range-thumb { background-color: var(--color-1); }
.input-range-color-2::-webkit-slider-thumb { background-color: var(--color-2); }
.input-range-color-2::-moz-range-thumb { background-color: var(--color-2); }
.input-range-color-3::-webkit-slider-thumb { background-color: var(--color-3); }
.input-range-color-3::-moz-range-thumb { background-color: var(--color-3); }
.input-range-color-4::-webkit-slider-thumb { background-color: var(--color-4); }
.input-range-color-4::-moz-range-thumb { background-color: var(--color-4); }
.input-range-color-5::-webkit-slider-thumb { background-color: var(--color-5); }
.input-range-color-5::-moz-range-thumb { background-color: var(--color-5); }
.input-range-color-6::-webkit-slider-thumb { background-color: var(--color-6); }
.input-range-color-6::-moz-range-thumb { background-color: var(--color-6); }

/* Input Checkbox - Standard checkbox */
.input-checkbox {
  width: 1rem;
  height: 1rem;
  cursor: pointer;
  accent-color: var(--color-1);
}

.input-checkbox:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Input Focus Color Modifiers */
.input-text-color-1:focus { border-color: var(--color-1); }
.input-text-color-2:focus { border-color: var(--color-2); }
.input-text-color-3:focus { border-color: var(--color-3); }
.input-text-color-4:focus { border-color: var(--color-4); }
.input-text-color-5:focus { border-color: var(--color-5); }
.input-text-color-6:focus { border-color: var(--color-6); }

/* Select Dropdown */
select.input-field,
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2394a3b8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--spacing-2) center;
  background-size: 1rem;
  padding-right: var(--spacing-8);
  appearance: none;
}

[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
}

/* ===========================================
   RANGE SLIDERS
   =========================================== */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
  width: 100%;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -0.375rem;
  background-color: var(--slider-emerald);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  transition: background-color var(--duration-fast) ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--accent-hover);
}

input[type="range"]::-moz-range-track {
  background: var(--border-light);
  height: 0.5rem;
  border-radius: var(--radius-sm);
}

input[type="range"]::-moz-range-thumb {
  background-color: var(--slider-emerald);
  height: 1.25rem;
  width: 1.25rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  cursor: pointer;
}

/* Colored Slider Variants */
input[type="range"].amber-slider::-webkit-slider-thumb {
  background-color: var(--slider-amber);
}

input[type="range"].amber-slider::-moz-range-thumb {
  background-color: var(--slider-amber);
}

input[type="range"].cyan-slider::-webkit-slider-thumb {
  background-color: var(--slider-cyan);
}

input[type="range"].cyan-slider::-moz-range-thumb {
  background-color: var(--slider-cyan);
}

/* ===========================================
   TABLES
   =========================================== */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

thead {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}

th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

tbody tr:hover {
  background: var(--surface-2);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* Numeric columns - right aligned, tabular */
td.numeric,
th.numeric {
  text-align: right;
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

/* Zebra striping (optional) */
table.zebra tbody tr:nth-child(even) {
  background: var(--surface-2);
}

table.zebra tbody tr:nth-child(even):hover {
  background: var(--surface);
}

/* Dense table */
table.dense th,
table.dense td {
  padding: var(--spacing-2) var(--spacing-3);
  font-size: var(--font-size-xs);
}

/* ===========================================
   TABLE TYPES
   Harmonized: 2 base patterns with density modifiers
   =========================================== */

/* Table Standard - Default table styling */
.table-standard {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table-standard thead {
  background: var(--surface-2);
  border-bottom: 2px solid var(--border);
}

.table-standard th {
  padding: var(--spacing-3) var(--spacing-4);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  font-size: var(--font-size-xs);
}

.table-standard td {
  padding: var(--spacing-3) var(--spacing-4);
  border-bottom: 1px solid var(--border);
  color: var(--text-secondary);
}

.table-standard tbody tr:hover {
  background: var(--surface-2);
}

/* Table Dense - Compact table */
.table-dense {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
}

.table-dense thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.table-dense th {
  padding: var(--spacing-1.5) var(--spacing-1);
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

.table-dense td {
  padding: var(--spacing-1.5) var(--spacing-1);
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-family-mono);
}

.table-dense tbody tr:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* Density Modifiers */
.table-spacious th,
.table-spacious td {
  padding: var(--spacing-3) var(--spacing-2);
}

/* Table Compact - Very tight columns with vertical dividers */
.table-compact {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-xs);
  table-layout: auto;
  min-width: max-content;
}

.table-compact thead {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

.table-compact th {
  padding: 0 2px !important;
  text-align: center;
  font-weight: var(--font-weight-medium);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-compact th:last-child {
  border-right: none;
}

.table-compact td {
  padding: 0 2px !important;
  border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
  border-right: 1px solid var(--border);
  color: var(--text-secondary);
  text-align: center;
  font-family: var(--font-family-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table-compact td:last-child {
  border-right: none;
}

.table-compact tbody tr:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* Column width classes for table-compact */
.table-compact th.text-left,
.table-compact td.text-left {
  text-align: left;
}

.table-compact th.text-right,
.table-compact td.text-right {
  text-align: right;
}

.table-compact th.text-center,
.table-compact td.text-center {
  text-align: center;
}

/* ===========================================
   FROZEN COLUMNS
   Freeze first N columns when scrolling horizontally
   =========================================== */

/* Frozen column base - applies to both th and td */
.table-compact th.frozen-col,
.table-compact td.frozen-col {
  position: sticky;
  background: var(--surface-2);
  z-index: 5;
}

/* Frozen column 1 - Action (left: 0) */
.table-compact th.frozen-col-1,
.table-compact td.frozen-col-1 {
  left: 0;
  z-index: 6;
}

/* Frozen column 2 - Ticker (left: 80px) */
.table-compact th.frozen-col-2,
.table-compact td.frozen-col-2 {
  left: 80px;
  z-index: 6;
}

/* Frozen column 3 - Stk Px (left: 130px = 80+50) */
.table-compact th.frozen-col-3,
.table-compact td.frozen-col-3 {
  left: 130px;
  z-index: 6;
}

/* Frozen column 4 - Expo (left: 180px = 80+50+50) */
.table-compact th.frozen-col-4,
.table-compact td.frozen-col-4 {
  left: 180px;
  z-index: 6;
}

/* Frozen column 5 - Strike (left: 245px = 80+50+50+65) */
.table-compact th.frozen-col-5,
.table-compact td.frozen-col-5 {
  left: 245px;
  z-index: 6;
  border-right: 2px solid var(--border);
  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
}

/* Ensure header background matches for frozen columns */
.table-compact thead th.frozen-col {
  background: var(--surface-2);
}

/* Ensure hover state works on frozen columns */
.table-compact tbody tr:hover td.frozen-col {
  background: var(--surface);
}

/* Layout Modifier - Grid-based table */
.table-grid {
  display: grid;
  gap: 0;
}

/* Row State Modifiers */
.table-row-selected {
  background: var(--positive-bg) !important;
}

.table-row-hover:hover {
  background: rgba(var(--surface-2-rgb), 0.3);
}

/* ===========================================
   LABORATORY - STRATEGY CARDS (My SkewPreme, My HedgeRoll, etc.)
   Shared list and card styling; position tables use .table-compact (white/secondary text)
   =========================================== */

.engaged-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.engaged-list li {
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
  background: var(--surface);
  border-left: 4px solid var(--positive);
}

/* Card title and details in accent green; position table keeps .table-compact (text-secondary) */
.engaged-list li > div > div:first-child {
  color: var(--text);
}

.engaged-list li .backtest-item-details,
.engaged-list li .backtest-item-details strong {
  color: var(--text);
}

/* Position tables in strategy cards: center all cells */
.engaged-list .table-compact th,
.engaged-list .table-compact td {
  text-align: center;
}

/* Currency columns in lab position tables: tabular numbers for alignment; value includes $ prefix from template */
.engaged-list .table-compact .cell-currency {
  font-variant-numeric: tabular-nums;
}

/* ===========================================
   BADGES
   =========================================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
}

.badge-neutral {
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.badge-positive {
  background: var(--positive-bg);
  color: var(--positive);
  border: 1px solid var(--positive);
}

.badge-negative {
  background: var(--negative-bg);
  color: var(--negative);
  border: 1px solid var(--negative);
}

.badge-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning);
}

.badge-info {
  background: var(--info-bg);
  color: var(--info);
  border: 1px solid var(--info);
}

/* ===========================================
   BADGE TYPES
   Harmonized: 2 base patterns with size modifiers
   =========================================== */

/* Badge Standard - Base badge with padding, border, rounded */
.badge-standard {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
}

/* Badge Text - Text-only badge (no background/border) */
.badge-text {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  /* No padding, border, or background */
}

/* Size Modifiers */
.badge-sm {
  padding: var(--spacing-0.5) var(--spacing-1.5);
  font-size: var(--font-size-xs);
}

.badge-md {
  padding: var(--spacing-1) var(--spacing-2);
  font-size: var(--font-size-xs);
}

/* Badge Color Modifiers */
.badge-color-1 { background: rgba(var(--color-1-rgb), 0.1); color: var(--color-1); border-color: rgba(var(--color-1-rgb), 0.5); }
.badge-color-2 { background: rgba(var(--color-2-rgb), 0.1); color: var(--color-2); border-color: rgba(var(--color-2-rgb), 0.5); }
.badge-color-3 { background: rgba(var(--color-3-rgb), 0.1); color: var(--color-3); border-color: rgba(var(--color-3-rgb), 0.5); }
.badge-color-4 { background: rgba(var(--color-4-rgb), 0.1); color: var(--color-4); border-color: rgba(var(--color-4-rgb), 0.5); }
.badge-color-5 { background: rgba(var(--color-5-rgb), 0.1); color: var(--color-5); border-color: rgba(var(--color-5-rgb), 0.5); }
.badge-color-6 { background: rgba(var(--color-6-rgb), 0.1); color: var(--color-6); border-color: rgba(var(--color-6-rgb), 0.5); }
.badge-color-7 { background: rgba(var(--color-7-rgb), 0.1); color: var(--color-7); border-color: rgba(var(--color-7-rgb), 0.5); }
.badge-color-8 { background: rgba(var(--color-8-rgb), 0.1); color: var(--color-8); border-color: rgba(var(--color-8-rgb), 0.5); }
.badge-color-9 { background: rgba(var(--color-9-rgb), 0.1); color: var(--color-9); border-color: rgba(var(--color-9-rgb), 0.5); }
.badge-color-10 { background: rgba(var(--color-10-rgb), 0.1); color: var(--color-10); border-color: rgba(var(--color-10-rgb), 0.5); }
.badge-color-11 { background: var(--surface-2); color: var(--color-11); border-color: var(--color-11); }
.badge-color-12 { background: rgba(var(--color-12-rgb), 0.1); color: var(--color-12); border-color: rgba(var(--color-12-rgb), 0.5); }

/* Text-only badge colors */
.badge-text-color-1 { color: var(--color-1); }
.badge-text-color-2 { color: var(--color-2); }
.badge-text-color-3 { color: var(--color-3); }
.badge-text-color-4 { color: var(--color-4); }
.badge-text-color-5 { color: var(--color-5); }
.badge-text-color-6 { color: var(--color-6); }
.badge-text-color-7 { color: var(--color-7); }
.badge-text-color-8 { color: var(--color-8); }
.badge-text-color-9 { color: var(--color-9); }
.badge-text-color-10 { color: var(--color-10); }
.badge-text-color-11 { color: var(--color-11); }
.badge-text-color-12 { color: var(--color-12); }

/* Context Badge (header) */
.context-badge {
  display: inline-block;
  padding: var(--spacing-1) var(--spacing-2);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ===========================================
   DIVIDERS / SEPARATORS
   =========================================== */

.divider {
  height: 1px;
  background: var(--border);
  margin: var(--spacing-4) 0;
  border: none;
}

.divider-vertical {
  width: 1px;
  height: 100%;
  background: var(--border);
  margin: 0 var(--spacing-4);
  border: none;
}

.divider-light {
  background: var(--border-light);
}

/* ===========================================
   COLLAPSIBLE SECTIONS
   =========================================== */

.collapsible-header {
  cursor: pointer;
  user-select: none;
  padding: var(--spacing-3) var(--spacing-4);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background-color var(--duration-fast) ease;
}

.collapsible-header:hover {
  background: var(--surface);
}

.collapsible-content {
  padding: var(--spacing-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ===========================================
   SCORE BAR
   Reusable progress bar component for scores/ratings
   =========================================== */

.score-bar {
  height: 100%;
  background: var(--accent);
  transition: width var(--duration-normal) ease;
  border-radius: var(--radius-sm);
}

.score-bar-container {
  width: 100%;
  height: var(--spacing-2);
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* ===========================================
   SCROLLBARS
   =========================================== */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-2);
}

::-webkit-scrollbar-thumb {
  background: var(--border-light);
  border-radius: var(--radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-light) var(--surface-2);
}

/* ===========================================
   HEADER STACK - 5 Row System
   =========================================== */

/* ROW A: TICKER BAR (Fixed, Always Visible) */
.header-ticker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-ticker);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.ticker-container {
  display: flex;
  align-items: center;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .ticker-container {
    animation: none;
  }
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: fit-content;
}

.ticker-symbol {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  margin-right: var(--spacing-2);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-price {
  margin-right: var(--spacing-2);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change {
  margin-right: var(--spacing-1);
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change-pct {
  flex-shrink: 0;
  white-space: nowrap;
}

.ticker-change.positive {
  color: var(--positive);
}

.ticker-change.negative {
  color: var(--negative);
}

.ticker-change-pct {
  font-size: 0.7rem;
}

.ticker-separator {
  width: 1px;
  height: 1rem;
  background: var(--border);
  margin: 0 var(--spacing-2);
}

/* ROW B: PRIMARY NAVIGATION (Sticky) */
.header-primary-nav {
  position: sticky;
  top: 2rem; /* Below ticker */
  left: 0;
  right: 0;
  height: 3rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-primary-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
}

.header-primary-nav.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.primary-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.primary-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.primary-nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-5);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  border-bottom: 2px solid transparent;
}

.primary-nav-link:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.primary-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background-color: var(--surface-2);
}

/* ROW C: SECONDARY NAVIGATION (Sticky) */
.header-secondary-nav {
  position: sticky;
  top: 5rem; /* Below ticker + primary nav */
  left: 0;
  right: 0;
  height: 2.5rem;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-secondary-nav);
  display: flex;
  align-items: center;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
}

.header-secondary-nav.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.header-secondary-nav.hidden {
  display: none;
}

.secondary-nav-list {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.secondary-nav-item {
  height: 100%;
  display: flex;
  align-items: center;
}

.secondary-nav-link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--spacing-4);
  color: var(--text-muted);
  text-decoration: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
  border-bottom: 2px solid transparent;
}

.secondary-nav-link:hover {
  color: var(--text-secondary);
  background-color: var(--surface);
}

.secondary-nav-link.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background-color: var(--surface);
}

.secondary-nav-divider {
  width: 1px;
  height: 60%;
  background-color: var(--border);
  margin: 0 var(--spacing-2);
  opacity: 0.5;
}

.secondary-nav-link.premium {
  color: var(--warning);
}

.secondary-nav-link.premium:hover {
  color: var(--warning);
  opacity: 0.9;
}

.secondary-nav-link.premium.active {
  color: var(--warning);
  border-bottom-color: var(--warning);
}

/* ROW D: CONTEXT BAR (Sticky) */
.header-context-bar {
  position: sticky;
  top: 7.5rem; /* Below ticker + primary + secondary nav */
  left: 0;
  right: 0;
  height: 2.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: var(--z-context-bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-4);
  transition: transform var(--duration-normal) ease, height var(--duration-normal) ease;
  font-size: var(--font-size-xs);
}

.header-context-bar.collapsed {
  transform: translateY(calc(-100% + 0.5rem));
  height: 0.5rem;
  overflow: hidden;
}

.context-bar-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.context-report-name {
  font-weight: var(--font-weight-semibold);
  color: var(--text);
}

/* Context bar tabs (report-level sub-nav) */
.context-bar-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  margin-left: var(--spacing-3);
  padding-left: var(--spacing-3);
  border-left: 1px solid var(--border);
}

.context-bar-tab {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-decoration: none;
  padding: 0.125rem var(--spacing-2);
  margin: 0 0.0625rem;
  border-radius: var(--radius-sm);
  border-bottom: 2px solid transparent;
  transition: color var(--duration-fast) ease, border-color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

.context-bar-tab:hover {
  color: var(--text);
  background-color: var(--surface-2);
}

.context-bar-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: var(--font-weight-medium);
}

.context-bar-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}

.context-user-name {
  color: var(--text-secondary);
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) ease;
  font-size: var(--font-size-sm);
  line-height: 1;
}

.theme-toggle-btn:hover {
  background: var(--surface);
  border-color: var(--accent);
  transform: scale(1.05);
}

.theme-toggle-btn:active {
  transform: scale(0.95);
}

.theme-toggle-btn:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.theme-toggle-icon {
  display: inline-block;
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}

/* ===========================================
   MAIN CONTENT AREA
   =========================================== */

.main-content {
  /* Header stack spacing:
     - Ticker: 2rem (fixed, takes up space)
     - Primary nav: 3rem (sticky at top: 2rem)
     - Secondary nav: 2.5rem (sticky at top: 5rem) - only when visible
     - Context bar: 2.25rem (sticky at top: 7.5rem)
     - Total when all visible: 2 + 3 + 2.5 + 2.25 = 9.75rem
     - When secondary nav hidden: 2 + 3 + 2.25 = 7.25rem
     - Default to full stack, will be adjusted by JS or CSS when secondary nav is hidden
     - Note: Sticky elements don't push content, but fixed ticker does
  */
  margin-top: 1rem;
  padding: 0;
  z-index: var(--z-content);
  /* Let content determine height naturally - no forced min-height */
}


/* Adjust content margin when nav is collapsed */
body.nav-collapsed .main-content {
  margin-top: 3.5rem; /* Ticker (2rem) + collapsed navs (1.5rem) */
}

/* Risk test: constrain and center main content (all risk test views: index, results) */
#risk-test-root .main-content {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-4);
  padding-right: var(--spacing-4);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Background Utilities */
.bg-positive-subtle { background: var(--positive-bg); }
.bg-negative-subtle { background: var(--negative-bg); }
.bg-warning-subtle { background: var(--warning-bg); }
.bg-info-subtle { background: var(--info-bg); }

/* Spacing Utilities */
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-3 { margin-top: var(--spacing-3); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-3 { margin-bottom: var(--spacing-3); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.p-1 { padding: var(--spacing-1); }
.p-2 { padding: var(--spacing-2); }
.p-3 { padding: var(--spacing-3); }
.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

@media (max-width: 768px) {
  .header-ticker {
    height: 1.75rem;
  }
  
  .ticker-item {
    font-size: 0.7rem;
    padding: 0 var(--spacing-3);
  }
  
  .header-primary-nav {
    top: 1.75rem;
    height: 2.5rem;
  }
  
  .header-secondary-nav {
    top: 4.25rem;
    height: 2rem;
  }
  
  .header-context-bar {
    top: 6.25rem;
    height: 2rem;
  }
  
  .main-content {
    margin-top: 8.25rem;
    padding: 0; /* React apps manage their own padding */
  }
  
  body.nav-collapsed .main-content {
    margin-top: 3rem;
  }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --border: var(--text);
    --border-light: var(--text);
  }
}

/* ===========================================
   CHART COLOR CLASSES
   For SVG elements and dynamic chart colors
   =========================================== */

/* Chart series colors (for SVG stroke/fill) */
/* Chart Series Color Classes - Map to 12-color palette */
.chart-series-1 { color: var(--color-1); }  /* Emerald */
.chart-series-2 { color: var(--color-2); }  /* Blue */
.chart-series-3 { color: var(--color-3); }  /* Purple */
.chart-series-4 { color: var(--color-4); }  /* Amber */
.chart-series-5 { color: var(--color-5); }  /* Pink */
.chart-series-6 { color: var(--color-6); }  /* Cyan */
.chart-series-7 { color: var(--color-7); }  /* Red */
.chart-series-8 { color: var(--color-4); }  /* Amber (was Orange) */
.chart-series-9 { color: var(--color-1); }  /* Emerald */
.chart-series-10 { color: var(--color-8); } /* Indigo */
.chart-series-11 { color: var(--color-4); } /* Amber (was Orange-500) */
.chart-series-12 { color: var(--color-9); } /* Teal */

/* ===========================================
   CHART INDICATOR TYPES
   Harmonized: 2 patterns (Spectrum Bar, Edge Bar)
   =========================================== */

/* Spectrum Bar - Market structure indicators */
.spectrum-bar {
  position: relative;
  height: 0.75rem;
  width: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.spectrum-bar-track {
  position: relative;
  height: 100%;
  width: 100%;
  background: linear-gradient(to right, var(--color-1) 0%, var(--color-4) 50%, var(--color-7) 100%);
  border-radius: var(--radius-sm);
}

.spectrum-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-11); /* Slate */
  transform: translateX(-50%);
}

.spectrum-bar-dot {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  /* Color set dynamically via style prop */
}

.spectrum-bar-label-cheap {
  color: var(--color-1); /* Emerald */
  font-size: var(--font-size-xs);
}

.spectrum-bar-label-rich {
  color: var(--color-4); /* Amber */
  font-size: var(--font-size-xs);
}

.spectrum-bar-market-value {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  font-family: var(--font-family-mono);
}

.spectrum-bar-view-value {
  font-size: 0.625rem;
  font-family: var(--font-family-mono);
  /* Color set dynamically via style prop */
}

/* Edge Bar - Edge indicators */
.edge-bar {
  position: relative;
  height: 0.75rem;
  width: 5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-3);
}

.edge-bar-track {
  position: relative;
  height: 100%;
  width: 100%;
  background: var(--surface-3);
  border-radius: var(--radius-sm);
}

.edge-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: var(--color-11); /* Slate */
  transform: translateX(-50%);
}

.edge-bar-positive {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  background: var(--color-4); /* Amber */
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  /* Width set dynamically */
}

.edge-bar-negative {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 50%;
  background: var(--color-6); /* Cyan */
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  /* Width set dynamically */
}

/* Chart series backgrounds */
.bg-series-1 { background-color: var(--series-1); }
.bg-series-2 { background-color: var(--series-2); }
.bg-series-3 { background-color: var(--series-3); }
.bg-series-4 { background-color: var(--series-4); }
.bg-series-5 { background-color: var(--series-5); }
.bg-series-6 { background-color: var(--series-6); }
.bg-series-7 { background-color: var(--series-7); }
.bg-series-8 { background-color: var(--series-8); }
.bg-series-9 { background-color: var(--series-9); }
.bg-series-10 { background-color: var(--series-10); }
.bg-series-11 { background-color: var(--series-11); }
.bg-series-12 { background-color: var(--series-12); }

/* ===========================================
   MARKER CLASSES (for spectrum bars, indicators)
   =========================================== */

.marker-rich {
  background-color: var(--warning);
  color: var(--warning);
}

.marker-cheap {
  background-color: var(--info);
  color: var(--info);
}

.marker-neutral {
  background-color: var(--text-muted);
  color: var(--text-muted);
}

/* Marker variants for different intensities */
.marker-rich-intense {
  background-color: var(--series-8); /* Orange */
  color: var(--series-8);
}

.marker-cheap-intense {
  background-color: var(--series-6); /* Cyan */
  color: var(--series-6);
}

/* ===========================================
   SPECTRUM BAR COMPONENT
   =========================================== */

.spectrum-bar-track {
  position: relative;
  height: 0.5rem;
  width: 100%;
  background: linear-gradient(
    to right,
    rgba(var(--color-6-rgb), 0.15) 0%,
    var(--surface-3) 50%,
    rgba(var(--color-4-rgb), 0.15) 100%
  );
  border-radius: 9999px;
  overflow: visible;
}

.spectrum-bar-center-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--text-muted);
  left: 50%;
  transform: translateX(-50%);
}

.spectrum-bar-dot {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  border: 2px solid var(--bg);
  box-shadow: var(--shadow-md);
}

.spectrum-label-cheap {
  color: var(--info);
  opacity: 0.7;
  font-size: 0.625rem;
}

.spectrum-label-rich {
  color: var(--warning);
  opacity: 0.7;
  font-size: 0.625rem;
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

/* Text transform */
.text-uppercase {
  text-transform: uppercase;
}

/* Background patterns */
.bg-dashed-line {
  background-image: repeating-linear-gradient(
    90deg,
    currentColor 0,
    currentColor 3px,
    transparent 3px,
    transparent 5px
  );
}

/* Opacity utilities */
.opacity-25 { opacity: 0.25; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* Chart grid lines */
.chart-grid-line {
  stroke: var(--border);
  stroke-dasharray: 3, 3;
  opacity: 0.5;
}

.chart-axis-line {
  stroke: var(--border-light);
}

.chart-text-label {
  fill: var(--text-muted);
}

/* Chart semantic colors */
.chart-positive {
  stroke: var(--positive);
  fill: var(--positive);
}

.chart-negative {
  stroke: var(--negative);
  fill: var(--negative);
}

.chart-warning {
  stroke: var(--warning);
  fill: var(--warning);
}

.chart-info {
  stroke: var(--info);
  fill: var(--info);
}

/* ===========================================
   LINE STYLES (Charts/SVG)
   Harmonized: 4 base patterns with style modifiers
   =========================================== */

/* Line Grid - Grid lines (dashed, thin, muted) */
.line-grid {
  stroke: var(--color-11); /* Slate */
  stroke-width: 0.5;
  stroke-dasharray: 3, 3;
  opacity: 0.3;
}

/* Line Axis - Axis/border lines (solid, standard width) */
.line-axis {
  stroke: var(--color-11); /* Slate */
  stroke-width: 1;
  /* Solid line (no dasharray) */
}

/* Line Data - Data series lines (solid, medium width, color from palette) */
.line-data {
  stroke-width: 2;
  /* Color applied via color modifiers */
  fill: none;
}

/* Line Reference - Reference lines (dashed, medium width, color from palette) */
.line-reference {
  stroke-width: 1.5;
  stroke-dasharray: 5, 5;
  /* Color applied via color modifiers */
  fill: none;
}

/* Style Modifiers */
.line-dashed {
  stroke-dasharray: 3, 3;
}

.line-dashed-long {
  stroke-dasharray: 8, 4;
}

.line-thin {
  stroke-width: 0.5;
}

.line-medium {
  stroke-width: 1.5;
}

.line-thick {
  stroke-width: 2.5;
}

/* Line Color Modifiers - Use 12-color palette */
.line-color-1 { stroke: var(--color-1); fill: var(--color-1); }
.line-color-2 { stroke: var(--color-2); fill: var(--color-2); }
.line-color-3 { stroke: var(--color-3); fill: var(--color-3); }
.line-color-4 { stroke: var(--color-4); fill: var(--color-4); }
.line-color-5 { stroke: var(--color-5); fill: var(--color-5); }
.line-color-6 { stroke: var(--color-6); fill: var(--color-6); }
.line-color-7 { stroke: var(--color-7); fill: var(--color-7); }
.line-color-8 { stroke: var(--color-8); fill: var(--color-8); }
.line-color-9 { stroke: var(--color-9); fill: var(--color-9); }
.line-color-10 { stroke: var(--color-10); fill: var(--color-10); }
.line-color-11 { stroke: var(--color-11); fill: var(--color-11); }
.line-color-12 { stroke: var(--color-12); fill: var(--color-12); }

/* Line Opacity Modifiers */
.line-opacity-25 { opacity: 0.25; }
.line-opacity-50 { opacity: 0.5; }
.line-opacity-70 { opacity: 0.7; }
.line-opacity-80 { opacity: 0.8; }

/* ===========================================
   LOGO THEME SWITCHING
   =========================================== */

/* Dark mode: show light logo */
[data-theme="dark"] .logo-dark-mode {
  display: block;
}

[data-theme="dark"] .logo-light-mode {
  display: none;
}

/* Light mode: show dark logo */
[data-theme="light"] .logo-light-mode {
  display: block;
}

[data-theme="light"] .logo-dark-mode {
  display: none;
}

/* ===========================================
   TOOLTIPS
   Simple CSS-only tooltip pattern
   Works in both light and dark themes
   =========================================== */

.tooltip-trigger {
  position: relative;
  display: inline-block;
  cursor: help;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
  transition: color var(--duration-fast) ease;
}

.tooltip-trigger:hover {
  color: var(--accent-hover);
}

.tooltip-trigger .tooltip {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  background: var(--surface);
  color: var(--text);
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-normal);
  white-space: normal;
  width: 240px;
  z-index: var(--z-tooltip);
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) ease, visibility var(--duration-fast) ease;
  margin-bottom: var(--spacing-2);
}

.tooltip-trigger:hover .tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Tooltip arrow (pointing down) */
.tooltip-trigger .tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--surface);
  margin-top: -1px;
}

.tooltip-trigger .tooltip::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--border);
  margin-top: 0;
  z-index: -1;
}

/* Tooltip positioning variants */
.tooltip-trigger .tooltip.tooltip-right {
  left: auto;
  right: 0;
  transform: translateX(0) translateY(-8px);
}

.tooltip-trigger:hover .tooltip.tooltip-right {
  transform: translateX(0) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-right::after,
.tooltip-trigger .tooltip.tooltip-right::before {
  left: auto;
  right: var(--spacing-3);
  transform: translateX(0);
}

.tooltip-trigger .tooltip.tooltip-left {
  left: 0;
  right: auto;
  transform: translateX(0) translateY(-8px);
}

.tooltip-trigger:hover .tooltip.tooltip-left {
  transform: translateX(0) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-left::after,
.tooltip-trigger .tooltip.tooltip-left::before {
  left: var(--spacing-3);
  right: auto;
  transform: translateX(0);
}

.tooltip-trigger .tooltip.tooltip-bottom {
  bottom: auto;
  top: 100%;
  transform: translateX(-50%) translateY(8px);
  margin-bottom: 0;
  margin-top: var(--spacing-2);
}

.tooltip-trigger:hover .tooltip.tooltip-bottom {
  transform: translateX(-50%) translateY(0);
}

.tooltip-trigger .tooltip.tooltip-bottom::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--surface);
  margin-top: 0;
  margin-bottom: -1px;
}

.tooltip-trigger .tooltip.tooltip-bottom::before {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--border);
  margin-top: 0;
  margin-bottom: 0;
}

/* Wider tooltip variant */
.tooltip-trigger .tooltip.tooltip-wide {
  width: 320px;
}

/* Narrow tooltip variant */
.tooltip-trigger .tooltip.tooltip-narrow {
  width: 180px;
}

/* ===========================================
   MODAL / OVERLAY COMPONENTS
   For help modals, dialogs, overlays
   =========================================== */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-5);
}

.modal-content {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  max-width: 800px;
  max-height: 90vh;
  overflow: auto;
  padding: var(--spacing-6);
  box-shadow: var(--shadow-xl);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-5);
}

.modal-title {
  font-size: var(--font-size-lg);
  color: var(--positive);
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.modal-close-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: var(--font-size-xl);
  cursor: pointer;
  padding: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--duration-fast) ease;
}

.modal-close-btn:hover {
  color: var(--text);
}

/* Promo Modal class — promotional overlays managed by modal-manager.js.
   System/generic modals (help, confirm, etc.) use .modal-overlay without this. */
.promo-modal .modal-content {
  max-width: 440px;
}

/* Promo Modal content styles */
.promo-description {
  color: var(--text-secondary);
  margin-bottom: var(--spacing-4);
  line-height: var(--line-height-relaxed);
}

.promo-code-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-5);
  text-align: center;
}

.promo-code-label {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-1);
}

.promo-code-value {
  color: var(--positive);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.1em;
}

.promo-code-detail {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin-top: var(--spacing-1);
}

.promo-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  align-items: center;
}

.promo-actions .btn-primary {
  width: 100%;
}

.promo-dismiss-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--font-size-sm);
  padding: var(--spacing-2);
  transition: color var(--duration-fast) ease;
}

.promo-dismiss-btn:hover {
  color: var(--text);
}

.modal-body {
  font-size: var(--font-size-sm);
  color: var(--text);
  line-height: var(--line-height-relaxed);
}

/* ===========================================
   INFO BOX / ALERT BOX COMPONENTS
   For highlighted information, warnings, tips
   =========================================== */

.info-box {
  margin-bottom: var(--spacing-5);
  padding: var(--spacing-3);
  background: var(--positive-bg);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--positive);
}

.info-box-warning {
  background: var(--warning-bg);
  border-left-color: var(--warning);
}

.info-box-info {
  background: var(--info-bg);
  border-left-color: var(--info);
}

.info-box-negative {
  background: var(--negative-bg);
  border-left-color: var(--negative);
}

.info-box-code {
  background: rgba(var(--surface-2-rgb), 0.7);
  padding: var(--spacing-2.5);
  border-radius: var(--radius-md);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
}

/* ===========================================
   TAB NAVIGATION (for React apps)
   Horizontal tab bar with active state
   =========================================== */

.tab-nav {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--spacing-4);
  overflow-x: auto;
}

.tab-button {
  padding: var(--spacing-2) var(--spacing-4);
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all var(--duration-fast) ease;
  white-space: nowrap;
  font-family: var(--font-family-base);
}

.tab-button:hover {
  background: rgba(var(--surface-2-rgb), 0.5);
  color: var(--text-secondary);
}

.tab-button.active {
  background: var(--surface-2);
  color: var(--positive);
  border-bottom-color: var(--positive);
}

/* Tab theme variants (for accent colors) */
.tab-button.active.tab-theme-blue {
  color: var(--color-6);
  border-bottom-color: var(--color-6);
}

.tab-button.active.tab-theme-amber {
  color: var(--color-4);
  border-bottom-color: var(--color-4);
}

.tab-button.active.tab-theme-green {
  color: var(--color-1);
  border-bottom-color: var(--color-1);
}

/* ===========================================
   GRADIENT BACKGROUNDS
   For main containers with gradient backgrounds
   =========================================== */

.bg-gradient-main {
  min-height: 100vh;
  background: linear-gradient(145deg, var(--bg) 0%, var(--surface) 50%, var(--bg) 100%);
  color: var(--text);
  font-family: var(--font-family-base);
  padding: var(--spacing-5);
}

.bg-gradient-modal {
  background: linear-gradient(145deg, var(--surface-2) 0%, var(--surface) 100%);
}

/* ===========================================
   CODE BLOCK STYLING
   For inline code and code blocks
   =========================================== */

.code-inline {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--positive);
  background: rgba(var(--surface-2-rgb), 0.5);
  padding: 0.125rem 0.25rem;
  border-radius: var(--radius-sm);
}

.code-block {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-xs);
  color: var(--positive);
  background: rgba(var(--surface-2-rgb), 0.7);
  padding: var(--spacing-3);
  border-radius: var(--radius-md);
  line-height: var(--line-height-relaxed);
  overflow-x: auto;
}

/* ===========================================
   SUMMARY STATS BLOCK (universal strategy stats)
   Reusable across backtest/strategy reports
   =========================================== */

.summary-stats-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-4);
}

.summary-stats-block--compact {
  padding: var(--spacing-2);
}

.summary-stats-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-3);
  font-family: var(--font-family-base);
}

.summary-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--spacing-3) var(--spacing-6);
}

.summary-stat-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0.5);
}

.summary-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  font-family: var(--font-family-base);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.summary-stat-value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-family-mono);
  color: var(--text);
}

.summary-stat-value--positive {
  color: var(--positive);
}

.summary-stat-value--negative {
  color: var(--negative);
}

.summary-stat-placeholder {
  color: var(--text-muted);
  font-weight: var(--font-weight-normal);
}

/* ===========================================
   BACKTEST CARDS
   Standardized 3-column layout for backtest list items
   =========================================== */

/* Backtest Card - Main container with 3-column grid */
.backtest-card {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  gap: var(--spacing-6);
  padding: var(--spacing-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  margin-bottom: var(--spacing-4);
  transition: box-shadow var(--duration-normal) ease, border-color var(--duration-normal) ease;
}

.backtest-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Backtest Card Columns */
.backtest-card-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}

.backtest-card-params {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

.backtest-card-performance {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
}

/* Backtest Card Column Titles */
.backtest-card-title {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-1);
}

/* Backtest Card Actions Row */
.backtest-card-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: var(--spacing-2);
  margin-top: var(--spacing-3);
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border);
}

/* Backtest Name (clickable to rename) */
.backtest-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: color var(--duration-fast) ease;
}

.backtest-name:hover {
  color: var(--accent);
}

/* Performance Metric Display */
.backtest-metric {
  display: flex;
  flex-direction: column;
}

.backtest-metric-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-bottom: var(--spacing-1);
}

.backtest-metric-value {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-mono);
  font-variant-numeric: tabular-nums;
}

.backtest-metric-value--large {
  font-size: var(--font-size-xl);
}

.backtest-metric-value--medium {
  font-size: var(--font-size-lg);
}

.backtest-metric-value--positive {
  color: var(--positive);
}

.backtest-metric-value--negative {
  color: var(--negative);
}

/* Parameters Grid */
.backtest-params-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
  font-size: var(--font-size-sm);
}

.backtest-param-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

.backtest-param-label {
  color: var(--text-muted);
}

.backtest-param-value {
  color: var(--text);
  font-weight: var(--font-weight-semibold);
}

/* ===========================================
   SCREENSHOT GALLERY
   Lightweight horizontal scrolling gallery
   =========================================== */

.screenshot-gallery-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface-2);
  padding: var(--spacing-4);
  margin-bottom: var(--spacing-4);
}

.screenshot-gallery {
  display: flex;
  gap: var(--spacing-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: var(--spacing-2);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.screenshot-gallery::-webkit-scrollbar {
  height: 8px;
}

.screenshot-gallery::-webkit-scrollbar-track {
  background: transparent;
}

.screenshot-gallery::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: var(--radius-sm);
}

.screenshot-gallery::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}

.screenshot-gallery-item {
  flex: 0 0 auto;
  width: 100%;
  max-width: 900px;
  scroll-snap-align: start;
  text-align: center;
}

.screenshot-gallery-image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  display: block;
  background: var(--surface);
}

.screenshot-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 0.7;
  transition: opacity var(--duration-fast) ease, background var(--duration-fast) ease;
  z-index: 10;
}

.screenshot-gallery-nav:hover {
  opacity: 1;
  background: var(--surface-2);
}

.screenshot-gallery-nav:active {
  opacity: 0.9;
}

.screenshot-gallery-nav--prev {
  left: var(--spacing-4);
}

.screenshot-gallery-nav--next {
  right: var(--spacing-4);
}

.screenshot-gallery-nav--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.screenshot-gallery-hint {
  text-align: center;
  margin-bottom: var(--spacing-4);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}