/* ============================================================
   WaveSmith — SNES Music Studio
   Theme: "NEON GRID" — retro-futuristic CRT aesthetic inspired
   by 16-bit title screens, synthwave, and the SNES era.
   ============================================================ */

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

:root {
    /* Color palette — deep space with neon phosphor accents */
    --bg-deep: #06080f;
    --bg-mid: #0d1020;
    --bg-surface: #12162b;
    --bg-elevated: #1a1f3a;
    --bg-hover: #232952;

    /* Semi-transparent variants so the animated starfield shows through
       the main panels. Opaque versions are kept for nested elements that
       need a solid backdrop (inputs, dropdowns, etc.). */
    --bg-mid-trans: rgba(13, 16, 32, 0.82);
    --bg-surface-trans: rgba(18, 22, 43, 0.80);

    --border: #2a1f4a;
    --border-light: #3d2f6e;
    --border-neon: #00e5ff;

    --text-primary: #e8ecf4;
    --text-secondary: #8b9bb8;
    --text-muted: #5a6a8a;
    --text-dim: #4a5a7a;

    --accent-primary: #00e5ff;       /* cyan neon — main accent */
    --accent-secondary: #b14cff;     /* purple neon */
    --accent-tertiary: #ff4488;      /* magenta neon */
    --accent-success: #44ff88;       /* phosphor green */
    --accent-warning: #ffcc00;       /* amber neon */
    --accent-error: #ff4477;         /* red neon */

    /* Aliases used by scattered rules — previously undefined, so their
       per-rule fallbacks silently applied and drifted from the palette.
       Defined here so the whole UI follows the palette. */
    --danger: var(--accent-error);
    --bg-primary: var(--bg-mid);
    --bg-input: rgba(0, 0, 0, 0.25);
    --led-dim: #0d0d18;

    --gradient-primary: linear-gradient(135deg, #00e5ff 0%, #b14cff 100%);
    --gradient-secondary: linear-gradient(135deg, #b14cff 0%, #ff4488 100%);
    --gradient-neon: linear-gradient(90deg, #00e5ff, #b14cff, #ff4488);
    --gradient-ocean: linear-gradient(180deg, #06080f 0%, #0d1020 50%, #12162b 100%);
    --gradient-grid: linear-gradient(180deg, rgba(177,76,255,0.08) 0%, transparent 70%);

    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);

    /* Neon glow shadows */
    --glow-cyan: 0 0 8px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.2);
    --glow-purple: 0 0 8px rgba(177, 76, 255, 0.5), 0 0 20px rgba(177, 76, 255, 0.2);
    --glow-pink: 0 0 8px rgba(255, 68, 136, 0.5), 0 0 20px rgba(255, 68, 136, 0.2);
    --glow-green: 0 0 8px rgba(68, 255, 136, 0.5), 0 0 20px rgba(68, 255, 136, 0.2);
    --shadow-glow: var(--glow-cyan);

    /* Sharp pixel-style corners (minimal rounding for retro feel) */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'VT323', 'JetBrains Mono', 'Fira Code', monospace;
    --font-pixel: 'Press Start 2P', 'VT323', monospace;

    /* Aliases — older rules in the composer and piano roll reference these
       shorter names. Without them those declarations were invalid and silently
       dropped (transparent backgrounds, inherited colors). */
    --text: var(--text-primary);
    --accent: var(--accent-primary);
    --bg-dark: var(--bg-deep);
    --bg-darker: var(--bg-deep);
    --border-color: var(--border);
    --mono-font: var(--font-mono);
}

html, body {
    height: 100%;
    background: var(--gradient-ocean);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 1.5;
    overflow: hidden;
    margin: 0;
    padding: 0;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* --- CRT Scanline Overlay --- */
.crt-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 9999;
    background:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.06) 0px,
            rgba(0, 0, 0, 0.06) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: multiply;
    opacity: 0.5;
}
.crt-overlay::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.4) 100%);
    pointer-events: none;
}

/* --- Animated Starfield Background --- */
.starfield {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.stars {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-repeat: repeat;
}
.stars-1 {
    background-image:
        radial-gradient(1px 1px at 20px 30px, rgba(0,229,255,0.6), transparent),
        radial-gradient(1px 1px at 73px 110px, rgba(177,76,255,0.5), transparent),
        radial-gradient(1px 1px at 155px 50px, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 90px 175px, rgba(0,229,255,0.3), transparent),
        radial-gradient(1px 1px at 240px 90px, rgba(177,76,255,0.4), transparent),
        radial-gradient(1px 1px at 180px 200px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 45px 250px, rgba(0,229,255,0.35), transparent),
        radial-gradient(1px 1px at 270px 160px, rgba(255,68,136,0.3), transparent),
        radial-gradient(1px 1px at 120px 20px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 210px 270px, rgba(0,229,255,0.3), transparent),
        radial-gradient(1px 1px at 300px 60px, rgba(177,76,255,0.35), transparent),
        radial-gradient(1px 1px at 60px 180px, rgba(255,255,255,0.2), transparent);
    background-size: 350px 350px;
    animation: stars-drift 60s linear infinite;
}
.stars-2 {
    background-image:
        radial-gradient(1px 1px at 50px 50px, rgba(255,68,136,0.5), transparent),
        radial-gradient(1px 1px at 180px 120px, rgba(255,255,255,0.3), transparent),
        radial-gradient(1px 1px at 300px 30px, rgba(0,229,255,0.4), transparent),
        radial-gradient(1px 1px at 90px 280px, rgba(177,76,255,0.3), transparent),
        radial-gradient(1px 1px at 380px 200px, rgba(255,68,136,0.25), transparent),
        radial-gradient(1px 1px at 250px 350px, rgba(0,229,255,0.3), transparent),
        radial-gradient(1px 1px at 140px 220px, rgba(255,255,255,0.2), transparent),
        radial-gradient(1px 1px at 340px 100px, rgba(177,76,255,0.35), transparent),
        radial-gradient(1px 1px at 20px 160px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 410px 280px, rgba(0,229,255,0.2), transparent);
    background-size: 450px 450px;
    animation: stars-drift 90s linear infinite reverse;
}
.stars-3 {
    background-image:
        radial-gradient(2px 2px at 80px 20px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 220px 90px, rgba(0,229,255,0.6), transparent),
        radial-gradient(1px 1px at 380px 150px, rgba(255,68,136,0.4), transparent),
        radial-gradient(2px 2px at 150px 280px, rgba(255,255,255,0.35), transparent),
        radial-gradient(1px 1px at 450px 50px, rgba(0,229,255,0.3), transparent),
        radial-gradient(1px 1px at 320px 380px, rgba(177,76,255,0.3), transparent),
        radial-gradient(1px 1px at 50px 200px, rgba(255,255,255,0.25), transparent),
        radial-gradient(1px 1px at 490px 250px, rgba(0,229,255,0.35), transparent);
    background-size: 550px 550px;
    animation: stars-drift 120s linear infinite;
}
@keyframes stars-drift {
    from { transform: translateY(0); }
    to { transform: translateY(-3000px); }
}

/* --- Loading Screen --- */
#loading {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-ocean);
    z-index: 10000;
}
.loading-screen {
    text-align: center;
    padding: 40px;
}
.loading-logo {
    display: inline-flex;
    gap: 4px;
    margin-bottom: 24px;
}
.loading-logo span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    font-family: var(--font-pixel);
    font-size: 24px;
    border: 2px solid;
}
.loading-w {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    text-shadow: 0 0 10px var(--accent-primary);
    box-shadow: var(--glow-cyan), inset 0 0 10px rgba(0,229,255,0.1);
}
.loading-s {
    color: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    text-shadow: 0 0 10px var(--accent-tertiary);
    box-shadow: var(--glow-pink), inset 0 0 10px rgba(255,68,136,0.1);
}
.loading-title {
    font-family: var(--font-pixel);
    font-size: 28px;
    color: var(--text-primary);
    letter-spacing: 4px;
    margin-bottom: 8px;
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.6),
        0 0 20px rgba(0, 229, 255, 0.3),
        0 0 40px rgba(177, 76, 255, 0.2);
    animation: title-glow 2s ease-in-out infinite alternate;
}
.loading-subtitle {
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--accent-secondary);
    letter-spacing: 6px;
    margin-bottom: 32px;
    text-shadow: 0 0 8px rgba(177, 76, 255, 0.5);
}
.loading-bar {
    width: 240px;
    height: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    margin: 0 auto 12px;
    overflow: hidden;
    position: relative;
}
.loading-bar-fill {
    position: absolute;
    top: 0; left: 0;
    height: 100%;
    width: 40%;
    background: var(--gradient-neon);
    box-shadow: var(--glow-cyan);
    animation: loading-slide 1.5s ease-in-out infinite;
}
@keyframes loading-slide {
    0% { left: -40%; }
    100% { left: 100%; }
}
.loading-text {
    font-family: var(--font-pixel);
    font-size: 10px;
    color: var(--text-secondary);
    letter-spacing: 2px;
    animation: blink-text 1s steps(2) infinite;
}
@keyframes blink-text {
    50% { opacity: 0.3; }
}
@keyframes title-glow {
    from {
        text-shadow:
            0 0 10px rgba(0, 229, 255, 0.6),
            0 0 20px rgba(0, 229, 255, 0.3),
            0 0 40px rgba(177, 76, 255, 0.2);
    }
    to {
        text-shadow:
            0 0 15px rgba(0, 229, 255, 0.8),
            0 0 30px rgba(0, 229, 255, 0.5),
            0 0 60px rgba(177, 76, 255, 0.3),
            0 0 80px rgba(255, 68, 136, 0.2);
    }
}

/* --- Scrollbar --- */
/* WebKit (Chrome, Safari, Edge) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track {
    background: var(--bg-deep);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
::-webkit-scrollbar-thumb {
    background: var(--border-light);
    border: 2px solid var(--bg-deep);
    border-radius: 6px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
    box-shadow: var(--glow-purple);
}
::-webkit-scrollbar-thumb:active {
    background: var(--accent-primary);
    box-shadow: var(--glow-cyan);
}
/* Corner where two scrollbars meet */
::-webkit-scrollbar-corner {
    background: var(--bg-deep);
}
/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-light) var(--bg-deep);
}

/* Arrangement tracks + piano roll grid: the HORIZONTAL scrollbars are
   custom div-based bars (see components/hscrollbar.rs) because Firefox
   cannot render thick native bars — overlay scrollbars ignore CSS sizing
   and scrollbar-width only offers thin/auto/none. overflow-x: hidden
   removes the native bar (programmatic scrollLeft still works); the
   custom bar and a wheel handler drive horizontal scrolling. Vertical
   scrolling stays native. */
.arr-tracks,
.pr-grid-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto;
    scrollbar-color: var(--accent-secondary) var(--bg-deep);
}

/* --- Custom horizontal scrollbar (components/hscrollbar.rs) --- */
.ws-hscrollbar {
    position: relative;
    height: 20px;
    flex-shrink: 0;
    background: var(--bg-deep);
    border-top: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    /* Contain the thumb */
    overflow: hidden;
}

.ws-hscrollbar-thumb {
    position: absolute;
    top: 3px;
    bottom: 3px;
    background: var(--border-light);
    border-radius: 7px;
    cursor: grab;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.ws-hscrollbar-thumb:hover {
    background: var(--accent-secondary);
    box-shadow: var(--glow-purple);
}

.ws-hscrollbar-thumb:active {
    background: var(--accent-primary);
    box-shadow: var(--glow-cyan);
    cursor: grabbing;
}

/* Edge drag handles for Ableton-style zoom (arrangement view only).
   The handles sit at the left/right edges of the thumb and are
   grabbable to resize the visible range. */
.ws-hscrollbar-edge {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 1;
}
.ws-hscrollbar-edge-left {
    left: 0;
    border-radius: 7px 0 0 7px;
}
.ws-hscrollbar-edge-right {
    right: 0;
    border-radius: 0 7px 7px 0;
}
.ws-hscrollbar-edge:hover {
    background: var(--accent-primary);
    box-shadow: var(--glow-cyan);
}

/* --- Typography --- */
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
h3 { font-size: 1rem; font-weight: 600; }

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    background: var(--bg-elevated);
    color: var(--text-primary);
    position: relative;
}

.btn-primary {
    background: var(--bg-deep);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
    box-shadow: inset 0 0 8px rgba(0, 229, 255, 0.1);
}
.btn-primary:hover {
    background: rgba(0, 229, 255, 0.1);
    box-shadow: var(--glow-cyan), inset 0 0 12px rgba(0, 229, 255, 0.15);
    transform: translateY(-1px);
}
.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
}
.btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent-secondary);
    box-shadow: 0 0 8px rgba(177, 76, 255, 0.2);
}

.btn-danger {
    background: transparent;
    color: var(--accent-error);
    border: 1px solid var(--accent-error);
    text-shadow: 0 0 6px rgba(255, 68, 119, 0.4);
}
.btn-danger:hover {
    background: rgba(255, 68, 119, 0.1);
    border-color: var(--accent-error);
    box-shadow: 0 0 10px rgba(255, 68, 119, 0.3);
}

.btn-export {
    background: var(--bg-deep);
    color: var(--accent-success);
    border: 1px solid var(--accent-success);
    width: 100%;
    justify-content: center;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(68, 255, 136, 0.5);
    box-shadow: inset 0 0 8px rgba(68, 255, 136, 0.1);
}
.btn-export:hover {
    background: rgba(68, 255, 136, 0.1);
    box-shadow: var(--glow-green), inset 0 0 12px rgba(68, 255, 136, 0.15);
}

.btn-link {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
}
.btn-link:hover {
    color: var(--accent-primary);
    border-color: var(--border-light);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.btn-playing {
    background: rgba(255, 68, 119, 0.15);
    color: var(--accent-error);
    border: 1px solid var(--accent-error);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(255, 68, 119, 0.6);
    animation: pulse-play 1s ease-in-out infinite;
}

@keyframes pulse-play {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 68, 119, 0.4); }
    50% { box-shadow: 0 0 20px rgba(255, 68, 119, 0.8), 0 0 40px rgba(255, 68, 119, 0.3); }
}

/* Loop toggle button — amber when active, muted when off. */
.btn-loop {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
    font-size: 13px;
}
.btn-loop:hover {
    color: var(--accent-warning);
    border-color: var(--accent-warning);
}
.btn-loop.active {
    background: rgba(255, 204, 0, 0.12);
    color: var(--accent-warning);
    border: 1px solid var(--accent-warning);
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.4);
}

/* --- Studio Layout --- */
.app-root {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.studio-page {
    height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- Header --- */
.studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 56px;
    background:
        linear-gradient(180deg, rgba(177, 76, 255, 0.06) 0%, transparent 100%),
        var(--bg-mid-trans);
    border-bottom: 1px solid var(--accent-secondary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(177, 76, 255, 0.3);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.header-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo {
    font-size: 24px;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.6));
    display: flex;
    gap: 3px;
}
.logo-w-sm, .logo-s-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-family: var(--font-pixel);
    font-size: 12px;
    border: 1.5px solid;
}
.logo-w-sm {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    text-shadow: 0 0 6px var(--accent-primary);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.4), inset 0 0 6px rgba(0,229,255,0.1);
}
.logo-s-sm {
    color: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    text-shadow: 0 0 6px var(--accent-tertiary);
    box-shadow: 0 0 6px rgba(255, 68, 136, 0.4), inset 0 0 6px rgba(255,68,136,0.1);
}

.header-title h1 {
    font-family: var(--font-pixel);
    font-size: 0.95rem;
    color: var(--accent-primary);
    letter-spacing: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    text-shadow:
        0 0 8px rgba(0, 229, 255, 0.6),
        0 0 16px rgba(0, 229, 255, 0.3);
}

.header-subtitle {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--accent-secondary);
    display: block;
    margin-top: -2px;
    letter-spacing: 2px;
    text-shadow: 0 0 4px rgba(177, 76, 255, 0.4);
}

.header-tabs {
    display: flex;
    gap: 2px;
}

.tab {
    padding: 8px 20px;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tab:hover {
    color: var(--text-primary);
    background: rgba(0, 229, 255, 0.05);
    border-bottom-color: var(--border-light);
}

.tab.active {
    color: var(--accent-primary);
    background: rgba(0, 229, 255, 0.08);
    border-bottom-color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-mem-badge {
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.7;
    white-space: nowrap;
    cursor: help;
}

.header-mem-badge.warn {
    color: var(--accent-warning);
    opacity: 1;
    font-weight: bold;
}

/* --- Guided spotlight tour --- */
/* --- Guided tour: a futuristic vision in a retro style ------------------ */
/* Neon-CRT spotlight: cyan core ring with a slow magenta breathing halo.   */
.tour-spotlight {
    position: fixed;
    z-index: 1300;
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 9999px rgba(3, 5, 12, 0.72), var(--glow-cyan);
    pointer-events: none;
    transition: left 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                top 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.25s cubic-bezier(0.22, 1, 0.36, 1),
                height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    animation: tour-spotlight-pulse 2.4s ease-in-out infinite;
}

@keyframes tour-spotlight-pulse {
    0%, 100% {
        box-shadow: 0 0 0 9999px rgba(3, 5, 12, 0.72),
                    0 0 10px rgba(0, 229, 255, 0.55), 0 0 26px rgba(0, 229, 255, 0.22);
    }
    50% {
        box-shadow: 0 0 0 9999px rgba(3, 5, 12, 0.72),
                    0 0 14px rgba(0, 229, 255, 0.7), 0 0 34px rgba(255, 68, 136, 0.28);
    }
}

.tour-card {
    position: fixed;
    z-index: 1301;
    width: 340px;
    pointer-events: none;
}

/* CRT console card: neon gradient frame, faint scanlines, soft entrance. */
.tour-card-inner {
    pointer-events: auto;
    position: relative;
    background:
        linear-gradient(var(--bg-elevated), var(--bg-elevated)) padding-box,
        linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary)) border-box;
    border: 1px solid transparent;
    border-radius: var(--radius-lg);
    padding: 12px 16px 14px;
    box-shadow: var(--shadow-lg), var(--glow-cyan);
    overflow: hidden;
    animation: tour-card-in 0.22s ease-out;
}

