/* AlgoRave Studio — Matrix Terminal Theme */

@font-face {
    font-family: 'NimbusMono';
    src: url('/static/fonts/NimbusMono-Bold.otf') format('opentype');
    font-weight: bold;
}

@font-face {
    font-family: 'OCR-A';
    src: url('/static/fonts/OCR-A.ttf') format('truetype');
}

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

body {
    background: #000000;
    color: #00ff00;
    font-family: 'NimbusMono', 'Courier New', monospace;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Matrix Rain Canvas */
#matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.15;
}

/* CRT / Matrix terminal effects */

/* Global text glow — phosphor green */
body {
    text-shadow: 0 0 1px rgba(0, 255, 0, 0.3);
}

/* CRT flicker — very subtle */
@keyframes crt-flicker {
    0% { opacity: 1; }
    3% { opacity: 0.97; }
    6% { opacity: 1; }
    50% { opacity: 1; }
    53% { opacity: 0.98; }
    56% { opacity: 1; }
}

body {
    animation: crt-flicker 4s infinite;
}

/* Blinking cursor — classic green block */
@keyframes cursor-blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* Input fields: fat matrix-style caret */
input, textarea, select {
    caret-color: #00ff00;
    caret-shape: block;
}

/* Text typing glow effect on focused inputs */
input:focus, textarea:focus {
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.6), 0 0 10px rgba(0, 255, 0, 0.2);
}

/* CodeMirror cursor: fat block cursor — blink handled by drawSelection() only */
.cm-editor .cm-cursor,
.cm-editor .cm-cursor-primary,
.cm-cursorLayer .cm-cursor,
.cm-cursorLayer .cm-cursor-primary {
    border-left-width: 0.6em !important;
    border-left-style: solid !important;
    border-left-color: #00ff00 !important;
    box-shadow: 0 0 10px #00ff00, 0 0 20px rgba(0, 255, 0, 0.5) !important;
    animation: none !important;
}

/* Focused editor: phosphor glow on text */
.cm-focused .cm-line {
    text-shadow: 0 0 2px rgba(0, 255, 0, 0.25);
}

/* Buttons: glow on hover like CRT highlight */
.btn:hover {
    text-shadow: 0 0 6px currentColor, 0 0 12px rgba(0, 255, 0, 0.2);
}

/* CRT vignette — dark corners */
.crt-vignette {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse at center,
        transparent 60%,
        rgba(0, 0, 0, 0.4) 100%
    );
}

/* CRT curvature — subtle barrel distortion illusion */
.crt-curve {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.3);
}

/* Scanline overlay */
.scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 1px,
        rgba(0, 0, 0, 0.15) 1px,
        rgba(0, 0, 0, 0.15) 2px
    );
}

/* Content above rain */
.container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
}

/* Header — minimal, terminal-style */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.06);
}

.header-left, .header-right, .header-center {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.header-right {
    gap: 0.4rem;
}

.title {
    font-family: 'OCR-A', monospace;
    font-size: 1rem;
    font-weight: normal;
    letter-spacing: 0.2em;
    color: #00ff00;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.5);
}

/* Push LOGOUT to minimal visibility */
.btn-logout {
    opacity: 0.25;
    font-size: 0.45rem !important;
    padding: 0.15rem 0.3rem !important;
    border-color: rgba(0, 255, 0, 0.08) !important;
}
.btn-logout:hover {
    opacity: 0.7;
}

.bpm-control {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.bpm-input {
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    width: 42px;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: #00ff00;
    text-align: center;
    padding: 0.15rem;
    outline: none;
    -moz-appearance: textfield;
}

.bpm-input::-webkit-inner-spin-button,
.bpm-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.bpm-input:focus {
    border-color: rgba(0, 255, 0, 0.5);
}

.bpm-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.3);
}

.btn-tap {
    font-size: 0.5rem;
    padding: 0.15rem 0.4rem;
    border-color: rgba(0, 255, 0, 0.15);
    opacity: 0.5;
}

.btn-tap:hover, .btn-tap.active {
    opacity: 1;
    text-shadow: 0 0 6px #00ff00;
}

.master-gain-wrap {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.master-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: #00ff00;
    opacity: 0.4;
}

.master-gain-slider {
    width: 50px;
    height: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 0, 0.15);
    border-radius: 0;
    outline: none;
}

.master-gain-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #00ff00;
    cursor: pointer;
    box-shadow: 0 0 6px #00ff00;
}

.btn-perform {
    font-family: 'OCR-A', monospace;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: #00ff00;
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
}

.btn-perform:hover, .btn-perform.active {
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 8px #00ff00;
}

/* Status indicators */
.ws-dot {
    width: 5px;
    height: 5px;
    border-radius: 0;
    background: #333;
}

.ws-dot.connected {
    background: #00ff00;
    box-shadow: 0 0 4px #00ff00;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 0;
    background: #333;
}

.status-dot.ready {
    background: #00ff00;
    box-shadow: 0 0 4px #00ff00;
}

.status-dot.playing {
    background: #00ff00;
    box-shadow: 0 0 8px #00ff00;
    animation: glow-pulse 1.5s ease-in-out infinite;
}

.status-dot.error {
    background: #ff0000;
    box-shadow: 0 0 6px #ff0000;
}

#status-text {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    opacity: 0.6;
}

@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 4px #00ff00; }
    50% { box-shadow: 0 0 12px #00ff00, 0 0 20px rgba(0, 255, 0, 0.3); }
}

/* Blocks — borderless terminal cards */
#blocks-container {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.block {
    background: rgba(0, 255, 0, 0.02);
    border: none;
    border-left: 3px solid rgba(0, 255, 0, 0.1);
    margin-bottom: 0.4rem;
    transition: border-color 0.3s, background 0.3s;
}

.block-playing {
    border-left-color: #00ff00;
    background: rgba(0, 255, 0, 0.035);
    box-shadow: -2px 0 8px rgba(0, 255, 0, 0.06);
}

/* Playing block glow animation */
.block-alive {
    border-left-color: #00ff00 !important;
    animation: block-glow 2s ease-in-out infinite;
}

.block-alive .block-header {
    background: rgba(0, 255, 0, 0.06);
}

.block-alive .block-badge {
    color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
}

@keyframes block-glow {
    0%, 100% {
        box-shadow: inset 0 0 15px rgba(0, 255, 0, 0.04), -4px 0 10px rgba(0, 255, 0, 0.06);
    }
    50% {
        box-shadow: inset 0 0 30px rgba(0, 255, 0, 0.08), -6px 0 20px rgba(0, 255, 0, 0.12);
    }
}

/* Mini step visualizer bar under header */
.block-viz {
    display: flex;
    gap: 1px;
    padding: 0 0.6rem;
    height: 4px;
}

.block-viz-cell {
    flex: 1;
    background: #00ff00;
    opacity: 0.06;
    transition: opacity 0.08s;
}

.block-viz-cell.active {
    opacity: 1;
    box-shadow: 0 0 3px #00ff00;
}

.block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.45rem 0.6rem;
    background: none;
    border: none;
}

.block-header-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.block-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 0;
    background: none;
    color: rgba(0, 255, 0, 0.45);
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
}

.block-playing .block-badge {
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

/* Drag handle */
.block-drag-handle {
    cursor: grab;
    color: rgba(0, 255, 0, 0.2);
    font-size: 0.7rem;
    padding: 0 0.15rem;
    user-select: none;
    transition: color 0.15s;
}

.block-drag-handle:hover {
    color: rgba(0, 255, 0, 0.5);
}

.block-drag-handle:active {
    cursor: grabbing;
}

.block-dragging {
    opacity: 0.4;
}

.block-drag-over {
    border-top: 2px solid #00ff00 !important;
}

.block-name {
    background: none;
    border: none;
    color: rgba(0, 255, 0, 0.55);
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    outline: none;
    width: 100px;
}

.block-name:focus {
    color: #00ff00;
}

.block-controls {
    display: flex;
    gap: 0.15rem;
    align-items: center;
}

.block-btn {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: rgba(0, 255, 0, 0.55);
    font-size: 0.65rem;
    width: 24px;
    height: 24px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.block-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

.block-btn-play.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.2);
}

.block-btn-mute:hover {
    border-color: #ff0000;
    color: #ff0000;
}

.block-btn-solo {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    font-weight: bold;
}

.block-btn-solo:hover {
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

.block-btn-remove:hover {
    border-color: #ff0000;
    color: #ff0000;
}

.block-vol-wrap {
    display: flex;
    align-items: center;
    margin: 0 0.2rem;
}

.block-vol-slider {
    width: 40px;
    height: 2px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 0, 0.15);
    outline: none;
    border-radius: 0;
}

.block-vol-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 8px;
    height: 8px;
    border-radius: 0;
    background: #00ff00;
    cursor: pointer;
    box-shadow: 0 0 3px #00ff00;
}

.block-speed-wrap {
    display: flex;
    align-items: center;
    gap: 0.1rem;
}

.block-speed-btn {
    width: 18px !important;
    height: 18px !important;
    font-size: 0.7rem !important;
    border-color: rgba(0, 255, 0, 0.2) !important;
    color: rgba(0, 255, 0, 0.55) !important;
}

.block-speed-btn:hover {
    background: rgba(0, 255, 0, 0.08) !important;
    border-color: #00ff00 !important;
    color: #00ff00 !important;
}

.block-speed-input {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    width: 32px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: rgba(0, 255, 0, 0.7);
    text-align: center;
    padding: 1px 2px;
    outline: none;
    -moz-appearance: textfield;
}

.block-speed-input::-webkit-inner-spin-button,
.block-speed-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.block-speed-input:focus {
    border-color: #00ff00;
    box-shadow: 0 0 4px rgba(0, 255, 0, 0.2);
    color: #00ff00;
}

/* Visual separator between control groups — must be clearly visible */
.block-sep {
    width: 1px;
    height: 20px;
    background: rgba(0, 255, 0, 0.2);
    margin: 0 0.6rem;
    flex-shrink: 0;
}

/* Quick evolve buttons */
.block-evolve-quick {
    display: flex;
    gap: 0.1rem;
}

.block-btn-evolve-q {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.12);
    color: rgba(0, 255, 0, 0.45);
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.05rem 0.25rem;
    cursor: pointer;
    transition: all 0.15s;
    height: 24px;
    display: flex;
    align-items: center;
}

