:root {
    /* Palette inspirée de Mixxx (Deere Skin) */
    --bg-body: #181818;
    --bg-module: #2b2b2b;
    --bg-inset: #111;
    
    --color-a: #00d2ff; /* Cyan */
    --color-b: #ff9900; /* Orange */
    --text-light: #dcdcdc;
    --text-dim: #777;
    
    --knob-size: 50px;
    --jog-size: 140px;
}
column{
    display: grid;
    grid-auto-flow: column;
    gap: 10px;
    align-items: baseline;
}

row{
    display: grid;
    grid-auto-flow: row;
}
.d-flex{
    display: flex;
    align-items: center;
    justify-content: center;
}
.master-actions {
    margin: 20px 0;
    gap: 10px;
}
.rec-btn {
    background: #400;
    color: #fff;
    border: 1px solid #933;
    margin : 5px 0;
    margin: 5px 0;
    width: 90% !important;
    justify-self: center;
}
.rec-btn.active {
    background: #c00;
    border-color: #ff4d4d;
}


body {
    background-color: var(--bg-body);
    color: var(--text-light);
    font-family: 'Segoe UI', Roboto, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    user-select: none;
}

.loading-overlay {
    position: fixed;
    inset: 0;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 1;
    transition: opacity 1.5s ease;
}
.loading-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
}
.loading-logo {
    width: 320px;
    height: 320px;
    /* border-radius: 50%; */
    /* box-shadow: 0 0 25px rgba(255,255,255,0.08), inset 0 0 12px rgba(0,0,0,0.6); */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000 url('img/logo-mixx.png') center center / 90% no-repeat;
    overflow: hidden;
}
.loading-logo-img {
    display: block;
    width: 50%;
    height: 50%;
    object-fit: contain;
}

/* --- MAIN LAYOUT --- */
.main-console {
    display: flex;
    flex: 1;
    padding: 10px;
    gap: 5px;
    height: 60vh; /* Zone du haut */
}

/* MODULES (Deck & Mixer) */
.module {
    background: var(--bg-module);
    border: 1px solid #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}

/* --- PLAYERS (Left & Right) --- */
.player-section {
    flex: 2;
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.screen-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.screen-row.deck-b { flex-direction: row-reverse; }
.player-section.deck-a { border-top: 3px solid var(--color-a); }
.player-section.deck-b { border-top: 3px solid var(--color-b); }

/* Waveform & Info */
.display-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
}

.display-screen {
    background: #000;
    border: 1px solid #555;
    height: 222px;
    max-height: 222px;
    flex: 0 0 222px;
    width: 30vw;
    min-width: 0;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}
.display-screen.drag-over {
    outline: 2px dashed #29b6f6;
    outline-offset: -6px;
    background: linear-gradient(135deg, rgba(41,182,246,0.08), rgba(41,182,246,0.02));
}
.display-screen.loading::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(1px);
    display: block;
    z-index: 2;
    pointer-events: none;
}
.display-screen.loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #29b6f6;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    z-index: 3;
    pointer-events: none;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.waveform-visual {
    flex: 1;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04), rgba(0,0,0,0.4));
    border: 1px solid #111;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
    min-height: 100px;
    height: 100px;
    width: 30vw;
}

.waveform-canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 2000px;
    transform: translateX(0);
    transition: transform 0.1s linear;
}

.waveform-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    left: 50%;
    background: linear-gradient(to bottom, transparent 0%, #fff 15%, #fff 85%, transparent 100%);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    pointer-events: none;
    z-index: 2;
}

.waveform-playhead::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -60%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
}

.waveform-visual.scrubbing .waveform-canvas {
    transition: none;
}

.deck-a .waveform-visual { color: var(--color-a); }
.deck-b .waveform-visual { color: var(--color-b); }

.waveform-preview {
    position: relative;
    height: 60px;
    min-height: 60px;
    flex: 0 0 60px;
    margin-top: 8px;
    background: #0b0b0b;
    border: 1px solid #111;
    border-radius: 2px;
    overflow: hidden;
}
.waveform-preview canvas {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
}
.waveform-preview .preview-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #fff;
    box-shadow: 0 0 6px rgba(255,255,255,0.8);
    pointer-events: none;
}
.waveform-preview.warning {
    animation: preview-blink 2s ease-in-out infinite;
    box-shadow: 0 0 12px rgba(255,80,80,0.6);
}

@keyframes preview-blink {
    0%, 50%, 100% { filter: brightness(1); }
    25%, 75% { filter: brightness(1.5); }
}

