* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

:root {
    --bg-primary: #000000;
    --bg-secondary: #0a0a0a;
    --bg-tertiary: #1a1a1a;
    --accent-cyan: #cccccc;
    --accent-magenta: #ff00ff;
    --accent-green: #00ff88;
    --accent-orange: #ff8800;
    --text-primary: #ffffff;
    --text-secondary: #aaaaaa;
    --border-color: rgba(204, 204, 204, 0.3);
    --grid-color: rgba(204, 204, 204, 0.1);
    --control-bg: rgba(20, 20, 20, 0.9);
    --header-height: 60px;
}

body {
    font-family: 'Orbitron', 'Segoe UI', 'Roboto', 'Arial', sans-serif;
    background: #000000;
    color: var(--text-primary);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

#app {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Header */
.header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 100;
    flex-shrink: 0;
    width: 100%;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 15px;
    gap: 15px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.header-row-1 {
    border-bottom: 1px solid var(--border-color);
}

.header-row-2 {
    background: rgba(0, 0, 0, 0.3);
}

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

.header-section.add-controls {
    gap: 6px;
}

.header-section.edit-actions {
    padding: 4px 8px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.header-section.colors-section {
    gap: 6px;
}

.header-section.midi-section {
    gap: 6px;
    flex-shrink: 0;
}

.app-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--accent-cyan);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.mode-indicator {
    padding: 6px 12px;
    background: rgba(0, 255, 255, 0.2);
    border: 1px solid var(--accent-cyan);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: 24px;
}

.mode-indicator.performance {
    background: rgba(255, 0, 255, 0.2);
    border-color: var(--accent-magenta);
    color: var(--accent-magenta);
}

.control-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    flex-shrink: 0;
}

.control-btn svg {
    width: 24px;
    height: 24px;
}

.control-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.control-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
}

.auto-learn-btn.active,
.auto-learn-btn.learning {
    background: rgba(255, 136, 0, 0.3);
    border-color: #ff8800;
    color: #ff8800;
    animation: pulse-glow 1s ease-in-out infinite;
}

.auto-learn-btn.active svg,
.auto-learn-btn.learning svg {
    animation: spin 2s linear infinite;
}

@keyframes pulse-glow {
    0%, 100% { box-shadow: 0 0 5px rgba(255, 136, 0, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 136, 0, 0.8); }
}

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

.auto-learn-type-select {
    padding: 4px 8px;
    font-size: 10px;
    font-family: 'Orbitron', monospace;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    cursor: pointer;
    height: 38px;
}

.auto-learn-type-select:hover {
    border-color: var(--accent-cyan);
}

.auto-learn-type-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
}

.edit-actions .action-btn {
    padding: 6px 8px;
    font-size: 14px;
    min-width: 32px;
}

body.performance-mode .edit-actions {
    display: none;
}

body.performance-mode .header-row-2 {
    display: none;
}

.global-color-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
}

.global-color-picker label {
    font-size: 16px;
    cursor: pointer;
}

.global-color-picker input[type="color"] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    background: var(--panel-bg);
    -webkit-appearance: none;
    appearance: none;
}

.global-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.global-color-picker input[type="color"]::-webkit-color-swatch {
    border-radius: 3px;
    border: none;
}

.global-color-picker input[type="color"]::-moz-color-swatch {
    border-radius: 3px;
    border: none;
}

@media (pointer: coarse) {
    .global-color-picker input[type="color"] {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        border-width: 3px;
    }
    
    .global-color-picker input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 4px;
    }
}

.grid-size-section {
    display: flex;
    align-items: center;
    gap: 4px;
}

.grid-size-label {
    font-size: 16px;
    color: var(--text-secondary);
    margin-right: 4px;
}

.grid-size-input {
    width: 42px;
    padding: 4px 6px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    text-align: center;
}

.grid-size-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.grid-size-separator {
    color: var(--text-secondary);
    font-size: 12px;
}

.cell-size-slider {
    width: 60px;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--control-bg);
    border-radius: 2px;
    cursor: pointer;
}

.cell-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--accent-cyan);
    border-radius: 50%;
    cursor: pointer;
}

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

.cell-size-value {
    font-size: 10px;
    color: var(--text-secondary);
    min-width: 36px;
    font-family: 'Orbitron', monospace;
}

.pages-section {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-nav-btn {
    width: 28px;
    height: 28px;
    font-size: 12px;
}

.page-indicator {
    padding: 4px 10px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    min-width: 60px;
    text-align: center;
    cursor: pointer;
    user-select: none;
}

.page-indicator:hover {
    border-color: var(--accent-cyan);
}

.midi-select {
    padding: 6px 8px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    cursor: pointer;
    min-width: 120px;
    max-width: 150px;
}

.midi-select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.mode-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
    border: 1px solid #555;
    border-radius: 6px;
    color: white;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mode-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 0 15px rgba(100, 100, 100, 0.4);
    border-color: #777;
}

.mode-btn.edit-mode {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, #00aaaa 100%);
}

