:root { --bg:#0f1115; --card:#181b22; --fg:#e8e8ea; --muted:#9aa0aa; --accent:#5aa9ff; --ok:#57d18b; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; background:var(--bg); color:var(--fg); }
header, main { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
header { padding-top: 24px; }
h1 { margin: 0 0 6px; font-size: 28px; }
h2 { margin: 0 0 10px; font-size: 18px; }
h3 { margin: 16px 0 8px; font-size: 16px; }
.lede { color: var(--muted); margin: 0 0 16px; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.label { color: var(--muted); margin-right: 4px; }
.card { background: var(--card); border-radius: 10px; padding: 14px 16px; margin: 0 0 14px; }
.row { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; }
button, .button { background:#2a2f3a; color:var(--fg); border:1px solid #39404d; border-radius:7px; padding:7px 13px; font:inherit; cursor:pointer; }
button:hover:not(:disabled), .button:hover { border-color: var(--accent); }
button:disabled { opacity:.45; cursor: default; }
button.recording { background:#7a1f28; border-color:#c33; }
select { background:#2a2f3a; color:var(--fg); border:1px solid #39404d; border-radius:5px; padding:3px; }
progress { width: 220px; }
canvas#roll { width:100%; height:320px; background:#0b0d11; border-radius:8px; margin-top:12px; display:block; }
#staff { background:#fff; color:#111; border-radius:8px; padding:6px; overflow-x:auto; }
#staff svg { max-width: 100%; }
table { border-collapse: collapse; font-size: 13px; margin-top: 8px; }
th, td { padding: 2px 10px; text-align: right; border-bottom: 1px solid #262a33; }
details { margin-top: 10px; }
summary { cursor: pointer; color: var(--muted); }
a { color: var(--accent); }
code { background:#232733; padding:0 4px; border-radius:4px; }
#backend.ok { color: var(--ok); }
.live-badge { color:#fff; background:#c33; border-radius:4px; padding:1px 7px; font-size:12px; font-weight:600; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity:.45; } }
label.button.disabled { opacity:.45; pointer-events:none; }
h2.inline { margin: 0; }
.seg { display:inline-flex; border:1px solid #39404d; border-radius:7px; overflow:hidden; }
.seg button { border:0; border-radius:0; background:#20242d; }
.seg button.on { background:var(--accent); color:#0b0d11; font-weight:600; }
button.rec-again { margin-left:auto; border-color:#c33; color:#ff8a8a; }
.tempo-mark { background:#fff; color:#111; border-color:#ccc; font-size:17px; }
.tempo-mark .muted { color:#666; }
.page-head { margin:10px 0 6px; }
.inner { background:#20242d; border-radius:8px; padding:10px 12px; margin:0 0 10px; }
.inner .row { margin-bottom:8px; }
#tempo-num { width:70px; background:#2a2f3a; color:var(--fg); border:1px solid #39404d; border-radius:5px; padding:4px; font:inherit; }
#tempo-slider { flex:1; min-width:160px; }
.settings > label, #gate-opts > label { display:block; margin:6px 0; }
.settings input[type=range] { vertical-align:middle; width:180px; }
.floor-row { justify-content:space-between; margin:8px 0; }
.notice { background:#3a2a12; color:#ffd59a; border-radius:6px; padding:6px 10px; margin:8px 0; }
[hidden] { display:none !important; }