:root {
  color-scheme: light dark;
  --ui-bg: light-dark(#f7f8fb, #14131a);
  --ui-surface: light-dark(#ffffff, #1d1c25);
  --ui-text: light-dark(#242331, #efedf5);
  --ui-muted: light-dark(#686879, #acabba);
  --ui-line: light-dark(#e9e9f0, #34323f);
  --ui-brand: #7338c7;
  --ui-brand-text: light-dark(#652bb4, #c9a6ff);
  --ui-brand-soft: light-dark(#f1e9fb, #302140);
  --ui-positive: light-dark(#237357, #83d8b3);
  --ui-positive-soft: light-dark(#edf7f1, #203a2e);
  --ui-negative: light-dark(#b34657, #f598aa);
  --ui-negative-soft: light-dark(#fff0f3, #40232c);
  --ui-warning: light-dark(#936018, #ebbd73);
  --ui-warning-soft: light-dark(#fff6e7, #3e3121);
  --ui-radius: 16px;
  --ui-shadow: 0 12px 40px light-dark(#2423310a, #00000026);
  --ui-header-height: 70px;
  --ui-bottom-height: 0px;
  --ui-sidebar-width: 212px;
  --ink: var(--ui-text); --muted: var(--ui-muted); --line: var(--ui-line);
  --paper: var(--ui-surface); --bg: var(--ui-bg); --brand: var(--ui-brand);
  --green: var(--ui-positive); --red: var(--ui-negative); --amber: var(--ui-warning);
  font-family: Inter, 'Segoe UI', system-ui, sans-serif;
  color: var(--ui-text); background: var(--ui-bg);
}
@media(max-width:900px) { :root { --ui-header-height:68px; --ui-bottom-height:74px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }