.samples-skin-tabs{
  display:inline-flex; align-items:center; gap:2px; margin-left:12px;
  padding-left:12px; border-left:1px solid var(--hair-strong);
}
.samples-skin-tabs[hidden]{ display:none !important; }
.samples-skin-tab{ padding:4px 9px; }

.samples-pads-panel{
  flex:1; min-height:0; position:relative; overflow:hidden;
  background:var(--sample-track-bg, var(--workspace));
  color:var(--ink);
}
.samples-pads-panel::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--pads-wallpaper, none) center / cover no-repeat;
  opacity:var(--pads-wallpaper-opacity, .3);
}
.samples-pads-panel[hidden]{ display:none !important; }
.pads-shell{
  position:relative; height:100%; display:flex; flex-direction:column;
  gap:12px; padding:14px 18px;
}
.pads-toolbar{ display:flex; align-items:center; gap:10px; }
.pads-label{
  font-family:'IBM Plex Mono',monospace; font-size:var(--font-xs);
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint);
}
.pads-banks{ display:inline-flex; gap:4px; }
.pads-bank{
  min-width:30px; padding:5px 9px; border-radius:var(--radius);
  border:1px solid var(--hair-strong);
  background:color-mix(in srgb, var(--paper) 70%, transparent);
  color:var(--ink-soft); cursor:pointer;
  font-family:'IBM Plex Mono',monospace; font-size:var(--font-sm);
  transition:border-color .12s ease, color .12s ease, background .12s ease;
}
.pads-bank:hover{ color:var(--ink); border-color:var(--ink-faint); }
.pads-bank.on{ background:var(--amber-soft); border-color:var(--amber); color:var(--ink); }
.pads-bank.lit{ border-color:var(--amber); color:var(--ink); box-shadow:0 0 10px color-mix(in srgb, var(--amber) 55%, transparent); }
.pads-range{
  margin-left:auto; font-family:'IBM Plex Mono',monospace;
  font-size:var(--font-xs); color:var(--ink-faint);
  padding:2px 8px; border-radius:var(--radius);
  background:color-mix(in srgb, var(--paper) 60%, transparent);
}
.pads-grid{
  flex:1; min-height:0; display:grid; gap:10px;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  grid-template-rows:repeat(4, minmax(0, 1fr));
  width:min(100%, calc((100vh - 260px) * 1.25));
  align-self:center;
}
.pad{
  position:relative; min-height:0; min-width:0; overflow:hidden;
  border-radius:12px; border:1px solid var(--hair-strong);
  background:color-mix(in srgb, var(--paper) 62%, transparent);
  backdrop-filter:blur(4px);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:8px 10px; cursor:pointer; user-select:none;
  transition:border-color .1s ease, background .1s ease, box-shadow .1s ease, transform .06s ease;
}
.pad:hover{ border-color:var(--ink-faint); }
.pad.filled{
  background:color-mix(in srgb, var(--amber-soft) 88%, transparent);
  border-color:color-mix(in srgb, var(--amber) 60%, transparent);
}
.pad.ranged{ border-style:dashed; }
.pad.sel{
  border-color:var(--rubric);
  box-shadow:0 0 0 1px var(--rubric), 0 0 18px color-mix(in srgb, var(--rubric) 45%, transparent);
}
.pad.playing{
  background:color-mix(in srgb, var(--amber) calc(22% + var(--pad-vel, .6) * 34%), var(--amber-soft));
  border-color:var(--amber);
  box-shadow:0 0 calc(10px + var(--pad-vel, .6) * 18px) color-mix(in srgb, var(--amber) 60%, transparent);
  transform:scale(.985);
}
.pad.sel.playing{ border-color:var(--rubric); }
.pad.drop{ border:2px dashed var(--amber); box-shadow:0 0 0 2px color-mix(in srgb, var(--amber) 35%, transparent); }
.pad.disabled{ opacity:.25; cursor:default; }
.pad-note{
  position:absolute; top:7px; left:10px; z-index:1;
  font-family:'IBM Plex Mono',monospace; font-size:var(--font-xs); font-weight:700; color:var(--rubric);
}
.pad.filled .pad-note{ color:var(--ink); }
.pad-idx{
  position:absolute; top:7px; right:10px; z-index:1;
  font-family:'IBM Plex Mono',monospace; font-size:var(--font-xs); color:var(--ink-faint);
}
.pad-layers{
  position:absolute; top:24px; right:10px; z-index:1; min-width:16px; padding:0 4px;
  border-radius:999px; text-align:center;
  background:color-mix(in srgb, var(--ink) 16%, transparent);
  font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--ink);
}
.pad-time{
  position:absolute; top:24px; left:10px; z-index:1; padding:0 4px; border-radius:3px;
  background:color-mix(in srgb, var(--rubric) 18%, transparent);
  font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:700; letter-spacing:.04em; color:var(--rubric);
}
.pad-wave{
  position:absolute; left:6px; right:6px; top:26px; bottom:28px;
  width:calc(100% - 12px); height:calc(100% - 54px); pointer-events:none;
  color:color-mix(in srgb, var(--amber) 75%, var(--ink));
}
.pad-name{
  position:relative; z-index:1; font-size:var(--font-sm); color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.pad-drop{
  position:relative; z-index:1; font-size:var(--font-sm); color:var(--ink-faint);
}
.pads-footer{ display:flex; align-items:center; gap:12px; }
.pads-selected{
  font-family:'IBM Plex Mono',monospace; font-size:var(--font-sm); color:var(--ink-soft);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  padding:3px 10px; border-radius:var(--radius);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
}
.pads-footer-actions{ margin-left:auto; display:inline-flex; gap:8px; }
.pads-btn{
  padding:5px 12px; border-radius:var(--radius); cursor:pointer;
  border:1px solid var(--hair-strong);
  background:color-mix(in srgb, var(--paper) 72%, transparent);
  color:var(--ink-soft); font-size:var(--font-sm);
  transition:border-color .12s ease, color .12s ease;
}
.pads-btn:hover{ color:var(--ink); border-color:var(--amber); }

.samples-kit-panel{
  flex:1; min-height:0; position:relative; overflow:hidden; container-type:size;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 50% 0%, #1d222b 0%, #0d1015 70%);
  color:#e8ecf2;
}
.samples-kit-panel[hidden]{ display:none !important; }
.kit-stage{
  position:relative; width:min(100cqw, 190cqh); aspect-ratio:19 / 10;
  background:var(--kit-wallpaper, none) center / 100% 100% no-repeat;
}
.kit-target{
  position:absolute; transform:translate(-50%, -50%); border-radius:50%;
  border:2px dashed rgba(255,255,255,.22); background:rgba(94,200,255,.04);
  cursor:pointer; user-select:none;
  transition:border-color .1s ease, background .1s ease, box-shadow .1s ease;
}
.kit-target:hover{ border-color:rgba(94,200,255,.7); background:rgba(94,200,255,.1); }
.kit-target.filled{ border-style:solid; border-color:rgba(94,200,255,.45); }
.kit-target.sel{ border-color:#5ec8ff; background:rgba(94,200,255,.16); box-shadow:0 0 0 2px rgba(94,200,255,.5), 0 0 26px rgba(94,200,255,.55); }
.kit-target.playing{ background:rgba(94,200,255,.38); border-color:#fff; }
.kit-target.drop{ border-color:#fff; box-shadow:0 0 0 3px rgba(94,200,255,.8); }
.kit-chip{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  display:flex; flex-direction:column; align-items:center; gap:1px; padding:3px 9px;
  background:rgba(14,22,32,.8); border:1px solid rgba(94,200,255,.55); border-radius:6px;
  font-family:'IBM Plex Mono',monospace; white-space:nowrap; pointer-events:none;
}
.kit-label{ font-size:var(--font-sm); color:#eef2f8; }
.kit-note{ font-size:var(--font-xs); color:#7fd4ff; }
.kit-sample{ font-size:10px; color:rgba(232,236,242,.6); max-width:14ch; overflow:hidden; text-overflow:ellipsis; }
.kit-hint{
  position:absolute; left:12px; bottom:10px; padding:5px 10px; border-radius:6px;
  background:rgba(14,22,32,.7); border:1px dashed rgba(255,255,255,.2);
  font-size:var(--font-xs); color:rgba(232,236,242,.6);
}