/* ========================================
   ZillaTrax V2 - Professional DAW Design System
   ========================================

   Design Philosophy:
   - Dark theme for professional DAW feel
   - Subtle, muted colors with accent highlights
   - Clear visual hierarchy
   - Consistent spacing and typography
   - Minimal emoji usage - use icons/symbols
*/

/* ============================================================
   CASCADE LAYER ORDER
   ============================================================
   Layer priority is set by FIRST APPEARANCE of a layer name, and this
   file loads first (index.html), so naming `reset` here makes it the
   LOWEST-priority layer. Everything else keeps the exact relative
   order it already acquires from src/styles/v6/* — deliberately NOT
   re-listed, because getting one name wrong in that list would
   silently re-rank five layers app-wide.

   Why it matters: unlayered CSS beats LAYERED css regardless of
   specificity, so the universal reset below was out-ranking every
   padding and margin declared inside @layer v6-components. Measured
   in the browser before this change: of 195 v6 classes declaring box
   spacing, 137 computed to 0. Three v6 sheets (context-menu,
   pattern-dialog, toast) had to be written unlayered to work around
   exactly this.

   The REST of this file stays unlayered and therefore still outranks
   every v6 layer — legacy authority is unchanged.

   NEVER put !important inside @layer reset: for !important the layer
   order REVERSES, so the first layer would beat everything.
   ============================================================ */
@layer reset;

:root {
    /* ========================================
       Color Palette - Dark Theme
       ======================================== */

    /* Surface Colors (Dark to Light) */
    --surface-100: #0a0a0b;   /* Deepest background */
    --surface-200: #111113;   /* Main background */
    --surface-300: #18181b;   /* Cards/panels */
    --surface-400: #1f1f23;   /* Raised elements */
    --surface-500: #27272b;   /* Hover states */
    --surface-600: #303036;   /* Active states */

    /* Text Colors */
    --text-primary: #fafafa;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-disabled: #52525b;

    /* Border Colors */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-default: rgba(255, 255, 255, 0.1);
    --border-strong: rgba(255, 255, 255, 0.15);

    /* Brand/Accent Colors */
    --accent-primary: #8b5cf6;      /* Purple - main brand */
    --accent-primary-dim: #7c3aed;
    --accent-secondary: #ec4899;    /* Pink */
    --accent-success: #22c55e;      /* Green */
    --accent-warning: #f59e0b;      /* Orange */
    --accent-danger: #ef4444;       /* Red */
    --accent-info: #06b6d4;         /* Cyan */

    /* Track Colors - Harmonious palette that works with dark theme */
    --track-melody: #a78bfa;    /* Purple - primary melody */
    --track-harmony: #f472b6;   /* Pink - harmonies */
    --track-bass: #34d399;      /* Green - bass */
    --track-drums: #fb923c;     /* Warm orange - drums (softer than yellow) */
    --track-synth: #38bdf8;     /* Sky blue - synth */

    /* Drum-specific accent (muted amber) */
    --drums-accent: #d97706;
    --drums-bg: rgba(251, 146, 60, 0.08);
    --drums-border: rgba(251, 146, 60, 0.2);

    /* Playback Colors */
    --playhead: #22c55e;
    --playhead-glow: rgba(34, 197, 94, 0.3);
    --beat-active: rgba(139, 92, 246, 0.4);

    /* ========================================
       Spacing System (8px base)
       ======================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ========================================
       Typography
       ======================================== */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Monaco', monospace;

    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.8125rem;  /* 13px */
    --text-base: 0.875rem; /* 14px */
    --text-lg: 1rem;       /* 16px */
    --text-xl: 1.125rem;   /* 18px */
    --text-2xl: 1.25rem;   /* 20px */

    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ========================================
       Effects
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(139, 92, 246, 0.15);

    --transition-fast: 100ms ease;
    --transition-base: 150ms ease;
    --transition-slow: 250ms ease;

    /* ========================================
       Layout
       ======================================== */
    --sidebar-width: 260px;
    --sidebar-collapsed: 48px;
    --header-height: 52px;
    --transport-height: 48px;
    --timeline-height: 140px;
    --track-header-width: 200px;
}

/* ========================================
   Reset & Base
   ======================================== */
/* In @layer reset (declared at the top of this file) so v6's layered
   padding and margin actually apply. Two things this does NOT change:
     - Specificity is still (0,0,0), so it loses to every other
       unlayered rule exactly as it did before.
     - Layers only sort AUTHOR declarations; author origin still beats
       the UA stylesheet, so the button/h1/ul/p margins stay zeroed.
   Do not "simplify" this by deleting the declarations instead of
   layering them — that re-exposes UA margins across 4000+ lines of
   legacy CSS written assuming they were gone. And keep all three
   together: `box-sizing: border-box` here is the ONLY box-sizing
   declaration in the entire loaded stylesheet set. */
@layer reset {
    *, *::before, *::after {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--surface-100);
    overflow-x: hidden;
}

/* ========================================
   DAW Layout - CSS Grid
   ======================================== */
.daw-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
    background: var(--surface-200);
}

.daw-layout.sidebar-collapsed {
    grid-template-columns: var(--sidebar-collapsed) 1fr;
}

/* ========================================
   Pattern Library Sidebar
   ======================================== */
.pattern-library-sidebar {
    grid-row: 1 / -1;
    background: var(--surface-300);
    border-right: 1px solid var(--border-default);
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: sticky;
    top: 0;
    overflow: hidden;
    transition: width var(--transition-slow);
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-400);
    border-bottom: 1px solid var(--border-default);
    min-height: var(--header-height);
}

.sidebar-collapse-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.sidebar-collapse-btn:hover {
    background: var(--surface-500);
    color: var(--text-primary);
}

.sidebar-title-group {
    flex: 1;
    min-width: 0;
}

.sidebar-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sidebar-subtitle {
    display: none;
    font-size: 9px;
    color: var(--text-muted);
    font-weight: var(--font-normal);
    margin-top: 1px;
}

/* Show subtitle only on wide sidebar */
.pattern-library-sidebar:not(.collapsed) .sidebar-subtitle {
    display: block;
}

/* Category Tabs */
.library-categories {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-400);
    border-bottom: 1px solid var(--border-subtle);
}

.category-tab {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-tab:hover {
    color: var(--text-secondary);
    background: var(--surface-500);
}

.category-tab.active {
    color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.15);
}

/* Search */
.library-search {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.library-search-input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: all var(--transition-fast);
}

.library-search-input::placeholder {
    color: var(--text-muted);
}

.library-search-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Pattern List */
.library-patterns-container {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-2);
}

.library-patterns-container::-webkit-scrollbar {
    width: 6px;
}

.library-patterns-container::-webkit-scrollbar-track {
    background: transparent;
}

.library-patterns-container::-webkit-scrollbar-thumb {
    background: var(--surface-600);
    border-radius: 3px;
}

/* Pattern Card */
.pattern-card {
    display: flex;
    /* STRETCH. This said `center`, written when the card was a flex ROW, where
       it centres children vertically and is right. v6/pattern-card.css turned
       the card into a COLUMN, and on a column `center` means something else
       entirely: it centres horizontally and STOPS THE STRETCH, so every child
       is sized to its own max-content width instead of the card's.
       A long pattern name is `white-space: nowrap`, so .pattern-info's
       max-content width reached ~250px inside a 210px content box — and a
       centred 250px child in a 210px box begins 20px to the LEFT of the card
       itself. That is why AI-sketch names rendered outside their own card,
       flush to the panel edge and clipped on the right.
       It has to be fixed HERE, unlayered: this file is not inside an @layer,
       so it beats every layered rule no matter how specific, and the same
       declaration added to v6/pattern-card.css had no effect at all. */
    align-items: stretch;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-400);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-2);
    cursor: grab;
    transition: all var(--transition-fast);
}

.pattern-card:hover {
    background: var(--surface-500);
    border-color: var(--border-default);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.pattern-card.selected,
.pattern-card.active {
    border-color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.1);
    box-shadow: 0 0 0 1px var(--accent-primary), inset 0 0 0 1px rgba(139, 92, 246, 0.2);
}

/* Section help icon. The bubble is the v6 Tooltip (data-tip) — this is just
   the round "?" badge. It used to carry a THIRD tooltip system: a CSS-only
   :hover::after reading attr(data-tooltip), with its own font, width and
   colours, so the same gesture produced two different-looking bubbles
   depending on which element you hovered (item 2.3). */
.section-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    font-size: 9px;
    font-weight: var(--font-bold);
    color: var(--text-muted);
    background: var(--surface-600);
    border-radius: 50%;
    cursor: help;
    vertical-align: middle;
    margin-left: 4px;
    position: relative;
    text-transform: none;
    letter-spacing: 0;
}

/* Drag hint tooltip — shown on first pattern creation */
.drag-hint-tooltip {
    position: absolute;
    bottom: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-primary);
    color: white;
    font-size: 10px;
    font-weight: var(--font-medium);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 10;
    animation: fade-in-up 0.3s ease;
    pointer-events: none;
}

.drag-hint-tooltip::before {
    content: '';
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid var(--accent-primary);
}

@keyframes fade-in-up {
    from { opacity: 0; transform: translateX(-50%) translateY(4px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Clip tooltip — shown on hover over timeline clips */
.clip-tooltip {
    position: absolute;
    display: none;
    background: var(--surface-300);
    color: var(--text-primary);
    font-size: 11px;
    padding: 6px 10px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    z-index: 60;
    pointer-events: none;
    white-space: nowrap;
    max-width: 280px;
    line-height: 1.4;
}

.clip-tooltip span {
    color: var(--text-muted);
    font-size: 10px;
}

.clip-tooltip--linked {
    border-color: rgba(16, 185, 129, 0.3);
}

.clip-tooltip--independent {
    border-color: var(--border-default);
}



.pattern-card:active {
    cursor: grabbing;
    transform: scale(0.98);
}

.pattern-color-bar {
    width: 4px;
    height: 32px;
    border-radius: 2px;
    flex-shrink: 0;
}

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

.pattern-name {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    /* `display: block` is load-bearing, not tidiness. This is a <span>, and on
       an INLINE box `overflow: hidden` and `text-overflow: ellipsis` are simply
       ignored — so the three properties below had no effect at all and a long
       AI-sketch name ran the full width of its text instead of truncating.
       max-width pins it to the card even where an ancestor forgets to. */
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pattern-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    gap: var(--space-2);
    margin-top: 2px;
}

.pattern-clips {
    color: var(--accent-primary);
    font-weight: var(--font-medium);
}

.pattern-actions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.pattern-card:hover .pattern-actions {
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer {
    display: flex;
    /* Three buttons (Import / Export / Clean up) do not fit a 260px rail on one
       row. Wrapping beats clipping the one that was added last. */
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-400);
    border-top: 1px solid var(--border-default);
}

/* ========================================
   Main Content Area
   ======================================== */
.main-content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--surface-200);
}

/* Remove old container styling */
.container {
    max-width: none;
    margin: 0;
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

/* ========================================
   Header - Compact Brand Bar
   ======================================== */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 var(--space-4);
    background: var(--surface-300);
    border-bottom: 1px solid var(--border-default);
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.logo-icon {
    width: 32px;
    height: 32px;
    filter: none;
}

.brand-text h1 {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
}

.tagline {
    display: none; /* Hide on main view */
}

/* ========================================
   Song Identity Bar (Header Center)
   ======================================== */
.song-identity-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.song-name-wrapper {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}

.song-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    cursor: pointer;
    padding: 3px 8px;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid transparent;
}

.song-name:hover {
    background: var(--surface-400);
    border-color: var(--border-default);
}

.song-name-edit-icon {
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0;
    transition: opacity var(--transition-fast);
    pointer-events: none;
}

.song-name-wrapper:hover .song-name-edit-icon {
    opacity: 0.7;
}

.song-name-input {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    padding: 3px 8px;
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-sm);
    background: var(--surface-300);
    color: var(--text-primary);
    width: 250px;
    outline: none;
    text-align: center;
}

.song-name-input:focus {
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.song-status-line {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1;
}

.save-status {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--font-medium);
}

.save-status::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.save-status--saved::before {
    background: var(--accent-tertiary, #10b981);
}

.save-status--unsaved::before {
    background: #f59e0b;
}

.save-status--saving::before {
    background: var(--accent-primary);
    animation: pulse-dot 1s ease infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.song-meta {
    color: var(--text-secondary);
}

.song-meta-separator {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Song Action Buttons */
.song-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-right: var(--space-2);
    padding-right: var(--space-2);
    border-right: 1px solid var(--border-default);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .song-identity-bar {
        display: none;
    }

    .song-actions .btn-text {
        display: none;
    }
}

/* ========================================
   Transport Bar (Unified Controls)
   ======================================== */
.control-panel {
    background: var(--surface-300);
    border-bottom: 1px solid var(--border-default);
    padding: 0;
}

.playback-bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--transport-height);
    padding: 0 var(--space-4);
}

.playback-controls {
    display: flex;
    gap: var(--space-2);
}

.playback-settings {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    flex: 1;
}

.setting-compact {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.setting-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-weight: var(--font-medium);
}

.setting-value {
    font-size: var(--text-xs);
    color: var(--text-primary);
    font-weight: var(--font-semibold);
    font-family: var(--font-mono);
    min-width: 36px;
    text-align: right;
}

/* Sliders */
.slider-inline {
    width: 80px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-600);
    border-radius: 2px;
    cursor: pointer;
}

.slider-inline::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slider-inline::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.slider-inline::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.scale-select-compact {
    padding: var(--space-1) var(--space-2);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    outline: none;
}

.genre-select-compact {
    padding: var(--space-1) var(--space-2);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    outline: none;
}

.genre-select-compact:focus,
.scale-select-compact:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

.utility-controls {
    display: flex;
    gap: var(--space-2);
    margin-left: auto;
}

/* Hide legacy pattern management */
.pattern-management-bar {
    display: none;
}

/* Edit Context Banner — prominently shows what's being edited */
.edit-context-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-4);
    min-height: 40px;
    background: var(--surface-400);
    border-left: 4px solid var(--accent-primary);
    border-bottom: 1px solid var(--border-subtle);
    transition: border-color 0.3s ease, background 0.3s ease;
}

.edit-context-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.edit-context-icon {
    font-size: 16px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.edit-context-name {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-context-badge {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

.edit-context-badge--library {
    background: rgba(139, 92, 246, 0.15);
    color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.edit-context-badge--independent {
    background: rgba(161, 161, 170, 0.15);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
}

.edit-context-badge--linked {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.edit-context-link-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    flex-shrink: 0;
}

.edit-context-link-toggle:hover {
    background: var(--surface-600);
    border-color: var(--border-hover);
}

.edit-context-link-toggle .link-icon {
    font-size: 14px;
}

.edit-context-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.edit-context-scope {
    font-size: var(--text-xs);
    color: var(--text-muted);
    font-style: italic;
    white-space: nowrap;
}

.edit-context-playback {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    white-space: nowrap;
}

.playback-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted);
    flex-shrink: 0;
}

.playback-dot--playing {
    background: var(--accent-success);
    animation: pulse-dot 1.5s ease-in-out infinite;
}

.playback-dot--stopped {
    background: var(--text-muted);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ========================================
   Buttons - Unified System
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    box-shadow: none;
}

.btn:hover {
    background: var(--surface-600);
    border-color: var(--border-strong);
    transform: none;
    box-shadow: none;
}

.btn:active {
    background: var(--surface-500);
}

.btn .icon {
    font-size: 1em;
    line-height: 1;
}

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

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

.btn-secondary {
    background: var(--surface-500);
    border-color: var(--border-default);
}

.btn-accent {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border: none;
    color: white;
}

.btn-accent:hover {
    opacity: 0.9;
}

.btn-danger {
    background: transparent;
    border-color: var(--accent-danger);
    color: var(--accent-danger);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
}

.btn-ghost {
    background: transparent;
    border: none;
    color: var(--text-muted);
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--surface-500);
}

.btn-lg {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-base);
}

.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
}

.btn-icon-sm {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-500);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-icon-sm:hover {
    background: var(--surface-600);
    color: var(--text-primary);
}

.btn-icon-sm.active {
    background: rgba(139, 92, 246, 0.2);
    color: var(--accent-primary);
    border-color: var(--accent-primary);
}

/* ========================================
   Tracks Container
   ======================================== */
.tracks-container {
    flex: 1;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-y: auto;
    border-top: 2px solid transparent;
    transition: border-color 0.3s ease, background 0.3s ease;
}

/* ========================================
   Track Component
   ======================================== */
.track {
    background: var(--surface-300);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.track-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-400);
    border-bottom: 1px solid var(--border-subtle);
    gap: var(--space-3);
}

.track-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
}

.track-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 120px;
}

.track-title h3 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.track-color {
    width: 4px;
    height: 20px;
    border-radius: 2px;
}

.btn-collapse {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 11px;
    transition: all var(--transition-fast);
}

.btn-collapse:hover {
    color: var(--text-primary);
    background: var(--surface-500);
}

.pattern-indicator {
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    font-family: var(--font-mono);
    color: var(--text-muted);
    background: var(--surface-500);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    min-width: 24px;
    text-align: center;
}

/* Instrument Select */
.instrument-select {
    padding: var(--space-1) var(--space-2);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-size: var(--text-xs);
    cursor: pointer;
    outline: none;
    max-width: 140px;
}

.instrument-select:focus {
    border-color: var(--accent-primary);
}

/* Octave Control */
.octave-control {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--surface-500);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
}

.btn-octave {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: var(--font-bold);
    transition: all var(--transition-fast);
}

.btn-octave:hover {
    background: var(--surface-600);
    color: var(--text-primary);
    transform: scale(1.05);
}

.btn-octave:active {
    transform: scale(0.95);
}

/* Unified button hover/active states */
.btn-collapse:hover,
.btn-icon:hover,
.btn-edit:hover,
.btn-ai-generate:hover {
    transform: scale(1.05);
}

.btn-collapse:active,
.btn-icon:active,
.btn-edit:active,
.btn-ai-generate:active {
    transform: scale(0.95);
}

.octave-display {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding: 0 var(--space-1);
}

.octave-value {
    color: var(--text-primary);
    font-weight: var(--font-semibold);
}

/* Track Control Buttons */
.btn-edit,
.btn-ai-generate {
    padding: var(--space-1) var(--space-2);
    font-size: var(--text-xs);
    background: var(--surface-500);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all var(--transition-fast);
}

.btn-edit:hover {
    background: var(--surface-600);
    color: var(--text-primary);
}

.btn-ai-generate {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    border-color: rgba(139, 92, 246, 0.3);
}

.btn-ai-generate:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
}

/* Track Controls (right side) */
.track-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.volume-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-600);
    border-radius: 2px;
    cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.volume-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.btn-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.btn-icon:hover {
    background: var(--surface-500);
    color: var(--text-primary);
}

.mute-btn.muted {
    color: var(--accent-danger);
}

.clear-track-btn:hover {
    color: var(--accent-danger);
}

/* ========================================
   Sequencer Grid
   ======================================== */
.sequencer-wrapper {
    display: flex;
    padding: var(--space-2);
    gap: var(--space-2);
    overflow: hidden;  /* CRITICAL: Prevents selection/highlight overflow */
    position: relative;
}

.note-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 36px;
}

.note-label {
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-1);
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-muted);
}

.note-label.scale-note {
    color: var(--accent-primary);
    font-weight: var(--font-semibold);
}

.sequencer-grid {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 2px;
    flex: 1;
    background: var(--surface-200);
    padding: 2px;
    border-radius: var(--radius-sm);
}

.cell {
    background: var(--surface-400);
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    min-height: 20px;
    transition: all var(--transition-fast);
    position: relative;
}

.cell:hover {
    background: var(--surface-500);
    border-color: var(--border-default);
}

.cell.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4);
}

.cell.playing {
    box-shadow: inset 0 0 0 2px var(--playhead);
}

/* Beat dividers (every 4 beats) */
.cell[data-col="0"],
.cell[data-col="4"],
.cell[data-col="8"],
.cell[data-col="12"] {
    border-left: 2px solid var(--border-strong);
}

/* ========================================
   DRUM GRID - Unified Visual System
   ========================================
   Design principles:
   1. Empty cells: Dark, uniform, minimal borders
   2. Beat grouping: Subtle shade difference only
   3. Active notes: Solid amber fill, clear glow
   4. Hover: Subtle feedback without noise
   5. Playing: Green accent column
   ======================================== */

/* Base drum cell - clean, dark, uniform */
.drum-grid .cell {
    background: var(--surface-400);
    border: 1px solid var(--surface-500);
    transition: all 0.1s ease;
}

/* Beat grouping - subtle darker shade for beats 4-7, 12-15 */
.drum-grid .cell[data-col="4"],
.drum-grid .cell[data-col="5"],
.drum-grid .cell[data-col="6"],
.drum-grid .cell[data-col="7"],
.drum-grid .cell[data-col="12"],
.drum-grid .cell[data-col="13"],
.drum-grid .cell[data-col="14"],
.drum-grid .cell[data-col="15"] {
    background: var(--surface-300);
}

/* Hover on empty cell - subtle amber hint */
.drum-grid .cell:not(.active):hover {
    background: rgba(251, 146, 60, 0.12);
    border-color: rgba(251, 146, 60, 0.25);
}

/* Active drum note - solid amber fill */
.drum-grid .cell.active {
    background: linear-gradient(135deg,
        #fb923c 0%,
        #ea580c 50%,
        #c2410c 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.7) !important;
    box-shadow:
        0 0 8px rgba(251, 146, 60, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    opacity: 1 !important;
    transition: all 0.15s ease !important;
}

/* Hover on active note - brighten + scale */
.drum-grid .cell.active:hover {
    background: linear-gradient(135deg,
        #fdba74 0%,
        #fb923c 50%,
        #ea580c 100%) !important;
    border-color: #fbbf24 !important;
    box-shadow:
        0 0 14px rgba(251, 146, 60, 0.7),
        0 0 4px rgba(251, 191, 36, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
    transform: scale(1.12) !important;
    z-index: 10;
}

/* Playing column in drum grid - green accent */
.drum-grid .cell.playing:not(.active) {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

.drum-grid .cell.playing.active {
    box-shadow:
        0 0 12px rgba(251, 146, 60, 0.6),
        inset 0 0 0 2px rgba(34, 197, 94, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* Drum track header - subtle accent, not overwhelming */
.track-drums {
    border-left: 3px solid var(--track-drums);
}

.track-drums .track-header {
    background: linear-gradient(90deg, var(--drums-bg), var(--surface-400));
}

.track-drums .track-title h3 {
    color: var(--text-primary);  /* Keep text readable, not orange */
}

/* Drum labels - cleaner look without emoji overload */
.drum-labels .note-label {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--drums-bg);
    border: 1px solid var(--drums-border);
    border-radius: var(--radius-sm);
    font-weight: var(--font-semibold);
}

.drum-labels .note-label:hover {
    background: rgba(251, 146, 60, 0.15);
    color: var(--text-primary);
}

/* Track-specific active colors - base styles (see end of file for !important overrides) */
/* These are kept for backwards compatibility but overridden by nuclear styles below */

/* Synth track accent styling */
.track-synth {
    border-left: 3px solid var(--track-synth);
}

.track-synth .track-header {
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.08), var(--surface-400));
}

/* ========================================
   Condensed Track Mode (for 8-12 tracks)
   ======================================== */
.tracks-container.condensed .track {
    border-radius: var(--radius-md);
}

.tracks-container.condensed .track-header {
    padding: var(--space-1) var(--space-2);
    min-height: 36px;
}

.tracks-container.condensed .track-title h3 {
    font-size: 12px;
}

.tracks-container.condensed .sequencer-wrapper {
    padding: var(--space-1);
}

.tracks-container.condensed .sequencer-grid {
    gap: 1px;
}

.tracks-container.condensed .cell {
    min-height: 16px;
    border-radius: 2px;
}

.tracks-container.condensed .note-labels {
    min-width: 28px;
    gap: 1px;
}

.tracks-container.condensed .note-label {
    height: 16px;
    font-size: 9px;
}

/* Ultra-condensed mode for 10+ tracks */
.tracks-container.ultra-condensed .track-header {
    padding: 4px var(--space-2);
    min-height: 28px;
}

.tracks-container.ultra-condensed .track-title h3 {
    font-size: 11px;
}

.tracks-container.ultra-condensed .cell {
    min-height: 12px;
}

.tracks-container.ultra-condensed .note-label {
    height: 12px;
    font-size: 8px;
    min-width: 24px;
}

/* Collapsible track mode */
.track.collapsed .sequencer-wrapper {
    display: none;
}

.track.collapsed .track-header {
    border-bottom: none;
}

.track.collapsed .btn-collapse .icon {
    transform: rotate(-90deg);
}

/* ========================================
   Song Timeline (Canvas-based)
   ========================================
   Fixed at bottom of viewport for always-visible arrangement
*/
.song-timeline-container {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    background: var(--surface-300);
    border-top: 2px solid var(--border-default);
    height: var(--timeline-height);
    z-index: 50;
    transition: height 200ms ease, transform 200ms ease;
}

/* Timeline when sidebar is collapsed */
.daw-layout.sidebar-collapsed .song-timeline-container {
    left: var(--sidebar-collapsed);
}

/* Collapsed state */
.song-timeline-container.collapsed {
    height: 36px;
}

/* Hide content when collapsed */
.song-timeline-container.collapsed .timeline-canvas-wrapper,
.song-timeline-container.collapsed .timeline-track-headers {
    display: none;
}

/* Adjust main content to make room for fixed timeline */
.main-content {
    padding-bottom: var(--timeline-height);
}

.main-content:has(+ .song-timeline-container.collapsed) {
    padding-bottom: 36px;
}

/* Collapse toggle button */
.timeline-collapse-btn {
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 8px;
    font-size: var(--text-xs);
    transition: all 150ms ease;
    margin-right: var(--space-2);
}

.timeline-collapse-btn:hover {
    background: var(--surface-600);
    color: var(--text-primary);
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-400);
    border-bottom: 1px solid var(--border-subtle);
}

.timeline-controls {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.zoom-level {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
    min-width: 40px;
    text-align: center;
}

.timeline-separator {
    width: 1px;
    height: 16px;
    background: var(--border-default);
    margin: 0 var(--space-2);
}

.timeline-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.timeline-position,
.timeline-duration {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.timeline-canvas-wrapper {
    position: relative;
    height: 80px;
    overflow: hidden;
}

.song-timeline-canvas {
    width: 100%;
    height: 100%;
}

/* Arranger horizontal scrollbar (item 2.5).

   The arranger is a canvas, so there is nothing for the browser to scroll: an
   8px native scroll strip is overlaid along the bottom edge instead, and
   SongTimeline mirrors zoom/scroll/song length onto it. It is the only thing
   on screen that says how much song lies off the right edge — the old arranger
   had no scrollbar, no fit and no clamp, so a 60-bar song simply ran off into
   the dark.

   Overlaid rather than stacked below the canvas: the wrapper is a fixed height
   in Pattern view and a flex child in Song view, and an extra 8px row would
   have to be subtracted from both. Hidden outright whenever the whole song
   fits, which is what "Fit" (F) always produces. */
.timeline-hscroll {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--v6-border-strong, rgba(255, 255, 255, 0.14)) transparent;
}

.timeline-hscroll.is-hidden {
    display: none;
}

.timeline-hscroll__spacer {
    height: 1px;
}

.timeline-hscroll::-webkit-scrollbar {
    height: 8px;
}

.timeline-hscroll::-webkit-scrollbar-track {
    background: transparent;
}

.timeline-hscroll::-webkit-scrollbar-thumb {
    background: var(--v6-border-strong, rgba(255, 255, 255, 0.14));
    border-radius: 4px;
}

.timeline-hscroll::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted, #71717a);
}

/* .timeline-drop-zone / .active / .drop-hint deleted (v13.2): dead rules.
   Nothing ever added `.active` — SongTimeline toggles `.drag-over`, whose only
   rule lived in the style.css that index.html no longer loads. The empty
   arranger now says something useful via src/ui/EmptyArrangerHero.js. */

/* ========================================
   Instrument Panel (Right Slide-out)
   ======================================== */
.instrument-panel {
    position: fixed;
    right: 0;
    top: 0;
    width: 320px;
    height: 100vh;
    background: var(--surface-300);
    border-left: 1px solid var(--border-default);
    transform: translateX(100%);
    transition: transform var(--transition-slow);
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.instrument-panel.open {
    transform: translateX(0);
}

.panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-slow);
    z-index: -1;
}

.instrument-panel.open .panel-overlay {
    opacity: 1;
    pointer-events: auto;
}

.panel-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    background: var(--surface-400);
    border-bottom: 1px solid var(--border-default);
}

.panel-header h3 {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.panel-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    font-size: 18px;
    transition: all var(--transition-fast);
}

.panel-close:hover {
    color: var(--text-primary);
    background: var(--surface-500);
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4);
}