.mode-btn.edit-mode:hover {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.action-btn {
    width: 36px;
    height: 36px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    flex-shrink: 0;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.action-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--accent-cyan);
    transform: scale(1.1);
}

.action-btn.danger:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: #ff5050;
}

.action-btn.fullscreen-btn {
    font-size: 20px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

.action-btn.fullscreen-btn:hover {
    background: linear-gradient(135deg, #2a2a2a 0%, #3d3d3d 100%);
    border-color: rgba(255, 255, 255, 0.5);
}

/* In-tab fullscreen mode */
/* Only hide header in fullscreen when in performance mode */
body.is-fullscreen.performance-mode .header {
    display: none;
}

/* In edit mode fullscreen, keep header visible and on top */
body.is-fullscreen .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
}

body.is-fullscreen .grid-container {
    position: fixed;
    top: var(--dynamic-header-height, var(--header-height));
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
}

/* In performance mode fullscreen, grid takes full screen */
body.is-fullscreen.performance-mode .grid-container {
    top: 0;
}

body.is-fullscreen .btn-exit-performance {
    z-index: 10001;
}

/* Floating fullscreen exit button */
.fullscreen-exit-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--accent-cyan);
    border-radius: 8px;
    color: var(--accent-cyan);
    font-size: 24px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
    transition: all 0.2s ease;
}

body.is-fullscreen .fullscreen-exit-btn {
    display: flex;
}

.fullscreen-exit-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Grid Container */
.grid-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--bg-primary);
}

.grid-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Controls */
.control {
    position: absolute;
    background: transparent;
    border: none;
    cursor: grab;
    overflow: visible;
}

.control-inner-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--control-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, top 0.2s ease, bottom 0.2s ease;
    box-sizing: border-box;
    pointer-events: none;
}

.control-inner-border .resize-handle {
    pointer-events: auto;
}

.control-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

/* Inner border shrinking is now handled via inline styles in renderControl() */

.control:hover .control-inner-border {
    border-color: var(--accent-cyan);
}

body.performance-mode .control:hover .control-inner-border {
    border-color: var(--border-color);
}

.control.selected .control-inner-border {
    border-color: var(--accent-magenta);
    box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
}

.control.dragging {
    opacity: 0.8;
    cursor: grabbing;
    z-index: 1000;
}

.control.no-border .control-inner-border {
    border: none;
    background: transparent;
}

.control.no-border:hover .control-inner-border {
    border: none;
}

/* Box Selection */
.box-select {
    border: 2px dashed var(--accent-cyan);
    background: rgba(0, 255, 255, 0.1);
    pointer-events: none;
    z-index: 2000;
}

.control-label {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90%;
    color: var(--text-secondary);
    z-index: 10;
    text-transform: uppercase;
}

.control-value {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-cyan);
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
    text-align: center;
    white-space: nowrap;
}


/* Resize Handles */
.resize-handle {
    position: absolute;
    width: 16px;
    height: 16px;
    background: var(--accent-cyan);
    border-radius: 3px;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 100;
    box-shadow: 0 0 6px var(--accent-cyan);
}

/* Larger invisible touch target */
.resize-handle::before {
    content: '';
    position: absolute;
    top: -12px;
    left: -12px;
    right: -12px;
    bottom: -12px;
}

.control:hover .resize-handle,
.control.selected .resize-handle {
    opacity: 1;
}

.resize-handle.se { bottom: -8px; right: -8px; cursor: se-resize; }
.resize-handle.sw { bottom: -8px; left: -8px; cursor: sw-resize; }
.resize-handle.ne { top: -8px; right: -8px; cursor: ne-resize; }
.resize-handle.nw { top: -8px; left: -8px; cursor: nw-resize; }

/* Touch-friendly resize handles */
@media (pointer: coarse) {
    .resize-handle {
        width: 28px;
        height: 28px;
        border-radius: 6px;
    }
    .resize-handle.se { bottom: -14px; right: -14px; }
    .resize-handle.sw { bottom: -14px; left: -14px; }
    .resize-handle.ne { top: -14px; right: -14px; }
    .resize-handle.nw { top: -14px; left: -14px; }
    
    /* Always show handles on touch devices when control is selected */
    .control.selected .resize-handle {
        opacity: 1;
    }
}

/* Knob Control - Ableton/TouchOSC Style */
.knob-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 15px 32px 15px;
    box-sizing: border-box;
}

.knob {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    max-width: 100%;
    max-height: 100%;
    cursor: pointer;
    container-type: size;
}

.knob-svg {
    width: 100%;
    height: 100%;
    transform: rotate(135deg);
}

.knob-track {
    fill: none;
    stroke: #2a2a2a;
    stroke-linecap: butt;
    stroke-dasharray: 198 66;
}

.knob-arc {
    fill: none;
    stroke-linecap: butt;
    stroke-dasharray: 198 264;
    stroke-dashoffset: 198;
    transition: stroke-dashoffset 0.05s ease;
}

.knob-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 4px currentColor;
}

/* Fader Control */
.fader-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 10px 32px 10px;
    box-sizing: border-box;
}

.fader-track {
    position: relative;
    height: calc(100% - 20px);
    width: clamp(6px, 8%, 12px);
    background: #222;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.fader-fill {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, var(--accent-cyan), var(--accent-magenta));
    border-radius: 6px;
    transition: height 0.05s ease;
}

.fader-handle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(40px, 80%, 100px);
    height: clamp(18px, 12%, 30px);
    background: linear-gradient(to bottom, #666, #333);
    border: 2px solid var(--accent-cyan);
    border-radius: 4px;
    cursor: grab;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.fader-handle:active {
    cursor: grabbing;
}

/* Horizontal Fader */
.fader-container.horizontal {
    flex-direction: column;
}

.fader-container.horizontal .fader-track {
    width: calc(100% - 20px);
    height: clamp(6px, 8%, 12px);
}

.fader-container.horizontal .fader-fill {
    left: 0;
    bottom: 0;
    top: 0;
    right: auto;
    width: 0%;
    height: 100%;
    background: linear-gradient(to right, var(--accent-cyan), var(--accent-magenta));
    transition: width 0.05s ease;
}

.fader-container.horizontal .fader-handle {
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
    width: clamp(18px, 12%, 30px);
    height: clamp(40px, 80%, 100px);
}

/* Button Control */
.button-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 15px 32px 15px;
    box-sizing: border-box;
}