.block-btn-evolve-q:hover {
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.block-btn-evolve-q:disabled {
    opacity: 0.3;
    cursor: wait;
}

/* FX active indicators */
.fx-dots {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.2);
    letter-spacing: 0.08em;
    min-width: 0;
    transition: color 0.2s;
}

.fx-dots.has-fx {
    color: #00ff00;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
}

.block-btn-fx {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.1rem 0.35rem;
    width: auto;
    border-color: rgba(0, 255, 0, 0.22);
    color: rgba(0, 255, 0, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.block-btn-fx:hover {
    border-color: rgba(0, 255, 0, 0.5);
    color: #00ff00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

.block-btn-fx.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.08);
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
}

/* AI action buttons */
.block-ai-actions {
    position: relative;
    display: flex;
    gap: 0.15rem;
    padding-left: 0.2rem;
    border-left: 1px solid rgba(0, 200, 255, 0.1);
}

.block-ai-btn {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: rgba(0, 255, 0, 0.3);
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.block-ai-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
}

.block-ai-btn:disabled {
    opacity: 0.3;
    cursor: wait;
}

/* CodeMirror editor area */
.block-editor {
    padding: 0.15rem 0;
}

.block-editor .cm-editor {
    max-height: 250px;
    overflow-y: auto;
}

.block-editor .cm-content {
    padding: 0.3rem 0.5rem 0.3rem 0;
}

/* Effects panel */
.fx-panel {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 0.15rem 0.8rem;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 255, 0, 0.01);
    border: none;
    border-top: 1px solid rgba(0, 255, 0, 0.04);
}

.fx-row {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.fx-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.4);
    text-transform: uppercase;
    width: 42px;
    flex-shrink: 0;
}

.fx-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 0, 0.12);
    border-radius: 0;
    outline: none;
    cursor: pointer;
}

.fx-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: #00ff00;
    cursor: pointer;
    box-shadow: 0 0 4px #00ff00;
}

.fx-value {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.5);
    width: 38px;
    text-align: right;
    flex-shrink: 0;
}

/* Toolbar */
.toolbar {
    margin-bottom: 0.75rem;
    border: 1px solid rgba(0, 255, 0, 0.06);
    background: rgba(0, 0, 0, 0.3);
}

.toolbar-row {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem;
}

.toolbar-row-primary {
    border-bottom: 1px solid rgba(0, 255, 0, 0.08);
    padding: 0.4rem 0.5rem;
}

.toolbar-row-primary .btn {
    font-size: 0.65rem;
    padding: 0.35rem 0.8rem;
}

.toolbar-row-secondary {
    opacity: 0.65;
    padding: 0.25rem 0.5rem;
}

.toolbar-row-secondary:hover {
    opacity: 1;
}

.toolbar-row-secondary .btn {
    font-size: 0.55rem;
    padding: 0.25rem 0.6rem;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0;
}

/* Labeled groups with category tag */
.toolbar-group-labeled {
    position: relative;
    margin-right: 1rem;
    padding: 0.25rem 0.5rem 0.15rem;
    border-left: 1px solid rgba(0, 255, 0, 0.1);
}

.toolbar-group-labeled:first-child {
    border-left: none;
    padding-left: 0;
}

.toolbar-group-tag {
    position: absolute;
    top: -0.35rem;
    left: 0.3rem;
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    pointer-events: none;
}

.toolbar-fill {
    flex: 1;
}

.btn-mode-toggle {
    border-color: rgba(255, 255, 0, 0.3) !important;
    color: #ffff00 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0.1em;
}

.btn-mode-toggle:hover, .btn-mode-toggle.active {
    background: rgba(255, 255, 0, 0.1) !important;
    text-shadow: 0 0 6px #ffff00;
}

.toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(0, 255, 0, 0.08);
    margin: 0 0.4rem;
}

.toolbar-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-right: 0.1rem;
}

/* Producer panel */
.btn-producer {
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
    background: rgba(0, 255, 0, 0.06);
    font-weight: bold;
}
.btn-producer:hover, .btn-producer.active {
    background: rgba(0, 255, 0, 0.12);
    text-shadow: 0 0 8px #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
}

.producer-panel {
    flex-direction: column;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 150, 0, 0.12);
    margin-bottom: 0.5rem;
    max-height: 350px;
}

.producer-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 270px;
}