.param-group {
    margin-bottom: var(--space-4);
}

.param-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}

.param-value {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent-primary);
}

.param-slider {
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--surface-600);
    border-radius: 2px;
    cursor: pointer;
}

.param-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.param-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.2);
}

.param-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--accent-primary);
    border-radius: 50%;
    border: none;
    cursor: pointer;
}

.panel-select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    outline: none;
}

.panel-select:focus {
    border-color: var(--accent-primary);
}

/* Envelope Canvas */
.envelope-canvas {
    width: 100%;
    height: 80px;
    background: var(--surface-500);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}

.waveform-display {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-500);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-family: var(--font-mono);
}

/* ========================================
   Modal Styles
   ======================================== */
.modal {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
}

.modal.active {
    display: flex;
}

.modal[aria-hidden="true"] {
    display: none !important;
}

.modal-content {
    background: var(--surface-300);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    max-width: 480px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--border-subtle);
}

.modal-header h2 {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.modal-header p {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.modal-body {
    padding: var(--space-6);
}

.modal-close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-500);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 18px;
}

.modal-close:hover {
    color: var(--text-primary);
    background: var(--surface-600);
}

/* ========================================
   Welcome Modal Specific
   ======================================== */
.logo-large {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.feature-item {
    padding: var(--space-4);
    background: var(--surface-400);
    border-radius: var(--radius-md);
    text-align: center;
}

.feature-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
    display: block;
}

.feature-item h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.feature-item p {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.btn-large {
    width: 100%;
    padding: var(--space-4);
    font-size: var(--text-lg);
}

/* Welcome Modal Steps & Workflow Diagram */
.welcome-step.hidden {
    display: none;
}

.welcome-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}

.welcome-actions .btn-ghost {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.welcome-dots {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}

.welcome-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--surface-600);
    transition: background 0.2s ease;
}

.welcome-dot.active {
    background: var(--accent-primary);
}

.workflow-diagram {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.workflow-step {
    flex: 1;
    text-align: center;
    padding: var(--space-4) var(--space-2);
    background: var(--surface-400);
    border-radius: var(--radius-md);
    position: relative;
}

.workflow-step-number {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: white;
    font-size: 11px;
    font-weight: var(--font-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-step-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
}

.workflow-step h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.workflow-step p {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.workflow-zone-label {
    display: block;
    margin-top: var(--space-2);
    font-size: 10px;
    color: var(--accent-primary);
    font-weight: var(--font-medium);
}

.workflow-arrow {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: var(--text-muted);
    margin-top: var(--space-8);
    flex-shrink: 0;
}

/* ========================================
   Help Panel
   ======================================== */
.help-panel {
    position: fixed;
    right: var(--space-4);
    top: calc(var(--header-height) + var(--space-4));
    width: 320px;
    background: var(--surface-300);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
    transition: all var(--transition-base);
}

.help-panel.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.help-panel.hidden {
    display: none;
}

.help-content {
    padding: var(--space-4);
}

.help-content h3 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-3);
}

.shortcuts-grid {
    display: grid;
    gap: var(--space-2);
}

.shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.shortcut kbd {
    padding: 2px 6px;
    background: var(--surface-500);
    border: 1px solid var(--border-default);
    border-radius: 3px;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-secondary);
}

.shortcut span {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.tips-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tips-list li {
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding-left: var(--space-4);
    position: relative;
}

.tips-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-primary);
}

/* ========================================
   Footer
   ======================================== */
footer {
    padding: var(--space-4);
    background: var(--surface-300);
    border-top: 1px solid var(--border-default);
    text-align: center;
}

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

.footer-text {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.footer-version {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--text-muted);
}

/* ========================================
   Collapsed States
   ======================================== */
.track.collapsed .sequencer-wrapper {
    display: none;
}

.track.collapsed .track-header .btn-collapse .icon {
    transform: rotate(-90deg);
}

/* ========================================
   Scrollbars
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--surface-200);
}

::-webkit-scrollbar-thumb {
    background: var(--surface-500);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--surface-600);
}

/* ========================================
   Animations
   ======================================== */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.pattern-playing {
    animation: pulse 1s ease-in-out infinite;
}

/* ========================================
   Hidden Utility
   ======================================== */
.hidden {
    display: none !important;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 1200px) {
    :root {
        --sidebar-width: 220px;
    }
}

@media (max-width: 768px) {
    .daw-layout {
        grid-template-columns: 1fr;
    }

    .pattern-library-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        transform: translateX(-100%);
    }

    .pattern-library-sidebar.open {
        transform: translateX(0);
    }

    .playback-settings {
        flex-wrap: wrap;
    }

    .utility-controls {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ========================================
   CRITICAL LEGACY OVERRIDES
   These rules ensure V2 styling takes
   precedence over legacy style.css
   ======================================== */

/* Force dark body background */
body {
    background: var(--surface-100) !important;
    color: var(--text-primary) !important;
}

/* Remove legacy container styling */
.container {
    max-width: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Force header dark styling */
header {
    background: var(--surface-300) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: none !important;
    padding: 0 var(--space-4) !important;
}

/* Remove any white backgrounds from tracks */
.track {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-subtle) !important;
    box-shadow: none !important;
}

.track-header {
    background: var(--surface-400) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Force sequencer grid styling */
.sequencer-grid {
    background: var(--surface-200) !important;
}

.cell {
    background: var(--surface-400) !important;
    border: 1px solid transparent !important;
}

.cell:hover {
    background: var(--surface-500) !important;
}

.cell.active {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Force button styling */
.btn {
    font-family: var(--font-sans) !important;
    box-shadow: none !important;
}

.btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Remove legacy pattern switcher styling */
.pattern-switcher {
    background: transparent !important;
    border: none !important;
    gap: var(--space-2) !important;
}

.pattern-btn {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    font-family: var(--font-mono) !important;
}

.pattern-btn:hover {
    background: var(--surface-600) !important;
    color: var(--text-primary) !important;
}

.pattern-btn.active {
    background: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    color: white !important;
}

/* Force control panel styling */
.control-panel {
    background: var(--surface-300) !important;
    border-bottom: 1px solid var(--border-default) !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Force slider styling */
input[type="range"] {
    background: var(--surface-600) !important;
    border-radius: 2px !important;
}

input[type="range"]::-webkit-slider-thumb {
    background: var(--accent-primary) !important;
}

/* Force select styling */
select {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

select:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
}

/* Force modal styling */
.modal-content {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-default) !important;
}

/* Force input styling */
input[type="text"],
input[type="number"] {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

input[type="text"]:focus,
input[type="number"]:focus {
    border-color: var(--accent-primary) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

/* Footer dark theme */
footer {
    background: var(--surface-300) !important;
    border-top: 1px solid var(--border-default) !important;
}

/* Help panel override */
.help-panel {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-default) !important;
}

/* Instrument panel override */
.instrument-panel {
    background: var(--surface-300) !important;
    border-left: 1px solid var(--border-default) !important;
}

.panel-header {
    background: var(--surface-400) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Timeline container override */
.song-timeline-container {
    background: var(--surface-300) !important;
    border-top: 1px solid var(--border-default) !important;
}

.timeline-header {
    background: var(--surface-400) !important;
}

/* Legacy mode toggle override */
.mode-toggle,
.mode-toggle-bar {
    background: var(--surface-400) !important;
}

.mode-btn {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-secondary) !important;
}

.mode-btn:hover {
    background: var(--surface-600) !important;
}

.mode-btn.active {
    background: var(--accent-primary) !important;
    color: white !important;
}

/* Override any remaining white/light elements */
.track-controls,
.playback-controls,
.playback-settings,
.utility-controls {
    background: transparent !important;
}

/* Ensure note labels are visible */
.note-label {
    color: var(--text-muted) !important;
}

.note-label.scale-note {
    color: var(--accent-primary) !important;
}

/* Drum kit selector override */
.drum-kit-select {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Transport/playback button overrides */
.play-btn,
.stop-btn {
    background: var(--accent-success) !important;
    border: none !important;
    color: white !important;
}

.play-btn:hover,
.stop-btn:hover {
    filter: brightness(1.1) !important;
}

/* Override tempo/volume display */
.setting-value,
.tempo-display,
.volume-display {
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
}

/* Pattern management bar - hide in V5 */
.pattern-management-bar {
    display: none !important;
}

/* Arrangement bar override */
.arrangement-bar {
    background: var(--surface-400) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Edit context indicator */
.edit-context-indicator {
    background: var(--surface-400) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Export modal overrides */
.export-modal .modal-content {
    background: var(--surface-300) !important;
}

.export-format-select,
.export-quality-select {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

/* Cloud admin styles override */
.cloud-admin-panel {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-default) !important;
}

/* Scrollbar styling (reinforce) */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-500) var(--surface-200);
}

/* Remove any box-shadows from legacy */
.track,
.control-panel,
header,
.modal-content,
.help-panel,
.instrument-panel {
    box-shadow: none !important;
}

/* Ensure smooth transitions on interactive elements */
.btn,
.cell,
select,
input,
.pattern-btn,
.mode-btn,
.category-tab {
    transition: all var(--transition-fast) !important;
}

/* ========================================
   Additional Component Refinements
   ======================================== */

/* Section Dividers in Panels */
.param-group[style*="border-top"] {
    border-top-color: var(--border-default) !important;
    margin-top: var(--space-4) !important;
    padding-top: var(--space-4) !important;
}

.param-group h4 {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-semibold) !important;
    margin: 0 0 var(--space-3) 0 !important;
    letter-spacing: 0.3px;
}

/* Helper text styling */
small {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
}

/* Synth Oscillator Groups */
.synth-osc-group {
    background: var(--surface-400) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) !important;
    margin-bottom: var(--space-3) !important;
}

.synth-osc-label {
    display: block !important;
    color: var(--text-secondary) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-semibold) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: var(--space-2) !important;
}

.param-group-compact {
    margin-bottom: var(--space-2) !important;
}

.param-group-compact label {
    font-size: var(--text-xs) !important;
}

.param-slider-compact,
.panel-select-compact {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-xs) !important;
}

.panel-select-compact {
    padding: var(--space-1) var(--space-2) !important;
    border-radius: var(--radius-sm) !important;
}

/* Full Width Button */
.btn-block {
    width: 100% !important;
    justify-content: center !important;
}

/* Toggle Checkbox Styling */
.toggle-checkbox {
    width: 18px !important;
    height: 18px !important;
    accent-color: var(--accent-primary) !important;
}

.toggle-label {
    color: var(--text-primary) !important;
    cursor: pointer !important;
}

/* Envelope Canvas */
.envelope-canvas {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
}

/* Waveform Display */
.waveform-display {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-subtle) !important;
    color: var(--text-primary) !important;
}

/* AI Modal Styling */
.ai-modal .modal-content,
.ai-modal-content {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-default) !important;
    max-width: 520px !important;
}

.ai-track-info {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
    background: var(--surface-400) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: var(--space-4) !important;
}

.ai-track-scope {
    margin-left: auto;
    padding: 2px 8px;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.ai-compatibility-message {
    margin: 0 0 var(--space-4);
    padding: 10px 12px;
    border: 1px solid var(--warning);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    background: color-mix(in srgb, var(--warning) 12%, var(--surface-400));
    line-height: 1.45;
}

.ai-track-label {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
}

.ai-track-name {
    color: var(--accent-primary) !important;
    font-weight: var(--font-semibold) !important;
}

.ai-param-group {
    margin-bottom: var(--space-4) !important;
}

.ai-param-group label {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin-bottom: var(--space-2) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
}

.ai-param-hint {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
    font-weight: var(--font-normal) !important;
}

.ai-param-value {
    color: var(--accent-primary) !important;
    font-family: var(--font-mono) !important;
}

.ai-select {
    width: 100% !important;
    padding: var(--space-2) var(--space-3) !important;
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-sm) !important;
    cursor: pointer !important;
}

.ai-slider {
    width: 100% !important;
    background: var(--surface-600) !important;
}

.ai-density-labels {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: var(--space-1) !important;
    font-size: var(--text-xs) !important;
    color: var(--text-muted) !important;
}

.ai-checkbox-group {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--space-1) !important;
}

.ai-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    cursor: pointer !important;
    color: var(--text-primary) !important;
}

.ai-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: var(--accent-primary) !important;
}

.ai-quota-display {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: var(--space-3) !important;
    background: rgba(139, 92, 246, 0.1) !important;
    border-radius: var(--radius-md) !important;
    margin: var(--space-4) 0 !important;
}

.ai-quota-icon {
    font-size: 1.2em !important;
}

.ai-quota-text {
    color: var(--accent-primary) !important;
    font-size: var(--text-sm) !important;
    font-weight: var(--font-medium) !important;
}

.ai-actions {
    display: flex !important;
    gap: var(--space-3) !important;
    margin-top: var(--space-4) !important;
}

.ai-actions .btn-large {
    flex: 1 !important;
}

.ai-preview-section {
    margin-top: var(--space-4) !important;
    padding-top: var(--space-4) !important;
    border-top: 1px solid var(--border-default) !important;
}

.ai-preview-header h4 {
    color: var(--text-primary) !important;
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-1) !important;
}

.ai-preview-info {
    color: var(--text-muted) !important;
    font-size: var(--text-sm) !important;
    margin-bottom: var(--space-3) !important;
}

.ai-preview-actions {
    display: flex !important;
    gap: var(--space-2) !important;
}

.ai-loading-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    padding: var(--space-6) !important;
}

.ai-loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid var(--surface-500) !important;
    border-top-color: var(--accent-primary) !important;
    border-radius: 50% !important;
    animation: spin 1s linear infinite !important;
}

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

.ai-loading-text {
    color: var(--text-secondary) !important;
    font-size: var(--text-sm) !important;
}

/* Empty State Styling */
.library-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--space-8) !important;
    text-align: center !important;
}

.empty-icon {
    font-size: 2.5rem !important;
    margin-bottom: var(--space-3) !important;
    opacity: 0.5 !important;
}

.library-empty-state p {
    color: var(--text-muted) !important;
    margin-bottom: var(--space-4) !important;
}

/* Sidebar Expand Button */
.sidebar-expand-btn {
    position: fixed !important;
    left: var(--space-2) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--surface-400) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    z-index: 50 !important;
    transition: all var(--transition-fast) !important;
}

.sidebar-expand-btn:hover {
    background: var(--surface-500) !important;
    color: var(--text-primary) !important;
}

/* Timeline Track Headers */
.timeline-track-headers {
    display: flex !important;
    flex-direction: column !important;
    background: var(--surface-400) !important;
    border-top: 1px solid var(--border-subtle) !important;
}

/* Track Color Bars - ensure visibility */
.track-color {
    display: block !important;
    width: 4px !important;
    min-height: 20px !important;
    border-radius: 2px !important;
    flex-shrink: 0 !important;
}

/* Pattern Indicator Badges */
.pattern-indicator {
    font-size: var(--text-xs) !important;
    font-weight: var(--font-bold) !important;
    font-family: var(--font-mono) !important;
    color: var(--text-muted) !important;
    background: var(--surface-500) !important;
    padding: 2px 6px !important;
    border-radius: var(--radius-sm) !important;
}

/* Track Drums Specific */
.track-drums .drum-labels {
    min-width: 70px !important;
}

.track-drums .drum-grid .cell.active {
    background: var(--track-drums) !important;
    border-color: var(--track-drums) !important;
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4) !important;
}

/* Track Synth Specific */
.track-synth .cell.active {
    background: var(--track-synth) !important;
    border-color: var(--track-synth) !important;
    box-shadow: 0 0 8px rgba(6, 182, 212, 0.4) !important;
}

