/* Beat Lab — app-specific styles (shared styles in /theme.css) */
html,body{height:100%}

/* === APP === */
.app{
    margin-top:52px;
    display:flex;flex-direction:column;
    align-items:center;
    padding:12px 20px 20px;
    min-height:calc(100vh - 52px);
    position:relative;z-index:1;
}

/* === PATTERN BAR === */
.pattern-bar{
    display:flex;align-items:center;gap:16px;
    width:90vw;max-width:1200px;
    margin-bottom:8px;
    flex-wrap:wrap;
}
.pattern-slots{display:flex;gap:4px}
.pattern-slot{
    width:36px;height:28px;
    border-radius:6px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--dim);
    font-size:13px;font-weight:700;
    cursor:pointer;
    transition:all 0.2s;
}
.pattern-slot:hover{border-color:var(--purple);color:var(--text)}
.pattern-slot.active{
    border-color:var(--cyan);
    color:var(--cyan);
    background:var(--cyan-bg);
    box-shadow:0 0 8px var(--cyan-bg);
}
.pattern-slot.has-data::after{
    content:'';display:block;
    width:4px;height:4px;border-radius:50%;
    background:var(--purple);
    margin:-2px auto 0;
}

.pattern-tools{display:flex;gap:6px}
.tool-btn{
    display:inline-flex;align-items:center;gap:5px;
    padding:5px 10px;border-radius:5px;
    font-size:11px;font-weight:600;
    background:var(--surface);border:1px solid var(--border);
    color:var(--dim);cursor:pointer;
    transition:all 0.2s;
}
.tool-btn:hover:not(:disabled){border-color:var(--purple);color:var(--text)}
.tool-btn:disabled{opacity:0.3;cursor:default}

.resolution-toggle{
    display:flex;align-items:center;gap:6px;
    margin-left:auto;
}
.res-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--dim)}
.res-btn{
    width:32px;height:26px;border-radius:5px;
    border:1px solid var(--border);background:var(--surface);
    color:var(--dim);font-size:11px;font-weight:700;
    cursor:pointer;transition:all 0.2s;
}
.res-btn:hover{border-color:var(--purple);color:var(--text)}
.res-btn.active,.bars-btn.active{
    border-color:var(--cyan);color:var(--cyan);
    background:var(--cyan-bg);
}
.bars-btn{
    width:32px;height:26px;border-radius:5px;
    border:1px solid var(--border);background:var(--surface);
    color:var(--dim);font-size:11px;font-weight:700;
    cursor:pointer;transition:all 0.2s;
}
.bars-btn:hover{border-color:var(--purple);color:var(--text)}

/* === CHAIN BAR === */
.chain-bar{
    display:flex;align-items:center;gap:8px;
    width:90vw;max-width:1200px;
    margin-bottom:8px;
    padding:6px 12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    min-height:34px;
}
.chain-label{
    font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:1px;color:var(--dim);
    flex-shrink:0;
}
.chain-slots{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.chain-slot{
    width:26px;height:22px;border-radius:4px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:11px;font-weight:700;
    cursor:pointer;transition:all 0.15s;
    display:flex;align-items:center;justify-content:center;
}
.chain-slot:hover{border-color:var(--pink);color:var(--text)}
.chain-slot.current{
    border-color:var(--lime);color:var(--lime);
    background:var(--lime-bg);
}
.chain-add-btn{
    width:22px;height:22px;border-radius:4px;
    border:1px dashed var(--border);background:transparent;
    color:var(--dim);font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
}
.chain-add-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.chain-clear-btn{
    width:22px;height:22px;border-radius:4px;
    border:1px solid var(--border);background:transparent;
    color:var(--dim);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
}
.chain-clear-btn:hover{border-color:var(--pink);color:var(--pink)}
.chain-play-btn{
    width:28px;height:22px;border-radius:4px;
    border:1px solid rgba(57,255,20,0.3);
    background:rgba(57,255,20,0.06);
    color:var(--lime);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
}
.chain-play-btn:hover{
    border-color:var(--lime);
    box-shadow:0 0 8px rgba(57,255,20,0.2);
}
.chain-play-btn.playing{
    border-color:var(--lime);
    background:rgba(57,255,20,0.15);
    box-shadow:0 0 12px rgba(57,255,20,0.3);
}
.chain-play-btn.playing .cp-play{display:none}
.chain-play-btn.playing .cp-stop{display:block!important}
.chain-status{
    font-size:10px;color:var(--dim);margin-left:auto;
    font-variant-numeric:tabular-nums;
}

/* === SEQUENCER === */
.sequencer{
    display:flex;
    width:100%;
    height:50vh;min-height:280px;
}

/* === MIXER (left side) === */
.mixer{
    flex:0 0 100px;
    display:flex;flex-direction:column;
    gap:2px;
    padding-right:6px;
}
.mixer-row{
    flex:1;
    display:flex;align-items:center;
    gap:4px;
    min-height:0;
    position:relative;
}
.drum-label{
    flex:1;
    display:flex;align-items:center;
    font-size:10px;font-weight:600;
    color:var(--dim);
    white-space:nowrap;
    user-select:none;
    min-width:0;
}
.drum-label .drum-dot{
    width:7px;height:7px;
    border-radius:50%;margin-right:5px;
    flex-shrink:0;
}
.drum-menu-btn{
    width:20px;height:18px;border-radius:3px;
    border:1px solid transparent;background:transparent;
    color:var(--dim);cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;
    flex-shrink:0;padding:0;
}
.drum-menu-btn:hover{border-color:var(--border);color:var(--text)}
.drum-menu-btn.open{border-color:var(--cyan);color:var(--cyan)}
.drum-menu-btn.has-change{color:var(--cyan)}

/* Drum dropdown popover */
.drum-popover{
    position:absolute;
    right:100%;top:50%;
    transform:translateY(-50%);
    z-index:50;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:10px;
    padding:10px 12px;
    min-width:170px;
    box-shadow:0 8px 32px rgba(0,0,0,0.5);
    display:flex;flex-direction:column;gap:8px;
    margin-right:4px;
}
.drum-popover::before{
    content:'';position:absolute;
    right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);
    width:8px;height:8px;
    background:var(--surface);
    border-right:1px solid var(--border);
    border-top:1px solid var(--border);
}
.pop-header{
    font-size:11px;font-weight:700;
    color:var(--text);
    padding-bottom:4px;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:6px;
}
.pop-header .drum-dot{
    width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.pop-row{
    display:flex;align-items:center;gap:8px;
}
.pop-row label{
    font-size:9px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.5px;
    color:var(--dim);width:32px;flex-shrink:0;
}
.drum-vol{
    flex:1;height:4px;
    -webkit-appearance:none;appearance:none;
    background:var(--border);border-radius:2px;
    outline:none;cursor:pointer;
}
.drum-vol::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:12px;height:12px;border-radius:50%;
    background:var(--text);border:none;cursor:pointer;
}
.drum-vol::-moz-range-thumb{
    width:12px;height:12px;border-radius:50%;
    background:var(--text);border:none;cursor:pointer;
}
.pop-vol-val{
    font-size:9px;font-weight:600;color:var(--cyan);
    width:28px;text-align:right;
    font-variant-numeric:tabular-nums;
}
.ms-btns{display:flex;gap:3px}
.ms-btn{
    width:28px;height:20px;border-radius:4px;
    border:1px solid var(--border);background:transparent;
    color:var(--dim);font-size:9px;font-weight:800;
    cursor:pointer;transition:all 0.15s;
    display:flex;align-items:center;justify-content:center;
    padding:0;
}
.ms-btn:hover{border-color:var(--text);color:var(--text)}
.ms-btn.muted{border-color:var(--pink);color:var(--pink);background:var(--pink-bg)}
.ms-btn.soloed{border-color:var(--lime);color:var(--lime);background:var(--lime-bg)}
.pop-clear-btn{
    width:100%;padding:4px 0;border-radius:4px;
    border:1px solid var(--border);background:transparent;
    color:var(--dim);font-size:9px;font-weight:700;
    cursor:pointer;transition:all 0.15s;
    text-transform:uppercase;letter-spacing:0.5px;
}
.pop-clear-btn:hover{border-color:var(--pink);color:var(--pink)}

/* === STEPS GRID === */
.steps{
    flex:1;
    display:flex;
    gap:2px;
    overflow-x:auto;
    scroll-behavior:auto;
}
.step{
    flex:1 0 24px;
    display:flex;flex-direction:column;
    gap:2px;
    position:relative;
}
.step.beat-start::before{
    content:'';
    position:absolute;top:-4px;left:50%;
    width:4px;height:4px;
    border-radius:50%;
    background:var(--dim);
    transform:translateX(-50%);
    opacity:0.4;
}
.step.current::after{
    content:'';
    position:absolute;inset:-2px -1px;
    border:1px solid var(--cyan);
    border-radius:4px;
    box-shadow:0 0 12px rgba(0,229,255,0.3);
    pointer-events:none;
    z-index:2;
}

/* Chunk boundaries */
.step.chunk-start{
    border-left:1px solid var(--purple-bg);
}

/* === CELLS === */
.cell{
    flex:1;
    background:var(--cell-bg);
    border:1px solid var(--cell-border);
    border-radius:3px;
    cursor:pointer;
    transition:background-color 0.15s;
    min-height:0;
    position:relative;
}
.cell:hover{
    background:var(--cell-hover);
}
body.dragging .cell{
    cursor:crosshair;
}
body.dragging{
    user-select:none;
    -webkit-user-select:none;
}
.cell.on.playing{
    box-shadow:0 0 10px currentColor;
}

/* Note position classes for visual merging */
/* note-start: first cell of multi-cell note — bridge gap to the right */
.cell.on.note-start{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-right:none;
    z-index:3;
}
.cell.on.note-start::after{
    content:'';position:absolute;
    right:-3px;top:0;bottom:0;width:3px;
    background:inherit;
}
/* note-mid: middle of note — bridge both sides */
.cell.on.note-mid{
    border-radius:0;
    border-left:none;
    border-right:none;
    z-index:3;
}
.cell.on.note-mid::after{
    content:'';position:absolute;
    right:-3px;top:0;bottom:0;width:3px;
    background:inherit;
}
.cell.on.note-mid::before{
    content:'';position:absolute;
    left:-3px;top:0;bottom:0;width:3px;
    background:inherit;
    z-index:3;
}
/* note-end: last cell of note — bridge gap from the left */
.cell.on.note-end{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left:none;
    z-index:3;
}
.cell.on.note-end::before{
    content:'';position:absolute;
    left:-3px;top:0;bottom:0;width:3px;
    background:inherit;
    z-index:3;
}
/* note-single: standalone note — normal appearance */