.producer-msg { font-size: 0.7rem; padding: 0.3rem 0.5rem; max-width: 95%; }
.producer-msg-user { background: rgba(255, 150, 0, 0.06); color: #ff9600; align-self: flex-end; border-left: 2px solid rgba(255, 150, 0, 0.3); }
.producer-msg-producer { background: rgba(0, 0, 0, 0.5); color: #00ff00; align-self: flex-start; border-left: 2px solid rgba(255, 150, 0, 0.15); }
.producer-msg-error { color: #ff0000; align-self: flex-start; }
.producer-msg-loading, .producer-loading { color: rgba(255, 150, 0, 0.3); animation: glow-pulse 1s infinite; }

.producer-text { margin-bottom: 0.3rem; line-height: 1.5; }
.producer-code { font-family: 'NimbusMono', monospace; font-size: 0.65rem; background: rgba(255, 150, 0, 0.04); padding: 0.3rem; margin: 0.2rem 0; white-space: pre-wrap; word-break: break-all; }
.producer-actions { display: flex; gap: 0.3rem; margin-top: 0.2rem; }
.producer-play-btn { border-color: rgba(255, 150, 0, 0.4) !important; color: #ff9600 !important; font-size: 0.6rem !important; }
.producer-play-btn:hover { background: rgba(255, 150, 0, 0.15) !important; }
.producer-blocks { display: flex; flex-direction: column; gap: 0.2rem; margin: 0.3rem 0; }
.producer-block-item { border-left: 2px solid rgba(255, 150, 0, 0.1); padding-left: 0.4rem; }
.producer-block-name { font-family: 'OCR-A', monospace; font-size: 0.5rem; color: rgba(255, 150, 0, 0.5); text-transform: uppercase; }
.producer-docs { font-size: 0.5rem; color: rgba(255, 150, 0, 0.2); margin-top: 0.2rem; }

.producer-input-row { display: flex; gap: 0.3rem; padding: 0.3rem 0.4rem; border-top: 1px solid rgba(255, 150, 0, 0.06); }
.producer-input { flex: 1; background: rgba(0,0,0,0.5); border: 1px solid rgba(255,150,0,0.12); color: #ff9600; font-family: 'NimbusMono', monospace; font-size: 0.7rem; padding: 0.25rem 0.4rem; outline: none; }
.producer-input:focus { border-color: rgba(255,150,0,0.4); }
.producer-input::placeholder { color: rgba(255,150,0,0.45); font-size: 0.6rem; }
.producer-send { background: none; border: 1px solid rgba(255,150,0,0.25); color: #ff9600; font-family: 'OCR-A', monospace; font-size: 0.6rem; padding: 0.2rem 0.5rem; cursor: pointer; }
.producer-send:hover { background: rgba(255,150,0,0.1); }
.producer-inspire-btn { background: none; border: 1px solid rgba(255,0,255,0.25); color: #ff00ff; font-family: 'OCR-A', monospace; font-size: 0.55rem; padding: 0.2rem 0.4rem; cursor: pointer; letter-spacing: 0.05em; }
.producer-inspire-btn:hover { background: rgba(255,0,255,0.1); text-shadow: 0 0 6px #ff00ff; }
.producer-midi-btn { background: none; border: 1px solid rgba(0,200,255,0.25); color: #00c8ff; font-family: 'OCR-A', monospace; font-size: 0.55rem; padding: 0.2rem 0.4rem; cursor: pointer; }
.producer-midi-btn:hover { background: rgba(0,200,255,0.1); text-shadow: 0 0 6px #00c8ff; }

/* Chopper */
.btn-chopper { border-color: rgba(0, 255, 0, 0.15); color: rgba(0, 255, 0, 0.5); }
.btn-chopper:hover { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }

.btn-find-sound { border-color: rgba(0, 200, 200, 0.3); color: #00c8c8; }
.btn-find-sound:hover { background: rgba(0, 200, 200, 0.1); text-shadow: 0 0 6px #00c8c8; }

.audition-search-row { display: flex; gap: 0.3rem; margin-bottom: 0.4rem; }
.audition-search { flex: 1; background: rgba(0,0,0,0.5); border: 1px solid rgba(0,200,255,0.15); color: #00c8ff; font-family: 'NimbusMono', monospace; font-size: 0.7rem; padding: 0.3rem 0.5rem; outline: none; }
.audition-search:focus { border-color: rgba(0,200,255,0.4); }
.audition-search::placeholder { color: rgba(0,200,255,0.25); }
.audition-search-btn { border-color: rgba(0,200,255,0.3) !important; color: #00c8ff !important; font-size: 0.6rem !important; }

.chopper-panel { background: rgba(0,0,0,0.8); border: 1px solid rgba(255,100,255,0.12); padding: 0.5rem; margin-bottom: 0.5rem; }
.chopper-header { margin-bottom: 0.4rem; }
.chopper-title { font-family: 'OCR-A', monospace; font-size: 0.65rem; color: #ff64ff; letter-spacing: 0.15em; }
.chopper-upload-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.chopper-upload-btn { border-color: rgba(255,100,255,0.3) !important; color: #ff64ff !important; cursor: pointer; }
.chopper-hint { font-size: 0.55rem; color: rgba(255,100,255,0.3); }
/* Waveform viewer */
.chopper-waveform-wrap {
    position: relative;
    height: 80px;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,100,255,0.1);
    margin-bottom: 0.4rem;
    cursor: crosshair;
    overflow: hidden;
}

.chopper-waveform {
    width: 100%;
    height: 100%;
    display: block;
}

.chopper-sel-overlay {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(255,100,255,0.08);
    border-left: 2px solid #ff64ff;
    border-right: 2px solid #ff64ff;
    pointer-events: none;
}

.chopper-handle {
    position: absolute;
    top: 0;
    width: 12px;
    height: 100%;
    cursor: ew-resize;
    z-index: 5;
}

.chopper-handle::after {
    content: '';
    position: absolute;
    top: 0;
    left: 5px;
    width: 2px;
    height: 100%;
    background: #ff64ff;
    box-shadow: 0 0 6px #ff64ff;
}

.chopper-handle-start { margin-left: -6px; }
.chopper-handle-end { margin-left: -6px; }

.chopper-handle:hover::after {
    width: 4px;
    left: 4px;
    box-shadow: 0 0 12px #ff64ff;
}

.chopper-time-labels {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 4px;
    pointer-events: none;
}

.chopper-time-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(255,100,255,0.5);
    background: rgba(0,0,0,0.7);
    padding: 0 3px;
}

.chopper-preview-btn {
    border-color: rgba(255,100,255,0.3) !important;
    color: #ff64ff !important;
    font-size: 0.55rem !important;
}

.chopper-controls { margin-bottom: 0.5rem; }
.chopper-row { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.3rem; flex-wrap: wrap; }
.chopper-label { font-family: 'OCR-A', monospace; font-size: 0.5rem; color: rgba(255,100,255,0.4); }
.chopper-input { font-family: 'NimbusMono', monospace; font-size: 0.65rem; width: 55px; background: none; border: 1px solid rgba(255,100,255,0.15); color: #ff64ff; text-align: center; padding: 0.15rem; outline: none; -moz-appearance: textfield; }
.chopper-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.chopper-check-label { font-family: 'OCR-A', monospace; font-size: 0.5rem; color: rgba(255,100,255,0.5); display: flex; align-items: center; gap: 0.2rem; }
.chopper-go { border-color: rgba(255,100,255,0.4) !important; color: #ff64ff !important; }
.chopper-status { font-size: 0.55rem; color: rgba(255,100,255,0.5); }

.chopper-results { margin-top: 0.3rem; }
.chopper-pack-info { font-family: 'OCR-A', monospace; font-size: 0.55rem; color: rgba(255,100,255,0.4); margin-bottom: 0.3rem; }
.chopper-pack-name { color: #ff64ff; }

.chopper-samples-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 0.2rem; max-height: 200px; overflow-y: auto; }
.chopper-sample { background: rgba(255,100,255,0.03); border: 1px solid rgba(255,100,255,0.08); padding: 0.3rem; cursor: pointer; }
.chopper-sample:hover { border-color: #ff64ff; background: rgba(255,100,255,0.08); }
.chopper-sample-name { font-family: 'NimbusMono', monospace; font-size: 0.6rem; color: #ff64ff; }
.chopper-sample-info { font-size: 0.5rem; color: rgba(255,100,255,0.3); }
.chopper-sample-code { font-size: 0.5rem; color: rgba(0,255,0,0.4); margin-top: 0.1rem; }
.chopper-usage { font-size: 0.5rem; color: rgba(255,100,255,0.3); margin-top: 0.3rem; }

/* Status bar */
.status-bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0;
    border-top: 1px solid rgba(0, 255, 0, 0.04);
    margin-top: 0.2rem;
}

.btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
    background: none;
    color: #00ff00;
    letter-spacing: 0.05em;
}

.btn:hover {
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 6px #00ff00;
}

.btn-play-all {
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.06);
    font-size: 0.8rem !important;
    padding: 0.35rem 0.9rem !important;
}
.btn-stop { border-color: rgba(255, 0, 0, 0.3); color: #ff0000; }
.btn-stop:hover { background: rgba(255, 0, 0, 0.1); text-shadow: 0 0 6px #ff0000; }

.btn-panic {
    border-color: #ff0000;
    color: #ff0000;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-shadow: 0 0 4px rgba(255, 0, 0, 0.3);
    font-size: 0.7rem !important;
    padding: 0.35rem 0.9rem !important;
}

.btn-panic:hover {
    background: rgba(255, 0, 0, 0.2);
    text-shadow: 0 0 10px #ff0000;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.2);
}

.panic-flash {
    animation: panic-flash-anim 0.3s ease-out;
}

@keyframes panic-flash-anim {
    0% { background-color: rgba(255, 0, 0, 0.3); }
    100% { background-color: #000; }
}
.btn-new { border-color: rgba(255, 255, 255, 0.2); color: #ffffff; }
.btn-new:hover { background: rgba(255, 255, 255, 0.08); }
.btn-add { border-color: rgba(0, 255, 0, 0.15); opacity: 0.5; }
.btn-add:hover { opacity: 1; }

.btn-ai-add { border-color: rgba(0, 255, 0, 0.3); color: #00ff00; }
.btn-ai-add:hover { background: rgba(0, 255, 0, 0.08); text-shadow: 0 0 8px #00ff00; }

.btn-imagine { border-color: rgba(0, 255, 0, 0.2); color: rgba(0, 255, 0, 0.6); }
.btn-imagine:hover { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }

.btn-evolve { border-color: rgba(0, 255, 0, 0.15); color: rgba(0, 255, 0, 0.5); }
.btn-evolve:hover { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }
.btn-evolve-mod { border-color: rgba(0, 255, 0, 0.2); color: rgba(0, 255, 0, 0.5); }
.btn-evolve-mod:hover { background: rgba(0, 255, 0, 0.08); text-shadow: 0 0 6px #00ff00; color: #00ff00; }
.btn-evolve-big { border-color: rgba(0, 255, 0, 0.25); color: rgba(0, 255, 0, 0.5); }
.btn-evolve-big:hover { background: rgba(0, 255, 0, 0.1); text-shadow: 0 0 8px #00ff00; color: #00ff00; }

.preset-select {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    padding: 0.25rem 0.4rem;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.15);
    border-radius: 0;
    color: #00ff00;
    cursor: pointer;
    outline: none;
}

.preset-select option {
    background: #000;
    color: #00ff00;
}

.btn-save { border-color: rgba(0, 255, 0, 0.15); opacity: 0.5; }
.btn-save:hover { opacity: 1; }
.btn-manage { border-color: rgba(0, 255, 0, 0.15); opacity: 0.5; }
.btn-manage:hover { opacity: 1; }

/* Preset Manager */
.preset-manager {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 255, 0, 0.08);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.preset-manager-title {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
}

.preset-manager-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.preset-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.2rem 0.4rem;
    border-left: 2px solid rgba(0, 255, 0, 0.1);
}

.preset-row:hover {
    border-left-color: #00ff00;
    background: rgba(0, 255, 0, 0.03);
}

.preset-row-name {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 0, 0.6);
    cursor: pointer;
    flex: 1;
}

.preset-row-name:hover {
    color: #00ff00;
}

.preset-del-btn {
    font-size: 0.6rem;
    background: none;
    border: 1px solid rgba(255, 0, 0, 0.15);
    color: rgba(255, 0, 0, 0.4);
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.preset-del-btn:hover { border-color: #ff0000; color: #ff0000; }

.preset-empty {
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.2);
    padding: 0.3rem;
}
.btn-upload { border-color: rgba(0, 255, 0, 0.15); opacity: 0.5; cursor: pointer; }
.btn-upload:hover { opacity: 1; }

/* Scene/Song buttons */
.btn-scenes { border-color: rgba(0, 255, 0, 0.2); color: rgba(0, 255, 0, 0.6); }
.btn-scenes:hover, .btn-scenes.active { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }

.btn-audition { border-color: rgba(0, 255, 0, 0.15); color: rgba(0, 255, 0, 0.5); }
.btn-audition:hover, .btn-audition.active { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }

.btn-analyze { border-color: rgba(0, 255, 0, 0.15); color: rgba(0, 255, 0, 0.5); cursor: pointer; }
.btn-analyze:hover { background: rgba(0, 255, 0, 0.06); text-shadow: 0 0 6px #00ff00; color: #00ff00; }

/* Import button + dropdown */
.import-wrap {
    position: relative;
    display: inline-flex;
}

.btn-import {
    border-color: rgba(0, 255, 0, 0.2);
    cursor: pointer;
}

.btn-import:hover {
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
}

.import-menu {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 200;
    flex-direction: column;
    gap: 1px;
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid rgba(0, 255, 0, 0.15);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.7);
    min-width: 180px;
    margin-bottom: 4px;
}

.import-option {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0.6rem;
    cursor: pointer;
    transition: background 0.1s;
}

.import-option:hover {
    background: rgba(0, 255, 0, 0.06);
}

.import-option-title {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    letter-spacing: 0.05em;
}

.import-option-desc {
    font-family: 'NimbusMono', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.35);
    margin-top: 0.1rem;
}

.btn-snippets { border-color: rgba(0, 255, 0, 0.25); }
.btn-snippets:hover, .btn-snippets.active { background: rgba(0, 255, 0, 0.1); text-shadow: 0 0 6px #00ff00; }

/* Scenes Panel */
.scenes-panel {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(255, 100, 0, 0.1);
    padding: 0.5rem;
    margin-bottom: 0.5rem;
}

.scenes-title {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #ff6400;
    letter-spacing: 0.15em;
}

.scenes-header {
    margin-bottom: 0.4rem;
}

.scenes-explainer {
    font-size: 0.55rem;
    color: rgba(255, 100, 0, 0.35);
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.scenes-add {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 100, 0, 0.06);
}

.scene-template-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    background: none;
    border: 1px solid rgba(255, 100, 0, 0.15);
    color: rgba(255, 100, 0, 0.5);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    border-radius: 0;
}

.scene-template-btn:hover {
    border-color: #ff6400;
    color: #ff6400;
}

.scene-ai {
    border-color: rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.5);
}

.scene-ai:hover {
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

.scene-list {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.scene-empty {
    font-size: 0.55rem;
    color: rgba(255, 100, 0, 0.3);
    padding: 0.3rem;
}

.scene-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.4rem;
    border-left: 2px solid rgba(255, 100, 0, 0.1);
}

.scene-active {
    border-left-color: #ff6400;
    background: rgba(255, 100, 0, 0.04);
}

.scene-num {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: rgba(255, 100, 0, 0.4);
    width: 16px;
}

.scene-active .scene-num {
    color: #ff6400;
    text-shadow: 0 0 4px #ff6400;
}

.scene-name {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: rgba(255, 100, 0, 0.7);
    flex: 1;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.scene-info {
    font-size: 0.5rem;
    color: rgba(255, 100, 0, 0.3);
}

.scenes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.4rem;
}

.scenes-header-btns {
    display: flex;
    gap: 0.2rem;
}

.scenes-seq-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 100, 0, 0.06);
}

.scene-seq-info {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(255, 100, 0, 0.4);
}

.scene-sequencing {
    border-left-color: #ff6400 !important;
    background: rgba(255, 100, 0, 0.06) !important;
    animation: scene-pulse 0.5s ease-in-out infinite;
}

@keyframes scene-pulse {
    0%, 100% { box-shadow: inset 0 0 5px rgba(255, 100, 0, 0.05); }
    50% { box-shadow: inset 0 0 15px rgba(255, 100, 0, 0.1); }
}

.scene-dur-input {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    width: 30px;
    background: none;
    border: 1px solid rgba(255, 100, 0, 0.15);
    color: #ff6400;
    text-align: center;
    padding: 0.1rem;
    outline: none;
    -moz-appearance: textfield;
}

.scene-dur-input::-webkit-inner-spin-button,
.scene-dur-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.scene-dur-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(255, 100, 0, 0.3);
}

.scene-move-btn {
    font-size: 0.55rem;
    background: none;
    border: 1px solid rgba(255, 100, 0, 0.1);
    color: rgba(255, 100, 0, 0.3);
    width: 18px;
    height: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.scene-move-btn:hover { border-color: #ff6400; color: #ff6400; }

.scene-play-btn, .scene-del-btn {
    font-size: 0.6rem;
    background: none;
    border: 1px solid rgba(255, 100, 0, 0.15);
    color: rgba(255, 100, 0, 0.4);
    width: 20px;
    height: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.scene-play-btn:hover { border-color: #ff6400; color: #ff6400; }
.scene-del-btn:hover { border-color: #ff0000; color: #ff0000; }

/* Sound Audition Panel */
.audition-panel {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 90vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.97);
    border: none;
    border-left: 1px solid rgba(0, 255, 0, 0.25);
    padding: 0;
    margin: 0;
    z-index: 500;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.6), -1px 0 12px rgba(0, 255, 0, 0.06);
    animation: audition-slide-in 0.2s ease-out;
}

@keyframes audition-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* Header inside the drawer */
.audition-panel::before {
    content: 'BROWSE SOUNDS';
    display: block;
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    color: #00ff00;
    letter-spacing: 0.2em;
    padding: 0.8rem 1rem 0.6rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
    flex-shrink: 0;
}

/* Close button (floating in top-right of drawer) */
.audition-close {
    position: absolute;
    top: 0.6rem;
    right: 0.8rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.5);
    font-size: 0.9rem;
    width: 24px;
    height: 24px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.audition-close:hover {
    color: #ff3333;
    border-color: rgba(255, 50, 50, 0.5);
}

.audition-info {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.35);
    padding: 0.5rem 1rem 0.3rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    flex-shrink: 0;
}

.audition-search-row {
    display: flex;
    gap: 0.3rem;
    padding: 0 1rem 0.5rem;
    flex-shrink: 0;
}

.audition-search {
    flex: 1;
}

/* Tabs: grouped into semantic sections inside the drawer */
.sample-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 1rem 0.8rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.08);
    margin: 0;
    max-height: 40vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.sample-tabs-section {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sample-tabs-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.3);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sample-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* Grid: scrollable area below tabs, fills remaining space */
.audition-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.25rem;
    padding: 0.6rem 1rem 1rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

/* Scrollbars inside drawer */
.audition-panel::-webkit-scrollbar,
.audition-grid::-webkit-scrollbar,
.sample-tabs::-webkit-scrollbar { width: 4px; }
.audition-panel::-webkit-scrollbar-thumb,
.audition-grid::-webkit-scrollbar-thumb,
.sample-tabs::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.15); }

.audition-btn {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.55);
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
    border-radius: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.audition-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.06);
}

.audition-btn.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
}

.btn-samples { border-color: rgba(0, 255, 0, 0.15); }
.btn-samples:hover, .btn-samples.active { background: rgba(0, 255, 0, 0.1); }

/* AI button in block header */
.block-btn-ai {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.1rem 0.4rem;
    border-color: rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.55);
    letter-spacing: 0.05em;
}

.block-btn-ai:hover {
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
    background: rgba(0, 255, 0, 0.06);
}

.block-btn-ai.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.08);
}

.block-btn-ai:disabled {
    opacity: 0.4;
    cursor: wait;
}

/* Custom AI dropdown — grid layout */
.ai-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid rgba(0, 255, 0, 0.2);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.8), 0 0 12px rgba(0, 255, 0, 0.05);
    padding: 0.5rem;
    max-height: 70vh;
    overflow-y: auto;
}

.ai-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 0.1rem 0.6rem;
}

.ai-dropdown-group {
    min-width: 100px;
}

.ai-dropdown-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.3rem 0.4rem 0.15rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.08);
    margin-bottom: 0.1rem;
}

.ai-dropdown-item {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: rgba(0, 255, 0, 0.6);
    font-family: 'NimbusMono', 'Courier New', monospace;
    font-size: 0.55rem;
    padding: 0.25rem 0.4rem;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s, color 0.1s;
}

.ai-dropdown-item:hover {
    background: rgba(0, 255, 0, 0.06);
    color: #00ff00;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

/* Dropdown scrollbar */
.ai-dropdown::-webkit-scrollbar { width: 3px; }
.ai-dropdown::-webkit-scrollbar-track { background: transparent; }
.ai-dropdown::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.15); }

/* Legacy select (remove if still referenced) */
.ai-action-select { display: none; }

/* Snippets panel */
.snippets-panel {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 255, 0, 0.08);
    padding: 0.4rem;
    margin-bottom: 0.5rem;
}

.snippets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.25rem;
}

.snippet-btn {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: rgba(0, 255, 0, 0.6);
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    padding: 0.35rem 0.4rem;
    cursor: pointer;
    transition: all 0.1s;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.snippet-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.05);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.btn-ai { border-color: rgba(0, 255, 0, 0.15); }
.btn-ai:hover, .btn-ai.active { background: rgba(0, 255, 0, 0.1); }

/* AI Chat Panel */
.chat-panel {
    flex-direction: column;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 255, 0, 0.08);
    border-radius: 0;
    margin-bottom: 0.5rem;
    max-height: 280px;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: 200px;
}

.chat-msg {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0;
    max-width: 90%;
}

.chat-msg-user {
    background: rgba(0, 255, 0, 0.05);
    color: #00ff00;
    align-self: flex-end;
    border-left: 2px solid rgba(0, 255, 0, 0.3);
}

.chat-msg-ai {
    background: rgba(0, 0, 0, 0.5);
    color: #00ff00;
    align-self: flex-start;
    border-left: 2px solid rgba(0, 255, 0, 0.1);
}

.chat-msg-warning {
    background: none;
    color: rgba(255, 200, 0, 0.7);
    align-self: flex-start;
    font-size: 0.6rem;
}

.chat-msg-error {
    background: none;
    color: #ff0000;
    align-self: flex-start;
}

.chat-msg-loading {
    color: rgba(0, 255, 0, 0.2);
    align-self: flex-start;
    animation: glow-pulse 1s ease-in-out infinite;
}

.chat-code {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    background: rgba(0, 255, 0, 0.03);
    padding: 0.3rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.chat-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.chat-action-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.1rem 0.4rem;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.5);
    cursor: pointer;
}

.chat-action-btn:hover { border-color: #00ff00; color: #00ff00; }
.chat-action-play { border-color: rgba(0, 255, 0, 0.3); color: #00ff00; }

.chat-input-row {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid rgba(0, 255, 0, 0.05);
}

.chat-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0;
    color: #00ff00;
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    outline: none;
}

.chat-input:focus { border-color: rgba(0, 255, 0, 0.4); }
.chat-input::placeholder { color: rgba(0, 255, 0, 0.15); }

.chat-send {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0;
    color: #00ff00;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
}

.chat-send:hover { background: rgba(0, 255, 0, 0.1); }

/* Coach Panel */
.coach-panel {
    flex-direction: column;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 0;
    margin-bottom: 0.5rem;
    max-height: 360px;
}

.coach-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.08);
}

.coach-title {
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 255, 0.6);
    letter-spacing: 0.1em;
}

.coach-badge {
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    border-radius: 0;
    letter-spacing: 0.05em;
}

.coach-badge-beginner {
    background: rgba(0, 255, 255, 0.08);
    color: rgba(0, 255, 255, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.15);
}

.coach-badge-intermediate {
    background: rgba(0, 255, 0, 0.08);
    color: rgba(0, 255, 0, 0.6);
    border: 1px solid rgba(0, 255, 0, 0.2);
}

.coach-badge-advanced {
    background: rgba(255, 0, 255, 0.08);
    color: rgba(255, 0, 255, 0.6);
    border: 1px solid rgba(255, 0, 255, 0.2);
}

.coach-reset-btn {
    margin-left: auto;
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.5rem;
    padding: 0.1rem 0.3rem;
    background: none;
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 0;
    color: rgba(0, 255, 255, 0.3);
    cursor: pointer;
}

.coach-reset-btn:hover {
    border-color: rgba(0, 255, 255, 0.4);
    color: rgba(0, 255, 255, 0.7);
}

.coach-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 260px;
}

.coach-msg {
    font-size: 0.7rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0;
    max-width: 95%;
}

.coach-msg-user {
    background: rgba(0, 255, 255, 0.04);
    color: #00ffff;
    align-self: flex-end;
    border-left: 2px solid rgba(0, 255, 255, 0.25);
}

.coach-msg-assistant {
    background: rgba(0, 0, 0, 0.4);
    color: #00ff00;
    align-self: flex-start;
    border-left: 2px solid rgba(0, 255, 255, 0.15);
    width: 95%;
}

.coach-msg-error {
    background: none;
    color: #ff0000;
    align-self: flex-start;
}

.coach-msg-loading {
    color: rgba(0, 255, 255, 0.25);
    align-self: flex-start;
    animation: glow-pulse 1s ease-in-out infinite;
}

.coach-msg-hint {
    background: rgba(0, 255, 255, 0.04);
    color: rgba(0, 255, 255, 0.7);
    align-self: flex-start;
    border-left: 2px solid rgba(0, 255, 255, 0.3);
    font-style: italic;
}

.coach-lesson-tag {
    display: inline-block;
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.06);
    padding: 0.05rem 0.25rem;
    margin-bottom: 0.2rem;
    border: 1px solid rgba(0, 255, 255, 0.1);
    letter-spacing: 0.08em;
}

.coach-text {
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #00ff00;
    margin: 0.2rem 0;
    white-space: pre-wrap;
}

.coach-code-wrap {
    margin: 0.3rem 0;
    background: rgba(0, 255, 0, 0.02);
    border: 1px solid rgba(0, 255, 255, 0.08);
    border-radius: 0;
}

.coach-code {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: #00ffff;
    padding: 0.3rem 0.4rem;
    margin: 0;
    white-space: pre-wrap;
    word-break: break-all;
}

.coach-try-btn {
    display: block;
    width: 100%;
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.6rem;
    padding: 0.25rem;
    background: rgba(0, 255, 255, 0.06);
    border: none;
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 0;
    color: #00ffff;
    cursor: pointer;
    letter-spacing: 0.15em;
    text-align: center;
}

.coach-try-btn:hover {
    background: rgba(0, 255, 255, 0.15);
    color: #ffffff;
}

.coach-challenge {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 255, 0.7);
    background: rgba(0, 255, 255, 0.03);
    border-left: 2px solid rgba(0, 255, 255, 0.25);
    padding: 0.25rem 0.4rem;
    margin-top: 0.2rem;
    font-style: italic;
}

.coach-input-row {
    display: flex;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border-top: 1px solid rgba(0, 255, 255, 0.06);
}

.coach-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 0;
    color: #00ffff;
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    padding: 0.25rem 0.4rem;
    outline: none;
}

.coach-input:focus { border-color: rgba(0, 255, 255, 0.4); }
.coach-input::placeholder { color: rgba(0, 255, 255, 0.12); }

.coach-send {
    background: none;
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 0;
    color: #00ffff;
    font-size: 0.75rem;
    padding: 0.15rem 0.5rem;
    cursor: pointer;
}

.coach-send:hover { background: rgba(0, 255, 255, 0.1); }

.coach-next-btn {
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    background: none;
    border: 1px solid rgba(0, 255, 255, 0.12);
    border-radius: 0;
    color: rgba(0, 255, 255, 0.4);
    cursor: pointer;
    letter-spacing: 0.05em;
}

.coach-next-btn:hover {
    border-color: rgba(0, 255, 255, 0.4);
    color: #00ffff;
}

.coach-hint-btn {
    font-family: 'OCR-A', 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    background: rgba(0, 255, 255, 0.04);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 0;
    color: rgba(0, 255, 255, 0.5);
    cursor: pointer;
    letter-spacing: 0.05em;
}

.coach-hint-btn:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
}

.btn-coach {
    color: rgba(0, 255, 0, 0.5);
    border-color: rgba(0, 255, 0, 0.15);
}

.btn-coach:hover {
    background: rgba(0, 255, 0, 0.06);
    border-color: rgba(0, 255, 0, 0.3);
    color: #00ff00;
}

/* Sample Browser */
#sample-browser {
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid rgba(0, 255, 0, 0.08);
    border-radius: 0;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
}

.sample-tabs {
    display: flex;
    gap: 0.2rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.04);
}

.sample-tab {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.08);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.4);
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.15rem 0.4rem;
    cursor: pointer;
    transition: all 0.15s;
}

.sample-tab:hover { border-color: #00ff00; color: #00ff00; }
.sample-tab.active { border-color: #00ff00; color: #00ff00; background: rgba(0, 255, 0, 0.05); }

.sample-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 0.2rem;
}

.sample-btn {
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.06);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.5);
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    padding: 0.25rem 0.3rem;
    cursor: pointer;
    transition: all 0.1s;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sample-btn:hover { border-color: #00ff00; color: #00ff00; background: rgba(0, 255, 0, 0.05); }

/* Shortcuts bar */
.shortcuts-bar {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    padding: 0.3rem 0;
}

.shortcut-hint {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.15);
}

.btn-help {
    font-size: 0.55rem;
    padding: 0.2rem 0.5rem;
    border-color: rgba(0, 255, 0, 0.2);
    opacity: 0.5;
}

.btn-help:hover { opacity: 1; }

/* Glossary */
.glossary-panel {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid rgba(0, 255, 0, 0.1);
    padding: 1rem;
    margin-bottom: 0.5rem;
    max-height: 60vh;
    overflow-y: auto;
}

.glossary-section {
    margin-bottom: 1rem;
}

.glossary-section h3 {
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    color: #00ff00;
    letter-spacing: 0.15em;
    margin-bottom: 0.6rem;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

.glossary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.8rem;
}

.glossary-group h4 {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.4);
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
}

.g-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.6rem;
    padding: 0.1rem 0;
    color: rgba(0, 255, 0, 0.5);
}

.g-key {
    font-family: 'NimbusMono', monospace;
    color: #00ff00;
    white-space: nowrap;
}

/* Parameter Inspector */
.param-inspector {
    position: fixed;
    z-index: 100;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(0, 255, 0, 0.2);
    padding: 0.5rem 0.7rem;
    min-width: 200px;
    max-width: 350px;
    font-family: 'NimbusMono', monospace;
}

.pi-header {
    font-family: 'OCR-A', monospace;
    font-size: 0.65rem;
    color: #00ff00;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.pi-range {
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.4);
    margin-bottom: 0.3rem;
}

.pi-info {
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.35);
    margin-bottom: 0.3rem;
}

.pi-slider-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.pi-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(0, 255, 0, 0.15);
    outline: none;
    border-radius: 0;
}

.pi-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 0;
    background: #00ff00;
    cursor: pointer;
    box-shadow: 0 0 6px #00ff00;
}

.pi-val {
    font-size: 0.6rem;
    color: #00ff00;
    min-width: 45px;
    text-align: right;
}

.pi-values {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

.pi-value-btn {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.5);
    padding: 0.1rem 0.35rem;
    cursor: pointer;
    border-radius: 0;
}

.pi-value-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
}

.pi-value-btn.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
}

.pi-sound-swap {
    margin-top: 0.3rem;
    max-height: 250px;
    overflow-y: auto;
}

.pi-cat-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 0.25rem;
    margin-bottom: 0.1rem;
}

.pi-cat-sounds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    margin-bottom: 0.2rem;
}

.pi-sound-btn {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.1);
    color: rgba(0, 255, 0, 0.5);
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    border-radius: 0;
}

.pi-sound-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.05);
}

.pi-sound-btn.active {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 4px #00ff00;
}

/* Output log */
.output {
    padding: 0.2rem 0;
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Command Palette */
.cmd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    padding-top: 15vh;
}

.cmd-palette {
    width: 420px;
    max-height: 400px;
    background: rgba(5, 5, 5, 0.98);
    border: 1px solid rgba(0, 255, 0, 0.25);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(0, 255, 0, 0.08);
    display: flex;
    flex-direction: column;
    animation: panel-reveal 0.15s ease-out;
}

.cmd-input {
    font-family: 'NimbusMono', monospace;
    font-size: 0.75rem;
    padding: 0.7rem 0.8rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0, 255, 0, 0.12);
    color: #00ff00;
    outline: none;
    letter-spacing: 0.03em;
}

.cmd-input::placeholder {
    color: rgba(0, 255, 0, 0.25);
}

.cmd-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.2rem 0;
}

.cmd-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    transition: background 0.08s;
}

.cmd-item:hover,
.cmd-item.selected {
    background: rgba(0, 255, 0, 0.06);
}

.cmd-item.selected {
    border-left: 2px solid #00ff00;
}

.cmd-item-name {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 0, 0.7);
}

.cmd-item.selected .cmd-item-name {
    color: #00ff00;
}

.cmd-item-keys {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.25);
    letter-spacing: 0.05em;
}

.cmd-list::-webkit-scrollbar { width: 3px; }
.cmd-list::-webkit-scrollbar-track { background: transparent; }
.cmd-list::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.15); }

/* Panel open animation */
.producer-panel,
.snippets-panel,
.coach-panel,
.audition-panel,
.chopper-panel,
.scenes-panel,
.glossary-panel,
.mixer-panel,
.loop-builder-panel,
.preset-manager {
    animation: panel-reveal 0.2s ease-out;
}

@keyframes panel-reveal {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Performance Mode */
.perform-mode { padding: 0.5rem; }
.perform-mode .container { max-width: 100%; }
.perform-mode .dev-only { display: none !important; }
.perform-mode .block-editor .cm-content { font-size: 1.1rem; }
.perform-mode .block-ai-actions { display: none; }
.perform-mode .block-btn-remove { display: none; }
.perform-mode #matrix-rain { opacity: 0.25; }

/* Audio Recorder */
.btn-record {
    font-family: 'OCR-A', monospace;
    background: none;
    border: 1px solid rgba(255, 0, 0, 0.3);
    color: rgba(255, 0, 0, 0.6);
    font-size: 0.6rem;
    letter-spacing: 0.15em;
    padding: 0.25rem 0.6rem;
    cursor: pointer;
    border-radius: 0;
}

.btn-record:hover {
    border-color: #ff0000;
    color: #ff0000;
    text-shadow: 0 0 6px rgba(255, 0, 0, 0.5);
}

.btn-record.recording {
    background: rgba(255, 0, 0, 0.15);
    border-color: #ff0000;
    color: #ff0000;
    text-shadow: 0 0 8px #ff0000;
    animation: record-pulse 1s ease-in-out infinite;
}

.record-indicator {
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 0;
    box-shadow: 0 0 6px #ff0000;
    animation: record-pulse 1s ease-in-out infinite;
}

.record-duration {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #ff0000;
    text-shadow: 0 0 4px rgba(255, 0, 0, 0.3);
}

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

/* Mixer Panel */
.btn-mixer {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
}

.btn-mixer.active {
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 8px #00ff00;
}

.mixer-panel {
    display: flex;
    flex-direction: row;
    gap: 2px;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0;
    margin-bottom: 0.75rem;
    overflow-x: auto;
}

.mixer-empty {
    color: rgba(0, 255, 0, 0.3);
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    padding: 1rem;
}

.mixer-strip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    background: rgba(0, 255, 0, 0.02);
    border: 1px solid rgba(0, 255, 0, 0.06);
    border-radius: 0;
    min-width: 60px;
    flex-shrink: 0;
}

.mixer-strip-active {
    border-color: rgba(0, 255, 0, 0.2);
    background: rgba(0, 255, 0, 0.04);
}

.mixer-name {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: #00ff00;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60px;
}

.mixer-level-wrap {
    width: 8px;
    height: 60px;
    background: rgba(0, 255, 0, 0.05);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0;
    position: relative;
    overflow: hidden;
}

.mixer-level-bar {
    width: 100%;
    height: 100%;
    position: relative;
}

.mixer-level-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #00ff00;
    box-shadow: 0 0 4px #00ff00;
    transition: height 0.15s ease-out;
}

.mixer-fader-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.mixer-fader-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.3);
}

