/* Keep data-series and positive/negative colors independent of page palettes. */
:root {
  color-scheme: dark;
  --chart-bg: #121a25;
  --chart-grid: #344354;
  --chart-crosshair: #aebdcd;
  --tooltip-bg: #0a121f;
}
:root[data-theme="cool"] {
  --bg: #101a23; --panel: #182832; --surface: #203641;
  --line: #3b5362; --muted: #a9bfcd; --text: #dfebf0;
  --teal: #8bcabb; --blue: #96bddc;
  --chart-bg: #223641; --chart-grid: #3f5663;
  --chart-crosshair: #bcced8; --tooltip-bg: #13232d;
  --theme-control: #16252f; --theme-panel: var(--panel);
  --theme-hover: #29414e; --theme-border: var(--line);
  --theme-nav: #14222c;
}
:root[data-theme="charcoal"] {
  --bg: #191c20; --panel: #23282e; --surface: #2c333b;
  --line: #48535f; --muted: #b3bfcb; --text: #e4e9ee;
  --teal: #9ac9ba; --blue: #a5c0df;
  --chart-bg: #303842; --chart-grid: #4b5662;
  --chart-crosshair: #c4cdd7; --tooltip-bg: #20262e;
  --theme-control: #272e36; --theme-panel: var(--panel);
  --theme-hover: #36414b; --theme-border: var(--line);
  --theme-nav: #20252a;
}
.appearance-bar {
  display: flex; justify-content: flex-end; align-items: center;
  padding: 6px 2%; gap: 8px; font: 12px system-ui, sans-serif;
  color: var(--muted, #a9b9c9);
}
.appearance-bar label { display: flex; align-items: center; gap: 8px; }
.appearance-bar select {
  background: var(--surface, #182230); color: var(--text, #e7edf6);
  border: 1px solid var(--line, #253243); border-radius: 5px;
  padding: 5px 8px; font: inherit; max-width: 160px;
}
.appearance-bar select:focus-visible { outline: 2px solid var(--teal, #5bddbf); outline-offset: 2px; }
html[data-theme]:not([data-theme="classic"]) {
  background: var(--bg); color: var(--text);
}
html[data-theme]:not([data-theme="classic"]) body { background: var(--bg); color: var(--text); }
html[data-theme]:not([data-theme="classic"]) .topbar { background: var(--theme-nav); border-color: var(--line); }
html[data-theme]:not([data-theme="classic"]) :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"])) {
  background-color: var(--theme-control); color: var(--text); border-color: var(--line);
}
html[data-theme]:not([data-theme="classic"]) :is(.account-card, .users-card) {
  background: var(--panel); border-color: var(--line);
}
@media (max-width: 600px) { .appearance-bar { padding: 6px 10px; } }