#sampler{position:fixed;right:16px;bottom:16px;width:min(560px,calc(100vw - 32px));background:var(--bg2);border:1px solid var(--border);padding:10px;display:flex;flex-direction:column;gap:8px;z-index:41;box-shadow:0 12px 40px rgba(0,0,0,.6);box-sizing:border-box;font-size:11px}
#sampler.hidden{display:none}
#sampler .qhead{cursor:grab;user-select:none;margin:-10px -10px 0;padding:8px 10px;border-bottom:1px solid var(--border);display:flex;gap:10px;align-items:center}
#sampler .qhead .qtitle{font:20px var(--serif);color:var(--white)}
#sampler .qhead .qinfo{flex:1;color:var(--gold);font-variant-numeric:tabular-nums}
#sampler .lbl{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.sp-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.sp-top .eq{display:flex;flex-direction:column;align-items:center;gap:3px}
.sp-top .eq span{font-size:9px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em}
.sp-top .killbtn.on{background:var(--green);color:var(--bg);border-color:var(--green)}
.sp-meter{height:4px;width:60px;background:var(--bg);border:1px solid var(--border);overflow:hidden}
.sp-meter i{display:block;height:100%;background:linear-gradient(to right,var(--green) 0%,var(--green) 70%,var(--gold) 85%,var(--red) 100%);transform:scaleX(0);transform-origin:left;will-change:transform}
.sp-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sp-bank{display:flex;flex-direction:column;gap:4px;min-width:0}
.sp-pad{position:relative;height:72px;background:var(--bg3);border:1px solid var(--border);color:var(--white);font:inherit;cursor:pointer;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:4px;overflow:hidden;touch-action:none}
.sp-pad .n{font:20px var(--serif);color:var(--dim);line-height:1}
.sp-pad .nm{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--gray);max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-pad.empty{border-style:dashed}
.sp-pad.empty .nm{color:var(--dim)}
.sp-pad.has{border-color:var(--gold)}
.sp-pad.has .n{color:var(--gold)}
.sp-pad.playing{background:var(--gold);color:var(--bg)}
.sp-pad.playing .n,.sp-pad.playing .nm{color:var(--bg)}
.sp-pad.over{border-color:var(--pink);background:var(--bg4)}
.sp-pad .prog{position:absolute;left:0;bottom:0;height:3px;background:var(--pink);width:0;pointer-events:none}
.sp-pad.playing .prog{background:var(--bg)}
.sp-ctl{display:flex;gap:2px}
.sp-ctl button,.sp-ctl label{flex:1;background:var(--bg);border:1px solid var(--border);color:var(--dim);font:inherit;font-size:8px;letter-spacing:.08em;text-transform:uppercase;padding:3px 0;cursor:pointer;text-align:center;min-width:0;overflow:hidden}
.sp-ctl button.on{color:var(--gold);border-color:var(--gold)}
.sp-ctl button:hover,.sp-ctl label:hover{color:var(--white)}
.sp-vol{width:100%;height:4px;background:var(--bg);border:1px solid var(--border);cursor:ew-resize;touch-action:none;position:relative}
.sp-vol i{position:absolute;left:0;top:0;bottom:0;background:var(--gray);pointer-events:none}
.sp-foot{display:flex;justify-content:space-between;gap:8px;color:var(--dim);font-size:9px;letter-spacing:.08em;text-transform:uppercase;flex-wrap:wrap}
#sampler .grip{position:absolute;right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;background:linear-gradient(135deg,transparent 50%,var(--gold) 50%,var(--gold) 60%,transparent 60%,transparent 75%,var(--gold) 75%,var(--gold) 85%,transparent 85%)}
.recbtn.smp.on{background:var(--gold);color:var(--bg);border-color:var(--gold)}
@media (max-width:760px){
  #sampler{left:8px;right:8px;bottom:8px;width:auto}
  .sp-grid{grid-template-columns:repeat(3,1fr)}
  .sp-pad{height:64px}
}