.mixer-fader {
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    writing-mode: vertical-lr;
    direction: rtl;
    width: 20px;
    height: 60px;
    background: rgba(0, 255, 0, 0.1);
    border-radius: 0;
    outline: none;
}

.mixer-fader::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 6px;
    background: #00ff00;
    border-radius: 0;
    cursor: pointer;
    box-shadow: 0 0 4px #00ff00;
}

.mixer-fader-value {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.5);
}

.mixer-pan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
}

.mixer-pan-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.3);
}

.mixer-pan-value {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.6);
}

.mixer-btn-wrap {
    display: flex;
    gap: 2px;
}

.mixer-mute-btn, .mixer-solo-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    background: none;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.4);
    padding: 0.1rem 0.3rem;
    cursor: pointer;
    border-radius: 0;
}

.mixer-mute-btn:hover, .mixer-solo-btn:hover {
    border-color: #00ff00;
    color: #00ff00;
}

.mixer-mute-btn.muted {
    background: rgba(255, 0, 0, 0.15);
    border-color: rgba(255, 0, 0, 0.4);
    color: #ff4444;
}

.mixer-solo-btn.soloed {
    background: rgba(255, 255, 0, 0.1);
    border-color: rgba(255, 255, 0, 0.4);
    color: #ffff00;
}

/* Timeline Panel */
.btn-timeline {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
}

.btn-timeline.active {
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 8px #00ff00;
}

.timeline-panel {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0;
    padding: 0.5rem;
    margin-bottom: 0.75rem;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.timeline-title {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    letter-spacing: 0.15em;
}

.timeline-total {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.5);
}

.timeline-empty {
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 0, 0.3);
    padding: 1rem 0;
    text-align: center;
}

.timeline-track {
    display: flex;
    flex-direction: row;
    position: relative;
    min-height: 50px;
    background: rgba(0, 255, 0, 0.02);
    border: 1px solid rgba(0, 255, 0, 0.06);
    border-radius: 0;
    overflow: hidden;
}

.timeline-playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff0000;
    box-shadow: 0 0 6px #ff0000;
    z-index: 5;
    transition: left 0.2s linear;
    pointer-events: none;
}

.timeline-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.3rem 0.2rem;
    border-right: 1px solid rgba(0, 255, 0, 0.1);
    border-left: 2px solid rgba(0, 255, 0, 0.2);
    cursor: pointer;
    transition: background 0.2s;
    min-width: 40px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.timeline-block:hover {
    background: rgba(0, 255, 0, 0.06);
}

.timeline-block-active {
    background: rgba(0, 255, 0, 0.08);
    border-left-width: 3px;
}

.timeline-block-selected {
    outline: 1px dashed #ffff00;
    outline-offset: -2px;
}

.timeline-block-name {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.timeline-block-dur {
    font-family: 'NimbusMono', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.3);
}

.timeline-markers {
    display: flex;
    flex-direction: row;
    margin-top: 2px;
}

.timeline-marker {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.25);
    text-align: left;
    padding-left: 2px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.timeline-instructions {
    font-family: 'NimbusMono', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.2);
    margin-top: 0.3rem;
    text-align: center;
}

/* Undo/Redo buttons */
.block-btn-undo, .block-btn-redo {
    font-size: 0.65rem;
    padding: 0.1rem 0.25rem;
    opacity: 0.35;
    border-radius: 0;
}

.block-btn-undo:hover, .block-btn-redo:hover {
    opacity: 1;
    text-shadow: 0 0 4px #00ff00;
}

/* Session Recorder */
.btn-session-rec {
    font-family: 'OCR-A', monospace;
    background: none;
    border: 1px solid rgba(255, 165, 0, 0.3);
    color: rgba(255, 165, 0, 0.6);
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    border-radius: 0;
}

.btn-session-rec:hover {
    border-color: #ff9900;
    color: #ff9900;
    text-shadow: 0 0 6px rgba(255, 153, 0, 0.5);
}

.btn-session-rec.session-active {
    background: rgba(255, 165, 0, 0.15);
    border-color: #ff9900;
    color: #ff9900;
    text-shadow: 0 0 8px #ff9900;
    animation: session-pulse 1.2s ease-in-out infinite;
}

.session-duration {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: #ff9900;
    text-shadow: 0 0 4px rgba(255, 153, 0, 0.3);
}

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

/* ============================================
   UX OVERHAUL — Visual Hierarchy
   ============================================ */

/* Primary actions: larger, brighter */
.btn-primary {
    font-size: 0.7rem;
    padding: 0.35rem 0.85rem;
    border-width: 1px;
    border-color: rgba(0, 255, 0, 0.4);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.btn-primary:hover {
    border-color: #00ff00;
    text-shadow: 0 0 8px #00ff00;
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
}

/* Secondary actions: normal */
.btn-secondary {
    font-size: 0.6rem;
    padding: 0.3rem 0.7rem;
}

/* Tertiary actions: smaller, dimmer */
.btn-tertiary {
    font-size: 0.55rem;
    padding: 0.25rem 0.55rem;
    opacity: 0.55;
    border-color: rgba(0, 255, 0, 0.1);
}

.btn-tertiary:hover {
    opacity: 1;
}

/* Active panel buttons: bright green background */
.btn.active {
    background: rgba(0, 255, 0, 0.15);
    border-color: #00ff00;
    color: #00ff00;
    text-shadow: 0 0 6px #00ff00;
}

/* Toolbar group labels */
.toolbar-group-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.4rem;
    color: rgba(0, 255, 0, 0.2);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-right: 0.3rem;
    align-self: center;
    white-space: nowrap;
}

/* ============================================
   Contextual Toolbar
   ============================================ */
.toolbar-row-transport {
    margin-bottom: 0.3rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.06);
}

.toolbar-ctx {
    margin-bottom: 0.15rem;
}

.toolbar-row-more {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}

.btn-more-toggle {
    font-size: 0.5rem;
    letter-spacing: 0.15em;
}

.btn-more-toggle.active {
    background: rgba(0, 255, 0, 0.1);
}

.toolbar-more-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem;
}

/* ============================================
   Block "..." More Menu
   ============================================ */
.block-more-wrap {
    position: relative;
    display: inline-flex;
}

.block-btn-more {
    font-size: 0.7rem;
    padding: 0.1rem 0.35rem;
    line-height: 1;
    letter-spacing: 0.1em;
}

.block-btn-play-big {
    font-size: 0.8rem;
    padding: 0.15rem 0.45rem;
}

.block-more-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 100;
    flex-direction: column;
    gap: 1px;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(0, 255, 0, 0.15);
    min-width: 140px;
    padding: 0.2rem 0;
}

.block-more-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.3rem 0.6rem;
    background: none;
    border: none;
    border-radius: 0;
    color: #00ff00;
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    cursor: pointer;
    text-align: left;
    white-space: nowrap;
    transition: background 0.1s;
}

.block-more-item:hover {
    background: rgba(0, 255, 0, 0.1);
}

.block-more-item-danger {
    color: #ff4444;
}

.block-more-item-danger:hover {
    background: rgba(255, 0, 0, 0.1);
}

/* (block-more-ai-wrap removed — AI dropdown now directly in header) */

/* ============================================
   Onboarding Overlay (multi-step welcome)
   ============================================ */
.onboarding-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.onboarding-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
}

.onboarding-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 560px;
    width: 90%;
    padding: 2.5rem 2rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    background: rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.onboarding-rain {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.06;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 255, 0, 0.1) 2px,
        rgba(0, 255, 0, 0.1) 4px
    );
    animation: onboard-scan 4s linear infinite;
}

@keyframes onboard-scan {
    0% { background-position: 0 0; }
    100% { background-position: 0 100px; }
}

.onboarding-steps {
    position: relative;
    min-height: 180px;
}

.onboarding-step-page {
    display: none;
    animation: onboard-fade 0.3s ease;
}

.onboarding-step-page.active {
    display: block;
}

@keyframes onboard-fade {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.onboarding-title {
    font-family: 'NimbusMono', monospace;
    font-size: 1.1rem;
    color: #00ff00;
    letter-spacing: 0.15em;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.4);
}

.onboarding-subtitle {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 0, 0.6);
    line-height: 1.5;
    margin-bottom: 1.2rem;
}

.onboarding-visual {
    margin: 1.5rem 0;
}

.onboarding-glyph {
    font-family: 'NimbusMono', monospace;
    font-size: 3rem;
    color: #00ff00;
    text-shadow: 0 0 20px rgba(0, 255, 0, 0.6), 0 0 40px rgba(0, 255, 0, 0.2);
    animation: glyph-pulse 2s ease-in-out infinite;
}

@keyframes glyph-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; text-shadow: 0 0 30px rgba(0, 255, 0, 0.8), 0 0 60px rgba(0, 255, 0, 0.3); }
}

.onboarding-highlight-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin: 1rem 0;
}

.onboarding-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 0, 0.5);
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
}

.onboarding-label.highlight {
    color: #00ff00;
    border-color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
}

.onboarding-or {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.3);
}

.onboarding-detail {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.4);
    margin-top: 0.8rem;
    line-height: 1.4;
}

.onboarding-code-preview {
    margin: 1rem 0;
    padding: 0.6rem 1rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    background: rgba(0, 0, 0, 0.5);
    display: inline-block;
}

.onboarding-code-preview code {
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    color: #00ff00;
}

.onboarding-examples {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 1rem 0;
    align-items: center;
}

.onboarding-example {
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 0, 0.6);
    font-style: italic;
}

.onboarding-features {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin: 1.2rem 0;
}

.onboarding-feature {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: #00ff00;
    padding: 0.25rem 0.6rem;
    border: 1px solid rgba(0, 255, 0, 0.25);
    letter-spacing: 0.1em;
}

.onboarding-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.onboarding-dots {
    display: flex;
    gap: 0.4rem;
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border: 1px solid rgba(0, 255, 0, 0.3);
    background: transparent;
    display: inline-block;
}

.onboarding-dot.active {
    background: #00ff00;
    border-color: #00ff00;
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.5);
}

.onboarding-btns {
    display: flex;
    gap: 0.5rem;
}

.btn-onboarding-skip,
.btn-onboarding-back,
.btn-onboarding-next {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    padding: 0.35rem 1rem;
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0;
    color: rgba(0, 255, 0, 0.5);
    background: transparent;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}

.btn-onboarding-next {
    border-color: #00ff00;
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
}

