/* ===================================
   GROOVE STRIP - CYBER DESIGN
   =================================== */

:root {
    --bg-dark: #0a0e17;
    --bg-strip: #0d1219;
    --bg-section: #111820;
    --border-main: #1a2530;
    --border-glow: #00ffff;
    
    /* Cyan - default/general */
    --cyan: #00ffff;
    --cyan-dim: #004455;
    --cyan-glow: rgba(0, 255, 255, 0.3);
    
    /* Magenta - Macro 2 */
    --magenta: #ff00ff;
    --magenta-dim: #550055;
    --magenta-glow: rgba(255, 0, 255, 0.3);
    
    /* Green - EQ */
    --green: #00ff88;
    --green-dim: #004422;
    --green-glow: rgba(0, 255, 136, 0.3);
    
    /* Yellow/Amber - Compressor */
    --yellow: #ffcc00;
    --yellow-dim: #553300;
    --yellow-glow: rgba(255, 204, 0, 0.3);
    
    /* Blue - Tone/Envelope */
    --blue: #4488ff;
    --blue-dim: #223366;
    --blue-glow: rgba(68, 136, 255, 0.3);
    
    /* Purple - Filter/DJ */
    --purple: #aa66ff;
    --purple-dim: #332255;
    --purple-glow: rgba(170, 102, 255, 0.3);
    
    --orange: #ff8800;
    --orange-dim: #442200;
    --orange-glow: rgba(255, 136, 0, 0.3);
    --red: #ff3366;
    
    --text: #e0e0e0;
    --text-dim: #8899aa;
    
    --border-dim: #0d1520;
}

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

body {
    font-family: 'Consolas', 'Monaco', monospace;
    background: var(--bg-dark);
    color: var(--text);
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
    
    /* Grid pattern background */
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* === START OVERLAY === */
.start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at center, #0a1628 0%, #050a10 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.start-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* === PROJECT LOADING OVERLAY === */
.project-load-overlay {
    position: fixed;
    inset: 0;
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(ellipse at center, rgba(6, 12, 20, 0.55) 0%, rgba(2, 5, 9, 0.80) 100%);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.project-load-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.project-load-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.project-load-panel {
    width: min(560px, calc(100vw - 36px));
    background: linear-gradient(180deg, rgba(12, 18, 27, 0.95) 0%, rgba(9, 14, 21, 0.97) 100%);
    border: 1px solid rgba(0, 255, 255, 0.25);
    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.45),
        0 0 28px rgba(0, 255, 255, 0.14),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 18px 18px 14px 18px;
}

.project-load-title {
    font-size: 15px;
    letter-spacing: 2.5px;
    color: #72f7ff;
    text-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
    margin-bottom: 8px;
}

.project-load-status {
    font-size: 12px;
    color: #d6eef3;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.project-load-track {
    width: 100%;
    height: 12px;
    border: 1px solid rgba(66, 94, 120, 0.85);
    border-radius: 999px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(9, 14, 22, 0.9), rgba(4, 8, 14, 0.95));
}

.project-load-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background:
        linear-gradient(90deg, #00d8ff 0%, #00ffff 42%, #ffb347 100%);
    box-shadow:
        0 0 14px rgba(0, 255, 255, 0.34),
        0 0 24px rgba(255, 179, 71, 0.22);
    transition: width 130ms linear;
}

.project-load-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    font-size: 11px;
    letter-spacing: 0.8px;
}

.project-load-detail {
    color: #96aebb;
    text-transform: uppercase;
}

.project-load-pct {
    color: #ffcc7a;
    min-width: 42px;
    text-align: right;
}

/* Startup boot: text-only loader over grid background */
.project-load-overlay.startup-minimal {
    background:
        radial-gradient(ellipse at center, rgba(6, 12, 20, 0.24) 0%, rgba(2, 5, 9, 0.36) 100%);
    backdrop-filter: blur(1px);
}

.project-load-overlay.startup-minimal .project-load-panel {
    width: min(620px, calc(100vw - 36px));
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 8px 14px;
}

.project-load-overlay.startup-minimal .project-load-track,
.project-load-overlay.startup-minimal .project-load-pct {
    display: none;
}

.project-load-overlay.startup-minimal .project-load-title {
    text-align: center;
    font-size: 18px;
    letter-spacing: 3px;
    margin-bottom: 6px;
}

.project-load-overlay.startup-minimal .project-load-status {
    text-align: center;
    font-size: 13px;
    margin-bottom: 6px;
}

.project-load-overlay.startup-minimal .project-load-status::after {
    content: ' ...';
    display: inline-block;
    width: 2.6ch;
    animation: jtStartupDots 1.05s steps(4, end) infinite;
}

.project-load-overlay.startup-minimal .project-load-meta {
    justify-content: center;
}

.project-load-overlay.startup-minimal .project-load-detail {
    color: #a8c3ce;
    font-size: 12px;
    letter-spacing: 1px;
}

/* === UNIFIED APP FEEDBACK TOASTS (bottom-right) === */
.app-feedback-host {
    position: fixed;
    right: 14px;
    bottom: 14px;
    z-index: 99970;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}

.app-feedback-toast {
    min-width: 280px;
    max-width: min(460px, calc(100vw - 28px));
    background: linear-gradient(180deg, rgba(12, 18, 27, 0.95) 0%, rgba(9, 14, 21, 0.97) 100%);
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 10px;
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(0, 255, 255, 0.14);
    padding: 10px 12px 10px 12px;
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    transition: opacity 160ms ease, transform 160ms ease;
}

.app-feedback-toast.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-feedback-toast.success {
    border-color: rgba(85, 255, 164, 0.4);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(85, 255, 164, 0.15);
}

.app-feedback-toast.error {
    border-color: rgba(255, 120, 120, 0.5);
    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(255, 80, 80, 0.15);
}

.app-feedback-toast .aft-title {
    color: #72f7ff;
    font-size: 11px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.app-feedback-toast.success .aft-title { color: #9effc7; }
.app-feedback-toast.error .aft-title { color: #ffb3b3; }

.app-feedback-toast .aft-text {
    color: #d6eef3;
    font-size: 12px;
    line-height: 1.35;
    word-break: break-word;
}

.app-feedback-toast .aft-track {
    margin-top: 8px;
    width: 100%;
    height: 7px;
    border: 1px solid rgba(66, 94, 120, 0.85);
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(9, 14, 22, 0.9), rgba(4, 8, 14, 0.95));
}

.app-feedback-toast .aft-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #00d8ff 0%, #00ffff 45%, #ffb347 100%);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.3);
    transition: width 110ms linear;
}

@keyframes jtStartupDots {
    0% { content: ' '; }
    25% { content: ' .'; }
    50% { content: ' ..'; }
    75%, 100% { content: ' ...'; }
}

.start-content {
    text-align: center;
    animation: fadeInUp 1s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.start-logo {
    margin-bottom: 30px;
}

.logo-line {
    width: 300px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    margin: 15px auto;
}

.logo-text {
    font-size: 72px;
    font-weight: bold;
    color: var(--cyan);
    letter-spacing: 20px;
    text-shadow: 
        0 0 30px var(--cyan-glow),
        0 0 60px var(--cyan-glow),
        0 0 90px rgba(0, 255, 255, 0.2);
    animation: glowPulse 3s ease-in-out infinite;
}

.logo-sub {
    font-size: 24px;
    color: var(--magenta);
    letter-spacing: 15px;
    margin-top: 5px;
    text-shadow: 0 0 20px var(--magenta-glow);
}

@keyframes glowPulse {
    0%, 100% {
        text-shadow: 
            0 0 30px var(--cyan-glow),
            0 0 60px var(--cyan-glow),
            0 0 90px rgba(0, 255, 255, 0.2);
    }
    50% {
        text-shadow: 
            0 0 40px var(--cyan-glow),
            0 0 80px var(--cyan-glow),
            0 0 120px rgba(0, 255, 255, 0.3);
    }
}

.start-tagline {
    font-size: 16px;
    color: var(--text-dim);
    letter-spacing: 3px;
    margin-bottom: 30px;
    text-transform: uppercase;
}

/* === USER SELECTION ON START SCREEN === */
.start-user-select {
    margin-bottom: 30px;
}

.user-select-label {
    font-size: 12px;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
}

.user-select-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 15px;
}

.user-select-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 25px;
    background: rgba(20, 30, 40, 0.8);
    border: 2px solid var(--border-main);
    border-radius: 8px;
    color: var(--text-dim);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 130px;
}

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

.user-select-btn.disabled,
.user-select-btn:disabled {
    opacity: 0.45;
    filter: grayscale(0.8);
    cursor: not-allowed;
    pointer-events: none;
}

.user-select-btn .user-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.user-select-btn .user-btn-text {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
}

/* Admin button special styling */
.user-select-btn.admin-btn {
    border-color: var(--orange);
    color: var(--orange);
}

.user-select-btn.admin-btn:hover {
    border-color: var(--orange);
    background: rgba(255, 136, 0, 0.2);
    color: var(--orange);
    box-shadow: 0 0 15px rgba(255, 136, 0, 0.3);
}

.user-select-btn.admin-btn.active {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--bg-dark);
    box-shadow: 0 0 20px rgba(255, 136, 0, 0.5);
}

/* Admin active user display */
.current-user-name.admin-active {
    color: var(--orange);
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
}

/* Admin dialog styling */
.admin-dialog .user-dialog {
    border-color: var(--orange);
}

.admin-dialog .admin-header {
    color: var(--orange);
    border-bottom-color: var(--orange);
}

.admin-dialog .admin-password-input {
    width: 100%;
    padding: 10px 15px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    border-radius: 3px;
    margin-bottom: 10px;
}

.admin-dialog .admin-password-input:focus {
    outline: none;
    border-color: var(--orange);
}

.admin-dialog .admin-password-input.error {
    border-color: var(--red);
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.admin-dialog .admin-hint {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
}

.admin-dialog .admin-confirm {
    background: var(--orange);
    border-color: var(--orange);
    color: var(--bg-dark);
}

.admin-dialog .admin-confirm:hover {
    background: #ffaa33;
}

/* Admin toast */
.save-toast.admin-toast {
    background: linear-gradient(135deg, rgba(255, 136, 0, 0.9), rgba(200, 100, 0, 0.9));
    border-color: var(--orange);
}

.current-user-display {
    font-size: 14px;
    color: var(--green);
}

.current-user-label {
    color: var(--text-dim);
    margin-right: 8px;
}

.current-user-name {
    font-weight: bold;
    letter-spacing: 1px;
}

/* === USER DIALOG === */
.user-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.user-dialog {
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 8px;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.user-dialog-header {
    padding: 16px;
    font-size: 14px;
    font-weight: bold;
    color: var(--cyan);
    letter-spacing: 2px;
    border-bottom: 1px solid var(--border-main);
    text-align: center;
}

.user-dialog-content {
    padding: 20px;
}

.new-user-input {
    width: 100%;
    padding: 12px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    border-radius: 4px;
    color: var(--cyan);
    font-family: inherit;
    font-size: 14px;
    text-align: center;
}

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

.user-list {
    max-height: 300px;
    overflow-y: auto;
    padding: 10px;
}

.user-item {
    padding: 12px 16px;
    margin-bottom: 6px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

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

.user-item.active {
    border-color: var(--green);
    background: rgba(0, 255, 136, 0.15);
    color: var(--green);
}

.user-dialog-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-main);
}

.user-dialog-close,
.user-dialog-confirm {
    padding: 10px 24px;
    background: transparent;
    border: 1px solid var(--border-main);
    border-radius: 4px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

.user-dialog-close:hover {
    border-color: var(--red);
    color: var(--red);
}

.user-dialog-confirm {
    border-color: var(--green);
    color: var(--green);
}

.user-dialog-confirm:hover {
    background: rgba(0, 255, 136, 0.15);
}

.start-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 20px 60px;
    background: transparent;
    border: 2px solid var(--cyan);
    color: var(--cyan);
    font-family: inherit;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.start-btn-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.start-btn-main:hover::before {
    left: 100%;
}

.start-btn-main:hover {
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 
        0 0 30px var(--cyan-glow),
        inset 0 0 30px rgba(0, 255, 255, 0.1);
    transform: scale(1.05);
}

.start-btn-main:active {
    transform: scale(0.98);
}

.btn-icon {
    font-size: 20px;
}

.btn-text {
    position: relative;
    z-index: 1;
}

.start-footer {
    margin-top: 60px;
    font-size: 12px;
    color: #334;
    letter-spacing: 2px;
}

/* === STRIP CONTAINER === */
.groove-strip {
    width: 180px;
    background: var(--bg-strip);
    border: 2px solid var(--border-main);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(0, 255, 255, 0.02);
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}

/* Active strip = selected for SEQ/AUTO */
.groove-strip.strip-active {
    border: 2px solid var(--cyan);
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        0 0 8px rgba(0, 255, 255, 0.35),
        inset 0 0 30px rgba(0, 255, 255, 0.04);
}

.groove-strip.strip-passive {
    filter: grayscale(0.72) saturate(0.72) brightness(0.92);
    border-color: rgba(120, 130, 145, 0.8);
}

.groove-strip.strip-passive::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.18) 0%, rgba(10, 14, 20, 0.28) 100%);
    z-index: 38;
    pointer-events: none;
}

.groove-strip.strip-passive::after {
    content: attr(data-passive-text);
    position: absolute;
    top: 8px;
    right: 8px;
    max-width: calc(100% - 16px);
    background: rgba(11, 18, 28, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dce6f3;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.9px;
    padding: 4px 8px;
    text-transform: uppercase;
    border: 1px solid rgba(170, 186, 208, 0.55);
    border-radius: 999px;
    z-index: 40;
    pointer-events: none;
}

/* === STRIP HEADER === */
.strip-header {
    background: linear-gradient(180deg, #1a2530 0%, #0d1219 100%);
    padding: 8px;
    text-align: center;
    border-bottom: 1px solid var(--cyan-dim);
    position: relative;
}

.strip-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}

.strip-name-input {
    width: 100%;
    background: transparent;
    border: 1px solid var(--border-main);
    border-radius: 2px;
    color: var(--cyan);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 0 8px var(--cyan-glow);
    outline: none;
    padding: 4px 6px;
    cursor: default;
    transition: border-color 0.2s, background 0.2s;
}

.strip-name-input:not([readonly]) {
    cursor: text;
}

.strip-name-input:hover {
    border-color: var(--cyan-dim);
}

.strip-name-input:focus {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.05);
}

.strip-name-input::placeholder {
    color: var(--cyan);
    text-shadow: 0 0 8px var(--cyan-glow);
}

.strip-title {
    font-size: 11px;
    font-weight: bold;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 10px var(--cyan-glow);
}

/* === SECTION STYLING === */
.strip-section {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border-main);
}

.section-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
    text-align: center;
}

/* === SEQUENCER BUTTON === */
.seq-button {
    width: 100%;
    padding: 12px;
    background: linear-gradient(180deg, #1a2530 0%, #0d1219 100%);
    border: 1px solid var(--cyan-dim);
    color: var(--cyan);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.seq-button:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 15px var(--cyan-glow);
    text-shadow: 0 0 10px var(--cyan);
}

.seq-button:active {
    transform: scale(0.98);
}

.seq-button::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.1), transparent);
    transition: left 0.5s;
}

.seq-button:hover::after {
    left: 100%;
}

/* Sequencer button row with test button */
.seq-button-row {
    display: flex;
    gap: 4px;
}

.seq-button-row .seq-button {
    flex: 1;
}

/* Admin test sound button */
.admin-test-btn {
    padding: 8px 12px;
    background: var(--orange);
    border: 1px solid var(--orange);
    color: var(--bg-dark);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 2px;
}

.admin-test-btn:hover {
    background: #ffaa33;
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.5);
}

.admin-test-btn:active,
.admin-test-btn.playing {
    background: #fff;
    color: var(--orange);
    transform: scale(0.95);
}

/* === PATTERN CONTROLS === */
.pattern-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-bottom: 8px;
}

.pattern-name {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: var(--green);
    padding: 4px 8px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--green-dim);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === BUTTONS === */
.btn-small {
    width: 28px;
    height: 24px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-small:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.btn-save {
    background: linear-gradient(180deg, #1a3020 0%, #0d1910 100%);
    border-color: var(--green-dim);
    color: var(--green);
}

.btn-save:hover {
    border-color: var(--green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* === FOLDER CONTROLS === */
.btn-folder {
    padding: 6px 4px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    color: var(--text-dim);
    font-family: inherit;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
}

.btn-folder:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn-folder.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.3);
}

.btn-folder[data-action="set-folder-user"].active {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 6px rgba(0, 255, 136, 0.3);
}

/* === LOAD DIALOG === */
.load-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 220000;
    overflow: hidden;
    padding: 80px 0 25px;
}

.load-dialog-overlay .save-pattern-dialog {
    width: 1340px;
    max-width: 96vw;
    height: calc(100vh - 155px);
    max-height: calc(100vh - 155px);
}

.load-dialog-overlay .save-dialog-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jt-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 221000;
}

.jt-confirm-dialog {
    width: 420px;
    max-width: 92vw;
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 6px;
    box-shadow: 0 0 24px rgba(0, 255, 255, 0.25);
    padding: 14px;
}

.jt-confirm-title {
    font-size: 12px;
    color: var(--cyan);
    font-weight: bold;
    letter-spacing: 1.2px;
    margin-bottom: 10px;
}

.jt-confirm-msg {
    color: var(--text-main);
    font-size: 11px;
    line-height: 1.45;
    margin-bottom: 14px;
    word-break: break-word;
}

.jt-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.load-dialog {
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 8px;
    width: 1320px;
    max-width: 95vw;
    height: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.load-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--border-main);
}

.load-dialog-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--cyan);
    letter-spacing: 2px;
}

.load-dialog-close {
    background: transparent;
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
}

.load-dialog-close:hover {
    border-color: var(--red);
    color: var(--red);
}