/* Drum colors — all on cells same brightness */
.cell[data-drum="0"].on{background:#e91e63;color:#e91e63}
.cell[data-drum="1"].on{background:#ff9800;color:#ff9800}
.cell[data-drum="2"].on{background:#00e5ff;color:#00e5ff}
.cell[data-drum="3"].on{background:#26c6da;color:#26c6da}
.cell[data-drum="4"].on{background:#a855f7;color:#a855f7}
.cell[data-drum="5"].on{background:#ef5350;color:#ef5350}
.cell[data-drum="6"].on{background:#ff7043;color:#ff7043}
.cell[data-drum="7"].on{background:#ffca28;color:#ffca28}
.cell[data-drum="8"].on{background:#66bb6a;color:#66bb6a}

/* === GENRE BAR === */
.genre-bar{
    display:flex;align-items:center;gap:6px;
    flex-wrap:wrap;justify-content:center;
    width:90vw;max-width:1200px;
    margin-bottom:8px;
}
.genre-btn{
    padding:5px 14px;border-radius:20px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--dim);
    font-size:11px;font-weight:700;
    cursor:pointer;
    transition:all 0.2s;
    white-space:nowrap;
}
.genre-btn:hover{
    border-color:var(--purple);
    color:var(--text);
    background:var(--purple-bg);
}
.genre-btn:active{
    transform:scale(0.95);
}
.genre-btn.flash{
    border-color:var(--cyan);
    color:var(--cyan);
    background:var(--cyan-bg);
    box-shadow:0 0 12px rgba(0,229,255,0.2);
}

/* === GENERATE BUTTON === */
.generate-btn{
    width:50px;height:50px;
    border-radius:50%;
    border:2px solid var(--pink);
    background:var(--pink-bg);
    color:var(--pink);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    margin-bottom:10px;
    transition:all 0.25s;
    position:relative;
    animation:pulse-glow 2s ease-in-out infinite;
}
@keyframes pulse-glow{
    0%,100%{box-shadow:0 0 10px rgba(255,45,149,0.2)}
    50%{box-shadow:0 0 25px rgba(255,45,149,0.4)}
}
.generate-btn:hover{
    background:rgba(255,45,149,0.2);
    transform:scale(1.1);
    box-shadow:0 0 30px rgba(255,45,149,0.4);
}
.generate-btn:active{
    transform:scale(0.95);
}
.generate-btn.spinning svg{
    animation:spin 0.5s ease-out;
}
@keyframes spin{
    from{transform:rotate(0)}
    to{transform:rotate(360deg)}
}

/* === FX BAR === */
.fx-bar{
    display:flex;align-items:center;gap:12px;
    width:90vw;max-width:1200px;
    padding:8px 16px;margin-bottom:4px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:var(--radius);
}
.fx-group{display:flex;align-items:center;gap:8px}
.fx-toggle{
    padding:4px 12px;border-radius:6px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:11px;font-weight:700;
    cursor:pointer;transition:all 0.2s;text-transform:uppercase;
    letter-spacing:0.5px;
}
.fx-toggle:hover{border-color:var(--border-hover);color:var(--text)}
.fx-toggle.active{
    background:var(--cyan-bg);border-color:var(--cyan);color:var(--cyan);
}
.fx-params{
    display:none;align-items:center;gap:8px;
}
.fx-toggle.active~.fx-params{display:flex}
.fx-params label{
    display:flex;align-items:center;gap:4px;
    font-size:10px;color:var(--dim);white-space:nowrap;
}
.fx-params input[type="range"]{
    width:60px;height:3px;accent-color:var(--cyan);
}
.fx-params span{font-size:10px;color:var(--text);min-width:28px}
.fx-undo{margin-left:auto;display:flex;gap:4px}
.undo-btn{
    padding:4px 8px;border-radius:6px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);cursor:pointer;transition:all 0.2s;
    display:flex;align-items:center;
}
.undo-btn:hover:not(:disabled){border-color:var(--border-hover);color:var(--text)}
.undo-btn:disabled{opacity:0.3;cursor:default}

/* === CONTROLS === */
.controls{
    display:flex;
    align-items:center;
    gap:16px;
    width:90vw;max-width:1200px;
    padding:12px 16px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    flex-wrap:wrap;
    justify-content:center;
}
.control{display:flex;align-items:center;gap:8px}
.slider-control{
    flex-direction:column;
    align-items:stretch;
    min-width:100px;
    gap:2px;
}
.slider-control label{
    font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:1px;
    color:var(--dim);
    text-align:center;
}
.slider-val{
    font-size:10px;font-weight:600;
    color:var(--cyan);text-align:center;
    font-variant-numeric:tabular-nums;
}

/* === PLAY BUTTON === */
.play-btn{
    width:48px;height:48px;
    border-radius:50%;
    border:2px solid rgba(0,229,255,0.4);
    background:rgba(0,229,255,0.1);
    color:var(--cyan);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s;
}
.play-btn:hover{
    border-color:var(--cyan);
    box-shadow:0 0 20px rgba(0,229,255,0.3);
}
.play-btn.playing{
    border-color:var(--lime);
    background:rgba(57,255,20,0.1);
    color:var(--lime);
    box-shadow:0 0 20px rgba(57,255,20,0.3);
}

/* === EXPORT BUTTON === */
.export-btn{
    width:42px;height:42px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface2);
    color:var(--dim);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.2s;
}
.export-btn:hover{
    border-color:var(--purple);color:var(--text);
    box-shadow:0 0 10px rgba(168,85,247,0.2);
}
.export-btn.recording{
    border-color:var(--pink);color:var(--pink);
    animation:rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse{
    0%,100%{box-shadow:0 0 5px rgba(239,83,80,0.3)}
    50%{box-shadow:0 0 15px rgba(239,83,80,0.6)}
}

.studio-send-btn{border-color:var(--cyan)!important;color:var(--cyan)!important}
.studio-send-btn:hover{background:var(--cyan)!important;color:#fff!important;box-shadow:0 0 10px rgba(8,145,178,0.3)!important}

/* === RANGE SLIDERS === */
input[type="range"]{
    -webkit-appearance:none;appearance:none;
    width:100%;height:4px;
    background:var(--border);
    border-radius:2px;outline:none;
    cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;appearance:none;
    width:14px;height:14px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    border:2px solid var(--surface);
    box-shadow:0 0 6px rgba(0,229,255,0.3);
    cursor:pointer;
}
input[type="range"]::-moz-range-thumb{
    width:14px;height:14px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    border:2px solid var(--surface);
    box-shadow:0 0 6px rgba(0,229,255,0.3);
    cursor:pointer;
}

/* === MODAL === */
.modal-overlay{
    position:fixed;inset:0;z-index:200;
    background:var(--modal-overlay);
    backdrop-filter:blur(4px);
    display:flex;align-items:center;justify-content:center;
}
.modal{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:24px;
    width:380px;max-width:90vw;
}
.modal h3{
    font-size:16px;font-weight:700;
    margin-bottom:16px;
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.modal-body{display:flex;flex-direction:column;gap:14px}
.export-option{
    display:flex;align-items:center;justify-content:space-between;
    gap:12px;
}
.export-option label{
    font-size:12px;font-weight:600;color:var(--dim);
    flex-shrink:0;
}
.export-mode-btns,.loop-btns{display:flex;gap:4px}
.mode-btn,.loop-btn{
    padding:5px 12px;border-radius:6px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:11px;font-weight:600;
    cursor:pointer;transition:all 0.15s;
}
.mode-btn:hover,.loop-btn:hover{border-color:var(--purple);color:var(--text)}
.mode-btn.active,.loop-btn.active{
    border-color:var(--cyan);color:var(--cyan);
    background:var(--cyan-bg);
}
.record-hint{
    font-size:11px;color:var(--dim);line-height:1.5;
}
.record-hint strong{color:var(--text)}

.export-format-select{
    background:var(--surface2);border:1px solid var(--border);
    color:var(--text);font-size:12px;font-weight:600;
    padding:5px 10px;border-radius:6px;cursor:pointer;font-family:inherit;
}
.export-format-select:hover{border-color:var(--cyan)}

/* Toggle switch */
.toggle-switch{position:relative;width:36px;height:20px;cursor:pointer}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
    position:absolute;inset:0;
    background:var(--border);border-radius:10px;
    transition:0.2s;
}
.toggle-slider::before{
    content:'';position:absolute;
    left:2px;bottom:2px;
    width:16px;height:16px;border-radius:50%;
    background:var(--dim);
    transition:0.2s;
}
.toggle-switch input:checked + .toggle-slider{background:rgba(0,229,255,0.3)}
.toggle-switch input:checked + .toggle-slider::before{
    transform:translateX(16px);
    background:var(--cyan);
}

.modal-actions{
    display:flex;gap:8px;
    margin-top:20px;
    justify-content:flex-end;
}
.modal-btn{
    padding:8px 20px;border-radius:8px;
    font-size:12px;font-weight:600;
    cursor:pointer;transition:all 0.2s;
    display:inline-flex;align-items:center;gap:6px;
}
.modal-btn.secondary{
    background:transparent;border:1px solid var(--border);
    color:var(--dim);
}
.modal-btn.secondary:hover{border-color:var(--text);color:var(--text)}
.modal-btn.primary{
    background:linear-gradient(135deg,var(--cyan),var(--purple));
    border:none;color:#fff;
}
.modal-btn.primary:hover{
    box-shadow:0 0 20px rgba(0,229,255,0.3);
    transform:translateY(-1px);
}

/* === INFO === */
.info{
    max-width:600px;
    margin:16px auto;
    text-align:center;
    color:var(--dim);font-size:12px;line-height:1.6;
}
.info strong{color:var(--text)}

/* === DRUM SECTION === */
.drum-section{
    width:90vw;max-width:1200px;
    margin-bottom:10px;
}
.drum-header{
    display:flex;align-items:center;gap:10px;
    padding:6px 12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    min-height:34px;
    margin-bottom:4px;
}
.drum-header-controls{
    display:flex;align-items:center;gap:10px;
    margin-left:auto;
}
.drum-gen-label{
    font-size:10px;font-weight:700;text-transform:uppercase;
    letter-spacing:1px;color:var(--dim);
    flex-shrink:0;
}

/* === PIANO ROLL === */
.piano-section{
    width:90vw;max-width:1200px;
    margin-bottom:10px;
}
.piano-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:6px 12px;
    background:var(--surface);border:1px solid var(--border);
    border-radius:8px;min-height:34px;gap:12px;
}
.piano-toggle{
    display:flex;align-items:center;gap:6px;
    background:none;border:none;color:var(--dim);
    font-size:11px;font-weight:700;text-transform:uppercase;
    letter-spacing:1px;cursor:pointer;padding:0;
    transition:color 0.2s;
}
.piano-toggle:hover{color:var(--text)}
.piano-toggle .chevron{transition:transform 0.2s}
.piano-toggle.open .chevron{transform:rotate(180deg)}
.piano-toggle.open{color:var(--cyan)}
.piano-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.layer-btns{display:flex;gap:3px}
.layer-btn{
    width:24px;height:22px;border-radius:5px;
    border:2px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:10px;font-weight:800;
    cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;padding:0;
}
.layer-btn:hover{filter:brightness(1.2)}
.layer-btn.active{background:rgba(255,255,255,0.08)}
.layer-btn.muted-indicator{opacity:0.4}
.layer-add-btn{
    width:22px;height:22px;border-radius:5px;
    border:1px dashed var(--border);background:transparent;
    color:var(--dim);font-size:14px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;padding:0;
}
.layer-add-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.ctrl-sep{width:1px;height:16px;background:var(--border);flex-shrink:0}
.layer-del-btn{
    width:22px;height:22px;border-radius:5px;
    border:1px solid var(--border);background:transparent;
    color:var(--dim);font-size:10px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;padding:0;
}
.layer-del-btn:hover{border-color:var(--pink);color:var(--pink)}
.oct-control{display:flex;align-items:center;gap:4px}
.oct-btn{
    width:22px;height:22px;border-radius:4px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:8px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all 0.15s;padding:0;
}
.oct-btn:hover{border-color:var(--cyan);color:var(--cyan)}
.oct-display{
    font-size:11px;font-weight:700;color:var(--text);
    min-width:24px;text-align:center;
    font-variant-numeric:tabular-nums;
}
.wave-select{
    padding:3px 8px;border-radius:5px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:11px;font-weight:600;
    cursor:pointer;outline:none;
}
.wave-select:hover{border-color:var(--purple);color:var(--text)}
.piano-vol-control{display:flex;align-items:center;gap:6px}
.piano-vol-control label{
    font-size:9px;font-weight:700;text-transform:uppercase;
    letter-spacing:0.5px;color:var(--dim);
}
.piano-vol-control input[type="range"]{width:60px;height:3px}
.piano-grid{
    display:flex;height:220px;margin-top:4px;
}
.piano-labels{
    flex:0 0 100px;display:flex;flex-direction:column;
    gap:1px;padding-right:6px;
}
.piano-label-row{
    flex:1;display:flex;align-items:center;
    font-size:9px;font-weight:600;color:var(--dim);
    padding-left:8px;min-height:0;user-select:none;
    border-radius:2px;
}
.piano-label-row.black-key{background:rgba(100,100,100,0.08)}
.piano-steps{flex:1;display:flex;gap:2px;overflow-x:auto}
.pcell{
    flex:1;
    background:var(--cell-bg);
    border:1px solid var(--cell-border);
    border-radius:3px;cursor:pointer;
    transition:background-color 0.15s;
    min-height:0;position:relative;
}
.pcell:hover{background:var(--cell-hover)}
.pcell.black-key{background:rgba(100,100,100,0.1);border-color:rgba(100,100,100,0.15)}
body.dragging .pcell{cursor:crosshair}
.pcell.on{background:var(--layer-color,#7c4dff);color:var(--layer-color,#7c4dff)}
.pcell.on.playing{box-shadow:0 0 10px currentColor}
.pcell.on.note-start{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;z-index:3}
.pcell.on.note-start::after{content:'';position:absolute;right:-3px;top:0;bottom:0;width:3px;background:inherit}
.pcell.on.note-mid{border-radius:0;border-left:none;border-right:none;z-index:3}
.pcell.on.note-mid::after{content:'';position:absolute;right:-3px;top:0;bottom:0;width:3px;background:inherit}
.pcell.on.note-mid::before{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:inherit;z-index:3}
.pcell.on.note-end{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none;z-index:3}
.pcell.on.note-end::before{content:'';position:absolute;left:-3px;top:0;bottom:0;width:3px;background:inherit;z-index:3}
.layer-ind{
    position:absolute;bottom:1px;right:1px;
    width:4px;height:4px;border-radius:50%;
    opacity:0.7;pointer-events:none;
}

/* Piano roll density slider */
.piano-density-control{
    display:flex;align-items:center;gap:5px;
}
.piano-density-control label{
    font-size:10px;font-weight:600;color:var(--dim);
    text-transform:uppercase;letter-spacing:0.3px;white-space:nowrap;
}
.piano-density-control input[type="range"]{width:60px}
.piano-density-control .slider-val{
    font-size:10px;font-weight:600;color:var(--lime);
    min-width:28px;text-align:right;
}

/* Piano roll generate button */
.piano-gen-btn{
    display:flex;align-items:center;justify-content:center;gap:4px;
    padding:3px 10px;height:24px;border-radius:5px;
    border:1px solid rgba(57,255,20,0.4);background:rgba(57,255,20,0.1);
    color:var(--lime);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.5px;
    cursor:pointer;transition:all 0.15s;white-space:nowrap;
}
.piano-gen-btn:hover{
    border-color:var(--lime);background:rgba(57,255,20,0.18);
    box-shadow:0 0 10px rgba(57,255,20,0.25);
}
.piano-gen-btn.spinning svg{animation:spin 0.5s ease;}

/* Split button */
.split-btn{
    padding:3px 10px;border-radius:5px;
    border:1px solid var(--border);background:var(--surface2);
    color:var(--dim);font-size:10px;font-weight:700;
    text-transform:uppercase;letter-spacing:0.5px;
    cursor:pointer;transition:all 0.15s;
}
.split-btn:hover{border-color:var(--purple);color:var(--text)}
.split-btn.active{
    border-color:var(--cyan);color:var(--cyan);
    background:var(--cyan-bg);
}

/* Split piano roll panel */
.piano-split{
    margin-top:4px;
    border-top:1px solid var(--border);
    padding-top:4px;
}
.split-header{
    display:flex;align-items:center;gap:8px;
    padding:4px 0 4px 100px;
}
.split-layer-btns{display:flex;gap:3px}
.split-info{
    font-size:9px;font-weight:600;color:var(--dim);
    margin-left:8px;
}
#piano-grid-b{height:180px}
#piano-grid-b .piano-steps{--layer-color:#00e5ff}

/* === BASS SECTION === */
.bass-grid{
    display:flex;height:52px;margin-top:4px;
}
.bass-spacer{
    flex:0 0 100px;
    padding-right:6px;
}
.bass-steps{
    flex:1;display:flex;gap:2px;overflow-x:auto;
    scroll-behavior:auto;
}
.bcell{
    flex:1 0 24px;
    height:44px;
    background:var(--cell-bg);
    border:1px solid var(--cell-border);
    border-radius:3px;
    cursor:pointer;
    transition:background-color 0.15s;
    position:relative;
    display:flex;align-items:center;justify-content:center;
    font-size:9px;font-weight:700;
    color:transparent;
    user-select:none;
}
.bcell:hover{background:var(--cell-hover)}
.bcell.beat-start-marker{border-left:1px solid var(--purple-bg)}
.bcell.on{
    color:rgba(255,255,255,0.9);
}
.bcell.on.note-start{
    border-top-right-radius:0;
    border-bottom-right-radius:0;
    border-right:none;
    z-index:3;
}
.bcell.on.note-start::after{
    content:'';position:absolute;
    right:-3px;top:0;bottom:0;width:3px;
    background:inherit;
}
.bcell.on.sustain{
    border-radius:0;
    border-left:none;
    border-right:none;
    z-index:3;
    color:rgba(255,255,255,0.35);
}
.bcell.on.sustain::after{
    content:'';position:absolute;
    right:-3px;top:0;bottom:0;width:3px;
    background:inherit;
}
.bcell.on.sustain::before{
    content:'';position:absolute;
    left:-3px;top:0;bottom:0;width:3px;
    background:inherit;
    z-index:3;
}
.bcell.on.sustain-end{
    border-top-left-radius:0;
    border-bottom-left-radius:0;
    border-left:none;
    z-index:3;
    color:rgba(255,255,255,0.35);
}
.bcell.on.sustain-end::before{
    content:'';position:absolute;
    left:-3px;top:0;bottom:0;width:3px;
    background:inherit;
    z-index:3;
}
.bcell.on.note-single{z-index:3}
.bcell.on.playing{box-shadow:0 0 10px currentColor}
.bcell.current-step{
    outline:1px solid var(--cyan);
    outline-offset:-1px;
    box-shadow:0 0 8px rgba(0,229,255,0.25);
    z-index:4;
}

/* === RESPONSIVE === */
/* === BASS PITCH LABEL === */
.bcell .bass-note-label{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-size:9px;font-weight:700;color:var(--text);
    pointer-events:none;opacity:0.8;text-shadow:0 1px 2px rgba(0,0,0,0.3);
}

@media(max-width:700px){
    .sequencer{width:96vw;height:42vh}
    .mixer{flex:0 0 80px}
    .drum-label{font-size:8px}
    .fx-bar{gap:6px;padding:6px 10px;flex-wrap:wrap}
    .fx-params input[type="range"]{width:40px}
    .controls{gap:8px;padding:10px}
    .slider-control{min-width:70px}
    .pattern-bar{gap:8px}
    .pattern-tools{gap:3px}
    .tool-btn{font-size:10px;padding:4px 6px}
    .tool-btn svg{display:none}
    .drum-popover{min-width:150px;padding:8px 10px}
}