.btn-onboarding-skip:hover,
.btn-onboarding-back:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
}

.btn-onboarding-next:hover {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
}

.onboarding-noshow {
    display: block;
    margin-top: 1rem;
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.25);
    cursor: pointer;
}

.onboarding-noshow input {
    margin-right: 0.3rem;
    accent-color: #00ff00;
}

/* ============================================
   Guided Tour
   ============================================ */
/* Tour — styles handled inline by tour.js for simplicity */

/* ============================================
   CSS-Only Contextual Tooltips
   ============================================ */
[data-tooltip] {
    position: relative;
}

[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: #00ff00;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid rgba(0, 255, 0, 0.3);
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 9999;
    line-height: 1.3;
}

[data-tooltip]:hover::after {
    opacity: 1;
}

/* Prevent tooltips from going off-screen on left-aligned items */
.status-bar [data-tooltip]::after,
.toolbar [data-tooltip]:first-child::after {
    left: 0;
    transform: none;
}

/* Header tooltips: show BELOW (not above) since header is at top of viewport */
header [data-tooltip]::after {
    bottom: auto;
    top: calc(100% + 8px);
}

/* Right-aligned header items: anchor to right edge */
.header-right [data-tooltip]::after {
    left: auto;
    right: 0;
    transform: none;
}

/* ============================================
   Help Panel Tabs
   ============================================ */
.help-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
    flex-wrap: wrap;
}

.help-tab {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.3);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}

.help-tab:hover {
    color: rgba(0, 255, 0, 0.6);
}

.help-tab.active {
    color: #00ff00;
    border-bottom-color: #00ff00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

.help-tab-content {
    display: none;
}

.help-tab-content.active {
    display: block;
}

/* Tour button in status bar */
.btn-tour {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.15rem 0.5rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    border-radius: 0;
    background: transparent;
    color: rgba(0, 255, 0, 0.4);
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}

.btn-tour:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.4);
}

/* ================================================
   KEY DETECTION + KEY LOCK
   ================================================ */

.key-display {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    opacity: 0.4;
    transition: opacity 0.3s;
}

.key-label {
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 0, 0.6);
    letter-spacing: 0.1em;
}

.key-value {
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    color: #00ff00;
    text-shadow: 0 0 8px rgba(0, 255, 0, 0.5);
    min-width: 2em;
    text-align: center;
}

.key-select {
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: #00ff00;
    padding: 0.1rem 0.2rem;
    outline: none;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
    min-width: 2.5em;
    text-align: center;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.key-select:focus {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.15);
}

.key-select option {
    background: #000;
    color: #00ff00;
}

.btn-key-lock {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.15rem 0.4rem;
    background: transparent;
    color: rgba(0, 255, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.2);
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}

.btn-key-lock:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
}

.btn-key-lock.active {
    color: #000;
    background: #00ff00;
    border-color: #00ff00;
    text-shadow: none;
}

/* ================================================
   SMART SUGGESTIONS BAR
   ================================================ */

.suggestion-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-left: 3px solid rgba(0, 255, 0, 0.25);
    background: rgba(0, 255, 0, 0.02);
    animation: panel-reveal 0.2s ease-out;
}

.suggestion-text {
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 0, 0.6);
    letter-spacing: 0.05em;
    flex: 1;
}

.btn-suggestion-action {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.15rem 0.5rem;
    background: rgba(0, 255, 0, 0.1);
    color: #00ff00;
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 0;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}

.btn-suggestion-action:hover {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.2);
}

.btn-suggestion-dismiss {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
    background: transparent;
    color: rgba(0, 255, 0, 0.3);
    border: 1px solid rgba(0, 255, 0, 0.1);
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-suggestion-dismiss:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.4);
}

/* ================================================
   LOOP BUILDER (Step Sequencer)
   ================================================ */

/* Loop Builder / Sequencer */
.loop-builder-panel { background: rgba(0,0,0,0.9); border: 1px solid rgba(0,255,0,0.15); padding: 0.5rem; margin-bottom: 0.5rem; }

.lb-header { display: flex; align-items: center; gap: 0.3rem; flex-wrap: wrap; margin-bottom: 0.3rem; }
.lb-title { font-family: 'OCR-A', monospace; font-size: 0.65rem; color: #00ff00; letter-spacing: 0.15em; margin-right: 0.5rem; }
.lb-mode { font-size: 0.5rem !important; padding: 0.15rem 0.4rem !important; }
.lb-mode.active { background: rgba(0,255,0,0.15) !important; border-color: #00ff00 !important; }
.lb-act { font-size: 0.5rem !important; padding: 0.15rem 0.4rem !important; border-color: rgba(0,255,0,0.15) !important; }
.lb-apply { border-color: rgba(0,255,0,0.4) !important; }
.lb-close { font-size: 0.5rem !important; padding: 0.15rem 0.3rem !important; border-color: rgba(0,255,0,0.1) !important; color: rgba(0,255,0,0.3) !important; margin-left: auto; }

.lb-link { font-size: 0.5rem; color: rgba(0,255,0,0.25); margin-bottom: 0.3rem; }

.lb-grid-wrap { overflow-x: auto; overflow-y: auto; max-height: 300px; }
.lb-grid { display: inline-block; min-width: 100%; }

.lb-row { display: flex; align-items: center; }
.lb-beat-row { margin-bottom: 2px; }

.lb-label { font-family: 'OCR-A', monospace; font-size: 0.45rem; color: rgba(0,255,0,0.4); width: 3rem; min-width: 3rem; text-align: right; padding-right: 0.3rem; flex-shrink: 0; }
.lb-label.lb-black { color: rgba(0,255,0,0.25); }
.lb-label.lb-octave { color: #00ff00; font-weight: bold; }
.lb-beat-num { font-size: 0.4rem; color: rgba(0,255,0,0.25); width: 1.4rem; min-width: 1.4rem; text-align: center; }

.lb-row-black { background: rgba(0,0,0,0.3); }
.lb-row-white { background: transparent; }

.lb-cell { width: 1.4rem; min-width: 1.4rem; height: 1.1rem; margin: 1px; background: rgba(0,255,0,0.02); border: 1px solid rgba(0,255,0,0.06); cursor: pointer; }
.lb-cell:hover { background: rgba(0,255,0,0.1); }
.lb-cell.active { background: rgba(0,255,0,0.5); border-color: #00ff00; box-shadow: 0 0 4px rgba(0,255,0,0.3); }
.lb-cell.lb-cell-beat { border-left: 2px solid rgba(0,255,0,0.15); }

.lb-row-black .lb-cell { background: rgba(0,255,0,0.01); border-color: rgba(0,255,0,0.04); }
.lb-row-black .lb-cell.active { background: rgba(0,180,0,0.5); }

.btn-loop { font-family: 'OCR-A', monospace; }

    font-family: 'OCR-A', monospace;
}

/* ============================================
   Producer VOCALS sub-panel
   ============================================ */

.producer-vocals-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(0, 255, 0, 0.25);
    background: transparent;
    color: #00ff00;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
    margin-left: 0.3rem;
}

.producer-vocals-btn:hover {
    background: rgba(0, 255, 0, 0.08);
    border-color: rgba(0, 255, 0, 0.5);
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
}

.producer-vocal-sub {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(0, 255, 0, 0.1);
    min-height: 300px;
    animation: panel-reveal 0.2s ease-out;
}

.producer-vocal-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(0, 255, 0, 0.1);
}

.producer-vocal-title {
    font-family: 'OCR-A', monospace;
    font-size: 0.65rem;
    color: #00ff00;
    letter-spacing: 0.15em;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.3);
}

.producer-vocal-tabs {
    display: flex;
    gap: 0;
    flex: 1;
    justify-content: center;
}

.producer-vocal-tab {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.25rem 0.8rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    border-right-width: 0;
    color: rgba(0, 255, 0, 0.45);
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
}

.producer-vocal-tab:last-of-type {
    border-right-width: 1px;
}

.producer-vocal-tab:hover {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.04);
}

.producer-vocal-tab.active {
    color: #00ff00;
    background: rgba(0, 255, 0, 0.1);
    border-color: rgba(0, 255, 0, 0.4);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.producer-vocal-close {
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.45);
    font-size: 0.8rem;
    width: 22px;
    height: 22px;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.producer-vocal-close:hover {
    color: #ff3333;
    border-color: rgba(255, 50, 50, 0.5);
}

.producer-vocal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.6rem 0.8rem;
}

.producer-vocal-pane {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.producer-vocal-warnings {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.producer-vocal-warn {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(255, 180, 0, 0.7);
    padding: 0.3rem 0.5rem;
    border-left: 2px solid rgba(255, 180, 0, 0.4);
    background: rgba(255, 180, 0, 0.03);
}

.producer-vocal-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.producer-vocal-file-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    border: 1px dashed rgba(0, 255, 0, 0.25);
    cursor: pointer;
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.7);
    letter-spacing: 0.1em;
    transition: border-color 0.2s;
}

.producer-vocal-file-label:hover {
    border-color: #00ff00;
}

.producer-vocal-file-name {
    color: rgba(0, 255, 0, 0.4);
    font-family: 'NimbusMono', monospace;
    letter-spacing: 0;
    flex: 1;
}

.producer-vocal-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    padding: 0.4rem 0;
}

.producer-vocal-check,
.producer-vocal-radio,
.producer-vocal-num {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.65);
    cursor: pointer;
}

.producer-vocal-check input[type="checkbox"],
.producer-vocal-radio input[type="radio"] {
    accent-color: #00ff00;
    cursor: pointer;
}

.producer-vocal-check input:disabled,
.producer-vocal-radio input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.producer-vocal-num input[type="number"],
.producer-vocal-num select {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: #00ff00;
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    padding: 0.15rem 0.3rem;
    outline: none;
    width: 60px;
}

.producer-vocal-num select {
    width: auto;
}

.producer-vocal-num select:focus,
.producer-vocal-num input:focus {
    border-color: rgba(0, 255, 0, 0.5);
}

.producer-vocal-text {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: #00ff00;
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    padding: 0.5rem 0.6rem;
    outline: none;
    resize: vertical;
    letter-spacing: 0.02em;
}

.producer-vocal-text:focus {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.08);
}

.producer-vocal-text::placeholder {
    color: rgba(0, 255, 0, 0.25);
}

.producer-vocal-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.producer-vocal-preset {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.5);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.02em;
}