/* Footer Refinements */
.footer-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    max-width: 100% !important;
    padding: 0 var(--space-4) !important;
}

.footer-text {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
}

.footer-links {
    display: flex !important;
    gap: var(--space-4) !important;
}

.footer-version {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
    font-family: var(--font-mono) !important;
}

/* User Menu Container */
#userMenuContainer {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Export Modal Refinements */
.export-modal {
    z-index: 300 !important;
}

/* Checkbox Labels */
.export-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    cursor: pointer !important;
    color: var(--text-primary) !important;
}

/* Export Help Text */
.export-help-text {
    color: var(--text-muted) !important;
    font-size: var(--text-xs) !important;
    margin-top: var(--space-1) !important;
}

/* Playing State Pulse Animation */
@keyframes playingPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.1);
    }
}

.pattern-playing.pulse {
    animation: playingPulse 1.5s ease-in-out infinite !important;
}

/* Scale Highlight Toggle Active State */
#scaleHighlightToggle.active {
    background: rgba(139, 92, 246, 0.2) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
}

/* Improve focus states for accessibility */
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent-primary) !important;
    outline-offset: 2px !important;
}

/* Make sure disabled states are clear */
button:disabled,
input:disabled,
select:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* Better hover states for icon buttons */
.btn-icon:hover,
.btn-icon-sm:hover {
    background: var(--surface-600) !important;
    color: var(--accent-primary) !important;
}

/* Ensure play/stop buttons stand out.
   The play button's colour is its transport STATE (see #playBtn.is-playing /
   .is-paused in src/styles/v6/polish.css) — a fixed !important background here
   used to override it, so the button was green in all three states. */
#playBtn:hover {
    filter: brightness(1.1) !important;
}

#stopBtn {
    background: var(--surface-500) !important;
    border-color: var(--border-default) !important;
}

#stopBtn:hover {
    background: var(--accent-danger) !important;
    border-color: var(--accent-danger) !important;
    color: white !important;
}

/* Clear/Reset buttons should hint at danger */
#clearBtn:hover,
.clear-track-btn:hover {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--accent-danger) !important;
    border-color: var(--accent-danger) !important;
}

/* Export button primary styling */
#exportWavBtn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    border: none !important;
    color: white !important;
}

#exportWavBtn:hover {
    filter: brightness(1.1) !important;
}

/* Generate Song button gradient */
#exampleBtn {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)) !important;
    border: none !important;
    color: white !important;
}

#exampleBtn:hover {
    filter: brightness(1.1) !important;
}

/* ========================================
   DARK THEME: Scale Highlighting Fix
   ========================================

   The legacy style.css uses 6% opacity which is
   nearly invisible on dark backgrounds. These
   overrides provide proper visibility.
*/

/* In-scale cells - visible highlight on dark background */
.cell.in-scale {
    background: rgba(139, 92, 246, 0.18) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
}

.cell.in-scale:hover {
    background: rgba(139, 92, 246, 0.28) !important;
    border-color: rgba(139, 92, 246, 0.5) !important;
}

/* ========================================
   DRUM GRID: Scale-Neutral Override
   ========================================
   Drums are rhythm-based, not melodic.
   Completely ignore scale highlighting.
*/

/* Remove ALL scale effects from drum grid */
.drum-grid .cell.in-scale {
    background: var(--surface-400) !important;
    border-color: var(--surface-500) !important;
}

/* Beat grouping still applies to in-scale drum cells */
.drum-grid .cell.in-scale[data-col="4"],
.drum-grid .cell.in-scale[data-col="5"],
.drum-grid .cell.in-scale[data-col="6"],
.drum-grid .cell.in-scale[data-col="7"],
.drum-grid .cell.in-scale[data-col="12"],
.drum-grid .cell.in-scale[data-col="13"],
.drum-grid .cell.in-scale[data-col="14"],
.drum-grid .cell.in-scale[data-col="15"] {
    background: var(--surface-300) !important;
}

/* Drum cells never get dimmed */
.drum-grid .cell {
    opacity: 1 !important;
}

/* Active cell styles moved to NUCLEAR OVERRIDE section at end of file */
/* See line ~3532 for the definitive active cell styles */

/* Out-of-scale cells - subtle dimming for contrast */
/* NOTE: :not(.active) ensures active notes are never dimmed */
.cell:not(.in-scale):not(.active) {
    opacity: 0.65;
}

/* Note labels - in-scale highlighting */
.note-label.in-scale {
    font-weight: 700 !important;
    color: var(--accent-primary) !important;
    background: rgba(139, 92, 246, 0.15) !important;
    border-left: 3px solid var(--accent-primary) !important;
    padding-left: 8px !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
}

/* Non-scale labels - dimmed for contrast */
.note-label:not(.in-scale):not(.drum-label) {
    color: var(--text-muted) !important;
    opacity: 0.7;
}

/* ========================================
   DARK THEME: AI Modal Override
   ========================================

   The legacy style.css has hardcoded white
   backgrounds. These overrides ensure the
   AI modal matches the dark theme.
*/

.ai-modal .modal-content,
.ai-modal-content {
    background: var(--surface-300) !important;
    border: 1px solid var(--border-default) !important;
    box-shadow: var(--shadow-lg), 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

.ai-modal .modal-body {
    background: var(--surface-300) !important;
}

.ai-modal .modal-header {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3)) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

.ai-track-info {
    background: var(--surface-400) !important;
    border: 1px solid var(--border-subtle) !important;
}

.ai-track-label {
    color: var(--text-secondary) !important;
}

.ai-track-name {
    color: var(--accent-primary) !important;
}

.ai-param-group label > span:first-child {
    color: var(--text-primary) !important;
}

.ai-param-hint {
    color: var(--text-muted) !important;
}

.ai-select {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

.ai-select:hover {
    border-color: var(--accent-primary) !important;
}

.ai-select:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

.ai-slider {
    background: var(--surface-600) !important;
}

.ai-checkbox-group {
    background: var(--surface-400) !important;
    border: 1px solid var(--border-subtle) !important;
}

.ai-checkbox-label {
    color: var(--text-primary) !important;
}

.ai-density-labels {
    color: var(--text-muted) !important;
}

/* ========================================
   DARK THEME: Grid Visual Hierarchy
   ========================================

   Alternating beat groups and enhanced
   playhead for better visual rhythm tracking.
   NOTE: Drum grid has its own styling - excluded here.
*/

/* Alternating beat groups (every 4 beats) - darker group */
/* Exclude drum-grid which has its own beat styling */
.track:not(.track-drums) .cell[data-col="4"],
.track:not(.track-drums) .cell[data-col="5"],
.track:not(.track-drums) .cell[data-col="6"],
.track:not(.track-drums) .cell[data-col="7"],
.track:not(.track-drums) .cell[data-col="12"],
.track:not(.track-drums) .cell[data-col="13"],
.track:not(.track-drums) .cell[data-col="14"],
.track:not(.track-drums) .cell[data-col="15"] {
    background: rgba(17, 17, 19, 1) !important;
}

/* Ensure in-scale takes precedence over beat groups (melodic tracks only) */
.track:not(.track-drums) .cell.in-scale[data-col="4"],
.track:not(.track-drums) .cell.in-scale[data-col="5"],
.track:not(.track-drums) .cell.in-scale[data-col="6"],
.track:not(.track-drums) .cell.in-scale[data-col="7"],
.track:not(.track-drums) .cell.in-scale[data-col="12"],
.track:not(.track-drums) .cell.in-scale[data-col="13"],
.track:not(.track-drums) .cell.in-scale[data-col="14"],
.track:not(.track-drums) .cell.in-scale[data-col="15"] {
    background: rgba(139, 92, 246, 0.18) !important;
}

/* Active cells always show their track color */
.cell.active[data-col] {
    opacity: 1 !important;
}

/* Enhanced beat dividers with purple accent (melodic tracks only) */
.track:not(.track-drums) .cell[data-col="0"],
.track:not(.track-drums) .cell[data-col="4"],
.track:not(.track-drums) .cell[data-col="8"],
.track:not(.track-drums) .cell[data-col="12"] {
    border-left: 2px solid rgba(139, 92, 246, 0.3) !important;
}

/* Drum grid beat dividers - subtle neutral color */
.drum-grid .cell[data-col="0"],
.drum-grid .cell[data-col="4"],
.drum-grid .cell[data-col="8"],
.drum-grid .cell[data-col="12"] {
    border-left: 2px solid rgba(100, 100, 110, 0.4) !important;
}

/* Drum grid downbeat - slightly stronger */
.drum-grid .cell[data-col="0"] {
    border-left: 2px solid rgba(120, 120, 130, 0.6) !important;
}

/* Downbeat (beat 0) - strongest emphasis (melodic tracks) */
.track:not(.track-drums) .cell[data-col="0"] {
    border-left: 3px solid rgba(139, 92, 246, 0.45) !important;
}

/* Enhanced playhead visibility (melodic tracks) */
.track:not(.track-drums) .cell.playing {
    box-shadow: inset 0 0 0 2px var(--playhead), 0 0 8px var(--playhead-glow) !important;
}

/* Playing column - non-active cells get green tint (melodic tracks) */
.track:not(.track-drums) .cell.playing:not(.active) {
    background: rgba(34, 197, 94, 0.12) !important;
}

/* ========================================
   DARK THEME: Status Bar Enhancements
   ========================================
*/

/* Editing indicator - more prominent purple */
.pattern-editing {
    background: rgba(139, 92, 246, 0.25) !important;
    color: #c4b5fd !important;
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    font-weight: var(--font-semibold) !important;
}

/* Playing indicator - vibrant green */
.pattern-playing {
    background: rgba(34, 197, 94, 0.25) !important;
    color: #86efac !important;
    border: 1px solid rgba(34, 197, 94, 0.4) !important;
    font-weight: var(--font-semibold) !important;
}

/* Status mode text */
.status-mode {
    color: var(--text-muted) !important;
}

/* Pattern buttons - enhanced active state */
.pattern-btn.active {
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4) !important;
}