/* Scanlines + a whisper of phosphor bloom across the card. */
.tour-card-inner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0.025) 0px,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px,
            transparent 3px
        );
    mix-blend-mode: screen;
}

@keyframes tour-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.tour-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.tour-chip {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.14em;
    color: var(--accent-tertiary);
    border: 1px solid var(--accent-tertiary);
    border-radius: var(--radius-sm);
    padding: 3px 6px 2px;
    text-shadow: 0 0 8px rgba(255, 68, 136, 0.6);
    box-shadow: inset 0 0 8px rgba(255, 68, 136, 0.12);
}

.tour-progress {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    letter-spacing: 0.12em;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
}

.tour-card h4 {
    color: var(--accent-primary);
    margin: 2px 0 6px;
    font-size: 1rem;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.tour-card p {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
    margin: 0;
}

/* Interactive-step callout: amber phosphor with a blinking cursor square. */
.tour-hint {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--accent-warning);
    font-size: 0.78rem;
    margin-top: 9px;
    padding: 5px 8px;
    border: 1px dashed rgba(255, 204, 0, 0.45);
    border-radius: var(--radius-sm);
    background: rgba(255, 204, 0, 0.05);
}

.tour-hint-pulse {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    background: var(--accent-warning);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.8);
    animation: tour-hint-blink 1.1s steps(2, start) infinite;
}

@keyframes tour-hint-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Pixel progress dots: filled = done (cyan), lit = current (magenta). */
.tour-dots {
    display: flex;
    gap: 5px;
    margin-top: 11px;
}

.tour-dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(0, 229, 255, 0.35);
    background: transparent;
    transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.tour-dot.done {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.tour-dot.current {
    background: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    box-shadow: 0 0 8px rgba(255, 68, 136, 0.75);
    animation: tour-hint-blink 1.4s ease-in-out infinite;
}

.tour-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 11px;
}

.tour-skip-step {
    opacity: 0.85;
}

@media (max-width: 560px) {
    .tour-card {
        width: min(340px, calc(100vw - 24px));
    }
}

/* --- Transport Bar --- */
.transport-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 20px;
    height: 32px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, transparent 100%),
        var(--bg-mid-trans);
    border-bottom: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--text-secondary);
    letter-spacing: 1px;
    flex-shrink: 0;
}

.transport-info {
    display: flex;
    gap: 16px;
}

.transport-status {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

/* --- Studio Content --- */
.studio-content {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.studio-sidebar {
    width: 240px;
    background: var(--bg-mid-trans);
    border-right: 1px solid var(--border);
    padding: 16px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-section {
    margin-bottom: 0;
}

.sidebar-section h3 {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.sidebar-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
}

.info-label { color: var(--text-muted); }
.info-value { color: var(--text-primary); font-weight: 500; }

/* --- Voice Budget (sidebar) --- */
.voice-budget {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.voice-summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: rgba(68, 255, 136, 0.06);
    border: 1px solid rgba(68, 255, 136, 0.25);
}
.voice-summary.warn {
    background: rgba(255, 204, 0, 0.08);
    border-color: rgba(255, 204, 0, 0.3);
}
.voice-summary.over {
    background: rgba(255, 68, 119, 0.1);
    border-color: var(--accent-error);
}

.voice-count {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
    flex: none;
}
.voice-count-num { color: var(--text-primary); }
.voice-count-slash { color: var(--text-muted); margin: 0 1px; }
.voice-count-max { color: var(--text-secondary); }
.voice-summary.warn .voice-count-num { color: var(--accent-warning); }
.voice-summary.over .voice-count-num { color: var(--accent-error); }

.voice-bar-wrap {
    flex: 1;
    height: 6px;
    background: var(--bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}
.voice-bar {
    height: 100%;
    background: var(--accent-success);
    border-radius: 3px;
    transition: width 0.2s ease, background 0.2s ease;
}
.voice-bar.warn { background: var(--accent-warning); }
.voice-bar.over { background: var(--accent-error); }

.voice-warning {
    font-size: 12px;
    color: var(--accent-error);
    padding: 6px 10px;
    background: rgba(255, 68, 119, 0.08);
    border: 1px solid rgba(255, 68, 119, 0.25);
    border-radius: var(--radius-sm);
}
.voice-hint {
    font-size: 12px;
    color: var(--accent-warning);
    padding: 0 2px;
}
.voice-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 2px;
}

.voice-breakdown {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}
.voice-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}
.voice-bd-name {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
}
.voice-bd-count {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-weight: 600;
    flex: none;
}

/* --- Instrument editor voice count --- */
.inst-voice-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-left: 8px;
    white-space: nowrap;
}
.inst-voice-count.over {
    color: var(--accent-error);
    font-weight: 600;
}

.sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sidebar-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 8px;
    line-height: 1.4;
}

/* --- Header Menu Dropdown --- */
.menu-dropdown-container {
    position: relative;
    display: inline-flex;
}

.menu-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
}

.menu-icon {
    font-size: 14px;
    line-height: 1;
}

.menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: transparent;
}

/* Share code modal */
.modal-backdrop {
    position: fixed;
    inset: 0;
    /* Above in-canvas overlays (context menu 201, tooltips 1000 excepted)
       so dialogs always sit on top of editor chrome. */
    z-index: 1100;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal-content {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 12px rgba(177, 76, 255, 0.2);
    padding: 24px;
    max-width: 500px;
    width: 90%;
}
.modal-content h3 {
    margin: 0 0 8px;
    color: var(--text-primary);
}
.modal-content p {
    color: var(--text-muted);
    font-size: 13px;
    margin: 0 0 16px;
}
.share-code-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 15px;
    font-family: monospace;
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 16px;
    cursor: text;
}
.share-code-input:focus {
    border-color: var(--accent);
    outline: none;
}
.modal-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.menu-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 260px;
    max-width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6), 0 0 12px rgba(177, 76, 255, 0.2);
    z-index: 100;
    padding: 4px 0;
}

.menu-section {
    padding: 4px 0;
    border-bottom: 1px solid var(--border);
}
.menu-section:last-child {
    border-bottom: none;
}

.menu-section-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    padding: 8px 14px 4px;
    font-family: var(--font-mono);
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 13px;
    font-family: var(--font-sans);
    text-align: left;
    cursor: pointer;
    transition: all 0.12s ease;
    text-decoration: none;
}
.menu-item:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}
.menu-item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.menu-submenu {
    padding: 0;
    background: var(--bg-mid);
}

.submenu-item {
    padding-left: 28px;
    font-size: 12px;
}

.menu-template-icon {
    font-size: 14px;
    flex-shrink: 0;
}
.menu-template-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.menu-template-game {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    flex-shrink: 0;
}
.menu-submenu-separator {
    height: 1px;
    background: var(--border);
    margin: 4px 8px;
}
.template-custom-badge {
    color: var(--accent);
    font-size: 12px;
    margin-left: 4px;
    vertical-align: middle;
}

/* --- Browser (left sidebar) --- */
.browser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-height: 0;
}

.browser-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.browser-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.browser-search {
    width: 100%;
    padding: 6px 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
    font-family: var(--font-sans);
}
.browser-search:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.2);
}
.browser-search::placeholder {
    color: var(--text-muted);
}

.browser-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.browser-tab {
    flex: 1 1 auto;
    min-width: 60px;
    padding: 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-mono);
    cursor: pointer;
    transition: all 0.12s ease;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.browser-tab:hover {
    color: var(--text-primary);
    border-color: var(--accent-secondary);
}
.browser-tab.active {
    background: rgba(177, 76, 255, 0.15);
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

.browser-content {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
    padding-right: 2px;
}

.browser-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.browser-toolbar {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}

.browser-load-all {
    flex: 1;
    padding: 6px 10px !important;
    font-size: 12px !important;
    font-weight: 600;
    text-align: center;
    background: rgba(0, 229, 255, 0.15) !important;
    border-color: var(--accent-primary) !important;
    color: var(--accent-primary) !important;
}
.browser-load-all:hover {
    background: rgba(0, 229, 255, 0.25) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.browser-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    padding: 6px 8px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    border-left: 2px solid var(--accent-secondary);
}

.browser-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.browser-group-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: 2px 4px;
    font-family: var(--font-mono);
}

.browser-group-label {
    color: var(--accent-secondary);
}

/* Wishlist item (curated sample) */
.wishlist-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.12s ease;
}
.wishlist-item:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.wishlist-item.imported {
    border-color: var(--accent-success);
    background: rgba(68, 255, 136, 0.04);
}

.wishlist-item-info {
    flex: 1;
    min-width: 0;
}

.wishlist-item-name {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.imported .wishlist-item-name {
    color: var(--accent-success);
}

.wishlist-item-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.wishlist-item-search {
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 3px;
    font-family: var(--font-mono);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wishlist-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.wishlist-found {
    color: var(--accent-success);
    font-size: 14px;
    font-weight: 600;
    text-shadow: 0 0 6px rgba(68, 255, 136, 0.4);
}

/* SNES Sample Library */
.snes-library {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.snes-library-loading,
.snes-library-error {
    padding: 16px;
    text-align: center;
    color: var(--text-dim);
    font-style: italic;
}

.snes-library-error {
    color: var(--accent-error);
}

.snes-library-info {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 4px 0;
}

.snes-category-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snes-category-label {
    font-size: 0.7rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
}

/* Category-grouped layout (samples grouped by category across all games) */
.snes-category-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.snes-category-section {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snes-category-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-surface);
    cursor: pointer;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
    min-height: 28px;
}

.snes-category-header:hover {
    background: var(--bg-hover);
}

.snes-category-arrow {
    font-size: 0.7rem;
    color: var(--text-dim);
    width: 12px;
    flex-shrink: 0;
}

.snes-category-icon {
    font-size: 1rem;
    flex-shrink: 0;
}

.snes-category-title {
    flex: 1;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snes-category-count {
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-elevated);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* Expanded category content: dense rows (samples)... */
.snes-category-samples {
    padding: 4px 0 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ...and card-style items (instruments, MIDI FX presets). */
.snes-category-items {
    padding: 4px 0 4px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.snes-sample-game {
    font-size: 0.65rem;
    color: var(--text-dim);
    flex-shrink: 0;
    min-width: 60px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snes-sample {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    min-height: 24px;
    cursor: pointer;
}

.snes-sample:hover {
    background: var(--bg-hover);
}

.snes-sample:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    background: var(--bg-hover);
}

.snes-sample.imported .snes-sample-name {
    color: var(--accent-success);
}

.snes-sample.server-sample .snes-sample-name {
    color: var(--accent-secondary);
}

.snes-sample-name {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snes-sample-add {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--accent-primary);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.snes-sample-add:hover:not(:disabled) {
    background: var(--accent-primary);
    color: var(--bg-deep);
    border-color: var(--accent-primary);
}

.snes-sample-add:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* Search results */
.snes-search-results {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.snes-search-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 4px 0;
}

.snes-search-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    min-height: 24px;
    cursor: pointer;
}

.snes-search-item:hover {
    background: var(--bg-hover);
}

.snes-search-item.imported .snes-search-sample {
    color: var(--accent-success);
}

.snes-search-cat {
    flex-shrink: 0;
    font-size: 0.85rem;
}

.snes-search-game {
    font-size: 0.7rem;
    color: var(--text-dim);
    flex-shrink: 0;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.snes-search-sample {
    flex: 1;
    font-size: 0.78rem;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Library instrument item */
.library-instrument {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    transition: all 0.12s ease;
}
.library-instrument:hover {
    border-color: var(--accent-primary);
    background: var(--bg-hover);
}
.library-instrument.ready {
    border-color: var(--accent-success);
}

.library-instrument-info {
    flex: 1;
    min-width: 0;
}

.library-instrument-info:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: -1px;
    border-radius: var(--radius-sm);
}

.library-instrument-name {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

.library-instrument-desc {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.library-instrument-steps {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
    font-family: var(--font-mono);
}
.library-instrument.ready .library-instrument-steps {
    color: var(--accent-success);
}

/* Template item */
.library-template {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.12s ease;
}
.library-template:hover {
    border-color: var(--accent-secondary);
    background: var(--bg-hover);
}

.library-template-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.library-template-text {
    flex: 1;
    min-width: 0;
}

.library-template-name {
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 500;
}

.library-template-game {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

/* Tiny buttons used in the browser */
.btn-tiny {
    padding: 3px 8px;
    font-size: 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.12s ease;
    font-family: var(--font-sans);
    white-space: nowrap;
}
.btn-tiny.btn-primary {
    background: rgba(0, 229, 255, 0.1);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.btn-tiny.btn-primary:hover {
    background: rgba(0, 229, 255, 0.2);
}
.btn-tiny.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
}
.btn-tiny.btn-secondary:hover {
    color: var(--text-primary);
    border-color: var(--accent-secondary);
}
.btn-tiny:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Delete/hide button next to Load in the library browser */
.library-delete-btn {
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
}

.deleted-instrument-restore {
    opacity: 0.7;
    border-style: dashed;
    background: rgba(255, 200, 100, 0.08);
}
.deleted-instrument-restore:hover {
    opacity: 1;
}

.import-wav-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* --- Studio Main --- */
.studio-main {
    flex: 1;
    overflow: auto;
    padding: 4px 8px;
    display: flex;
    flex-direction: column;
}

/* --- Panel --- */
.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.panel-header h2 {
    color: var(--text-primary);
}

/* --- Transport (Play/Pause/Stop) --- */
.transport-group {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 3px;
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.4);
}

.transport-btn {
    width: 48px;
    height: 44px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    position: relative;
}

.transport-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    pointer-events: none;
}

.transport-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.transport-btn:active:not(:disabled) {
    transform: translateY(0);
}

.transport-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

/* Play — phosphor green neon */
.transport-btn.play {
    color: var(--accent-success);
    border-color: rgba(68, 255, 136, 0.3);
    text-shadow: 0 0 6px rgba(68, 255, 136, 0.4);
    box-shadow: inset 0 0 8px rgba(68, 255, 136, 0.08);
}
.transport-btn.play:hover:not(:disabled) {
    background: rgba(68, 255, 136, 0.12);
    border-color: var(--accent-success);
    box-shadow: var(--glow-green), inset 0 0 12px rgba(68, 255, 136, 0.15);
}
.transport-btn.play.active {
    background: rgba(68, 255, 136, 0.15);
    border-color: var(--accent-success);
    box-shadow: var(--glow-green), inset 0 0 12px rgba(68, 255, 136, 0.2);
}

/* Pause — amber neon */
.transport-btn.pause {
    color: var(--accent-warning);
    border-color: rgba(255, 204, 0, 0.3);
    text-shadow: 0 0 6px rgba(255, 204, 0, 0.4);
    box-shadow: inset 0 0 8px rgba(255, 204, 0, 0.08);
}
.transport-btn.pause:hover:not(:disabled) {
    background: rgba(255, 204, 0, 0.12);
    border-color: var(--accent-warning);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.5), 0 0 20px rgba(255, 204, 0, 0.2),
                inset 0 0 12px rgba(255, 204, 0, 0.15);
}

/* Stop — magenta/red neon */
.transport-btn.stop {
    color: var(--accent-error);
    border-color: rgba(255, 68, 119, 0.3);
    text-shadow: 0 0 6px rgba(255, 68, 119, 0.4);
    box-shadow: inset 0 0 8px rgba(255, 68, 119, 0.08);
}
.transport-btn.stop:hover:not(:disabled) {
    background: rgba(255, 68, 119, 0.12);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.5), 0 0 20px rgba(255, 68, 119, 0.2),
                inset 0 0 12px rgba(255, 68, 119, 0.15);
}

/* Record: dim red ring when idle; solid when armed; pulsing while capturing. */
.transport-btn.record {
    color: var(--accent-error);
    border-color: rgba(255, 68, 119, 0.3);
}
.transport-btn.record svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
}
.transport-btn.record:hover:not(:disabled) {
    background: rgba(255, 68, 119, 0.12);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.5), 0 0 20px rgba(255, 68, 119, 0.2),
                inset 0 0 12px rgba(255, 68, 119, 0.15);
}
.transport-btn.record.armed svg,
.transport-btn.record.recording svg {
    fill: currentColor;
    stroke: none;
}
.transport-btn.record.armed {
    background: rgba(255, 68, 119, 0.14);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.45), inset 0 0 10px rgba(255, 68, 119, 0.12);
}
.transport-btn.record.recording {
    background: rgba(255, 68, 119, 0.2);
    border-color: var(--accent-error);
    animation: record-pulse 1.1s ease-in-out infinite;
}
@keyframes record-pulse {
    0%, 100% {
        box-shadow: 0 0 8px rgba(255, 68, 119, 0.55), 0 0 20px rgba(255, 68, 119, 0.2),
                    inset 0 0 12px rgba(255, 68, 119, 0.18);
    }
    50% {
        box-shadow: 0 0 14px rgba(255, 68, 119, 0.9), 0 0 32px rgba(255, 68, 119, 0.4),
                    inset 0 0 16px rgba(255, 68, 119, 0.3);
    }
}

/* --- Sample Browser --- */
.sample-browser {
    background: var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.import-btn {
    cursor: pointer;
    display: inline-flex;
}

.import-buttons {
    display: flex;
    gap: 6px;
}

.sample-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 16px;
}

.sample-category-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 4px;
}

.sample-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background: var(--bg-deep);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--accent-primary);
    margin-bottom: 2px;
}

.sample-category-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sample-category-count {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.sample-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.sample-item:hover {
    background: var(--bg-hover);
}

.sample-item.selected {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid var(--accent-primary);
}

.sample-name {
    font-weight: 500;
}

.sample-info {
    font-size: 11px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.sample-details {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 16px;
}

.sample-details.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
}

.sample-name-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}

.sample-name-input {
    flex: 1;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
    padding: 6px 10px;
}

.sample-name-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.2);
}

/* --- Waveform Canvas --- */
.waveform-container {
    background: rgba(10, 14, 26, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-bottom: 16px;
}

.waveform-canvas {
    width: 100%;
    height: 120px;
    display: block;
    border-radius: var(--radius-sm);
}

.trim-waveform {
    cursor: ew-resize;
    user-select: none;
}

.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

.detail-item {
    display: flex;
    flex-direction: column;
}

.detail-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.detail-value {
    font-size: 14px;
    font-weight: 500;
}

/* --- Sample editing controls --- */
.pre-emphasis-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.pre-emphasis-toggle input[type="checkbox"] {
    /* Styled by shared neon-toggle rules */
}

.sample-edit-section {
    margin-top: 8px;
    padding: 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.sample-edit-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sample-edit-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.sample-edit-label input[type="checkbox"] {
    /* Styled by shared neon-toggle rules */
}

.sample-edit-input {
    width: 70px;
    padding: 3px 6px;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 12px;
}

.note-name-display {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

.quality-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.quality-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.quality-item.warning .quality-value {
    color: var(--accent-warning);
}

.quality-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.quality-value {
    font-size: 12px;
    font-family: var(--font-mono);
    color: var(--text-primary);
}

/* --- Loop Analysis --- */
.loop-analysis {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.loop-seam-quality {
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--text-muted);
}

.loop-seam-quality.loop-seam-good {
    color: #50b464;
    border-left-color: #50b464;
}

.loop-seam-quality.loop-seam-okay {
    color: #dca03c;
    border-left-color: #dca03c;
}

.loop-seam-quality.loop-seam-bad {
    color: #c84646;
    border-left-color: #c84646;
}

.loop-seam-quality.loop-seam-neutral {
    color: var(--text-muted);
    border-left-color: var(--text-muted);
}

.find-best-loop-btn {
    align-self: flex-start;
    margin-top: 4px;
}

.loop-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.loop-xfade-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-muted);
    white-space: nowrap;
}

.loop-xfade-input {
    width: 60px;
    padding: 2px 4px;
    font-size: 11px;
    font-family: var(--font-mono);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.loop-hint {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Instrument Editor --- */
.instrument-editor {
    background: var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 16px;
}

.instrument-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.instrument-tab {
    padding: 6px 14px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s ease;
}

.instrument-tab:hover { background: var(--bg-hover); }
.instrument-tab.selected {
    background: rgba(124, 92, 255, 0.15);
    border: 1px solid var(--accent-secondary);
}

.instrument-details {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 16px;
}

.instrument-details.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
}

.instrument-name-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.instrument-name-input {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 14px;
}

.instrument-name-input:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.instrument-info {
    display: flex;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Instrument waveform visualization */
.inst-waveform-container {
    background: rgba(10, 14, 26, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px;
    margin-bottom: 16px;
}

/* Sentinel: invisible zero-height marker for IntersectionObserver */
.inst-waveform-sentinel {
    height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Sticky waveform: when the sentinel scrolls above the viewport, the
   waveform container sticks to the top of the viewport so the user can
   see the waveform while scrolling through the step list below. */
.inst-waveform-container.inst-waveform-sticky {
    position: sticky;
    top: 4px;
    z-index: 100;
    background: rgba(10, 14, 26, 0.95);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    border-color: var(--accent-secondary);
    margin-bottom: 16px;
}

.inst-waveform-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.inst-waveform-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
    font-weight: 600;
    flex-shrink: 0;
}

.inst-waveform-sample-label {
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    white-space: nowrap;
}

.inst-waveform-hint {
    font-size: 10px;
    color: var(--text-dim);
    font-style: italic;
    margin-left: auto;
}

.inst-waveform-canvas {
    width: 100%;
    height: 100px;
    display: block;
    border-radius: var(--radius-sm);
}

/* Performance controls */
.inst-performance {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.inst-performance .step-control {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.inst-performance select,
.inst-performance input[type="number"] {
    width: auto;
    min-width: 50px;
}

.keyzone-input {
    width: 40px !important;
}

/* Layer bar */
.layer-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

/* Hide layer/step editor for drum kit instruments */
.instrument-details.drum-kit .layer-bar,
.instrument-details.drum-kit .layer-props,
.instrument-details.drum-kit .step-list,
.instrument-details.drum-kit .step-list-empty,
.instrument-details.drum-kit .transition-mode {
    display: none !important;
}

/* Synth: section divider between tone designer and melodic playback */
.synth-section-divider {
    margin: 14px 0 6px;
}
.synth-section-divider-line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-secondary), transparent);
    margin-bottom: 8px;
}
.synth-section-divider-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.synth-section-divider-label {
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-secondary);
    text-shadow: 0 0 8px rgba(124, 92, 255, 0.35);
}
.synth-section-divider-info {
    font-size: 10px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

/* Drum kit editor styles */
.drum-kit-editor {
    margin: 8px 0;
    padding: 8px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 4px;
}
.drum-kit-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.drum-kit-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 300px;
    overflow-y: auto;
}
.drum-kit-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 6px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 3px;
}
.drum-kit-row-main {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.drum-kit-row-actions {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
}
.drum-kit-note {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    min-width: 28px;
    text-align: center;
    font-weight: 600;
}
.drum-kit-name-input {
    flex: 1;
    min-width: 60px;
    max-width: 120px;
    font-size: 12px;
    padding: 2px 4px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-primary);
}
.drum-kit-sample-select {
    min-width: 100px;
    max-width: 200px;
    font-size: 11px;
    padding: 2px 4px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-primary);
}
.drum-kit-info {
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-muted);
}
.drum-kit-adsr-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}
.drum-kit-adsr-label {
    font-size: 10px;
}
.drum-kit-adsr-controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
    padding: 4px 8px 4px 36px;
    background: var(--bg-deep);
    border-radius: 2px;
    border-left: 2px solid var(--accent-primary);
}
.drum-kit-adsr-ctrl {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 10px;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}
.drum-kit-adsr-ctrl span:first-child {
    font-family: var(--font-mono);
    min-width: 14px;
    font-weight: 600;
    color: var(--accent-secondary);
}
.drum-kit-adsr-ctrl input[type="range"] {
    flex: 1;
    min-width: 0;
    width: auto;
}
.drum-kit-adsr-val {
    min-width: 16px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 10px;
}
.drum-kit-pitch {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    color: var(--text-muted);
}
.drum-kit-pitch input[type="number"] {
    width: 48px;
    font-size: 10px;
    padding: 1px 4px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.drum-kit-pitch input[type="number"]::-webkit-inner-spin-button,
.drum-kit-pitch input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.layer-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-right: 4px;
}

.layer-tab {
    padding: 2px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.layer-tab:hover {
    border-color: var(--accent-primary);
}

.layer-tab.selected {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.layer-add-btn {
    margin-left: 4px;
}

.layer-del-btn {
    padding: 2px 8px;
}

.layer-props {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
}

.layer-props .step-control {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.layer-props .step-control select,
.layer-props .step-control input {
    width: auto;
    min-width: 60px;
}

.step-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.step-list-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-muted);
}

.step-list-empty p {
    margin-bottom: 12px;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    font-size: 13px;
}

.step-item-edit {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
    transition: border-color 0.15s;
}

.step-item-edit:hover {
    border-color: var(--border-light);
}

.step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}

.step-number {
    color: var(--accent-secondary);
    font-weight: 600;
    min-width: 24px;
}

.step-number-btn {
    color: var(--accent-secondary);
    font-weight: 600;
    min-width: 24px;
    background: none;
    border: 1px solid transparent;
    border-radius: 3px;
    padding: 1px 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.15s;
}
.step-number-btn:hover {
    background: var(--bg-mid);
    border-color: var(--accent-secondary);
}
.step-number-btn.muted {
    color: var(--danger);
    text-decoration: line-through;
    opacity: 0.7;
}
.step-number-btn.muted:hover {
    background: rgba(198, 70, 70, 0.15);
    border-color: var(--danger);
}

.muted-step {
    opacity: 0.5;
}
.muted-step:hover {
    opacity: 0.75;
}

.step-sample-name {
    flex: 1;
    color: var(--text-primary);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.step-duration-badge,
.step-vol-badge,
.step-pan-badge {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-mid);
    padding: 2px 6px;
    border-radius: 3px;
}

.step-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: flex-end;
}

.step-control {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* Step-row sizing: the sample picker and sliders flex to fill the row,
   while selects and number inputs stay compact so they don't stretch
   into oversized boxes when the row wraps. */
.step-control-sample {
    flex: 2 1 150px;
    min-width: 130px;
}

.step-control-slider {
    flex: 1 1 90px;
    min-width: 80px;
}

.step-control-compact {
    flex: 0 0 auto;
}

.step-control-compact input[type="number"] {
    width: 64px;
}

.step-control-compact select {
    width: auto;
}

.step-control-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.step-control select,
.step-control input:not([type="checkbox"]) {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 4px 6px;
    width: 100%;
}

/* --- ADSR + Vibrato controls --- */
.inst-adsr-defaults {
    margin-bottom: 8px;
    padding: 6px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.inst-adsr-defaults .step-control-label {
    display: block;
    margin-bottom: 4px;
}

.adsr-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.adsr-controls .step-control {
    flex-direction: row;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.adsr-controls .step-control input[type="range"] {
    width: 70px;
}

.adsr-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 12px;
}

.adsr-val {
    font-size: 11px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    min-width: 20px;
    text-align: right;
}

/* Per-step advanced section */
.step-advanced {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed var(--border);
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.step-adsr-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.step-adsr-toggle input[type="checkbox"] {
    /* Styled by shared neon-toggle rules */
}

.vibrato-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.vibrato-controls .step-control {
    flex-direction: row;
    align-items: center;
    gap: 4px;
}

.vibrato-controls .step-control input[type="number"] {
    width: 60px;
}

.step-control input[type="range"] {
    padding: 0;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 16px;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s;
}

.btn-icon:hover:not(:disabled) {
    background: rgba(0, 212, 255, 0.15);
    color: var(--accent-primary);
}

.btn-icon:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Generic disabled state for any button/label */
.btn.disabled,
button:disabled,
label.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Disabled number inputs (e.g. when auto-tune overrides base pitch) */
.step-control input[type="number"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-add-step {
    margin-top: 4px;
    width: 100%;
    justify-content: center;
}

.step-sample { flex: 1; }
.step-duration { color: var(--text-muted); font-family: var(--font-mono); }
.step-vol { color: var(--text-muted); }

.transition-mode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.transition-mode select {
    padding: 6px 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.crossfade-duration {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.crossfade-duration input[type="range"] {
    width: 120px;
}

.crossfade-ms-label {
    font-size: 0.85em;
    color: var(--text-secondary);
    min-width: 48px;
}

/* --- DSP Panel --- */
.dsp-panel {
    background: var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.dsp-section {
    margin-bottom: 20px;
}

.dsp-section h3 {
    color: var(--accent-primary);
    margin-bottom: 12px;
}

/* Echo Library */
.echo-library-empty {
    color: var(--text-dim);
    font-style: italic;
    padding: 8px 0;
}

.echo-library-subtitle {
    color: var(--text-dim);
    font-size: 0.75rem;
    margin: 0 0 8px 0;
}

.echo-library-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
}

/* Built-in SNES echo library — grid layout for more presets */
.builtin-echo-library {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    max-height: 280px;
}

.builtin-preset {
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 5px 8px;
    font-size: 0.78rem;
    background: rgba(0, 229, 255, 0.04);
    border-color: rgba(0, 229, 255, 0.15);
}

.builtin-preset:hover {
    background: rgba(0, 229, 255, 0.12);
    border-color: var(--accent-primary);
}

.builtin-preset .echo-preset-info {
    font-size: 0.68rem;
}

.echo-library-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.echo-preset-apply {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    font-size: 0.85rem;
    transition: background 0.15s, border-color 0.15s;
}

.echo-preset-apply:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.echo-preset-info {
    color: var(--text-dim);
    font-size: 0.75rem;
    font-family: var(--font-mono);
}

.echo-preset-delete {
    flex-shrink: 0;
    padding: 4px 8px;
    font-size: 0.8rem;
}

.slider-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.slider-row label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Range inputs use the shared fader styling defined in the global UI
   system section below. */
.slider-row input[type="range"] {
    width: 100%;
}

.toggle-row {
    margin-bottom: 12px;
}

.toggle-row label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.echo-controls {
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.echo-disabled {
    color: var(--text-muted);
    font-style: italic;
    padding: 12px;
}

/* --- FIR Filter --- */
.fir-presets {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.fir-presets select {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    padding: 4px 8px;
}

.fir-taps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
}

.fir-tap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
}

/* Elements with title attributes get a help cursor to hint at tooltips. */
[title] {
    cursor: help;
}
/* Form controls with titles keep their pointer cursor. */
input[title],
select[title],
button[title],
label[title],
.option[title],
.instrument-tab[title],
.sample-item[title],
.song-tab[title] {
    cursor: pointer;
}

.fir-tap-label {
    color: var(--accent-secondary);
    font-weight: 600;
    min-width: 90px;
    font-family: var(--font-mono);
    font-size: 10px;
    white-space: nowrap;
}

.fir-tap input[type="range"] {
    flex: 1;
}

.fir-tap-value {
    min-width: 32px;
    text-align: right;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

/* --- ARAM Map --- */
.aram-map {
    background: var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.aram-bar {
    display: flex;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 16px;
}

.aram-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--bg-deep);
    transition: all 0.2s ease;
}

.aram-segment.engine { background: var(--accent-secondary); }
.aram-segment.samples { background: var(--accent-primary); }
.aram-segment.echo { background: var(--accent-tertiary); }
.aram-segment.free { background: var(--bg-elevated); color: var(--text-muted); }

.aram-stats {
    display: flex;
    gap: 24px;
    margin-bottom: 16px;
}

.aram-stat {
    display: flex;
    flex-direction: column;
}

.stat-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-primary);
}

.aram-warning {
    padding: 12px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--accent-warning);
    border-radius: var(--radius-sm);
    color: var(--accent-warning);
    margin-bottom: 16px;
}

.aram-placements h3 {
    margin-bottom: 12px;
    color: var(--text-secondary);
}

.placement-item {
    display: flex;
    justify-content: space-between;
    padding: 6px 12px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 13px;
}

.placement-addr {
    font-family: var(--font-mono);
    color: var(--accent-primary);
}

.placement-len {
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.aram-error {
    padding: 20px;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid var(--accent-error);
    border-radius: var(--radius-md);
}

.aram-error h3 {
    color: var(--accent-error);
    margin-bottom: 8px;
}

.aram-error-hint {
    color: var(--text-secondary);
    font-size: 13px;
    margin-top: 8px;
}

/* --- Song Composer --- */
.song-composer {
    background: var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.song-composer .panel-header {
    margin-bottom: 2px;
}

.song-composer .panel-header h2 {
    font-size: 1rem;
}

.composer-actions {
    display: flex;
    gap: 8px;
}

.composer-actions .btn {
    padding: 4px 10px;
    font-size: 12px;
}

.import-midi-btn { cursor: pointer; display: inline-flex; }

.song-selector {
    margin-bottom: 2px;
}

.no-songs {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.no-songs p { margin-bottom: 16px; }

.song-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
}

.song-tab {
    padding: 3px 8px;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}

.song-tab:hover { background: var(--bg-hover); }
.song-tab.selected {
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid var(--accent-primary);
}

.song-tab-name {
    pointer-events: none;
}

.song-tab-actions {
    display: flex;
    gap: 2px;
    margin-left: 4px;
}

.song-tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    border-radius: 3px;
}

.song-tab-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.song-tab-add {
    background: var(--bg-elevated);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 16px;
    color: var(--text-muted);
    padding: 4px 12px;
}

.song-tab-add:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.song-details {
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    padding: 2px 8px;
    margin-bottom: 2px;
}

.song-details.empty {
    text-align: center;
    color: var(--text-muted);
    padding: 32px;
}

.song-info-bar {
    display: flex;
    gap: 24px;
    align-items: center;
}

.song-info-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.snes-auth-label {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
    margin-left: 10px;
    transition: color 0.15s;
}

.snes-auth-label:has(.snes-auth-checkbox:checked) {
    color: var(--accent-primary);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

/* ── Neon toggle switch — shared style for all checkboxes ─────────────── */
/* Applied to all checkboxes in the instrument editor, sample browser,    */
/* DSP panel, and SNES authentic toggle. Hides the native checkbox and    */
/* renders a pill-shaped toggle with a glowing knob.                      */

.neon-toggle,
.snes-auth-checkbox,
.step-adsr-toggle input[type="checkbox"],
.drum-kit-adsr-toggle input[type="checkbox"],
.inst-performance input[type="checkbox"],
.pre-emphasis-toggle input[type="checkbox"],
.sample-edit-label input[type="checkbox"],
.toggle-row input[type="checkbox"],
.instrument-view input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 22px;
    height: 12px;
    min-width: 22px;
    min-height: 12px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    position: relative;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    box-sizing: content-box;
}

.neon-toggle::after,
.snes-auth-checkbox::after,
.step-adsr-toggle input[type="checkbox"]::after,
.drum-kit-adsr-toggle input[type="checkbox"]::after,
.inst-performance input[type="checkbox"]::after,
.pre-emphasis-toggle input[type="checkbox"]::after,
.sample-edit-label input[type="checkbox"]::after,
.toggle-row input[type="checkbox"]::after,
.instrument-view input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 1px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.15s, background 0.15s;
}

.neon-toggle:checked,
.snes-auth-checkbox:checked,
.step-adsr-toggle input[type="checkbox"]:checked,
.drum-kit-adsr-toggle input[type="checkbox"]:checked,
.inst-performance input[type="checkbox"]:checked,
.pre-emphasis-toggle input[type="checkbox"]:checked,
.sample-edit-label input[type="checkbox"]:checked,
.toggle-row input[type="checkbox"]:checked,
.instrument-view input[type="checkbox"]:checked {
    background: rgba(0, 229, 255, 0.15);
    border-color: var(--accent-primary);
    box-shadow: 0 0 4px rgba(0, 229, 255, 0.4), inset 0 0 3px rgba(0, 229, 255, 0.15);
}

.neon-toggle:checked::after,
.snes-auth-checkbox:checked::after,
.step-adsr-toggle input[type="checkbox"]:checked::after,
.drum-kit-adsr-toggle input[type="checkbox"]:checked::after,
.inst-performance input[type="checkbox"]:checked::after,
.pre-emphasis-toggle input[type="checkbox"]:checked::after,
.sample-edit-label input[type="checkbox"]:checked::after,
.toggle-row input[type="checkbox"]:checked::after,
.instrument-view input[type="checkbox"]:checked::after {
    transform: translateX(10px);
    background: var(--accent-primary);
    box-shadow: 0 0 4px var(--accent-primary);
}

/* ── Volume Meter — LED-style retro/futuristic ────────────────────────── */

.volume-meter-item {
    margin-left: auto;
    padding: 0;
}

.volume-meter {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    padding: 4px 6px;
    background: linear-gradient(180deg, #0a0a12 0%, #050508 100%);
    border: 1px solid #1a1a2e;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.8);
    height: 20px;
}

.led-segment {
    width: 5px;
    height: 12px;
    border-radius: 1px;
    background: #0d0d18;
    transition: background 0.05s, box-shadow 0.05s;
    flex-shrink: 0;
}

/* Unlit colors — very dim, just enough to show the segment is there */
.led-green {
    --led-color: #00ff41;
    --led-dim: #0a2a12;
}
.led-yellow {
    --led-color: #ffcc00;
    --led-dim: #2a2208;
}
.led-red {
    --led-color: #ff2020;
    --led-dim: #2a0808;
}

/* Lit state — bright glow */
.led-segment.lit {
    background: var(--led-color);
    box-shadow:
        0 0 4px var(--led-color),
        0 0 8px var(--led-color),
        inset 0 0 2px rgba(255,255,255,0.3);
}

/* Unlit but colored — dim version of the color */
.led-segment:not(.lit) {
    background: var(--led-dim);
}

/* Clipping state — red segments flash brighter */
.led-segment.clip {
    background: #ff4040;
    box-shadow:
        0 0 6px #ff2020,
        0 0 12px #ff2020,
        0 0 20px rgba(255,32,32,0.5),
        inset 0 0 3px rgba(255,255,255,0.5);
    animation: clip-flash 0.15s infinite alternate;
}

@keyframes clip-flash {
    from { opacity: 0.85; }
    to { opacity: 1.0; }
}

.tempo-input {
    width: 80px;
    padding: 4px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
}

.rescale-bpm-btn {
    margin-left: 4px;
    padding: 2px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}
.rescale-bpm-btn:hover {
    color: var(--text-primary);
    border-color: var(--accent);
}
.rescale-bpm-btn.active {
    color: #f59e0b;
    border-color: #f59e0b;
    background: rgba(245, 158, 11, 0.1);
}

.tap-tempo-btn {
    font-size: 11px;
    padding: 2px 10px;
    user-select: none;
    -webkit-user-select: none;
}
.tap-tempo-btn:active {
    background: var(--accent);
    color: #000;
}

.tempo-hint {
    font-size: 11px;
    color: var(--text-muted);
}

/* --- Arrangement View --- */
.composer-split {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 0;
}

.arrangement-section {
    flex: 1 1 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: transparent;
    position: relative;
    z-index: 6;
}

.composer-splitter {
    flex: 0 0 6px;
    cursor: row-resize;
    background: var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 5;
    transition: background 0.15s;
}

.composer-splitter:hover,
.composer-splitter.active {
    background: var(--accent);
}

.composer-splitter-grip {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--text-muted);
    opacity: 0.5;
}

.composer-splitter:hover .composer-splitter-grip,
.composer-splitter.active .composer-splitter-grip {
    opacity: 1.0;
    background: #fff;
}

.piano-roll-section {
    flex: 1 1 0;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: transparent;
}

.pr-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-dim);
    font-size: 0.85rem;
    padding: 20px;
    text-align: center;
}

/* MIDI Effects Editor (bottom context panel for track effects) */
.midi-effects-editor {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-panel);
    overflow: hidden;
}

.me-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.me-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.me-count {
    font-size: 0.75rem;
    color: var(--text-dim);
    background: var(--bg-elevated);
    padding: 2px 8px;
    border-radius: 8px;
}

.me-close {
    background: none;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.me-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.me-chain-area {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px;
}

.me-chain-empty {
    color: var(--text-dim);
    font-size: 0.82rem;
    text-align: center;
    padding: 20px;
}

.me-chain-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.me-chain-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.me-chain-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.me-chain-num {
    font-size: 0.7rem;
    color: var(--text-dim);
    background: var(--bg-elevated);
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.me-chain-content {
    flex: 1;
    min-width: 0;
}

.me-chain-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.me-chain-desc {
    font-size: 0.7rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.me-chain-btns {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.me-chain-btn {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    min-width: 22px;
}

.me-chain-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.me-chain-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.me-chain-btn.remove:hover:not(:disabled) {
    background: var(--accent-danger);
    color: white;
}

.me-chain-btn.bypass {
    color: var(--text-secondary);
}

.me-chain-btn.bypass:hover:not(:disabled) {
    color: var(--accent-warning);
}

.me-chain-btn.bypass.active {
    background: var(--accent-warning);
    color: var(--bg-primary);
    border-color: var(--accent-warning);
}

.me-chain-bypassed {
    color: var(--accent-warning);
    font-size: 0.85em;
    font-style: italic;
}

.me-presets {
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.me-presets-title {
    font-size: 0.75rem;
    color: var(--text-dim);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.me-preset-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.me-preset-btn {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 0.78rem;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    transition: all 0.15s;
}

.me-preset-btn:hover {
    background: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

/* Inline parameter editing */
.me-params {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 28px 2px 28px;
}

.me-param {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.me-param-label {
    color: var(--text-dim);
    white-space: nowrap;
}

.me-param-range {
    width: 80px;
    accent-color: var(--accent-primary);
}

.me-param-select {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.me-param-num {
    width: 40px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text-primary);
    font-size: 0.7rem;
    padding: 1px 4px;
    border-radius: var(--radius-sm);
}

.me-param-val {
    color: var(--text-dim);
    font-family: var(--font-mono);
    min-width: 30px;
    text-align: right;
}

/* Stutter pattern step editor */
.me-step-row {
    display: flex;
    gap: 2px;
    align-items: center;
}

.me-step-btn {
    width: 14px;
    height: 18px;
    padding: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
}

.me-step-btn:hover {
    border-color: var(--accent-primary);
}

.me-step-btn.on {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* Mark bar boundaries: every 4th step gets extra spacing */
.me-step-btn:nth-child(4n + 1):not(:first-child) {
    margin-left: 5px;
}

/* Preset categories */
.me-preset-categories {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.me-preset-cat {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.me-preset-cat-label {
    font-size: 0.65rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 2px;
}

/* Track name selected state */
.arr-track-name.selected {
    background: var(--accent-primary);
    color: white !important;
    border-radius: var(--radius-sm);
    padding: 1px 4px;
}

/* MIDI FX Browser (sidebar tab) */
.midi-fx-browser {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
}

.midi-fx-info {
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 4px 8px;
    background: var(--bg-surface);
    border-radius: var(--radius-sm);
    text-align: center;
}

.midi-fx-category {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.midi-fx-category-header {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-primary);
    padding: 4px 8px 2px;
    border-bottom: 1px solid var(--border);
}

.midi-fx-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.midi-fx-preset {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s;
}

.midi-fx-preset:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
}

.midi-fx-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.midi-fx-text {
    flex: 1;
    min-width: 0;
}

.midi-fx-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
}

.midi-fx-desc {
    font-size: 0.7rem;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.arrangement-view {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.arr-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 10px;
    background: var(--bg-surface-trans);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.arr-label {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}

.arr-info {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

/* --- Inline voice budget (arrangement toolbar) --- */
.voice-budget-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: rgba(68, 255, 136, 0.06);
    border: 1px solid rgba(68, 255, 136, 0.25);
    font-size: 11px;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.voice-budget-inline.warn {
    background: rgba(255, 204, 0, 0.08);
    border-color: rgba(255, 204, 0, 0.4);
}
.voice-budget-inline.over {
    background: rgba(255, 68, 119, 0.12);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.3);
}

.voice-budget-inline-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 10px;
}

.voice-budget-inline-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}

.voice-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-light);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.voice-dot.active {
    background: var(--accent-success);
    border-color: var(--accent-success);
    box-shadow: 0 0 4px rgba(68, 255, 136, 0.6);
}
/* Multi-voice dot: track is using >1 S-DSP voice (polyphony or crossfade).
   Shown with a ring outline to distinguish from single-voice tracks. */
.voice-dot.active.multi {
    box-shadow: 0 0 4px rgba(68, 255, 136, 0.6), 0 0 0 2px rgba(68, 255, 136, 0.35);
}
.voice-budget-inline.warn .voice-dot.active {
    background: var(--accent-warning);
    border-color: var(--accent-warning);
    box-shadow: 0 0 4px rgba(255, 204, 0, 0.6);
}
.voice-budget-inline.warn .voice-dot.active.multi {
    box-shadow: 0 0 4px rgba(255, 204, 0, 0.6), 0 0 0 2px rgba(255, 204, 0, 0.35);
}
.voice-budget-inline.over .voice-dot.active {
    background: var(--accent-error);
    border-color: var(--accent-error);
    box-shadow: 0 0 4px rgba(255, 68, 119, 0.6);
}
.voice-budget-inline.over .voice-dot.active.multi {
    box-shadow: 0 0 4px rgba(255, 68, 119, 0.6), 0 0 0 2px rgba(255, 68, 119, 0.35);
}

.voice-budget-inline-count {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text-primary);
    min-width: 32px;
    text-align: right;
}
.voice-budget-inline.warn .voice-budget-inline-count {
    color: var(--accent-warning);
}
.voice-budget-inline.over .voice-budget-inline-count {
    color: var(--accent-error);
}

.arr-ruler {
    display: flex;
    flex: 0 0 auto;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}

.arr-ruler-spacer {
    flex: 0 0 auto;
    background: var(--bg-surface);
    border-right: 1px solid var(--border);
    position: sticky;
    left: 0;
    z-index: 10;
}

.arr-ruler-content {
    flex: 1;
    position: relative;
    /* overflow: hidden — the ruler is not user-scrollable. Its scrollLeft
       is set programmatically by the tracks' on:scroll handler to sync
       with the timeline. This avoids any hover scrollbar appearing. */
    overflow: hidden;
    cursor: pointer;
}

.arr-ruler-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
}

.arr-ruler-bar .arr-ruler-label {
    position: absolute;
    top: 2px;
    left: 4px;
    font-size: 10px;
    color: var(--text-muted);
    background: var(--bg-surface);
    padding: 0 2px;
}

.arr-ruler-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    opacity: 0.4;
}

.arr-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff4444;
    pointer-events: none;
    z-index: 10;
    will-change: transform;
}

/* --- Loop region markers (arrangement ruler) --- */
.arr-loop-region {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(177, 76, 255, 0.12);
    border-left: 1px solid rgba(177, 76, 255, 0.3);
    border-right: 1px solid rgba(177, 76, 255, 0.3);
    pointer-events: auto;
    cursor: grab;
    z-index: 8;
    transition: background 0.15s ease;
}
.arr-loop-region:active {
    cursor: grabbing;
}
.arr-loop-region.active {
    background: rgba(177, 76, 255, 0.22);
    border-left-color: rgba(177, 76, 255, 0.6);
    border-right-color: rgba(177, 76, 255, 0.6);
}

.arr-loop-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    margin-left: -5px;
    z-index: 9;
    cursor: ew-resize;
    display: flex;
    justify-content: center;
    pointer-events: auto;
}
.arr-loop-marker.start {
    z-index: 9;
}
.arr-loop-marker.end {
    z-index: 9;
}
.arr-loop-marker-handle {
    width: 4px;
    height: 100%;
    background: rgba(177, 76, 255, 0.5);
    border-radius: 2px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.arr-loop-marker:hover .arr-loop-marker-handle {
    background: var(--accent-secondary);
    box-shadow: 0 0 6px rgba(177, 76, 255, 0.6);
}
.arr-loop-marker.active .arr-loop-marker-handle {
    background: var(--accent-secondary);
    box-shadow: 0 0 8px rgba(177, 76, 255, 0.7);
}

.arr-lane-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff4444;
    pointer-events: none;
    z-index: 8;
    opacity: 0.7;
    will-change: transform;
}

.arr-tracks {
    flex: 1;
    overflow: auto;
    position: relative;
    background-color: transparent;
}

.arr-track {
    display: flex;
    /* No border-bottom — horizontal grid lines are drawn by the
       arr-tracks container's background so they continue through
       the entire scrollable area, not just between the 8 tracks. */
    background: transparent;
    transition: height 0.2s ease;
}

.arr-track-row.automation-expanded .arr-track-header {
    border-right-color: var(--accent-primary);
    box-shadow: inset -2px 0 0 rgba(0, 229, 255, 0.35);
}

.arr-track-row.automation-expanded .arr-lane {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.025), transparent 35%);
}

/* Automation overlay (rendered on top of track lane when Auto is on) */
.arr-auto-overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    cursor: crosshair;
    z-index: 5;
    background: rgba(0, 0, 0, 0.25);
}

.pr-auto-overlay {
    position: sticky;
    top: 0;
    left: 0;
    cursor: crosshair;
    z-index: 8;
    background: rgba(6, 8, 15, 0.35);
    overflow: hidden;
}

.arr-auto-ghost {
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px dashed;
    background: transparent;
    pointer-events: none;
    z-index: 4;
    opacity: 0.7;
}

.arr-auto-line-svg {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.arr-auto-point {
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    margin-top: -6px;
    border-radius: 50%;
    cursor: grab;
    z-index: 3;
    border: 2px solid #18181b;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
}

.arr-auto-point:active {
    cursor: grabbing;
}

.arr-auto-point.selected {
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-color: #fff;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.arr-auto-tip {
    position: fixed;
    z-index: 1000;
    background: var(--bg-elevated);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    font-family: var(--font-mono);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Tempo automation lane (global, toggleable via the ♩ button next to BPM). */
.arr-tempo-lane {
    display: flex;
    border-bottom: 1px solid var(--border);
    background: rgba(245, 158, 11, 0.04);
    flex-shrink: 0;
}

.arr-tempo-lane-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0 8px;
    border-right: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--bg-elevated);
}

.arr-tempo-lane-title {
    font-size: 11px;
    font-weight: 600;
    color: #f59e0b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.arr-tempo-lane-range {
    font-size: 9px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.arr-tempo-lane-content {
    position: relative;
    cursor: crosshair;
    overflow: hidden;
    flex: 1;
}

.tempo-point {
    background: #f59e0b;
}

.tempo-point.initial {
    background: #f59e0b;
    border-color: #fff;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.6);
}

.arr-track-row {
    display: flex;
    flex-direction: column;
    /* Don't stretch children to the row's width — the arr-track inside
       has an explicit width (header + lane) that may exceed the viewport.
       Without this, the flex column's default align-items:stretch would
       constrain arr-track to the viewport width and break the sticky
       track header. */
    align-items: flex-start;
}

.arr-track-row.collapsed .arr-track-header {
    padding: 0 8px;
    gap: 2px;
}

.arr-track-row.collapsed .arr-track-name {
    font-size: 10px;
}

.arr-collapse-btn {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
}

.arr-collapse-btn:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

.arr-collapse-all-btn {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    margin: 4px 0 0 8px;
}

.arr-collapse-all-btn:hover {
    background: var(--bg-elevated);
    color: var(--accent-primary);
}

.arr-auto-param {
    width: 100%;
    font-size: 11px;
    padding: 2px 4px;
    margin-top: 2px;
    background: var(--bg-deep);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23b14cff' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    padding-right: 16px;
}
.arr-auto-param:hover {
    border-color: var(--accent-secondary);
}
.arr-auto-param:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 4px rgba(177, 76, 255, 0.4);
}
.arr-auto-param option {
    background: var(--bg-deep);
    color: var(--text-primary);
}

.arr-pb-range-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 2px;
}

.arr-pb-range-label {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.arr-pb-range-input {
    width: 32px;
    font-size: 11px;
    padding: 1px 3px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 2px;
    color: var(--text-primary);
    text-align: center;
    -moz-appearance: textfield;
}
.arr-pb-range-input::-webkit-inner-spin-button,
.arr-pb-range-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pr-auto-param {
    width: auto;
    min-width: 90px;
    font-size: 11px;
    padding: 2px 4px;
    background: var(--bg-deep);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23b14cff' d='M5 7L0 2h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    padding-right: 16px;
}
.pr-pb-range-row {
    margin-left: 4px;
    white-space: nowrap;
}

.pr-pb-range-input {
    width: 34px;
}

.pr-auto-param:hover {
    border-color: var(--accent-secondary);
}
.pr-auto-param:focus {
    border-color: var(--accent-secondary);
    box-shadow: 0 0 4px rgba(177, 76, 255, 0.4);
}
.pr-auto-param option {
    background: var(--bg-deep);
    color: var(--text-primary);
}

.auto-track.active {
    background: var(--accent-primary);
    color: var(--bg-dark);
}

.arr-track-header {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 8px;
    background: var(--bg-surface-trans);
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    overflow: hidden;
    position: sticky;
    left: 0;
    z-index: 10;
}

.arr-track-header-top {
    display: flex;
    align-items: center;
    gap: 4px;
}

.arr-track-header-bottom {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.arr-track-header-btns {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Note: .arr-vol-fader styles are defined later in the "Compact fader for
 * track volume" section near line 7591. The old rules here were removed to
 * avoid conflicts (they set a non-transparent background and wrong height). */

.arr-track-name {
    font-weight: 600;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arr-track-lane {
    flex: 1 0 auto;
    position: relative;
    background: transparent;
    cursor: pointer;
    overflow: hidden;
}

.arr-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border);
    opacity: 0.45;
    pointer-events: none;
}

.arr-line-v.bar {
    opacity: 0.8;
    background: var(--border);
}

.arr-line-v.minor {
    opacity: 0.25;
}

.arr-line-h {
    position: absolute;
    left: 0;
    height: 1px;
    background: var(--border);
    opacity: 0.5;
    pointer-events: none;
    z-index: 1;
}

.arr-clip {
    position: absolute;
    top: 4px;
    bottom: 4px;
    border: 2px solid;
    border-radius: 4px;
    cursor: grab;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 8px;
    /* Background is set inline to a semi-transparent voice-color tint.
       The border stays solid (set inline to the full voice color).
       On hover, the fill brightens via the CSS variable trick below. */
    transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

.arr-clip.collapsed {
    top: 1px;
    bottom: 1px;
    border-width: 1px;
    border-radius: 2px;
}

.arr-clip:hover {
    /* Slightly brighter fill on hover — achieved via a white overlay
       using box-shadow inset (doesn't affect the inline background). */
    box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.08);
}

.arr-clip.selected {
    border-color: #00e5ff;
    border-width: 2px;
    z-index: 5;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.6),
        0 0 12px rgba(0, 229, 255, 0.5),
        0 0 24px rgba(0, 229, 255, 0.3),
        inset 0 0 0 1000px rgba(0, 229, 255, 0.08);
    animation: arr-clip-selected-pulse 2s ease-in-out infinite;
}

@keyframes arr-clip-selected-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(0, 229, 255, 0.6),
            0 0 12px rgba(0, 229, 255, 0.5),
            0 0 24px rgba(0, 229, 255, 0.3),
            inset 0 0 0 1000px rgba(0, 229, 255, 0.08);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(0, 229, 255, 0.8),
            0 0 16px rgba(0, 229, 255, 0.7),
            0 0 32px rgba(0, 229, 255, 0.4),
            inset 0 0 0 1000px rgba(0, 229, 255, 0.12);
    }
}

/* Cross-track drag preview — semi-transparent with dashed border. */
.arr-clip.dragging {
    opacity: 0.6;
    border-style: dashed;
    border-width: 2px;
    z-index: 6;
    pointer-events: none;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.4);
}

.arr-clip:active {
    cursor: grabbing;
}

.arr-clip-name {
    font-size: 10px;
    color: #000;
    padding: 2px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
    user-select: none;
    pointer-events: none;
    /* The name label sits on the clip's semi-transparent fill. Give it a
       subtle dark backdrop so the black text stays readable regardless
       of the voice color underneath. */
    background: rgba(0, 0, 0, 0.15);
    border-radius: 2px;
}

.arr-clip-notes {
    position: absolute;
    top: 16px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.arr-clip-note {
    position: absolute;
    height: 2px;
    background: rgba(0, 0, 0, 0.55);
    border-radius: 1px;
}

.arr-clip-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: ew-resize;
    background: rgba(0,0,0,0.15);
}

.arr-clip-resize-handle.collapsed {
    width: 10px;
    background: rgba(255,255,255,0.25);
}

.arr-clip-resize-handle.collapsed:hover {
    background: rgba(255,255,255,0.5);
}

/* --- Arrangement context menu (right-click) --- */
.arr-ctx-backdrop {
    position: fixed;
    inset: 0;
    z-index: 200;
    /* Transparent but clickable — catches clicks to dismiss the menu. */
}

.arr-ctx-menu {
    position: fixed;
    z-index: 201;
    min-width: 180px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 12px rgba(177, 76, 255, 0.25);
    padding: 4px 0;
    font-family: var(--font-sans);
    font-size: 13px;
    /* Prevent the menu from overflowing the viewport on the right edge. */
    max-width: calc(100vw - 16px);
}

.arr-ctx-header {
    padding: 6px 12px 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.arr-ctx-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, color 0.12s ease;
}
.arr-ctx-item:hover {
    background: rgba(0, 229, 255, 0.1);
    color: var(--accent-primary);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}
.arr-ctx-item.disabled {
    opacity: 0.4;
    cursor: default;
}
.arr-ctx-item.disabled:hover {
    background: transparent;
    color: var(--text-primary);
    text-shadow: none;
}

.arr-ctx-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 15px;
    font-weight: 700;
    color: var(--accent-success);
    text-shadow: 0 0 6px rgba(68, 255, 136, 0.4);
}

/* Piano roll empty state */
.piano-roll-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 40px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
}

.clip-info {
    display: flex;
    align-items: center;
    gap: 4px;
}

.clip-voice {
    font-weight: 700;
    font-size: 14px;
}

/* --- Piano Roll --- */
.piano-roll {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.piano-roll-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.piano-roll-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-surface-trans);
    border-bottom: 1px solid var(--border);
}

.voice-strip {
    display: flex;
    gap: 2px;
    padding: 4px 12px;
    background: var(--bg-surface-trans);
    border-bottom: 1px solid var(--border);
}

.voice-cell {
    display: flex;
    align-items: center;
    gap: 1px;
    padding: 2px 4px;
    border-radius: 3px;
    background: var(--bg-darker);
}

.voice-cell.selected {
    background: rgba(0, 212, 255, 0.15);
    box-shadow: 0 0 0 1px rgba(0, 212, 255, 0.4);
}

.voice-select-btn {
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--mono-font);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 2px;
}

.voice-cell.selected .voice-select-btn {
    color: var(--accent);
}

.ms-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-dim);
    font-size: 9px;
    font-weight: 700;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 2px;
    min-width: 18px;
}

.ms-btn.muted.active {
    background: #f87171;
    color: #fff;
    border-color: #f87171;
}

.ms-btn.solo.active {
    background: #fbbf24;
    color: #000;
    border-color: #fbbf24;
}

.toolbar-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.toolbar-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.toolbar-item select {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-primary);
    font-size: 12px;
    padding: 3px 6px;
}

.toolbar-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-left: auto;
}

.piano-roll-grid-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
}

/* --- Rebuilt piano roll (exampleDAW interaction model) --- */

/* Toolbar row 2 (tools) */
.piano-roll-toolbar.tools {
    gap: 6px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
}

.midi-effects-chain {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-deep);
    min-height: 32px;
}

.midi-effects-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

.midi-effect-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-primary);
}

.midi-effect-name {
    font-family: var(--font-mono);
}

.midi-effect-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
    line-height: 1;
}

.midi-effect-remove:hover {
    color: var(--danger);
}

.midi-effect-add {
    font-size: 11px;
    padding: 2px 6px;
    background: var(--bg-mid);
    border: 1px dashed var(--border);
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.midi-effect-add:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.tool-btn {
    background: var(--bg-mid);
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 11px;
    font-family: var(--font-mono);
    padding: 3px 8px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.1s;
}

.tool-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-light);
}

.tool-btn.danger {
    color: var(--accent-error);
}

.tool-btn.danger:hover {
    background: rgba(255, 68, 119, 0.15);
    border-color: var(--accent-error);
}

.toolbar-divider {
    width: 1px;
    height: 18px;
    background: var(--border);
    margin: 0 4px;
}

.sel-count {
    font-size: 11px;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}

/* --- Top ruler (scroll-synced horizontally) --- */
.pr-ruler {
    display: flex;
    flex-direction: row;
    height: 24px;
    overflow: hidden;
    background: var(--bg-surface-trans);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.pr-ruler-spacer {
    flex-shrink: 0;
    background: var(--bg-surface-trans);
    border-right: 2px solid var(--border);
}

.pr-ruler-scroll {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.pr-ruler-content {
    position: relative;
    height: 100%;
}

.pr-ruler-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(0, 229, 255, 0.4);
}

.pr-ruler-label {
    position: absolute;
    top: 4px;
    left: 4px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: rgba(0, 229, 255, 0.7);
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}

.pr-ruler-tick {
    position: absolute;
    top: 50%;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.08);
}

.pr-ruler-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-warning);
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
}

/* --- Loop region markers (piano roll ruler) --- */
.pr-loop-region {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(177, 76, 255, 0.12);
    border-left: 1px solid rgba(177, 76, 255, 0.3);
    border-right: 1px solid rgba(177, 76, 255, 0.3);
    pointer-events: auto;
    cursor: grab;
    z-index: 8;
    transition: background 0.15s ease;
}
.pr-loop-region:active {
    cursor: grabbing;
}
.pr-loop-region.active {
    background: rgba(177, 76, 255, 0.22);
    border-left-color: rgba(177, 76, 255, 0.6);
    border-right-color: rgba(177, 76, 255, 0.6);
}
.pr-loop-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 10px;
    margin-left: -5px;
    z-index: 9;
    cursor: ew-resize;
    display: flex;
    justify-content: center;
    pointer-events: auto;
}
.pr-loop-marker-handle {
    width: 4px;
    height: 100%;
    background: rgba(177, 76, 255, 0.5);
    border-radius: 2px;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.pr-loop-marker:hover .pr-loop-marker-handle {
    background: var(--accent-secondary);
    box-shadow: 0 0 6px rgba(177, 76, 255, 0.6);
}
.pr-loop-marker.active .pr-loop-marker-handle {
    background: var(--accent-secondary);
    box-shadow: 0 0 8px rgba(177, 76, 255, 0.7);
}

/* --- Main area: pitch labels + grid --- */
.pr-main {
    display: flex;
    flex-direction: row;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Pitch labels (left column, scroll-synced vertically) */
.pr-labels {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: var(--bg-surface);
    border-right: 2px solid var(--border);
}

.pr-labels::-webkit-scrollbar { display: none; }

.pr-labels-content {
    position: relative;
    width: 100%;
}

.pr-label {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    display: flex;
    align-items: center;
    padding-left: 6px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    overflow: hidden;
    white-space: nowrap;
}

.pr-label.black {
    background: rgba(0, 0, 0, 0.3);
    color: var(--text-muted);
}

.pr-label.scale {
    background: rgba(68, 255, 136, 0.06);
}

.pr-label.c {
    color: var(--accent-primary);
    font-weight: 700;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

/* Drum kit sample name labels */
.pr-label.drum-kit {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 12px;
    background: rgba(0, 229, 255, 0.04);
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
}

/* Grid wrapper (scrollable, contains grid + velocity lane) */
.pr-grid-wrapper {
    flex: 1;
    overflow: auto;
    position: relative;
    background: transparent;
}

/* Grid */
.pr-grid {
    position: relative;
    background: transparent;
    cursor: crosshair;
    min-width: 100%;
}

/* Row backgrounds */
.pr-row {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.pr-row.black {
    background: rgba(0, 0, 0, 0.4);
}

.pr-row.scale {
    background: rgba(68, 255, 136, 0.07);
}

/* Drum kit row backgrounds */
.pr-row.drum-kit {
    background: rgba(0, 229, 255, 0.03);
    border-bottom: 1px solid rgba(0, 229, 255, 0.08);
}

/* Grid lines */
.pr-line-v {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.1);
    pointer-events: none;
    z-index: 1;
}

.pr-line-v.beat {
    background: rgba(255, 255, 255, 0.1);
}

.pr-line-v.sub {
    background: rgba(255, 255, 255, 0.04);
}

.pr-line-v.bar {
    background: rgba(0, 229, 255, 0.25);
    width: 2px;
}

.pr-line-h {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 1;
}

.pr-line-h.octave {
    background: rgba(255, 255, 255, 0.2);
}

/* Playhead */
.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--accent-warning);
    z-index: 5;
    pointer-events: none;
    box-shadow: 0 0 4px rgba(251, 191, 36, 0.6);
}

/* Notes */
.note {
    position: absolute;
    border-radius: 3px;
    color: #ffffff;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    padding: 0 3px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    cursor: pointer;
    z-index: 3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border: 1px solid rgba(255, 255, 255, 0.25);
    transition: opacity 0.1s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.note:hover {
    opacity: 1 !important;
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.2), 0 1px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.note.selected {
    box-shadow: 0 0 0 2px #ffffff, 0 0 8px rgba(255, 255, 255, 0.3), 0 2px 6px rgba(0, 0, 0, 0.6);
    z-index: 4;
    opacity: 1 !important;
    border-color: #ffffff;
}

/* Selection box */
.pr-selection-box {
    position: absolute;
    border: 1px solid var(--accent-primary);
    background: rgba(0, 229, 255, 0.1);
    pointer-events: none;
    z-index: 6;
}

/* Arrangement view marquee selection box */
.arr-sel-box {
    position: absolute;
    border: 1px solid var(--accent-primary);
    background: rgba(0, 229, 255, 0.1);
    pointer-events: none;
    z-index: 50;
}

/* Velocity lane */
.pr-velocity-lane {
    position: relative;
    background: var(--bg-mid-trans);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

.pr-vel-bar {
    position: absolute;
    bottom: 0;
    cursor: ns-resize;
    border-radius: 2px 2px 0 0;
    opacity: 0.6;
    transition: opacity 0.1s;
}

.pr-vel-bar:hover {
    opacity: 1;
}

.pr-vel-bar.selected {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--text-primary);
}

/* Pitch bend / automation lane */
.pr-pitchbend-lane {
    position: relative;
    background: var(--bg-mid);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
    cursor: crosshair;
}

.pr-pitchbend-lane::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background: var(--border);
    pointer-events: none;
}

.pr-pb-point {
    position: absolute;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    margin-top: -4px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
}

.pr-pb-point.param {
    width: auto;
    height: auto;
    padding: 1px 3px;
    font-size: 9px;
    border-radius: 3px;
    color: var(--text-primary);
    background: rgba(255, 200, 0, 0.3);
    border: 1px solid rgba(255, 200, 0, 0.6);
    margin-top: -8px;
}

.pr-pb-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
}

.pr-pb-hint {
    font-size: 10px;
    color: var(--text-muted);
}

/* Note inspector */
.note-inspector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-surface);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.note-inspector.empty {
    color: var(--text-dim);
    font-size: 12px;
    font-style: italic;
}

.note-inspector-info {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.ni-label {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent-primary);
    font-size: 14px;
}

.ni-detail {
    font-size: 11px;
    color: var(--text-dim);
    font-family: var(--font-mono);
}

.ni-field {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ni-field select {
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.ni-field input[type="range"] {
    width: 100px;
    cursor: pointer;
}

.ni-field input[type="number"] {
    width: 48px;
    background: var(--bg-darker);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 2px 4px;
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--font-mono);
}

.ni-vel-value {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-dim);
    min-width: 28px;
    text-align: right;
}

/* --- Legacy piano roll (kept for reference) --- */
.piano-roll-placeholder {
    background: var(--bg-deep);
    border-radius: var(--radius-sm);
    padding: 16px;
    min-height: 300px;
    overflow-x: auto;
}

.voice-lanes {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.voice-lane {
    display: flex;
    height: 40px;
    background: var(--bg-mid);
    border-radius: 4px;
    overflow: hidden;
}

.voice-label {
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.voice-notes {
    flex: 1;
    position: relative;
    /* 600px keeps the grid usable on small laptops; horizontal scroll
       covers anything narrower. */
    min-width: 600px;
}

.note-block {
    position: absolute;
    height: 16px;
    background: var(--gradient-primary);
    border-radius: 3px;
    color: var(--bg-deep);
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    padding: 0 4px;
    box-shadow: var(--shadow-sm);
}

.piano-roll-hint {
    text-align: center;
    color: var(--text-muted);
    font-size: 12px;
    margin-top: 16px;
}

/* --- Guided Wizard --- */
.guided-wizard {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Transparent background so the starfield (z-index: 0, fixed) shows
       through. Only subtle radial glows are layered on top. */
    background:
        radial-gradient(ellipse at 50% 80%, rgba(177, 76, 255, 0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 50% 20%, rgba(0, 229, 255, 0.08) 0%, transparent 50%);
    overflow-y: auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Synthwave grid floor */
.guided-wizard::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 40%;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0, 229, 255, 0.04) 100%),
        repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(0, 229, 255, 0.18) 39px, rgba(0, 229, 255, 0.18) 40px),
        repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(177, 76, 255, 0.18) 39px, rgba(177, 76, 255, 0.18) 40px);
    transform: perspective(400px) rotateX(60deg);
    transform-origin: bottom;
    pointer-events: none;
    z-index: 0;
    animation: grid-scroll 8s linear infinite;
}
@keyframes grid-scroll {
    from { background-position: 0 0, 0 0, 0 0; }
    to { background-position: 0 0, 0 0, 0 40px; }
}

.wizard-content {
    max-width: 800px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.wizard-header {
    text-align: center;
    margin-bottom: 48px;
}

.wizard-logo {
    font-size: 56px;
    margin-bottom: 16px;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.6));
    animation: float 3s ease-in-out infinite;
    display: inline-flex;
    gap: 6px;
}
.logo-pixel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    font-family: var(--font-pixel);
    font-size: 28px;
    border: 2px solid;
}
.logo-w {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    text-shadow: 0 0 12px var(--accent-primary);
    box-shadow: var(--glow-cyan), inset 0 0 12px rgba(0,229,255,0.15);
}
.logo-s {
    color: var(--accent-tertiary);
    border-color: var(--accent-tertiary);
    text-shadow: 0 0 12px var(--accent-tertiary);
    box-shadow: var(--glow-pink), inset 0 0 12px rgba(255,68,136,0.15);
}
.wizard-tagline {
    font-size: 0.95rem;
    color: var(--text-secondary);
    max-width: 500px;
    margin: 16px auto 0;
    line-height: 1.6;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.wizard-header h1 {
    font-family: var(--font-pixel);
    font-size: 2.2rem;
    color: var(--text-primary);
    letter-spacing: 4px;
    margin-bottom: 12px;
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.7),
        0 0 24px rgba(0, 229, 255, 0.4),
        0 0 48px rgba(177, 76, 255, 0.3),
        0 0 80px rgba(255, 68, 136, 0.2);
    animation: title-glow 2s ease-in-out infinite alternate;
}

.wizard-subtitle {
    font-family: var(--font-mono);
    font-size: 1.3rem;
    color: var(--accent-secondary);
    max-width: 560px;
    margin: 0 auto;
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(177, 76, 255, 0.5);
}

.wizard-choices h2 {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 24px;
    font-family: var(--font-pixel);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.wizard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.wizard-cards-two {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: 700px;
    margin: 0 auto;
}

.wizard-cards-three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    max-width: 1000px;
    margin: 0 auto;
}

/* Guide prompt — a highlighted banner above the cards encouraging new
   users to read the getting started guide. */
.wizard-guide-prompt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    margin-bottom: 24px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.25);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-secondary);
}
.guide-prompt-icon {
    font-size: 20px;
    flex-shrink: 0;
}
.guide-prompt-text {
    line-height: 1.5;
}
.guide-prompt-link {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}
.guide-prompt-link:hover {
    text-decoration: underline;
}

/* Load Project card — a <label> wrapping a hidden file input. Needs the
   same styling as the other wizard cards. */
.wizard-card-load {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* --- Template library --- */
.template-library-header {
    margin-bottom: 20px;
}

.wizard-back-btn {
    margin-bottom: 12px;
}

.template-library-subtitle {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 8px;
    font-family: var(--font-mono);
    letter-spacing: 1px;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.template-card {
    background: rgba(18, 22, 43, 0.7);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(4px);
    position: relative;
}
.template-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
    opacity: 0;
    transition: opacity 0.2s;
}

.template-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-cyan), 0 8px 24px rgba(0, 0, 0, 0.5);
}
.template-card:hover::before {
    opacity: 1;
}

.template-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.template-icon {
    font-size: 36px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4));
}

.template-info h3 {
    font-size: 1.05rem;
    margin-bottom: 2px;
    color: var(--text-primary);
}

.template-game {
    font-size: 11px;
    color: var(--accent-secondary);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.template-desc {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.template-instruments {
    font-size: 12px;
    color: var(--text-muted);
    padding-top: 8px;
    border-top: 1px solid var(--border);
    font-family: var(--font-mono);
}

.template-instruments-label {
    color: var(--accent-primary);
    font-weight: 600;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

/* --- Sidebar template picker --- */
.template-picker {
    position: relative;
    width: 100%;
}

.template-picker-list {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.6), var(--glow-purple);
    max-height: 320px;
    overflow-y: auto;
    z-index: 100;
    margin-bottom: 4px;
}

.template-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.template-picker-item:last-child {
    border-bottom: none;
}

.template-picker-item:hover {
    background: var(--bg-hover);
}

.template-picker-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.template-picker-name {
    font-size: 13px;
    font-weight: 600;
}

.template-picker-game {
    font-size: 10px;
    color: var(--text-muted);
    font-family: var(--font-mono);
}

.wizard-card {
    background: rgba(18, 22, 43, 0.7);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}
.wizard-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.08), transparent);
    transition: left 0.6s;
}
.wizard-card:hover::after {
    left: 100%;
}

.wizard-card:hover {
    transform: translateY(-4px);
    border-color: var(--accent-primary);
    box-shadow: var(--glow-cyan), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.card-icon {
    font-size: 40px;
    margin-bottom: 12px;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
}

.wizard-card h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--text-primary);
    font-family: var(--font-pixel);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.wizard-card p {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.card-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(177, 76, 255, 0.15);
    border: 1px solid var(--accent-secondary);
    border-radius: var(--radius-sm);
    font-size: 10px;
    color: var(--accent-secondary);
    font-family: var(--font-mono);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 4px rgba(177, 76, 255, 0.3);
}

.wizard-footer {
    text-align: center;
    margin-top: 32px;
}

.wizard-guide-link {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-family: var(--font-mono);
    letter-spacing: 1px;
    transition: all 0.2s;
}
.wizard-guide-link:hover {
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

/* --- Guide & About Pages --- */
.guide-page, .about-page {
    height: 100vh;
    overflow-y: auto;
    background:
        radial-gradient(ellipse at 50% 30%, rgba(177, 76, 255, 0.08) 0%, transparent 60%),
        var(--gradient-ocean);
    padding: 40px 20px;
}

.guide-container, .about-container {
    max-width: 700px;
    margin: 0 auto;
}
.about-logo {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 20px;
}

.guide-page h1, .about-page h1 {
    font-family: var(--font-pixel);
    font-size: 1.6rem;
    color: var(--text-primary);
    letter-spacing: 3px;
    margin-bottom: 16px;
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.6),
        0 0 24px rgba(0, 229, 255, 0.3),
        0 0 48px rgba(177, 76, 255, 0.2);
}

.guide-intro, .about-tagline {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    color: var(--accent-secondary);
    margin-bottom: 32px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(177, 76, 255, 0.4);
}

.guide-section, .about-section {
    background: rgba(18, 22, 43, 0.6);
    border: 1px solid var(--border-light);
    border-left: 2px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    padding: 20px;
    margin-bottom: 16px;
    backdrop-filter: blur(4px);
}

.guide-section h2, .about-section h2 {
    font-family: var(--font-pixel);
    font-size: 0.8rem;
    color: var(--accent-primary);
    margin-bottom: 12px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.guide-section p, .about-section p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.guide-section ul {
    margin-left: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.guide-section h3 {
    color: var(--text-primary);
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 1rem;
}

.guide-section ol {
    margin-left: 20px;
    color: var(--text-secondary);
    line-height: 1.8;
}

.guide-section strong {
    color: var(--text-primary);
}

.guide-toc {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.guide-toc h2 {
    color: var(--accent-primary);
    font-size: 1rem;
    margin-bottom: 8px;
}

.guide-toc ul {
    list-style: none;
    margin-left: 0;
    columns: 2;
    column-gap: 20px;
}

.guide-toc li {
    margin-bottom: 4px;
}

.guide-toc a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
}

.guide-toc a:hover {
    color: var(--accent-primary);
    text-decoration: underline;
}

.guide-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}

.guide-table th,
.guide-table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}

.guide-table th {
    background: var(--bg-elevated);
    color: var(--text-primary);
    font-weight: 600;
}

.guide-table td {
    color: var(--text-secondary);
}

.guide-back-link, .about-back-link {
    display: inline-block;
    margin-top: 24px;
    color: var(--accent-primary);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
    transition: all 0.2s;
}
.guide-back-link:hover, .about-back-link:hover {
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
}

/* Back button at top and bottom of guide page */
.guide-back-btn {
    display: inline-block;
    padding: 8px 20px;
    margin-bottom: 24px;
    background: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: 6px;
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 1px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
    transition: all 0.2s;
}
.guide-back-btn:hover {
    background: rgba(0, 229, 255, 0.1);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.7);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}
.guide-back-btn-bottom {
    margin-top: 32px;
    margin-bottom: 0;
}

/* --- Instrument/Composer View Layouts --- */
.instrument-view {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    flex: none;
}

.composer-view {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.aram-view {
    max-width: 800px;
    margin: 0 auto;
    flex: none;
}

/* --- Error --- */
.error {
    color: var(--accent-error);
    padding: 20px;
    text-align: center;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .studio-sidebar {
        width: 200px;
    }
}

@media (max-width: 768px) {
    .studio-sidebar {
        display: none;
    }
    .header-tabs {
        gap: 0;
    }
    .tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* ============================================================
   GLOBAL UI SYSTEM
   Shared chrome used by every tab: focus states, button feedback,
   and the fader-style range input.
   ============================================================ */

::selection {
    background: rgba(0, 229, 255, 0.3);
    color: #fff;
}

:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.55);
    outline-offset: 1px;
}

button:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.tool-btn:focus-visible,
.menu-item:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 2px rgba(0, 229, 255, 0.3),
        0 0 14px rgba(0, 229, 255, 0.3);
}

.btn:active:not(:disabled),
.btn-tiny:active:not(:disabled),
.tool-btn:active:not(:disabled) {
    transform: translateY(1px);
}

/* --- Fader-style range inputs -----------------------------------
   Element-level so any component with its own class rule (e.g.
   .arr-vol-fader) can still override it. */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    margin: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.1) 100%),
        linear-gradient(90deg, rgba(0, 229, 255, 0.35) 0%, rgba(177, 76, 255, 0.32) 100%);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 11px;
    height: 18px;
    margin-top: -7px;
    border-radius: 2px;
    border: 1px solid var(--accent-primary);
    background: linear-gradient(180deg, #f2f6ff 0%, #9fb4d6 42%, #46567a 43%, #7f93b8 100%);
    box-shadow:
        0 0 7px rgba(0, 229, 255, 0.55),
        0 1px 3px rgba(0, 0, 0, 0.7);
    transition: box-shadow 0.15s ease, transform 0.12s ease;
}

input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow:
        0 0 12px rgba(0, 229, 255, 0.85),
        0 1px 3px rgba(0, 0, 0, 0.7);
}

input[type="range"]:active::-webkit-slider-thumb {
    transform: scaleY(1.08);
    border-color: #fff;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.1)), var(--bg-elevated);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.7);
}

input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.75), rgba(177, 76, 255, 0.7));
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

input[type="range"]::-moz-range-thumb {
    width: 9px;
    height: 16px;
    border-radius: 2px;
    border: 1px solid var(--accent-primary);
    background: linear-gradient(180deg, #f2f6ff 0%, #9fb4d6 42%, #46567a 43%, #7f93b8 100%);
    box-shadow: 0 0 7px rgba(0, 229, 255, 0.55);
}

input[type="range"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

input[type="checkbox"] {
    accent-color: var(--accent-primary);
    cursor: pointer;
}

/* ============================================================
   INSTRUMENTS TAB — polish pass
   Three full-height "rack" cards (Samples / Instruments / DSP)
   with sticky neon headers, a consistent type scale, and
   custom-drawn fader-style sliders.
   ============================================================ */

/* --- Layout: three racks that fill the viewport and scroll on their own --- */
.instrument-view {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(400px, 1.3fr) minmax(280px, 0.9fr);
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 4px;
}

.instrument-view > * {
    min-height: 0;
}

.instrument-view .sample-browser,
.instrument-view .instrument-editor,
.instrument-view .dsp-panel {
    position: relative;
    margin-bottom: 0;
    padding: 0 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(177, 76, 255, 0.05) 0%, transparent 180px),
        var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}

/* --- Sticky panel header with a neon rule --- */
.instrument-view .panel-header {
    position: sticky;
    top: 0;
    z-index: 4;
    gap: 10px;
    margin: 0 -14px 12px;
    padding: 11px 14px 9px;
    background: linear-gradient(180deg, rgba(10, 13, 26, 0.97) 0%, rgba(13, 16, 32, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.instrument-view .panel-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-neon);
    opacity: 0.55;
}

.instrument-view .panel-header h2 {
    font-family: var(--font-pixel);
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.5),
        0 0 22px rgba(0, 229, 255, 0.2);
    white-space: nowrap;
}

.instrument-view .panel-header .btn {
    padding: 5px 10px;
    font-size: 11px;
    letter-spacing: 0.04em;
}

/* --- Type scale ------------------------------------------------
   Labels: Inter, tiny, uppercase, tracked out.
   Readouts: VT323, larger, neon — legible and unmistakably retro. */
.instrument-view .step-control-label,
.instrument-view .detail-label,
.instrument-view .quality-label,
.instrument-view .sample-edit-label,
.instrument-view .layer-label,
.instrument-view .drum-kit-adsr-label,
.instrument-view .fir-tap-label,
.instrument-view .slider-row > label,
.instrument-view .fir-presets > label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.instrument-view .adsr-val,
.instrument-view .fir-tap-value,
.instrument-view .drum-kit-adsr-val,
.instrument-view .quality-value,
.instrument-view .note-name-display,
.instrument-view .ctl-value {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--accent-primary);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.35);
}

.instrument-view .detail-value {
    font-family: var(--font-mono);
    font-size: 17px;
    line-height: 1.1;
    color: var(--text-primary);
}

/* --- Form controls --------------------------------------------- */
.instrument-view input[type="text"],
.instrument-view input[type="number"],
.instrument-view select {
    background-color: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 4px 7px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.instrument-view input[type="number"] {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    padding: 2px 6px;
    color: var(--accent-primary);
}

.instrument-view select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2300e5ff' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
}

.instrument-view select option {
    background: var(--bg-mid);
    color: var(--text-primary);
}

.instrument-view input[type="text"]:hover,
.instrument-view input[type="number"]:hover,
.instrument-view select:hover {
    border-color: var(--accent-secondary);
}

.instrument-view input[type="text"]:focus,
.instrument-view input[type="number"]:focus,
.instrument-view select:focus,
.instrument-view input:not([type]):focus {
    outline: none;
    border-color: var(--accent-primary);
    background-color: var(--bg-mid);
    box-shadow:
        0 0 0 2px rgba(0, 229, 255, 0.12),
        0 0 10px rgba(0, 229, 255, 0.2);
}

.instrument-view input[type="checkbox"] {
    /* Checkboxes are styled by the shared neon-toggle rules. */
    cursor: pointer;
}

/* Sliders use the shared fader from the global UI system; the racks just
   want them to fill their control cell. */
.instrument-view input[type="range"] {
    width: 100%;
}

/* --- Control groups: every cluster of settings sits in its own bay --- */
.instrument-view .inst-type-toggle,
.instrument-view .inst-adsr-defaults,
.instrument-view .inst-performance,
.instrument-view .layer-props,
.instrument-view .drum-kit-editor,
.instrument-view .sample-edit-section,
.instrument-view .dsp-section {
    position: relative;
    margin: 0 0 10px;
    padding: 9px 11px 10px;
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.55) 0%, rgba(10, 13, 26, 0.5) 100%);
    border: 1px solid var(--border);
    border-left: 2px solid rgba(0, 229, 255, 0.28);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.instrument-view .inst-type-toggle:hover,
.instrument-view .inst-adsr-defaults:hover,
.instrument-view .inst-performance:hover,
.instrument-view .layer-props:hover,
.instrument-view .sample-edit-section:hover,
.instrument-view .dsp-section:hover {
    border-left-color: rgba(0, 229, 255, 0.6);
}

/* Group titles */
.instrument-view .inst-adsr-defaults > .step-control-label,
.instrument-view .drum-kit-header > .step-control-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
}

/* --- Samples panel ---------------------------------------------- */
.instrument-view .sample-list {
    max-height: 26vh;
    gap: 3px;
    padding-right: 2px;
}

.instrument-view .sample-item {
    position: relative;
    padding: 6px 10px 6px 14px;
    background: linear-gradient(90deg, rgba(26, 31, 58, 0.9) 0%, rgba(18, 22, 43, 0.7) 100%);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    gap: 10px;
}

.instrument-view .sample-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--border-light);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.instrument-view .sample-item:hover::before {
    background: var(--accent-secondary);
    box-shadow: 0 0 8px rgba(177, 76, 255, 0.6);
}

.instrument-view .sample-item.selected {
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.14) 0%, rgba(18, 22, 43, 0.7) 70%);
    border-color: rgba(0, 229, 255, 0.5);
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.12);
}

.instrument-view .sample-item.selected::before {
    background: var(--accent-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.8);
}