.load-dialog-content {
    padding: 16px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

/* Load folder selection */
.load-folder-select {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.load-folder-btn {
    flex: 1;
    padding: 10px 16px;
    background: var(--bg-section);
    border: 2px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.load-folder-btn:hover {
    border-color: var(--cyan-dim);
    color: var(--cyan);
}

.load-folder-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.load-folder-btn[data-folder="user"].active {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--green);
    color: var(--green);
}

.load-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.load-tab {
    flex: 1 1 0;
    min-width: 60px;
    padding: 10px 6px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    border-radius: 3px;
    text-align: center;
}

.load-tab:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.load-tab.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.load-list-container {
    min-height: 0;
    flex: 1;
    margin-top: 8px;
    overflow-y: auto;
}

.load-list-container::-webkit-scrollbar {
    width: 12px;
}

.load-list-container::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}

.load-list-container::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}

.load-list-container::-webkit-scrollbar-thumb:hover,
.load-list-container::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

.load-list {
    display: none;
}

.load-list.active {
    display: block;
}

.load-item {
    padding: 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    margin-bottom: 6px;
    transition: all 0.2s;
    border-radius: 3px;
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 90px 60px 180px 300px 44px;
    align-items: center;
    gap: 10px;
}

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

.load-item-main {
    min-width: 0;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.load-item-name {
    font-size: 12px;
    font-weight: bold;
    color: var(--cyan);
    margin-bottom: 4px;
}

.load-item-info {
    font-size: 10px;
    color: var(--text-dim);
}

.load-item-col {
    min-width: 0;
}

.load-item-col-date {
    text-align: left;
    line-height: 1.2;
    cursor: pointer;
}

.load-item-date {
    display: block;
    font-size: 10px;
    color: #cdd8e0;
}

.load-item-col-remark {
    display: flex;
    align-items: center;
    width: 300px;
    min-width: 200px;
}

.load-remark-input {
    width: 100%;
    min-height: 38px;
    background: rgba(0, 0, 0, 0.22);
    border: 1px solid rgba(0, 150, 220, 0.28);
    color: #c9d4dc;
    font-size: 10px;
    font-family: inherit;
    line-height: 1.3;
    padding: 4px 6px;
    border-radius: 2px;
    resize: none;
}

.load-remark-input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.18);
}

.load-item-header {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 90px 60px 180px 300px 44px;
    gap: 8px;
    padding: 6px 12px;
    margin-bottom: 6px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    background: rgba(0, 40, 70, 0.22);
    font-size: 10px;
    font-weight: 700;
    color: #79cfff;
    letter-spacing: 0.5px;
}

.load-h-vis {
    text-align: center;
}

.load-h-date {
    text-align: left;
}

.load-h-remark {
    text-align: left;
}

.load-h-del {
    width: 44px;
}

.load-vis-btn {
    padding: 6px 6px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    font-family: inherit;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

.load-vis-btn.vis-private {
    background: rgba(160, 160, 180, 0.12);
    border: 2px solid rgba(160, 160, 180, 0.5);
    color: #b0b4c4;
}

.load-vis-btn.vis-private:hover {
    background: rgba(160, 160, 180, 0.25);
    border-color: rgba(200, 200, 220, 0.7);
    color: #dde0ea;
    box-shadow: 0 0 10px rgba(160, 160, 180, 0.3);
}

.load-vis-btn.vis-public {
    background: rgba(0, 255, 136, 0.15);
    border: 2px solid rgba(0, 255, 136, 0.6);
    color: #00ff88;
}

.load-vis-btn.vis-public:hover {
    background: rgba(0, 255, 136, 0.3);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.4);
}

.load-vis-btn.vis-editable {
    background: rgba(0, 200, 255, 0.15);
    border: 2px solid rgba(0, 200, 255, 0.6);
    color: #00c8ff;
}

.load-vis-btn.vis-editable:hover {
    background: rgba(0, 200, 255, 0.3);
    box-shadow: 0 0 12px rgba(0, 200, 255, 0.4);
}

.load-h-link {
    text-align: center;
}

.load-link-btn {
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: bold;
    font-family: inherit;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--green);
    background: rgba(0, 255, 136, 0.1);
    color: var(--green);
    align-self: center;
    justify-self: center;
}

.load-link-btn.active:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.load-link-btn.disabled {
    border-color: rgba(120, 120, 140, 0.3);
    background: transparent;
    color: rgba(120, 120, 140, 0.5);
    cursor: not-allowed;
}

.load-link-btn.copied {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.1);
}

.load-item-delete {
    width: 44px;
    min-width: 44px;
    height: 24px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
}

.load-item-delete:hover {
    background: var(--red);
    color: #fff;
}

.local-save-badge {
    display: inline-block;
    padding: 1px 6px;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #1a1a2e;
    background: #ffaa00;
    border-radius: 3px;
    vertical-align: middle;
    line-height: 14px;
}

.local-only-item {
    border-left: 3px solid #ffaa00;
}

.load-sort-field.hidden {
    display: none;
}

.load-sort-buttons {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.load-sort-btn {
    min-width: 72px;
    height: 24px;
    padding: 0 10px;
    border-radius: 3px;
    border: 1px solid rgba(0, 170, 255, 0.32);
    background: rgba(0, 0, 0, 0.22);
    color: #9ccfe8;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.load-sort-btn:hover {
    border-color: #3ec8ff;
    color: #d8f5ff;
    background: rgba(0, 90, 130, 0.25);
}

.load-sort-btn.active {
    border-color: #00d7ff;
    color: #e7fcff;
    background: rgba(0, 180, 255, 0.3);
    box-shadow: 0 0 10px rgba(0, 200, 255, 0.25);
}

.load-empty {
    text-align: center;
    padding: 40px;
    color: var(--text-dim);
    font-size: 12px;
}

.file-upload-area {
    text-align: center;
    padding: 40px 20px;
    border: 2px dashed var(--border-main);
    border-radius: 8px;
}

.file-upload-btn {
    padding: 12px 24px;
    background: var(--bg-section);
    border: 1px solid var(--cyan);
    color: var(--cyan);
    font-family: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    margin-bottom: 12px;
}

.file-upload-btn:hover {
    background: rgba(0, 255, 255, 0.15);
}

.file-upload-hint {
    font-size: 10px;
    color: var(--text-dim);
}

.load-dialog-footer {
    display: flex;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-main);
}

.load-dialog-btn {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid var(--border-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    text-align: center;
}

.load-dialog-btn.cancel {
    background: transparent;
    color: var(--text-dim);
}

.load-dialog-btn.cancel:hover {
    border-color: var(--red);
    color: var(--red);
}

@keyframes arm-pulse {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 51, 102, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 51, 102, 0.6); }
}

/* === ROTARY KNOBS === */
.knob-row {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px 0;
}

.knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.knob-label {
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.knob {
    width: 36px;
    height: 36px;
    background: linear-gradient(145deg, #1a2530, #0d1219);
    border: 2px solid var(--cyan-dim); /* Visible cyan border */
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: all 0.15s;
}

/* Active knob - value is not at default position - BRIGHTER */
.knob.active {
    border-color: var(--cyan);
    box-shadow: 0 0 6px var(--cyan-glow);
}

/* Automation modulation ring - glowing colored border around knob */
.knob.knob-auto-mod {
    border: 3px solid var(--auto-mod-color) !important;
    box-shadow: 
        0 0 10px var(--auto-mod-color),
        0 0 22px var(--auto-mod-color),
        0 0 40px var(--auto-mod-color),
        inset 0 0 8px var(--auto-mod-color) !important;
    animation: knob-mod-pulse 1.2s ease-in-out infinite alternate !important;
    z-index: 2;
}

/* DUO popup: keep automation glow tighter/smaller than strip knobs */
.duo-popup .knob.knob-auto-mod {
    border-width: 1px !important;
    box-shadow:
        0 0 3px var(--auto-mod-color),
        0 0 8px var(--auto-mod-color),
        0 0 14px var(--auto-mod-color),
        inset 0 0 2px var(--auto-mod-color) !important;
    animation: duo-knob-mod-pulse 1.2s ease-in-out infinite alternate !important;
}

@keyframes knob-mod-pulse {
    0% { box-shadow: 0 0 8px var(--auto-mod-color), 0 0 18px var(--auto-mod-color), 0 0 30px var(--auto-mod-color), inset 0 0 6px var(--auto-mod-color); }
    100% { box-shadow: 0 0 14px var(--auto-mod-color), 0 0 30px var(--auto-mod-color), 0 0 50px var(--auto-mod-color), inset 0 0 10px var(--auto-mod-color); }
}

@keyframes duo-knob-mod-pulse {
    0% { box-shadow: 0 0 2px var(--auto-mod-color), 0 0 7px var(--auto-mod-color), 0 0 12px var(--auto-mod-color), inset 0 0 2px var(--auto-mod-color); }
    100% { box-shadow: 0 0 4px var(--auto-mod-color), 0 0 10px var(--auto-mod-color), 0 0 16px var(--auto-mod-color), inset 0 0 3px var(--auto-mod-color); }
}

.knob:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.knob::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2px;
    height: 12px;
    background: var(--cyan);
    transform-origin: bottom center;
    transform: translate(-50%, -100%) rotate(var(--rotation, 0deg));
    box-shadow: 0 0 5px var(--cyan);
}

.knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: var(--bg-dark);
    border: 1px solid var(--cyan-dim);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.knob-small {
    width: 28px;
    height: 28px;
}

.knob-small::before {
    height: 9px;
}

.knob-small::after {
    width: 4px;
    height: 4px;
}

/* Tiny knobs for compact grid */
.knob-tiny {
    width: 26px;
    height: 26px;
}

.knob-tiny::before {
    height: 8px;
}

.knob-tiny::after {
    width: 4px;
    height: 4px;
}

/* Compact Knob Grid */
.knob-grid-section {
    padding: 4px !important;
}

.knob-grid-header {
    display: flex;
    justify-content: space-around;
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 2px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.knob-grid-row {
    display: flex;
    justify-content: space-around;
    gap: 2px;
    margin-bottom: 2px;
}

.grid-knob {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.grid-knob .knob-label {
    font-size: 9px;
    color: #aab7c2;
    margin-top: 1px;
    letter-spacing: 0.2px;
}

/* Inactive grid-knob (knob at default, EQ at center, etc) - dim until activated */
.grid-knob.inactive {
    opacity: 0.55;
}

.grid-knob.inactive:hover {
    opacity: 1;
}

/* NEVER dim a grid-knob that contains an automation-targeted knob */
.grid-knob:has(.knob-auto-mod) {
    opacity: 1 !important;
}

/* Fallback for browsers without :has() - ins-fx and knob-container too */
.knob-container:has(.knob-auto-mod),
.ins-fx-knob-container:has(.knob-auto-mod) {
    opacity: 1 !important;
}

/* ========== KNOB COLOR SCHEMES ========== */

/* EQ knobs - GREEN */
.knob.eq-knob {
    border-color: var(--green-dim);
}
.knob.eq-knob:hover {
    border-color: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}
.knob.eq-knob.active {
    border-color: var(--green);
    box-shadow: 0 0 8px var(--green-glow);
}

/* (AMT knob removed - merged into VEL knob+dot) */

/* Tone knobs (ATK/REL envelope) - BLUE */
.knob.tone-knob {
    border-color: var(--blue-dim);
}
.knob.tone-knob:hover {
    border-color: var(--blue);
    box-shadow: 0 0 8px var(--blue-glow);
}
.knob.tone-knob.active {
    border-color: var(--blue);
    box-shadow: 0 0 8px var(--blue-glow);
}

/* Compressor knobs - YELLOW */
.knob.comp-knob {
    border-color: var(--yellow-dim);
}
.knob.comp-knob:hover {
    border-color: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
}
.knob.comp-knob.active {
    border-color: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
}

/* Filter knobs (DJ/RES) - PURPLE */
.knob.filter-knob {
    border-color: var(--purple-dim);
}
.knob.filter-knob:hover {
    border-color: var(--purple);
    box-shadow: 0 0 8px var(--purple-glow);
}
.knob.filter-knob.active {
    border-color: var(--purple);
    box-shadow: 0 0 8px var(--purple-glow);
}

/* ========== PREVENT HOVER WHILE DRAGGING ========== */
body.dragging .knob:hover {
    border-color: inherit;
    box-shadow: none;
}

.knob-value {
    font-size: 8px;
    color: var(--cyan);
    text-align: center;
}

/* Sound Type Buttons - 4x2 Grid under strip header */
.sound-type-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 2px 6px 4px 6px;
    background: linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 100%);
}

.sound-type-row {
    display: flex;
    gap: 1px;
}

.sound-type-btn {
    flex: 1;
    padding: 2px 1px;
    background: rgba(10, 14, 20, 0.7);
    border: 1px solid rgba(60, 80, 100, 0.3);
    color: rgba(140, 160, 180, 0.6);
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.8px;
    position: relative;
}

.sound-type-btn::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid transparent;
    transition: border-color 0.2s ease;
    pointer-events: none;
}

.sound-type-btn:hover {
    border-color: rgba(0, 255, 255, 0.4);
    color: rgba(0, 255, 255, 0.7);
    background: rgba(0, 255, 255, 0.05);
}

.sound-type-btn.active {
    background: rgba(0, 255, 255, 0.12);
    border-color: var(--cyan);
    color: var(--cyan);
    text-shadow: 0 0 6px var(--cyan-glow);
    box-shadow:
        0 0 4px rgba(0, 255, 255, 0.15),
        inset 0 0 6px rgba(0, 255, 255, 0.08);
}

.sound-type-btn.active::before {
    border-color: rgba(0, 255, 255, 0.25);
}

.sound-type-btn.disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
    border-color: rgba(60, 80, 100, 0.15);
}

/* Sound Source section (combined sound type + browser) */
.sound-source-section {
    padding: 6px 8px !important;
}

/* Sound type grid is now directly under strip-header, not inside sound-source-section */

/* Variation section (no label, compact) */
.variation-section {
    padding: 6px 8px !important;
}

/* === INSERT FX (per-strip effects) === */
.insert-fx-section {
    padding: 6px 8px !important;
}

.ins-fx-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    padding: 4px 5px;
    margin-bottom: 4px;
}

.ins-fx-slot:last-child {
    margin-bottom: 0;
}

.ins-fx-header {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-bottom: 3px;
}

.ins-fx-num {
    font-size: 8px;
    font-weight: bold;
    color: var(--orange, #ffaa00);
    width: 20px;
    flex-shrink: 0;
}

.ins-fx-type-name {
    flex: 1;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: var(--cyan);
    padding: 3px 4px;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
}

.ins-fx-toggle {
    width: 32px;
    padding: 3px 4px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: all 0.15s ease;
}

.ins-fx-toggle:hover {
    border-color: var(--green);
    color: var(--green);
}

.ins-fx-toggle.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

/* OFF state: match master FX off style */
.ins-fx-toggle:not(.active):not(.sep) {
    color: var(--text-dim);
    border-color: var(--border-main);
}

/* SEP state: orange to indicate parallel/separate routing */
.ins-fx-toggle.sep {
    background: rgba(255, 170, 0, 0.25);
    border-color: #ffaa00;
    color: #ffaa00;
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

.ins-fx-knobs {
    display: flex;
    justify-content: space-between;
    gap: 0;
    width: 100%;
}

.ins-fx-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    width: 25%;
    min-width: 0;
    flex: 0 0 25%;
}

.ins-fx-knob-container .knob-label {
    font-size: 9px;
    color: #aab7c2;
    width: 28px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.ins-fx-knob-container .knob.knob-tiny {
    width: 22px;
    height: 22px;
}

/* === CTL COLUMN (LFO / VEL / MAC1 / MAC2) === */
/* Uses same structure as other grid-knobs: assign-dots spacer + knob + label */

/* LFO knob - orange */
.knob.lfo-knob {
    border-color: var(--orange-dim);
    position: relative;
}
.knob.lfo-knob:hover {
    border-color: var(--orange);
    box-shadow: 0 0 8px var(--orange-glow);
}
.knob.lfo-knob.active {
    border-color: var(--orange);
    box-shadow: 0 0 8px var(--orange-glow);
}

/* LFO center dot - orange when active (larger in assign mode) */
.lfo-knob .knob-center-dot.active {
    background: var(--orange);
    box-shadow: 0 0 8px var(--orange-glow);
    width: 10px;
    height: 10px;
}

/* LFO rate label - readable in default state */
.knob-label.lfo-rate-label {
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    border: 1px solid rgba(255, 136, 0, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 7px;
    font-weight: bold;
    color: rgba(255, 170, 60, 0.82);
    background: rgba(255, 136, 0, 0.08);
    min-width: 28px;
    text-align: center;
}
.knob-label.lfo-rate-label:hover {
    color: var(--orange-dim);
    border-color: var(--orange-dim);
    background: rgba(255, 136, 0, 0.08);
}
.knob-label.lfo-rate-label.lfo-active {
    color: var(--orange);
    border-color: var(--orange);
    background: rgba(255, 136, 0, 0.12);
    text-shadow: 0 0 4px var(--orange-glow);
}

/* VEL/FIX mode label - readable in default state */
.knob-label.vel-mode-label {
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    border: 1px solid rgba(255, 200, 0, 0.35);
    border-radius: 3px;
    padding: 1px 4px;
    font-size: 7px;
    font-weight: bold;
    color: rgba(255, 220, 90, 0.82);
    background: rgba(255, 200, 0, 0.06);
    min-width: 28px;
    text-align: center;
}
.knob-label.vel-mode-label:hover {
    color: var(--yellow-dim);
    border-color: var(--yellow-dim);
    background: rgba(255, 200, 0, 0.06);
}
/* FIX mode active - highlighted */
.knob-label.vel-mode-label.vel-mode-active {
    color: var(--yellow);
    border-color: var(--yellow);
    background: rgba(255, 200, 0, 0.15);
}
.knob-label.vel-mode-label.vel-mode-active:hover {
    color: #fff;
    border-color: var(--yellow);
    background: rgba(255, 200, 0, 0.25);
}

/* VEL knob - yellow */
.knob.vel-knob {
    border-color: var(--yellow-dim);
    position: relative;
}
.knob.vel-knob:hover {
    border-color: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
}
.knob.vel-knob.active {
    border-color: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
}

/* VEL center dot - yellow when active (larger in assign mode) */
.vel-knob .knob-center-dot.active {
    background: var(--yellow);
    box-shadow: 0 0 8px var(--yellow-glow);
    width: 10px;
    height: 10px;
}

/* Macro knob wrapper */
.macro-knob-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Macro 1 knob - cyan */
.knob.mac1-knob {
    border-color: var(--cyan-dim);
    position: relative;
}
.knob.mac1-knob:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}
.knob.mac1-knob.active {
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

/* Macro 2 knob - magenta */
.knob.mac2-knob {
    border-color: var(--magenta-dim);
    position: relative;
}
.knob.mac2-knob:hover {
    border-color: var(--magenta);
    box-shadow: 0 0 8px var(--magenta-glow);
}
.knob.mac2-knob.active {
    border-color: var(--magenta);
    box-shadow: 0 0 8px var(--magenta-glow);
}

/* Center dot inside macro knobs - clickable for assign mode */
.knob-center-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-dim);
    cursor: pointer;
    z-index: 2;
    transition: all 0.15s ease;
    border: none;
    padding: 0;
}

.knob-center-dot:hover {
    background: var(--text);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
    transform: translate(-50%, -50%) scale(1.3);
}

/* Center dot active = assign mode ON (larger) */
.mac1-knob .knob-center-dot.active {
    background: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
    width: 10px;
    height: 10px;
}

.mac2-knob .knob-center-dot.active {
    background: var(--magenta);
    box-shadow: 0 0 8px var(--magenta-glow);
    width: 10px;
    height: 10px;
}

/* === ASSIGNMENT DOTS (always visible, above knobs) === */
.assign-dots {
    display: flex;
    justify-content: center;
    gap: 2px;
    height: 6px;
    min-height: 6px;
}

.assign-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    display: inline-block;
}

