/* VU Ready — base theme. Dark "radio shack" with amber dial glow. Light theme via [data-theme=light]. */
:root {
  --bg: #0d1420;
  --panel: #152033;
  --panel2: #1c2a42;
  --ink: #e8eef8;
  --muted: #93a3bb;
  --line: #2a3a55;
  --accent: #ffb547;   /* amber */
  --accent2: #3fd0c9;  /* teal */
  --accent3: #a98bff;  /* violet */
  --good: #4ade80;
  --bad: #f87171;
  --grid: #22324c;
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0,0,0,.35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: dark;
}
[data-theme=light] {
  --bg: #f4f6fb; --panel: #ffffff; --panel2: #eef2f9; --ink: #15213a; --muted: #5b6b85; --line: #d5ddea;
  --accent: #d97706; --accent2: #0e9f97; --accent3: #6d4ee0; --good: #16a34a; --bad: #dc2626; --grid: #e3e9f3;
  --shadow: 0 6px 20px rgba(20,30,60,.08);
  color-scheme: light;
}

/* ---- widgets shared ---- */
.widget { background: var(--panel2); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin: 10px 0; }
.w-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin: 8px 0; }
.w-ctl { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); min-width: 120px; flex: 1 1 140px; }
.w-ctl input[type=range] { width: 100%; accent-color: var(--accent); }
.w-ctl select, .w-ctl input[type=number], .w-ctl input[type=text] { background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; }
.w-readout { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; }
.w-readout > div { font-size: .8rem; color: var(--muted); }
.w-out { display: block; font: 600 1.25rem var(--mono); color: var(--accent); }
.w-svg { width: 100%; height: auto; display: block; }
.w-note { font-size: .85rem; color: var(--muted); margin: 6px 0 0; }
.chip { display: inline-block; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: 999px; padding: 4px 12px; font-size: .85rem; cursor: pointer; }
.chip.on { background: var(--accent); color: #1a1205; border-color: var(--accent); }