/* DSK•DrumBox - styles */
:root{
  --r:10px; --r-sm:7px;
  --mono:"SFMono-Regular",ui-monospace,"DejaVu Sans Mono",Menlo,Consolas,monospace;
  --sans:"Segoe UI",-apple-system,system-ui,"Helvetica Neue",Roboto,sans-serif;
}

/* ---------------- THEMES ---------------- */
[data-theme="studio"]{
  --bg:#0f1115; --bg2:#161a21; --surface:#1c222c; --raise:#222a36;
  --line:#2b323e; --text:#e7ecf2; --dim:#8b95a4;
  --accent:#ffb13b; --accent2:#4ea1ff; --accent-ink:#1a1207;
  --so:#232b37; --son:#ffb13b; --soft:#7a5a1f; --head:#4ea1ff33; --headline:#4ea1ff;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}
[data-theme="neon"]{
  --bg:#06070d; --bg2:#0c0f1a; --surface:#10142233; --raise:#141a2e;
  --line:#222a44; --text:#e8f6ff; --dim:#6f7ea3;
  --accent:#15e0ff; --accent2:#ff3ea5; --accent-ink:#031018;
  --so:#161d33; --son:#15e0ff; --soft:#0c6478; --head:#ff3ea533; --headline:#ff3ea5;
  --shadow:0 0 28px rgba(21,224,255,.18);
}
[data-theme="tape"]{
  --bg:#16110c; --bg2:#1f1810; --surface:#281f15; --raise:#33271a;
  --line:#3d2f1f; --text:#f2e6d2; --dim:#a08a6c;
  --accent:#ff8a3c; --accent2:#e8c14a; --accent-ink:#1c1206;
  --so:#2c2317; --son:#ff8a3c; --soft:#7a4a1c; --head:#e8c14a33; --headline:#e8c14a;
  --shadow:0 8px 22px rgba(0,0,0,.5);
}
[data-theme="sunset"]{
  --bg:#140b1e; --bg2:#1d1130; --surface:#261640; --raise:#2f1b4f;
  --line:#3a2560; --text:#f4e9ff; --dim:#9b86bd;
  --accent:#ff5d8f; --accent2:#ffaf5d; --accent-ink:#1a0b16;
  --so:#2a1948; --son:#ff5d8f; --soft:#7c3358; --head:#ffaf5d33; --headline:#ffaf5d;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
[data-theme="paper"]{
  --bg:#f3ede1; --bg2:#ece4d4; --surface:#fbf6ec; --raise:#fff;
  --line:#d8cdb8; --text:#2a2620; --dim:#8a7f6b;
  --accent:#d6452b; --accent2:#1f7a5a; --accent-ink:#fff;
  --so:#e2d8c4; --son:#d6452b; --soft:#e9b6a6; --head:#1f7a5a22; --headline:#1f7a5a;
  --shadow:0 6px 18px rgba(120,100,60,.18);
}
[data-theme="porcelain"]{
  --bg:#eef1f5; --bg2:#e3e8ef; --surface:#fbfcfe; --raise:#fff;
  --line:#d3dae3; --text:#1f2733; --dim:#7c8794;
  --accent:#2f6df0; --accent2:#13b886; --accent-ink:#fff;
  --so:#dde3ec; --son:#2f6df0; --soft:#b6caf2; --head:#13b88622; --headline:#13b886;
  --shadow:0 6px 18px rgba(40,70,120,.12);
}
[data-theme="matrix"]{
  --bg:#05080a; --bg2:#0a1410; --surface:#0e1c16; --raise:#13261d;
  --line:#1d3a2c; --text:#caf7d8; --dim:#5f9d77;
  --accent:#37ff8b; --accent2:#9dff5a; --accent-ink:#04140a;
  --so:#11241a; --son:#37ff8b; --soft:#1f6b41; --head:#37ff8b22; --headline:#37ff8b;
  --shadow:0 8px 26px rgba(0,40,20,.5);
}
[data-theme="light"]{
  --bg:#f6f7f9; --bg2:#eceff3; --surface:#ffffff; --raise:#ffffff;
  --line:#dde2e8; --text:#222831; --dim:#7a8290;
  --accent:#f0883a; --accent2:#3a86ff; --accent-ink:#fff;
  --so:#e6eaef; --son:#f0883a; --soft:#f5cda3; --head:#3a86ff22; --headline:#3a86ff;
  --shadow:0 6px 18px rgba(40,60,90,.12);
}

*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;display:flex;flex-direction:column}
body{
  font-family:var(--sans); background:var(--bg); color:var(--text);
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
}
/* permitir selección/edición sólo donde tiene sentido */
input,textarea,[contenteditable="true"]{
  -webkit-user-select:text; user-select:text; -webkit-touch-callout:default;
}
button,select,input{font-family:inherit;color:inherit}
button{cursor:pointer;border:none;background:none}

/* cabecera + transporte fijos arriba */
.topfixed{position:sticky;top:0;z-index:25;background:var(--bg2);padding-bottom:8px}
/* ---------------- topbar ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg2);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:34px;height:34px;border-radius:9px;object-fit:cover}
.brandtxt{display:flex;flex-direction:column;line-height:1.1}
.brandtxt strong{font-size:18px;letter-spacing:.5px}
.projname{font-size:12px;color:var(--dim);text-align:left;padding:0;border-bottom:1px dashed transparent}
.projname:hover{border-bottom-color:var(--dim)}
.menubtn{font-size:22px;width:42px;height:42px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}

/* ---------------- transport ---------------- */
.transport{
  display:flex;flex-direction:column;gap:10px;
  padding:9px 12px;background:var(--bg2);border-bottom:1px solid var(--line);
}
.trow{display:flex;align-items:center;gap:10px}
.trow-main{flex-wrap:nowrap}
.tspacer{flex:1 1 auto}
.modebtn{display:grid;place-items:center;padding:0;width:34px;height:30px}
.modebtn.on{background:var(--accent2);color:var(--accent-ink);border-color:var(--accent2)}
.livebtn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:#e0483b;color:#fff;font-size:13px;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(224,72,59,.18);transition:transform .08s}
.livebtn:active{transform:scale(.92)}
.liverec{display:flex;flex-direction:column;gap:12px;min-width:280px}
.liveopts{display:flex;gap:8px}
.livetog{flex:1;padding:9px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--dim);font-size:13px;font-weight:600}
.livetog.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.livegrid{display:grid;gap:10px}
.livepad{position:relative;aspect-ratio:1/1;border-radius:16px;background:linear-gradient(160deg,var(--surface),var(--bg2));border:1px solid var(--line);color:var(--text);display:grid;place-items:center;padding:6px;font-weight:700;font-size:13px;touch-action:none;user-select:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.3);transition:transform .05s,background .06s,box-shadow .06s}
.livepad:active{transform:scale(.95)}
.livepad.flash{background:linear-gradient(160deg,var(--accent),var(--accent2));color:var(--accent-ink);border-color:var(--accent);box-shadow:0 0 16px var(--accent)}
.livepadname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;text-align:center;text-transform:uppercase;letter-spacing:.5px;opacity:.92}
.liverow{display:flex;gap:12px;align-items:center;justify-content:center}
.liveic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:20px;background:var(--surface);border:1px solid var(--line);color:var(--text);box-shadow:0 2px 8px rgba(0,0,0,.3);transition:transform .08s}
.liveic:active{transform:scale(.92)}
.liveic.rec{background:#e0483b;color:#fff;border-color:#e0483b;box-shadow:0 0 0 4px rgba(224,72,59,.18)}
.livec{margin-left:4px}
.adsrpanel{display:flex;flex-direction:column;gap:12px;min-width:300px;max-width:560px}
.adsrpresetrow{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.adsrpresetrow .adsrlab{flex:0 0 auto}
.adsrgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.adsrrow{display:flex;flex-direction:column;gap:5px;background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.adsrhead{display:flex;justify-content:space-between;align-items:baseline;gap:6px}
.adsrlab{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.adsrval{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent)}
.adsrslider{width:100%;margin:0}
.adsrplay{flex:0 0 auto;width:54px;display:grid;place-items:center;font-size:16px}
.livekeys{display:flex;flex-direction:column;gap:12px;min-width:300px;max-width:560px}
.keyscfg{display:flex;gap:8px;justify-content:space-between}
.kstep{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:var(--bg2);border:1px solid var(--line);border-radius:8px;padding:6px}
.kstlab{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.kstep>div,.kstrow{display:flex}
.kstbtn{width:28px;height:28px;border-radius:6px;background:var(--surface);border:1px solid var(--line);color:var(--text);font-size:16px}
.kstval{min-width:26px;text-align:center;font-family:var(--mono);font-weight:700;color:var(--accent);align-self:center;margin:0 4px}
.kstep{flex-direction:row;justify-content:center}
.kstep .kstlab{align-self:center;margin-right:6px}
.lk-rows{display:flex;flex-direction:column;gap:8px}
.lk-row{position:relative;display:flex;height:84px;border-radius:8px;overflow:hidden;background:#0c0f10;box-shadow:inset 0 0 0 1px var(--line)}
.lk-white{flex:1;background:linear-gradient(#fafdff,#e6edf0);border-right:1px solid #b9c4c8;color:#33484f;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:10px;font-weight:700;touch-action:none;user-select:none}
.lk-white:last-child{border-right:none}
.lk-white.flash{background:linear-gradient(var(--accent),var(--accent2));color:var(--accent-ink)}
.lk-black{position:absolute;top:0;width:8%;height:58%;transform:translateX(-50%);background:linear-gradient(#2a3133,#0e1213);border:1px solid #000;border-radius:0 0 4px 4px;z-index:2;touch-action:none;user-select:none}
.lk-black.flash{background:linear-gradient(var(--accent),var(--accent2))}
.lk-lbl{pointer-events:none}
.trow-pat{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.trow-pat::-webkit-scrollbar{display:none}
.trow-pat .tlab{flex:0 0 auto}
.patbar{margin-bottom:12px}
.play{
  width:46px;height:46px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  font-size:18px;display:grid;place-items:center;box-shadow:var(--shadow);flex:0 0 auto;
  transition:transform .08s;
}
.play:active{transform:scale(.94)}
.play.on{background:var(--accent2)}
.tgroup{display:flex;align-items:center;gap:8px}
.tctrl{display:flex;flex-direction:column;gap:3px;min-width:150px}
.tctrl.narrow{min-width:auto}
.tlab{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--dim)}
.trow{display:flex;align-items:center;gap:8px}
.num{font-family:var(--mono);font-size:13px;min-width:42px;text-align:right;color:var(--accent)}
.bpmbox{
  display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line)
}
.bpmbox .tlab{font-size:9px}
.bpmnum{font-family:var(--mono);font-size:16px;font-weight:700;color:var(--accent);min-width:30px;text-align:center}
.selbtn{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 12px;font-size:14px;font-weight:600;display:inline-flex;align-items:center;gap:6px
}
.screenbtn{flex:0 0 auto;color:var(--accent)}
.screenbtn .scnum{font-family:var(--mono);font-size:13px}
.num.clickable{cursor:pointer;border-bottom:1px dashed var(--accent);min-width:38px}
input[type=range]{
  -webkit-appearance:none;appearance:none;height:5px;border-radius:5px;
  background:var(--so);outline:none;width:100%;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.4)
}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--bg2)}
select{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:7px 9px;font-size:13px
}
.patnav{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.patnav button{width:30px;height:34px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);flex:0 0 auto}
.patnav .addpat{width:auto;padding:0 10px;font-weight:700;color:var(--accent);border-color:var(--accent)}
.patind{flex:1 1 auto;min-width:0;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:var(--accent);font-family:var(--mono);cursor:pointer}
.tapchip{height:38px;align-self:flex-end}
.tbtns{display:flex;gap:5px;flex-wrap:nowrap;margin-left:auto;flex:0 0 auto}
.chip{
  height:34px;min-width:34px;padding:0 9px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);font-size:14px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center
}
.chip.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---------------- tabs ---------------- */
.tabs{
  display:flex;gap:4px;margin:10px 14px 0;padding:4px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r)
}
.tab{
  flex:1;padding:10px 6px;font-size:13px;letter-spacing:.3px;color:var(--dim);
  border-radius:var(--r-sm);text-align:center;transition:background .15s,color .15s
}
.tab.active{color:var(--accent-ink);background:var(--accent);font-weight:700}

main{padding:14px;max-width:1200px;margin:0 auto;width:100%;flex:1 0 auto}
.panel{display:none}
.panel.active{display:block;animation:fade .2s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.appfoot{padding:16px 14px;text-align:center;font-size:11px;color:var(--dim);flex-shrink:0}
.appfoot a{color:var(--accent);text-decoration:none}

/* ---------------- sequencer grid ---------------- */
.gridwrap{display:flex;flex-direction:column;gap:8px}
.row{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:8px;display:flex;flex-direction:column;gap:7px;box-shadow:var(--shadow)
}
.rowhead{display:flex;align-items:center;justify-content:space-between;gap:8px}
.caret{flex:0 0 auto;width:30px;height:30px;border:none;background:transparent;color:var(--accent);font-size:18px;font-weight:700;cursor:pointer;padding:0}
.caret:active{transform:scale(.9)}
.tname{font-size:13px;font-weight:600;letter-spacing:.3px;padding:2px 0;flex:1 1 auto;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row.collapsed .steps,.row.collapsed .stepscroll{display:none!important}
.row.collapsed{padding-bottom:8px}
.rowtools{display:flex;gap:5px}
.ico{
  width:30px;height:30px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);
  font-size:13px;display:grid;place-items:center
}
.ico.act{background:var(--dim);color:var(--bg)}
.ico.act-solo{background:var(--accent2);color:var(--accent-ink)}
.ico.recbtn{color:var(--accent)}
.ico.playbtn{color:var(--accent2)}
.ico.recording{background:var(--accent);color:var(--accent-ink);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.5}}

/* pasos: tamaño fijo + scroll horizontal cuando hay muchos */
.steps{
  display:grid;grid-auto-flow:column;grid-auto-columns:var(--cell,34px);gap:5px;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;
  scroll-snap-type:x proximity;
}
.steps::-webkit-scrollbar{display:none}
.step{
  width:var(--cell,34px);height:var(--cell,34px);border-radius:6px;background:var(--so);border:1px solid var(--line);
  transition:transform .05s,background .1s,box-shadow .1s;position:relative;scroll-snap-align:start
}
.step.beat{border-color:var(--dim)}
.step.on.soft{background:var(--soft)}
.step.on.hard{background:var(--son);box-shadow:0 0 10px -2px var(--son)}
.step.head{outline:2px solid var(--headline);outline-offset:1px}
.step.head::after{content:"";position:absolute;inset:0;border-radius:6px;background:var(--head)}
.step:active{transform:scale(.9)}
.seqfoot{margin-top:12px}

/* barra de secuenciador: + pista (izq) y paginador de compases (der) */
.seqbar{display:flex;align-items:center;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.pagejump{
  width:38px;height:40px;flex:0 0 auto;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);color:var(--accent);
  font-size:16px;font-weight:800;display:inline-flex;align-items:center;justify-content:center
}
.pagejump:active{transform:scale(.94)}
.addtrackbtn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--accent);color:var(--accent);font-size:13px;font-weight:700;flex:0 0 auto
}
.addtrackbtn .plus{color:var(--accent);font-size:16px;font-weight:800;line-height:1}
.pager{display:flex;gap:5px;overflow-x:auto;margin-left:auto;scrollbar-width:none;max-width:62%}
.pager::-webkit-scrollbar{display:none}
.pagebtn{
  min-width:36px;height:34px;padding:0 10px;border-radius:var(--r-sm);
  background:var(--bg2);border:1px solid var(--line);color:var(--dim);
  font-family:var(--mono);font-size:12px;display:inline-flex;align-items:center;justify-content:center
}
.pagebtn.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}