.instrument-view .sample-name {
    font-size: 12.5px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.instrument-view .sample-item.selected .sample-name {
    color: var(--accent-primary);
}

.instrument-view .sample-info {
    flex-shrink: 0;
    font-size: 13px;
    letter-spacing: 0.5px;
}

.instrument-view .sample-details,
.instrument-view .instrument-details {
    background: rgba(10, 13, 26, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px;
}

.instrument-view .sample-name-input,
.instrument-view .instrument-name-input {
    flex: 1;
    min-width: 0;
    background: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 10px;
}

.instrument-view .sample-name-row,
.instrument-view .instrument-name-row {
    gap: 6px;
    margin-bottom: 12px;
}

.instrument-view .sample-name-row .btn,
.instrument-view .instrument-name-row .btn {
    padding: 5px 9px;
    font-size: 11px;
    white-space: nowrap;
}

.instrument-view .waveform-container {
    position: relative;
    padding: 6px;
    background:
        radial-gradient(ellipse at 50% 100%, rgba(0, 229, 255, 0.09) 0%, transparent 65%),
        rgba(4, 6, 14, 0.85);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow:
        inset 0 0 24px rgba(0, 229, 255, 0.06),
        0 2px 10px rgba(0, 0, 0, 0.5);
}

.instrument-view .detail-grid {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.instrument-view .detail-item {
    gap: 1px;
    padding: 5px 8px;
    background: rgba(26, 31, 58, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.instrument-view .quality-grid {
    gap: 6px;
}

.instrument-view .quality-item {
    padding: 3px 8px;
    background: rgba(26, 31, 58, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.instrument-view .sample-edit-row {
    gap: 6px;
}

.instrument-view .loop-seam-quality {
    font-size: 14px;
    letter-spacing: 0.3px;
    background: rgba(10, 13, 26, 0.6);
}

/* --- Instruments panel ------------------------------------------ */
.instrument-view .instrument-selector {
    gap: 4px;
    margin-bottom: 12px;
    padding-bottom: 2px;
}

.instrument-view .instrument-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.95), rgba(13, 16, 32, 0.9));
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.instrument-view .instrument-tab::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--border-light);
    box-shadow: none;
    transition: all 0.15s ease;
}

.instrument-view .instrument-tab:hover {
    background: var(--bg-hover);
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

.instrument-view .instrument-tab.selected {
    background: linear-gradient(180deg, rgba(177, 76, 255, 0.22), rgba(0, 229, 255, 0.08));
    border-color: var(--accent-secondary);
    color: var(--text-primary);
    box-shadow: 0 0 12px rgba(177, 76, 255, 0.25);
}

.instrument-view .instrument-tab.selected::before {
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.9);
}

/* Drag-and-drop reorder styling */
.instrument-tab[draggable="true"] {
    cursor: grab;
    user-select: none;
}
.instrument-tab[draggable="true"]:active {
    cursor: grabbing;
}
.instrument-tab.dragging {
    opacity: 0.4;
}
.instrument-tab.drag-over {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
}

.instrument-view .instrument-info {
    gap: 6px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.instrument-view .instrument-info span {
    padding: 3px 8px;
    background: rgba(26, 31, 58, 0.55);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 11px;
    color: var(--text-secondary);
}

.instrument-view .adsr-controls .step-control input[type="range"] {
    width: 78px;
}

.instrument-view .adsr-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--accent-secondary);
    text-transform: uppercase;
}

.instrument-view .adsr-val,
.instrument-view .drum-kit-adsr-val {
    min-width: 22px;
    text-align: right;
}

.instrument-view .layer-bar {
    gap: 5px;
    margin-bottom: 8px;
}

.instrument-view .layer-tab {
    padding: 3px 11px;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1.2;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

.instrument-view .layer-tab.selected {
    background: rgba(0, 229, 255, 0.14);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

/* Step cards */
.instrument-view .step-list {
    gap: 6px;
}

.instrument-view .step-item-edit {
    position: relative;
    padding: 8px 10px 9px;
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.6) 0%, rgba(13, 16, 32, 0.55) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.instrument-view .step-item-edit::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--accent-secondary), rgba(0, 229, 255, 0.3));
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.instrument-view .step-item-edit:hover {
    border-color: var(--border-light);
    box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
}

.instrument-view .step-item-edit:hover::before {
    opacity: 1;
}

.instrument-view .step-header {
    gap: 6px;
    padding-bottom: 7px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(61, 47, 110, 0.4);
}

.instrument-view .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 2px 4px;
    background: rgba(177, 76, 255, 0.14);
    border: 1px solid rgba(177, 76, 255, 0.45);
    border-radius: var(--radius-sm);
    font-family: var(--font-pixel);
    font-size: 7px;
    line-height: 1.4;
    color: var(--accent-secondary);
    text-shadow: 0 0 6px rgba(177, 76, 255, 0.6);
}

.instrument-view .step-sample-name {
    font-size: 12px;
}

.instrument-view .step-duration-badge,
.instrument-view .step-vol-badge,
.instrument-view .step-pan-badge {
    font-size: 14px;
    line-height: 1;
    padding: 2px 6px;
    color: var(--text-secondary);
    background: rgba(4, 6, 14, 0.7);
    border: 1px solid var(--border);
}

.instrument-view .step-controls {
    gap: 7px;
}

.instrument-view .step-advanced {
    margin-top: 8px;
    padding-top: 8px;
    gap: 10px;
}

.instrument-view .btn-add-step {
    margin-top: 8px;
    padding: 7px;
    background: transparent;
    border: 1px dashed var(--border-light);
    color: var(--text-secondary);
    letter-spacing: 0.06em;
}

.instrument-view .btn-add-step:hover {
    border-color: var(--accent-primary);
    border-style: solid;
    color: var(--accent-primary);
    background: rgba(0, 229, 255, 0.06);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.15);
}

.instrument-view .transition-mode {
    margin-top: 10px;
    padding: 8px 11px;
    background: rgba(10, 13, 26, 0.6);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: var(--text-muted);
}

.instrument-view .step-list-empty {
    padding: 22px 16px;
    background: rgba(10, 13, 26, 0.45);
    border: 1px dashed var(--border-light);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

/* --- DSP & Echo panel -------------------------------------------- */
.instrument-view .dsp-section h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.instrument-view .dsp-section h3::before {
    content: '';
    width: 4px;
    height: 12px;
    flex-shrink: 0;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.instrument-view .dsp-section h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.25), transparent);
}

.instrument-view .slider-row {
    gap: 3px;
    margin-bottom: 9px;
}

.instrument-view .slider-row > label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.instrument-view .ctl-value {
    color: var(--text-primary);
    text-shadow: none;
}

.instrument-view .toggle-row label {
    font-size: 12px;
    color: var(--text-secondary);
}

.instrument-view .echo-controls {
    margin-top: 10px;
    padding: 10px;
    background: rgba(4, 6, 14, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.instrument-view .echo-disabled,
.instrument-view .echo-library-empty {
    margin: 0;
    padding: 10px;
    text-align: center;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-muted);
    background: rgba(4, 6, 14, 0.4);
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
}

.instrument-view .fir-presets {
    margin-bottom: 10px;
}

.instrument-view .fir-presets select {
    flex: 1;
}

.instrument-view .fir-taps {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(4, 6, 14, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.instrument-view .fir-tap {
    display: grid;
    grid-template-columns: 58px 1fr 30px;
    align-items: center;
    gap: 8px;
}

.instrument-view .fir-tap-label {
    min-width: 0;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.instrument-view .fir-tap-value {
    min-width: 0;
    text-align: right;
    color: var(--text-secondary);
    text-shadow: none;
}

.instrument-view .echo-preset-apply {
    border-color: var(--border);
    font-size: 12px;
}

/* --- Narrow screens: stack the racks and let the page scroll ----- */
@media (max-width: 1180px) {
    .instrument-view {
        grid-template-columns: minmax(260px, 1fr) minmax(360px, 1.4fr);
    }
    .instrument-view .dsp-panel {
        grid-column: 1 / -1;
        max-height: 60vh;
    }
}

@media (max-width: 900px) {
    .instrument-view {
        grid-template-columns: 1fr;
        flex: none;
        min-height: auto;
    }
    .instrument-view .sample-browser,
    .instrument-view .instrument-editor,
    .instrument-view .dsp-panel {
        max-height: 70vh;
        grid-column: auto;
    }
}

/* ============================================================
   SHARED PANEL CHROME
   The pixel-font panel title treatment, used by every tab.
   ============================================================ */
.song-composer .panel-header h2,
.aram-map .panel-header h2 {
    font-family: var(--font-pixel);
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow:
        0 0 10px rgba(0, 229, 255, 0.5),
        0 0 22px rgba(0, 229, 255, 0.2);
}

/* ============================================================
   HEADER & TRANSPORT STRIP
   ============================================================ */
.tab.active {
    box-shadow: inset 0 -12px 18px -14px rgba(0, 229, 255, 0.9);
}

.header-actions .btn.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    justify-content: center;
    font-size: 15px;
}

.transport-bar {
    gap: 16px;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(13, 16, 32, 0.9) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.transport-info {
    gap: 0;
    align-items: center;
}

.transport-item {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 0 14px;
    border-right: 1px solid rgba(61, 47, 110, 0.55);
    line-height: 1;
}

.transport-item:first-child {
    padding-left: 0;
}

.ti-label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.ti-value {
    font-family: var(--font-mono);
    font-size: 16px;
    color: var(--text-primary);
}

.transport-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transport-led {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.9);
    animation: led-pulse 2.4s ease-in-out infinite;
}

@keyframes led-pulse {
    50% { opacity: 0.25; }
}

/* ============================================================
   SIDEBAR & BROWSER
   ============================================================ */
.studio-sidebar {
    background:
        linear-gradient(180deg, rgba(13, 16, 32, 0.94) 0%, rgba(6, 8, 15, 0.9) 100%);
    box-shadow: inset -1px 0 0 rgba(177, 76, 255, 0.14);
}

.sidebar-section h3,
.browser-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.sidebar-section h3::before,
.browser-title::before {
    content: '';
    width: 3px;
    height: 11px;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.browser-title {
    margin-bottom: 0;
}

.info-row {
    align-items: baseline;
    padding: 3px 0;
    border-bottom: 1px dotted rgba(61, 47, 110, 0.45);
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    font-size: 11px;
    letter-spacing: 0.03em;
}

.info-value {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.browser-search {
    padding-left: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235a6a8a' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='M10.5 10.5L14 14'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 7px center;
    background-size: 13px;
}

.browser-tab {
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-size: 10px;
}

.browser-tab.active {
    box-shadow: 0 0 10px rgba(177, 76, 255, 0.22);
    color: var(--accent-secondary);
}

.browser-group-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: 9px;
    letter-spacing: 0.12em;
}

.browser-group-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(177, 76, 255, 0.3), transparent);
}

.wishlist-item,
.library-instrument,
.library-template,
.snes-category-header {
    position: relative;
    background: linear-gradient(90deg, rgba(26, 31, 58, 0.75) 0%, rgba(18, 22, 43, 0.55) 100%);
}

.wishlist-item:hover,
.library-instrument:hover,
.library-template:hover,
.snes-category-header:hover {
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.1);
}

.snes-category-count,
.library-instrument-steps,
.wishlist-item-search {
    font-family: var(--font-mono);
}

.snes-category-count {
    font-size: 13px;
    line-height: 1.1;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.snes-sample-add {
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
}

.snes-sample-add:hover:not(:disabled) {
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
}

.snes-category-label {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--text-muted);
}

.browser-hint {
    border-left-width: 3px;
}

.voice-summary {
    box-shadow: inset 0 0 16px rgba(68, 255, 136, 0.05);
}

.voice-count {
    font-size: 17px;
    line-height: 1;
}

/* ============================================================
   COMPOSER TAB
   ============================================================ */
.song-composer {
    background:
        linear-gradient(180deg, rgba(177, 76, 255, 0.05) 0%, transparent 160px),
        var(--bg-surface-trans);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.song-composer .panel-header {
    position: relative;
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.song-composer .panel-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-neon);
    opacity: 0.5;
}

/* Song tabs — same pill + LED language as the instrument racks */
.song-tab {
    padding: 4px 10px;
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.95), rgba(13, 16, 32, 0.9));
    border: 1px solid var(--border);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.song-tab::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: var(--border-light);
    transition: all 0.15s ease;
}

.song-tab:hover {
    border-color: var(--accent-secondary);
    color: var(--text-primary);
}

.song-tab.selected {
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.18), rgba(177, 76, 255, 0.08));
    border-color: var(--accent-primary);
    color: var(--text-primary);
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.2);
}

.song-tab.selected::before {
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.9);
}

.song-tab-add {
    line-height: 1;
    padding: 3px 12px;
}

.song-details {
    background: rgba(10, 13, 26, 0.55);
    border: 1px solid var(--border);
    padding: 5px 10px;
}

.song-info-item {
    gap: 7px;
    font-size: 11px;
}

.song-info-item > span:first-child {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.tempo-input {
    background-color: var(--bg-deep);
    border-color: var(--border-light);
    font-family: var(--font-mono);
    font-size: 16px;
    line-height: 1;
    color: var(--accent-primary);
    padding: 2px 8px;
}

.tempo-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

.tempo-input:disabled {
    opacity: 0.85;
    cursor: default;
}

/* --- Console strips: every toolbar in the composer shares one look --- */
/* Solid (opaque) backgrounds so the starfield doesn't show through toolbars. */
.arr-toolbar,
.piano-roll-toolbar,
.voice-strip,
.pr-pb-controls,
.note-inspector {
    background:
        linear-gradient(180deg, rgb(26, 31, 58) 0%, rgb(13, 16, 32) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.arr-label {
    font-family: var(--font-pixel);
    font-size: 0.5rem;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.toolbar-label,
.voice-budget-inline-label,
.pr-pb-hint {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.arr-info,
.toolbar-hint {
    font-size: 10.5px;
    color: var(--text-dim);
    letter-spacing: 0.02em;
}

.toolbar-divider {
    background: linear-gradient(180deg, transparent, var(--border-light), transparent);
}

/* Zoom controls (previously unstyled) */
.zoom-control {
    gap: 7px;
}

.zoom-control input[type="range"] {
    width: 96px;
}

.zoom-value {
    min-width: 44px;
    text-align: right;
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--accent-primary);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

/* Toolbar selects */
.toolbar-item select,
.ni-field select {
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--bg-deep);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2300e5ff' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    padding: 3px 20px 3px 7px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.toolbar-item select:hover,
.ni-field select:hover {
    border-color: var(--accent-secondary);
}

.toolbar-item select:focus,
.ni-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12);
}

.toolbar-item select option,
.ni-field select option {
    background: var(--bg-mid);
}

/* Tool buttons — the "active" state was never styled */
.tool-btn {
    font-size: 14px;
    line-height: 1.15;
    letter-spacing: 0.5px;
    padding: 3px 9px;
}

.tool-btn.active {
    background: rgba(0, 229, 255, 0.14);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25), inset 0 0 10px rgba(0, 229, 255, 0.08);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.sel-count {
    font-size: 14px;
    line-height: 1;
}

/* Rulers */
.arr-ruler,
.pr-ruler {
    background: linear-gradient(180deg, rgb(26, 31, 58), rgb(10, 13, 26));
}

.arr-ruler-spacer,
.pr-ruler-spacer {
    background: var(--bg-surface);
}

.arr-ruler-bar .arr-ruler-label {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1;
    color: rgba(0, 229, 255, 0.75);
    background: transparent;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.arr-ruler-bar {
    background: rgba(0, 229, 255, 0.28);
}

.pr-ruler-label {
    font-size: 13px;
}

/* Playheads — one consistent amber "now" line everywhere */
.arr-playhead,
.arr-lane-playhead {
    background: var(--accent-warning);
    box-shadow: 0 0 6px rgba(255, 204, 0, 0.7);
}

.arr-lane-playhead {
    opacity: 0.8;
}

/* Track headers */
.arr-track-header {
    background: linear-gradient(90deg, rgb(26, 31, 58) 0%, rgb(13, 16, 32) 100%);
}

.arr-track-name {
    font-size: 11.5px;
    letter-spacing: 0.02em;
}

/* Compact fader for track volume (matches the global fader, smaller) */
.arr-vol-fader-wrap {
    position: relative;
    width: 100%;
    height: 14px;
    margin: 2px 0;
}

input[type="range"].arr-vol-fader {
    position: relative;
    width: 100%;
    height: 14px;
    background: transparent !important;
    border: none;
    margin: 0;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
}

input[type="range"].arr-vol-fader::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    border: 1px solid var(--border) !important;
    background: linear-gradient(90deg,
        rgba(0, 255, 136, 0.2) 0%,
        rgba(0, 255, 136, 0.2) 70%,
        rgba(255, 221, 0, 0.2) 70%,
        rgba(255, 221, 0, 0.2) 92%,
        rgba(255, 48, 48, 0.2) 92%,
        rgba(255, 48, 48, 0.2) 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

input[type="range"].arr-vol-fader::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    border: 1px solid var(--border) !important;
    background: linear-gradient(90deg,
        rgba(0, 255, 136, 0.2) 0%,
        rgba(0, 255, 136, 0.2) 70%,
        rgba(255, 221, 0, 0.2) 70%,
        rgba(255, 221, 0, 0.2) 92%,
        rgba(255, 48, 48, 0.2) 92%,
        rgba(255, 48, 48, 0.2) 100%) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Firefox: the "progress" (filled portion 0→thumb) paints its own
 * blue-to-purple gradient from the generic rule. Make it transparent
 * so the meter gradient on ::-moz-range-track shows through. */
input[type="range"].arr-vol-fader::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Per-track output level meter.
 * Full-width bright gradient, clipped to reveal only the active
 * portion. IN FRONT of everything (z-index 3, pointer-events none).
 * Colors are relative to the full track width: green at low levels,
 * yellow at mid, red only near clipping. */
.arr-vol-fader-meter {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        #00ff88 0%,
        #00ff88 70%,
        #ffdd00 70%,
        #ffdd00 92%,
        #ff3030 92%,
        #ff3030 100%);
    box-shadow:
        0 0 4px rgba(0, 255, 136, 0.5),
        inset 0 0 1px rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 3;
    transition: clip-path 0.03s linear;
    overflow: hidden;
}

input.arr-vol-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 13px;
    margin-top: -5px;
    border-radius: 2px;
    border: 1px solid var(--accent-primary);
    background: linear-gradient(180deg, #f2f6ff 0%, #9fb4d6 45%, #46567a 46%, #7f93b8 100%);
    box-shadow: 0 0 5px rgba(0, 229, 255, 0.5);
}

input.arr-vol-fader::-moz-range-thumb {
    width: 8px;
    height: 13px;
    border-radius: 2px;
    border: 1px solid var(--accent-primary);
    background: linear-gradient(180deg, #f2f6ff 0%, #9fb4d6 45%, #46567a 46%, #7f93b8 100%);
}

/* Mute / solo + voice cells */
.ms-btn {
    font-family: var(--font-sans);
    font-size: 8.5px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    background: rgba(6, 8, 15, 0.6);
    transition: all 0.12s ease;
}

.ms-btn:hover {
    color: var(--text-primary);
    border-color: var(--border-light);
}

.ms-btn.muted.active {
    background: var(--accent-error);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.45);
}

.ms-btn.solo.active {
    background: var(--accent-warning);
    border-color: var(--accent-warning);
    box-shadow: 0 0 8px rgba(255, 204, 0, 0.45);
}

.ms-btn.arm.active {
    color: #fff;
    background: var(--accent-error);
    border-color: var(--accent-error);
    box-shadow: 0 0 8px rgba(255, 68, 119, 0.6);
}

.voice-cell {
    border: 1px solid var(--border);
    background: rgba(6, 8, 15, 0.55);
}

.voice-cell.selected {
    border-color: var(--accent-primary);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.25);
}

.voice-select-btn {
    font-family: var(--font-mono);
    font-size: 15px;
    line-height: 1;
    color: var(--text-secondary);
}

.voice-cell.selected .voice-select-btn {
    color: var(--accent-primary);
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

/* Note inspector */
.ni-label {
    font-size: 18px;
    line-height: 1;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.ni-detail,
.ni-vel-value {
    font-size: 14px;
    line-height: 1;
}

.ni-field input[type="number"] {
    background-color: var(--bg-deep);
    border-color: var(--border-light);
    color: var(--accent-primary);
    font-size: 15px;
    line-height: 1;
}

.ni-field > span:first-child {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Splitter */
.composer-splitter {
    background: linear-gradient(180deg, rgba(6, 8, 15, 0.9), rgba(26, 31, 58, 0.9));
}

.composer-splitter:hover,
.composer-splitter.active {
    background: rgba(0, 229, 255, 0.18);
}

.composer-splitter-grip {
    background: var(--border-light);
}

.composer-splitter:hover .composer-splitter-grip,
.composer-splitter.active .composer-splitter-grip {
    background: var(--accent-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.7);
}

/* Empty states */
.piano-roll-empty,
.no-songs {
    color: var(--text-muted);
    font-size: 12.5px;
}

.piano-roll-empty {
    background:
        radial-gradient(ellipse at center, rgba(0, 229, 255, 0.04) 0%, transparent 60%);
}

/* ============================================================
   ARAM MAP TAB
   ============================================================ */
.aram-view {
    max-width: 980px;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 4px;
}

.aram-map {
    height: 100%;
    overflow-y: auto;
    padding: 0 18px 18px;
    background:
        linear-gradient(180deg, rgba(177, 76, 255, 0.05) 0%, transparent 200px),
        var(--bg-surface-trans);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        inset 0 0 40px rgba(0, 0, 0, 0.25);
}

.aram-map .panel-header {
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0 -18px 16px;
    padding: 11px 18px 9px;
    background: linear-gradient(180deg, rgba(10, 13, 26, 0.97) 0%, rgba(13, 16, 32, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.aram-map .panel-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-neon);
    opacity: 0.55;
}

.aram-capacity {
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.aram-bar {
    height: 34px;
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.7),
        0 0 18px rgba(0, 0, 0, 0.4);
}

.aram-segment {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(6, 8, 15, 0.85);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.aram-segment.engine {
    background: linear-gradient(180deg, #c77bff 0%, #8f3ce0 100%);
}

.aram-segment.samples {
    background: linear-gradient(180deg, #4df2ff 0%, #00b7cc 100%);
}

.aram-segment.echo {
    background: linear-gradient(180deg, #ff6fa5 0%, #e0316f 100%);
}

.aram-segment.free {
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.9) 0%, rgba(13, 16, 32, 0.9) 100%);
    color: var(--text-muted);
    box-shadow: none;
}

.aram-segment:hover {
    filter: brightness(1.15);
}

.aram-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.aram-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 10px;
    background: rgba(26, 31, 58, 0.5);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.aram-legend-item i {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    flex-shrink: 0;
}

.aram-legend-item i.engine { background: var(--accent-secondary); box-shadow: 0 0 6px rgba(177, 76, 255, 0.7); }
.aram-legend-item i.samples { background: var(--accent-primary); box-shadow: 0 0 6px rgba(0, 229, 255, 0.7); }
.aram-legend-item i.echo { background: var(--accent-tertiary); box-shadow: 0 0 6px rgba(255, 68, 136, 0.7); }
.aram-legend-item i.free { background: var(--bg-elevated); border: 1px solid var(--border-light); }

.aram-legend-item b {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: var(--text-primary);
}

.aram-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

.aram-stat {
    gap: 2px;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.6) 0%, rgba(10, 13, 26, 0.55) 100%);
    border: 1px solid var(--border);
    border-left: 2px solid rgba(0, 229, 255, 0.35);
    border-radius: var(--radius-sm);
}

.aram-stat .stat-label {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
}

.aram-stat .stat-value {
    font-family: var(--font-mono);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.35);
}

.aram-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    background: rgba(255, 204, 0, 0.08);
    border-left: 3px solid var(--accent-warning);
    box-shadow: inset 0 0 24px rgba(255, 204, 0, 0.05);
}

.aram-placements h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.3);
}

.aram-placements h3::before {
    content: '';
    width: 4px;
    height: 12px;
    background: var(--gradient-primary);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.aram-placements h3::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.25), transparent);
}

.placement-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.placement-item {
    position: relative;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    padding: 5px 10px;
    background: rgba(18, 22, 43, 0.55);
    border: 1px solid transparent;
    overflow: hidden;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.placement-item:hover {
    border-color: rgba(0, 229, 255, 0.35);
    background: rgba(26, 31, 58, 0.7);
}

/* Proportional size bar behind each row */
.placement-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(0, 229, 255, 0.16), rgba(177, 76, 255, 0.06));
    border-right: 1px solid rgba(0, 229, 255, 0.25);
    pointer-events: none;
}

.placement-name {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-primary);
}

