.sampler-beat-controls { height: 100px; flex: 0 0 100px; box-sizing: border-box; padding: 5px 0; font-family: Orbitron, sans-serif; }
.sampler-beat-transport { display:flex; gap:6px; align-items:center; height:34px; }
.sampler-beat-controls button,.sampler-beat-controls input,.sampler-beat-controls select { font:inherit; font-size:12px; color:#e8edf5; background:linear-gradient(#25282d,#15171a); border:1px solid #383d44; border-radius:4px; min-height:30px; padding:4px 9px; }
.sampler-beat-controls button[aria-pressed=true] { border-color:#00dcec; color:#00eaff; background:#10313b; }
.sampler-beat-controls input { width:65px; }
.sampler-beat-controls label { display:flex; gap:6px; align-items:center; }
.sampler-clip-picker { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:4px; margin-top:5px; }
.sampler-clip-picker button { min-width:0; padding:3px; overflow:hidden; height:32px; }
.sampler-clip-picker span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }
.sampler-clip-picker img { width:24px; height:16px; object-fit:cover; }
.sampler-beat-caption { display:flex; justify-content:space-between; color:#aebbc9; font-size:10px; padding-top:4px; }
.sampler-performance-grid { height:250px; flex:0 0 250px; min-height:0; box-sizing:border-box; }
.sampler-performance-grid > div { min-height:0; min-width:0; }
.sampler-performance-grid .sampler-pad-tile { position:relative; }
.sampler-performance-grid [id^=pad-] { position:absolute !important; inset:0; width:100%; height:100%; box-sizing:border-box; padding-bottom:0 !important; min-height:0; border-color:#353a41 !important; background:linear-gradient(145deg,#202328,#111315) !important; }
.sampler-performance-grid .sampler-pad-tools { position:absolute; top:4px; left:4px; width:calc(100% - 8px) !important; z-index:1; pointer-events:none; }
.sampler-performance-grid .sampler-pad-tools button { pointer-events:auto; }
.sampler-performance-grid .sampler-trigger-label { position:absolute; bottom:4px; left:4px; width:calc(100% - 8px) !important; height:24px !important; box-sizing:border-box; z-index:1; }
.sampler-performance-grid .sampler-empty-pad { padding-bottom:16px; }
.sampler-beat-step { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; color:#81909f; background:linear-gradient(145deg,#202328,#111315); border:1px solid #353a41; border-radius:5px; font-family:Orbitron,sans-serif; touch-action:manipulation; }
.sampler-beat-step strong { font-size:22px; }
.sampler-beat-step span { font-size:11px; }
.sampler-beat-step.is-on { color:#00efff; background:linear-gradient(145deg,#15353b,#102328); border-color:#00a6c0; }
.sampler-beat-step.is-current { outline:2px solid #fff; outline-offset:-3px; box-shadow:inset 0 0 18px #00c8df55; }
.sampler-clip-picker video { width:24px; height:16px; object-fit:cover; float:left; pointer-events:none; }
.sampler-empty-pad { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; width:100%; overflow:hidden; white-space:nowrap; } .sampler-empty-pad .sampler-pad-label { max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.sampler-beat-controls { position:relative; z-index:2; }
.sampler-beat-transport { gap:5px; }
.sampler-beat-transport select[aria-label="Sequencer sync source"] { width:160px; text-overflow:ellipsis; }
.sampler-sync-status { font-size:9px; color:#73dbe4; max-width:105px; }
.sampler-beat-controls button:disabled,.sampler-beat-controls input:disabled,.sampler-beat-controls select:disabled { opacity:.5; cursor:default; }
.sampler-chain-editor { position:absolute; left:0; right:0; bottom:100%; max-height:310px; overflow:auto; padding:14px; border:1px solid #00b7c9; border-radius:8px; background:#111316; box-shadow:0 12px 35px #000a; z-index:20; }
.sampler-chain-heading { display:flex; align-items:center; gap:12px; }
.sampler-chain-heading strong { flex:1; font-size:16px; color:#9eeaf0; }
.sampler-chain-editor p,.sampler-chain-editor small { color:#aab7c5; font-size:11px; }
.sampler-chain-entries { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:10px 0; }
.sampler-chain-entries > div { display:flex; align-items:center; gap:4px; padding:6px; background:#090b0d; border:1px solid #354150; border-radius:4px; }
.sampler-chain-entries > div.is-current { border-color:#00eaff; background:#10313b; }
.sampler-chain-entries > div > span { color:#8298ac; font-size:10px; }
.sampler-chain-entries select,.sampler-chain-entries button { font-size:10px; min-width:0; padding:3px; }
.sampler-chain-add { display:flex; gap:6px; margin-bottom:10px; }

.sampler-step-thumbnail {
    display: block; width: 72%; height: 54px; max-height: 48%;
    object-fit: contain; background: #000; border-radius: 4px;
    pointer-events: none; flex-shrink: 1;
}