:root {
  color-scheme: light;
  --ui-bg: light-dark(#f4f7fa, #0c141e);
  --ui-surface: light-dark(#fff, #131f2b);
  --ui-subtle: light-dark(#f4f7fa, #192838);
  --ui-text: light-dark(#182638, #e7eef6);
  --ui-muted: light-dark(#586a7e, #a5b5c7);
  --ui-line: light-dark(#dde5ed, #2c3d50);
  --ui-accent: light-dark(#2162d4, #83b4ff);
  --ui-accent-soft: light-dark(#edf4ff, #1e3655);
  --ui-positive: light-dark(#087b63, #54d9b4);
  --ui-negative: light-dark(#c33051, #ff8da0);
  --ui-focus: light-dark(#2162d4, #91c0ff);
  --ui-shadow: 0 8px 28px light-dark(#1826380b, #00000024);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
html, body { background: var(--ui-bg); }
body { color: var(--ui-text); }
button, input, select, textarea { font-family: inherit; }
.theme-picker { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; color: var(--ui-text); border-radius: 9px; cursor: pointer; }
.theme-picker:hover { background: var(--ui-subtle); }
.theme-picker select { appearance: none; position: absolute; inset: 0; width: 44px; height: 44px; opacity: 0; cursor: pointer; padding: 0; }
.theme-picker:focus-within { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.theme-picker img, .theme-picker svg { width: 18px; height: 18px; pointer-events: none; }
.theme-icon-dark { display: none; }
[data-theme="dark"] .theme-icon-dark { display: block; }
[data-theme="dark"] .theme-icon-light { display: none; }
[data-theme="dark"] .theme-picker img { filter: invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-dark { display: block; }
  :root:not([data-theme="light"]) .theme-icon-light { display: none; }
}
button, select, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 3px; box-shadow:none; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }