/* Design tokens + reset + typography — UI v2 (A1 dark refined) */
:root {
  --bg: #0b0e14;
  --panel: #111522;
  --panel2: #0f1320;
  --ink: #e8ecf4;
  --muted: #9aa3b2;
  --accent: #8be9fd;
  --rec: #ff3b30;
  --odub: #ff9f0a;
  --play: #30d158;
  --stop: #5a6272;
  --line: rgba(255, 255, 255, 0.1);
  --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-xl: 14px;
  --glow-rec: 0 0 28px rgba(255, 59, 48, 0.4);
  --glow-play: 0 0 28px rgba(48, 209, 88, 0.35);
  --glow-odub: 0 0 28px rgba(255, 159, 10, 0.4);
  --font: Inter, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
h1 { font-size: 13px; font-weight: 600; color: var(--muted); text-align: center; margin: 8px 0 0; letter-spacing: 0.04em; }
label { font-size: 12px; color: var(--muted); }
button { cursor: pointer; font-family: var(--font); }
button[disabled] { opacity: 0.55; cursor: not-allowed; }
select, input[type="number"], input[type="text"] {
  background: #0e1324; color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: 8px 12px; font-size: 14px; font-family: var(--font);
}
input[type="range"] { accent-color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
kbd {
  background: #0e1324; border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 6px; padding: 1px 6px; font-size: 11px; font-family: var(--font);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}