:root,
:root[data-theme="light"] {
  --bg: #f4f7f6;
  --bg-elevated: #ffffff;
  --surface: #ffffff;
  --surface-secondary: #f8faf9;
  --surface-tertiary: #eef3f1;
  --card: #ffffff;
  --card-hover: #fbfdfc;
  --border: #dce5e2;
  --border-soft: #edf2f0;
  --text: #102027;
  --text-secondary: #4f636b;
  --muted: #7b8b91;
  --accent: #14bd7e;
  --accent-strong: #0f9f67;
  --accent-soft: #e6f9f2;
  --brand: #123c4a;
  --brand-strong: #0a2630;
  --success: #14bd7e;
  --success-soft: #e6f9f2;
  --warning: #d99015;
  --warning-soft: #fff6df;
  --danger: #d94343;
  --danger-soft: #fff0f0;
  --info: #2878c9;
  --info-soft: #eaf4ff;
  --sidebar-bg: #162334;
  --sidebar-bg-2: #101a28;
  --sidebar-text: #aab6c5;
  --sidebar-text-strong: #ffffff;
  --sidebar-active: #14bd7e;
  --sidebar-active-soft: rgba(20, 189, 126, .12);
  --header-bg: rgba(255, 255, 255, .92);
  --overlay: rgba(15, 23, 42, .48);
  --shadow-sm: 0 1px 2px rgba(16, 32, 39, .05), 0 1px 1px rgba(16, 32, 39, .03);
  --shadow-md: 0 14px 34px rgba(16, 32, 39, .08);
  --shadow-lg: 0 24px 70px rgba(16, 32, 39, .14);
  --chart-grid: rgba(79, 99, 107, .16);
  --chart-text: #4f636b;
}

:root[data-theme="dark"],
.dark {
  --bg: #101010;
  --bg-elevated: #121212;
  --surface: #151515;
  --surface-secondary: #181818;
  --surface-tertiary: #1c1c1c;
  --card: #151515;
  --card-hover: #181818;
  --border: rgba(255, 255, 255, 0.12);
  --border-soft: rgba(255, 255, 255, 0.08);
  --text: #F4F4F5;
  --text-secondary: #A1A1AA;
  --muted: #71717A;
  --accent: #14bd7e;
  --accent-strong: #1cd18f;
  --accent-soft: rgba(20, 189, 126, .15);
  --brand: #14bd7e;
  --brand-strong: #aeffda;
  --success: #14bd7e;
  --success-soft: rgba(20, 189, 126, .15);
  --warning: #f2bc4b;
  --warning-soft: rgba(242, 188, 75, .14);
  --danger: #ff7b7b;
  --danger-soft: rgba(255, 123, 123, .13);
  --info: #74b9ff;
  --info-soft: rgba(116, 185, 255, .14);
  --sidebar-bg: #101010;
  --sidebar-bg-2: #111111;
  --sidebar-text: #A1A1AA;
  --sidebar-text-strong: #F4F4F5;
  --sidebar-active: #14bd7e;
  --sidebar-active-soft: rgba(20, 189, 126, 0.08);
  --header-bg: rgba(16, 16, 16, .94);
  --overlay: rgba(0, 0, 0, .74);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .28);
  --shadow-md: 0 20px 48px rgba(0, 0, 0, .42);
  --shadow-lg: 0 30px 88px rgba(0, 0, 0, .56);
  --chart-grid: rgba(255, 255, 255, .08);
  --chart-text: #A1A1AA;
}

html, body { background: var(--bg); color: var(--text); }
body { color: var(--text); }

.app-shell {