:root {
  --bg: #0E1116;
  --surface: #161A21;
  --line: #262C36;
  --text: #E7EAEF;
  --muted: #9AA3B2;
  --accent: #4C7DF0;
  --voice: #FFC857;     /* голос Sayply: цитати транскрипту/підказок, НЕ елементи керування */
  --danger: #E5484D;
  --radius: 10px;
  --font-ui: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); }
.topbar { display: flex; align-items: center; gap: 24px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.brand { font-weight: 700; text-decoration: none; color: var(--text); letter-spacing: .02em; }
nav { display: flex; gap: 16px; margin-right: auto; }
nav a, .brand { color: var(--muted); text-decoration: none; }
nav a:hover { color: var(--text); }
main { max-width: 880px; margin: 0 auto; padding: 32px 24px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.metric { font-size: 32px; font-weight: 700; }
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); }
button, .btn { background: var(--accent); color: #fff; border: 0; border-radius: var(--radius); padding: 10px 16px; font: inherit; cursor: pointer; }
a.btn { display: inline-block; text-decoration: none; }
button.link { background: none; color: var(--muted); padding: 0; }
input, select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font: inherit; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--line); }
.error { color: var(--danger); }
.badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; color: var(--muted); }