/* Performance Deck — StepSeqPoly 1.4 */

body.performance-deck-ui #view-live {
    padding: 0;
    overflow: hidden;
}

body.performance-deck-ui #view-live.active {
    display: flex;
}

body.performance-view-active .controls .pattern-edit-group,
body.performance-view-active .controls .pattern-launch-group,
body.performance-view-active .controls .pattern-action-row,
body.performance-view-active .controls .title-pattern {
    display: none;
}

body.performance-view-active .controls #playBtn,
body.performance-view-active .controls .pattern-group {
    display: none;
}

body.performance-view-active .controls {
    flex-wrap: nowrap;
    min-height: 40px;
    padding-block: 4px;
}

body.focus-guided-ui.performance-view-active .controls .pattern-group {
    order: initial;
    flex: 0 1 auto;
    margin-left: auto;
}

.performance-deck {
    --deck-surface: #15151a;
    --deck-surface-raised: #1b1b22;
    --deck-border: #30303a;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-height: 0;
    overflow: auto;
    padding: 0 3px 5px;
    box-sizing: border-box;
    scrollbar-width: thin;
    touch-action: pan-y;
}

.performance-deck-header {
    display: grid;
    grid-template-columns: minmax(230px, 0.9fr) minmax(250px, 0.85fr) minmax(470px, 1.55fr);
    gap: 6px;
    align-items: stretch;
    flex: 0 0 auto;
}

.performance-title-block,
.performance-transport,
.performance-scene-launcher,
.performance-section {
    border: 1px solid var(--deck-border);
    border-radius: 10px;
    background: var(--deck-surface);
    box-sizing: border-box;
}

.performance-title-block {
    position: relative;
    overflow: hidden;
    padding: 8px 11px;
    background:
        radial-gradient(circle at 0 0, rgba(0, 230, 118, 0.14), transparent 46%),
        linear-gradient(120deg, #18181e, #131317);
}

.performance-title-block::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(#00e676, #00b0ff);
}

.performance-eyebrow {
    display: block;
    color: #70707f;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.performance-title-block h1 {
    margin: 3px 0 0;
    color: #f5f5f7;
    font-size: clamp(16px, 1.35vw, 22px);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.performance-title-block p {
    margin: 3px 0 0;
    color: #858592;
    font-size: 9px;
}

.performance-transport {
    display: grid;
    grid-template-columns: minmax(118px, 0.9fr) minmax(118px, 1fr);
    gap: 5px;
    padding: 5px;
}

#performanceTransportButton {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 6px 9px;
    border: 1px solid #245f3e;
    border-radius: 7px;
    background: #122019;
    color: #e5fff0;
    cursor: pointer;
    text-align: left;
}

#performanceTransportButton.is-playing {
    border-color: #ff1744;
    background: #32151d;
}

.performance-transport-icon {
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 12px solid #00e676;
}

#performanceTransportButton.is-playing .performance-transport-icon {
    width: 12px;
    height: 12px;
    border: 0;
    background: #ff1744;
}

.performance-transport-copy,
.performance-now div {
    min-width: 0;
}

.performance-transport-copy strong,
.performance-now strong {
    display: block;
    color: inherit;
    font-size: 11px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.performance-transport-copy small,
.performance-now small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #777784;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.performance-now {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    padding: 6px 9px;
    border: 1px solid #30303a;
    border-radius: 7px;
    background: #111115;
}

#performanceLiveDot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4b4b56;
    box-shadow: 0 0 0 4px rgba(75, 75, 86, 0.13);
}

#performanceLiveDot.is-live {
    background: #00e676;
    box-shadow: 0 0 0 4px rgba(0, 230, 118, 0.12), 0 0 12px rgba(0, 230, 118, 0.8);
}

.performance-scene-launcher {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px;
    align-items: center;
    padding: 5px;
}

.performance-scene-heading {
    padding-left: 5px;
}

.performance-scene-heading small {
    display: block;
    margin-top: 2px;
    color: #676775;
    font-size: 8px;
}

.performance-scene-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(70px, 1fr));
    gap: 5px;
}

.performance-scene {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 5px 8px;
    border: 1px solid #3b3b47;
    border-radius: 7px;
    background: #1d1d24;
    color: #777784;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.performance-scene:active {
    transform: scale(0.97);
}

.performance-scene > span {
    color: #d2d2da;
    font-family: monospace;
    font-size: 18px;
    font-weight: 900;
}

.performance-scene small {
    overflow: hidden;
    color: inherit;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.performance-scene.has-pattern {
    border-color: #286242;
    color: #00e676;
}

.performance-scene.is-editing {
    box-shadow: inset 0 -3px 0 #00e676;
}

.performance-scene.is-playing {
    border-color: #00b0ff;
    background: #0e3445;
    color: #7cddff;
    box-shadow: 0 0 14px rgba(0, 176, 255, 0.18);
}

.performance-scene.is-queued {
    border-color: #ff9100;
    background: #35220e;
    color: #ffb34d;
    animation: performanceQueuedPulse 0.8s infinite alternate;
}

@keyframes performanceQueuedPulse {
    from { filter: brightness(0.82); }
    to { filter: brightness(1.18); }
}

.performance-section {
    padding: 6px;
}

.performance-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    min-height: 25px;
    margin-bottom: 5px;
    padding: 0 2px 4px;
    border-bottom: 1px solid #292933;
}

.performance-section-heading h2 {
    margin: 2px 0 0;
    color: #e9e9ed;
    font-size: 12px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.performance-section-heading p {
    margin: 0;
    color: #70707d;
    font-size: 8px;
    text-align: right;
}

.performance-track-section {
    flex: 0 0 auto;
}

.performance-track-section .live-mixer-half {
    min-height: 0 !important;
    padding: 0;
    border: 0;
    background: transparent;
}

.performance-track-section .live-grid {
    display: grid !important;
    grid-template-columns: repeat(9, minmax(82px, 1fr)) !important;
    gap: 5px;
    min-width: 0;
}

.performance-track-section .live-track-col {
    min-width: 0;
    min-height: 132px;
    padding: 4px;
    gap: 1px;
    justify-content: flex-start;
    border-color: #30303a;
    background: #19191f;
}

.performance-track-section .live-track-col h3 {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 15px;
    font-size: 8px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.performance-track-section .live-mute-pad {
    width: 100%;
    min-height: 34px;
    height: 34px;
    border-color: #3d3d48;
    background: #23232b;
    color: #bdbdc7;
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.performance-track-section .live-mute-pad:hover {
    border-color: #00e676;
    color: #ffffff;
}

.performance-track-section .live-mute-pad.muted {
    border-color: #ff9100;
    background: #ff9100;
    color: #151515;
}

.performance-track-section .live-track-col > div[style*="margin"] {
    margin: 0 !important;
    gap: 0 !important;
}

.performance-track-section .knob-wrapper {
    width: 25px;
    height: 25px;
}

.performance-track-section .mini-knob {
    width: 19px;
    height: 19px;
}

.performance-track-section .custom-param-zone {
    height: 20px;
    min-height: 20px;
}

.performance-track-section [data-performance-track="bass"] > div[style*="height:36"],
.performance-track-section [data-performance-track="bass2"] > div[style*="height:36"] {
    height: 18px !important;
}

.performance-track-section .send-knobs-mini {
    flex-direction: row;
    justify-content: center;
    gap: 6px;
    margin-top: 0;
    padding-top: 0;
}

.performance-track-section .strip-separator {
    margin: 0;
}

.performance-main-grid {
    display: grid;
    grid-template-columns: minmax(590px, 1.2fr) minmax(400px, 0.8fr);
    gap: 6px;
    flex: 1 0 auto;
    min-height: 218px;
}

.performance-gesture-section,
.performance-synth-section {
    min-width: 0;
}

.performance-gesture-grid {
    display: grid;
    grid-template-columns: minmax(235px, 1.35fr) minmax(145px, 0.65fr);
    gap: 5px;
    min-height: 174px;
}

.performance-quick-fx {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.performance-gesture-grid > .rack-card,
.performance-quick-fx > .tool-box,
.performance-quick-fx > .rack-card,
.performance-synth-card > .rack-card,
.performance-synth-card > .tool-box {
    width: 100%;
    min-width: 0;
    border-color: #2f2f39;
    border-radius: 7px;
    background: #19191f;
    box-sizing: border-box;
}

.performance-gesture-grid > .rack-card {
    min-height: 0 !important;
    flex: none !important;
}

.performance-gesture-grid .master-fx-container {
    flex: 1;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    min-height: 0;
}

.performance-gesture-grid #smartPad {
    width: 100% !important;
    max-width: none !important;
    height: 116px !important;
}

.performance-smart-master {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100%;
    min-width: 0;
}

.performance-smart-master > label {
    margin-bottom: 3px !important;
    text-align: center;
}

.performance-master-sliders {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
    width: 100%;
}

.performance-master-control {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.performance-slider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.performance-slider-head label,
.performance-slider-head .val-indicator {
    color: #8b8b98;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.performance-master-control.vibe .performance-slider-head label,
.performance-master-control.vibe .val-indicator {
    color: #ff9100;
}

.performance-master-control.riser .performance-slider-head label,
.performance-master-control.riser .val-indicator {
    color: #ff5b72;
}

input.performance-master-slider {
    display: block !important;
    width: 100%;
    height: 15px;
    min-height: 15px;
}

#masterVintageMix::-webkit-slider-thumb {
    background: #ff9100;
}

#masterVintageMix::-moz-range-thumb {
    background: #ff9100;
}

#masterRiser::-webkit-slider-thumb {
    background: #ff1744;
}

#masterRiser::-moz-range-thumb {
    background: #ff1744;
}

.performance-quick-fx .roller-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3px;
}

.performance-quick-fx .roller-row .live-tool-btn {
    min-height: 36px !important;
    height: 36px;
}

.performance-quick-fx .rack-card {
    flex: 1;
}

.performance-quick-fx .knobs-container {
    gap: 2px;
}

.performance-quick-fx .knob-col {
    min-width: 0;
}

.performance-synth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    min-height: 174px;
}

.performance-synth-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 5px;
    border: 1px solid #33333e;
    border-top: 2px solid #e040fb;
    border-radius: 8px;
    background: #17171d;
}

.performance-synth-card.performance-synth-2 {
    border-top-color: #ffb74d;
}

.performance-synth-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.performance-synth-heading > span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: #e040fb;
    color: #161218;
    font-family: monospace;
    font-size: 11px;
    font-weight: 900;
}

.performance-synth-2 .performance-synth-heading > span {
    background: #ffb74d;
}

.performance-synth-heading h3 {
    margin: 0;
    color: #eeeeF2;
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.performance-synth-heading small {
    display: block;
    margin-top: 2px;
    color: #70707e;
    font-size: 8px;
}

.performance-synth-card > .rack-card,
.performance-synth-card > .tool-box {
    padding: 5px;
}

.performance-synth-card > .rack-card h3,
.performance-synth-card > .tool-box h4 {
    margin-bottom: 3px;
    padding-bottom: 3px;
}

.performance-synth-card .knobs-container,
.performance-synth-card .second-matrix {
    flex-wrap: nowrap;
    gap: 2px;
}

.performance-synth-card .knob-col {
    flex: 1 1 0;
    min-width: 0;
    gap: 2px;
}

.performance-synth-card .knob-wrapper {
    width: 28px;
    height: 28px;
}

.performance-synth-card .transposer-row,
.performance-synth-card .second-live-transpose {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.performance-synth-card .live-tool-btn {
    min-width: 0;
    min-height: 30px;
    height: 30px;
}

@media (max-width: 900px) {
    .performance-deck-header {
        grid-template-columns: minmax(210px, 0.72fr) minmax(0, 1.28fr);
    }

    .performance-scene-launcher {
        grid-column: 1 / -1;
    }

    .performance-main-grid {
        grid-template-columns: 1fr;
    }

    .performance-gesture-grid {
        grid-template-columns: minmax(300px, 1.1fr) minmax(260px, 0.9fr);
    }
}

@media (max-width: 1180px) {
    body.tablet-layout.performance-deck-ui #view-live {
        overflow-y: auto !important;
        touch-action: pan-y;
    }

    body.tablet-layout.performance-view-active .controls .pattern-group {
        order: 10;
        flex: 1 0 100%;
        margin-left: 0;
    }

    .performance-deck {
        overflow: visible;
        flex: 0 0 auto;
        padding: 0 0 8px;
    }

    body.tablet-layout #view-live .performance-track-section .live-mixer-half {
        display: block !important;
        min-height: 0;
        padding: 0;
    }

    body.tablet-layout #view-live .performance-track-section .live-grid {
        display: grid !important;
        grid-template-columns: repeat(9, minmax(72px, 1fr)) !important;
        gap: 5px;
        width: 100%;
        min-width: 100%;
        overflow: visible;
    }

    .performance-track-section {
        overflow-x: hidden;
    }

    body.tablet-layout #view-live .performance-track-section .live-track-col {
        min-width: 0;
        min-height: 144px;
    }

    body.tablet-layout #view-live .performance-track-section .live-track-col h3 {
        font-size: 8px;
        letter-spacing: 0.2px;
    }

    body.tablet-layout #view-live .performance-track-section .live-mute-pad {
        min-height: 44px;
        height: 44px;
    }

    body.tablet-layout #view-live .performance-gesture-grid .master-fx-container {
        flex-direction: column !important;
    }

    body.tablet-layout #view-live .performance-gesture-grid .master-fx-separator {
        display: block;
        width: 1px !important;
        height: 80% !important;
        margin: 0 !important;
    }

    body.tablet-layout #view-live .performance-gesture-grid #smartPad {
        height: 136px !important;
    }
}

@media (max-width: 820px) {
    .performance-deck-header {
        grid-template-columns: 1fr;
    }

    .performance-scene-launcher {
        grid-column: auto;
        grid-template-columns: 1fr;
    }

    .performance-scene-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 2px;
    }

    .performance-scene-heading small {
        margin: 0;
    }

    .performance-scene {
        grid-template-columns: 1fr;
        gap: 1px;
        min-height: 56px;
        text-align: center;
    }

    .performance-section-heading p {
        display: none;
    }

    .performance-gesture-grid,
    .performance-synth-grid {
        grid-template-columns: 1fr;
    }

    .performance-gesture-grid {
        min-height: 0;
    }

    .performance-synth-card .live-tool-btn {
        min-height: 42px;
        height: 42px;
    }
}

@media (max-width: 560px) {
    .performance-title-block p,
    .performance-now small {
        display: none;
    }

    .performance-transport {
        grid-template-columns: 1fr 1fr;
    }

    .performance-scene-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .performance-scene {
        min-height: 60px;
    }

    .performance-quick-fx {
        min-width: 0;
    }

    .performance-gesture-grid .master-fx-container {
        flex-direction: column !important;
    }

    .performance-gesture-grid .master-fx-separator {
        display: none !important;
    }
}