.assign-dot.dot-lfo {
    background: var(--orange);
    box-shadow: 0 0 3px var(--orange-glow);
}

.assign-dot.dot-vel {
    background: var(--yellow);
    box-shadow: 0 0 3px var(--yellow-glow);
}

.assign-dot.dot-mac1 {
    background: var(--cyan);
    box-shadow: 0 0 3px var(--cyan-glow);
}

.assign-dot.dot-mac2 {
    background: var(--magenta);
    box-shadow: 0 0 3px var(--magenta-glow);
}

/* === ASSIGNMENT MODE OVERLAY (when toggle is active) === */

/* In assign mode, knobs that are assignable get a pulsing border */
.assign-mode-active .knob.assign-highlight,
.assign-mode-active .pitch-field.assign-highlight {
    border-color: var(--text-dim) !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15) !important;
    cursor: pointer;
}

/* Assigned to current macro - fully lit in macro color */
.assign-mode-active .knob.assign-assigned,
.assign-mode-active .pitch-field.assign-assigned {
    cursor: pointer;
}

/* Pitch field assigned colors */
.assign-mode-active .pitch-field.assign-assigned.assign-lfo {
    border-color: var(--orange) !important;
    box-shadow: 0 0 8px var(--orange-glow) !important;
    color: var(--orange) !important;
}
.assign-mode-active .pitch-field.assign-assigned.assign-vel {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 8px var(--yellow-glow) !important;
    color: var(--yellow) !important;
}
.assign-mode-active .pitch-field.assign-assigned.assign-mac1 {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 8px var(--cyan-glow) !important;
    color: var(--cyan) !important;
}
.assign-mode-active .pitch-field.assign-assigned.assign-mac2 {
    border-color: var(--magenta) !important;
    box-shadow: 0 0 8px var(--magenta-glow) !important;
    color: var(--magenta) !important;
}
.assign-mode-active .pitch-field.assign-other {
    opacity: 0.5;
}

/* Assigned knob colors by type */
.assign-mode-active .knob.assign-assigned.assign-lfo {
    border-color: var(--orange) !important;
    box-shadow: 0 0 10px var(--orange-glow) !important;
}

.assign-mode-active .knob.assign-assigned.assign-vel {
    border-color: var(--yellow) !important;
    box-shadow: 0 0 10px var(--yellow-glow) !important;
}

.assign-mode-active .knob.assign-assigned.assign-mac1 {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 10px var(--cyan-glow) !important;
}

.assign-mode-active .knob.assign-assigned.assign-mac2 {
    border-color: var(--magenta) !important;
    box-shadow: 0 0 10px var(--magenta-glow) !important;
}

/* Assigned to a different macro - dimmer color */
.assign-mode-active .knob.assign-other {
    opacity: 0.5;
}

/* Max reached - locked out */
.assign-mode-active .knob.assign-maxed {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Grid knobs in assign mode - pointer cursor */
.assign-mode-active .assign-target {
    cursor: pointer;
}

/* Cutoff knob - orange */
.cutoff-knob::before {
    background: var(--orange);
    box-shadow: 0 0 5px var(--orange);
}

/* Filter knob - magenta */
.filter-knob::before {
    background: var(--magenta);
    box-shadow: 0 0 5px var(--magenta);
}

/* === SAMPLE SELECTOR === */
.sample-selector {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sample-name {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: var(--orange);
    padding: 6px 4px;
    background: rgba(255, 136, 0, 0.1);
    border: 1px solid rgba(255, 136, 0, 0.3);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.1s ease;
}

.sample-name:hover {
    background: rgba(255, 136, 0, 0.25);
    border-color: var(--orange);
}

.sample-name:active {
    transform: scale(0.98);
}

.folder-name {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: var(--cyan);
    padding: 6px 4px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.1s ease;
}

.folder-name:hover {
    background: rgba(0, 255, 255, 0.25);
    border-color: var(--cyan);
}

.folder-name:active {
    transform: scale(0.98);
}

.category-name {
    flex: 1;
    text-align: center;
    font-size: 9px;
    color: var(--magenta);
    padding: 6px 4px;
    background: rgba(255, 0, 255, 0.1);
    border: 1px solid rgba(255, 0, 255, 0.3);
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.browser-section {
    padding-top: 4px;
}

.category-row {
    /* Category row inside browser-section, same style as other rows */
}

.transpose-section {
    transition: all 0.2s ease;
}

.transpose-value {
    flex: 1;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: var(--green);
    padding: 6px 4px;
    background: rgba(0, 255, 0, 0.1);
    border: 1px solid rgba(0, 255, 0, 0.3);
    border-radius: 2px;
    min-width: 30px;
}

/* === EQ SECTION === */
.eq-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.eq-label {
    width: 24px;
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.eq-slider {
    flex: 1;
    height: 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.eq-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
    border-radius: 1px;
    transition: width 0.1s;
}

.eq-slider:hover {
    border-color: var(--cyan);
}

/* === COMPRESSOR SECTION === */
.comp-knobs-row {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    padding: 4px 0;
}

.comp-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.comp-knob-container .knob-label {
    font-size: 8px;
    color: var(--text-dim);
    text-transform: uppercase;
}

.comp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.comp-label {
    width: 32px;
    font-size: 9px;
    color: #a7b5c0;
    text-transform: uppercase;
}

.comp-slider {
    flex: 1;
    height: 6px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    border-radius: 2px;
    position: relative;
    cursor: pointer;
}

.comp-slider-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--magenta-dim), var(--magenta));
    border-radius: 1px;
    transition: width 0.1s;
}

.comp-slider:hover {
    border-color: var(--magenta);
}

/* === VOLUME/VU/PAN SECTION === */
.vol-vu-pan-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1px 4px;
    gap: 8px;
}

.mono-width-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 3px 6px 3px;
    margin-top: 5px;
    margin-bottom: -8px;
}

.mono-width-slider {
    position: relative;
    width: 100%;
    height: 8px;
    border: 1px solid var(--border-main);
    border-radius: 6px;
    background: rgba(18, 24, 34, 0.95);
    cursor: ew-resize;
    user-select: none;
}

.mono-width-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    border-radius: 6px;
    background: linear-gradient(90deg, #39576b, #5c7382);
    pointer-events: none;
}

.mono-width-pin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: #9ca7b2;
    border: 1px solid #4f5b68;
    box-shadow: 0 0 0 1px rgba(8, 12, 18, 0.6), 0 0 8px rgba(0, 0, 0, 0.45);
    pointer-events: none;
}

.mono-width-scale {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    padding: 0 6px;
}

.mono-width-side {
    font-size: 9px;
    color: #5e6570;
    letter-spacing: 0.6px;
}

.sc-mode-row {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
}

.sc-mode-btn {
    width: 40px;
    height: 15px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(58, 66, 78, 0.75);
    border-radius: 0;
    background: #1c222b;
    color: #4f5863;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    line-height: 1;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.sc-mode-btn.active {
    border-color: #ad9a5e;
    color: #a7945a;
    background: rgba(197, 168, 90, 0.18);
}

.sc-mode-btn.gfx-btn.active {
    border-color: var(--green);
    color: var(--green);
    background: rgba(0, 255, 136, 0.16);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

.jt-ctl-help-tooltip {
    position: fixed;
    z-index: 12000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    max-width: 240px;
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 221, 255, 0.42);
    background: linear-gradient(180deg, rgba(4, 18, 30, 0.96) 0%, rgba(8, 13, 24, 0.96) 100%);
    color: #88eaff;
    font-size: 10px;
    letter-spacing: 0.35px;
    text-shadow: 0 0 6px rgba(28, 210, 255, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 150, 200, 0.28);
    backdrop-filter: blur(2px);
}

.jt-ctl-help-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.jt-ui-tooltip {
    position: fixed;
    z-index: 13000;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.1s ease, transform 0.1s ease;
    max-width: 260px;
    padding: 7px 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 221, 255, 0.42);
    background: linear-gradient(180deg, rgba(4, 18, 30, 0.96) 0%, rgba(8, 13, 24, 0.96) 100%);
    color: #88eaff;
    font-size: 10px;
    letter-spacing: 0.35px;
    text-shadow: 0 0 6px rgba(28, 210, 255, 0.35);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(0, 150, 200, 0.28);
    backdrop-filter: blur(2px);
    white-space: nowrap;
}

.jt-ui-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

.vol-vu-pan-row .knob-container .knob-label {
    margin-bottom: 5px;
}

.vol-pan-row {
    display: flex;
    justify-content: space-around;
    padding: 8px 0;
}

/* === VU METER === */
.vu-meter-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.vu-meter {
    display: flex;
    gap: 3px;
    height: 60px;
}

