/* =============================================================
   TB-303 PATTERN HELPER — Stylesheet v2
   VST-inspired, mobile-first, accessible, RTL-ready
   ============================================================= */

/* ---------- RESET & VARIABLES ---------- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    /* Palette : dark-rack VST style */
    --col-bg-0: #07080b;
    --col-bg-1: #0e1014;
    --col-bg-2: #151822;
    --col-bg-3: #1b1f2b;
    --col-bg-4: #23283a;
    --col-border: #2d3142;
    --col-border-strong: #3a3f55;
    --col-text: #e5e7ee;
    --col-text-dim: #8a8f9f;
    --col-text-mute: #5a5f6f;

    --col-primary: #ff6a1a;
    --col-primary-glow: rgba(255, 106, 26, 0.55);
    --col-secondary: #ffb347;
    --col-accent: #ff3344;
    --col-accent-glow: rgba(255, 51, 68, 0.55);
    --col-slide: #4a7dff;
    --col-slide-glow: rgba(74, 125, 255, 0.55);
    --col-ext: #ffc933;
    --col-ext-glow: rgba(255, 201, 51, 0.55);
    --col-playing: #ffd400;
    --col-note-c: #00e08a;
    --col-success: #00c774;
    --col-danger: #e53945;

    --rack-grad: linear-gradient(180deg, #1a1d27 0%, #0e1015 100%);
    --panel-grad: linear-gradient(180deg, #21242f 0%, #171a23 100%);
    --button-grad: linear-gradient(180deg, #353a4c 0%, #1e2230 100%);

    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;

    --scale: 1;
    --shadow-deep: 0 6px 18px rgba(0,0,0,0.55);
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 20px rgba(0,0,0,0.4);
    --glow-amber: 0 0 14px rgba(255,106,26,0.6);
}

html, body {
    height:100%;
    background: var(--col-bg-0);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, sans-serif;
    background:
        radial-gradient(ellipse at top, #1a1f2e 0%, #0a0b10 45%, #04050a 100%),
        linear-gradient(180deg, #0b0c12 0%, #000 100%);
    color: var(--col-text);
    min-height:100vh;
    padding:
        calc(env(safe-area-inset-top, 0px) + 10px)
        max(10px, env(safe-area-inset-right, 0px))
        calc(env(safe-area-inset-bottom, 0px) + 10px)
        max(10px, env(safe-area-inset-left, 0px));
    -webkit-user-select:none; user-select:none;
    -webkit-tap-highlight-color: transparent;
    overflow-x:hidden;
    font-size: 14px;
    line-height: 1.4;
}

/* Screen reader only */
.sr-only {
    position:absolute !important;
    width:1px !important; height:1px !important;
    padding:0 !important; margin:-1px !important;
    overflow:hidden !important; clip:rect(0,0,0,0) !important;
    white-space:nowrap !important; border:0 !important;
}

body.master-mute { filter: grayscale(0.6) brightness(0.75); }

/* Focus visible globally */
:focus-visible {
    outline: 2px solid var(--col-playing);
    outline-offset: 2px;
    z-index: 10;
}

/* Selection */
::selection { background: var(--col-primary); color:#fff; }

/* Scrollbars (webkit) */
::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: #2a2f40; border-radius:4px; }
::-webkit-scrollbar-thumb:hover { background: #3a3f55; }

/* =============================================================
   HEADER
   ============================================================= */
.app-header {
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #171a23 0%, #0e1015 100%);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep), var(--shadow-inset);
    margin-bottom: 12px;
    position: relative;
    overflow:hidden;
}

.app-header::before {
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg, transparent 0, rgba(255,106,26,0.08) 50%, transparent 100%);
    opacity:0.5;
    pointer-events:none;
}

.app-header-left, .app-header-right { display:flex; align-items:center; gap:10px; }
.app-header-right { justify-content:flex-end; }
.app-header-center { text-align:center; z-index:1; }

.app-back {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 8px 12px;
    color: var(--col-text-dim);
    text-decoration:none;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    background: rgba(255,255,255,0.02);
    transition: all 0.15s ease;
}
.app-back:hover { color: var(--col-primary); border-color: var(--col-primary); }

.app-title {
    font-size: clamp(18px, 3.5vw, 24px);
    font-weight: 800;
    letter-spacing: 1.5px;
    color: var(--col-text);
    margin: 0;
    display:inline-flex;
    align-items:center;
    gap: 10px;
}

.app-logo-dot {
    display:inline-block;
    width:10px; height:10px;
    border-radius:50%;
    background: radial-gradient(circle at 30% 30%, #ffb347, #ff6a1a 60%, #a13300 100%);
    box-shadow: 0 0 10px var(--col-primary-glow), inset 0 0 3px rgba(0,0,0,0.4);
    animation: pulseDot 2.4s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { box-shadow: 0 0 6px var(--col-primary-glow), inset 0 0 3px rgba(0,0,0,0.4); }
    50% { box-shadow: 0 0 16px var(--col-primary-glow), inset 0 0 3px rgba(0,0,0,0.4); }
}

.app-subtitle {
    font-size: 11px;
    color: var(--col-text-mute);
    font-weight: 500;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Language switcher */
.lang-switcher {
    position: relative;
}

.lang-current {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    background: var(--button-grad);
    color: var(--col-text);
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    cursor:pointer;
    transition: all 0.15s ease;
    min-width: 72px;
    justify-content:center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.lang-current:hover { border-color: var(--col-primary); }
.lang-caret { font-size:10px; opacity:0.6; }

.lang-menu {
    display:none;
    position:absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--col-bg-2);
    border: 1px solid var(--col-border-strong);
    border-radius: var(--radius);
    box-shadow: 0 10px 28px rgba(0,0,0,0.7);
    list-style:none;
    padding: 4px;
    z-index: 1000;
    min-width: 170px;
    max-height: 70vh;
    overflow-y: auto;
}
.lang-menu.open { display:block; }
.lang-menu li {
    padding: 7px 10px;
    cursor:pointer;
    border-radius: 4px;
    display:flex; align-items:center; gap:8px;
    font-size: 13px;
    transition: background 0.12s;
}
.lang-menu li:hover,
.lang-menu li.current { background: rgba(255,106,26,0.15); color: var(--col-primary); }

/* =============================================================
   TRANSPORT BAR
   ============================================================= */
.transport {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--panel-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep);
    margin-bottom: 12px;
}

.transport-grp {
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
}
.transport-grow { flex: 1; min-width: 90px; justify-content:flex-end; }
.transport-fader { min-width: 130px; }

.transport-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--col-text-dim);
    font-weight: 700;
    white-space: nowrap;
}

.transport-select, .transport input[type="number"] {
    padding: 6px 10px;
    font-size: 13px;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    color: var(--col-text);
    font-weight: 600;
    min-width: 54px;
    text-align: center;
}
.transport-select:focus, .transport input[type="number"]:focus {
    border-color: var(--col-primary);
    outline: none;
}

.bpm-box {
    display:inline-flex;
    align-items:center;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.bpm-box input {
    border: none;
    border-radius: 0;
    background: transparent;
    width: 56px;
    padding: 6px 4px;
}
.bpm-nudge {
    width: 26px;
    height: 30px;
    border:0;
    background: #1b1f2b;
    color: var(--col-text-dim);
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    transition: background 0.15s;
}
.bpm-nudge:hover { background: var(--col-primary); color: #000; }

.mini-fader-wrap {
    display:inline-flex; align-items:center; gap:6px; flex:1;
}
.mini-fader {
    -webkit-appearance:none; appearance:none;
    width: 90px; height: 16px;
    background: transparent;
    cursor:pointer;
}
.mini-fader::-webkit-slider-runnable-track {
    width:100%; height: 4px;
    background: linear-gradient(90deg, #050508 0%, #222 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px #000;
}
.mini-fader::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width: 14px; height: 14px;
    margin-top: -5px;
    background: linear-gradient(135deg, #ffb347 0%, #ff6a1a 100%);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: 0 0 6px var(--col-primary-glow);
}
.mini-fader::-moz-range-track {
    height: 4px;
    background: linear-gradient(90deg, #050508 0%, #222 100%);
    border-radius: 2px;
    box-shadow: inset 0 1px 2px #000;
}
.mini-fader::-moz-range-thumb {
    width: 14px; height: 14px;
    background: linear-gradient(135deg, #ffb347 0%, #ff6a1a 100%);
    border: 1px solid #000;
    border-radius: 3px;
    box-shadow: 0 0 6px var(--col-primary-glow);
}
.mini-fader-val {
    min-width: 36px;
    text-align: right;
    font-family: "SF Mono","Roboto Mono","Menlo",monospace;
    font-size: 12px;
    color: var(--col-primary);
    font-weight: 700;
}

.transport-btn {
    padding: 6px 10px;
    font-size: 12px;
    background: var(--button-grad);
    color: var(--col-text);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    cursor:pointer;
    font-weight: 600;
    display:inline-flex; align-items:center; gap:6px;
    transition: all 0.15s;
}
.transport-btn:hover { border-color: var(--col-primary); }
.transport-btn.active {
    background: linear-gradient(180deg, #ff8a3a 0%, #c64d0e 100%);
    color: #fff;
    border-color: #ff8a3a;
    box-shadow: 0 0 10px var(--col-primary-glow);
}

.step-counter {
    font-family: "SF Mono","Roboto Mono","Menlo",monospace;
    font-size: 14px;
    font-weight: 800;
    color: var(--col-playing);
    background: #000;
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    min-width: 68px;
    text-align: center;
    box-shadow: inset 0 0 6px rgba(255,212,0,0.2);
}

.effective-pitch-grp {
    flex:1 1 100%;
    justify-content:flex-end;
}

.effective-pitch {
    font-size: 11px;
    color: var(--col-secondary);
    background: rgba(255,179,71,0.07);
    border: 1px solid rgba(255,179,71,0.25);
    border-radius: var(--radius-sm);
    padding: 4px 10px;
    display:inline-block;
    cursor:help;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* MIDI output select */
.midi-out-container {
    display:inline-flex;
    align-items:center;
    gap: 6px;
}
.midi-out-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--col-text-dim);
    font-weight: 700;
    letter-spacing: 1px;
}
.midi-out-select {
    padding: 4px 8px;
    background: var(--col-bg-0);
    color: var(--col-text);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    max-width: 190px;
}

/* =============================================================
   SPECTRUM
   ============================================================= */
.spectrum-container {
    position:relative;
    background: linear-gradient(180deg, #050710 0%, #000 100%);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    padding: 8px;
    margin-bottom: 12px;
    height: 110px;
    box-shadow: var(--shadow-deep), var(--shadow-inset);
    overflow: hidden;
}
.spectrum-canvas {
    width: 100%; height: 100%;
    display: block;
    background: radial-gradient(ellipse at center, #051015 0%, #000 100%);
    border-radius: var(--radius-sm);
}
.spectrum-overlay-label {
    position:absolute; top:6px; left:14px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    color: rgba(255,106,26,0.55);
    pointer-events:none;
    text-shadow: 0 0 8px rgba(255,106,26,0.3);
}

/* =============================================================
   SYNTH RACK
   ============================================================= */
.synth-rack {
    background: var(--rack-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-deep), var(--shadow-inset);
    margin-bottom: 12px;
    overflow: hidden;
}

.synth-rack-header {
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 16px;
    background: linear-gradient(180deg, #23283a 0%, #161926 100%);
    border-bottom: 1px solid var(--col-border);
}

.rack-brand {
    display:inline-flex;
    align-items:center;
    gap: 8px;
}
.rack-brand-accent {
    width: 6px; height: 20px;
    background: linear-gradient(180deg, var(--col-primary), var(--col-accent));
    border-radius: 2px;
    box-shadow: 0 0 8px var(--col-primary-glow);
}
.rack-brand-label {
    font-size: 12px;
    letter-spacing: 3px;
    font-weight: 800;
    color: var(--col-text);
    text-shadow: 0 1px 2px #000;
}

.rack-waveform {
    display:inline-flex;
    align-items:center;
    gap: 8px;
}
.rack-waveform > label {
    font-size: 10px;
    color: var(--col-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.wave-toggle {
    display:inline-flex;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    overflow:hidden;
}
.wave-opt {
    background: transparent;
    color: var(--col-text-dim);
    border: 0;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s;
}
.wave-opt:hover { color: var(--col-text); }
.wave-opt.active {
    background: linear-gradient(180deg, #2d3142 0%, #1a1d27 100%);
    color: var(--col-primary);
    box-shadow: inset 0 0 8px rgba(255,106,26,0.2);
}
.wave-opt svg { opacity: 0.9; }

.synth-rack-body {
    display:flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
}

.fader-group {
    flex: 1 1 auto;
    min-width: fit-content;
    border-right: 1px solid var(--col-border);
    padding: 10px 10px 14px;
    position: relative;
}
.fader-group:last-child { border-right: 0; }
.fader-group-title {
    font-size: 10px;
    color: var(--col-text-dim);
    letter-spacing: 2px;
    font-weight: 800;
    text-align: center;
    margin-bottom: 10px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.25);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(255,255,255,0.04);
    text-transform: uppercase;
}
.fader-group-body {
    display:flex; gap: 10px; justify-content: center;
}

/* ---------- REAL FADERS (vertical, large, touch-friendly) ---------- */
.fader-cell {
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 4px 2px 6px;
    position: relative;
}

.fader {
    position: relative;
    width: 48px;
    height: 170px;
    background:
        linear-gradient(180deg, #1c1f2a 0%, #0d0f15 100%);
    border: 1px solid var(--col-border-strong);
    border-radius: 8px;
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.8),
        0 1px 1px rgba(255,255,255,0.03);
    cursor: pointer;
    touch-action: none;  /* crucial for pointer move without scroll */
    overflow: hidden;
    user-select: none;
}

/* Tick marks on the side */
.fader-scale {
    position:absolute;
    top: 10px; bottom: 10px;
    right: 5px;
    width: 6px;
    background-image: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.12) 0,
        rgba(255,255,255,0.12) 1px,
        transparent 1px,
        transparent calc(100% / 10)
    );
    pointer-events:none;
}

/* Track (groove) */
.fader-track {
    position:absolute;
    top: 10px; bottom: 10px;
    left: 50%;
    width: 6px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #040506 0%, #0e1014 50%, #040506 100%);
    border-radius: 3px;
    box-shadow: inset 0 0 4px rgba(0,0,0,0.95), inset 0 1px 0 rgba(255,255,255,0.05);
}

/* Fill (highlight from bottom to current position) */
.fader-fill {
    position:absolute;
    left: 50%;
    width: 4px;
    transform: translateX(-50%);
    background: linear-gradient(180deg,
        var(--col-primary) 0%,
        rgba(255,106,26,0.8) 50%,
        rgba(255,106,26,0.3) 100%);
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(255,106,26,0.6);
    bottom: 10px;
    /* --pos is 0..1 ; height occupies that fraction of usable track */
    height: calc((100% - 20px) * var(--pos, 0.5));
    pointer-events: none;
    transition: height 0.04s linear;
}

/* Thumb (the draggable cap) */
.fader-thumb {
    position:absolute;
    left: 50%;
    width: 38px;
    height: 22px;
    transform: translate(-50%, 50%);
    /* usable track area top=10 bottom=10 → reverse: pos=1 at top */
    top: calc(10px + (100% - 20px) * (1 - var(--pos, 0.5)));
    background:
        linear-gradient(180deg, #e8e8ec 0%, #c4c6cc 35%, #4c4f5a 66%, #1c1e27 100%);
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow:
        0 3px 6px rgba(0,0,0,0.6),
        inset 0 1px 1px rgba(255,255,255,0.5),
        inset 0 -1px 2px rgba(0,0,0,0.6);
    pointer-events: none;
    transition: top 0.04s linear, transform 0.1s ease;
}

/* Red-tinted thumb for accent */
.fader-thumb-red {
    background:
        linear-gradient(180deg, #ffc0b0 0%, #ff8a6a 35%, #9a2810 66%, #3a0c0a 100%);
}

.fader-thumb-line {
    position:absolute;
    top: 50%; left: 6px; right: 6px;
    height: 2px;
    background: linear-gradient(90deg, rgba(0,0,0,0.1), #000 50%, rgba(0,0,0,0.1));
    transform: translateY(-50%);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

/* Active/hover on fader */
.fader.dragging,
.fader:hover {
    border-color: var(--col-primary);
    box-shadow:
        inset 0 2px 4px rgba(0,0,0,0.8),
        0 0 8px rgba(255,106,26,0.3);
}
.fader.dragging .fader-thumb,
.fader:active .fader-thumb {
    transform: translate(-50%, 50%) scale(1.06);
}

.fader-label {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--col-text-dim);
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap;
}

.fader-value {
    font-family: "SF Mono","Roboto Mono","Menlo",monospace;
    font-size: 11px;
    font-weight: 700;
    color: var(--col-primary);
    min-width: 58px;
    text-align: center;
    padding: 1px 4px;
    background: rgba(0,0,0,0.25);
    border-radius: 3px;
    border: 1px solid rgba(255,255,255,0.04);
    white-space: nowrap;
}

/* =============================================================
   SEQUENCER TOOLBAR
   ============================================================= */
.seq-toolbar {
    display:flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--col-bg-2);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    box-shadow: var(--shadow-deep);
}

.seq-tool-grp { display:inline-flex; align-items:center; gap:6px; }
.seq-tool-grow { margin-left: auto; gap: 4px; }
.seq-tool-label {
    font-size: 10px;
    letter-spacing: 1px;
    color: var(--col-text-dim);
    font-weight: 700;
    text-transform: uppercase;
}
.seq-tool-select {
    padding: 5px 8px;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    color: var(--col-text);
    font-size: 12px;
}

.seg-switch {
    display:inline-flex;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    padding: 1px;
    gap: 1px;
}
.seg-switch > label, .seg-switch > button {
    padding: 5px 9px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    background: transparent;
    color: var(--col-text-dim);
    border: 0;
    border-radius: 3px;
    transition: all 0.12s;
    display: inline-block;
}
.seg-switch input[type="radio"] { display: none; }
.seg-switch > label:hover > span,
.seg-switch > button:hover { color: var(--col-text); }
.seg-switch input[type="radio"]:checked + span,
.seg-switch > button.active {
    background: linear-gradient(180deg, #ff8a3a 0%, #c64d0e 100%);
    color: #fff;
    box-shadow: 0 0 8px rgba(255,106,26,0.4), inset 0 1px 1px rgba(255,255,255,0.2);
    border-radius: 3px;
    padding: 5px 9px;
    margin: -5px -9px;
}
.seg-switch > label > span { padding: 5px 9px; display: inline-block; }

.icon-btn {
    background: var(--button-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    color: var(--col-text-dim);
    width: 30px; height: 28px;
    font-size: 15px;
    cursor: pointer;
    display: inline-flex;
    align-items:center;
    justify-content:center;
    transition: all 0.15s;
}
.icon-btn:hover { color: var(--col-primary); border-color: var(--col-primary); }

/* =============================================================
   SEQUENCER GRID
   ============================================================= */
.sequencer-container {
    background: var(--panel-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    padding: 8px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-deep), var(--shadow-inset);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sequencer-grid { min-width: min-content; }

.sequencer-grid-inner {
    display: grid;
    gap: 2px;
    background: transparent;
    padding: 2px;
    min-width: min-content;
}

/* Vertical mode : stack bars */
.sequencer-grid.seq-vertical {
    display:flex;
    flex-direction: column;
    gap: 10px;
}
.seq-bar {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.seq-bar-title {
    display:flex;
    align-items:center;
    gap: 8px;
    font-size: 11px;
    color: var(--col-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 6px 8px;
    font-weight: 700;
}
.seq-bar-title > span:first-child { flex: 1; }

.bar-action-btn {
    padding: 3px 8px;
    font-size: 10px;
    background: var(--button-grad);
    color: var(--col-text-dim);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s;
    font-weight: 700;
}
.bar-action-btn:hover { background: var(--col-primary); color: #000; border-color: var(--col-primary); }

/* Note labels column */
.note-label {
    position: sticky;
    left: 0;
    background: linear-gradient(90deg, #1e212c 0%, #161926 100%);
    padding: 0 6px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    color: var(--col-text-dim);
    z-index: 5;
    border-right: 1px solid var(--col-border);
    line-height: 1.15;
}
.note-prog { font-weight: 700; font-family: "SF Mono", "Roboto Mono", monospace; font-size: 11px; }
.note-real { font-size: 9px; color: var(--col-secondary); opacity: 0.9; }

.note-label.c4-row {
    background: linear-gradient(90deg, #0f2a1c 0%, #08150e 100%);
    color: var(--col-note-c);
}
.note-label.c4-row .note-prog {
    color: var(--col-note-c);
    text-shadow: 0 0 6px rgba(0,224,138,0.6);
}

.step-header {
    background: linear-gradient(180deg, #1a1d27 0%, #0e1015 100%);
    padding: 4px 0;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    color: var(--col-text-dim);
    border-bottom: 1px solid var(--col-border);
}
.step-header.beat-column {
    color: var(--col-accent);
    text-shadow: 0 0 4px rgba(255,51,68,0.4);
}

/* STEP & FLAG BUTTONS */
.step-button,
.accent-button,
.slide-button,
.extend-button {
    width: 100%;
    height: 30px;
    background: linear-gradient(180deg, #1a1e2a 0%, #0c0e14 100%);
    border: 1px solid #2a2e3d;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--col-text-mute);
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.1s ease, background 0.12s ease;
    position: relative;
    touch-action: none;
}

.step-button.c4-step {
    background: linear-gradient(180deg, #0a1f14 0%, #061008 100%);
    border-color: #1e4a30;
}

.step-button.active {
    background: linear-gradient(180deg, #ff8a3a 0%, #c64d0e 100%);
    border-color: #ff8a3a;
    color: #fff;
    box-shadow: 0 0 10px var(--col-primary-glow), inset 0 1px 1px rgba(255,255,255,0.3);
}
.step-button.c4-step.active {
    background: linear-gradient(180deg, #30e090 0%, #108050 100%);
    border-color: var(--col-note-c);
    color: #fff;
    box-shadow: 0 0 12px rgba(0,224,138,0.65);
}

.accent-button.active {
    background: linear-gradient(180deg, #ff5566 0%, #a01020 100%);
    border-color: #ff5566;
    color: #fff;
    box-shadow: 0 0 10px var(--col-accent-glow);
}
.slide-button.active {
    background: linear-gradient(180deg, #5a88ff 0%, #1a3aa0 100%);
    border-color: #5a88ff;
    color: #fff;
    box-shadow: 0 0 10px var(--col-slide-glow);
}
.extend-button.active {
    background: linear-gradient(180deg, #ffcc33 0%, #a06b00 100%);
    border-color: #ffcc33;
    color: #000;
    box-shadow: 0 0 10px var(--col-ext-glow);
}

.accent-button, .slide-button, .extend-button {
    height: 24px;
    font-size: 12px;
}

.step-button:active, .accent-button:active,
.slide-button:active, .extend-button:active {
    transform: scale(0.94);
}

.playing {
    outline: 2px solid var(--col-playing) !important;
    outline-offset: -1px;
    box-shadow: 0 0 16px rgba(255,212,0,0.9) !important;
    z-index: 2;
}

.muted-step { opacity: 0.35; filter: grayscale(0.6); }

/* Row backgrounds */
.accent-row-label {
    background: linear-gradient(90deg, #2a0d10 0%, #1a0408 100%) !important;
    color: #ff8888 !important;
}
.accent-row { background: rgba(60,10,20,0.3); }

.slide-row-label {
    background: linear-gradient(90deg, #0d1230 0%, #050720 100%) !important;
    color: #88a8ff !important;
}
.slide-row { background: rgba(20,30,80,0.3); }

.ext-row-label {
    background: linear-gradient(90deg, #2a2210 0%, #1a1604 100%) !important;
    color: #ffd966 !important;
}
.ext-row { background: rgba(70,55,10,0.3); }

/* Beat column (1, 5, 9, 13...) */
.beat-column {
    border-left: 2px solid rgba(255,51,68,0.6) !important;
}
.accent-row.beat-column,
.slide-row.beat-column,
.ext-row.beat-column {
    border-left: 2px solid rgba(255,200,200,0.4) !important;
}

.note-label.header-corner {
    background: linear-gradient(180deg, #1a1d27 0%, #0e1015 100%);
    border-right: 1px solid var(--col-border);
}

/* =============================================================
   TR-909 DRUM PANEL
   ============================================================= */
.drum-909-container {
    background: var(--rack-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    padding: 10px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-deep), var(--shadow-inset);
}
.drum-909-header {
    display:flex;
    justify-content: space-between;
    align-items:center;
    flex-wrap:wrap;
    gap: 8px;
    margin-bottom: 10px;
}
.drum-909-title {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--col-text-dim);
    font-weight: 800;
    text-transform: uppercase;
}
.drum-909-grid {
    background: rgba(0,0,0,0.35);
    padding: 3px;
    border-radius: var(--radius);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.drum-909-grid-inner {
    display: grid;
    gap: 2px;
    min-width: min-content;
}

.drum-909-step-header {
    background: #0d0f15;
    padding: 3px;
    font-size: 9px;
    font-weight: 800;
    text-align: center;
    color: var(--col-text-dim);
    display:flex; align-items:center; justify-content:center;
}
.drum-909-step-header.beat-column { color: var(--col-accent); }

.drum-909-label {
    background: linear-gradient(90deg, #1e212c 0%, #161926 100%);
    color: var(--col-text-dim);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 0 6px;
    font-weight: 700;
    position: sticky;
    left: 0;
    z-index: 5;
    border-right: 1px solid var(--col-border);
}
.drum-909-name { flex:1; font-family:"SF Mono","Roboto Mono",monospace; }
.drum-909-row-ctrls { display:inline-flex; gap:2px; }
.drum-909-row-btn {
    width: 18px; height: 18px;
    min-width: 18px; min-height: 18px;
    padding: 0;
    font-size: 9px;
    font-weight: 800;
    border: 1px solid #333;
    background: #1a1d27;
    color: #666;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1;
    transition: all 0.1s;
}
.drum-909-row-btn:hover { border-color: #555; color: #aaa; }
.drum-909-row-btn.mute-btn.active {
    background: #d02030; color: #fff; border-color: #ff5566;
}
.drum-909-row-btn.solo-btn.active {
    background: #ffaa00; color: #000; border-color: #ffcc55;
}

.drum-909-step {
    width: 100%;
    height: 26px;
    background: linear-gradient(180deg, #0b0d14 0%, #050609 100%);
    border: 1px solid #1e2130;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s ease;
    touch-action: none;
}
.drum-909-step:hover { border-color: #3a3f55; }
.drum-909-step.active {
    background: linear-gradient(180deg, #ff8a3a 0%, #c64d0e 100%);
    border-color: #ff8a3a;
    box-shadow: 0 0 6px rgba(255,106,26,0.7), inset 0 1px 1px rgba(255,255,255,0.3);
}
.drum-909-step.muted { opacity: 0.25; filter: grayscale(0.7); }
.drum-909-step:active { transform: scale(0.94); }

/* Mixer below */
.drum-909-mixer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.drum-909-channel {
    background: #0e1015;
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    padding: 8px;
    box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
}
.drum-909-channel-title {
    font-size: 11px;
    text-align: center;
    color: var(--col-primary);
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--col-border);
}
.drum-909-channel-faders {
    display:flex;
    flex-direction: column;
    gap: 3px;
}
.drum-909-fader-wrap {
    display:flex;
    align-items:center;
    gap: 6px;
}
.drum-909-fader-label {
    font-size: 9px;
    color: var(--col-text-dim);
    width: 28px;
    font-weight: 700;
    text-transform: uppercase;
}
.drum-909-fader-input {
    flex:1;
    accent-color: var(--col-primary);
    height: 14px;
    -webkit-appearance:none; appearance:none;
    background: transparent;
    cursor: pointer;
}
.drum-909-fader-input::-webkit-slider-runnable-track {
    height: 3px;
    background: #000;
    border-radius: 2px;
}
.drum-909-fader-input::-webkit-slider-thumb {
    -webkit-appearance:none; appearance:none;
    width: 12px; height: 12px;
    margin-top: -5px;
    background: linear-gradient(135deg, #ffb347, #ff6a1a);
    border-radius: 2px;
    border: 1px solid #000;
}
.drum-909-fader-input::-moz-range-track {
    height: 3px; background: #000; border-radius: 2px;
}
.drum-909-fader-input::-moz-range-thumb {
    width: 12px; height: 12px;
    background: linear-gradient(135deg, #ffb347, #ff6a1a);
    border-radius: 2px;
    border: 1px solid #000;
}

/* =============================================================
   CONTROLS PANEL (playback, secondary)
   ============================================================= */
.controls-panel {
    display:flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--rack-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    box-shadow: var(--shadow-deep);
}

.playback-controls,
.secondary-buttons {
    display:flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.btn {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform 0.08s ease, box-shadow 0.12s ease, filter 0.12s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    background: var(--button-grad);
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.4; cursor: default; }

.btn-play {
    background: linear-gradient(180deg, #20d48a 0%, #008055 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 12px rgba(32,212,138,0.25);
}
.btn-stop {
    background: linear-gradient(180deg, #ff4c5c 0%, #a01020 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.5), 0 0 12px rgba(255,76,92,0.25);
}
.btn-clear {
    background: linear-gradient(180deg, #525668 0%, #262938 100%);
    color: var(--col-text);
    border-color: var(--col-border);
}
.btn-save, .btn-load {
    background: linear-gradient(180deg, #1ab08a 0%, #0a6050 100%);
}
.btn-random {
    background: linear-gradient(180deg, #d040aa 0%, #701560 100%);
}
.btn-midi {
    background: linear-gradient(180deg, #5a7aff 0%, #2030a0 100%);
}
.btn-faq {
    background: linear-gradient(180deg, #5a6278 0%, #30374a 100%);
}
.btn-preset {
    background: linear-gradient(180deg, #00aaff 0%, #006a88 100%);
}
.btn-generate {
    background: linear-gradient(180deg, #ff8a3a 0%, #c64d0e 100%);
}
.btn-secondary {
    background: linear-gradient(180deg, #454a5e 0%, #23283a 100%);
    color: var(--col-text-dim);
    border: 1px solid var(--col-border);
}

/* TUTO SUPREME (big CTA) */
.btn-tuto-supreme {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: var(--radius-lg);
    cursor: pointer;
    background: linear-gradient(135deg, #ff6a1a 0%, #ff3344 50%, #c21e84 100%);
    color: #fff;
    box-shadow:
        0 6px 18px rgba(255,50,100,0.45),
        inset 0 1px 2px rgba(255,255,255,0.25);
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.btn-tuto-supreme::before {
    content:"";
    position:absolute; inset:0;
    background: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.2) 50%, transparent 100%);
    transform: translateX(-100%);
    animation: tutoShine 3s ease-in-out infinite;
}
@keyframes tutoShine {
    0%, 100% { transform: translateX(-100%); }
    50% { transform: translateX(100%); }
}
.btn-tuto-supreme:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-tuto-supreme:active { transform: translateY(1px); }

.btn-tuto-icon { font-size: 22px; }
.btn-tuto-text {
    font-size: 15px;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.btn-tuto-sub {
    font-size: 10px;
    font-weight: 500;
    opacity: 0.88;
    text-transform: none;
}

/* =============================================================
   OVERLAY + TOAST
   ============================================================= */
.overlay {
    display:none;
    position:fixed; inset:0;
    background: rgba(0,0,0,0.72);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}
.overlay.active { display: flex; }

.spinner {
    width: 52px; height: 52px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.15);
    border-top-color: var(--col-primary);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20,24,34,0.96);
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    border-radius: var(--radius);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
    border: 1px solid var(--col-border);
    box-shadow: 0 8px 20px rgba(0,0,0,0.6);
    max-width: calc(100vw - 40px);
    text-align: center;
}
.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =============================================================
   MODALS
   ============================================================= */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    backdrop-filter: blur(3px);
    z-index: 1200;
    overflow-y: auto;
    padding: 20px;
}
.modal.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.modal-content {
    background: var(--rack-grad);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-lg);
    padding: 18px;
    width: 100%;
    max-width: 900px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.8);
    margin-top: 20px;
}
.modal-header {
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--col-border);
}
.modal-header h2 {
    font-size: 18px;
    color: var(--col-primary);
    font-weight: 800;
    letter-spacing: 0.5px;
}
.modal-close {
    width: 34px; height: 34px;
    font-size: 24px;
    cursor: pointer;
    color: var(--col-text-dim);
    background: transparent;
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items:center;
    justify-content:center;
    transition: all 0.12s;
    line-height: 1;
}
.modal-close:hover { color: #fff; background: var(--col-danger); border-color: var(--col-danger); }

.progress-bar {
    height: 4px;
    background: var(--col-bg-0);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 14px;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--col-primary), var(--col-secondary));
    width: 0%;
    transition: width 0.3s;
}

/* Pattern modal layout */
.pattern-layout {
    display:flex;
    flex-direction: column;
    gap: 14px;
}
@media (min-width: 768px) {
    .pattern-layout { flex-direction: row; }
}

.pattern-list, .track-config {
    flex: 1;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    padding: 10px;
}
.pattern-list h3, .track-config h3 {
    font-size: 13px;
    margin-bottom: 8px;
    color: var(--col-text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.pattern-list ul { list-style:none; max-height: 360px; overflow-y: auto; }
.pattern-list li {
    border-bottom: 1px solid var(--col-border);
    padding: 8px 0;
    display:flex;
    flex-direction:column;
    gap: 4px;
}
.pattern-list li:last-child { border-bottom: 0; }
.pattern-list li > div:first-child {
    font-weight: 700;
    color: var(--col-text);
    font-size: 13px;
}
.pattern-meta {
    font-size: 10px;
    color: var(--col-text-mute);
    font-family: "SF Mono","Roboto Mono",monospace;
    opacity: 0.8;
}
.pattern-actions {
    display:flex;
    gap: 4px;
    flex-wrap: wrap;
}
.pattern-actions button {
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--button-grad);
    color: var(--col-text-dim);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.1s;
}
.pattern-actions button:hover {
    color: var(--col-primary); border-color: var(--col-primary);
}
.pattern-actions .btn-lib-delete:hover {
    color: #fff; background: var(--col-danger); border-color: var(--col-danger);
}

.track-length-row {
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 12px;
}
.track-length-row input {
    width: 72px;
    padding: 5px;
    background: var(--col-bg-2);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    color: var(--col-text);
    font-size: 13px;
    text-align: center;
}

.track-row {
    display:flex;
    align-items:center;
    gap: 8px;
    margin-bottom: 6px;
}
.track-row label { width: 32px; font-size:11px; color: var(--col-text-dim); font-weight:700; }
.track-row select {
    flex:1;
    padding: 4px 6px;
    background: var(--col-bg-2);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    color: var(--col-text);
    font-size: 12px;
}

.track-controls {
    display:flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Tutorial content */
.td3-tuning-instructions {
    margin: 10px 0;
    padding: 10px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #2a2416, #3a2814);
    border: 1px solid #ffaa00;
    font-size: 13px;
}
.td3-tuning-instructions h3 { color: #ffcc55; margin-bottom: 6px; font-size: 14px; }
.td3-tuning-instructions ul { margin-left: 16px; }
.td3-tuning-instructions li { margin-bottom: 4px; }

.td3-multi-intro {
    margin: 10px 0 12px;
    padding: 10px;
    border-radius: var(--radius);
    background: #0f2030;
    border: 1px solid #336699;
    font-size: 13px;
}
.td3-multi-intro h3 { color: #66aaff; margin-bottom: 6px; font-size: 14px; }

.td3-track-write {
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #1a2812, #0f3818);
    border: 2px solid #44cc66;
    font-size: 13px;
}
.td3-track-write h3 { color: #66ff99; margin-bottom: 8px; font-size: 15px; }
.track-write-steps { margin-left: 20px; margin-top: 8px; }
.track-write-steps li { margin-bottom: 6px; line-height: 1.5; }
.track-write-tip {
    margin-top: 10px;
    padding: 8px;
    background: rgba(255,204,0,0.1);
    border-left: 3px solid var(--col-ext);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.tutorial-pattern-title {
    margin: 10px 0 4px;
    font-weight: 800;
    color: var(--col-primary);
    font-size: 15px;
}
.td3-instructions {
    margin-top: 8px;
    padding: 10px;
    border-radius: var(--radius);
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    font-size: 13px;
}
.td3-instructions h3 { margin-bottom: 6px; color: var(--col-secondary); font-size: 14px; }
.td3-instructions h4 { margin: 8px 0 4px; color: var(--col-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.td3-instructions ol, .td3-instructions ul {
    margin-left: 18px; margin-bottom: 6px;
}
.td3-instructions li { margin-bottom: 3px; }

.tutorial-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 12px;
}
.tutorial-table th, .tutorial-table td {
    border: 1px solid var(--col-border);
    padding: 5px 6px;
    text-align: center;
}
.tutorial-table th {
    background: var(--col-bg-2);
    color: var(--col-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 11px;
}
.tutorial-table td { background: var(--col-bg-0); }
.tutorial-table tr:nth-child(even) td { background: var(--col-bg-1); }
.tutorial-table td.t-accent { color: #ff6677; font-weight: 700; }
.tutorial-table td.t-slide { color: #88aaff; font-weight: 700; }
.tutorial-table td.t-ext { color: var(--col-ext); font-style: italic; }

/* FAQ */
.faq-content { font-size: 13px; line-height: 1.5; }
.faq-content details {
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 10px 12px;
}
.faq-content details[open] { border-color: var(--col-primary); }
.faq-content summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--col-secondary);
    padding: 2px 0;
    list-style: none;
}
.faq-content summary::-webkit-details-marker { display: none; }
.faq-content summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s;
    color: var(--col-primary);
}
.faq-content details[open] summary::before { transform: rotate(90deg); }
.faq-content p { margin-top: 6px; color: var(--col-text); }

/* Shortcut list */
.shortcut-list {
    list-style:none;
    display:flex;
    flex-direction: column;
    gap: 6px;
}
.shortcut-list li {
    padding: 8px 12px;
    background: var(--col-bg-0);
    border: 1px solid var(--col-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: "SF Mono","Roboto Mono",monospace;
}

/* =============================================================
   RTL support
   ============================================================= */
html[dir="rtl"] .app-header { grid-template-columns: 1fr auto 1fr; }
html[dir="rtl"] .app-back { flex-direction: row-reverse; }
html[dir="rtl"] .note-label { border-right: 0; border-left: 1px solid var(--col-border); }

/* =============================================================
   RESPONSIVE (mobile-first is the default; adjustments here)
   ============================================================= */
@media (max-width: 720px) {
    body { padding-left: max(6px, env(safe-area-inset-left, 0px)); padding-right: max(6px, env(safe-area-inset-right, 0px)); }
    .app-header {
        grid-template-columns: auto 1fr auto;
        gap: 8px;
        padding: 10px 10px;
    }
    .app-title { font-size: 16px; }
    .app-subtitle { display: none; }
    .app-back { padding: 6px 8px; font-size: 12px; }
    .lang-current { min-width: 54px; padding: 5px 8px; }
    .transport { gap: 8px; padding: 8px 10px; }
    .transport-fader { min-width: auto; }
    .transport-grow, .effective-pitch-grp {
        flex-basis: 100%;
        justify-content: flex-start;
    }
    .spectrum-container { height: 80px; }
    .fader { width: 44px; height: 150px; }
    .fader-group { padding: 8px 6px 12px; }
    .fader-group-body { gap: 8px; }
    .fader-cell { padding: 2px; }
    .fader-label { font-size: 9px; }
    .fader-value { font-size: 10px; min-width: 54px; }
    .btn { padding: 9px 12px; font-size: 11px; }
    .btn-tuto-text { font-size: 13px; letter-spacing: 0.5px; }
    .modal { padding: 10px; }
    .modal-content { padding: 12px; }
    .modal-header h2 { font-size: 15px; }
    .step-header { font-size: 9px; }
}

@media (max-width: 480px) {
    .fader { width: 38px; height: 140px; }
    .fader-thumb { width: 32px; }
    .btn-tuto-supreme { padding: 12px 14px; }
    .btn-tuto-text { font-size: 12px; }
    .btn-tuto-sub { font-size: 9px; }
}

@media (min-width: 1100px) {
    body { max-width: 1280px; margin: 0 auto; }
    .fader { width: 52px; height: 190px; }
    .fader-cell { padding: 4px 4px 6px; }
}

/* High-contrast mode nicety */
@media (prefers-contrast: more) {
    .fader-track { background: #000; }
    .step-button, .accent-button, .slide-button, .extend-button { border-width: 2px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.05s !important;
    }
}

/* Print: nope */
@media print { body { display: none; } }