.producer-vocal-preset:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.05);
}

.producer-vocal-process,
.producer-vocal-generate-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.65rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid #00ff00;
    color: #00ff00;
    cursor: pointer;
    letter-spacing: 0.15em;
    transition: all 0.15s;
    align-self: flex-start;
}

.producer-vocal-process:hover,
.producer-vocal-generate-btn:hover {
    background: rgba(0, 255, 0, 0.18);
    box-shadow: 0 0 12px rgba(0, 255, 0, 0.2);
    text-shadow: 0 0 6px #00ff00;
}

.producer-vocal-process:disabled,
.producer-vocal-generate-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.producer-vocal-status {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.5);
    min-height: 0.9rem;
}

.producer-vocal-phrases {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.producer-vocal-phrase {
    border: 1px solid rgba(0, 255, 0, 0.15);
    background: rgba(0, 255, 0, 0.02);
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: all 0.15s;
}

.producer-vocal-phrase:hover {
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.04);
}

.producer-vocal-phrase-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.producer-vocal-phrase-name {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    color: #00ff00;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.producer-vocal-phrase-dur {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.35);
}

.producer-vocal-phrase-body {
    min-height: 0.9rem;
}

.producer-vocal-phrase-transcript {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    font-style: italic;
    color: rgba(0, 255, 0, 0.55);
    line-height: 1.3;
}

.producer-vocal-phrase-actions {
    display: flex;
    gap: 0.3rem;
}

.producer-vocal-phrase-btn {
    flex: 1;
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.25rem 0.4rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.65);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}

.producer-vocal-phrase-btn:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.06);
}

.producer-vocal-phrase-btn-primary {
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
    background: rgba(0, 255, 0, 0.04);
}

.producer-vocal-phrase-btn-primary:hover {
    background: rgba(0, 255, 0, 0.12);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
}

/* MUSIC generator (Lyria 2) */
.producer-music-preset {
    font-family: 'NimbusMono', monospace;
    font-size: 0.48rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.5);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.02em;
    line-height: 1.4;
    max-width: 100%;
}

.producer-music-preset:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.05);
}

.producer-music-prompt,
.producer-music-neg {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: #00ff00;
    font-family: 'NimbusMono', monospace;
    font-size: 0.7rem;
    padding: 0.5rem 0.6rem;
    outline: none;
    resize: vertical;
    letter-spacing: 0.02em;
}

.producer-music-prompt:focus,
.producer-music-neg:focus {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.08);
}

.producer-music-prompt::placeholder,
.producer-music-neg::placeholder {
    color: rgba(0, 255, 0, 0.25);
}

.producer-music-neg {
    font-size: 0.6rem;
}

.producer-music-info {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.4);
    padding: 0.3rem 0.5rem;
    border-left: 2px solid rgba(0, 255, 0, 0.2);
    background: rgba(0, 255, 0, 0.02);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.producer-music-generate-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.65rem;
    padding: 0.6rem 1.2rem;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid #00ff00;
    color: #00ff00;
    cursor: pointer;
    letter-spacing: 0.15em;
    transition: all 0.15s;
    align-self: flex-start;
}

.producer-music-generate-btn:hover {
    background: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 14px rgba(0, 255, 0, 0.25);
    text-shadow: 0 0 6px #00ff00;
}

.producer-music-generate-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.producer-vocal-sub::-webkit-scrollbar,
.producer-vocal-body::-webkit-scrollbar { width: 4px; }
.producer-vocal-sub::-webkit-scrollbar-thumb,
.producer-vocal-body::-webkit-scrollbar-thumb { background: rgba(0, 255, 0, 0.15); }

/* ============================================
   Audition: loading indicator + Sample Packs view
   ============================================ */

.audition-loading {
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: rgba(0, 255, 0, 0.45);
    padding: 1rem;
    text-align: center;
    letter-spacing: 0.05em;
}

.audition-grid.sample-packs-view {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.5rem;
}

.sample-packs-intro {
    font-family: 'NimbusMono', monospace;
    font-size: 0.55rem;
    color: rgba(0, 255, 0, 0.5);
    line-height: 1.4;
    padding: 0.4rem 0.5rem;
    border-left: 2px solid rgba(0, 255, 0, 0.25);
    background: rgba(0, 255, 0, 0.02);
}

.sample-packs-query-row {
    display: flex;
    gap: 0.3rem;
}

.sample-packs-query {
    flex: 1;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(0, 255, 0, 0.25);
    color: #00ff00;
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    padding: 0.4rem 0.6rem;
    outline: none;
    letter-spacing: 0.02em;
}

.sample-packs-query:focus {
    border-color: rgba(0, 255, 0, 0.5);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.08);
}

.sample-packs-query::placeholder {
    color: rgba(0, 255, 0, 0.25);
}

.sample-packs-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.sample-packs-preset {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    padding: 0.2rem 0.5rem;
    border: 1px solid rgba(0, 255, 0, 0.15);
    color: rgba(0, 255, 0, 0.5);
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 0.02em;
}

.sample-packs-preset:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.4);
    background: rgba(0, 255, 0, 0.05);
}

.sample-packs-sources {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.sample-packs-source {
    border: 1px solid rgba(0, 255, 0, 0.2);
    background: rgba(0, 255, 0, 0.02);
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    transition: all 0.15s;
}

.sample-packs-source:hover {
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.04);
}

.sample-packs-source-name {
    font-family: 'OCR-A', monospace;
    font-size: 0.7rem;
    color: #00ff00;
    letter-spacing: 0.1em;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.sample-packs-source-desc {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.4);
    line-height: 1.3;
    min-height: 1.3rem;
}

.sample-packs-source-btn {
    font-family: 'OCR-A', monospace;
    font-size: 0.55rem;
    padding: 0.35rem 0.6rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.3);
    color: #00ff00;
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: all 0.15s;
    margin-top: auto;
}

.sample-packs-source-btn:hover {
    background: rgba(0, 255, 0, 0.1);
    border-color: #00ff00;
    text-shadow: 0 0 6px rgba(0, 255, 0, 0.4);
}

.sample-packs-hint {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.3);
    font-style: italic;
    padding: 0.3rem 0;
    border-top: 1px solid rgba(0, 255, 0, 0.06);
    margin-top: 0.3rem;
}

/* ============================================
   BROWSE: My Uploads view
   ============================================ */

.audition-grid.user-uploads-view {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem;
}

.user-uploads-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0;
    border-bottom: 1px solid rgba(0, 255, 0, 0.08);
    margin-bottom: 0.3rem;
}

.user-uploads-title {
    flex: 1;
    font-family: 'OCR-A', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    letter-spacing: 0.15em;
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.3);
}

.user-uploads-refresh {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.2);
    color: rgba(0, 255, 0, 0.6);
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}

.user-uploads-refresh:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
}

.user-uploads-add {
    font-family: 'OCR-A', monospace;
    font-size: 0.5rem;
    padding: 0.25rem 0.6rem !important;
    background: rgba(0, 255, 0, 0.08);
    border: 1px solid rgba(0, 255, 0, 0.4);
    color: #00ff00;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.15s;
}

.user-uploads-add:hover {
    background: rgba(0, 255, 0, 0.15);
    box-shadow: 0 0 8px rgba(0, 255, 0, 0.15);
}

.user-uploads-status {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.4);
    padding: 0.2rem 0;
    letter-spacing: 0.02em;
}

.user-uploads-empty {
    font-family: 'NimbusMono', monospace;
    font-size: 0.65rem;
    color: rgba(0, 255, 0, 0.35);
    text-align: center;
    padding: 2rem 1rem;
    line-height: 1.5;
}

.user-uploads-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.4rem;
}

.user-upload-card {
    border: 1px solid rgba(0, 255, 0, 0.15);
    background: rgba(0, 255, 0, 0.02);
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.12s;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.user-upload-card:hover {
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.06);
    box-shadow: 0 0 6px rgba(0, 255, 0, 0.08);
}

.user-upload-name {
    font-family: 'NimbusMono', monospace;
    font-size: 0.6rem;
    color: #00ff00;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.02em;
}

.user-upload-meta {
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    color: rgba(0, 255, 0, 0.35);
    letter-spacing: 0.1em;
}

.user-upload-code {
    font-family: 'NimbusMono', monospace;
    font-size: 0.5rem;
    color: rgba(0, 255, 0, 0.5);
    padding: 0.15rem 0.3rem;
    background: rgba(0, 255, 0, 0.03);
    border-left: 2px solid rgba(0, 255, 0, 0.2);
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-upload-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 0.2rem;
}

.user-upload-btn {
    flex: 1;
    font-family: 'OCR-A', monospace;
    font-size: 0.45rem;
    padding: 0.25rem 0.3rem;
    background: transparent;
    border: 1px solid rgba(0, 255, 0, 0.18);
    color: rgba(0, 255, 0, 0.55);
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: all 0.12s;
}

.user-upload-btn:hover {
    color: #00ff00;
    border-color: rgba(0, 255, 0, 0.5);
    background: rgba(0, 255, 0, 0.06);
}

.user-upload-btn-primary {
    border-color: rgba(0, 255, 0, 0.4);
    color: #00ff00;
    background: rgba(0, 255, 0, 0.04);
}

.user-upload-btn-primary:hover {
    background: rgba(0, 255, 0, 0.12);
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.4);
}

/* GitHub icon — inherits color via fill="currentColor" */
.gh-icon {
    vertical-align: middle;
    display: inline-block;
}

/* Discrete open-source mention in status bar (right-aligned, icon-only) */
.status-source {
    margin-left: auto;
    color: rgba(0, 255, 0, 0.4);
    text-decoration: none;
    transition: color 0.2s, filter 0.2s, transform 0.15s;
    padding: 4px 8px;
    display: inline-flex;
    align-items: center;
}
.status-source:hover {
    color: #00ff00;
    filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.5));
    transform: scale(1.08);
}

/* Onboarding step 5 — open-source line (icon + label, subtle) */
.onboarding-os-note {
    margin-top: 16px;
    font-size: 0.55rem;
    letter-spacing: 0.5px;
    text-align: center;
}
.onboarding-os-note a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(0, 255, 0, 0.55);
    text-decoration: none;
    transition: color 0.2s, filter 0.2s;
}
.onboarding-os-note a:hover {
    color: #00ff00;
    filter: drop-shadow(0 0 4px rgba(0, 255, 0, 0.4));
}