.track-title-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.track-title { font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: monospace; font-size: 1.1rem; flex: 1; }
.waveform-zoom-controls { display: inline-flex; gap: 4px; }
.btn-zoom { background: #111; color: #fff; border: 1px solid #333; border-radius: 3px; width: 26px; height: 22px; cursor: pointer; box-shadow: 0 2px 0 #000; }
.btn-zoom:hover { background: #222; }
.btn-zoom:active { transform: translateY(1px); box-shadow: none; }
.track-meta { display: flex; justify-content: space-between; font-family: monospace; font-size: 0.9rem; color: var(--color-a); }
.deck-b .track-meta { color: var(--color-b); }

/* JOG WHEEL */
.jog-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.jog-wheel {
    width: var(--jog-size);
    height: var(--jog-size);
    border-radius: 50%;
    background: radial-gradient(#333, #000);
    border: 4px solid #444;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    position: relative;
    transition: transform 0.1s linear; /* Rotation fluide */
}
.deck-a .jog-wheel { border-color: #334; }
.deck-b .jog-wheel { border-color: #433; }

/* Marqueur sur le jog */
.jog-wheel::after {
    content: '';
    position: absolute;
    top: 5px; left: 50%;
    width: 4px; height: 20px;
    background: #fff;
    transform: translateX(-50%);
    box-shadow: 0 0 5px white;
}
/* Anneau coloré */
.jog-ring {
    position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px;
    border: 2px solid transparent;
    border-radius: 50%;
    opacity: 0.5;
}
.deck-a .jog-ring { border-top-color: var(--color-a); border-left-color: var(--color-a); }
.deck-b .jog-ring { border-top-color: var(--color-b); border-right-color: var(--color-b); }

/* Transport Buttons */
.transport-controls {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
    width: 100%;
}
.btn-square {
    flex: 0 0 auto;
    height: 30px;
    width: 100%;
    background: #333;
    border: 1px solid #111;
    color: #888;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    box-shadow: 0 3px 0 #11111140;
    transition: all 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.btn-square:active { transform: translateY(3px); box-shadow: none; }
.btn-lock {
    flex: 0 0 auto;
    font-size: 1.1rem;
    padding: 0;
    display: none;
}
.btn-cue-clear { flex: 0 0 auto; font-size: 0.85rem; }

.deck-a .btn-square.active-play { background: var(--color-a); color: #000; box-shadow: 0 0 15px var(--color-a); border-color: var(--color-a); }
.deck-b .btn-square.active-play { background: var(--color-b); color: #000; box-shadow: 0 0 15px var(--color-b); border-color: var(--color-b); }
.deck-a .btn-square.active-sync { background: var(--color-a); color: #000; box-shadow: 0 0 10px var(--color-a); border-color: var(--color-a); }
.deck-b .btn-square.active-sync { background: var(--color-b); color: #000; box-shadow: 0 0 10px var(--color-b); border-color: var(--color-b); }

.loop-controls {
    width: 100%;
    margin-top: 18px;
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.loop-length-row {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}
.loop-length {
    width: 70px;
    text-align: center;
    background: #070707;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ddd;
    font-size: 0.75rem;
    padding: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.loop-length:focus { outline: none; }
.loop-length-row .loop-length { flex: 1; }
.btn-loop-step {
    width: 36px;
    height: 30px;
    background: #2c2c2c;
    border: 1px solid #444;
    border-radius: 4px;
    color: #eee;
    cursor: pointer;
    font-size: 1rem;
}
.btn-loop-step:hover { background: #3a3a3a; }
.btn-loop-toggle {
    width: 100%;
    padding: 8px 0;
    border-radius: 4px;
    border: 1px solid #555;
    background: #2b2b2b;
    color: #eee;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.loop-controls[data-deck="A"] .btn-loop-toggle.active {
    background: var(--color-a);
    color: #000;
    box-shadow: 0 0 10px var(--color-a);
}
.loop-controls[data-deck="B"] .btn-loop-toggle.active {
    background: var(--color-b);
    color: #000;
    box-shadow: 0 0 10px var(--color-b);
}
.loop-nudge-row {
    display: flex;
    gap: 8px;
    width: 100%;
}
.loop-nudge-row .btn-loop-nudge {
    flex: 1;
    padding: 6px 0;
    border: 1px solid #444;
    background: #222;
    color: #eee;
    border-radius: 4px;
    cursor: pointer;
}
.loop-nudge-row .btn-loop-nudge:hover { background: #2f2f2f; }

.loop-presets {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.loop-preset-row {
    display: flex;
    gap: 6px;
    width: 100%;
}
.btn-loop-preset {
    flex: 1;
    padding: 3px 0;
    border-radius: 4px;
    border: 1px solid #555;
    background: #161616;
    color: #eee;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}
.btn-loop-preset:hover { background: #222; }
.btn-loop-preset.preset-clear { font-size: 0.7rem; }
.btn-loop-preset.has-preset {
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255,255,255,0.25);
}
.loop-controls[data-deck="A"] .btn-loop-preset.has-preset { border-color: var(--color-a); }
.loop-controls[data-deck="B"] .btn-loop-preset.has-preset { border-color: var(--color-b); }
.btn-loop-preset.playing {
    color: #000;
    border-color: transparent;
}
.loop-controls[data-deck="A"] .btn-loop-preset.playing { background: var(--color-a); box-shadow: 0 0 10px var(--color-a); }
.loop-controls[data-deck="B"] .btn-loop-preset.playing { background: var(--color-b); box-shadow: 0 0 10px var(--color-b); }
.loop-controls[data-deck="A"] .btn-loop-preset:not(.has-preset) { border-color: #555; }
.loop-controls[data-deck="B"] .btn-loop-preset:not(.has-preset) { border-color: #555; }
.preset-clear-row .btn-loop-preset.playing { background: #ff3b3b; box-shadow: 0 0 10px #ff3b3b; }

/* Pitch Fader (Horizontal below Jog) */
.pitch-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 70px;
    flex: 0 0 70px;
}
.pitch-container {
    background: #111;
    padding: 8px 6px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 210px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.6);
}
.pitch-label { font-size: 0.7rem; color: #777; }
.pitch-val { font-family: monospace; font-size: 0.8rem; text-align: center; }
.pitch-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: none;
    width: 100%;
    height: 90px;
    background: transparent;
    cursor: pointer;
}
@supports not (writing-mode: vertical-lr) {
    .pitch-slider {
        transform: rotate(-90deg);
        width: 110px;
        height: 14px;
    }
}
.pitch-nudge-row {
    display: flex;
    gap: 4px;
    width: 100%;
    justify-content: center;
}
.pitch-step-row {
    display: flex;
    gap: 6px;
    width: 100%;
    justify-content: center;
    margin-bottom: 4px;
}
.pitch-step-row .btn-small {
    flex: 1;
    padding: 4px 0;
    font-size: 0.75rem;
}
.pitch-nudge-row .btn-small {
    flex: 1;
    padding: 4px 0;
    font-size: 0.7rem;
}
.pitch-arrow {
    display: inline-block;
    transform-origin: center;
    font-size: 0.8rem;
}
.pitch-arrow.right {
    transform: rotate(-55deg);
}
.pitch-arrow.left {
    transform: rotate(-230deg);
}
.fx-panel {
    width: 30vw;
    background: #101010;
    border-radius: 8px;
    padding: 8px;
    /* box-shadow: inset 0 0 4px rgba(0,0,0,0.6); */
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.fx-stack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.fx-header-simple {
    justify-content: center;
    flex-direction: column;
}
.fx-header-full {
    display: none;
}
.fx-panel[data-mode="edit"] .fx-header-full {
    display: flex;
}
.fx-panel[data-mode="edit"] .fx-header-simple {
    display: none;
}
.fx-panel[data-mode="simple"] .fx-box {
    display: none;
}
.sample-panel {
    background: #101010;
    border: 1px solid #1c1c1c;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 30vw;
}
.sample-stack-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
    color: #bbb;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.sample-header-simple {
    justify-content: center;
    flex-direction: column;
}
.sample-header-full {
    display: none;
}
.sample-panel[data-mode="edit"] .sample-header-full {
    display: flex;
}
.sample-panel[data-mode="edit"] .sample-header-simple {
    display: none;
}
.sample-panel[data-mode="simple"] .sample-box {
    display: none;
}
.display-column[data-mode="fx"] .fx-header-simple { display: none !important; }
.display-column[data-mode="fx"] .fx-header-full { display: flex !important; }
.display-column[data-mode="fx"] .fx-box { display: flex !important; }
.display-column[data-mode="fx"] .sample-header-simple,
.display-column[data-mode="fx"] .sample-header-full,
.display-column[data-mode="fx"] .sample-box,
.display-column[data-mode="fx"] .sample-panel { display: none !important; }

.display-column[data-mode="sample"] .sample-header-simple { display: none !important; }
.display-column[data-mode="sample"] .sample-header-full { display: flex !important; }
.display-column[data-mode="sample"] .sample-box { display: flex !important; }
.display-column[data-mode="sample"] .fx-header-simple,
.display-column[data-mode="sample"] .fx-header-full,
.display-column[data-mode="sample"] .fx-box,
.display-column[data-mode="sample"] .fx-panel { display: none !important; }

.display-column[data-mode="none"] .fx-header-simple,
.display-column[data-mode="none"] .sample-header-simple { display: flex !important; }
.display-column[data-mode="none"] .fx-header-full,
.display-column[data-mode="none"] .sample-header-full,
.display-column[data-mode="none"] .fx-box,
.display-column[data-mode="none"] .sample-box { display: none !important; }
.sample-quick-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}
.sample-quick-toggle {
    background: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    min-width: 52px;
}
.sample-quick-toggle.loaded {
    background: #1f3d1f;
    border-color: #49c16d;
    color: #8cff9a;
    box-shadow: 0 0 6px rgba(73,193,109,0.4);
}
.sample-quick-toggle.playing {
    background: #274f27;
    border-color: #6ad46a;
    color: #b7ffb7;
    box-shadow: 0 0 10px rgba(90,200,90,0.5);
}
.sample-box {
    margin-top: 4px;
    background: #0a0a0a;
    border: 1px solid #191919;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sample-box-hint {
    font-size: 0.65rem;
    color: #666;
}
.sample-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sample-preset-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #121212;
    border: 1px solid #222;
    border-radius: 5px;
    padding: 8px;
}
.sample-preset-label {
    font-size: 0.75rem;
    color: #bbb;
    min-width: 42px;
}
.sample-file-label {
    flex: 1;
    font-size: 0.7rem;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50px;
}
.sample-upload {
    background: #1a1a1a;
    border: 1px solid #333;
    color: #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 0.7rem;
}
.sample-upload:hover { background: #27374f; color: #9cb4ff; }
.sample-play {
    background: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 8px;
    font-size: 0.75rem;
    font-weight: 700;
}
.sample-play.playing {
    background: #274f27;
    border-color: #6ad46a;
    color: #b7ffb7;
    box-shadow: 0 0 10px rgba(90,200,90,0.5);
}
.sample-play:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.sample-play:not(:disabled):hover { background: #1f3d1f; color: #8cff9a; border-color: #49c16d; }
.fx-quick-row {
    display: flex;
    gap: 6px;
}
.fx-pad-container {
    display: none;
    margin-top: 6px;
    gap: 8px;
    flex-wrap: wrap;
    margin: 15px 0 ;
}
.fx-pad {
    position: relative;
    width: 100px;
    height: 100px;
    background: #0f0f0f;
    border: 1px solid #222;
    border-radius: 4px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.5);
    cursor: crosshair;
}
.fx-pad::before,
.fx-pad::after {
    content: '';
    position: absolute;
    background: rgba(255,255,255,0.08);
}
.fx-pad::before {
    width: 1px;
    height: 100%;
    left: 50%;
    top: 0;
}
.fx-pad::after {
    height: 1px;
    width: 100%;
    top: 50%;
    left: 0;
}
.fx-pad-thumb {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #4ec9f5;
    box-shadow: 0 0 6px rgba(78,201,245,0.8);
    transform: translate(-50%, -50%);
}
.fx-pad-title {
    width: 100px;
    text-align: center;
    font-size: 0.7rem;
    color: #ccc;
    margin-top: 2px;
}
.fx-pad-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}
.fx-pad-apply {
    background: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 0.7rem;
}
.fx-pad-apply.active {
    background: #1f3d1f;
    border-color: #49c16d;
    color: #8cff9a;
    box-shadow: 0 0 6px rgba(73,193,109,0.4);
}
.fx-pad-slot-label {
    font-size: 0.65rem;
    color: #888;
}
.fx-quick-toggle {
    background: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 700;
    min-width: 46px;
    border-radius: 6px;
}
.fx-quick-toggle.on {
    background: #1f3d1f;
    border-color: #49c16d;
    color: #8cff9a;
    box-shadow: 0 0 6px rgba(73,193,109,0.4);
}
.fx-quick-toggle:hover { background: #2a2a2a; }
.fx-add-btn {
    background: #1d1d1d;
    border: 1px solid #333;
    border-radius: 4px;
    color: #ddd;
    cursor: pointer;
    padding: 2px 8px;
    font-size: 0.7rem;
}
.fx-add-btn:hover { background: #292929; }
.fx-stack-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.fx-stack-empty {
    flex: 1 1 100%;
    font-size: 0.7rem;
    color: #666;
    text-align: center;
    padding: 8px 0;
    border: 1px dashed #333;
    border-radius: 4px;
}
.fx-card {
    background: #0e0e0e;
    border: 1px solid #1f1f1f;
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}
.fx-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.fx-card select {
    flex: 1;
    background: #151515;
    color: #eee;
    border: 1px solid #333;
    border-radius: 4px;
    padding: 4px;
    font-size: 0.75rem;
}
.fx-row-remove {
    background: #331818;
    color: #ff8c8c;
    border: 1px solid #662222;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px 6px;
}
.fx-row-remove:hover { background: #511b1b; }
.fx-knobs {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.fx-off-label {
    flex: 1;
    text-align: center;
    font-size: 0.65rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px dashed #333;
    border-radius: 4px;
    padding: 8px 4px;
}
.fx-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}
.knob.small-knob {
    width: 38px;
    height: 38px;
}
.knob.small-knob.mini {
    width: 32px;
    height: 32px;
}
.fx-knob-text {
    font-size: 0.6rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fx-knob-value {
    font-size: 0.65rem;
    color: #ccc;
    font-family: monospace;
}
.fx-box {
    margin-top: 4px;
    background: #0d0d0d;
    border: 1px solid #222;
    border-radius: 6px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 97%;
}
.fx-box-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: #aaa;
}
.fx-box-hint {
    font-size: 0.6rem;
    color: #666;
}
.fx-preset-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.btn-fx-mode.active,
.btn-fx-mode.editing {
    background: #1f3d1f;
    color: #8cff9a;
    border-color: #49c16d;
}
.btn-sample-mode.active,
.btn-sample-mode.editing {
    background: #2d274f;
    color: #c0b4ff;
    border-color: #5d49c1;
}

::-webkit-scrollbar{
    width: 3px;
}
::-webkit-scrollbar-thumb,
::-webkit-scrollbar-track{
    color: red;
    width: 5px;
}
.fx-preset-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.fx-preset-slot {
    display: flex;
    align-items: center;
    background: #141414;
    border: 1px solid #222;
    border-radius: 4px;
    padding: 6px;
    gap: 4px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.fx-preset-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}
.fx-preset-toggle {
    width: 26px;
    height: 26px;
    background: #2a2a2a;
    border: 1px solid #333;
    border-radius: 3px;
    color: #9c9c9c;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.fx-preset-toggle.on {
    background: #1f3d1f;
    border-color: #49c16d;
    color: #8cff9a;
    box-shadow: 0 0 6px rgba(73,193,109,0.4);
}
.fx-preset-toggle:hover { background: #333; }
.fx-preset-load {
    min-width: 140px;
    font-size: 0.8rem;
    background: #1f1f1f;
    color: #eee;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
    padding: 6px 8px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: left;
}
.fx-preset-load.active {
    border-color: #6ad46a;
    box-shadow: 0 0 8px rgba(90,200,90,0.45);
}
.fx-preset-load:hover { background: #2a2a2a; }
.fx-preset-save,
.fx-preset-add,
.fx-preset-clear {
    width: 32px;
    font-size: 0.65rem;
    background: #1a1a1a;
    color: #ddd;
    border: 1px solid #333;
    border-radius: 3px;
    cursor: pointer;
}
.fx-preset-save:hover { background: #274f27; color: #9cff9c; }
.fx-preset-add:hover { background: #27374f; color: #9cb4ff; }
.fx-preset-clear:hover { background: #4f2727; color: #ffc5c5; }
.fx-preset-label {
    font-size: 0.75rem;
    color: #bbb;
    min-height: 14px;
    flex: 1;
}

.fx-card-column {
    min-height: 100px;
    max-height: 190px;
    overflow-y: auto;

}

/* Toasts */
.toast-container {
    position: fixed;
    bottom: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
    z-index: 999;
}
.toast {
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 14px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.6);
    font-size: 0.9rem;
    min-width: 220px;
    pointer-events: auto;
    border-left: 3px solid #ff9900;
    animation: toast-in 150ms ease;
}
.toast.error { border-left-color: #ff3b30; }
.toast.info { border-left-color: #00d2ff; }
@keyframes toast-in {
    from { transform: translateY(10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(6px);
    z-index: 10000;
}
.modal-overlay.hidden {
    display: none;
}
.modal-card {
    background: #1d1d1d;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 16px;
    min-width: 320px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.modal-title {
    font-weight: bold;
    margin-bottom: 10px;
}
.modal-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border-radius: 4px;
    border: 1px solid #333;
    background: #111;
    color: #eee;
    font-size: 0.95rem;
}
.modal-input:focus-visible {
    outline: 1px solid rgba(255,255,255,0.4);
}
.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
}
.modal-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.2);
    border-top-color: #29b6f6;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    margin: 0 auto;
}

/* --- MIXER SECTION (Center) --- */
.mixer-section {
    flex: 1.5;
    display: flex;
    flex-direction: row; /* Strip A | Master | Strip B */
    background: #222;
}

/* Channel Strip */
.channel-strip {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 5px;
    border-right: 1px solid #111;
    border-left: 1px solid #111;
}

.channel-main {
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    gap: 18px;
    align-items: flex-start;
}

.eq-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* EQs */
.eq-stack {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 0;
}

.beat-bar {
    position: relative;
    display: flex;
    width: 90px;
    height: 12px;
    background: transparent;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08), 0 0 0 1px #000;
    overflow: hidden;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}
.eq-column[data-deck="A"] .beat-bar { border: 1px solid rgba(0,210,255,0.35); background: transparent; }
.eq-column[data-deck="B"] .beat-bar { border: 1px solid rgba(255,153,0,0.35); background: transparent; }
.beat-bar.active { opacity: 1; }
.beat-segment {
    flex: 1;
    position: relative;
    background: transparent;
    border-right: 1px solid rgba(0,0,0,0.6);
}
.beat-segment:last-child { border-right: none; }
.beat-segment.flash {
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 8px rgba(255,255,255,0.8);
    animation: beat-flash 220ms ease-out forwards;
}
.eq-column[data-deck="A"] .beat-segment.flash {
    background: rgba(0, 210, 255, 0.9);
    box-shadow: 0 0 8px rgba(0,210,255,0.8);
}
.eq-column[data-deck="B"] .beat-segment.flash {
    background: rgba(255, 153, 0, 0.9);
    box-shadow: 0 0 8px rgba(255,153,0,0.8);
}
@keyframes beat-flash {
    from {
        opacity: 1;
        transform: scaleY(1);
    }
    to {
        opacity: 0;
        transform: scaleY(0.4);
    }
}

.knob {
    width: 35px; height: 35px;
    border-radius: 50%;
    background: linear-gradient(135deg, #444, #111);
    box-shadow: 0 4px 5px rgba(0,0,0,0.5);
    position: relative;
    border: 2px solid #000;
}
.knob::before {
    content: ''; position: absolute; top: 5px; left: 50%;
    width: 3px; height: 40%; background: #fff;
    transform: translateX(-50%);
    transform-origin: bottom center;
    pointer-events: none;
}
.knob-label { text-align: center; font-size: 0.6rem; color: #777; margin-top: 3px; text-transform: uppercase; }
.knob-value { text-align: center; font-size: 0.55rem; color: #888; margin-top: 2px; letter-spacing: 0.02em; }

/* Vertical Volume Fader Container */
.fader-track {
    flex: 1;
    width: 40px;
    background: #111;
    border-radius: 4px;
    position: relative;
    display: flex;
    justify-content: center;
    padding: 10px 0;
    margin-bottom: 10px;
    box-shadow: inset 0 0 5px #000;
}

.fader-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* Vertical Range Input */
input[type=range].vertical-fader {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 210px;
    background: transparent;
    cursor: pointer;
}
input[type=range].vertical-fader::-webkit-slider-runnable-track {
    width: 8px;
    height: 100%;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
input[type=range].vertical-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin-left: -3px;
}
input[type=range].vertical-fader::-moz-range-track {
    width: 8px;
    height: 100%;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
input[type=range].vertical-fader::-moz-range-thumb {
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    border: none;
}
input[type=range].vertical-fader::-ms-track {
    width: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
input[type=range].vertical-fader::-ms-fill-lower,
input[type=range].vertical-fader::-ms-fill-upper {
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
input[type=range].vertical-fader::-ms-thumb {
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

/* Fallback pour moteurs sans writing-mode vertical */
@supports not (writing-mode: vertical-lr) {
    input[type=range].vertical-fader {
        transform: rotate(-90deg);
        width: 100%;
        height: auto;
    }
}

/* Master Section (Center Center) */
.master-strip {
    /* flex: auto; */
    display: grid;
    grid-auto-flow: row;
    /* flex-direction: column; */
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
    background: #1a1a1a;
    grid-template-rows: auto auto 1fr;
}

.master-title{
    color:#444;
    font-weight:bold;
    margin-bottom:auto;
    margin-top:10px;
    height: 30px;
    justify-self: center;
}

.master-volume {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.master-knob {
    width: 40px;
    height: 40px;
}

.meter-column {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.level-meter {
    position: relative;
    width: 18px;
    height: 100px;
    background: #0f0f0f;
    border: 1px solid #444;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.9);
}

.master-meter {
    height: 140px;
    width: 18px;
}

.meter-steps {
    position: absolute;
    inset: 4px 3px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: 4px;
}

.meter-step {
    height: 3px;
    width: 100%;
    background: #181818;
    border-radius: 1px;
}
.meter-step.green.active { background: #58c14e; }
.meter-step.orange.active { background: #e6b400; }
.meter-step.red.active { background: #cf3a36; }

/* Crossfader */
.crossfader-box {
    width: 90%;
    margin-top: auto;
    text-align: center;
    justify-self: center;
}
.cf-label { font-size: 0.6rem; letter-spacing: 1px; margin-bottom: 2px; color: #666; }
input[type=range].crossfader {
    width: 100%;
    background: transparent;
}
input[type=range].crossfader::-webkit-slider-runnable-track {
    width: 100%; height: 8px; background: #000; border-radius: 4px; border: 1px solid #444;
}
input[type=range].crossfader::-webkit-slider-thumb {
    -webkit-appearance: none; height: 24px; width: 12px; background: #888; margin-top: -9px; border-radius: 2px; box-shadow: 0 2px 4px black; cursor: col-resize;
}


/* --- LIBRARY SECTION --- */
.library-panel {
    flex: 0.8; /* Prend le reste de la hauteur */
    background: #1e1e1e;
    border-top: 2px solid #333;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.lib-header {
    background: #252525;
    padding: 5px 10px;
    border-bottom: 1px solid #333;
    display: flex;
    gap: 10px;
    align-items: center;
}
.lib-search {
    flex: 1;
    min-width: 0;
    background: #181818;
    border: 1px solid #333;
    color: #ddd;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 0.9rem;
}
.lib-search:focus-visible { outline: 1px solid rgba(255,255,255,0.3); }
.lib-content {
    overflow: hidden;
    flex: 1;
}
.lib-split {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 10px;
    height: 100%;
}
.playlist-tree {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 180px;
}
.playlist-row.selected {
    background: #222 !important;
}
.playlist-tree.collapsed {
    width: 36px;
}
.tree-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    background: #222;
    border-bottom: 1px solid #333;
    font-weight: bold;
    font-size: 0.9rem;
}
.tree-actions button {
    background: #333;
    color: #eee;
    border: 1px solid #444;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 6px;
}
.tree-actions button:hover {
    background: #3f3f3f;
}
.tree-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}
.tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #ddd;
}
.tree-item.active {
    background: rgba(41, 182, 246, 0.18);
    color: #fff;
}
.tree-item:hover {
    background: rgba(255,255,255,0.08);
}
.tree-icon {
    width: 16px;
    text-align: center;
}
.track-table-wrapper {
    overflow: auto;
}

/* Table style for tracks */
.track-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.track-table th { text-align: left; background: #222; padding: 8px; color: #888; font-weight: normal; position: sticky; top: 0;}
.track-table th.th-load { min-width: 80px; }
.track-table td { padding: 6px 8px; border-bottom: 1px solid #2a2a2a; color: #ccc; }
.track-table tr:hover { background: #2a2a2a; }
.sort-btn {
    background: transparent;
    border: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
}
.sort-btn:focus-visible {
    outline: 1px solid rgba(255,255,255,0.4);
    outline-offset: 2px;
}
.sort-btn .sort-indicator {
    font-size: 0.7rem;
    opacity: 0.45;
}
.sort-btn.active .sort-indicator {
    opacity: 0.9;
}
.fav-toggle {
    background: none;
    border: none;
    color: #555;
    font-size: 1.2rem;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.fav-toggle:hover,
.fav-toggle:focus {
    color: #ffb347;
    transform: scale(1.1);
}
.fav-toggle.active {
    color: #ffcf4a;
    text-shadow: 0 0 6px rgba(255, 207, 74, 0.6);
}
.rating-control {
    display: flex;
    gap: 2px;
    justify-content: center;
}
.rating-star {
    background: none;
    border: none;
    color: #555;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1.1;
    transition: color 0.15s, transform 0.15s;
}
.rating-star:hover,
.rating-star:focus {
    color: #ffb347;
    transform: translateY(-1px);
}
.rating-star.active {
    color: #ff9900;
    text-shadow: 0 0 4px rgba(255, 153, 0, 0.5);
}

.btn-small {
    background: #444; border: none; color: #fff; padding: 4px 8px; border-radius: 2px; cursor: pointer; font-size: 0.75rem;
}
.btn-small:hover { background: #555; }
.btn-load-a:hover { background: var(--color-a); color: #000; }
.btn-load-b:hover { background: var(--color-b); color: #000; }
.btn-load-active { color: #000 !important; box-shadow: 0 0 10px currentColor; }
.btn-load-a.btn-load-active { background: var(--color-a); border-color: var(--color-a); }
.btn-load-b.btn-load-active { background: var(--color-b); border-color: var(--color-b); }
.deck-drop {
    outline: 2px dashed rgba(255,255,255,0.2);
}

.ui-tooltip {
    position: absolute;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid #444;
    box-shadow: 0 2px 8px rgba(0,0,0,0.6);
    font-size: 0.75rem;
    pointer-events: none;
    white-space: nowrap;
    z-index: 9999;
    transition: opacity 0.15s ease;
}
.ui-tooltip.hidden {
    opacity: 0;
    visibility: hidden;
}
.hotkey-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #222;
}
.hotkey-row:last-child { border-bottom: none; }
.hotkey-label { color: #ccc; font-size: 0.85rem; }
.hotkey-key {
    min-width: 120px;
    text-align: right;
    font-family: monospace;
    color: #8cff9a;
}
.hotkey-assign {
    margin-left: 8px;
    background: #1c1c1c;
    border: 1px solid #333;
    color: #ddd;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
    border-radius: 6px;;
}
.hotkey-assign.waiting {
    background: #333;
    color: #fff;
}
.hotkey-clear {
    margin-left: 4px;
    background: #2a1b1b;
    border: 1px solid #553;
    color: #fbb;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
      border-radius: 6px;;
}
#hotkey-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px 20px;
    max-height: 80vh;
    overflow-y: auto;
    grid-auto-flow: column;
   
}
.hotkey-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 0 3px #000;
     background-color: rgb(65, 65, 65);
     padding: 15px;
}
/* Inputs Range Reset */
input[type=range] { -webkit-appearance: none; background: transparent; }
input[type=range]:focus { outline: none; }

/* Pitch slider style */
.pitch-slider::-webkit-slider-runnable-track {
    width: 8px;
    height: 100%;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
.pitch-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    margin-left: -3px;
    cursor: pointer;
}
.pitch-slider::-moz-range-track {
    width: 8px;
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
.pitch-slider::-moz-range-thumb {
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    cursor: pointer;
}
.pitch-slider::-ms-track {
    width: 8px;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.pitch-slider::-ms-fill-lower,
.pitch-slider::-ms-fill-upper {
    background: #000;
    border: 1px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 0 3px #000;
}
.pitch-slider::-ms-thumb {
    width: 14px;
    height: 24px;
    background: #888;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.8);
    cursor: pointer;
}

/* Spinner */
.spinner { display: inline-block; width: 10px; height: 10px; border: 2px solid #555; border-top-color: #fff; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Drag ghost */
.drag-ghost {
    position: fixed;
    top: -9999px;
    left: -9999px;
    background: rgba(24,24,24,0.9);
    border: 1px solid #555;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.7);
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 0.85rem;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 9999;
}
.drag-ghost.visible {
    opacity: 1;
    transform: scale(1);
}
.drag-ghost-icon {
    font-size: 1.2rem;
}
.drag-ghost-name {
    max-width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Loop debug panel */
#loop-debug-toggle {
    position: fixed;
    right: 14px;
    bottom: 14px;
    padding: 8px 12px;
    background: #111;
    color: #fff;
    border: 1px solid #444;
    border-radius: 6px;
    cursor: pointer;
    z-index: 11000;
    box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}
#loop-debug-toggle.open {
    background: #1e293b;
    border-color: #556;
}
#loop-debug-panel {
    position: fixed;
    right: 14px;
    bottom: 58px;
    width: 368px;
    background: rgba(13,16,24,0.95);
    border: 1px solid #444;
    border-radius: 10px;
    padding: 12px;
    color: #fff;
    box-shadow: 0 12px 24px rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease, transform 120ms ease;
    z-index: 11000;
}
#loop-debug-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.loop-debug-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.loop-debug-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}
.loop-debug-row {
    display: grid;
    grid-template-columns: 110px 32px 1fr 32px 56px;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.85rem;
}
.loop-debug-row label {
    color: #cbd5e1;
}
.loop-debug-row input[type="range"] {
    width: 100px;
}
.loop-debug-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.loop-debug-step {
    background: #1f2937;
    border: 1px solid #374151;
    color: #e5e7eb;
    border-radius: 6px;
    width: 32px;
    height: 28px;
    cursor: pointer;
    transition: background 100ms ease, border-color 100ms ease;
}
.loop-debug-step:hover {
    background: #2b3546;
    border-color: #4b5563;
}