/* Four focused editors and two compact performance drum banks. */
body.dual-drums-ui #legacyMixerControls[hidden],
body.dual-drums-ui #secondDrumInputs[hidden] { display: none !important; }

body.dual-drums-ui.focus-guided-ui #view-seq .drum-panel #drumContainer,
body.dual-drums-ui.focus-guided-ui #view-seq .drum-panel #drum2Container {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: repeat(10,minmax(30px,1fr));
    flex: 1 1 auto;
    min-height: 336px;
    gap: 4px;
    overflow: hidden;
}
body.dual-drums-ui.focus-guided-ui #view-seq .drum-panel .track-row { min-height: 30px; }
body.dual-drums-ui #drums2Panel .ls-dot { padding: 0; min-width: 0; box-sizing: border-box; }
body.dual-drums-ui #drums2Panel .pad { touch-action: none; }
body.dual-drums-ui #drums2Panel .drum-tools-row { display: flex; gap: 4px; }
body.dual-drums-ui #drums2Panel .editor-inline-controls { display: flex; align-items: center; }
body.dual-drums-ui #drums2Panel [data-drum-bank-volume] { width: 60px; }
body.dual-drums-ui #view-seq .drum-panel .sound-controls { display: flex; align-items: center; gap: 14px; }
.selected-drum-name { min-width: 65px; color: #b4e7f5; font-size: 10px; }
.drum-range-control { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drum-range-control > span { display: flex; justify-content: space-between; gap: 8px; color: #a6a6b3; font-size: 9px; white-space: nowrap; }
.drum-range-control output { color: #b4e7f5; font-family: monospace; }
.drum-range-control input[type="range"] { width: 100%; min-width: 0; height: 24px; margin: 0; touch-action: pan-y; }
body.dual-drums-ui #view-seq .drum-panel .sound-controls .drum-range-control { flex: 1; max-width: 200px; }

.performance-drum-banks { display: grid; gap: 6px; }
.performance-drum-bank { display: grid; grid-template-columns: 155px minmax(0,1fr); gap: 9px; align-items: center; }
.drum-bank-header { display: flex; flex-direction: column; gap: 6px; }
.drum-bank-header > div { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.drum-bank-header strong { font-size: 11px; color: #d7eaf3; }
body.dual-drums-ui select[data-drum-kit] {
    min-width: 72px; min-height: 28px; padding: 3px 24px 3px 7px;
    border: 1px solid #486274; border-radius: 4px; background-color: #202c36;
    color: #d9effb; font: 700 11px/1.2 Arial,sans-serif; color-scheme: dark;
    appearance: auto; cursor: pointer; box-sizing: border-box;
}
body.dual-drums-ui select[data-drum-kit] option { color: #e6edf3; background: #202c36; }
body.dual-drums-ui select[data-drum-kit]:focus-visible { outline: 2px solid #70d8f5; outline-offset: 2px; }
body.dual-drums-ui .bank-2 select[data-drum-kit] { border-color: #5c7048; background-color: #293222; color: #d0edac; }
.drum-bank-header [data-drum-bank-mute] { min-height: 28px; border: 1px solid #38546a; border-radius: 4px; background: #162634; color: #9cd5ee; font-size: 9px; font-weight: 800; cursor: pointer; }
.drum-bank-header > label { display: flex; align-items: center; gap: 5px; color: #8c8c9a; font-size: 9px; }
.drum-bank-header input { width: 100%; min-width: 0; height: 18px; margin: 0; }
.drum-bank-pads { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 5px; }
.performance-drum-pad { min-width: 0; padding: 3px; border: 1px solid #303d48; border-radius: 6px; background: #19212a; }
.performance-drum-pad.selected { border-color: #70d8f5; box-shadow: inset 0 0 0 1px #70d8f533; }
.performance-drum-pad button { display: block; width: 100%; padding: 0 2px; border: 0; border-radius: 4px; cursor: pointer; }
.performance-drum-pad .drum-pad-select { min-height: 23px; background: transparent; color: #b3c8d6; font-size: 10px; white-space: nowrap; }
.performance-drum-pad .drum-pad-mute { min-height: 35px; background: #213e4b; color: #9ae7fa; font-size: 11px; font-weight: 900; }
.bank-2 .performance-drum-pad { background: #21241c; border-color: #3e4732; }
.bank-2 .performance-drum-pad.selected { border-color: #bbd78a; box-shadow: inset 0 0 0 1px #bbd78a33; }
.bank-2 .drum-pad-mute { background: #354329; color: #d0edac; }
.bank-2 .drum-pad-select { color: #c7d3b3; }
.performance-drum-pad.hit .drum-pad-mute { box-shadow: inset 0 0 0 1px #ffffff60; }
.drum-bank-header [data-drum-bank-mute].muted,
.performance-drum-pad .drum-pad-mute.muted { background: #47311b; border-color: #a16729; color: #ffbd74; }
.performance-drum-detail { display: grid; grid-template-columns: 150px repeat(5,minmax(0,1fr)); align-items: center; gap: 14px; margin-top: 7px; padding-top: 6px; border-top: 1px solid #30303a; }
.performance-drum-detail > strong { color: #b4e7f5; font-size: 10px; }
.performance-synth-mix { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.performance-synth-mix .live-mute-pad { width: 52px; min-height: 34px; padding: 0 4px; font-size: 9px; }
.performance-synth-mix .drum-range-control { width: 78px; }
.performance-synth-sends { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 3px 5px; background: #1b1b22; border: 1px solid #30303a; border-radius: 5px; }
.performance-synth-sends .drum-range-control input[type="range"] { height: 20px; }
body.dual-drums-ui .performance-synth-heading .performance-synth-mix > span { width: auto; height: auto; }

@media (min-width: 768px) and (max-width: 1180px) {
    body.dual-drums-ui.tablet-layout.focus-guided-ui #view-seq .drum-panel #drumContainer,
    body.dual-drums-ui.tablet-layout.focus-guided-ui #view-seq .drum-panel #drum2Container {
        grid-template-rows: repeat(10,minmax(42px,1fr)); min-height: 456px;
    }
    .performance-drum-pad .drum-pad-mute { min-height: 44px; }
    .drum-bank-header [data-drum-bank-mute] { min-height: 36px; }
    body.dual-drums-ui select[data-drum-kit] { min-height: 44px; }
}
@media (max-width: 920px) {
    body.dual-drums-ui .focus-track-list { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .performance-drum-bank { grid-template-columns: 135px minmax(0,1fr); gap: 6px; }
    .performance-drum-pad .drum-pad-select { font-size: 9px; min-height: 28px; white-space: normal; }
    .performance-drum-detail { grid-template-columns: 130px repeat(5,minmax(0,1fr)); gap: 7px; }
}
@media (max-width: 640px) {
    body.dual-drums-ui .focus-track-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .performance-drum-bank { grid-template-columns: minmax(0,1fr); }
    .drum-bank-header { flex-direction: row; justify-content: space-between; }
    .drum-bank-header > label { width: 30%; }
    .drum-bank-pads { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .performance-drum-pad .drum-pad-mute { min-height: 44px; }
    .performance-drum-detail { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .performance-drum-detail > strong { grid-column: 1 / -1; }
    .performance-synth-mix .drum-range-control { width: 65px; }
    body.dual-drums-ui #view-seq .drum-panel .sound-controls { gap: 8px; flex-wrap: wrap; }
}