:root {
  color-scheme: light;
  --canvas: #f6f7f9; --surface: #fff; --raised: #f2f4f6; --text: #20292e; --muted: #647077; --border: #e4e8eb;
  --accent: #146d62; --accent-button: #146d62; --accent-ink: #fff; --accent-soft: #edf7f4;
  --warning: #96601d; --warning-soft: #fcf3e6; --danger: #b13e45; --danger-soft: #fff0f1;
  --sidebar: #19262b; --sidebar-text: #b6c1c5; --sidebar-active: #fff; --sidebar-hover: #2b3b40;
  --focus: #278d7c; --overlay: rgba(12,22,27,.38); --shadow: 0 20px 70px rgba(12,22,27,.2);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --text-xs: 11px; --text-sm: 12px; --text-label: 13px; --text-body: 14px; --text-section: 16px; --text-detail: 20px; --text-title: 28px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --r-sm: 6px; --r-md: 8px; --r-panel: 12px; --r-dialog: 16px; --r-full: 9999px;
  --rail: 216px; --inspector: 360px; --control: 40px; --icon: 18px; --thumb: 56px; --duration: 120ms;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #111719; --surface: #192124; --raised: #222d31; --text: #edf2f2; --muted: #a5b2b8; --border: #344247;
  --accent: #8cdbca; --accent-button: #166e62; --accent-soft: #203b35; --warning: #efc38c; --warning-soft: #3b3020; --danger: #ffb4ba; --danger-soft: #3c262b;
}
* { box-sizing: border-box; }
body { margin: 0; font: var(--text-body)/1.55 var(--font); color: var(--text); background: var(--canvas); word-break: keep-all; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, input, select, textarea { color: inherit; }
button { border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .45; }
button:not(:disabled):active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
button, a { touch-action: manipulation; }
button, a, input, select { transition: opacity var(--duration), transform var(--duration); }
h1, h2, h3, p { margin: 0; }
h2 { font-size: var(--text-section); font-weight: 600; }
h3 { font-size: var(--text-body); font-weight: 600; }
small { font-size: var(--text-sm); }
svg.icon { width: var(--icon); height: var(--icon); flex-shrink: 0; vertical-align: middle; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.numeric { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.muted, .help-copy { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { button:not(:disabled):active { transform: none; } }