/* ========================================
   DARK THEME: Form Elements Polish
   ========================================
*/

/* Custom dropdown arrow for dark theme */
select:not(.panel-select):not(.instrument-select):not(.scale-select-compact):not(.ai-select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

/* Ensure all selects have proper dark styling */
select {
    background-color: var(--surface-500) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-default) !important;
}

select:hover {
    border-color: var(--accent-primary) !important;
}

/* Range slider track enhancement */
input[type="range"] {
    background: var(--surface-600) !important;
}

/* Range slider thumb hover */
input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.4) !important;
}

/* ========================================
   DARK THEME: Additional Fixes
   ========================================
*/

/* Ensure drum labels don't get the non-scale dimming */
.note-label.drum-label {
    color: var(--track-drums) !important;
    opacity: 1 !important;
}

/* Pattern indicator in track headers */
.pattern-indicator {
    background: var(--surface-600) !important;
    color: var(--text-secondary) !important;
}

/* Track collapse button */
.btn-collapse:hover {
    background: var(--surface-600) !important;
}

/* Improve sidebar pattern cards contrast */
.pattern-card {
    background: var(--surface-400) !important;
    border: 1px solid var(--border-subtle) !important;
}

.pattern-card:hover {
    border-color: var(--accent-primary) !important;
    background: var(--surface-500) !important;
}

.pattern-card.selected {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.3) !important;
}

/* ========================================
   Pattern Card Creation Animation
   ======================================== */

/* Slide-in animation for new pattern */
@keyframes patternSlideIn {
    0% {
        opacity: 0;
        transform: translateY(-16px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Glow fade animation */
@keyframes glowFade {
    0% {
        box-shadow: 0 0 20px rgba(139, 92, 246, 0.6),
                    0 0 0 2px var(--accent-primary);
    }
    100% {
        box-shadow: 0 0 0 rgba(139, 92, 246, 0),
                    0 0 0 1px var(--accent-primary);
    }
}

.pattern-card.just-created {
    animation: patternSlideIn 250ms ease-out,
               glowFade 2s ease-out 250ms forwards;
}

/* Inline name editing */
.pattern-name.editing {
    background: var(--surface-600);
    padding: 2px 6px;
    border-radius: 4px;
    outline: 2px solid var(--accent-primary);
    outline-offset: 1px;
    min-width: 60px;
    display: inline-block;
}

.pattern-name[contenteditable="true"]:focus {
    outline: 2px solid var(--accent-primary);
}

/* ========================================
   New Pattern Button Enhancement
   ======================================== */

#sidebarNewPatternBtn {
    transition: transform 150ms ease, box-shadow 150ms ease;
}

#sidebarNewPatternBtn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 12px rgba(139, 92, 246, 0.4);
}

#sidebarNewPatternBtn:active {
    transform: scale(0.92);
}

/* ========================================
   Toast Notification
   ======================================== */

.pattern-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--surface-600);
    color: var(--text-primary);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: transform 250ms ease, opacity 250ms ease;
    z-index: 10000;
    pointer-events: none;
    border-left: 3px solid var(--accent-primary);
}

.pattern-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Category tabs in sidebar */
.category-tab {
    background: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid transparent !important;
}

.category-tab:hover {
    color: var(--text-primary) !important;
    background: var(--surface-500) !important;
}

.category-tab.active {
    color: var(--accent-primary) !important;
    background: rgba(139, 92, 246, 0.15) !important;
    border-color: var(--accent-primary) !important;
}

/* Search input in sidebar */
.library-search-input {
    background: var(--surface-500) !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-primary) !important;
}

.library-search-input::placeholder {
    color: var(--text-muted) !important;
}

.library-search-input:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2) !important;
}

/* ========================================
   DARK THEME: Control Panel & Container Fixes
   ========================================

   These overrides fix legacy style.css rules
   that use light backgrounds incompatible
   with the dark theme.
*/

/* Fix: Playback bar light gradient (style.css line 278) */
.playback-bar {
    background: var(--surface-300) !important;
    border-bottom: 1px solid var(--border-default) !important;
}

/* Fix: Control panel white background (style.css line 264) */
.control-panel {
    background: var(--surface-300) !important;
}

/* Fix: Search container white background (style.css line 4816) */
.library-search {
    background: var(--surface-300) !important;
    border-bottom: 1px solid var(--border-subtle) !important;
}

/* Fix: Edit context banner background (replaces old mode-status-bar) */
.edit-context-banner {
    background: var(--surface-400) !important;
}

/* Fix: Slider track light gradient (style.css line 319) */
.slider-inline {
    background: var(--surface-600) !important;
}

/* Fix: Pattern management bar (if visible) */
.pattern-management-bar {
    background: var(--surface-300) !important;
}

/* ========================================
   EMPTY TRACKS STATE
   ========================================
   Displayed when pattern has zero tracks
   Guides user to add their first track
*/

.empty-tracks-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--surface-300);
    border: 2px dashed var(--border-default);
    border-radius: var(--radius-lg);
    margin: var(--space-4);
}

.empty-tracks-state.hidden {
    display: none;
}

.empty-state-content {
    text-align: center;
    padding: var(--space-6);
}

.empty-state-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: var(--space-3);
    opacity: 0.6;
}

.empty-state-content h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-2);
}

.empty-state-content p {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ========================================
   CLIP CONTEXT MENU
   ========================================
   Beautiful, accessible context menu for
   clip actions in the song timeline
*/

.clip-context-menu {
    position: fixed;
    z-index: 1000;
    min-width: 180px;
    background: var(--surface-300);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    padding: var(--space-1);
    animation: contextMenuFadeIn 0.15s ease;
    backdrop-filter: blur(8px);
}

@keyframes contextMenuFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-4px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.clip-context-menu-header {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-1);
}

.clip-context-menu-header h4 {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.clip-context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all 0.1s ease;
}

.clip-context-menu-item:hover {
    background: var(--surface-500);
    color: var(--text-primary);
}

.clip-context-menu-item:active {
    background: var(--surface-600);
    transform: scale(0.98);
}

.clip-context-menu-item .icon {
    font-size: 1rem;
    width: 20px;
    text-align: center;
    opacity: 0.8;
}

.clip-context-menu-item.danger {
    color: var(--accent-danger);
}

.clip-context-menu-item.danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--accent-danger);
}

.clip-context-menu-separator {
    height: 1px;
    background: var(--border-subtle);
    margin: var(--space-1) 0;
}

/* Overlay to catch clicks outside menu */
.clip-context-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
}

/* ========================================
   RENAME MODAL (for Save to Library)
   ========================================
*/

.rename-modal {
    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: 1001;
    animation: modalFadeIn 0.2s ease;
}

@keyframes modalFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.rename-modal-content {
    background: var(--surface-300);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    min-width: 320px;
    max-width: 90vw;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    animation: modalSlideIn 0.2s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.rename-modal-header {
    margin-bottom: var(--space-4);
}

.rename-modal-header h3 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.rename-modal-body {
    margin-bottom: var(--space-4);
}

.rename-modal-input {
    width: 100%;
    padding: var(--space-3);
    background: var(--surface-500);
    border: 2px solid var(--border-default);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--text-base);
    transition: border-color 0.15s ease;
}

.rename-modal-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2);
}

.rename-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

.rename-modal-btn {
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all 0.15s ease;
}

.rename-modal-btn-cancel {
    background: var(--surface-500);
    color: var(--text-primary);
}

.rename-modal-btn-cancel:hover {
    background: var(--surface-600);
}

.rename-modal-btn-confirm {
    background: var(--accent-primary);
    color: white;
}

.rename-modal-btn-confirm:hover {
    filter: brightness(1.1);
}

