:root {
  color-scheme: light dark;
  --ui-bg: #f4f7fa;
  --ui-bg-accent: #e7f3fb;
  --ui-panel: #ffffff;
  --ui-panel-raised: #ffffff;
  --ui-panel-soft: #f0f4f7;
  --ui-input: #ffffff;
  --ui-header: #ffffffee;
  --ui-sidebar: #ffffff;
  --ui-text: #1f2936;
  --ui-heading: #17212b;
  --ui-muted: #6d7b8a;
  --ui-line: #d8e1e8;
  --ui-line-strong: #bdcbd6;
  --ui-accent: #3390ec;
  --ui-accent-hover: #2b7fd1;
  --ui-accent-soft: #e5f2ff;
  --ui-accent-text: #ffffff;
  --ui-danger: #d95757;
  --ui-shadow: 0 14px 40px #17212b14;
  --ui-backdrop: #17212b66;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-bg: #17212b;
  --ui-bg-accent: #203243;
  --ui-panel: #202b36;
  --ui-panel-raised: #242f3d;
  --ui-panel-soft: #182533;
  --ui-input: #17212b;
  --ui-header: #17212bee;
  --ui-sidebar: #202b36;
  --ui-text: #e7edf3;
  --ui-heading: #ffffff;
  --ui-muted: #9ba8b4;
  --ui-line: #334353;
  --ui-line-strong: #42576b;
  --ui-accent: #3390ec;
  --ui-accent-hover: #4aa3f3;
  --ui-accent-soft: #233e57;
  --ui-accent-text: #ffffff;
  --ui-danger: #ef6b73;
  --ui-shadow: 0 18px 50px #00000038;
  --ui-backdrop: #0e1620b8;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --ui-bg: #17212b; --ui-bg-accent: #203243; --ui-panel: #202b36;
    --ui-panel-raised: #242f3d; --ui-panel-soft: #182533; --ui-input: #17212b;
    --ui-header: #17212bee; --ui-sidebar: #202b36; --ui-text: #e7edf3;
    --ui-heading: #ffffff; --ui-muted: #9ba8b4; --ui-line: #334353;
    --ui-line-strong: #42576b; --ui-accent: #3390ec; --ui-accent-hover: #4aa3f3;
    --ui-accent-soft: #233e57; --ui-accent-text: #ffffff; --ui-danger: #ef6b73;
    --ui-shadow: 0 18px 50px #00000038; --ui-backdrop: #0e1620b8;
  }
}

.theme-switcher { display:inline-flex; align-items:center; gap:3px; padding:3px; border:1px solid var(--ui-line); border-radius:11px; background:var(--ui-panel-soft); }
.theme-switcher button { min-height:32px; display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:5px 9px; border:0; border-radius:8px; background:transparent; color:var(--ui-muted); font-size:12px; cursor:pointer; }
.theme-switcher button:hover { background:var(--ui-panel); color:var(--ui-heading); }
.theme-switcher button.active { background:var(--ui-panel-raised); color:var(--ui-accent); box-shadow:0 1px 5px #17212b20; }
.theme-switcher--compact .theme-label { display:none; }
.theme-switcher--compact button { width:32px; padding:5px; }
@media (max-width:700px) { .theme-switcher .theme-label { display:none; } .theme-switcher button { width:32px; padding:5px; } }