.button-pad {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: linear-gradient(135deg, #333, #111);
    border: 3px solid var(--accent-cyan);
    cursor: pointer;
    transition: all 0.1s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button-pad:active,
.button-pad.active {
    background: linear-gradient(135deg, var(--accent-cyan), #008888);
    transform: scale(0.95);
    box-shadow: 0 0 30px var(--accent-cyan);
}

.button-pad.toggle-on {
    background: linear-gradient(135deg, var(--accent-green), #006644);
    border-color: var(--accent-green);
    box-shadow: 0 0 20px var(--accent-green);
}

/* Note Pad Control */
.note-pad-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 15px 32px 15px;
    box-sizing: border-box;
}

.note-pad {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    border: 3px solid var(--accent-cyan);
    cursor: pointer;
    transition: all 0.05s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.note-pad-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.05s ease;
}

.note-pad:hover .note-pad-glow {
    opacity: 0.3;
}

.note-pad:active,
.note-pad.active {
    transform: scale(0.96);
}

.note-pad.active .note-pad-glow {
    opacity: 1;
}

.note-info {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--text-secondary);
}

/* Keyboard Control */
.keyboard-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 0 20px 0;
    box-sizing: border-box;
}

.keyboard-keys {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
}

.white-key {
    flex: 1;
    height: 100%;
    background: linear-gradient(180deg, #ffffff, #e8e8e8);
    border: 1px solid #888;
    border-radius: 0 0 4px 4px;
    cursor: pointer;
    transition: all 0.05s ease;
    position: relative;
    z-index: 1;
}

.white-key:hover {
    background: linear-gradient(180deg, #f0f0f0, #d8d8d8);
}

.white-key:active,
.white-key.active {
    transform: translateY(2px);
}

.black-key {
    position: absolute;
    width: 12%;
    height: 60%;
    background: linear-gradient(180deg, #444, #1a1a1a);
    border: 1px solid #000;
    border-radius: 0 0 3px 3px;
    cursor: pointer;
    transition: all 0.05s ease;
    z-index: 2;
    transform: translateX(-50%);
}

.black-key:hover {
    background: linear-gradient(180deg, #555, #2a2a2a);
}

.black-key:active,
.black-key.active {
    transform: translateX(-50%) translateY(2px);
}

/* Black key positions for one octave (C to B) - centered on white key borders */
/* Each white key is 14.286% (100%/7), black keys sit at the borders */
.black-key-1 { left: 14.286%; }   /* C# - between C and D */
.black-key-2 { left: 28.571%; }   /* D# - between D and E */
.black-key-3 { left: 57.143%; }   /* F# - between F and G */
.black-key-4 { left: 71.429%; }   /* G# - between G and A */
.black-key-5 { left: 85.714%; }   /* A# - between A and B */

.keyboard-octave-label {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 1px;
}

/* XY Pad Control */
.xypad-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px 15px 32px 15px;
    box-sizing: border-box;
}

.xypad-container {
    position: relative;
    width: 100%;
    height: 100%;
    background: #111;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.xypad-crosshair-h,
.xypad-crosshair-v {
    position: absolute;
    background: rgba(0, 255, 255, 0.3);
}

.xypad-crosshair-h {
    left: 0;
    right: 0;
    height: 1px;
}

.xypad-crosshair-v {
    top: 0;
    bottom: 0;
    width: 1px;
}

.xypad-cursor {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, var(--accent-cyan), transparent);
    border: 2px solid var(--accent-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    box-shadow: 0 0 15px var(--accent-cyan);
}

/* Inspector Panel */
.inspector {
    position: fixed;
    top: calc(var(--header-height) + 10px);
    right: 10px;
    width: 240px;
    max-height: calc(100vh - var(--header-height) - 20px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    z-index: 1000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    pointer-events: auto;
}

/* Keep inspector visible above grid in fullscreen edit mode */
body.is-fullscreen .inspector {
    z-index: 1000;
}

.inspector.hidden {
    display: none;
}

.inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    cursor: grab;
    user-select: none;
}

.inspector.dragging .inspector-header {
    cursor: grabbing;
}

.inspector.dragging {
    opacity: 0.9;
}

.inspector-header h3 {
    font-size: 12px;
    color: var(--accent-cyan);
}

.inspector-close {
    width: 24px;
    height: 24px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.inspector-close:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: #ff5050;
    color: #ff5050;
}

.inspector-body {
    padding: 10px 12px;
    overflow-y: auto;
    flex: 1;
}

.inspector-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.inspector-group {
    margin-bottom: 8px;
}

.inspector-group label {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspector-group input,
.inspector-group select {
    width: 100%;
    padding: 6px 8px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 11px;
}

.inspector-group input:focus,
.inspector-group select:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.inspector-group input[type="color"] {
    width: 100%;
    height: 36px;
    padding: 2px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    background: var(--panel-bg);
    -webkit-appearance: none;
    appearance: none;
}

.inspector-group input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 3px;
}

.inspector-group input[type="color"]::-webkit-color-swatch {
    border-radius: 4px;
    border: none;
}

.inspector-group input[type="color"]::-moz-color-swatch {
    border-radius: 4px;
    border: none;
}

@media (pointer: coarse) {
    .inspector-group input[type="color"] {
        height: 44px;
        min-height: 44px;
        border-width: 3px;
    }
    
    .inspector-group input[type="color"]::-webkit-color-swatch-wrapper {
        padding: 4px;
    }
}

.inspector-group:has(input[type="checkbox"]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.inspector-group:has(input[type="checkbox"]) label {
    margin-bottom: 0;
}

.inspector-group input[type="checkbox"] {
    width: auto;
    padding: 0;
    cursor: pointer;
    accent-color: var(--accent-cyan);
}

.inspector-group.button-only,
.inspector-group.button-pad-only,
.inspector-group.knob-fader-only,
.inspector-group.knob-only,
.inspector-group.fader-only,
.inspector-row.knob-only,
.inspector-row.fader-only,
.inspector-row.button-pad-only {
    display: none;
}

.inspector-group.button-only.visible,
.inspector-group.button-pad-only.visible,
.inspector-group.knob-fader-only.visible,
.inspector-group.knob-only.visible,
.inspector-group.fader-only.visible {
    display: block;
}

.inspector-row.knob-only.visible,
.inspector-row.fader-only.visible,
.inspector-row.button-pad-only.visible {
    display: grid;
}

.inspector-group.pad-only {
    display: none;
}

.inspector-group.pad-only.visible {
    display: block;
}

.inspector-row.pad-only {
    display: none;
}

.inspector-row.pad-only.visible {
    display: grid;
}

.inspector-row.xypad-only {
    display: none;
}

.inspector-row.xypad-only.visible {
    display: grid;
}

.inspector-row.keyboard-only {
    display: none;
}

.inspector-row.keyboard-only.visible {
    display: grid;
}

.inspector-actions {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
}

.learn-btn {
    flex: 1;
    padding: 6px 8px;
    background: linear-gradient(135deg, #4a4a8a, #3a3a6a);
    border: 1px solid var(--accent-magenta);
    border-radius: 4px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.learn-btn:hover {
    background: linear-gradient(135deg, #5a5a9a, #4a4a7a);
}

.learn-btn.learning {
    background: linear-gradient(135deg, var(--accent-magenta), #aa00aa);
    animation: pulse 0.5s infinite alternate;
}

.delete-btn {
    padding: 6px 12px;
    background: rgba(255, 50, 50, 0.2);
    border: 1px solid #ff5050;
    border-radius: 4px;
    color: #ff5050;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover {
    background: rgba(255, 50, 50, 0.4);
}

/* Modals */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.modal.hidden {
    display: none;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.modal-small {
    max-width: 400px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: 18px;
    color: var(--accent-cyan);
}

.modal-close {
    width: 32px;
    height: 32px;
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(255, 50, 50, 0.2);
    border-color: #ff5050;
    color: #ff5050;
}

.modal-body {
    padding: 25px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-body h3 {
    color: var(--accent-magenta);
    margin: 20px 0 10px;
    font-size: 14px;
}

.modal-body h3:first-child {
    margin-top: 0;
}

.modal-body p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 10px;
    font-size: 12px;
}

.modal-body ul {
    color: var(--text-secondary);
    margin-left: 20px;
    line-height: 1.8;
    font-size: 12px;
}

.modal-body kbd {
    display: inline-block;
    padding: 3px 8px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-family: 'Orbitron', monospace;
    font-size: 10px;
}

.modal-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.primary-btn {
    flex: 1;
    padding: 12px;
    background: linear-gradient(135deg, var(--accent-cyan), #008888);
    border: none;
    border-radius: 6px;
    color: var(--bg-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.primary-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.secondary-btn {
    flex: 1;
    padding: 12px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.secondary-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--accent-cyan);
}

/* Saved Layouts List */
.saved-layouts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.saved-layout-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--control-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.saved-layout-item:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--accent-cyan);
}

.saved-layout-name {
    font-size: 14px;
    font-weight: 700;
}

.saved-layout-date {
    font-size: 10px;
    color: var(--text-secondary);
}

.saved-layout-delete {
    padding: 6px 10px;
    background: rgba(255, 50, 50, 0.2);
    border: 1px solid #ff5050;
    border-radius: 4px;
    color: #ff5050;
    font-size: 12px;
    cursor: pointer;
}

.saved-layout-delete:hover {
    background: rgba(255, 50, 50, 0.4);
}

.saved-layout-insert {
    padding: 6px 10px;
    background: rgba(0, 255, 100, 0.2);
    border: 1px solid #00ff64;
    border-radius: 4px;
    color: #00ff64;
    font-size: 12px;
    cursor: pointer;
}

.saved-layout-insert:hover {
    background: rgba(0, 255, 100, 0.4);
}

.saved-layout-export {
    padding: 6px 10px;
    background: rgba(0, 150, 255, 0.2);
    border: 1px solid #0096ff;
    border-radius: 4px;
    color: #0096ff;
    font-size: 12px;
    cursor: pointer;
}

.saved-layout-export:hover {
    background: rgba(0, 150, 255, 0.4);
}

.load-file-section {
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
}

.load-file-section p {
    margin-bottom: 10px;
}

/* Performance Mode Styles */
body.performance-mode .header {
    display: none;
}

body.performance-mode .grid-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: var(--bg-primary);
}

body.performance-mode .control {
    cursor: default;
}

body.performance-mode .resize-handle {
    display: none;
}

body.performance-mode .inspector {
    display: none;
}

body.performance-mode .grid-overlay {
    display: none;
}

/* Exit Performance Mode Button */
.exit-performance-btn {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, rgba(30, 30, 30, 0.9) 0%, rgba(50, 50, 50, 0.9) 100%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    opacity: 0.6;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
}

.exit-performance-btn:hover {
    opacity: 1;
    transform: scale(1.1);
    border-color: var(--accent-cyan);
    box-shadow: 0 4px 20px rgba(204, 204, 204, 0.3);
}

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

body.performance-mode .exit-performance-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Performance Mode Page Navigation */
.performance-page-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    align-items: center;
    gap: 2px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 2px 6px;
    opacity: 0.4;
    transition: all 0.2s ease;
}

.performance-page-nav:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.8);
}

body.performance-mode .performance-page-nav {
    display: flex;
}

.perf-page-btn {
    width: 24px;
    height: 20px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}

.perf-page-btn:hover {
    background: rgba(0, 255, 255, 0.3);
    color: var(--accent-cyan);
}

.perf-page-btn:active {
    transform: scale(0.9);
}

.perf-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.perf-page-indicator {
    font-family: 'Orbitron', sans-serif;
    font-size: 10px;
    color: var(--text-secondary);
    min-width: 20px;
    text-align: center;
}

/* Animations */
@keyframes pulse {
    from { opacity: 1; }
    to { opacity: 0.6; }
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

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

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px 24px;
    border-radius: 8px;
    border: 1px solid var(--accent-cyan);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    z-index: 10000;
    animation: slideUp 0.3s ease;
}

.toast-notification.fade-out {
    animation: fadeOut 0.3s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

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

/* Responsive adjustments */
@media screen and (max-width: 1400px) {
    .midi-select {
        min-width: 100px;
        max-width: 120px;
    }
    
    .control-btn span {
        display: none;
    }
    
    .control-btn {
        padding: 8px;
    }
}

@media screen and (max-width: 1100px) {
    .app-title {
        font-size: 14px;
    }
    
    .mode-indicator {
        padding: 4px 8px;
        font-size: 9px;
    }
    
    .global-color-picker {
        padding: 4px 6px;
    }
    
    .global-color-picker label {
        display: none;
    }
    
    .global-color-picker input[type="color"] {
        width: 28px;
        height: 28px;
    }
    
    .midi-select {
        min-width: 80px;
        max-width: 100px;
        font-size: 9px;
        padding: 4px 6px;
    }
    
    .mode-btn {
        padding: 6px 10px;
        font-size: 9px;
    }
    
    .action-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .edit-actions .action-btn {
        min-width: 28px;
        padding: 4px 6px;
        font-size: 12px;
    }
}

@media screen and (max-width: 900px) {
    .header-row {
        padding: 6px 10px;
        gap: 10px;
    }
    
    .header-section {
        gap: 4px;
    }
    
    .app-title {
        font-size: 12px;
    }
    
    .mode-indicator {
        display: none;
    }
    
    .control-btn svg {
        width: 20px;
        height: 20px;
    }
    
    .midi-select {
        min-width: 70px;
        max-width: 80px;
    }
}

/* Touch devices on small screens - ensure tap targets remain accessible */
@media screen and (max-width: 1100px) and (pointer: coarse) {
    .global-color-picker input[type="color"] {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* ================================
   ELECTRON DESKTOP APP STYLES
   ================================ */

/* When running in Electron with transparency enabled */
body.electron-app {
    background: transparent !important;
}

body.electron-app #app {
    background: transparent !important;
}

body.electron-app .grid-container {
    background: rgba(0, 0, 0, 0.3) !important;
}

body.electron-app .header {
    background: rgba(10, 10, 10, 0.85) !important;
    -webkit-app-region: drag;
}

body.electron-app .header button,
body.electron-app .header select,
body.electron-app .header input {
    -webkit-app-region: no-drag;
}

body.electron-app .control {
    background: rgba(20, 20, 20, 0.8) !important;
}

body.electron-app .inspector {
    background: rgba(15, 15, 15, 0.95) !important;
}

/* Electron window controls */
.electron-controls {
    display: none;
    position: fixed;
    top: 8px;
    right: 8px;
    z-index: 10000;
    gap: 4px;
    -webkit-app-region: no-drag;
}

body.electron-app .electron-controls {
    display: flex;
}

.electron-control-btn {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    -webkit-app-region: no-drag;
}

.electron-control-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

.electron-control-btn.close-btn:hover {
    background: #e74c3c;
}

.electron-control-btn.active {
    background: rgba(0, 255, 255, 0.3);
    border: 1px solid var(--accent-cyan);
}

/* Electron settings panel */
.electron-settings {
    display: none;
    position: fixed;
    top: 45px;
    right: 8px;
    background: rgba(20, 20, 20, 0.95);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    z-index: 10000;
    min-width: 180px;
    -webkit-app-region: no-drag;
}

body.electron-app .electron-settings.visible {
    display: block;
}

.electron-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 11px;
    color: var(--text-secondary);
}

.electron-settings-row:last-child {
    margin-bottom: 0;
}

.electron-settings-row label {
    margin-right: 10px;
}

.electron-settings-row input[type="range"] {
    width: 80px;
    accent-color: var(--accent-cyan);
}

.electron-settings-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-cyan);
}

/* ================================
   Custom Color Picker Popup
   ================================ */
.color-picker-popup {
    position: fixed;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid var(--accent-cyan);
    border-radius: 12px;
    padding: 12px;
    z-index: 2000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 255, 255, 0.2);
    min-width: 200px;
}

.color-picker-popup.hidden {
    display: none;
}

.color-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
    font-size: 12px;
    color: var(--text-primary);
    font-weight: 600;
}

.color-picker-close {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.color-picker-close:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

.color-picker-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 12px;
}

.color-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0;
}

.color-swatch:hover {
    transform: scale(1.15);
    border-color: white;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.color-swatch:active {
    transform: scale(0.95);
}

.color-swatch[data-color="#000000"] {
    border: 2px solid #444;
}

.color-picker-custom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.color-picker-custom label {
    font-size: 11px;
    color: var(--text-secondary);
}

.color-hex-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 6px 8px;
    color: var(--text-primary);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    text-transform: uppercase;
}

.color-hex-input:focus {
    outline: none;
    border-color: var(--accent-cyan);
}

.color-preview-box {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    background: #00ffff;
}

/* Color picker button triggers (replacing native inputs) */
.color-picker-btn {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 2px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.color-picker-btn:hover {
    border-color: var(--accent-cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
    transform: scale(1.05);
}

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

/* Header color picker buttons */
.global-color-picker .color-picker-btn {
    width: 28px;
    height: 28px;
}

/* Inspector color picker buttons */
.inspector .color-picker-btn {
    width: 100%;
    height: 36px;
}

/* Toast notification */
.vmidi-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(0, 255, 136, 0.3);
    border: 1px solid rgba(0, 255, 136, 0.4);
    z-index: 100000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    pointer-events: none;
}

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

/* Preview mode banner */
.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #ff6600 0%, #ff8800 50%, #ff6600 100%);
    color: #000;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
    font-weight: bold;
    z-index: 100001;
    box-shadow: 0 2px 10px rgba(255, 102, 0, 0.5);
}

.preview-banner span {
    text-transform: uppercase;
    letter-spacing: 1px;
}

.preview-banner .subscribe-btn {
    background: #000;
    color: #fff;
    padding: 6px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.2s ease;
}

.preview-banner .subscribe-btn:hover {
    background: #222;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* Adjust header when preview banner is shown */
body:has(.preview-banner) .header {
    margin-top: 44px;
}

body:has(.preview-banner) #grid-container {
    height: calc(100vh - 44px - var(--header-height) * 2);
}

/* MIDI Monitor Panel */
.midi-monitor {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 320px;
    max-height: 300px;
    background: rgba(10, 10, 10, 0.95);
    border: 1px solid var(--accent-cyan);
    border-radius: 8px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 255, 255, 0.1);
    font-family: 'Orbitron', monospace;
}

.midi-monitor.hidden {
    display: none;
}

.midi-monitor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: rgba(20, 20, 20, 0.9);
    border-bottom: 1px solid var(--border-color);
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    font-weight: bold;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.midi-monitor-header span {
    flex: 1;
}

.midi-monitor-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    font-size: 14px;
    transition: color 0.2s;
}

.midi-monitor-btn:hover {
    color: var(--text-primary);
}

.midi-monitor-log {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    font-size: 11px;
    font-family: 'Courier New', monospace;
    max-height: 240px;
}

.midi-log-entry {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    animation: midi-flash 0.3s ease-out;
}

@keyframes midi-flash {
    0% { background: rgba(0, 255, 255, 0.2); }
    100% { background: transparent; }
}

@keyframes retrigger-pulse {
    0% { transform: scale(1); filter: brightness(1); }
    25% { transform: scale(0.92); filter: brightness(1.5); }
    50% { transform: scale(1.05); filter: brightness(2); }
    100% { transform: scale(1); filter: brightness(1); }
}

.button-pad.retrigger-flash {
    animation: retrigger-pulse 0.15s ease-out;
}

.midi-log-entry .midi-type {
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 9px;
    min-width: 40px;
    text-align: center;
}

.midi-log-entry .midi-type.cc {
    background: #0066ff;
    color: white;
}

.midi-log-entry .midi-type.note-on {
    background: #00cc44;
    color: white;
}

.midi-log-entry .midi-type.note-off {
    background: #cc4400;
    color: white;
}

.midi-log-entry .midi-type.other {
    background: #666;
    color: white;
}

.midi-log-entry .midi-data {
    flex: 1;
    color: var(--text-primary);
}

.midi-log-entry .midi-time {
    color: var(--text-secondary);
    font-size: 9px;
}

/* Theme Grid */
.theme-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.theme-card {
    padding: 16px;
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.theme-card:hover {
    border-color: var(--accent-cyan);
    transform: translateY(-2px);
}

.theme-card.active {
    border-color: var(--accent-green);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.theme-card-name {
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.theme-card-preview {
    display: flex;
    gap: 6px;
    justify-content: center;
    align-items: center;
}

.theme-swatch {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.2);
}

/* Inspector Section Header */
.inspector-section-header {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 0 8px 0;
    margin-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* Style Action Buttons */
.style-actions {
    display: flex;
    gap: 8px;
    padding: 8px 0;
}

.style-action-btn {
    flex: 1;
    padding: 6px 10px;
    background: rgba(100, 100, 100, 0.2);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.style-action-btn:hover {
    background: rgba(100, 100, 100, 0.4);
    color: var(--text-primary);
    border-color: var(--accent-cyan);
}

/* ========================================
   KNOB STYLES
   ======================================== */

/* Knob Style: Minimal (default) - already defined above */

/* Knob Style: Classic - Hardware synth look with center cap */
.knob.style-classic {
    background: radial-gradient(circle at 30% 30%, #555, #222);
    border-radius: 50%;
    box-shadow: 
        inset 0 2px 4px rgba(255,255,255,0.1),
        inset 0 -2px 4px rgba(0,0,0,0.5),
        0 4px 12px rgba(0,0,0,0.6);
}

.knob.style-classic .knob-svg {
    opacity: 0;
}

.knob.style-classic::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    height: 40%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 40% 40%, #888, #333);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

.knob.style-classic .knob-pointer {
    width: 4px;
    height: 35%;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    transform-origin: center 100%;
}

/* Knob Style: Glass - Glass/metallic reflective */
.knob.style-glass {
    background: linear-gradient(145deg, #4a4a4a 0%, #2a2a2a 50%, #1a1a1a 100%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.2),
        inset 0 -1px 0 rgba(0,0,0,0.3),
        0 4px 12px rgba(0,0,0,0.5);
}

.knob.style-glass::after {
    content: '';
    position: absolute;
    inset: 20%;
    background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

.knob.style-glass .knob-svg {
    position: relative;
    z-index: 1;
}

.knob.style-glass .knob-track {
    stroke: rgba(255,255,255,0.08);
    stroke-width: 4;
}

.knob.style-glass .knob-arc {
    stroke-width: 4;
}

.knob.style-glass .knob-pointer {
    width: 6px;
    height: 6px;
    z-index: 2;
    box-shadow: 0 0 6px currentColor, 0 0 12px currentColor, 0 1px 2px rgba(0,0,0,0.5);
}

/* Knob Style: LED Ring - Dots around the knob */
.knob.style-led-ring {
    background: radial-gradient(circle, #1a1a1a, #0a0a0a);
    border-radius: 50%;
    border: 2px solid #333;
}

.knob.style-led-ring .knob-svg {
    position: relative;
    z-index: 1;
    transform: rotate(0deg);
}

.knob.style-led-ring .knob-track,
.knob.style-led-ring .knob-arc {
    opacity: 0;
}

.knob.style-led-ring .led-dot {
    transition: fill 0.1s ease, filter 0.1s ease;
}

.knob.style-led-ring::before {
    content: '';
    position: absolute;
    inset: 18%;
    background: radial-gradient(circle at 40% 40%, #3a3a3a, #1a1a1a);
    border-radius: 50%;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.8);
    z-index: 2;
}

.knob.style-led-ring .knob-pointer {
    width: 3px;
    height: 32%;
    top: 18%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
    transform-origin: center 100%;
    z-index: 3;
}

/* Knob Style: Notched - Position markers */
.knob.style-notched {
    background: linear-gradient(145deg, #3a3a3a, #1a1a1a);
    border-radius: 50%;
    border: 3px solid #555;
}

.knob.style-notched .knob-svg {
    position: relative;
    z-index: 1;
    transform: rotate(0deg);
}

.knob.style-notched .knob-track,
.knob.style-notched .knob-arc {
    opacity: 0;
}

.knob.style-notched .tick-mark {
    stroke-linecap: round;
}

.knob.style-notched::before {
    content: '';
    position: absolute;
    inset: 22%;
    background: linear-gradient(145deg, #2a2a2a, #1a1a1a);
    border-radius: 50%;
    border: 2px solid #444;
    z-index: 2;
}

.knob.style-notched .knob-pointer {
    width: 6px;
    height: 28%;
    top: 22%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px 3px 1px 1px;
    transform-origin: center 100%;
    box-shadow: 0 0 6px currentColor;
    z-index: 3;
}

/* ========================================
   FADER STYLES
   ======================================== */

/* Fader Style: Standard (default) - already defined above */

/* Fader Style: LED Bar - VU meter segments */
.fader-container.style-led-bar .fader-track {
    background: #111 !important;
    border: 1px solid #333;
    overflow: hidden;
}

.fader-container.style-led-bar .fader-fill {
    background: repeating-linear-gradient(
        to top,
        transparent 0px,
        transparent 2px,
        var(--accent-cyan) 2px,
        var(--accent-cyan) 8px
    ) !important;
    border-radius: 0;
}

.fader-container.style-led-bar .fader-handle {
    width: 120% !important;
    height: 8px !important;
    border-radius: 2px;
    background: #fff !important;
    border: 1px solid #888 !important;
}

.fader-container.style-led-bar.horizontal .fader-fill {
    background: repeating-linear-gradient(
        to right,
        transparent 0px,
        transparent 2px,
        var(--accent-cyan) 2px,
        var(--accent-cyan) 8px
    ) !important;
}

.fader-container.style-led-bar.horizontal .fader-handle {
    width: 8px !important;
    height: 120% !important;
}

/* Fader Style: Minimal - Thin line with dot */
.fader-container.style-minimal .fader-track {
    width: 2px !important;
    background: rgba(255,255,255,0.2) !important;
    border: none;
    border-radius: 1px;
}

.fader-container.style-minimal .fader-fill {
    border-radius: 1px;
}

.fader-container.style-minimal .fader-handle {
    width: 16px !important;
    height: 16px !important;
    border-radius: 50%;
    background: currentColor !important;
    box-shadow: 0 0 10px currentColor;
}

.fader-container.style-minimal.horizontal .fader-track {
    height: 2px !important;
    width: calc(100% - 20px) !important;
}

.fader-container.style-minimal.horizontal .fader-handle {
    width: 16px !important;
    height: 16px !important;
}

/* Fader Style: Console - Vintage mixing console */
.fader-container.style-console .fader-track {
    width: 8px !important;
    background: linear-gradient(to bottom, #2a2a2a, #1a1a1a) !important;
    border: 2px solid #444;
    border-radius: 4px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}

.fader-container.style-console .fader-fill {
    display: none;
}

.fader-container.style-console .fader-handle {
    width: clamp(50px, 100%, 120px) !important;
    height: 24px !important;
    background: linear-gradient(to bottom, #666, #333, #222) !important;
    border: 1px solid #555;
    border-radius: 3px;
    box-shadow: 
        inset 0 1px 0 rgba(255,255,255,0.2),
        0 2px 8px rgba(0,0,0,0.5);
}

.fader-container.style-console .fader-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(to right, transparent, #888, transparent);
    transform: translateY(-50%);
}

.fader-container.style-console.horizontal .fader-track {
    height: 8px !important;
    width: calc(100% - 20px) !important;
}

.fader-container.style-console.horizontal .fader-handle {
    width: 24px !important;
    height: clamp(50px, 100%, 120px) !important;
}

/* Fader Style: Touch Strip - Touch-sensitive strip */
.fader-container.style-touch-strip .fader-track {
    background: linear-gradient(to bottom, #1a1a1a, #0a0a0a) !important;
    border: 1px solid #333;
    border-radius: 20px;
}

.fader-container.style-touch-strip .fader-fill {
    border-radius: 20px;
    opacity: 0.8;
}

.fader-container.style-touch-strip .fader-handle {
    display: none;
}

.fader-container.style-touch-strip.horizontal .fader-track {
    width: calc(100% - 20px) !important;
}