/* ---------------- mixer ---------------- */
.mixerwrap{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;touch-action:pan-y;scrollbar-width:none}
.mixerwrap::-webkit-scrollbar{display:none}
.chan{
  flex:0 0 116px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:var(--r);
  padding:0 0 10px;display:flex;flex-direction:column;gap:8px;align-items:center;box-shadow:var(--shadow);overflow:hidden
}
.chan.inst{border-top-color:var(--accent2)}
.chname{font-size:11px;font-weight:700;text-align:center;min-height:34px;width:100%;display:grid;place-items:center;line-height:1.1;padding:8px 6px 4px;background:var(--bg2);border-bottom:1px solid var(--line);touch-action:pan-y;cursor:grab}
.chsect{display:flex;flex-direction:column;gap:9px;width:100%;align-items:center;padding:0 8px}
.chseclab{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim);width:100%;text-align:left;padding:6px 10px 0;border-top:1px solid var(--line)}
.knob{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%}
.knob input[type=range]{width:88px}
/* sobre un slider del mezclador el dedo solo ajusta el valor; el scroll
   horizontal se hace en la barra inferior dedicada */
.chan input[type=range]{touch-action:none}
.klab{font-size:9px;letter-spacing:.5px;text-transform:uppercase;color:var(--dim)}
.kval{font-family:var(--mono);font-size:11px;color:var(--accent)}
.chbtns{display:flex;gap:5px;margin-top:2px}
.minib{width:26px;height:28px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);font-size:12px;font-weight:700}
.minib.act{background:var(--dim);color:var(--bg)}
.minib.act-solo{background:var(--accent2);color:var(--accent-ink)}
.minib.reset{color:var(--accent);font-weight:400;font-size:14px}