.vu-meter-bg {
    width: 8px;
    height: 100%;
    background: linear-gradient(to top, 
        #001a1a 0%, 
        #002a2a 30%, 
        #003333 60%, 
        #004444 100%);
    border: 1px solid var(--border-main);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.vu-meter-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, #00aaff, #00ff88);
    border-radius: 1px;
    transition: height 0.05s ease-out;
}

.vu-label {
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 2px;
}

/* === DJ FILTER KNOB === */
.dj-filter-knob::before {
    background: linear-gradient(135deg, var(--cyan), var(--magenta));
    box-shadow: 0 0 8px var(--cyan);
}

.reso-knob::before {
    background: linear-gradient(135deg, var(--magenta), #ff6688);
    box-shadow: 0 0 6px var(--magenta);
}

.vol-knob::before {
    background: var(--green);
    box-shadow: 0 0 5px var(--green);
}

.pan-knob::before {
    background: var(--orange);
    box-shadow: 0 0 5px var(--orange);
}

/* === MUTE/SOLO === */
.mute-solo-row {
    display: flex;
    gap: 4px;
}

/* Mute/Solo/Arm Row */
.mute-solo-arm-row {
    display: flex;
    gap: 3px;
}

.btn-mute, .btn-solo, .btn-arm {
    flex: 1;
    padding: 8px 4px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
}

.btn-mute:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.btn-mute.active {
    background: linear-gradient(180deg, #3a2510 0%, #2a1a08 100%);
    border-color: var(--orange);
    color: var(--orange);
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.3);
}

.btn-solo:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.btn-solo.active {
    background: linear-gradient(180deg, #102a3a 0%, #081a2a 100%);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.btn-arm:hover {
    border-color: var(--red);
    color: var(--red);
}

.btn-arm.active,
.btn-arm.rec {
    background: linear-gradient(180deg, #3a1020 0%, #2a0815 100%);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
    animation: arm-pulse 1s infinite;
}

/* Variation rows - 3 levels */
.variation-row {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 3px;
}

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

.btn-tiny {
    width: 18px;
    height: 20px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 9px;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-tiny:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.var-field {
    flex: 1;
    text-align: center;
    font-size: 8px;
    font-weight: bold;
    padding: 0 4px;
    height: 20px;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Style - cyan (House etc.) */
.var-style {
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    font-size: 12px !important;
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Type - magenta (Bass etc.) */
.var-type {
    color: var(--magenta);
    background: rgba(255, 0, 255, 0.1);
    border: 1px solid rgba(255, 0, 255, 0.3);
    font-size: 12px !important;
    letter-spacing: 0.5px;
    text-transform: none;
}

/* Var number - green */
.var-num {
    color: var(--green);
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.var-sub {
    color: #ffaa33;
    background: rgba(255, 170, 51, 0.1);
    border: 1px solid rgba(255, 170, 51, 0.3);
}

/* Folder field - clickable */
.folder-field {
    cursor: pointer;
}

.folder-field:hover,
.sample-field:hover {
    background: rgba(255, 136, 0, 0.2);
}

/* Sample field - clickable */
.sample-field {
    cursor: pointer;
}

/* === Consistent field-top / field-bottom styling across ALL modes === */
/* Both fields: identical height, same border */
.var-field.field-top,
.var-field.field-bottom {
    color: #ff8800;
    background: rgba(255, 136, 0, 0.08);
    border: 1px solid rgba(255, 136, 0, 0.35);
    height: 20px;
    line-height: 20px;
    padding: 0 4px;
    box-sizing: border-box;
}

/* Top field (category/folder name) */
.var-field.field-top {
    font-size: 12px !important;
    text-transform: none;
    letter-spacing: 0.5px;
}

/* Bottom field (instrument/sample name) */
.var-field.field-bottom {
    font-size: 12px !important;
    text-transform: none;
    letter-spacing: 0.3px;
}

/* Loading animation: individual letter spans inside field-bottom */
.var-field.field-bottom span {
    display: inline;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

/* Transpose field - light blue, compact (smaller than main fields) */
.transpose-field {
    color: #88ccff;
    background: rgba(136, 204, 255, 0.1);
    border: 1px solid rgba(136, 204, 255, 0.3);
    height: 16px;
    line-height: 16px;
}

.transpose-compact {
    flex: 1 1 auto;
    min-width: 24px;
    max-width: 36px;
    font-size: 8px;
    padding: 0 1px;
    height: 18px;
    line-height: 18px;
}

/* Pitch field - light green, compact (smaller than main fields) */
.pitch-field {
    color: #88ffaa;
    background: rgba(136, 255, 170, 0.1);
    border: 1px solid rgba(136, 255, 170, 0.3);
    height: 16px;
    line-height: 16px;
}

.pitch-compact {
    flex: 1 1 auto;
    min-width: 24px;
    max-width: 36px;
    font-size: 8px;
    padding: 0 1px;
    height: 18px;
    line-height: 18px;
}

/* Pitch modulation wrapper - holds pitch field + assign dots below */
.pitch-mod-wrap {
    position: relative;
    flex: 1 1 auto;
    min-width: 24px;
    max-width: 36px;
    display: flex;
    align-items: center;
}

.pitch-mod-wrap .assign-dots {
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    height: 5px;
    min-height: 5px;
}

.pitch-mod-wrap .pitch-field {
    width: 100%;
}

/* Smaller +/- buttons for transpose */
.btn-xs {
    width: 15px !important;
    height: 18px !important;
    font-size: 9px !important;
    padding: 0 !important;
}

/* RND button - dice cube: black bg with orange dots */
.btn-rnd-cube {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px;
    padding: 0 !important;
    background: #111;
    border: 1px solid #ff8800;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    margin: 0 2px;
    box-shadow: 0 0 4px rgba(255, 170, 51, 0.3);
    position: relative;
}

/* Dice dots: 5 dots (die face 5) - compact spacing for 16px box */
/* Inner area ~12x12 after border. Dots 2px, spaced evenly */
.btn-rnd-cube::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffaa33;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    box-shadow:
        8px 0 0 0 #ffaa33,
        0 8px 0 0 #ffaa33,
        8px 8px 0 0 #ffaa33,
        4px 4px 0 0 #ffaa33;
}

.btn-rnd-cube:hover {
    background: #1a1a1a;
    border-color: #ffaa33;
    box-shadow: 0 0 8px rgba(255, 170, 51, 0.5);
}

.btn-rnd-cube:hover::before {
    background: #ffcc66;
    box-shadow:
        8px 0 0 0 #ffcc66,
        0 8px 0 0 #ffcc66,
        8px 8px 0 0 #ffcc66,
        4px 4px 0 0 #ffcc66;
}

.btn-rnd-cube:active {
    background: #0a0a0a;
    transform: scale(0.9);
}

.var-sub-combined {
    gap: 1px;
}

.var-sub-combined .var-field {
    font-size: 9px;
    padding: 0 2px;
    height: 18px;
    line-height: 18px;
    min-width: 0;
}

.var-sub-combined .btn-tiny {
    height: 18px;
}

.btn-rnd {
    width: auto !important;
    min-width: 28px;
    height: 16px !important;
    font-size: 7px !important;
    font-weight: bold;
    padding: 0 3px !important;
    color: #ffaa33;
    border-color: rgba(255, 170, 51, 0.4);
    letter-spacing: 0.5px;
    margin-left: 2px;
}

.btn-rnd:hover {
    background: rgba(255, 170, 51, 0.2);
    border-color: #ffaa33;
    color: #ffdd88;
}

/* Category field - styled via field-top/field-bottom classes */
.category-field {
    /* Base styles overridden by .field-top / .field-bottom */
}

/* Strip footer */
.strip-footer {
    margin-top: auto;
    border-top: 1px solid var(--cyan-dim);
}

/* ===================================
   EFFECT STRIP STYLES
   =================================== */

.effect-strip {
    width: 200px;
    background: var(--bg-strip);
    border: 2px solid var(--magenta-dim);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 
        0 0 20px rgba(0, 0, 0, 0.5),
        inset 0 0 30px rgba(255, 0, 255, 0.02);
}

.effect-strip .strip-header {
    border-bottom-color: var(--magenta-dim);
}

.effect-strip .strip-header::before {
    background: linear-gradient(90deg, transparent, var(--magenta), transparent);
}

.effect-strip .strip-title {
    color: var(--magenta);
    text-shadow: 0 0 10px var(--magenta-glow);
}

.effect-strip .fx-header-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.fx-sc-top {
    display: flex;
    align-items: center;
    gap: 6px;
}

.fx-sc-top-label {
    font-size: 9px;
    color: #ffd95a;
    letter-spacing: 0.8px;
}

.fx-sc-trigger {
    min-width: 34px;
    text-align: center;
    font-size: 10px;
    color: #ffd95a;
    font-weight: bold;
}

/* Effect strip sections - smaller padding */
.effect-strip .strip-section {
    padding: 6px 6px;
}

/* FX Section */
.fx-section {
    padding: 6px !important;
}

/* FX Slot */
.fx-slot {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    padding: 6px;
    margin-bottom: 6px;
}

.fx-slot:last-child {
    margin-bottom: 0;
}

/* Global FX (FX5) - same style as others but with subtle separator */
.fx-slot.fx-global {
    margin-top: 4px;
    border-top: 1px solid var(--border-main);
}

.fx-slot.fx-slot-sc {
    border-color: rgba(255, 204, 0, 0.5);
    background: rgba(48, 36, 0, 0.25);
}

.fx-slot.fx-slot-sc .fx-num,
.fx-slot.fx-slot-sc .fx-type-name {
    color: #ffd95a;
}

.fx-slot.fx-slot-sc .fx-type-name {
    background: rgba(255, 208, 0, 0.12);
    border-color: rgba(255, 208, 0, 0.4);
}

.fx-slot.fx-slot-sc .fx-header {
    justify-content: space-between;
}

.fx-slot.fx-slot-sc .fx-type-name {
    flex: 1;
}

.fx-header {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

.fx-num {
    font-size: 9px;
    font-weight: bold;
    color: var(--magenta);
    width: 24px;
}

.fx-selector {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
}

.fx-type-name {
    flex: 1;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    color: var(--cyan);
    padding: 3px 4px;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.fx-toggle {
    width: 28px;
    padding: 3px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 8px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.fx-toggle:hover {
    border-color: var(--green);
    color: var(--green);
}

.fx-toggle.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
}

.fx-toggle.sep {
    background: rgba(255, 170, 0, 0.25);
    border-color: #ffaa00;
    color: #ffaa00;
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.4);
}

.fx-sc-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 5px;
}

.fx-sc-low-btn {
    height: 18px;
    padding: 0 6px;
    background: rgba(38, 40, 28, 0.88);
    border: 1px solid rgba(72, 70, 45, 0.9);
    color: #656248;
    font-size: 8px;
    cursor: pointer;
}

.fx-sc-low-btn.active {
    background: rgba(255, 208, 0, 0.18);
    border-color: #ccb04a;
    color: #ffd95a;
}

.fx-sc-input-meter {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
    margin-left: -10px;
}

.fx-sc-input-led {
    width: 8px;
    height: 12px;
    border-radius: 2px;
    border: 1px solid rgba(55, 65, 75, 0.9);
    background: rgba(28, 34, 42, 0.95);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.45);
    display: inline-block;
}

.fx-sc-input-led.active {
    border-color: rgba(220, 230, 240, 0.3);
}

/* FX Knobs Row */
.fx-knobs {
    display: flex;
    justify-content: space-between;
}

.fx-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.fx-knob-container .knob-label {
    font-size: 9px;
    color: #aab7c2;
}

/* 8-Band EQ */
.eq8-row {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

.eq8-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.eq8-knob-container .knob-label {
    font-size: 8px;
    color: var(--orange);
}

.eq-knob::before {
    background: var(--orange) !important;
    box-shadow: 0 0 5px var(--orange) !important;
}

/* Gain slider - green */
.gain-slider .comp-slider-fill {
    background: linear-gradient(90deg, var(--green-dim), var(--green)) !important;
}

/* I/O Row */
.io-row {
    display: flex;
    justify-content: space-around;
    padding: 2px 0;
}

.io-knob {
    width: 32px;
    height: 32px;
}

.io-knob::before {
    height: 11px;
}

/* Master I/O Section - Larger knobs and tall VU meter */
.master-io-section {
    padding: 8px 5px;
}

.master-tools-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    padding: 0 2px;
}

.master-tool-toggle {
    border: 1px solid #2f3640;
    background: #0c1118;
    color: #5a6471;
    font-size: 8px;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.55;
    letter-spacing: 0.2px;
    transition: all 0.16s ease;
}

.master-tool-toggle:hover {
    opacity: 0.75;
    color: #7b8796;
    border-color: #445063;
}

.master-tool-toggle.active {
    color: #7fe9ff;
    border-color: #00d8ff;
    background: rgba(0, 120, 180, 0.18);
    box-shadow: 0 0 8px rgba(0, 216, 255, 0.28);
    opacity: 1;
}

.master-io-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.master-knob-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.master-io-knob {
    width: 44px;
    height: 44px;
    border-width: 3px;
}

.master-io-knob::before {
    height: 16px;
    width: 3px;
}

/* Master Dual VU Meter - Tall */
.master-vu-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.master-vu-meter {
    display: flex;
    gap: 4px;
    height: 80px;
}

.master-vu-bg {
    width: 10px;
    height: 100%;
    background: linear-gradient(to top, 
        var(--green-dim) 0%, 
        var(--green-dim) 60%, 
        #664400 60%, 
        #664400 80%, 
        #440000 80%, 
        #440000 100%
    );
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

.master-vu-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(to top, 
        var(--green) 0%, 
        var(--green) 60%, 
        var(--orange) 60%, 
        var(--orange) 80%, 
        var(--red) 80%, 
        var(--red) 100%
    );
    transition: height 0.05s ease-out;
}

.master-vu-label {
    font-size: 8px;
    color: var(--text-dim);
    letter-spacing: 6px;
}

/* === SEQUENCER POPUP - FULLSCREEN 64x48 === */
.seq-popup-overlay {
    position: fixed;
    top: 62px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 62px);
    background: rgba(5, 10, 20, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.seq-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.seq-popup-fullscreen {
    --seq-row-height: 12px;
    --seq-step-header-height: 14px;
    width: calc(100vw - 40px);
    height: calc(100vh - 100px);
    max-width: 1800px;
    max-height: 880px;
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 4px;
    box-shadow: 
        0 0 50px var(--cyan-glow),
        0 0 100px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
}

.seq-popup-overlay.visible .seq-popup-fullscreen {
    transform: scale(1);
}

.seq-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(180deg, #1a2530 0%, #0d1219 100%);
    border-bottom: 1px solid var(--cyan-dim);
    flex-shrink: 0;
}

.seq-popup-header-main {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.seq-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 2px;
    white-space: nowrap;
}

.seq-playback-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border: 1px solid var(--cyan-dim);
    background: rgba(0, 255, 255, 0.05);
    border-radius: 2px;
}

.seq-playback-label {
    font-size: 9px;
    color: var(--text-dim);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.seq-playback-boxes {
    display: flex;
    align-items: center;
    gap: 4px;
}

.seq-playback-box {
    width: 22px;
    height: 14px;
    border: 1px solid var(--border-main);
    background: #09111a;
    color: #7aa6bf;
    font-size: 8px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    position: relative;
    padding: 0;
    overflow: hidden;
}

.seq-playback-box:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.seq-playback-box.active {
    border-color: #ffd400;
    color: #ffd400;
    box-shadow: 0 0 8px rgba(255, 212, 0, 0.45);
}

.seq-playback-box-index {
    position: relative;
    z-index: 2;
}

.seq-playback-progress {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(0, 255, 255, 0.35), rgba(255, 212, 0, 0.45));
    pointer-events: none;
    z-index: 1;
}

.seq-popup-fullscreen.seq-piano-roll-mode .seq-popup-title {
    color: #9ad9ff;
    text-shadow: 0 0 8px rgba(90, 200, 255, 0.4);
}

/* Sequencer Transport */
.seq-transport {
    display: flex;
    gap: 8px;
}

.seq-transport-btn {
    padding: 6px 14px;
    background: var(--bg-section);
    border: 1px solid var(--cyan-dim);
    color: var(--cyan);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
}

.seq-transport-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.seq-transport-btn.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--green);
    color: var(--green);
}

.seq-transport-btn.rec {
    background: rgba(255, 50, 50, 0.25);
    border-color: #ff3333;
    color: #ff3333;
    animation: recordPulse 1s infinite;
}

/* ARM buttons group R1-R8 */
.seq-arm-group {
    display: flex;
    gap: 8px;
    margin-right: 0;
}

.seq-arm-btn {
    padding: 10px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 36px;
    text-transform: uppercase;
}

.seq-arm-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.seq-arm-btn.active {
    background: linear-gradient(180deg, #3a1020 0%, #2a0815 100%);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
}

.seq-arm-btn.rec {
    background: linear-gradient(180deg, #3a1020 0%, #2a0815 100%);
    border-color: var(--red);
    color: var(--red);
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.4);
    animation: arm-pulse 1s infinite;
}

.seq-info {
    font-size: 11px;
    color: var(--text-dim);
}

.seq-popup-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.seq-popup-close:hover {
    background: var(--red);
    color: #fff;
}

/* Unified top-right close button style for SEQ / LOAD / SAVE / AUTO dialogs */
.dialog-close-x {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 16px;
    line-height: 1;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    transition: all 0.15s;
}

.dialog-close-x:hover {
    background: var(--red);
    color: #fff;
}

/* === GRID WRAPPER - Scrollable === */
.seq-grid-wrapper {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    background: var(--bg-dark);
    position: relative;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 150, 255, 0.45) rgba(0, 34, 64, 0.22);
}

.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper {
    cursor: crosshair;
}

.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-hover-selected {
    cursor: grab;
}

.seq-popup-fullscreen.seq-select-mode .seq-cell.active.selected,
.seq-popup-fullscreen.seq-select-mode .seq-free-note.selected {
    cursor: grab;
}

.seq-popup-fullscreen.seq-select-mode .seq-cell.selected {
    cursor: grab;
}

.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-dragging-selected,
.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-dragging-selected .seq-cell.active.selected,
.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-dragging-selected .seq-free-note.selected {
    cursor: grabbing;
}

/* Drag preview: show where selected notes will land before mouseup */
.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-drag-preview .seq-cell.active.selected,
.seq-popup-fullscreen.seq-select-mode .seq-grid-wrapper.selection-drag-preview .seq-free-note.selected {
    transform: translate(var(--sel-drag-x, 0px), var(--sel-drag-y, 0px));
    transition: none;
    z-index: 70;
}

.seq-grid-wrapper::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.seq-grid-wrapper::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}

.seq-grid-wrapper::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}

.seq-grid-wrapper::-webkit-scrollbar-thumb:hover,
.seq-grid-wrapper::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

/* === STEP GRID - 64 columns x 73 rows (C1-C7) === */
.seq-grid {
    display: grid;
    grid-template-columns: 32px repeat(64, minmax(16px, 1fr));
    gap: 1px;
    background: #0a0e14;
    padding: 0;
    width: fit-content;
    min-width: 100%;
}

/* Stack base grid + free-note overlay without affecting layout */
.seq-grid-stack {
    position: relative;
    width: fit-content;
    min-width: 100%;
}

.seq-grid-stack.piano-roll-mode .seq-cell {
    background: rgba(3, 14, 30, 0.55);
}

.seq-grid-stack.piano-roll-mode .seq-cell.black-key-row {
    background: rgba(2, 8, 18, 0.9);
}

.seq-grid-stack.piano-roll-mode .seq-cell.octave-row {
    background: rgba(8, 26, 48, 0.42);
}

.seq-grid-stack.piano-roll-mode .seq-cell.c-row {
    background: rgba(12, 38, 66, 0.62);
    box-shadow: inset 0 1px 0 rgba(0, 238, 255, 0.18), inset 0 -1px 0 rgba(0, 238, 255, 0.12);
}

.seq-free-layer {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 32px repeat(64, minmax(16px, 1fr));
    gap: 1px;
    pointer-events: none;
    z-index: 6;
}

.seq-popup-fullscreen.seq-select-mode .seq-free-layer {
    pointer-events: none;
}

.seq-selection-box {
    position: absolute;
    border: 2px dashed #00eaff;
    background: rgba(0, 234, 255, 0.16);
    box-shadow: 0 0 14px rgba(0, 234, 255, 0.5);
    pointer-events: none;
    z-index: 50;
    display: none;
}

.seq-selection-box.visible {
    display: block;
}

.seq-note-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    font-size: 8px;
    color: var(--text-dim);
    background: var(--bg-section);
    height: var(--seq-row-height);
    position: sticky;
    left: 0;
    z-index: 10;
}

.seq-note-label.black-key-row {
    background: rgba(6, 10, 16, 0.98);
    color: #7f95ab;
}

.seq-note-label.c-row {
    background: rgba(10, 28, 46, 0.96);
    color: #8fe8ff;
    font-weight: 700;
    border-top: 1px solid rgba(0, 238, 255, 0.2);
    border-bottom: 1px solid rgba(0, 238, 255, 0.14);
}

.seq-note-label.octave-row {
    color: var(--cyan);
    font-weight: bold;
    background: rgba(0, 255, 255, 0.05);
}

.seq-corner {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 20;
    background: var(--bg-strip);
}

.seq-step-num {
    font-size: 7px;
    color: var(--text-dim);
    text-align: center;
    padding: 2px 0;
    background: var(--bg-section);
    height: var(--seq-step-header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 5;
    cursor: pointer;
}

.seq-step-num.bar-start {
    color: var(--cyan);
    font-weight: bold;
    background: rgba(0, 255, 255, 0.1);
    border-left: 2px solid var(--cyan);
}

.seq-step-num.beat-start {
    color: var(--text);
    background: rgba(255, 255, 255, 0.03);
}

.seq-step-num.playhead {
    color: #ffcc00;
    background: rgba(255, 200, 0, 0.3);
    border: 1px solid #ffcc00;
    box-shadow: 0 0 6px #ffcc00;
    font-weight: bold;
}

.seq-step-num.paste-anchor {
    background: rgba(255, 255, 255, 0.14);
    border-left: 2px solid #ffffff;
    color: #ffffff;
}

/* === GRID CELLS === */
.seq-cell {
    height: var(--seq-row-height);
    background: #0f141c;
    border: 1px solid #1a2030;
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><circle cx="4" cy="4" r="3" fill="%2300ffff"/></svg>') 4 4, default;
    transition: background 0.05s;
}

/* Free-position MIDI notes (float position within grid) */
.seq-free-note {
    --free-vel: 0.78;
    --free-len: 1;
    height: var(--seq-row-height);
    position: relative;
    background: linear-gradient(
        135deg,
        hsl(195 96% calc(16% + (var(--free-vel) * 40%))) 0%,
        hsl(186 96% calc(18% + (var(--free-vel) * 42%))) 100%
    );
    border: 1px solid hsl(189 94% calc(26% + (var(--free-vel) * 36%)));
    border-radius: 1px;
    z-index: 5;
    pointer-events: none;
    margin-left: var(--free-left, 0%);
    width: calc(var(--free-width, 100%) + ((var(--free-len, 1) - 1) * 1px));
    box-shadow: 0 0 6px rgba(70, 170, 255, 0.42), inset 0 0 3px rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.seq-popup-fullscreen.seq-select-mode .seq-free-note {
    pointer-events: auto;
    cursor: pointer;
}

.seq-free-note.selected {
    background: linear-gradient(135deg, #ffd400, #fff07a);
    border-color: #ffd400;
    box-shadow: 0 0 0 2px #ffd400, 0 0 20px rgba(255, 212, 0, 0.95), inset 0 0 6px rgba(255, 250, 190, 0.72);
    filter: saturate(1.28) brightness(1.12);
}

.seq-cell:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan-dim);
}

.seq-cell.bar-start {
    border-left: 2px solid rgba(0, 255, 255, 0.3);
}

.seq-cell.beat-start {
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.seq-cell.paste-anchor {
    border-left: 2px solid rgba(255, 255, 255, 0.92);
}

.seq-cell.octave-row {
    background: rgba(0, 255, 255, 0.02);
}

/* Drag highlight - cells being covered during note length drag */
.seq-cell.drag-highlight {
    background: rgba(255, 0, 255, 0.4);
    border-color: var(--magenta);
    box-shadow: 0 0 6px rgba(255, 0, 255, 0.5);
}

/* Active notes - colorful velocity-based styling */
.seq-cell.active {
    --vel-norm: 0.78;
    background: linear-gradient(
        135deg,
        hsl(195 94% calc(14% + (var(--vel-norm) * 36%))) 0%,
        hsl(188 96% calc(16% + (var(--vel-norm) * 42%))) 58%,
        hsl(178 95% calc(14% + (var(--vel-norm) * 36%))) 100%
    );
    border-color: hsl(188 94% calc(18% + (var(--vel-norm) * 42%)));
    box-shadow:
        0 0 6px rgba(50, 185, 255, 0.44),
        inset 0 0 3px rgba(255, 255, 255, 0.24);
    position: relative;
}

.seq-cell.selected {
    outline: none;
    box-shadow: none;
}

.seq-cell.active.selected {
    border-color: #ffd400;
    background: linear-gradient(135deg, #ffe45a 0%, #ffd400 55%, #fff2a6 100%);
    box-shadow: 0 0 0 2px #ffd400, 0 0 20px rgba(255, 212, 0, 0.92), inset 0 0 8px rgba(255, 250, 190, 0.68);
    filter: saturate(1.3) brightness(1.12);
}

/* MIDI-recorded notes get extra styling */
.seq-cell.active.midi-recorded {
    background: inherit;
    border-color: inherit;
    box-shadow: inherit;
}

/* Multi-step note (drawn manually) - show length visually */
.seq-cell.active.long {
    position: relative;
    z-index: 18;
    overflow: visible;
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Long MIDI-recorded notes follow the same style as drawn notes */
.seq-cell.active.long.midi-recorded {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

/* Selected notes must stay yellow regardless of velocity/source styling */
.seq-cell.active.selected,
.seq-cell.active.selected.midi-recorded,
.seq-cell.active.selected.long,
.seq-cell.active.selected.long.midi-recorded {
    border-color: #ffd400;
    background: linear-gradient(135deg, #ffe45a 0%, #ffd400 55%, #fff2a6 100%);
    box-shadow: 0 0 0 2px #ffd400, 0 0 20px rgba(255, 212, 0, 0.92), inset 0 0 8px rgba(255, 250, 190, 0.68);
    filter: saturate(1.3) brightness(1.12);
}

/* Note length bar - continuous body with fade-out at end */
.seq-cell.active.long::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: var(--note-len-px, calc((var(--note-len, 1) * 100%) + ((var(--note-len, 1) - 1) * 1px)));
    height: 100%;
    --note-fade-start: clamp(48%, calc(96% - ((var(--note-len, 1) - 1) * 4%)), 90%);
    --note-fade-mid: calc(var(--note-fade-start) + 6%);
    background: linear-gradient(
        90deg,
        hsl(190 92% calc(10% + (var(--vel-norm) * 24%)) / 0.95) 0%,
        hsl(187 92% calc(11% + (var(--vel-norm) * 22%)) / 0.92) var(--note-fade-start),
        hsl(185 92% calc(11% + (var(--vel-norm) * 18%)) / 0.48) var(--note-fade-mid),
        hsl(184 92% calc(10% + (var(--vel-norm) * 16%)) / 0.0) 100%
    );
    border: 1px solid hsla(193, 92%, 68%, 0.70);
    border-right-color: hsla(193, 92%, 68%, 0.26);
    pointer-events: none;
    z-index: 7;
    border-radius: 2px;
}

/* MIDI-recorded long note body */
.seq-cell.active.long.midi-recorded::before {
    background: linear-gradient(
        90deg,
        hsl(190 92% calc(10% + (var(--vel-norm) * 24%)) / 0.95) 0%,
        hsl(187 92% calc(11% + (var(--vel-norm) * 22%)) / 0.92) var(--note-fade-start),
        hsl(185 92% calc(11% + (var(--vel-norm) * 18%)) / 0.48) var(--note-fade-mid),
        hsl(184 92% calc(10% + (var(--vel-norm) * 16%)) / 0.0) 100%
    );
    border-color: hsla(193, 92%, 68%, 0.70);
    border-right-color: hsla(193, 92%, 68%, 0.26);
}

.seq-cell.active.long.selected::before,
.seq-cell.active.long.selected.midi-recorded::before {
    background: linear-gradient(
        90deg,
        rgba(255, 228, 90, 0.95) 0%,
        rgba(255, 212, 0, 0.92) 58%,
        rgba(255, 212, 0, 0.90) 100%
    );
    border-color: rgba(255, 212, 0, 0.92);
    border-right-color: rgba(255, 212, 0, 0.55);
}

/* In SELECT, long-note head cell should not show yellow chunky square. */
.seq-cell.active.long.selected,
.seq-cell.active.long.selected.midi-recorded {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    filter: none;
}

/* Wrapped continuation shown at loop start as a continuous line */
.seq-free-note.wrapped {
    background: linear-gradient(
        90deg,
        hsla(334, 95%, 58%, 0.90) 0%,
        hsla(321, 96%, 54%, 0.82) 56%,
        hsla(316, 98%, 52%, 0.52) 82%,
        hsla(312, 100%, 50%, 0.18) 94%,
        hsla(310, 100%, 50%, 0.0) 100%
    );
    border-color: hsla(334, 96%, 62%, 0.66);
    box-shadow: 0 0 8px rgba(255, 50, 140, 0.45), inset 0 0 4px rgba(255, 190, 230, 0.2);
}

.seq-free-note.draw-wrapped {
    border-top-style: solid;
    border-bottom-style: solid;
}

.seq-free-note.wrapped.selected {
    background: linear-gradient(
        90deg,
        rgba(255, 228, 90, 0.95) 0%,
        rgba(255, 212, 0, 0.86) 58%,
        rgba(255, 212, 0, 0.38) 92%,
        rgba(255, 212, 0, 0.0) 100%
    );
    border-color: rgba(255, 212, 0, 0.9);
    box-shadow: 0 0 0 2px rgba(255, 212, 0, 0.9), 0 0 14px rgba(255, 212, 0, 0.55);
}

/* Playhead line - vertical cursor */
.seq-playhead-line {
    position: absolute;
    top: 0;
    width: 2px;
    height: 100%;
    background: #ffcc00;
    box-shadow: 0 0 8px #ffcc00, 0 0 4px #ff8800;
    z-index: 100;
    pointer-events: none;
    display: none;
}

/* Outside loop - greyed out cells */
.seq-cell.outside-loop {
    background: #0a0c10;
    border-color: #12161c;
    opacity: 0.4;
}

.seq-cell.outside-loop:hover {
    background: rgba(80, 80, 80, 0.15);
    border-color: #2a3040;
}

.seq-cell.outside-loop.active {
    background: #444;
    border-color: #555;
    box-shadow: none;
}

.seq-step-num.outside-loop {
    color: #333;
    opacity: 0.5;
}

/* Loop button */
.loop-btn {
    min-width: 36px;
    background: rgba(255, 136, 0, 0.1) !important;
    border-color: var(--orange) !important;
    color: var(--orange) !important;
}

/* Delay/Offset button */
.delay-btn {
    min-width: 32px;
    background: rgba(255, 0, 255, 0.1) !important;
    border-color: var(--magenta) !important;
    color: var(--magenta) !important;
}

.seq-cell.playhead.active {
    background: #ff5500;
    box-shadow: 0 0 10px #ff5500, 0 0 20px rgba(255, 85, 0, 0.5);
}

/* Record Button */
.seq-record-btn {
    padding: 6px 14px;
    background: var(--bg-section);
    border: 2px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
}

.seq-record-btn:hover {
    border-color: #ff3333;
    color: #ff3333;
}

.seq-record-btn.active {
    background: rgba(255, 50, 50, 0.3);
    border-color: #ff3333;
    color: #ff3333;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.5);
    animation: recordPulse 1s infinite;
}

@keyframes recordPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 50, 50, 0.5); }
    50% { box-shadow: 0 0 20px rgba(255, 50, 50, 0.8); }
}

/* Save Pattern Dialog */
.save-pattern-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 220000;
    overflow: hidden;
    padding: 80px 0 25px;
}

.save-pattern-dialog {
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 8px;
    width: 1340px;
    max-width: 96vw;
    height: calc(100vh - 155px);
    max-height: calc(100vh - 155px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.save-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-main);
    background: rgba(0, 255, 255, 0.05);
}

.save-dialog-title {
    color: var(--cyan);
    font-size: 14px;
    font-weight: bold;
}

.save-dialog-close {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 16px;
    cursor: pointer;
}

.save-dialog-close:hover {
    color: var(--cyan);
}

.save-dialog-close.dialog-close-x {
    border: 1px solid var(--red);
    color: var(--red);
    background: transparent;
}

.save-dialog-close.dialog-close-x:hover {
    background: var(--red);
    color: #fff;
}

.save-dialog-content {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.save-dialog-content::-webkit-scrollbar {
    width: 12px;
}

.save-dialog-content::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}

.save-dialog-content::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}

.save-dialog-content::-webkit-scrollbar-thumb:hover,
.save-dialog-content::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

.save-field {
    margin-bottom: 16px;
}

.save-field label {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.save-pattern-name {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    font-family: inherit;
    font-size: 13px;
    outline: none;
}

.save-pattern-name:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.save-pattern-remark {
    width: 100%;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    resize: none;
    padding: 0 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

.save-pattern-remark:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.16);
}

.save-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.save-name-row .save-pattern-name {
    flex: 1;
}

.save-name-generate-btn {
    flex: 0 0 auto;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-main);
    border-radius: 4px;
    background: var(--bg-section);
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.save-name-generate-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.category-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.category-btn {
    flex: 1 1 0;
    min-width: 112px;
    max-width: 160px;
    padding: 10px 8px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.category-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.category-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.category-btn.disabled,
.category-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    border-color: #223040;
    color: #5a6a7c;
    background: #111820;
}

/* Genre buttons (multi-select) */
.genre-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-height: 140px;
    overflow-y: auto;
}

.save-style-search {
    width: 100%;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    font-family: inherit;
    font-size: 12px;
    outline: none;
}

.save-style-search:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.16);
}

.style-tag-buttons {
    max-height: 220px;
}

.style-tag-btn {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    line-height: 1.15;
    padding: 6px 6px;
}

.genre-btn {
    flex: 1 1 0;
    min-width: 70px;
    padding: 8px 8px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 3px;
    text-align: center;
}

.genre-btn:hover {
    border-color: var(--magenta);
    color: var(--magenta);
}

.genre-btn.active {
    background: rgba(255, 0, 255, 0.2);
    border-color: var(--magenta);
    color: var(--magenta);
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.3);
}

/* Save Folder buttons (USER/FACTORY selection in dialog) */
.save-folder-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
    width: 100%;
}

.save-folder-btn {
    flex: 1 1 0;
    min-width: 180px;
    padding: 10px 16px;
    background: var(--bg-section);
    border: 2px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.save-folder-btn:hover {
    border-color: var(--cyan-dim);
    color: var(--cyan);
}

.save-folder-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
}

.save-folder-btn[data-folder="user"].active {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--green);
    color: var(--green);
}

.folder-btn-icon {
    font-size: 16px;
}

/* Save Type buttons -- auto-distribute across full width */
.save-type-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.save-type-btn {
    flex: 1 1 96px;
    padding: 10px 6px;
    background: var(--bg-section);
    border: 2px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    white-space: nowrap;
}

.save-type-btn:hover {
    border-color: var(--green);
    color: var(--green);
}

.save-type-btn.active {
    background: rgba(0, 255, 136, 0.2);
    border-color: var(--green);
    color: var(--green);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.3);
}

.save-type-btn.disabled,
.save-type-btn:disabled {
    opacity: 0.25;
    cursor: not-allowed;
    pointer-events: none;
    border-color: var(--border-main);
    color: var(--text-dim);
}

/* SAVE dialog: fixed-width labels, allow 2-line captions */
.save-pattern-overlay .save-folder-btn,
.save-pattern-overlay .category-btn {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    min-height: 44px;
    padding: 8px 6px;
    white-space: normal;
    line-height: 1.12;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* SAVE Type row should behave like LOAD Type row */
.save-pattern-overlay .save-type-buttons {
    flex-wrap: nowrap;
}

.save-pattern-overlay .save-type-btn {
    flex: 1 1 0;
    min-width: 60px;
    max-width: none;
    min-height: 40px;
    padding: 10px 6px;
    white-space: nowrap;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: normal;
    word-break: normal;
}

/* SAVE dialog style tags: fixed 100px width + 2-line labels */
.save-pattern-overlay .genre-buttons {
    justify-content: flex-start;
}

/* Remove inner gray scrollbar from style-tags list:
   let the main SAVE dialog use the themed scrollbar instead. */
.save-pattern-overlay .style-tag-buttons {
    max-height: none;
    overflow: visible;
}

.save-pattern-overlay .genre-btn {
    flex: 0 0 100px;
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    min-height: 44px;
    padding: 8px 6px;
    white-space: normal;
    line-height: 1.12;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.strip-categories,
.patch-categories {
    transition: opacity 0.2s;
}

/* REC button in transport */
.seq-transport-btn.rec-btn {
    background: rgba(255, 50, 50, 0.15);
    border-color: #ff5050;
    color: #ff5050;
}

.seq-transport-btn.rec-btn:hover {
    background: rgba(255, 50, 50, 0.25);
    box-shadow: 0 0 10px rgba(255, 50, 50, 0.4);
}

.seq-transport-btn.rec-btn.active,
.seq-transport-btn.rec-btn.rec {
    background: rgba(255, 50, 50, 0.35);
    border-color: #ff3030;
    color: #ff3030;
    animation: arm-pulse 1s infinite;
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.5);
}

.save-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-main);
}

.save-dialog-btn {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid var(--border-main);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.save-dialog-btn.cancel {
    background: var(--bg-section);
    color: var(--text-dim);
}

.save-dialog-btn.cancel:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

.save-dialog-btn.confirm {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--green);
    color: var(--green);
}

.save-dialog-btn.confirm:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

/* === USER SETTINGS DIALOG (Save/Load style aligned) === */
.user-settings-overlay {
    z-index: 220100;
}

.user-settings-overlay .user-settings-dialog {
    width: 980px;
    max-width: 96vw;
    height: calc(100vh - 155px);
    max-height: calc(100vh - 155px);
}

.user-settings-content {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.user-settings-tabs {
    flex-wrap: nowrap;
    margin-bottom: 14px;
}

.user-settings-tabs .user-settings-tab {
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.user-settings-tabs .user-settings-tab[data-us-tab="personalize"] {
    flex: 1.35 1 0;
}

.user-settings-pane-wrap {
    flex: 1;
    min-height: 0;
    border: 1px solid rgba(0, 170, 235, 0.22);
    background: rgba(0, 16, 28, 0.32);
    border-radius: 6px;
    overflow: hidden;
}

.user-settings-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    gap: 10px;
}

.user-settings-pane::-webkit-scrollbar {
    width: 12px;
}

.user-settings-pane::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}

.user-settings-pane::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}

.user-settings-pane::-webkit-scrollbar-thumb:hover,
.user-settings-pane::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

.us-note {
    margin: 0 0 4px;
    padding: 10px 12px;
    border: 1px solid rgba(0, 160, 220, 0.25);
    border-radius: 6px;
    background: rgba(0, 22, 36, 0.34);
    color: #9fb7c9;
    font-size: 12px;
    line-height: 1.45;
}

.us-account-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 8px 12px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid rgba(0, 160, 220, 0.25);
    border-radius: 6px;
    background: rgba(5, 18, 30, 0.45);
}

.us-account-k {
    color: #7f99b2;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-size: 11px;
}

.us-account-v {
    color: #ffffff;
    font-size: 13px;
}

.us-account-v.us-break {
    word-break: break-all;
}

.us-account-v.us-uppercase {
    text-transform: uppercase;
}

.us-account-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}

.us-danger-btn {
    padding: 10px 14px;
    border-radius: 6px;
    border: 1px solid #ff5b5b;
    background: #2b1313;
    color: #ff8a8a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s;
}

.us-danger-btn:hover {
    background: rgba(255, 70, 70, 0.2);
    box-shadow: 0 0 12px rgba(255, 70, 70, 0.24);
}

.us-setting-row {
    display: grid;
    grid-template-columns: 24px 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid rgba(0, 160, 220, 0.22);
    border-radius: 6px;
    background: rgba(5, 18, 30, 0.45);
    cursor: pointer;
}

.us-setting-row:hover {
    border-color: rgba(0, 220, 255, 0.6);
    box-shadow: inset 0 0 0 1px rgba(0, 220, 255, 0.15);
}

.us-range-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
    padding: 10px 12px;
    border: 1px solid rgba(0, 160, 220, 0.22);
    border-radius: 6px;
    background: rgba(5, 18, 30, 0.45);
}

.us-range-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
}

.us-range {
    width: 100%;
    accent-color: #2d8cff;
    cursor: pointer;
}

.us-range-value {
    min-width: 48px;
    text-align: right;
    color: #66b8ff;
    font-weight: 700;
    font-size: 12px;
}

.us-check-wrap {
    position: relative;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}

.us-checkbox,
.us-autosave-checkbox {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.us-check-ui {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(0, 180, 245, 0.6);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(8, 26, 40, 0.95), rgba(3, 12, 22, 0.95));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    transition: all 0.14s ease;
}

.us-check-ui::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 6px;
    height: 11px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    transform: rotate(35deg);
    transition: all 0.14s ease;
}

.us-checkbox:checked + .us-check-ui,
.us-autosave-checkbox:checked + .us-check-ui {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.12);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.26), inset 0 0 0 1px rgba(0, 255, 255, 0.12);
}

.us-checkbox:checked + .us-check-ui::after,
.us-autosave-checkbox:checked + .us-check-ui::after {
    border-right-color: var(--cyan);
    border-bottom-color: var(--cyan);
}

.us-setting-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: #cdd7e1;
    font-size: 13px;
    line-height: 1.35;
}

.us-setting-copy strong {
    color: #ffffff;
    font-size: 13px;
}

.us-setting-copy em {
    color: #8fa5ba;
    font-style: normal;
    font-size: 12px;
}

.us-subtitle {
    margin: 8px 0 2px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.us-personalize-box {
    display: flex;
    flex: 1;
    min-height: 0;
}

.us-personalize-input {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border: 1px solid rgba(0, 150, 220, 0.35);
    border-radius: 6px;
    background: rgba(2, 12, 22, 0.7);
    color: #d8e2ec;
    padding: 12px;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.45;
    resize: none;
    outline: none;
}

.us-personalize-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.24), 0 0 14px rgba(0, 200, 255, 0.16);
}

.us-personalize-input::placeholder {
    color: #6d8499;
    white-space: pre-line;
}

.us-personalize-input::-webkit-scrollbar {
    width: 12px;
}

.us-personalize-input::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}

.us-personalize-input::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}

.us-personalize-input::-webkit-scrollbar-thumb:hover,
.us-personalize-input::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

.user-settings-footer .save-dialog-btn {
    max-width: 210px;
    margin-left: auto;
}

/* Save Toast */
.save-toast {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-dark);
    border: 1px solid var(--green);
    color: var(--green);
    padding: 12px 24px;
    font-size: 13px;
    border-radius: 4px;
    opacity: 0;
    transition: all 0.3s;
    z-index: 10001;
}

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

.save-toast.error-toast {
    border-color: var(--red);
    color: var(--red);
}

/* Save folder display (read-only) */
.save-folder-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid var(--green);
    border-radius: 4px;
    color: var(--green);
    font-size: 13px;
    font-weight: bold;
}

