:root{--bg:#0d0d12;--card:#17171f;--line:#262633;--txt:#f1f1f5;--dim:#9a9aae;--red:#ff3b55;--teal:#3fb6a8;--acc:#7c6cff}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.4 system-ui,-apple-system,Roboto,"Segoe UI",sans-serif;overscroll-behavior:none}
body{padding-bottom:calc(150px + env(safe-area-inset-bottom));min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;border:0}
header{display:flex;align-items:center;gap:8px;padding:calc(10px + env(safe-area-inset-top)) 12px 6px;position:sticky;top:0;background:var(--bg);z-index:5}
header h1{flex:1;margin:0;font-size:21px;font-weight:700;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.icon{width:46px;height:46px;border-radius:14px;background:var(--card);font-size:22px}
.bar{display:flex;gap:8px;padding:6px 12px 10px;overflow-x:auto}
.chip{flex:none;height:42px;padding:0 14px;border-radius:21px;background:var(--card);border:1px solid var(--line);color:var(--dim);font-size:15px}
.chip.on{background:#2b2550;border-color:var(--acc);color:#fff}
#bpmBtn{color:#fff}
main{padding:0 12px;display:flex;flex-direction:column;gap:10px}
.empty{background:var(--card);border-radius:20px;padding:26px 20px;text-align:center;color:var(--txt)}
.empty .big{font-size:46px}.empty p{margin:8px 0}
.dim{color:var(--dim);font-size:14px}.small{font-size:13px}.center{text-align:center}
.track{background:var(--card);border-radius:18px;padding:10px 12px 8px;border:1px solid var(--line)}
.track.quiet{opacity:.45}
.track.music{border-color:#1f4d47}
.thead{display:flex;align-items:center;gap:8px}
.dot{width:28px;height:28px;border-radius:50%;background:#2a1820;color:var(--red);display:grid;place-items:center;font-weight:700;font-size:14px;flex:none}
.music .dot{background:#14302c}
.tname{flex:1;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pill{min-width:44px;height:40px;border-radius:12px;background:#22222d;font-weight:700;color:var(--dim)}
.pill.on{background:#5a4a12;color:#ffd84d}.pill.solo.on{background:#123a5a;color:#6cc4ff}
.wave{position:relative;height:56px;margin:8px 0 4px;background:#101017;border-radius:10px;overflow:hidden}
.wave canvas{width:100%;height:100%;display:block}
.ph{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.8;left:0;pointer-events:none}
.vol{display:flex;align-items:center;gap:10px}.vol input{flex:1}.vv{width:34px;text-align:right;color:var(--dim);font-size:13px}
input[type=range]{accent-color:var(--acc);height:32px}
.actions{display:flex;gap:10px;padding:14px 12px}
.btn{display:block;text-align:center;text-decoration:none;min-height:50px;padding:12px 16px;border-radius:16px;background:#23232e;font-size:17px;font-weight:600}
.btn.big{flex:1;min-height:60px;font-size:18px}
.btn.music{background:linear-gradient(135deg,#1d6b62,#2a8f84)}
.btn.primary{background:var(--acc);color:#fff}.btn.danger{background:#5b1a24;color:#ffb3bd}.btn.ghost{background:transparent;border:1px solid var(--line)}
.btn.wide{width:100%;margin:8px 0}.btn:disabled{opacity:.6}
.btn.round{width:58px;height:58px;border-radius:50%;font-size:26px;padding:0}
footer{position:fixed;left:0;right:0;bottom:0;background:rgba(13,13,18,.96);backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 14px calc(10px + env(safe-area-inset-bottom));z-index:6}
.meterwrap{height:5px;border-radius:3px;background:#1d1d27;overflow:hidden;margin-bottom:6px;opacity:0;transition:opacity .2s}
.recording .meterwrap{opacity:1}
#meter{height:100%;width:0;background:linear-gradient(90deg,#3fd47a,#ffd84d 75%,#ff3b55)}
.transport{display:flex;align-items:center;gap:14px}
.time{flex:1;font-variant-numeric:tabular-nums;font-size:26px;font-weight:700}
.recording .time{color:var(--red)}
.tbtn{width:62px;height:62px;border-radius:50%;background:#23232e;font-size:24px}
#play.on{background:#2b2550}
.recwrap{display:flex;flex-direction:column;align-items:center;gap:2px}
.recwrap span{font-size:11px;color:var(--dim)}
.tbtn.rec{width:78px;height:78px;background:var(--red);color:#fff;font-size:34px;box-shadow:0 0 0 4px rgba(255,59,85,.18)}
.tbtn.rec.on{animation:pulse 1.2s infinite;font-size:26px}
@keyframes pulse{50%{box-shadow:0 0 0 12px rgba(255,59,85,.05)}}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:flex;align-items:flex-end}
.sheet{position:relative;width:100%;max-height:88vh;overflow:auto;background:#15151d;border-radius:24px 24px 0 0;padding:18px 16px calc(22px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.sheet h2{margin:2px 44px 10px 0;font-size:21px}
.sheet .x{position:absolute;right:12px;top:12px;width:40px;height:40px;border-radius:50%;background:#23232e;font-size:18px}
.row{display:flex;gap:10px;margin:8px 0}.row .btn{flex:1}.row.small .btn{min-height:42px;font-size:15px;padding:8px}
.menu{display:flex;flex-direction:column;gap:10px}.menu .btn{text-align:left}
.nudge{background:#1c1c26;border-radius:16px;padding:12px}.nudge input{width:100%}
.lbl{display:block;margin:12px 0 6px;font-size:14px;color:var(--dim)}
select,input[type=number]{width:100%;height:50px;border-radius:14px;background:#23232e;color:#fff;border:1px solid var(--line);padding:0 12px;font-size:17px}
#latr{width:100%}
.styles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.btn.style{border:2px solid transparent}.btn.style.on{border-color:var(--teal);background:#14302c}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.chords{min-height:20px;margin:10px 0 0}
.bpmbig{display:flex;align-items:center;justify-content:center;gap:24px;font-size:54px;font-weight:800;font-variant-numeric:tabular-nums}
.plist{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.pitem{display:flex;align-items:center;gap:10px;background:#1c1c26;border-radius:14px;padding:12px}
.pitem>div{flex:1;display:flex;flex-direction:column}.pitem.cur{outline:2px solid var(--acc)}
#toast{position:fixed;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translate(-50%,-20px);background:#2b2b38;color:#fff;padding:10px 16px;border-radius:14px;opacity:0;transition:.25s;z-index:30;max-width:90vw;text-align:center;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}