.placement-addr,
.placement-len {
    position: relative;
    font-size: 15px;
    line-height: 1;
}

.placement-len {
    min-width: 62px;
    text-align: right;
}

.aram-error h3 {
    font-family: var(--font-mono);
    font-size: 18px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

/* ============================================================
   GUIDE & ABOUT PAGES
   ============================================================ */
.guide-container,
.about-container {
    max-width: 780px;
}

.guide-section,
.about-section {
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.guide-section:hover,
.about-section:hover {
    border-left-color: var(--accent-secondary);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}

.guide-toc {
    background: rgba(18, 22, 43, 0.6);
    border-left: 2px solid var(--accent-secondary);
    backdrop-filter: blur(4px);
}

.guide-toc h2 {
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.guide-toc a {
    display: inline-block;
    padding: 1px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.guide-toc a:hover {
    text-decoration: none;
    border-bottom-color: var(--accent-primary);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.guide-table th {
    background: linear-gradient(180deg, rgba(26, 31, 58, 0.95), rgba(13, 16, 32, 0.9));
    font-family: var(--font-sans);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.guide-table tr:hover td {
    background: rgba(0, 229, 255, 0.04);
    color: var(--text-primary);
}

.guide-back-link,
.about-back-link {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: rgba(18, 22, 43, 0.6);
}

.guide-back-link:hover,
.about-back-link:hover {
    border-color: var(--accent-primary);
    background: rgba(0, 229, 255, 0.08);
}

/* Modal dialog (Save to Library, etc.) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.modal-dialog {
    background: var(--bg-surface);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    min-width: 320px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}
.modal-dialog h3 {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: var(--accent-primary);
}
.modal-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}
.modal-field label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.modal-field input, .modal-field select {
    padding: 6px 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: 13px;
    font-family: var(--font-sans);
}
.modal-field input:focus, .modal-field select:focus {
    border-color: var(--accent-primary);
    outline: none;
}
.modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Right-click context menu for sample library */
.ctx-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: transparent;
}

.ctx-menu {
    position: fixed;
    z-index: 301;
    min-width: 160px;
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 229, 255, 0.2);
    padding: 4px 0;
    font-family: var(--font-sans);
    font-size: 12px;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
}

.ctx-menu-header {
    padding: 6px 12px 4px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
}

.ctx-menu-item {
    padding: 6px 12px;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.1s;
}

.ctx-menu-item:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}

/* Drum subcategories (nested within Drums) */
.snes-drum-subcategories {
    padding-left: 16px;
}

.snes-drum-subsection {
    margin-bottom: 2px;
}

.snes-drum-sub-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.snes-drum-sub-header:hover {
    background: var(--bg-hover);
}

.snes-drum-sub-arrow {
    font-size: 10px;
    color: var(--text-dim);
    width: 10px;
    flex-shrink: 0;
}

.snes-drum-sub-title {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
    flex: 1;
}

.snes-drum-sub-count {
    font-size: 0.65rem;
    color: var(--text-dim);
    background: var(--bg-deep);
    padding: 1px 6px;
    border-radius: 8px;
    flex-shrink: 0;
}

/* ==========================================================================
   Samples tab: browser + non-destructive sample editor
   ========================================================================== */

/* Two columns: the pool on the left, the editor on the right. The editor gets
   the larger share because the effect rack is the dense part. */
.samples-view {
    display: grid;
    grid-template-columns: minmax(300px, 0.85fr) minmax(460px, 1.35fr);
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    padding-bottom: 4px;
}

.samples-view > * {
    min-height: 0;
}

.samples-view .sample-browser,
.samples-view .sample-editor {
    position: relative;
    margin-bottom: 0;
    padding: 0 14px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(177, 76, 255, 0.05) 0%, transparent 180px),
        var(--bg-surface-trans);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.sample-editor .panel-subtitle {
    display: block;
    font-size: 10px;
    color: var(--text-dim);
    margin-top: -2px;
    letter-spacing: 0.02em;
}

.editor-empty {
    padding: 28px 12px;
    text-align: center;
    color: var(--text-dim);
}

.editor-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* --- Samples-panel header and controls --- */

.samples-view .panel-header {
    position: sticky;
    top: 0;
    z-index: 4;
    gap: 10px;
    margin: 0 -14px 12px;
    padding: 11px 14px 9px;
    background: linear-gradient(180deg, rgba(10, 13, 26, 0.97) 0%, rgba(13, 16, 32, 0.9) 100%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.samples-view .panel-header::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--gradient-neon);
    opacity: 0.55;
}

.samples-view .panel-header h2 {
    font-family: var(--font-pixel);
    font-size: 0.66rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-primary);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 22px rgba(0, 229, 255, 0.2);
}

.samples-view input[type="text"],
.samples-view input[type="number"],
.samples-view select,
.samples-view textarea {
    background-color: var(--bg-deep);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-size: 12px;
    padding: 4px 7px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.samples-view select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath fill='%2300e5ff' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 8px 5px;
    padding-right: 20px;
    appearance: none;
}

.samples-view input[type="text"]:hover,
.samples-view input[type="number"]:hover,
.samples-view select:hover,
.samples-view textarea:hover {
    border-color: var(--accent-secondary);
}

.samples-view input[type="text"]:focus,
.samples-view input[type="number"]:focus,
.samples-view select:focus,
.samples-view textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    background-color: var(--bg-mid);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.12), 0 0 10px rgba(0, 229, 255, 0.2);
}

.samples-view input[type="range"] {
    width: 100%;
    accent-color: var(--accent-primary);
}

/* --- Toolbar --- */

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.editor-select {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 220px;
    min-width: 0;
}

.editor-select > span {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.editor-select select {
    flex: 1 1 auto;
    min-width: 0;
}

.editor-vitals {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-dim);
    white-space: nowrap;
}

/* --- Effect rack --- */

.rack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.rack-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.rack-header h3,
.tool-group h3 {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent, #b14cff);
}

.rack-actions {
    display: flex;
    gap: 6px;
}

.rack-empty {
    margin: 4px 0;
    font-size: 11px;
}

/* Add-effect menu, grouped by purpose. */
.add-effect-menu {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: rgba(177, 76, 255, 0.07);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.add-effect-group-name {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-bottom: 4px;
}

.add-effect-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.rack-presets {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
}

.rack-presets-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    margin-right: 2px;
}

/* --- Individual stages --- */

.rack-stages {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stage {
    border: 1px solid var(--border);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

/* Bypassed stages stay visible but recede, so A/B comparison is obvious. */
.stage-off {
    opacity: 0.45;
}

.stage-head {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 6px;
}

.stage-num {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--text-dim);
    min-width: 12px;
    text-align: right;
}

.stage-power {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
    padding: 0 2px;
    color: var(--text-dim);
}

.stage-power.on {
    color: #4ade80;
}

.stage-name {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
    text-align: left;
    padding: 0;
    flex: 0 0 auto;
}

.stage-name:hover {
    color: var(--accent, #b14cff);
}

.stage-summary {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 6px 8px 8px;
    border-top: 1px solid var(--border);
    background: rgba(0, 0, 0, 0.2);
}

/* --- Parameter rows --- */

.param-row {
    display: grid;
    grid-template-columns: 116px 1fr 52px;
    align-items: center;
    gap: 6px;
    font-size: 10px;
}

.param-label {
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.param-row input[type="range"] {
    width: 100%;
    min-width: 0;
}

.param-row select {
    grid-column: 2 / span 2;
    min-width: 0;
}

.param-value {
    font-family: var(--font-mono, monospace);
    font-size: 9px;
    color: var(--text);
    text-align: right;
}

/* Speech workbench has a multiline text input; keep it readable without
   letting a long sentence force the whole Samples tab wider. */
.speech-text-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 10px;
    color: var(--text-dim);
}

.speech-text-label textarea {
    width: 100%;
    min-height: 44px;
    resize: vertical;
    box-sizing: border-box;
    font-family: var(--font-mono, monospace);
    color: var(--text);
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 6px;
}

.instrument-details.voice-bank {
    border-color: rgba(0, 229, 255, 0.3);
}

/* Voice instruments use the same instrument rack bay language as ADSR and kit
   settings. A cyan rail matches the NEON GRID theme, with a subtle purple
   secondary accent so the mode is distinct without looking foreign. */
.voice-settings {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 2px solid var(--accent-primary);
    border-radius: var(--radius-sm);
}

.voice-settings-title {
    margin-bottom: 8px;
    color: var(--accent-primary);
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.voice-settings .hint {
    margin: 0 0 8px;
    color: var(--text-dim);
    font-size: 10px;
    line-height: 1.45;
}

.voice-text-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.voice-text-field textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    resize: vertical;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 14px;
    letter-spacing: 0.03em;
    padding: 5px 7px;
}

.voice-text-field textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.voice-settings input[type="range"] {
    width: 100%;
    accent-color: var(--accent-primary);
}

.voice-settings .step-control {
    margin-bottom: 6px;
}

.voice-preview-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

/* ============================================================
   Synth Panel — VST-style rotary knob interface
   ============================================================ */

.synth-panel {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #0a0d1a 0%, #0d1020 100%);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 16px rgba(0,0,0,0.4);
}

.synth-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.synth-panel-title {
    color: var(--accent-primary);
    font-family: var(--font-pixel);
    font-size: 0.58rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

.synth-panel-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.synth-panel-actions .btn-sm {
    padding: 3px 10px;
    font-size: 11px;
}

.synth-preset-select {
    padding: 3px 8px;
    font-size: 11px;
    background: rgba(0, 30, 50, 0.8);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}
.synth-preset-select:hover {
    border-color: rgba(0, 212, 255, 0.6);
}
.synth-preset-select option {
    background: #0a1929;
    color: #e0e0e0;
}

/* --- Section grid layout --- */

.synth-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.synth-grid-3col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.synth-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}

.synth-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.synth-section {
    padding: 8px 10px;
    background: rgba(10, 13, 26, 0.6);
    border: 1px solid rgba(42, 31, 74, 0.5);
    border-radius: var(--radius-sm);
}

.synth-section:last-child {
    margin-bottom: 0;
}

.synth-section-title {
    font-size: 9px;
    font-weight: 700;
    color: var(--accent-secondary);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 6px;
    text-shadow: 0 0 6px rgba(177, 76, 255, 0.3);
}

.synth-knob-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: flex-start;
}

/* --- Knob --- */

.synth-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 56px;
    cursor: ns-resize;
    user-select: none;
    -webkit-user-select: none;
}

.synth-knob-svg {
    width: 44px;
    height: 44px;
    display: block;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.15));
    transition: filter 0.15s ease;
}

.synth-knob:hover .synth-knob-svg {
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
}

.synth-knob:active .synth-knob-svg {
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
}

.synth-knob-arc-bg {
    stroke: rgba(58, 48, 110, 0.5);
}

.synth-knob-arc-val {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 3px rgba(0, 229, 255, 0.6));
}

.synth-knob-body {
    fill: #141830;
    stroke: rgba(58, 48, 110, 0.6);
    stroke-width: 0.5;
}

.synth-knob-inner {
    fill: #0d1020;
    stroke: rgba(0, 229, 255, 0.15);
    stroke-width: 0.5;
}

.synth-knob-pointer {
    stroke: var(--accent-primary);
    filter: drop-shadow(0 0 2px rgba(0, 229, 255, 0.8));
}

.synth-knob-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    line-height: 1.1;
    margin-top: 1px;
}

.synth-knob-value {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--accent-primary);
    text-align: center;
    line-height: 1.1;
    text-shadow: 0 0 4px rgba(0, 229, 255, 0.3);
}

/* --- Waveform selector (compact, inline with knobs) --- */

.waveform-selector {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-right: 4px;
}

.waveform-selector-label {
    font-size: 8px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.waveform-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.waveform-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    background: var(--bg-mid);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.12s ease;
    min-width: 44px;
}

.waveform-btn:hover {
    background: var(--bg-hover);
    border-color: var(--border-light);
    color: var(--text-secondary);
}

.waveform-btn.selected {
    background: rgba(0, 229, 255, 0.08);
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.2), inset 0 0 4px rgba(0, 229, 255, 0.05);
}

.waveform-icon {
    font-size: 14px;
    line-height: 1;
}

.waveform-name {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* --- Time/pitch and morph tool groups --- */

.tool-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid var(--border);
    border-radius: 8px;
}

.tool-group .hint {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
    color: var(--text-dim);
}

/* A parameter row plus its Apply button. */
.tool-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tool-row .param-row {
    flex: 1 1 auto;
    min-width: 0;
}

.tool-group > .btn-primary {
    margin-top: 4px;
    align-self: flex-start;
}

@media (max-width: 1100px) {
    .samples-view {
        grid-template-columns: 1fr;
    }
    .param-row {
        grid-template-columns: 96px 1fr 46px;
    }
}