/* === TOOLBAR === */
.seq-toolbar {
    display: flex;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(180deg, #0d1219 0%, #1a2530 100%);
    border-bottom: 1px solid var(--cyan-dim);
    flex-shrink: 0;
    align-items: center;
}

.seq-toolbar-left,
.seq-toolbar-right {
    display: flex;
    gap: 15px;
    align-items: center;
}

.seq-toolbar-center {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.seq-strip-picker {
    gap: 8px;
}

.seq-strip-select {
    min-width: 170px;
    padding: 6px 10px;
    background: var(--bg-section);
    border: 1px solid var(--cyan-dim);
    color: var(--text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border-radius: 2px;
}

.seq-strip-select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.note-option-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.note-option-label {
    font-size: 10px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.note-length-btn {
    width: 28px;
    height: 24px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
}

.note-length-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.note-length-btn.active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.15);
    box-shadow: 0 0 8px var(--cyan-glow);
}

/* Loop Length Preset Buttons (4, 8, 12, 16, 32, 64) -- matches seq-transport-btn */
.loop-preset-btn {
    padding: 6px 10px;
    background: var(--bg-section);
    border: 1px solid var(--cyan-dim);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    min-width: 28px;
    text-align: center;
}

.loop-preset-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.loop-preset-btn.active {
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.loop-length-input {
    width: 38px !important;
    padding: 5px 4px !important;
    background: var(--bg-section) !important;
    border: 1px solid var(--cyan-dim) !important;
    color: var(--cyan) !important;
    font-family: inherit !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-align: center !important;
    border-radius: 0 !important;
    margin-left: 4px !important;
    -moz-appearance: textfield;
    appearance: textfield;
}

.loop-length-input::-webkit-inner-spin-button,
.loop-length-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.loop-length-input:focus {
    outline: none;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 8px var(--cyan-glow);
}

.loop-length-select {
    min-width: 76px;
    padding: 6px 10px;
    background: var(--bg-section);
    border: 1px solid var(--cyan-dim);
    color: var(--cyan);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    border-radius: 2px;
}

.loop-length-select:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

/* Sequencer Page Navigation */
.seq-page-nav {
    margin-right: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.seq-page-btn {
    padding: 4px 8px !important;
    min-width: 24px;
    font-size: 12px !important;
}

.seq-page-label {
    font-size: 10px;
    font-weight: bold;
    color: var(--cyan);
    white-space: nowrap;
    padding: 0 4px;
}

.seq-zoom-info-group {
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.seq-zoom-label {
    font-size: 10px;
    font-weight: bold;
    color: #9ad9ff;
    border: 1px solid #2b5070;
    background: rgba(32, 72, 108, 0.25);
    padding: 4px 6px;
    border-radius: 2px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.12s ease;
}

.seq-zoom-label:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.25);
    background: rgba(0, 255, 255, 0.08);
}

/* Pattern Slot Buttons (P1, P2, P3, P4) */
.pattern-slot-group {
    margin-right: 15px;
    border-right: 1px solid var(--border-main);
    padding-right: 15px;
}

.pattern-slot-btn {
    width: 32px;
    height: 24px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0 2px;
}

.pattern-slot-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
}

.pattern-slot-btn.active {
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(255, 165, 0, 0.2);
    box-shadow: 0 0 8px rgba(255, 165, 0, 0.4);
}

/* Mark pattern slots that have notes */
.pattern-slot-btn.has-notes {
    border-bottom: 2px solid var(--green);
}

.pattern-slot-btn.active.has-notes {
    border-bottom: 2px solid var(--orange);
}

.velocity-slider {
    width: 150px;
    height: 10px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.velocity-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green-dim), var(--green));
    border-radius: 1px;
    pointer-events: none;
}

.velocity-value {
    font-size: 11px;
    color: var(--green);
    min-width: 30px;
}

.seq-tool-btn {
    padding: 6px 16px;
    background: var(--bg-dark);
    border: 1px solid var(--red);
    color: var(--red);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
}

.seq-tool-btn:hover {
    background: var(--red);
    color: #fff;
}

.seq-tool-btn.active {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 8px var(--cyan-glow);
}

.seq-tool-btn.disabled {
    opacity: 0.45;
    border-color: var(--border-main);
    color: var(--text-dim);
    cursor: not-allowed;
    pointer-events: none;
}

.seq-tool-btn.midi-import-btn {
    border-color: var(--cyan);
    color: var(--cyan);
}

.seq-tool-btn.midi-import-btn:hover {
    background: var(--cyan);
    color: var(--bg-dark);
}

.seq-piano-roll-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-color: #3f9bcc;
    color: #8dc7e6;
}

.seq-piano-roll-btn:hover {
    background: rgba(40, 130, 180, 0.22);
    color: #d7f2ff;
    border-color: #6dc5f2;
}

.seq-piano-roll-btn.active {
    background: rgba(70, 160, 220, 0.22);
    border-color: #86d7ff;
    color: #dff7ff;
    box-shadow: 0 0 10px rgba(70, 180, 240, 0.3);
}

.seq-pr-icon {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.seq-pr-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0;
    width: 1px;
    height: 100%;
    background: currentColor;
    opacity: 0.75;
    box-shadow: 3px 0 0 currentColor, 6px 0 0 currentColor, 9px 0 0 currentColor;
}

.seq-piano-btn {
    border-color: #66b9ff;
    color: #9ed7ff;
}

.seq-piano-btn:hover {
    background: rgba(70, 145, 210, 0.25);
    border-color: #8fd6ff;
    color: #e7f7ff;
}

.seq-piano-btn.active {
    background: rgba(70, 145, 210, 0.26);
    border-color: #8fd6ff;
    color: #e7f7ff;
    box-shadow: 0 0 10px rgba(70, 190, 255, 0.35);
}

.seq-piano-popup {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    min-width: 760px;
    max-width: calc(100% - 30px);
    background: linear-gradient(180deg, rgba(11, 24, 40, 0.97) 0%, rgba(7, 13, 24, 0.98) 100%);
    border: 1px solid rgba(84, 175, 255, 0.6);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55), 0 0 20px rgba(58, 150, 220, 0.35);
    padding: 10px;
    z-index: 40;
    display: none;
}

.seq-piano-popup.visible {
    display: block;
}

.seq-piano-popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.seq-piano-popup-title {
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #9ed7ff;
}

.seq-piano-keys {
    display: grid;
    grid-template-columns: repeat(13, minmax(28px, 1fr));
    gap: 6px;
}

.seq-piano-key {
    height: 30px;
    border: 1px solid #5ca4d4;
    background: linear-gradient(180deg, #e4eef7 0%, #d8e6f2 100%);
    color: #0d1a2a;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.1s ease;
}

.seq-piano-key.black {
    border-color: #2a3d4f;
    background: linear-gradient(180deg, #2b3340 0%, #171c26 100%);
    color: #b3c9dd;
}

.seq-piano-key:hover {
    border-color: #64c9ff;
    box-shadow: 0 0 8px rgba(80, 190, 255, 0.35);
}

.seq-preview-toggle {
    min-width: 132px;
    height: 24px;
    background: var(--bg-dark);
    border: 1px solid var(--green-dim);
    color: var(--green);
    cursor: pointer;
    padding: 0 8px;
    font-family: inherit;
    font-size: 9px;
    font-weight: bold;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.seq-preview-toggle:hover {
    border-color: var(--green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.35);
}

.seq-preview-toggle.active {
    background: rgba(0, 255, 136, 0.15);
    border-color: var(--green);
}

/* === TRANSPORT BAR - TOP FIXED === */
.transport-bar-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 10px 0 20px;
    background: linear-gradient(180deg, #1a2530 0%, #0d1219 100%);
    border-bottom: 2px solid var(--cyan);
    box-shadow: 0 0 30px var(--cyan-glow);
    z-index: 10001;
}

/* Transport LEFT section */
.transport-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.transport-brand-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.transport-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    line-height: 1;
    padding: 6px 8px 2px 4px;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
    border: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.transport-brand *,
.transport-brand .transport-title,
.transport-brand .transport-user-name {
    text-decoration: none !important;
    border-bottom: 0 !important;
    box-shadow: none;
}

.transport-logo-line {
    width: 110px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, var(--cyan) 30%, var(--cyan) 70%, transparent 100%);
    box-shadow: 0 0 6px var(--cyan-glow);
}

/* Transport CENTER section */
.transport-center {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Transport RIGHT section */
.transport-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.transport-delay-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 58px;
}

.transport-title {
    font-size: 20px;
    font-weight: bold;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: 8px;
    text-shadow: 0 0 15px var(--cyan-glow), 0 0 40px rgba(0, 255, 255, 0.15);
    white-space: nowrap;
    text-decoration: none !important;
}

.transport-sub {
    font-size: 10px;
    font-weight: 700;
    color: var(--magenta);
    letter-spacing: 6px;
    text-transform: lowercase;
    text-shadow: 0 0 10px var(--magenta-glow);
    white-space: nowrap;
}

.transport-user-name {
    font-size: 9px;
    font-weight: bold;
    color: #8fa3b5;
    letter-spacing: 1.2px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.15);
    white-space: nowrap;
    text-decoration: none !important;
    margin-top: -2px;
}

.transport-user-name.admin-active {
    color: #ff4444;
    border-color: #662222;
    background: rgba(255,50,50,0.1);
}

/* Action Console */
.action-console {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    min-width: 300px;
    max-width: 450px;
}

/* Console Input - unified feedback field */
.console-input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--cyan-dim);
    border-radius: 4px;
    color: var(--green);
    font-family: 'Consolas', monospace;
    font-size: 12px;
    padding: 6px 12px;
    flex: 1;
    min-width: 200px;
    outline: none;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.console-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.console-input::placeholder {
    color: var(--text-dim);
    opacity: 0.7;
    transition: color 0.3s;
}

.console-input.console-param-highlight::placeholder {
    color: #ffd95a;
    opacity: 1;
    text-shadow: 0 0 6px rgba(255, 217, 90, 0.45);
}

/* Console Chat Button */
.console-chat-btn {
    background: var(--cyan-dim);
    border: 1px solid var(--cyan);
    border-radius: 3px;
    color: var(--cyan);
    font-family: 'Consolas', monospace;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 8px;
}

.console-chat-btn:hover {
    background: var(--cyan);
    color: var(--bg-dark);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.console-chat-square-btn {
    width: 32px;
    min-width: 32px;
    height: 28px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--cyan);
    font-family: 'Consolas', monospace;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
}

.console-chat-square-btn:hover {
    background: transparent;
    border-color: transparent;
    color: #7ff8ff;
    box-shadow: none;
}

.console-chat-square-glyph {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
}

.console-chat-square-glyph::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid currentColor;
    border-radius: 2px;
    top: -3px;
    left: -3px;
    opacity: 0.9;
}

/* Chat Console Popup */
/* === COMMAND CONSOLE (Save/Load dialog style) === */
.chat-console-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 10000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 80px 0 25px;
    overflow: hidden;
}

.chat-console-popup {
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 8px;
    width: 860px;
    max-width: 96vw;
    height: calc(100vh - 180px);
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.chat-console-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-main);
    background: rgba(0, 255, 255, 0.05);
    border-radius: 6px 6px 0 0;
}

.chat-console-title {
    color: var(--cyan);
    font-family: 'Consolas', monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}

.chat-clear-btn {
    border: 2px solid #1a2530;
    color: #8899aa;
    background: #111820;
    padding: 6px 16px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.2s;
    margin-right: 4px;
}

.chat-clear-btn:hover {
    border-color: rgba(255, 204, 0, 0.5);
    color: var(--yellow, #ffcc00);
    background: rgba(255, 204, 0, 0.08);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.2);
}

