body {
        background-color: #121214; color: #ffffff;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0; padding: 8px; box-sizing: border-box;
        display: flex; align-items: center; justify-content: center;
        height: 100vh; overflow: hidden; user-select: none; touch-action: none;
    }
    
    .groovebox {
        background: #1e1e24; padding: 10px; border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.5);
        width: 100vw; max-width: 1700px; height: 100%;
        display: flex; flex-direction: column; gap: 8px; box-sizing: border-box;
    }
    
    /* --- HEADER --- */
    .controls { 
        display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
        background: #2a2a35; padding: 6px 12px; border-radius: 6px; min-height: 46px; box-sizing: border-box; gap: 10px;
    }
    
    .app-logo { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 2px; color: #ffffff; display: flex; align-items: center; gap: 6px; }
    .right-controls { display: flex; gap: 6px; align-items: center; }
    
    .btn-help { background: #1a1a22; color: #fff; border: 1px solid #555; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-weight: bold; font-size: 12px; transition: 0.2s; }
    .btn-help:hover { background: #00b0ff; color: #121214; border-color: #00b0ff; }
    .btn-update { color: #00e676; border-color: #236a43; background: #111b16; }
    .btn-update:hover { background: #00e676; color: #121214; border-color: #00e676; }
    .btn-update.checking { color: #ff9100; border-color: #ff9100; background: #241a0f; }
    .btn-update.ready { color: #121214; border-color: #00e676; background: #00e676; box-shadow: 0 0 10px rgba(0, 230, 118, 0.35); }
    .btn-update.updating { color: #121214; border-color: #00b0ff; background: #00b0ff; }
    .btn-update.error { color: #ff8a80; border-color: #7a343c; background: #251418; }
    .btn-panic { color: #ff8a80; border-color: #7a343c; background: #251418; }
    .btn-panic:hover, .btn-panic:active { background: #ff1744; color: #fff; border-color: #ff1744; box-shadow: 0 0 10px rgba(255, 23, 68, 0.35); }
    .btn-coffee { background: #FF813F; color: #121214; border: none; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-weight: 900; font-size: 11px; text-transform: uppercase; text-decoration: none; transition: 0.2s; display: flex; align-items: center; gap: 4px; letter-spacing: 0.5px; }
    .btn-coffee:hover { background: #ff9b66; box-shadow: 0 0 8px rgba(255, 129, 63, 0.6); transform: scale(1.02); }

    .btn-play { background: #00e676; border: none; padding: 4px 18px; font-size: 12px; font-weight: bold; border-radius: 4px; cursor: pointer; color: #121214; height: 28px;}
    .btn-play.playing { background: #ff1744; color: white; }

    .bpm-container { display: flex; align-items: center; gap: 6px; font-size: 12px; }
    .bpm-display { font-weight: bold; font-family: monospace; font-size: 14px; color: #00e676; }

    .top-group { display: flex; align-items: center; gap: 6px; background: #151518; padding: 2px 8px; border-radius: 6px; border: 1px solid #444; font-size: 11px; font-weight: bold; color: #aaa; height: 28px; }
    .top-group select { background: #1a1a22; color: #fff; border: 1px solid #555; padding: 2px 4px; border-radius: 4px; font-weight: bold; font-size: 11px; outline: none; cursor: pointer; }
    .top-group label { color: #888; font-size: 10px; margin-left: 2px; }
    .top-group .group-title { font-weight: 900; letter-spacing: 1px; margin-right: 4px; }
    .top-group .title-drums { color: #00b0ff; } .top-group .title-synth { color: #e040fb; } .top-group .title-pattern { color: #00e676; }
    .pattern-group { gap: 4px; }
    .pattern-group select { width: 42px; color: #00e676; }
    .pattern-subtitle { color: #777; font-size: 8px; font-weight: 900; letter-spacing: 0.4px; }
    .btn-pattern {
        background: #202027; color: #cfcfd8; border: 1px solid #4c4c58; border-radius: 4px;
        height: 22px; padding: 0 6px; font-size: 9px; font-weight: 900; cursor: pointer;
        text-transform: uppercase; letter-spacing: 0.3px; transition: 0.15s ease;
    }
    .btn-pattern:hover { background: #00e676; color: #121214; border-color: #00e676; }
    .btn-pattern.variation-active { background: #e040fb; color: #121214; border-color: #e040fb; box-shadow: 0 0 8px rgba(224, 64, 251, 0.45); }
    .btn-pattern.variation-pending { background: #ff9100; color: #121214; border-color: #ff9100; animation: pendingPulse 0.8s infinite alternate; }
    .btn-pattern.pending {
        background: #ff9100; color: #121214; border-color: #ff9100;
        animation: pendingPulse 0.8s infinite alternate;
    }
    .btn-pattern.confirm { background: #ff1744; color: #fff; border-color: #ff1744; }
    .btn-pattern.danger:hover { background: #ff1744; color: #fff; border-color: #ff1744; }
    .pattern-group.pending { border-color: #ff9100; box-shadow: 0 0 8px rgba(255, 145, 0, 0.35); }
    .pattern-status { display: flex; gap: 3px; align-items: center; }
    .status-chip {
        height: 18px; min-width: 42px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid #3d3d47; border-radius: 4px; background: #111116; color: #aaa; font-size: 8px; font-weight: 900;
    }
    .status-chip.playing { color: #00b0ff; border-color: #00b0ff; }
    .status-chip.prep { color: #00e676; border-color: #00e676; }
    .status-chip.next { color: #ff9100; border-color: #ff9100; }
    .status-chip.autosave { color: #9e9eaa; border-color: #3d3d47; }
    .status-chip.autosave.saved { color: #00e676; border-color: #00e676; }
    .status-chip.autosave.pending { color: #ff9100; border-color: #ff9100; }
    .status-chip.autosave.error { color: #ff1744; border-color: #ff1744; }
    .status-chip.app-version { min-width: 58px; color: #00e676; border-color: #236a43; }
    .status-chip.app-version.pending { color: #ff9100; border-color: #ff9100; }
    .status-chip.app-version.ready { color: #121214; border-color: #00e676; background: #00e676; }
    .status-chip.app-version.error { color: #ff1744; border-color: #ff1744; }
    .pattern-launch-row { display: flex; gap: 2px; align-items: center; }
    .btn-pattern.slot-launch { min-width: 22px; padding: 0 5px; }
    .btn-pattern.slot-launch.has-pattern { color: #00e676; border-color: #00e676; }
    .btn-pattern.slot-launch.playing-slot { background: #00b0ff; color: #121214; border-color: #00b0ff; }
    .btn-pattern.slot-launch.prep-slot { box-shadow: inset 0 -2px 0 #00e676; }
    .btn-pattern.slot-launch.queued-slot {
        background: #ff9100; color: #121214; border-color: #ff9100;
        animation: pendingPulse 0.8s infinite alternate;
    }
    .pattern-tools { position: relative; height: 22px; }
    .pattern-tools summary { list-style: none; display: inline-flex; align-items: center; }
    .pattern-tools summary::-webkit-details-marker { display: none; }
    .pattern-tools-panel {
        position: absolute; top: 25px; right: 0; display: none; gap: 4px; padding: 5px;
        background: #151518; border: 1px solid #4c4c58; border-radius: 6px; z-index: 20;
        box-shadow: 0 8px 18px rgba(0,0,0,0.45);
    }
    .pattern-tools[open] .pattern-tools-panel { display: flex; }
    .pattern-tools[open] summary { background: #00e676; color: #121214; border-color: #00e676; }
    .app-update-notice {
        min-height: 30px; padding: 4px 10px; box-sizing: border-box;
        border: 1px solid #236a43; border-radius: 6px; background: #111b16;
        display: flex; align-items: center; justify-content: center; gap: 8px;
        color: #d8ffe9; font-size: 11px; font-weight: 900; letter-spacing: 0.4px;
    }
    .app-update-notice[hidden] { display: none; }
    .app-update-label { color: #00e676; }
    .btn-update-apply { background: #00e676; color: #121214; border-color: #00e676; }
    .btn-update-dismiss { color: #aaa; }
    @keyframes pendingPulse { from { filter: brightness(0.8); } to { filter: brightness(1.25); } }
    .master-slider { width: 60px; } 

    #bpmSlider { width: 90px; } #bpmSlider::-webkit-slider-thumb { background: #00e676; width: 16px; } 
    #swingSlider { width: 70px; } #swingSlider::-webkit-slider-thumb { background: #ff9100; width: 16px; } 
    #masterDrumVol::-webkit-slider-thumb { background: #00b0ff; width: 14px; } #masterBassVol::-webkit-slider-thumb { background: #e040fb; width: 14px; }

    /* --- STYLES DES INPUTS ÉDITABLES (BPM & SWING) --- */
    .editable-display {
        background: transparent;
        border: 1px solid transparent;
        color: inherit;
        font-family: monospace;
        font-size: 14px;
        font-weight: bold;
        width: 32px;
        text-align: center;
        outline: none;
        padding: 0;
        margin: 0;
        -moz-appearance: textfield; /* Masquer les flèches sur Firefox */
        cursor: text;
    }

    .editable-display:focus {
        border-bottom: 1px solid rgba(255, 255, 255, 0.5); /* Indicateur visuel au focus */
    }

    /* Masquer les flèches natives sur Chrome/Safari/Edge */
    .editable-display::-webkit-outer-spin-button,
    .editable-display::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    /* --- CONTENEUR DES VUES --- */
    .views-wrapper { flex-grow: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; gap: 8px; min-height: 0;}
    .view { display: none; height: 100%; width: 100%; flex-direction: column; gap: 8px; overflow-y: hidden; overflow-x: hidden; min-height: 0;}
    .view.active { display: flex; }
    #view-seq { overflow-y: auto; }

    /* --- VUE 1 : SEQUENCEUR --- */
    .workspace-grid { display: grid; grid-template-columns: 1fr; gap: 8px; flex-grow: 1; min-height: 0; }
    @media (min-width: 1024px) { .workspace-grid { grid-template-columns: 1fr 1fr; } }
    
    .panel { background: #151518; padding: 6px; border-radius: 8px; border: 1px solid #2a2a35; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; }
    
    .panel-header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #2a2a35; padding-bottom: 6px; margin-bottom: 8px; }
    .header-left { display: flex; align-items: center; gap: 8px; }
    .header-left h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; margin: 0; color: #00b0ff; }
    .bass-panel .header-left h2 { color: #e040fb; }

    .btn-clear-all { background: transparent; border: 1px solid #444; color: #888; padding: 3px 8px; border-radius: 4px; font-size: 9px; font-weight: bold; cursor: pointer; transition: 0.1s ease; letter-spacing: 0.5px; }
    .btn-clear-all:hover, .btn-clear-all:active { background: #ff1744; color: #fff; border-color: #ff1744; }
    
    .drum-tools-row, .bass-tools-row { display: flex; gap: 4px; background: #121214; padding: 3px; border-radius: 4px; border: 1px solid #2a2a35; }
    .tool-btn, .tool-btn-drum { background: #2a2a35; color: #aaa; border: 1px solid transparent; border-radius: 3px; font-size: 10px; font-weight: bold; cursor: pointer; padding: 4px 10px; transition: 0.1s; }
    
    .tool-btn.active[data-tool="normal"] { background: #e040fb; color: #fff; } .tool-btn.active[data-tool="accent"] { background: #ff1744; color: #fff; } .tool-btn.active[data-tool="slide"] { background: #00e5ff; color: #121214; } .tool-btn.active[data-tool="both"] { background: #ffea00; color: #121214; }
    .tool-btn-drum.active[data-tool="normal"] { background: #00b0ff; color: #121214; } .tool-btn-drum.active[data-tool="accent"] { background: #ff1744; color: #fff; } .tool-btn-drum.active[data-tool="half"] { background: #0077b3; color: #fff; } .tool-btn-drum.active[data-tool="quarter"] { background: #004d73; color: #fff; }

    .shift-btn { background: #3a3a44; color: #aaa; border: 1px solid #555; border-radius: 3px; font-size: 11px; font-weight: bold; cursor: pointer; padding: 4px 8px; }
    .shift-btn.flash-active, .shift-btn:active { background: #e040fb !important; color: #121214 !important; }

    .tracks-container { display: flex; flex-direction: column; gap: 3px; flex-grow: 1; justify-content: space-between; min-height: 0; }
    .track-row { display: flex; align-items: center; gap: 6px; flex-grow: 1; position: relative; min-height: 0; }
    
    .drum-panel .track-controls { display: flex; align-items: center; justify-content: space-between; width: 110px; flex-shrink: 0; background: #2a2a35; padding: 3px 6px; border-radius: 4px; height: 100%; box-sizing: border-box; }
    .bass-panel .track-controls { display: flex; align-items: center; justify-content: center; width: 110px; flex-shrink: 0; background: #2a2a35; padding: 2px; border-radius: 4px; height: 100%; box-sizing: border-box; }
    
    .track-label { font-weight: 900; font-size: 12px; color: #fff; display: flex; align-items: center; gap: 4px; }
    
    .track-actions { display: flex; gap: 4px; align-items: center; }
    .btn-clear-track { background: #2a2a35; border: 1px solid #444; color: #888; width: 18px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 9px; font-weight: bold; display: flex; align-items: center; justify-content: center; padding: 0; }
    .btn-clear-track:hover, .btn-clear-track:active { background: #ff1744; color: #fff; border-color: #ff1744; }
    
    .btn-mute { background: #3a3a44; border: 1px solid #555; color: #fff; width: 22px; height: 22px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: 900; display: flex; align-items: center; justify-content: center; transition: 0.1s ease; }
    .btn-mute.muted { background: #ff9100; color: #121214; border-color: #ff9100; }
    
    .bass-transposer { width: 100%; text-align: center; font-weight: bold; font-size: 12px; color: #fff; cursor: pointer; border-radius: 3px; padding: 4px 0; transition: 0.1s; letter-spacing: 2px; }
    .bass-transposer.active-transpose { background: #e040fb; color: #121214; }

    .grid-block { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; height: 100%; }
    .master-last-step-row { display: flex; gap: 6px; margin-bottom: 4px; }
    .master-last-step-spacer { width: 110px; flex-shrink: 0; }
    .last-step-timeline { display: flex; gap: 2px; height: 12px; width: 100%; margin-bottom: 2px; }
    .ls-dot { flex: 1; height: 100%; background: #222; border-radius: 2px; cursor: pointer; border: 1px solid #333; }
    .ls-dot.fill { background: #444; }
    .drum-panel .ls-dot.fill { background: #00e5ff22; } .bass-panel .ls-dot.fill { background: #e040fb22; }
    .ls-dot.active-end { background: #00e5ff !important; box-shadow: 0 0 6px #00e5ff; border-color: #fff; }
    .bass-panel .ls-dot.active-end { background: #ff3d00 !important; box-shadow: 0 0 6px #ff3d00; border-color: #fff; }

    @keyframes pulseDotPending { 
        0% { background: #ffea00; box-shadow: 0 0 6px #ffea00; } 
        50% { background: #333; box-shadow: 0 0 0px #ffea00; } 
        100% { background: #ffea00; box-shadow: 0 0 6px #ffea00; } 
    }
    .ls-dot.pending-sync { animation: pulseDotPending 0.5s infinite !important; border-color: #ffea00 !important; }

    .grid { display: flex; gap: 2px; flex-grow: 1; height: calc(100% - 14px); }
    .pad { flex: 1; height: 100%; background: #3a3a44; border: 1px solid #444; border-radius: 2px; cursor: pointer; position: relative; }
    .pad[data-step="4"], .pad[data-step="5"], .pad[data-step="6"], .pad[data-step="7"],
    .pad[data-step="12"], .pad[data-step="13"], .pad[data-step="14"], .pad[data-step="15"] { background: #2b2b35; }
    
    .pad.out-of-bounds { opacity: 0.15; pointer-events: none; }
    .track-row.accidental .pad { background: #202024; border-color: #2d2d33; }
    
    .drum-panel .pad.active-normal { background: #00b0ff !important; border-color: #40c4ff; }
    .drum-panel .pad.active-accent { background: #ff1744 !important; border-color: #ff5252; }
    .drum-panel .pad.active-half { background: #0077b3 !important; border-color: #00b0ff; }
    .drum-panel .pad.active-quarter { background: #004d73 !important; border-color: #0081cb; }
    .drum-panel .pad::after { content: attr(data-prob); position: absolute; bottom: 0px; right: 2px; font-size: 6.5px; font-weight: bold; color: rgba(255,255,255,0.8); }

    .bass-panel .pad.active-normal { background: #e040fb !important; border-color: #f48fb1; }
    .bass-panel .pad.active-accent { background: #ff1744 !important; border-color: #ff5252; }
    .bass-panel .pad.active-slide { background: #00e5ff !important; border-color: #84ffff; }
    .bass-panel .pad.active-both { background: #ffea00 !important; border-color: #ffff8d; }
    .bass-panel .pad::after { content: attr(data-mod); position: absolute; bottom: 0px; right: 2px; font-size: 6.5px; font-weight: bold; }
    .pad.current { box-shadow: inset 0 0 4px #ffffff, 0 0 4px #ffffff; }

    /* --- VUE 2 : LIVE MIXER --- */
    #view-live { padding: 4px; box-sizing: border-box; }

    .live-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; height: 100%; min-height: 0; }
    .live-column { display: flex; flex-direction: column; gap: 8px; min-height: 0; }

    .live-mixer-half { 
        background: #151518; padding: 10px 6px; border-radius: 8px; border: 1px solid #2a2a35; 
        display: flex; flex-direction: column; flex-grow: 1; min-height: 0;
    }

    .live-grid { display: grid; grid-template-columns: repeat(8, minmax(45px, 1fr)); gap: 6px; flex-grow: 1; }
    
    .live-track-col { display: flex; flex-direction: column; gap: 4px; background: #1a1a22; padding: 6px 4px; border-radius: 6px; border: 1px solid #333; align-items: center; justify-content: flex-end;}
    .live-track-col h3 { margin: 0; font-size: 11px; font-weight: 900; color: #888; text-align: center; text-transform: uppercase; }
    .drum-col h3 { color: #00b0ff; } .bass-col h3 { color: #e040fb; }
    
    .live-mute-pad { width: 90%; height: 32px; background: #2a2a35; border: 2px solid #444; border-radius: 6px; color: #fff; font-size: 14px; font-weight: 900; cursor: pointer; transition: 0.1s; display: flex; align-items: center; justify-content: center; }
    .live-mute-pad:active { transform: scale(0.96); }
    .live-mute-pad.muted { background: #ff9100; border-color: #ff9100; color: #121214; box-shadow: 0 0 10px rgba(255, 145, 0, 0.4); }

    .strip-separator { width: 85%; height: 1px; background: #2a2a35; margin: 0; }
    
    .custom-param-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 36px; width: 100%; }
    .send-knobs-mini { display: flex; flex-direction: column; gap: 4px; width: 100%; align-items: center; margin-top: auto; padding-top: 2px; }
    .mini-knob-row { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 8px; color: #888; font-weight: bold; }

    /* RACK FX / Matrix */
    .rack-card { background: #151518; border: 1px solid #2a2a35; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-evenly; width: 100%; box-sizing: border-box; flex-shrink: 0;}
    .rack-card h3 { margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase; font-weight: 800; letter-spacing: 1px; color: #aaa; width: 100%; border-bottom: 1px solid #2a2a35; padding-bottom: 4px; }
    
    .knobs-container { display: flex; justify-content: space-evenly; width: 100%; align-items: center; gap: 5px; }
    .knob-col { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 45px; }
    .knob-col label { font-size: 9px; font-weight: bold; color: #888; text-transform: uppercase; }
    .val-indicator { font-family: monospace; font-size: 10px; color: #aaa; text-align: center; }
    
    .knob-wrapper { 
        width: 36px; height: 36px; 
        background: #25252b; 
        border-radius: 50%; position: relative; cursor: ns-resize; 
        box-shadow: 0 4px 6px rgba(0,0,0,0.5); 
        padding: 2px; 
        box-sizing: border-box;
    }
    .mini-knob { 
        width: 26px; height: 26px; 
        padding: 2px; 
    }
    .knob { 
        width: 100%; height: 100%; 
        background: #1a1a22; 
        border-radius: 50%; 
        position: relative; 
        transform-origin: center; 
        box-sizing: border-box;
    }
    .knob-pointer { 
        position: absolute; 
        width: 3px; height: 10px; 
        background: #aaa; 
        left: 50%; top: 2px; 
        transform: translateX(-50%); 
        border-radius: 2px; 
    }
    .mini-knob .knob-pointer { height: 8px; top: 2px; }
    .k-rev .knob-pointer { background: #e040fb; box-shadow: 0 0 4px #e040fb; } .k-del .knob-pointer { background: #00e5ff; box-shadow: 0 0 4px #00e5ff; } .k-green .knob-pointer { background: #00e676; box-shadow: 0 0 4px #00e676; } .k-red .knob-pointer { background: #ff1744; box-shadow: 0 0 4px #ff1744; } .k-blue .knob-pointer { background: #00b0ff; box-shadow: 0 0 4px #00b0ff; }

    /* SMART MASTER EFFECT PAD */
    .xy-pad-container {
        background: #121214;
        border: 2px solid #3a3a44;
        border-radius: 6px;
        position: relative;
        cursor: crosshair;
        touch-action: none;
        overflow: hidden;
        box-shadow: inset 0 0 10px rgba(0,0,0,0.8);
    }
    .xy-pad-container.active { border-color: #00e5ff; }
    .xy-crosshair-x { position: absolute; width: 1px; height: 100%; background: rgba(255,255,255,0.15); left: 50%; top: 0; pointer-events: none; }
    .xy-crosshair-y { position: absolute; width: 100%; height: 1px; background: rgba(255,255,255,0.15); top: 100%; left: 0; pointer-events: none; }
    .xy-dot {
        width: 14px; height: 14px;
        background: #00e5ff;
        border-radius: 50%;
        position: absolute;
        left: 50%; top: 100%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        box-shadow: 0 0 8px #00e5ff;
        transition: left 0.15s ease-out, top 0.15s ease-out;
    }
    .xy-pad-container.active .xy-dot { transition: none; background: #fff; box-shadow: 0 0 15px #fff;}
    .xy-label { position: absolute; top: 4px; left: 6px; font-family: monospace; font-size: 10px; color: rgba(255,255,255,0.8); pointer-events: none; font-weight: bold;}

    /* TOOL BOXES */
    .tool-box { background: #151518; border: 1px solid #2a2a35; border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 6px; flex-shrink: 0;}
    .tool-box h4 { margin: 0; font-size: 11px; color: #aaa; text-align: left; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid #2a2a35; padding-bottom: 4px;}
    .tool-box.drums h4 { color: #00b0ff; } .tool-box.synth h4 { color: #e040fb; }
    
    .step-btn-row { display: flex; width: 100%; gap: 3px; }
    .transposer-row { display: flex; width: 100%; gap: 3px; }
    .roller-row { display: flex; width: 100%; gap: 6px; }
    #view-live .roller-row .live-tool-btn { min-height: 48px; }
    #view-live .tool-box { padding: 10px; }
    #view-live .rack-card[style*="flex-grow"] { min-height: 0; }

    .live-tool-btn { flex: 1; background: #2a2a35; color: #888; border: 1px solid #444; border-radius: 4px; height: 36px; font-weight: 900; font-size: 10px; cursor: pointer; transition: 0.1s; display: flex; align-items: center; justify-content: center; user-select: none; padding: 0; }
    .step-btn.active-end { background: #444; color: #fff; border-color: #888; }
    .drums .step-btn.active-end { border-color: #00b0ff; color: #00b0ff; } .synth .step-btn.active-end { border-color: #e040fb; color: #e040fb; }
    .step-btn.playing { background: #fff !important; color: #121214 !important; border-color: #fff !important; }
    .drums .step-btn.playing { box-shadow: 0 0 10px #00b0ff; } .synth .step-btn.playing { box-shadow: 0 0 10px #e040fb; }

    @keyframes pulsePending { 0% { box-shadow: 0 0 10px #ffea00; border-color: #ffea00; color: #ffea00; background: #2a2a35; } 50% { box-shadow: 0 0 2px #ffea00; border-color: #ffea00; color: #121214; background: #ffea00; } 100% { box-shadow: 0 0 10px #ffea00; border-color: #ffea00; color: #ffea00; background: #2a2a35; } }
    .step-btn.pending-sync { animation: pulsePending 0.5s infinite !important; }

    .trans-note-btn.active { background: #e040fb; color: #121214; border-color: #e040fb; box-shadow: 0 0 10px rgba(224, 64, 251, 0.6); }
    .roller-btn { font-size: 11px; } .roller-btn:active, .roller-btn.active { background: #00e5ff; color: #121214; border-color: #00e5ff; box-shadow: 0 0 10px rgba(0, 229, 255, 0.6); transform: scale(0.96);}

    /* --- STYLES MODALES --- */
    #help-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 10000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
    .help-content { background: #1a1a22; border: 1px solid #555; border-radius: 8px; padding: 25px; max-width: 600px; width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,1); color: #ddd; font-size: 13px; line-height: 1.5; position: relative; border-top: 3px solid #00b0ff; border-bottom: 3px solid #e040fb; max-height: 90vh; overflow-y: auto; }
    .btn-close-help { position: absolute; top: 15px; right: 15px; background: transparent; border: none; color: #aaa; font-size: 18px; font-weight: bold; cursor: pointer; transition: 0.2s; z-index: 10;} .btn-close-help:hover { color: #ff1744; }
    
    .modal-tabs-header { display: flex; border-bottom: 1px solid #333; margin-bottom: 15px; gap: 4px; flex-wrap: wrap; padding-right: 20px;}
    .modal-tab-btn { background: transparent; color: #888; border: none; padding: 8px 12px; font-size: 12px; font-weight: bold; cursor: pointer; text-transform: uppercase; border-bottom: 2px solid transparent; transition: 0.2s; }
    .modal-tab-btn.active { color: #fff; border-bottom-color: #00b0ff; }
    .modal-pane { display: none; animation: fadeIn 0.2s; } .modal-pane.active { display: block; }
    @keyframes fadeIn { from {opacity: 0;} to {opacity: 1;} }

    .modal-pane h3 { color: #fff; margin-top: 0; font-size: 16px; text-transform: uppercase; }
    .modal-pane h4 { color: #00e676; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; margin-top: 15px; }
    .modal-pane p { margin: 5px 0; color: #bbb; font-size: 12.5px; }
    .modal-pane ul { list-style: none; padding: 0; margin: 0; }
    .modal-pane li { margin-bottom: 6px; font-size: 12.5px; color: #bbb; display: flex; align-items: baseline;}
    .modal-pane li strong { color: #fff; display: inline-block; min-width: 130px; font-family: monospace; font-size: 13px;}
    .btn-reset-consent { background: #3a3a44; color: #fff; border: 1px solid #666; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 11px; font-weight: bold; margin-top: 10px; transition: 0.2s; }

    #welcome-modal { display: flex; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.85); z-index: 11000; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
    .welcome-content { background: #1a1a22; border: 1px solid #555; border-radius: 8px; padding: 25px; max-width: 500px; width: 90%; box-shadow: 0 10px 40px rgba(0,0,0,1); color: #ddd; font-size: 13px; line-height: 1.5; position: relative; border-top: 3px solid #00b0ff; border-bottom: 3px solid #e040fb; text-align: center; }
    .welcome-content h3.w-title { color: #fff; margin: 0; font-size: 18px; text-transform: uppercase; letter-spacing: 2px; }
    .welcome-content h4.w-subtitle { color: #fff; margin: 5px 0 20px 0; font-size: 16px; letter-spacing: 1px; font-weight: 600; line-height: 1.3;}
    .welcome-content p.w-intro { margin: 0 0 25px 0; color: #bbb; font-size: 13px; line-height: 1.6; }
    .welcome-content h4.w-section { color: #00e676; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; margin-top: 15px; text-align: left; }
    .welcome-content p.w-text { margin: 5px 0 15px 0; color: #bbb; font-size: 12.5px; text-align: left; }
    
    .radio-group { display: flex; justify-content: center; gap: 20px; margin: 15px 0; background: #121214; padding: 10px; border-radius: 4px; border: 1px solid #333; }
    .radio-label { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #fff; font-weight: bold; font-size: 13px; }
    .radio-label input[type="radio"] { cursor: pointer; pointer-events: auto; accent-color: #00b0ff; width: 16px; height: 16px; }
    
    .consent-buttons { display: flex; gap: 10px; margin-top: 20px; }
    .btn-consent { flex: 1; padding: 10px; border-radius: 4px; font-weight: bold; cursor: pointer; border: none; font-size: 12px; text-transform: uppercase; transition: 0.2s; }
    .btn-consent.accept { background: #00e676; color: #121214; }
    .btn-consent.accept:hover { background: #00c862; }
    .btn-consent.refuse { background: #3a3a44; color: #fff; border: 1px solid #555; }
    .btn-consent.refuse:hover { background: #4a4a55; }
    .welcome-footer { margin-top: 25px; font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 1px; }

    /* --- ONGLETS DU BAS ET INFO BOX --- */
    .bottom-tabs { display: flex; background: #121214; height: 50px; padding: 4px 8px; gap: 8px; box-sizing: border-box; border-top: 2px solid #2a2a35; border-radius: 0 0 12px 12px; align-items: center;}
    .tab-btn { width: 90px; flex-shrink: 0; height: 100%; background: #1a1a22; color: #888; border: 2px solid #3a3a44; border-radius: 6px; font-size: 16px; font-weight: 900; letter-spacing: 2px; cursor: pointer; transition: 0.2s; }
    .tab-btn.active { background: #2a2a35; color: #fff; border-color: #00e676; box-shadow: 0 -4px 15px rgba(0,230,118,0.1); }
    .info-display-box { flex-grow: 1; height: 100%; background: #0a0a0c; border: 1px inset #333; border-radius: 6px; color: #00e676; font-family: monospace; font-size: 13px; padding: 0 12px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; box-shadow: inset 0 0 10px rgba(0,0,0,0.8); user-select: text;}

    input[type=range].slider-hide { display: none; }
    input[type=range] { -webkit-appearance: none; appearance: none; background: transparent; height: 24px; cursor: pointer; margin: 0; flex-grow: 1;} input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 4px; background: #3a3a44; border-radius: 2px; } input[type=range]::-moz-range-track { width: 100%; height: 4px; background: #3a3a44; border-radius: 2px; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 16px; width: 12px; background: #aaa; border-radius: 3px; margin-top: -6px; box-shadow: 0 2px 5px rgba(0,0,0,0.8); } input[type=range]::-moz-range-thumb { height: 16px; width: 12px; border: none; background: #aaa; border-radius: 3px; box-shadow: 0 2px 5px rgba(0,0,0,0.8); }

    /* =======================================================
       PATCH RESPONSIVE : TABLETTE ET MOBILE
       ======================================================= */
    @media (max-width: 1024px) {
        body { height: 100dvh; padding: 4px; }
        .live-view-grid { grid-template-columns: 1fr; overflow-y: auto; padding-right: 4px; }
        .live-column { gap: 12px; }
        .live-mixer-half { flex-grow: 0; }
        
        /* Mixeur Live - Scroll Horizontal */
        .live-grid { display: flex !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
        .live-track-col { flex: 0 0 60px; } 

        /* Master FX - Passage en colonne */
        .master-fx-container { flex-direction: column !important; }
        .master-fx-separator { width: 100% !important; height: 1px !important; margin: 10px 0; }
        .master-fx-knobs { width: 100%; justify-content: space-evenly; }
        
        /* Vue Sequenceur */
        #view-seq { overflow-y: auto; }
        .workspace-grid { grid-template-columns: 1fr; overflow-y: visible; }
        .grid-block { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
        .grid, .last-step-timeline { min-width: 400px; } 
    }

    @media (max-width: 767px) {
        body { padding: 0; }
        .groovebox { border-radius: 0; padding: 4px; gap: 4px; }
        
        /* Header sur mesure pour forcer FS à droite */
        .controls { padding: 4px; gap: 4px; justify-content: flex-start; }
        .app-logo { display: none; } /* Hide logo to save space */
        .btn-coffee { display: none; }
        .right-controls { margin-left: auto; } /* Keeps FS/INFO strictly to the right */
        
        .bpm-container { font-size: 10px; }
        #bpmSlider, #swingSlider { width: 50px; height: 18px; }
        
        .top-group { padding: 2px 4px; font-size: 9px; height: auto; }
        .pattern-group { order: 8; width: 100%; justify-content: center; }
        .btn-pattern { height: 20px; padding: 0 5px; font-size: 8px; }
        .master-slider { width: 45px; height: 18px; }
        
        .bottom-tabs { height: 40px; padding: 2px 4px; }
        .tab-btn { width: 70px; font-size: 13px; }
        .info-display-box { font-size: 10px; padding: 0 8px; }
    }