/* barra de scroll propia del mezclador */
.mixscroll{
  margin-top:12px;height:24px;border-radius:12px;background:var(--so);
  border:1px solid var(--line);position:relative;display:none;touch-action:none;cursor:pointer
}
.mixscroll.show{display:block}
.mixthumb{
  position:absolute;top:2px;bottom:2px;left:0;border-radius:11px;min-width:40px;
  background:var(--accent);box-shadow:0 1px 4px rgba(0,0,0,.35);will-change:transform
}

/* ---------------- fx ---------------- */
.fxwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.fxcard{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)
}
.fxhead{display:flex;align-items:center;justify-content:space-between}
.fxcard h3{margin:0;font-size:14px;letter-spacing:.5px;color:var(--headline)}
.fxreset{
  width:28px;height:28px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);
  color:var(--dim);font-size:15px;display:grid;place-items:center
}
.fxreset:active{transform:scale(.92)}
.fxheadtools{display:flex;align-items:center;gap:6px}
.fxpreset{width:28px;height:28px;border-radius:7px;background:var(--bg2);border:1px solid var(--line);color:var(--accent);font-size:14px;display:grid;place-items:center}
.fxpreset:active{transform:scale(.92)}
button.chname{cursor:pointer;border:none;font:inherit}
.songhint{font-size:11px;color:var(--dim);margin:6px 0 10px}
.songcell.lp{outline:2px solid var(--accent)}
.tempopanel{display:flex;flex-direction:column;gap:12px;align-items:stretch;min-width:240px}
.uititle{font-size:15px;font-weight:700;color:var(--headline);text-align:center}
.tempodisp{font-family:var(--mono);font-size:26px;font-weight:700;color:var(--accent);text-align:center}
.temporow{display:flex;gap:8px;align-items:center;justify-content:center}
.tempoinput{width:90px;text-align:center;font-size:18px;padding:8px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);color:var(--text)}
.tbig{width:42px;height:42px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);color:var(--text);font-size:22px;line-height:1}
.btn.wide{width:100%}
.tapbtn{padding:14px;font-size:16px;font-weight:700;letter-spacing:1px}
.patmgr{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow-y:auto;margin:8px 0}
.patrow{display:flex;align-items:center;gap:6px;padding:5px;border:1px solid var(--line);border-radius:8px;background:var(--bg2)}
.patrow.cur{border-color:var(--accent)}
.patgo{flex:1;text-align:left;padding:6px 10px;font-weight:700;color:var(--text);background:transparent;border:none;cursor:pointer}
.patrow.cur .patgo{color:var(--accent)}
.patop{width:32px;height:32px;border-radius:7px;background:var(--surface);border:1px solid var(--line);color:var(--dim);display:grid;place-items:center}
.patop.danger{color:#e25563}
.fxcard .knob{flex-direction:row;justify-content:space-between;align-items:center}
.fxcard .knob input[type=range]{width:55%}
.fxcard .klab{font-size:11px}

/* ---------------- song ---------------- */
.songwrap{display:flex;flex-direction:column;gap:14px}
.songtop{display:flex;gap:10px}
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.songcell{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0;position:relative
}
.songcell.cur{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.songpick{
  width:100%;padding:7px 8px;border-radius:var(--r-sm);font-weight:700;
  background:var(--bg2);border:1px solid var(--line);color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px
}
.songrow{display:flex;align-items:center;justify-content:space-between;gap:6px}
.songplay{width:30px;height:28px;border-radius:6px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;flex:0 0 auto}
.songdel{font-size:13px;color:var(--dim);width:28px;height:28px;border-radius:6px;border:1px solid var(--line);background:var(--bg2);flex:0 0 auto}

/* ---------------- buttons ---------------- */
.btn{
  padding:11px 16px;border-radius:var(--r-sm);background:var(--surface);
  border:1px solid var(--line);font-size:14px;font-weight:600
}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.on{background:var(--accent2);color:var(--accent-ink);border-color:var(--accent2)}
.btn.danger{background:#e0483b;color:#fff;border-color:#e0483b}

/* segmented */
.seg{display:flex;gap:4px;background:var(--so);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px}
.segbtn{padding:7px 12px;border-radius:5px;font-size:13px;color:var(--dim)}
.segbtn.on{background:var(--accent);color:var(--accent-ink);font-weight:700}

/* ---------------- drawer ---------------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.2s;z-index:30}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:300px;max-width:86vw;z-index:40;
  background:var(--bg2);border-left:1px solid var(--line);transform:translateX(100%);
  transition:transform .25s;display:flex;flex-direction:column;gap:14px;padding:16px;
  overflow-y:auto;
}
.drawer.open{transform:none}
.drawerhead{display:flex;justify-content:space-between;align-items:center}
.x{font-size:18px;width:34px;height:34px;border-radius:7px;background:var(--surface);border:1px solid var(--line)}
.drawergroup{display:flex;flex-direction:column;gap:8px}
.drawersep{height:1px;background:var(--line);margin:2px 0}
.drawerlabel{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--dim)}
.velhead{display:flex;align-items:center;justify-content:space-between}
.velreset{width:24px;height:24px;border-radius:6px;background:var(--bg2);border:1px solid var(--line);color:var(--dim);font-size:13px;display:grid;place-items:center}
#sliderBubble{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-100%);background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-weight:700;font-size:15px;padding:6px 11px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.45);white-space:nowrap;opacity:0;transition:opacity .1s}
#sliderBubble.show{opacity:1}
#sliderBubble::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--accent)}
.drawerbtn{
  text-align:left;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);font-size:14px
}
.chiplist{display:flex;flex-wrap:wrap;gap:7px}
.themechip,.langchip{
  display:flex;align-items:center;gap:7px;padding:8px 11px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid var(--line);font-size:13px;text-transform:capitalize
}
.themechip em{color:var(--dim);font-style:normal;font-size:11px}
.themechip.sel,.langchip.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.swatch{width:16px;height:16px;border-radius:5px;border:1px solid rgba(0,0,0,.2)}
.sw-studio{background:linear-gradient(135deg,#0f1115 50%,#ffb13b 50%)}
.sw-neon{background:linear-gradient(135deg,#06070d 50%,#15e0ff 50%)}
.sw-tape{background:linear-gradient(135deg,#16110c 50%,#ff8a3c 50%)}
.sw-sunset{background:linear-gradient(135deg,#140b1e 50%,#ff5d8f 50%)}
.sw-paper{background:linear-gradient(135deg,#f3ede1 50%,#d6452b 50%)}
.sw-porcelain{background:linear-gradient(135deg,#eef1f5 50%,#2f6df0 50%)}
.drawerfoot{margin-top:auto;font-size:11px;color:var(--dim);text-align:center}
.drawerfoot a{color:var(--accent);text-decoration:none}

/* ---------------- modals ---------------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:50;align-items:center;justify-content:center;padding:18px}
.modal.open{display:flex}
.modalbox{
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
  width:100%;max-width:380px;padding:18px;box-shadow:var(--shadow);max-height:86vh;overflow-y:auto
}
.modalhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.frow{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:14px;gap:10px}
.modalbtns{display:flex;gap:10px;margin-top:6px}
.modalbtns .btn{flex:1}
.expstatus{margin-top:14px;font-family:var(--mono);font-size:12px;color:var(--accent2);min-height:16px}
.modalbox p{font-size:13px;line-height:1.5;color:var(--text)}
.modalbox p.helptxt{white-space:pre-line}
.modalbox .dim{color:var(--dim)}
.modalbox hr{border:none;border-top:1px solid var(--line);margin:12px 0}

/* ---------------- UI dialogs (confirm/prompt/picker) ---------------- */
.uimodal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;padding:18px;z-index:90;opacity:0;transition:opacity .18s}
.uimodal.open{opacity:1}
.uimodalbox{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:340px;padding:18px;box-shadow:var(--shadow);transform:translateY(8px);transition:transform .18s}
.uimodal.open .uimodalbox{transform:none}
.uimsg{font-size:14px;line-height:1.5;margin:0 0 14px}
.uiinput{width:100%;padding:11px 12px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);font-size:15px;margin-bottom:14px}
.uibtns{display:flex;gap:10px}
.uibtns .btn{flex:1}
.optlist{display:flex;flex-direction:column;gap:7px;max-height:50vh;overflow-y:auto}
.optbtn{text-align:left;padding:11px 14px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600}
.optbtn.sel{border-color:var(--accent);color:var(--accent)}

/* ---------------- piano roll / instrumento ---------------- */
.btn.small{padding:8px 11px;font-size:13px}
.ico.pianobtn{color:var(--accent2)}
.row.inst{border-left:3px solid var(--accent2)}

.pianoov{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:12px;z-index:75;opacity:0;transition:opacity .18s}
.pianoov.open{opacity:1}
.pianobox{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);width:100%;max-width:760px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow);overflow:hidden}
.pianohead{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.pianohead strong{font-size:15px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pianotop{display:flex;align-items:center;gap:10px}
.pianozones{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.btn.small.play{flex:0 0 auto;min-width:44px;font-size:15px}
.btn.small.play.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pianoctrls{display:flex;gap:6px;align-items:center;margin-left:auto;flex-wrap:wrap;justify-content:flex-end}
body.noscroll{overflow:hidden}
.recmodal{min-width:240px}
.recstatus{text-align:center;font-size:13px;color:var(--dim);margin:6px 0 12px}
.recmodal .uibtns{flex-wrap:wrap;justify-content:center;gap:8px}
.recmodal .uibtns .btn{flex:0 0 auto}
.editov .uimodalbox{max-width:560px}
.editorbox{box-sizing:border-box;width:100%}
.wavecv{width:100%;height:130px;display:block;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);margin:8px 0;touch-action:none}
.editrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.editrow .gainsld{flex:1 1 100px}
.editortools{display:grid;grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:8px;margin-bottom:10px}
.etool{height:auto;min-height:54px;flex:0 0 auto;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line);color:var(--text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 4px;font-size:11px;line-height:1.1}
.etool span{text-align:center}
.etool:active{transform:scale(.95);border-color:var(--accent)}
.etool svg{color:var(--accent)}
.editorbox .uibtns{display:flex;gap:8px;justify-content:flex-end}
.editorbox .uibtns .btn{flex:0 0 auto}
/* header piano: filas con campos flexibles trimeados y botones fijos */
.pianotitle{background:transparent;border:none;color:var(--text);font-size:15px;font-weight:700;text-align:left;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0}
.pzrow{display:flex;align-items:center;gap:8px}
.pzone.grow{flex:1 1 auto;min-width:0}
.pzone.grow .btn.small.grow{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fixedbtn{flex:0 0 auto}
.btn.small.play.fixedbtn{min-width:44px}
.btn.small.play svg{color:var(--accent)}
.btn.small.play.on svg{color:var(--accent-ink)}
.pianoctrls .btn.small{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pianogrid{overflow:auto;min-height:120px;max-height:58vh}
.prscroll{height:22px;flex:0 0 auto;margin:10px 14px;border-radius:11px;background:var(--so);border:1px solid var(--line);position:relative}
.prthumb{position:absolute;top:2px;left:0;height:16px;width:100%;border-radius:8px;background:var(--accent);opacity:.9;touch-action:none}
.prtable{display:flex;flex-direction:column;min-width:max-content}
.prrow{display:flex;align-items:stretch;height:22px}
.prrow.black{background:rgba(0,0,0,.12)}
.prkey{position:sticky;left:0;z-index:2;width:54px;flex:0 0 54px;font-size:10px;font-family:var(--mono);
  background:var(--surface);border:1px solid var(--line);border-left:none;color:var(--text);text-align:left;padding:0 6px}
.prkey.black{background:var(--bg);color:var(--dim)}

.prcell{width:30px;flex:0 0 30px;border:1px solid var(--line);border-left:none;border-top:none;background:transparent;touch-action:none}
.prcells{display:flex;gap:0;position:relative}
.prnotes{position:absolute;inset:0;pointer-events:none}
.prnote{position:absolute;top:2px;bottom:2px;background:var(--accent);border-radius:2px;box-shadow:inset 2px 0 0 var(--accent-ink);min-width:3px}
.editrow .gainsld{flex:1 1 70px;min-width:60px}
.prcell.beat{border-left:1px solid var(--dim)}
.prcell.sstart{border-left:1px solid var(--line)}
.prcell.on{background:var(--accent)}
.prcell.nstart{box-shadow:inset 2px 0 0 var(--accent-ink)}
.prcell.nhold{background:var(--accent);opacity:.7}
.pzone{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg2)}
.pzone.sfz{border-color:var(--accent2)}
.pzlab{font-size:10px;letter-spacing:.4px;text-transform:uppercase;color:var(--dim);font-weight:700}
.pianoopts{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--line)}
.pianoopts .humanize{flex:1 1 90px;max-width:160px}
.pzval{font-family:var(--mono);font-size:12px;color:var(--accent);min-width:38px}

/* ---------------- toast ---------------- */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--accent);color:var(--accent-ink);padding:10px 18px;border-radius:30px;
  font-size:13px;font-weight:600;opacity:0;pointer-events:none;transition:.25s;z-index:100;box-shadow:var(--shadow)
}
.toast.show{opacity:1;transform:translateX(-50%)}

@media(max-width:560px){
  .tbtns{margin-left:auto;justify-content:flex-end}
  .play{width:44px;height:44px}
}