.chat-console-close {
    border: 1px solid var(--red, #ff4444);
    color: var(--red, #ff4444);
    background: transparent;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Consolas', monospace;
    font-weight: bold;
    font-size: 11px;
    letter-spacing: 1.5px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-console-close:hover {
    border-color: var(--red, #ff4444);
    color: #fff;
    background: var(--red, #ff4444);
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.35);
}

.chat-console-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 20px;
    font-family: 'Consolas', monospace;
    font-size: 12.5px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 150, 255, 0.45) rgba(0, 34, 64, 0.22);
}

.chat-console-messages::-webkit-scrollbar {
    width: 12px;
}
.chat-console-messages::-webkit-scrollbar-track {
    background: rgba(0, 34, 64, 0.22);
    border: 1px solid rgba(0, 142, 228, 0.25);
}
.chat-console-messages::-webkit-scrollbar-thumb {
    background: rgba(0, 150, 255, 0.45);
    border: 2px solid rgba(0, 24, 46, 0.66);
    border-radius: 8px;
}
.chat-console-messages::-webkit-scrollbar-thumb:hover,
.chat-console-messages::-webkit-scrollbar-thumb:active {
    background: rgba(0, 190, 255, 0.92);
}

.chat-msg {
    margin-bottom: 10px;
    padding: 10px 14px;
    border-radius: 4px;
    line-height: 1.5;
}

.chat-msg.system {
    background: rgba(0, 255, 255, 0.04);
    color: var(--text-dim);
    border-left: 3px solid var(--cyan-dim);
}

.chat-msg.system.thinking-indicator {
    color: var(--cyan);
    border-left-color: var(--cyan);
    animation: thinking-pulse 1.2s ease-in-out infinite;
}

@keyframes thinking-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.chat-msg.user {
    background: rgba(0, 255, 255, 0.08);
    color: var(--cyan);
    border-left: 3px solid var(--cyan);
}

.chat-msg.response {
    background: rgba(0, 255, 136, 0.06);
    color: var(--green);
    border-left: 3px solid var(--green);
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-msg.error {
    background: rgba(255, 51, 102, 0.1);
    color: var(--red);
    border-left: 3px solid var(--red);
}

.chat-console-input-row {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-top: 1px solid var(--border-main);
    background: rgba(0, 255, 255, 0.05);
    border-radius: 0 0 6px 6px;
}

.chat-console-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--border-main);
    border-radius: 4px;
    color: var(--green);
    font-family: 'Consolas', monospace;
    font-size: 13px;
    padding: 10px 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chat-console-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 10px var(--cyan-glow);
}

.chat-console-send {
    padding: 10px 24px;
    border: 1px solid var(--green);
    background: rgba(0, 255, 136, 0.15);
    color: var(--green);
    font-family: 'Consolas', monospace;
    font-size: 13px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.chat-console-send:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.chat-end-square-btn {
    width: 38px;
    min-width: 38px;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--cyan);
    font-family: 'Consolas', monospace;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: none;
}

.chat-end-square-btn:hover {
    background: transparent;
    border-color: transparent;
    color: #7ff8ff;
    box-shadow: none;
}

/* Admin mode indicator removed - shown via transport-user-name in red */

.transport-btn {
    padding: 8px 20px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.transport-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

.transport-btn.playing {
    border-color: var(--green);
    color: var(--green);
    background: rgba(0, 255, 136, 0.1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

/* Transport REC button */
.transport-rec-btn {
    border-color: #662222;
    color: #aa4444;
}

.transport-rec-btn:hover {
    border-color: #ff3333 !important;
    color: #ff3333 !important;
}

.transport-rec-btn.recording {
    border-color: #ff3030;
    color: #ff3030;
    background: rgba(255, 50, 50, 0.2);
    box-shadow: 0 0 15px rgba(255, 50, 50, 0.5);
    animation: transport-rec-pulse 1s infinite;
}

@keyframes transport-rec-pulse {
    0%, 100% { box-shadow: 0 0 12px rgba(255, 50, 50, 0.4); }
    50% { box-shadow: 0 0 25px rgba(255, 50, 50, 0.7); }
}

/* Metronome icon (ON/OFF), internal color reflects configured volume */
.metro-ctrl {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-height: 30px;
    align-self: center;
    user-select: none;
    vertical-align: middle;
}

.metro-icon-btn {
    width: 30px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.metro-icon {
    width: 26px;
    height: 30px;
    filter: drop-shadow(0 0 0 rgba(102, 184, 255, 0));
    transition: filter 0.15s;
}

.metro-icon-body,
.metro-icon-needle,
.metro-icon-weight {
    stroke: #3e5f80;
    fill: rgba(20, 36, 54, 0.45);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.15s, fill 0.15s;
}

.metro-icon-needle,
.metro-icon-weight {
    fill: none;
}

.metro-ctrl[data-level="1"] .metro-icon-body {
    fill: rgba(42, 92, 145, 0.5);
}

.metro-ctrl[data-level="2"] .metro-icon-body {
    fill: rgba(58, 124, 192, 0.65);
}

.metro-ctrl[data-level="3"] .metro-icon-body {
    fill: rgba(78, 168, 255, 0.88);
}

.metro-ctrl.active .metro-icon-body,
.metro-ctrl.active .metro-icon-needle,
.metro-ctrl.active .metro-icon-weight {
    stroke: #66b8ff;
}

.metro-ctrl.active .metro-icon {
    filter: drop-shadow(0 0 4px rgba(102, 184, 255, 0.55));
}

/* Transport PRE (precount) button -- same family as PLAY/STOP/REC */
.transport-pre-btn {
    border-color: #223355;
    color: #556688;
}

.transport-pre-btn:hover {
    border-color: #0088ff !important;
    color: #0088ff !important;
}

.transport-pre-btn.active {
    border-color: #0088ff;
    color: #44aaff;
    background: rgba(0, 100, 255, 0.12);
    box-shadow: 0 0 12px rgba(0, 136, 255, 0.35);
}

/* REC standby (blinking during precount) */
.transport-rec-btn.rec-standby {
    border-color: #ff3030;
    color: #ff3030;
    animation: transport-rec-pulse 0.6s infinite;
}

/* Beat dot precount flash (all dots flash red-orange during precount) */
.beat-dot.precount-flash {
    background: #ff6622 !important;
    border-color: #ff6622 !important;
    box-shadow: 0 0 10px rgba(255, 102, 34, 0.7), 0 0 20px rgba(255, 102, 34, 0.4) !important;
}

.panic-mini-btn {
    margin-top: 2px;
    width: 46px;
    min-width: 46px;
    height: 18px;
    border: 1px solid var(--cyan-dim, #004455);
    background: rgba(10, 14, 20, 0.85);
    color: var(--text-dim, #8899aa);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.4px;
    line-height: 1;
    cursor: pointer;
    text-transform: uppercase;
    padding: 0 4px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.panic-mini-btn:hover {
    border-color: var(--orange, #ff8800);
    color: var(--orange, #ff8800);
    box-shadow: 0 0 6px rgba(255, 136, 0, 0.3);
}

.panic-under-delay {
    margin-top: 0;
    width: 100%;
    min-width: 58px;
    box-sizing: border-box;
}

.panic-mini-btn.panic-flash {
    border-color: var(--green, #00ff88);
    color: var(--green, #00ff88);
    background: rgba(0, 255, 136, 0.16);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.35);
}

/* Transport SAVE / LOAD buttons */
.transport-save-btn {
    border-color: var(--cyan-dim);
    color: var(--cyan);
}
.transport-save-btn:hover {
    border-color: var(--cyan) !important;
    color: #fff !important;
    background: rgba(0, 255, 255, 0.12);
}
.transport-save-btn.save-hot {
    border-color: #35ff8a !important;
    box-shadow: 0 0 0 1px rgba(53, 255, 138, 0.65), 0 0 12px rgba(53, 255, 138, 0.45);
}

.autosave-icon {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border: 1px solid currentColor;
    border-radius: 1px;
    position: relative;
    opacity: 0.85;
}

.autosave-icon::before {
    content: '';
    position: absolute;
    left: 2px;
    right: 2px;
    top: 1px;
    height: 3px;
    border-bottom: 1px solid currentColor;
}

.transport-load-btn {
    border-color: var(--cyan-dim);
    color: var(--cyan);
}
.transport-load-btn:hover {
    border-color: var(--cyan) !important;
    color: #fff !important;
    background: rgba(0, 255, 255, 0.12);
}

/* Transport separator */
.transport-sep {
    display: inline-block;
    width: 1px;
    height: 24px;
    background: var(--border-main);
    margin: 0 6px;
}

/* Mode Selector (PERFORM / STUDIO / SONG) */
.mode-selector {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--border-main);
    border-radius: 4px;
    overflow: hidden;
}

.mode-select-btn {
    padding: 6px 14px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-main);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.mode-select-btn:last-child {
    border-right: none;
}

.mode-select-btn:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.05);
}

.mode-select-btn.active {
    background: var(--cyan);
    color: #000;
    text-shadow: none;
}
    vertical-align: middle;
}

/* Transport SHARE button */
.transport-share-btn {
    border-color: var(--cyan-dim);
    color: var(--cyan);
}
.transport-share-btn:hover {
    border-color: var(--cyan) !important;
    color: #fff !important;
    background: rgba(0, 255, 255, 0.12);
}

/* Transport SETUP button (gear icon) */
.transport-setup-btn {
    border-color: var(--orange-dim, #442200);
    color: var(--orange, #ff8800);
    font-size: 16px;
    line-height: 1;
    padding: 4px 8px;
}
.transport-setup-btn:hover {
    border-color: var(--orange, #ff8800) !important;
    color: #fff !important;
    background: rgba(255, 136, 0, 0.15);
    box-shadow: 0 0 10px rgba(255, 136, 0, 0.3);
}

/* Transport DLY button (recording delay compensation) */
.transport-delay-btn {
    border-color: #442244;
    color: #cc88ff;
    font-size: 10px;
    padding: 4px 6px;
    min-width: 45px;
    width: 100%;
    box-sizing: border-box;
}
.transport-delay-btn:hover {
    border-color: #cc88ff !important;
    color: #fff !important;
    background: rgba(204, 136, 255, 0.15);
    box-shadow: 0 0 10px rgba(204, 136, 255, 0.3);
}

/* Transport SEQ button - blue border (like AUTO has yellow) */
.transport-seq-btn {
    border-color: #225588;
    color: #44ccff;
    font-weight: bold;
    letter-spacing: 1px;
}
.transport-seq-btn:hover {
    border-color: #44ccff !important;
    color: #fff !important;
    background: rgba(68, 204, 255, 0.12);
    box-shadow: 0 0 10px rgba(68, 204, 255, 0.3);
}
/* SEQ active (popup open) = cyan solid */
.transport-seq-btn.transport-btn-active {
    background: #44ccff;
    border-color: #44ccff;
    color: #000;
    box-shadow: 0 0 12px rgba(68, 204, 255, 0.5);
}

/* Transport AUTO button - yellow (matches automation frame color) */
.transport-auto-btn {
    border-color: #886600;
    color: #ffaa00;
    font-weight: bold;
    letter-spacing: 1px;
}
.transport-auto-btn:hover {
    border-color: #ffaa00 !important;
    color: #fff !important;
    background: rgba(255, 170, 0, 0.15);
}
/* AUTO active (popup open) = yellow solid */
.transport-auto-btn.transport-btn-active {
    background: #ffaa00;
    border-color: #ffaa00;
    color: #000;
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.5);
}

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

.tempo-value {
    font-size: 22px;
    font-weight: bold;
    color: var(--cyan);
    min-width: 50px;
    text-align: center;
}

.tempo-input {
    width: 58px;
    background: transparent;
    border: 1px solid rgba(0, 255, 255, 0.25);
    border-radius: 3px;
    outline: none;
    font-family: inherit;
    line-height: 1.1;
    padding: 1px 2px;
    appearance: textfield;
    -moz-appearance: textfield;
}

.tempo-input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 6px rgba(0, 255, 255, 0.25);
}

.tempo-input::-webkit-outer-spin-button,
.tempo-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
}

.tempo-label {
    font-size: 10px;
    color: var(--text-dim);
    text-align: center;
}

.tempo-btn {
    width: 30px;
    height: 30px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    color: var(--text);
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.15s;
}

.tempo-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
}

/* Beat indicator (4 filled circles: green green green red) */
.beat-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
}

.beat-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1a2530;
    border: 2px solid #2a3540;
    transition: all 0.06s;
}

/* Green beats (1, 2, 3) */
.beat-dot.beat-green.beat-active {
    background: #00ff88;
    border-color: #00ff88;
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.6), 0 0 16px rgba(0, 255, 136, 0.3);
}

/* Red beat (4) */
.beat-dot.beat-red.beat-active {
    background: #ff3333;
    border-color: #ff3333;
    box-shadow: 0 0 8px rgba(255, 50, 50, 0.6), 0 0 16px rgba(255, 50, 50, 0.3);
}

/* Chat Console Mode Toggle */
.chat-console-mode-toggle {
    display: flex;
    gap: 4px;
    margin-left: auto;
    margin-right: 12px;
}

.mode-btn {
    padding: 6px 16px;
    border: 2px solid #1a2530;
    background: #111820;
    color: #8899aa;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
}

.mode-btn:first-child {
    border-radius: 4px 0 0 4px;
}

.mode-btn:last-child {
    border-radius: 0 4px 4px 0;
}

.mode-btn:hover {
    border-color: rgba(0, 255, 255, 0.4);
    color: #e0e0e0;
    background: rgba(0, 255, 255, 0.05);
}

.mode-btn.active {
    background: var(--cyan, #00ffff);
    color: #000;
    border-color: var(--cyan, #00ffff);
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
}

/* Chat Admin Link */
.chat-admin-link {
    padding: 4px 10px;
    border: 1px solid var(--orange);
    background: transparent;
    color: var(--orange);
    font-family: 'Consolas', monospace;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    margin-right: 10px;
    transition: all 0.2s;
    border-radius: 3px;
}

.chat-admin-link:hover {
    background: var(--orange);
    color: var(--bg-dark);
}

/* ===================================
   AUTOMATION BUTTON (strip)
   =================================== */
.auto-button {
    padding: 12px 10px;
    background: linear-gradient(180deg, #1a1800 0%, #0d1200 100%);
    border: 1px solid var(--orange-dim);
    color: var(--orange);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    min-width: 48px;
}

.auto-button:hover {
    border-color: var(--orange);
    box-shadow: 0 0 15px var(--orange-glow);
    text-shadow: 0 0 10px var(--orange);
}

.auto-button:active {
    transform: scale(0.98);
}

/* ===================================
   AUTOMATION POPUP
   =================================== */
.auto-popup-overlay {
    position: fixed;
    top: 62px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 62px);
    background: rgba(5, 10, 20, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 13000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}

.auto-popup-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.auto-popup {
    width: calc(100vw - 60px);
    max-width: 1300px;
    max-height: calc(100vh - 100px);
    background: var(--bg-strip);
    border: 2px solid var(--orange);
    border-radius: 4px;
    box-shadow:
        0 0 50px var(--orange-glow),
        0 0 100px rgba(0, 0, 0, 0.8);
    transform: scale(0.95);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.auto-popup.auto-popup-wide {
    max-width: 1500px;
}

.auto-popup-overlay.visible .auto-popup {
    transform: scale(1);
}

.auto-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    background: linear-gradient(180deg, #1a1800 0%, #0d1200 100%);
    border-bottom: 1px solid var(--orange-dim);
    flex-shrink: 0;
}

.auto-popup-title {
    font-size: 14px;
    font-weight: bold;
    color: var(--orange);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.auto-popup-close {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--red);
    color: var(--red);
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}

.auto-popup-close:hover {
    background: var(--red);
    color: #fff;
}

/* --- Body: horizontal split (strip params left, cards center, DUO params right) --- */
.auto-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* --- Left: Parameter Panel --- */
.auto-param-panel {
    width: 150px;
    min-width: 150px;
    background: var(--bg-dark);
    border-right: 1px solid var(--border-main);
    overflow-y: auto;
    padding: 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.auto-param-panel-title {
    font-size: 10px;
    font-weight: bold;
    color: var(--orange);
    letter-spacing: 2px;
    text-align: center;
    padding: 4px 0 6px 0;
    border-bottom: 1px solid var(--border-main);
    margin-bottom: 4px;
}

.auto-param-group {
    margin-bottom: 4px;
}

.auto-param-group-label {
    font-size: 8px;
    font-weight: bold;
    color: var(--text-dim);
    letter-spacing: 1px;
    padding: 3px 4px 2px 4px;
    text-transform: uppercase;
}

.auto-param-group-label.auto-param-group-emph {
    font-size: 11px;
    color: #ffd24a;
    letter-spacing: 1.2px;
    text-shadow: 0 0 8px rgba(255, 210, 74, 0.35);
}

.auto-param-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
    padding: 4px 6px;
    background: var(--bg-section);
    border: 1px solid transparent;
    color: var(--text);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    position: relative;
}

.auto-param-btn.auto-param-btn-emph {
    font-size: 11px;
    font-weight: 700;
    color: #ffd65a;
    border-color: rgba(255, 214, 90, 0.35);
    background: rgba(70, 52, 8, 0.24);
}

.auto-param-btn.auto-param-btn-emph:hover {
    border-color: #ffd65a;
    color: #ffe58f;
    background: rgba(85, 64, 10, 0.35);
    box-shadow: 0 0 10px rgba(255, 214, 90, 0.2);
}

.auto-param-btn:hover {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.05);
}

.auto-param-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: auto;
    box-shadow: 0 0 4px currentColor;
}

.auto-param-panel-right {
    border-right: none;
    border-left: 1px solid var(--border-main);
}

/* --- Center: 2x2 grid of ENV cards --- */
.auto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-width: 0;
}

/* --- ENV Card --- */
.auto-card {
    background: linear-gradient(180deg, #0d1219 0%, #080c14 100%);
    border: 1px solid var(--env-color-dim);
    border-radius: 4px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.auto-card:hover {
    border-color: var(--env-color);
}

.auto-card.card-selected {
    border-color: var(--env-color);
    box-shadow: 0 0 14px color-mix(in srgb, var(--env-color) 25%, transparent);
}

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

.auto-card-title {
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 3px;
    flex-shrink: 0;
}

/* Target tags (badge style) */
.auto-card-targets-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 22px;
    align-items: center;
}

.auto-target-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: default;
    transition: background 0.15s;
}

.auto-target-tag:hover {
    background: rgba(255, 255, 255, 0.05);
}

.auto-target-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.15s, background 0.15s;
    margin-left: 2px;
    line-height: 1;
}

.auto-target-close:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.15);
}

.auto-target-tag.auto-target-empty {
    border-color: #333;
    color: #444;
    font-size: 11px;
}

/* Card main waveform canvas */
.auto-card-canvas-wrap {
    background: #050810;
    border: 1px solid var(--env-color-dim);
    border-radius: 3px;
    overflow: hidden;
    line-height: 0;
}

.auto-card-canvas-wrap canvas {
    width: 100%;
    height: 90px;
    display: block;
}

/* --- Shape Picker Grid (5x2 mini canvases) --- */
.auto-shape-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
}

.auto-shape-mini {
    width: 100%;
    height: 26px;
    display: block;
    cursor: pointer;
    border: 1px solid #1a2530;
    border-radius: 2px;
    transition: border-color 0.15s;
}

.auto-shape-mini:hover {
    border-color: var(--env-color);
}

.auto-shape-mini.shape-active {
    border-color: var(--env-color);
    background: rgba(255, 255, 255, 0.03);
}

/* --- LOOP / VELOCITY / INV mode buttons --- */
.auto-card-toggles {
    display: flex;
    gap: 4px;
}

.auto-mode-btn {
    flex: 1;
    padding: 6px 8px;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    color: #556;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.15s;
    letter-spacing: 1px;
    text-align: center;
    border-radius: 2px;
}

.auto-mode-btn:hover {
    border-color: var(--env-color);
    color: var(--env-color);
}

.auto-mode-btn.active {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--cyan);
    color: var(--cyan);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.15);
}

.auto-mode-btn.auto-mirror-btn.active {
    background: rgba(255, 200, 60, 0.12);
    border-color: #ffc83c;
    color: #ffc83c;
    box-shadow: 0 0 8px rgba(255, 200, 60, 0.2);
}

.auto-mode-btn.auto-rev-btn.active {
    background: rgba(60, 200, 255, 0.12);
    border-color: #3cc8ff;
    color: #3cc8ff;
    box-shadow: 0 0 8px rgba(60, 200, 255, 0.2);
}

.auto-mode-btn.auto-inv-btn.active {
    background: rgba(255, 80, 80, 0.12);
    border-color: #ff5555;
    color: #ff5555;
    box-shadow: 0 0 8px rgba(255, 80, 80, 0.2);
}

/* ON/OFF Button */
.auto-onoff-btn {
    padding: 4px 14px;
    background: var(--bg-dark);
    border: 1px solid #333;
    color: #555;
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 1px;
    border-radius: 2px;
}

.auto-onoff-btn.active {
    background: var(--env-color);
    border-color: var(--env-color);
    color: #000;
    box-shadow: 0 0 10px color-mix(in srgb, var(--env-color) 40%, transparent);
}

/* --- Slider rows (DEPTH + RATE) --- */
.auto-slider-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 20px;
}

.auto-slider-label {
    font-size: 9px;
    font-weight: bold;
    color: var(--text-dim);
    width: 38px;
    flex-shrink: 0;
    letter-spacing: 1px;
}

.auto-slider-val {
    font-size: 10px;
    font-weight: bold;
    color: var(--text);
    min-width: 36px;
    text-align: right;
}

/* Depth Slider */
.auto-depth-slider, .auto-rate-slider, .auto-start-slider {
    flex: 1;
    height: 14px;
    background: #0a0e16;
    border: 1px solid var(--border-main);
    cursor: pointer;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
}

.auto-depth-slider:hover, .auto-rate-slider:hover, .auto-start-slider:hover {
    border-color: var(--env-color);
}

.auto-depth-fill, .auto-rate-fill, .auto-start-fill {
    height: 100%;
    transition: width 0.05s;
    border-radius: 1px;
    opacity: 0.8;
}

/* (old mode cycling replaced by separate LOOP/VEL toggles) */

/* ===================== SHARE DIALOG ===================== */
.share-dialog-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.88);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 10000;
    overflow: hidden;
    padding: 120px 0 40px;
}

.share-dialog {
    background: var(--bg-strip);
    border: 2px solid var(--cyan);
    border-radius: 8px;
    width: 560px;
    max-width: 94vw;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 40px rgba(0, 255, 255, 0.3);
}

.share-dialog .save-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-main);
    background: rgba(0, 255, 255, 0.05);
}

.share-dialog .save-dialog-title {
    color: var(--cyan);
    font-size: 14px;
    font-weight: bold;
}

.share-dialog .save-dialog-content {
    padding: 20px;
    overflow-y: auto;
    min-height: 0;
}

.share-field {
    margin-bottom: 18px;
}

.share-field label {
    display: block;
    color: var(--text-dim);
    font-size: 11px;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.share-field input[type="text"] {
    width: 100%;
    background: var(--bg-dark);
    border: 1px solid var(--border-main);
    color: var(--text-main);
    padding: 8px 10px;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
}

.share-field input[type="text"]:focus {
    border-color: var(--cyan);
    outline: none;
}

.share-visibility-buttons {
    display: flex;
    gap: 8px;
}

.share-vis-btn {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid var(--border-main);
    background: var(--bg-section);
    color: var(--text-dim);
    font-family: inherit;
    font-size: 11px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    border-radius: 3px;
}

.share-vis-btn:hover {
    border-color: var(--text-dim);
    color: var(--text-main);
}

.share-vis-btn.active {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.08);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.15);
}

.share-vis-desc {
    color: var(--text-dim);
    font-size: 10px;
    display: block;
    margin-top: 4px;
    font-weight: normal;
}

.share-url-box {
    background: var(--bg-dark);
    border: 1px solid var(--green);
    color: var(--green);
    padding: 10px 12px;
    font-family: monospace;
    font-size: 12px;
    word-break: break-all;
    user-select: all;
    border-radius: 3px;
    min-height: 38px;
    display: flex;
    align-items: center;
}

.share-url-box.empty {
    border-color: var(--border-main);
    color: var(--text-dim);
}

.share-lineage-info {
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid var(--border-main);
    border-radius: 3px;
    padding: 10px 12px;
    font-size: 11px;
    color: var(--text-dim);
}

.share-lineage-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
}

.share-lineage-row:last-child {
    margin-bottom: 0;
}

.share-lineage-key {
    color: var(--text-dim);
}

.share-lineage-val {
    color: var(--cyan);
    font-weight: bold;
}

.share-dialog .save-dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px;
    border-top: 1px solid var(--border-main);
}

.share-copy-btn {
    flex: 1;
    padding: 12px 24px;
    border: 1px solid var(--green);
    background: rgba(0, 255, 136, 0.15);
    color: var(--green);
    font-family: inherit;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.share-copy-btn:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.3);
}

.share-copy-btn.copied {
    border-color: var(--cyan);
    color: var(--cyan);
    background: rgba(0, 255, 255, 0.1);
}

/* Share dialog project list */
.share-project-list-header {
    display: grid;
    grid-template-columns: 1fr 90px 70px 130px 70px;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    background: rgba(0, 40, 70, 0.22);
    font-size: 10px;
    font-weight: 700;
    color: #79cfff;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.share-project-list {
    max-height: 260px;
    overflow-y: auto;
}

.share-project-list::-webkit-scrollbar { width: 8px; }
.share-project-list::-webkit-scrollbar-track { background: rgba(0, 34, 64, 0.22); }
.share-project-list::-webkit-scrollbar-thumb { background: rgba(0, 150, 255, 0.4); border-radius: 4px; }