/* Confirmation modal for delete */
.confirm-modal-text {
    color: var(--text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

.rename-modal-btn-danger {
    background: var(--accent-danger);
    color: white;
}

.rename-modal-btn-danger:hover {
    filter: brightness(1.1);
}

/* ========================================
   NUCLEAR OVERRIDE: Active Cell Styles
   ========================================
   These styles MUST come LAST in the file
   to win all CSS specificity battles.

   Problem solved: Active notes were showing
   as outlines because in-scale and beat-group
   backgrounds were overriding with !important.

   Solution: Ultra-specific selectors that
   cover ALL possible state combinations.
   ======================================== */

/* Base: ALL active cells must be opaque */
.cell.active {
    opacity: 1 !important;
}

/* Track 0 - Melody (Purple) - ALL combinations */
.track[data-track="0"] .cell.active,
.track[data-track="0"] .cell.active.in-scale,
.track[data-track="0"] .cell.active[data-col],
.track[data-track="0"] .cell.active.in-scale[data-col] {
    background: #a78bfa !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.5) !important;
}

.track[data-track="0"] .cell.active:hover,
.track[data-track="0"] .cell.active.in-scale:hover {
    background: #c4b5fd !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 16px rgba(167, 139, 250, 0.7) !important;
    z-index: 10;
}

/* Track 1 - Harmony (Pink) - ALL combinations */
.track[data-track="1"] .cell.active,
.track[data-track="1"] .cell.active.in-scale,
.track[data-track="1"] .cell.active[data-col],
.track[data-track="1"] .cell.active.in-scale[data-col] {
    background: #f472b6 !important;
    border-color: #f472b6 !important;
    box-shadow: 0 0 10px rgba(244, 114, 182, 0.5) !important;
}

.track[data-track="1"] .cell.active:hover,
.track[data-track="1"] .cell.active.in-scale:hover {
    background: #f9a8d4 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 16px rgba(244, 114, 182, 0.7) !important;
    z-index: 10;
}

/* Track 2 - Bass (Green/Teal) - ALL combinations */
.track[data-track="2"] .cell.active,
.track[data-track="2"] .cell.active.in-scale,
.track[data-track="2"] .cell.active[data-col],
.track[data-track="2"] .cell.active.in-scale[data-col] {
    background: #34d399 !important;
    border-color: #34d399 !important;
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.5) !important;
}

.track[data-track="2"] .cell.active:hover,
.track[data-track="2"] .cell.active.in-scale:hover {
    background: #6ee7b7 !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 16px rgba(52, 211, 153, 0.7) !important;
    z-index: 10;
}

/* Track 3 - Drums (Amber) - already handled in drum-grid section */

/* Track 4 - Synth (Cyan) - ALL combinations */
.track[data-track="4"] .cell.active,
.track[data-track="4"] .cell.active.in-scale,
.track[data-track="4"] .cell.active[data-col],
.track[data-track="4"] .cell.active.in-scale[data-col] {
    background: #38bdf8 !important;
    border-color: #38bdf8 !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5) !important;
}

.track[data-track="4"] .cell.active:hover,
.track[data-track="4"] .cell.active.in-scale:hover {
    background: #7dd3fc !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.7) !important;
    z-index: 10;
}

/* Generic fallback for tracks 5+ */
.track[data-track="5"] .cell.active,
.track[data-track="6"] .cell.active,
.track[data-track="7"] .cell.active,
.track[data-track="8"] .cell.active,
.track[data-track="9"] .cell.active,
.track[data-track="10"] .cell.active,
.track[data-track="11"] .cell.active {
    background: #a78bfa !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 10px rgba(167, 139, 250, 0.5) !important;
}

/* Drum grid nuclear override - ensure solid fills */
.drum-grid .cell.active,
.drum-grid .cell.active.in-scale,
.drum-grid .cell.active[data-col],
.track-drums .cell.active {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 50%, #c2410c 100%) !important;
    border: 1px solid rgba(251, 191, 36, 0.7) !important;
    box-shadow: 0 0 8px rgba(251, 146, 60, 0.5), inset 0 1px 0 rgba(255,255,255,0.2) !important;
    opacity: 1 !important;
}

.drum-grid .cell.active:hover {
    background: linear-gradient(135deg, #fdba74 0%, #fb923c 50%, #ea580c 100%) !important;
    transform: scale(1.12) !important;
    box-shadow: 0 0 14px rgba(251, 146, 60, 0.7) !important;
    z-index: 10;
}

/* ========================================
   Song Browser Modal
   ======================================== */
.song-browser-modal {
    width: 90vw;
    max-width: 800px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.song-browser-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-300);
    flex-shrink: 0;
}

.song-browser-title {
    font-size: var(--text-lg);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin: 0;
}

.song-browser-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.song-browser-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5, 20px);
    border-bottom: 1px solid var(--border-default);
    background: var(--surface-400);
    flex-shrink: 0;
}

.song-browser-search-wrap {
    flex: 1;
}

.song-browser-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-300);
    color: var(--text-primary);
    font-size: var(--text-sm);
    outline: none;
    transition: border-color var(--transition-fast);
}

.song-browser-search:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
}

.song-browser-sort {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.sort-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
}

.song-browser-sort-select {
    padding: 6px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--surface-300);
    color: var(--text-primary);
    font-size: var(--text-sm);
    cursor: pointer;
}

.song-browser-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5, 20px);
    min-height: 200px;
}

.song-card-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}

/* Song Card */
.song-card {
    position: relative;
    background: var(--surface-300);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
    cursor: pointer;
    transition: all 150ms ease;
}

.song-card:hover {
    border-color: var(--accent-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.song-card--current {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.song-card-accent {
    height: 4px;
    width: 100%;
}

.song-card-body {
    padding: var(--space-3);
}

.song-card-name {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song-card-meta {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.song-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: var(--text-secondary);
    opacity: 0.8;
}

.song-card-sync {
    opacity: 0.6;
}

.song-card-current-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 9px;
    font-weight: var(--font-semibold);
    color: var(--accent-primary);
    background: rgba(139, 92, 246, 0.15);
    padding: 2px 6px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Card hover actions */
.song-card-actions {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: var(--space-1);
    padding: 8px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    opacity: 0;
    transition: opacity 150ms ease;
}

.song-card:hover .song-card-actions {
    opacity: 1;
}

.song-card-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background: var(--surface-400);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.song-card-action-btn:hover {
    background: var(--accent-primary);
    transform: scale(1.1);
}

.song-card-action-btn--danger:hover {
    background: var(--accent-danger, #ef4444);
}

/* Empty state */
.song-browser-empty {
    text-align: center;
    padding: var(--space-8, 40px) var(--space-4);
    color: var(--text-secondary);
}

.song-browser-empty .empty-icon {
    font-size: 48px;
    margin-bottom: var(--space-3);
    opacity: 0.4;
}

.song-browser-empty h4 {
    color: var(--text-primary);
    font-size: var(--text-base);
    margin-bottom: var(--space-2);
}

.song-browser-empty p {
    font-size: var(--text-sm);
}

/* Footer */
.song-browser-footer {
    padding: var(--space-3) var(--space-5, 20px);
    border-top: 1px solid var(--border-default);
    background: var(--surface-300);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .song-browser-modal {
        width: 100vw;
        max-width: none;
        max-height: 100vh;
        border-radius: 0;
    }

    .song-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .song-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Song Timeline Section Header
   ======================================== */
.timeline-section-label {
    font-size: 11px;
    font-weight: var(--font-semibold);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: var(--space-2);
}

.timeline-teaser-bar {
    display: none;
    align-items: center;
    gap: var(--space-2);
    padding: 8px var(--space-4);
    background: var(--surface-400);
    border-top: 1px solid var(--border-default);
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    transition: background var(--transition-fast);
}

.timeline-teaser-bar:hover {
    background: var(--surface-300);
    color: var(--text-primary);
}

.song-timeline-container.collapsed .timeline-teaser-bar {
    display: flex;
}

/* Dashboard track actions */
.key-step-controls { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border-default); color: var(--text-secondary); font-size: 11px; }
.key-step-controls span { margin-right: auto; }
.key-step-controls button { min-width: 34px; min-height: 28px; border: 1px solid var(--border-default); border-radius: 5px; background: var(--surface-500); color: var(--text-primary); cursor: pointer; }
.key-step-controls button:hover { border-color: var(--accent-primary); }

/* Pattern cards stand out by surface contrast; status is carried by tint,
   badges and the existing slim in-song stripe instead of box outlines. */
.library-patterns-container .pattern-card,
.library-patterns-container .pattern-card:hover,
.library-patterns-container .pattern-card.selected,
.library-patterns-container .pattern-card.active,
.library-patterns-container .pattern-card.previewing,
.library-patterns-container .pattern-card.pattern-batch-selected,
.library-patterns-container .pattern-card.pattern-card--in-song {
    border: 0 !important;
    box-shadow: none !important;
}
.library-patterns-container .pattern-card { background: color-mix(in srgb, var(--surface-400) 88%, white 2%) !important; }
.library-patterns-container .pattern-card:hover { background: var(--surface-500) !important; }
.library-patterns-container .pattern-card.selected,
.library-patterns-container .pattern-card.active,
.library-patterns-container .pattern-card.pattern-batch-selected { background: color-mix(in srgb, var(--accent-primary) 15%, var(--surface-400)) !important; }
.library-patterns-container .pattern-card:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: 2px; }