:root { --bg:#16171b; --panel:#1f2126; --line:#2c2f36; --text:#e8e8ec; --dim:#9a9caa; --accent:#6fb3ff; --rec:#ff4d5e; --clip:#2f5f8f; --clip2:#3a73ab; --sel:#ffd166; --beat:#5b4a8f; }
* { box-sizing: border-box; }
html, body { touch-action: pan-x pan-y; margin:0; height:100%; background:var(--bg); color:var(--text); font:14px/1.3 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; overflow:hidden; }
body { display:flex; flex-direction:column; }
button { background:#2a2d34; color:var(--text); border:1px solid #3a3e47; border-radius:6px; padding:6px 11px; font:inherit; cursor:pointer; white-space:nowrap; }
button:hover { background:#343843; }
button:disabled { opacity:.45; cursor:default; }
button[aria-pressed="true"] { background:#24476b; border-color:var(--accent); }
button.primary { background:#2b6cb0; border-color:#4f8fd6; font-weight:600; }
button.rec { font-weight:600; }
button.rec::before { content:'●'; color:var(--rec); margin-right:6px; }
body.recording button.rec { background:var(--rec); border-color:var(--rec); color:#fff; animation:pulse 1s infinite; }
body.recording button.rec::before { color:#fff; }
@keyframes pulse { 50% { opacity:.65; } }
input { background:#121317; color:var(--text); border:1px solid #3a3e47; border-radius:6px; padding:5px 7px; font:inherit; }
input[type=number] { width:76px; }
.top, .tools { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--panel); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.brand { font-weight:800; letter-spacing:.5px; margin-right:6px; color:var(--accent); }
.field { display:flex; align-items:center; gap:5px; color:var(--dim); }
.field.grow { flex:1; min-width:160px; } .field.grow input { flex:1; }
.unit { color:var(--dim); font-size:12px; }
.group { display:flex; gap:5px; align-items:center; padding-right:10px; border-right:1px solid var(--line); }
#clock { font-variant-numeric:tabular-nums; min-width:120px; text-align:center; color:var(--sel); }
#status { color:var(--dim); flex:1; min-width:120px; }
#status.warn { color:var(--sel); }
main { flex:1; display:flex; min-height:0; }
#heads { width:156px; flex:none; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; }
.corner { height:28px; border-bottom:1px solid var(--line); display:flex; gap:4px; padding:2px 6px; }
.corner button { padding:0 8px; }
.head { height:84px; border-bottom:1px solid var(--line); padding:5px 7px; display:flex; flex-direction:column; gap:2px; cursor:pointer; overflow:hidden; }
.head.selected { background:#262a33; box-shadow: inset 3px 0 0 var(--rec); }
.head.beat.selected { box-shadow: inset 3px 0 0 var(--beat); }
.head .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.head .row { display:flex; gap:4px; position:absolute; } .head .row button { padding:1px 6px; font-size:11px; }
#addtrack { margin:8px; }
#scroller { flex:1; overflow:auto; position:relative; }
#canvas { position:relative; min-height:100%; }
#ruler { height:28px; position:sticky; top:0; z-index:5; background:var(--panel); border-bottom:1px solid var(--line); cursor:text; }
.barcell { position:absolute; top:0; height:28px; border-left:1px solid #4a4e59; font-size:12px; color:var(--dim); user-select:none; }
.barnum { position:absolute; left:1px; top:4px; padding:1px 4px; border-radius:3px; cursor:pointer; }
.barnum:hover { background:#3a3f4c; color:var(--text); }
.rsel { position:absolute; top:0; height:28px; background:rgba(255,209,102,.25); border-left:1px solid var(--sel); border-right:1px solid var(--sel); pointer-events:none; }
.lane { position:relative; height:84px; border-bottom:1px solid var(--line); }
.lane.selected { background:rgba(255,255,255,.025); }
.gridline { position:absolute; top:0; bottom:0; width:1px; background:#23262c; pointer-events:none; }
.gridline.bar { background:#30343d; }
.range { position:absolute; top:0; bottom:0; background:rgba(255,209,102,.16); border-left:1px solid var(--sel); border-right:1px solid var(--sel); pointer-events:none; z-index:3; }
.clip { position:absolute; top:6px; height:72px; background:var(--clip); border:1px solid var(--clip2); border-radius:5px; overflow:hidden; cursor:grab; z-index:1; }
.clip.beat { background:#3b3060; border-color:var(--beat); }
.clip.selected { border-color:var(--sel); box-shadow:0 0 0 1px var(--sel); z-index:2; }
.clip svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.clip .label { position:absolute; left:6px; bottom:3px; font-size:11px; color:#cfe3ff; pointer-events:none; text-shadow:0 1px 2px #000; }
.fh { position:absolute; top:1px; width:11px; height:11px; background:#fff; border:2px solid #222; border-radius:2px; cursor:ew-resize; z-index:4; opacity:.75; }
.clip:hover .fh, .clip.selected .fh { opacity:1; }
.trim { position:absolute; top:16px; bottom:0; width:7px; cursor:col-resize; z-index:3; }
.trim.l { left:0; } .trim.r { right:0; }
.trim:hover { background:rgba(255,255,255,.15); }
#playhead { position:absolute; top:0; bottom:0; width:2px; background:var(--sel); pointer-events:none; z-index:6; }
body.recording #playhead { background:var(--rec); }
.empty { position:fixed; left:50%; bottom:40px; transform:translateX(-50%); background:#23262ecc; border:1px solid var(--line); border-radius:10px; padding:10px 18px; text-align:center; pointer-events:none; }
.empty .sub { color:var(--dim); font-size:12px; margin:4px 0 0; }
.empty.hidden { display:none; }
#menu { position:fixed; z-index:20; background:var(--panel); border:1px solid #444; border-radius:8px; padding:4px; min-width:220px; box-shadow:0 6px 24px #000a; }
#menu button { display:block; width:100%; text-align:left; border:0; background:none; padding:7px 10px; }
#menu button:hover { background:#333845; }
body.dragging-file::after { content:'Drop the beat to import it'; position:fixed; inset:0; display:grid; place-items:center; font-size:24px; background:#0009; z-index:50; }

body.armed:not(.recording) button.rec { background:#2a2d34; border-color:var(--rec); color:#ff8792; box-shadow:inset 0 0 0 1px var(--rec); }
.field.vol input { width:120px; accent-color: var(--sel); }
#gainval { min-width:58px; font-variant-numeric:tabular-nums; color:var(--sel); font-size:12px; }
.clip canvas { position:absolute; top:0; height:100%; pointer-events:none; }
.gh { position:absolute; top:1px; left:50%; transform:translateX(-50%); min-width:30px; padding:0 4px; height:13px; font-size:10px; line-height:13px; text-align:center; background:#ffd166cc; color:#222; border-radius:3px; cursor:ns-resize; z-index:4; opacity:.7; white-space:nowrap; }
.clip:hover .gh, .clip.selected .gh { opacity:1; }
.range .rgain { position:absolute; top:28px; left:50%; transform:translateX(-50%); pointer-events:auto; cursor:ns-resize; background:var(--sel); color:#222; font-size:11px; padding:2px 6px; border-radius:4px; white-space:nowrap; z-index:5; }
.beattick { position:absolute; top:8px; font-size:10px; color:#6d7080; transform:translateX(2px); pointer-events:none; }
.lane.muted .clip { opacity:.45; }
.lane.ghost { background:rgba(255,77,94,.06); border-bottom:1px dashed var(--rec); }
.head.ghost { color:var(--rec); background:rgba(255,77,94,.06); cursor:default; }
.head .sub { font-size:11px; color:var(--dim); }
.clip.live { background:#6a2531; border-color:var(--rec); cursor:default; }
.clip.ghost { position:fixed; height:72px; background:#2f5f8faa; border:1px dashed var(--sel); color:#fff; font-size:11px; padding:4px; pointer-events:none; z-index:30; overflow:hidden; white-space:nowrap; }
.rename { width:100%; font-weight:600; padding:2px 4px; }
.rechead { height:28px; padding:6px 10px; font-weight:600; border-bottom:1px solid var(--line); font-size:13px; }
#reclist { overflow:auto; flex:1; padding:6px; }
#reclist .hint { color:var(--dim); font-size:12px; padding:4px; }
.rec-item { background:#262a33; border:1px solid #343843; border-radius:6px; padding:6px 7px; margin-bottom:6px; cursor:grab; user-select:none; }
.rec-item:hover { border-color:#4f8fd6; }
.rec-item.selected { border-color:var(--sel); }
.rec-item .rname { font-weight:600; font-size:12px; }
.rec-item .rmeta { color:var(--dim); font-size:11px; margin:2px 0 4px; }
.rec-item canvas { width:100%; height:24px; display:block; }

.tabs { height:28px; display:flex; border-bottom:1px solid var(--line); }
.tabs button { flex:1; border:0; border-radius:0; background:none; color:var(--dim); padding:0; font-size:13px; }
.tabs button[aria-selected="true"] { color:var(--text); box-shadow: inset 0 -2px 0 var(--accent); background:#262a33; }
#trackpane { display:flex; flex-direction:column; }
#recpane { flex:1; min-height:0; display:flex; flex-direction:column; }
#recpane[hidden] { display:none; }
.zoom { display:flex; gap:2px; } .zoom button { padding:6px 9px; }
.field.vol { gap:3px; }
.field.vol button.step { padding:2px 8px; font-weight:700; }
.rec-item.selected { box-shadow:0 0 0 1px var(--sel); }
.rec-item .rmeta b { color:var(--sel); font-weight:600; }
#trackpane[hidden] { display:none; }

.head { position:relative; }
.head .name { padding-right:30px; font-size:13px; }
.head .row { top:4px; right:6px; }
.hs { display:grid; grid-template-columns:24px 1fr 30px; align-items:center; gap:3px; font-size:10px; color:var(--dim); cursor:default; }
.hs input { width:100%; min-width:0; height:14px; accent-color:var(--accent); }
.hs output { text-align:right; font-variant-numeric:tabular-nums; color:var(--text); }
.top, .tools { gap:6px; padding:6px 10px; }
button { padding:6px 10px; }
#addtrack { margin:6px; }
.rec-item .rmeta { font-size:10px; }
#scroller, main { min-width:0; }
.field.grow input { min-width:0; width:100%; } .field.grow { min-width:120px; }

#removetrack { margin:0 6px 6px; color:#ff8792; border-color:#5a2a33; background:none; }
#removetrack:hover { background:#3a1f25; }
#removetrack[hidden] { display:none; }
.hs output { cursor:text; border-radius:3px; }
.hs output:hover { background:#333845; }
.hsedit { width:34px; padding:0 2px; font-size:10px; height:15px; text-align:right; }
.hs { grid-template-columns:24px 1fr 34px; }

.inputsel { display:flex; align-items:center; gap:4px; }
.inputsel select { background:#121317; color:var(--text); border:1px solid #3a3e47; border-radius:6px; padding:5px 4px; font:inherit; font-size:12px; max-width:150px; }
#inch { max-width:72px; }
#meter { width:60px; height:10px; border-radius:2px; cursor:pointer; }

/* keep the toolbar steady: no wrapping status, fixed-size transport bits */
#status { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1 1 0; }
#record { min-width:96px; } #play, #stop { min-width:56px; }
#clock { min-width:128px; display:inline-block; }
#indev { width:150px; } #inch { width:72px; }
.group { flex:none; }