.share-project-row {
    display: grid;
    grid-template-columns: 1fr 90px 70px 130px 70px;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-section);
    border: 1px solid var(--border-main);
    margin-bottom: 3px;
    border-radius: 3px;
    align-items: center;
    font-size: 11px;
    transition: all 0.15s;
}

.share-project-row:hover {
    border-color: var(--cyan);
    background: rgba(0, 255, 255, 0.06);
}

.share-project-row.selected {
    border-color: var(--green);
    background: rgba(0, 255, 136, 0.08);
}

.share-project-name {
    color: var(--cyan);
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.share-project-mode {
    color: var(--text-dim);
    font-size: 10px;
    text-transform: uppercase;
}

.share-project-date {
    color: #8a9aaa;
    font-size: 10px;
}

.share-project-btn {
    padding: 4px 10px;
    border: 1px solid var(--green);
    background: rgba(0, 255, 136, 0.1);
    color: var(--green);
    font-family: inherit;
    font-size: 10px;
    font-weight: bold;
    cursor: pointer;
    border-radius: 3px;
    transition: all 0.15s;
}

.share-project-btn:hover {
    background: rgba(0, 255, 136, 0.25);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.2);
}

.share-empty-msg {
    padding: 20px;
    text-align: center;
    color: var(--text-dim);
    font-size: 12px;
}

.share-current-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 255, 255, 0.03);
    border: 1px solid var(--border-main);
    border-radius: 3px;
}

.share-current-name {
    flex: 1;
    color: var(--cyan);
    font-weight: bold;
    font-size: 13px;
}

/* DUO popup */
.duo-popup-overlay {
    position: fixed;
    top: 62px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 62px);
    background: rgba(2, 6, 12, 0.88);
    z-index: 12000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10px;
    opacity: 0;
    transition: opacity 0.12s ease;
}

.duo-popup-overlay.visible {
    opacity: 1;
}

.duo-popup {
    width: calc(100vw - 180px);
    max-width: 1540px;
    min-width: 980px;
    height: calc(100vh - 105px);
    max-height: 865px;
    overflow: auto;
    background: linear-gradient(180deg, #0d1520 0%, #0a0e17 100%);
    border: 2px solid var(--cyan, #00ffff);
    box-shadow:
        0 0 40px rgba(0, 255, 255, 0.2),
        0 0 80px rgba(0, 255, 255, 0.08),
        inset 0 1px 0 rgba(0, 255, 255, 0.1);
    border-radius: 0;
    padding: 10px;
    font-family: 'Consolas', 'Monaco', monospace;
}

.duo-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #1a2530;
    padding-bottom: 10px;
}

.duo-popup-title {
    color: var(--cyan, #00ffff);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.8px;
}

.duo-popup-name {
    color: var(--green);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-left: auto;
}

.duo-popup-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.duo-layer {
    border: 1px solid #1a2530;
    padding: 10px;
    background: #0a0e17;
}

.duo-tools-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    justify-content: flex-start;
}

.duo-search {
    width: min(290px, 74%);
    height: 30px;
    border: 2px solid #1a2530;
    background: #0a0e17;
    color: #e0e0e0;
    padding: 0 10px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    letter-spacing: 0.7px;
    outline: none;
}

.duo-search:focus {
    border-color: var(--cyan, #00ffff);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.2);
}

.duo-search::placeholder {
    color: #3a4a5a;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.duo-rnd-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin: 0;
    border-radius: 3px;
    overflow: hidden;
}

.duo-rnd-btn::before {
    width: 3px;
    height: 3px;
    top: 4px;
    left: 4px;
    box-shadow:
        12px 0 0 0 #ffaa33,
        0 12px 0 0 #ffaa33,
        12px 12px 0 0 #ffaa33,
        6px 6px 0 0 #ffaa33;
}

.duo-rnd-btn:hover::before {
    top: 4px;
    left: 4px;
    box-shadow:
        12px 0 0 0 #ffcc66,
        0 12px 0 0 #ffcc66,
        12px 12px 0 0 #ffcc66,
        6px 6px 0 0 #ffcc66;
}

.duo-layer.active {
    border-color: #2a3440;
    box-shadow: none;
}

.duo-layer-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.duo-layer-head .transport-btn.transport-stop-btn {
    color: var(--green, #00ff88);
    border-color: var(--green, #00ff88);
    background: rgba(0, 255, 136, 0.14);
    box-shadow: 0 0 12px rgba(0, 255, 136, 0.35);
}

.duo-head-spacer {
    flex: 1;
    min-height: 1px;
}

.duo-source-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    margin-bottom: 10px;
}

.duo-source-buttons .sound-type-btn {
    padding: 8px 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    border-width: 2px;
    background: #111820;
    color: #8899aa;
    border-color: #1a2530;
    text-transform: uppercase;
}

.duo-source-buttons .sound-type-btn:hover {
    border-color: rgba(0, 255, 255, 0.4);
    color: #e0e0e0;
    background: rgba(0, 255, 255, 0.05);
}

.duo-source-buttons .sound-type-btn.active {
    background: var(--cyan, #00ffff);
    color: #000;
    border-color: var(--cyan, #00ffff);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
    text-shadow: none;
}

.duo-browser-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.duo-browser-col {
    border: 1px solid #1a2530;
    background: transparent;
    padding: 0;
}

.duo-browser-title {
    color: var(--cyan, #00ffff);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    display: flex;
    justify-content: space-between;
    padding: 10px 12px 8px;
    border-bottom: 1px solid #1a2530;
}

.duo-browser-count {
    color: #3a4a5a;
    font-size: 12px;
    letter-spacing: 1px;
}

.duo-browser-list {
    height: 260px;
    min-height: 260px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0;
}

.duo-list-item {
    width: 100%;
    text-align: left;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: #8899aa;
    font-size: 14px;
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
}

.duo-list-item:hover {
    background: rgba(0, 255, 255, 0.05);
    color: #e0e0e0;
    border-left-color: rgba(0, 255, 255, 0.3);
}

.duo-list-item.active {
    border-left-color: var(--cyan, #00ffff);
    color: var(--cyan, #00ffff);
    background: rgba(0, 255, 255, 0.1);
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.duo-browser-col:nth-child(2) .duo-browser-title {
    color: var(--green, #00ff88);
}

.duo-browser-col:nth-child(2) .duo-list-item:hover {
    background: rgba(0, 255, 136, 0.06);
    border-left-color: rgba(0, 255, 136, 0.3);
}

.duo-browser-col:nth-child(2) .duo-list-item.active {
    background: rgba(0, 255, 136, 0.12);
    color: var(--green, #00ff88);
    border-left-color: var(--green, #00ff88);
    text-shadow: 0 0 8px rgba(0, 255, 136, 0.3);
    box-shadow: inset 0 0 20px rgba(0, 255, 136, 0.05);
}

.duo-item-idx {
    color: #2a3a4a;
    font-size: 11px;
    width: 28px;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0;
}

.duo-list-item.active .duo-item-idx {
    color: #c9f2ff;
    font-weight: 700;
}

.duo-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.duo-item-count {
    color: #3a4a5a;
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
}

.duo-browser-list::-webkit-scrollbar {
    width: 8px;
}

.duo-browser-list::-webkit-scrollbar-track {
    background: #0a0e17;
}

.duo-browser-list::-webkit-scrollbar-thumb {
    background: #1a2530;
    border: 1px solid #2a3a4a;
}

.duo-browser-list::-webkit-scrollbar-thumb:hover {
    background: #2a3a4a;
    border-color: var(--cyan, #00ffff);
}

.duo-empty {
    color: var(--text-dim);
    font-size: 13px;
    padding: 12px;
    letter-spacing: 2px;
    min-height: 236px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.duo-knob-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(60px, 1fr));
    gap: 6px 4px;
    justify-items: center;
    margin-bottom: 8px;
}

.duo-rotary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.duo-big-knob {
    width: 42px;
    height: 42px;
    --duo-ring-dim: var(--cyan-dim, #004455);
    --duo-ring: var(--cyan, #00ffff);
    --duo-glow: var(--cyan-glow, rgba(0, 255, 255, 0.3));
    --duo-needle: var(--cyan, #00ffff);
    border: 2px solid var(--duo-ring-dim);
}

.duo-big-knob:hover {
    border-color: var(--duo-ring);
    box-shadow: 0 0 10px var(--duo-glow);
}

.duo-big-knob.active {
    border-color: var(--duo-ring);
    box-shadow: 0 0 8px var(--duo-glow);
}

.duo-big-knob::before {
    width: 2px;
    height: 16px;
    background: var(--duo-needle);
    box-shadow: 0 0 5px var(--duo-needle);
}

.duo-big-knob::after {
    border-color: var(--duo-ring-dim);
}

.duo-big-knob.duo-knob-volume,
.duo-big-knob.duo-knob-pan {
    --duo-ring-dim: var(--green-dim, #004422);
    --duo-ring: var(--green, #00ff88);
    --duo-glow: var(--green-glow, rgba(0, 255, 136, 0.3));
    --duo-needle: var(--green, #00ff88);
}

.duo-big-knob.duo-knob-attack,
.duo-big-knob.duo-knob-release {
    --duo-ring-dim: var(--blue-dim, #002244);
    --duo-ring: var(--blue, #33aaff);
    --duo-glow: var(--blue-glow, rgba(51, 170, 255, 0.3));
    --duo-needle: var(--blue, #33aaff);
}

.duo-big-knob.duo-knob-locut,
.duo-big-knob.duo-knob-hicut {
    --duo-ring-dim: var(--purple-dim, #332255);
    --duo-ring: var(--purple, #aa66ff);
    --duo-glow: var(--purple-glow, rgba(170, 102, 255, 0.3));
    --duo-needle: var(--purple, #aa66ff);
}

.duo-big-knob.duo-knob-send1,
.duo-big-knob.duo-knob-send2 {
    --duo-ring-dim: var(--orange-dim, #442200);
    --duo-ring: var(--orange, #ff8800);
    --duo-glow: var(--orange-glow, rgba(255, 136, 0, 0.3));
    --duo-needle: var(--orange, #ff8800);
}

.duo-big-knob.duo-knob-transpose,
.duo-big-knob.duo-knob-pitch {
    --duo-ring-dim: var(--yellow-dim, #553300);
    --duo-ring: var(--yellow, #ffcc00);
    --duo-glow: var(--yellow-glow, rgba(255, 204, 0, 0.3));
    --duo-needle: var(--yellow, #ffcc00);
}

.duo-transpose-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 4px 0 6px 0;
}

.duo-trans-btn {
    width: 28px;
    height: 22px;
    background: rgba(136, 204, 255, 0.1);
    border: 1px solid rgba(136, 204, 255, 0.3);
    color: #88ccff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border-radius: 2px;
    font-family: 'Consolas', 'Monaco', monospace;
    padding: 0;
    line-height: 22px;
    transition: background 0.1s, border-color 0.1s;
}

.duo-trans-btn:hover {
    background: rgba(136, 204, 255, 0.2);
    border-color: #88ccff;
}

.duo-trans-btn:active {
    background: rgba(136, 204, 255, 0.35);
}

.duo-trans-field {
    min-width: 44px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #88ccff;
    background: rgba(136, 204, 255, 0.08);
    border: 1px solid rgba(136, 204, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    letter-spacing: 0.5px;
    padding: 0 6px;
    transition: background 0.1s;
}

.duo-trans-field:hover {
    background: rgba(136, 204, 255, 0.18);
    border-color: #88ccff;
}

.duo-big-knob.duo-knob-drive,
.duo-big-knob.duo-knob-shape,
.duo-big-knob.duo-knob-tone {
    --duo-ring-dim: #441111;
    --duo-ring: #ff4444;
    --duo-glow: rgba(255, 68, 68, 0.3);
    --duo-needle: #ff4444;
}

.duo-big-knob.duo-knob-reso {
    --duo-ring-dim: var(--purple-dim, #332255);
    --duo-ring: var(--purple, #aa66ff);
    --duo-glow: var(--purple-glow, rgba(170, 102, 255, 0.3));
    --duo-needle: var(--purple, #aa66ff);
}

.duo-big-knob.duo-knob-vel {
    --duo-ring-dim: #553300;
    --duo-ring: #ffaa00;
    --duo-glow: rgba(255, 170, 0, 0.3);
    --duo-needle: #ffaa00;
}

.duo-vel-assign-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffaa00;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 0 4px rgba(255, 170, 0, 0.5);
    transition: background 0.15s, box-shadow 0.15s;
}

.duo-vel-assign-dot:hover {
    background: #ffcc44;
    box-shadow: 0 0 8px rgba(255, 204, 68, 0.8);
}

.duo-vel-assign-dot.assign-active {
    background: #ff4400;
    box-shadow: 0 0 10px rgba(255, 68, 0, 0.8);
    animation: vel-dot-pulse 0.6s ease-in-out infinite alternate;
}

@keyframes vel-dot-pulse {
    0% { box-shadow: 0 0 6px rgba(255, 68, 0, 0.5); }
    100% { box-shadow: 0 0 14px rgba(255, 68, 0, 1.0); }
}

.duo-vel-fix-label {
    cursor: pointer;
    transition: color 0.15s;
}

.duo-vel-fix-label.vel-mode-active {
    color: #ffaa00;
    text-shadow: 0 0 6px rgba(255, 170, 0, 0.5);
}

.duo-rotary.duo-vel-assignable {
    cursor: pointer;
}

.duo-rotary.duo-vel-assignable .duo-big-knob {
    border-color: rgba(255, 170, 0, 0.5);
    box-shadow: 0 0 8px rgba(255, 170, 0, 0.3);
    animation: vel-assignable-pulse 0.8s ease-in-out infinite alternate;
}

@keyframes vel-assignable-pulse {
    0% { box-shadow: 0 0 4px rgba(255, 170, 0, 0.2); }
    100% { box-shadow: 0 0 12px rgba(255, 170, 0, 0.5); }
}

.duo-knob-grid .duo-rotary .duo-vel-target-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ffaa00;
    box-shadow: 0 0 4px rgba(255, 170, 0, 0.6);
    pointer-events: none;
    z-index: 3;
}

.duo-rotary .knob-label {
    font-size: 10px;
    letter-spacing: 0.6px;
    color: #9ad6de;
    min-height: 12px;
}

.duo-rotary .knob-value {
    min-width: 28px;
    text-align: center;
    font-size: 10px;
    color: #7ec7d0;
}

.duo-fx-row {
    display: grid;
    grid-template-columns: minmax(300px, 1fr) 88px minmax(170px, 220px) 88px minmax(300px, 1fr);
    gap: 10px;
    margin-top: 22px;
    padding: 14px 0 6px;
    border-top: 1px solid rgba(0, 255, 255, 0.08);
    justify-items: center;
    align-items: stretch;
}

.duo-fx-row .ins-fx-slot {
    margin-bottom: 0;
    width: min(440px, 100%);
    min-height: 134px;
    background: linear-gradient(180deg, rgba(8, 16, 26, 0.95) 0%, rgba(6, 12, 20, 0.98) 100%);
    border: 1px solid rgba(0, 255, 255, 0.26);
    box-shadow: inset 0 0 0 1px rgba(0, 255, 255, 0.08);
    padding: 7px 8px;
}

.duo-fx-row .ins-fx-header {
    margin-bottom: 8px;
    gap: 5px;
}

.duo-fx-row .ins-fx-type-name {
    font-size: 13px;
    padding: 6px 8px;
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.32);
}

.duo-fx-row .ins-fx-toggle {
    width: 42px;
    font-size: 10px;
    padding: 5px 4px;
}

.duo-fx-row .btn-tiny {
    min-width: 28px;
    height: 24px;
    font-size: 12px;
}

.duo-fx-row .ins-fx-knob-container {
    gap: 4px;
}

.duo-fx-row .ins-fx-knob-container .knob.knob-tiny {
    width: 40px;
    height: 40px;
    border-width: 2px;
}

.duo-fx-row .ins-fx-knob-container .knob.knob-tiny::before {
    height: 17px;
    width: 3px;
}

.duo-fx-row .ins-fx-knob-container .knob.knob-tiny::after {
    width: 8px;
    height: 8px;
}

.duo-fx-row .ins-fx-knob-container .knob-label {
    font-size: 11px;
    color: #84bfce;
    width: 52px;
}

.duo-split-panel {
    width: 100%;
    min-height: 134px;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 8px 10px;
}

.duo-split-panel .transport-btn {
    width: 100%;
    max-width: 150px;
    font-size: 11px;
    letter-spacing: 1px;
}

.duo-split-knob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.duo-split-knob-wrap [data-duo-split-value] {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--cyan, #00ffff);
    min-width: 48px;
}

.duo-mute-panel {
    width: 100%;
    min-height: 108px;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
}

.duo-solo-trans-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 6px;
    gap: 6px;
}

.duo-solo-trans-panel .transport-btn {
    width: 100%;
    max-width: 84px;
    min-height: 34px;
    font-size: 12px;
    letter-spacing: 1.2px;
}

.transport-btn.duo-solo-active {
    color: var(--green, #00ff88);
    border-color: var(--green, #00ff88);
    background: rgba(0, 255, 136, 0.14);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.28);
}

.duo-mute-panel .transport-btn {
    width: 100%;
    max-width: 84px;
    min-height: 34px;
    font-size: 12px;
    letter-spacing: 1.2px;
    padding: 7px 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.duo-mute-panel .transport-btn.transport-stop-btn {
    color: var(--green, #00ff88);
    border-color: var(--green, #00ff88);
    background: rgba(0, 255, 136, 0.14);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.28);
}


.duo-load-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    min-height: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease;
    margin-left: auto;
}

.duo-load-row.active {
    opacity: 1;
}

.duo-load-title {
    width: 38px;
    font-size: 10px;
    color: #8aa3b8;
    letter-spacing: 1px;
}

.duo-load-track {
    width: 425px;
    min-width: 425px;
    height: 6px;
    border: 1px solid #2a3a4a;
    background: #0a0e17;
    position: relative;
    overflow: hidden;
}

.duo-load-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00bcd4 0%, #00ff88 100%);
    transition: width 0.12s ease;
}

.duo-load-pct {
    width: 30px;
    text-align: right;
    font-size: 10px;
    color: #9ab3c5;
}