/* ================================================
   CREATIVE LAB CSS
   ================================================ */

/* ── HEADER BADGE ─────────────────────────────── */
.creative-tier-badge {
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(248,32,176,0.1);
    color: #f820b0;
    border: 1px solid rgba(248,32,176,0.3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Modal Backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    backdrop-filter: blur(8px);
    z-index: 1004;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s;
}
.modal-backdrop.show { opacity: 1; pointer-events: auto; }

/* AI Engine Diagnostic Modal */
.engine-diag-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 90%;
    max-width: 800px;
    z-index: 1005;
    padding: 2.5rem;
    background: rgba(15, 12, 41, 0.95);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: white;
}
.engine-diag-modal.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.diag-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2rem; }
.diag-title-row { display: flex; gap: 1.2rem; align-items: center; }
.diag-icon { font-size: 2rem; color: #00d2ff; }

.engine-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 2rem;
}
.engine-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
}
.engine-card.active {
    background: rgba(0, 210, 255, 0.1);
    border-color: #00d2ff;
}
.ec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.ec-badge { font-size: 0.65rem; font-weight: 800; padding: 2px 6px; border-radius: 4px; }
.ec-badge.lyria { background: #4285f4; }
.ec-badge.musicgen { background: #0668e1; }
.ec-badge.local { background: #555; }
.ec-status { font-size: 1rem; color: rgba(255,255,255,0.1); }
.engine-card.active .ec-status { color: #00ff88; }
.engine-card p { font-size: 0.75rem; color: #aaa; line-height: 1.5; margin-bottom: 1rem; height: 3.5rem; }
.ec-features { display: flex; flex-direction: column; gap: 0.4rem; }
.ec-features span { font-size: 0.7rem; color: #aaa; display: flex; align-items: center; gap: 0.4rem; }
.ec-features i { font-size: 0.65rem; color: #00ff88; }

.diag-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    font-family: monospace;
}
.log-header { font-size: 0.65rem; color: #666; margin-bottom: 0.6rem; display: flex; justify-content: space-between; }
.log-status { color: #00ff88; }
.log-body { height: 100px; overflow-y: auto; display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.7rem; }
.log-line .sys { color: #888; }
.log-line .lyria { color: #00d2ff; }

.diag-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; }
.btn-glow {
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 700;
    cursor: pointer;
}


/* AI Engine Selector Indicator */
.engine-selector-wrap {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 12px;
    padding: 0.4rem 0.8rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.engine-selector-wrap:hover {
    background: rgba(0, 210, 255, 0.1);
    border-color: #00d2ff;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
}
.engine-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}
.engine-indicator i {
    color: #00d2ff;
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.5));
}
.engine-pulse {
    width: 6px;
    height: 6px;
    background: #00ff88;
    border-radius: 50%;
    position: relative;
}
.engine-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid #00ff88;
    border-radius: 50%;
    animation: engine-ping 1.5s infinite;
}
@keyframes engine-ping {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}
.engine-tier {
    font-size: 0.6rem;
    padding: 1px 4px;
    border-radius: 4px;
    background: #00d2ff;
    color: black;
    font-weight: 800;
}


/* ── TABS ─────────────────────────────────────── */
.module-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; border-bottom:1px solid var(--glass-border); padding-bottom:0; }
.tab-btn { padding:0.8rem 1.4rem; border-radius:var(--border-radius-sm) var(--border-radius-sm) 0 0; background:transparent; color:var(--text-muted); font-weight:600; font-size:0.9rem; display:flex; align-items:center; gap:0.5rem; transition:var(--transition-fast); border-bottom:2px solid transparent; margin-bottom:-1px; }
.tab-btn:hover { color:var(--text-main); background:rgba(255,255,255,0.03); }
.tab-btn.active { color:var(--text-main); border-bottom-color:#f820b0; background:rgba(248,32,176,0.08); }
.tab-content { display:none; }
.tab-content.active { display:block; animation:fadeInUp 0.5s ease forwards; }

/* ── SHARED FORM ELEMENTS ────────────────────── */
.form-control {
    width: 100%;
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--border-radius-sm);
    color: white;
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.2s;
    font-family: inherit;
    box-sizing: border-box;
}
.form-control:focus { border-color: #f820b0; }
.form-control::placeholder { color: var(--text-muted); }

.setting-group { display:flex; flex-direction:column; gap:0.5rem; }
.setting-row { display:flex; flex-direction:column; gap:0.4rem; }
.input-label { font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); }
.setting-label { font-size:0.78rem; color:var(--text-muted); font-weight:600; }
.setting-select { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--border-radius-sm); color:white; padding:0.6rem 0.8rem; font-size:0.9rem; outline:none; transition:border-color 0.2s; font-family:inherit; }
.setting-select:focus { border-color:#f820b0; }
.setting-select option { background:#1a1c28; }

.slider-with-val { display:flex; align-items:center; gap:1rem; }
.slider-with-val input[type=range] { flex:1; appearance:none; height:4px; background:rgba(255,255,255,0.15); outline:none; border-radius:2px; cursor:pointer; }
.slider-with-val input[type=range]::-webkit-slider-thumb { appearance:none; width:16px; height:16px; border-radius:50%; background:linear-gradient(135deg,#f820b0,#a855f7); cursor:pointer; }
.slider-val { font-size:0.9rem; font-weight:700; color:#f820b0; min-width:44px; text-align:right; }
.intensity-labels { display:flex; justify-content:space-between; font-size:0.72rem; color:var(--text-muted); margin-top:0.2rem; }

/* Panel shared */
.panel-head { display:flex; align-items:center; gap:1rem; border-bottom:1px solid var(--glass-border); padding-bottom:1.2rem; }
.panel-head h3 { font-size:1.05rem; margin-bottom:0.1rem; }
.panel-sub { font-size:0.8rem; color:var(--text-muted); }
.panel-icon { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; color:white; flex-shrink:0; }

.yt-url-row { display:flex; gap:0.5rem; }
.yt-url-input { flex:1; }
.btn-danger { padding:0.7rem 1.2rem; border-radius:var(--border-radius-sm); background:#ff4444; color:white; font-weight:700; font-size:0.85rem; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; white-space:nowrap; }
.btn-danger:hover { background:#cc0000; }

/* ── TRANSFORM BUTTON ────────────────────────── */
.btn-transform {
    position: relative;
    padding: 1rem 1.5rem;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, #f820b0, #a855f7);
    color: white;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    overflow: hidden;
    transition: all 0.3s;
    cursor: pointer;
    border: none;
}
.btn-transform:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(248,32,176,0.4); }
.btn-shimmer {
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: shimmer 2.5s infinite;
}
@keyframes shimmer { to { left: 200%; } }

/* ── STYLE TRANSFORMER ───────────────────────── */
.style-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
    align-items: start;
}

.style-input-panel {
    border-radius: var(--border-radius-lg);
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
}

.genre-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.genre-btn {
    padding: 0.6rem 0.5rem;
    border-radius: var(--border-radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.genre-btn:hover { border-color: rgba(248,32,176,0.3); color:white; background:rgba(248,32,176,0.05); }
.genre-btn.active { background: rgba(248,32,176,0.15); border-color:#f820b0; color:white; }

/* ── Selector Utility Buttons (Other / Random / Clear) ── */
.selector-utils {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.3rem;
}
.util-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 100px;
    border: 1px dashed rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.util-btn:hover { color: white; background: rgba(255,255,255,0.08); }
.util-btn.util-other:hover { border-color: rgba(168,85,247,0.5); color: #c084fc; background: rgba(168,85,247,0.08); }
.util-btn.util-other.open { border-style: solid; border-color: rgba(168,85,247,0.5); color: #c084fc; background: rgba(168,85,247,0.12); }
.util-btn.util-random:hover { border-color: rgba(246,211,101,0.5); color: #f6d365; background: rgba(246,211,101,0.08); }
.util-btn.util-random:active { animation: diceShake 0.3s ease; }
@keyframes diceShake { 0%{transform:rotate(0)} 25%{transform:rotate(-10deg)} 50%{transform:rotate(10deg)} 75%{transform:rotate(-5deg)} 100%{transform:rotate(0)} }
.util-btn.util-clear:hover { border-color: rgba(255,107,107,0.5); color: #ff6b6b; background: rgba(255,107,107,0.08); }

/* Custom Input Row */
.custom-input-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    animation: fadeInUp 0.25s ease;
}
.custom-input-row .custom-input {
    flex: 1;
    border-color: rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.06);
}
.custom-input-row .custom-input:focus {
    border-color: #a855f7;
}
.btn-apply-custom {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border: none;
    color: white;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.btn-apply-custom:hover { transform: scale(1.08); box-shadow: 0 4px 14px rgba(168,85,247,0.4); }

/* Selected Label */
.selected-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.8rem;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(99,102,241,0.06));
    border: 1px solid rgba(168,85,247,0.3);
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 600;
    animation: fadeInUp 0.3s ease;
}
.selected-label i { font-size: 0.85rem; }

/* Prompt Direction (shared by Style Transformer & AI Songwriter) */
.prompt-direction {
    resize: vertical;
    min-height: 60px;
    line-height: 1.6;
    font-family: inherit;
}
.label-hint {
    font-weight: 400;
    font-size: 0.72rem;
    color: rgba(255,255,255,0.25);
    text-transform: none;
    letter-spacing: 0;
}

/* Quick Tags for prompts */
.prompt-quick-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}
.prompt-tag {
    padding: 0.22rem 0.6rem;
    border-radius: 100px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    color: var(--text-muted);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s;
}
.prompt-tag:hover {
    color: white;
    border-color: rgba(168,85,247,0.4);
    background: rgba(168,85,247,0.08);
}
.prompt-tag.used {
    color: #c084fc;
    border-color: rgba(168,85,247,0.5);
    background: rgba(168,85,247,0.12);
}


.preserve-toggles { display:flex; flex-wrap:wrap; gap:0.5rem; }
.check-chip {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 100px;
    font-size: 0.82rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.check-chip input { accent-color: #f820b0; }
.check-chip:has(input:checked) { border-color: rgba(248,32,176,0.4); color: white; background: rgba(248,32,176,0.08); }

/* Style Output */
.style-output-panel { display:flex; flex-direction:column; gap:1.2rem; }

.track-compare-card {
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
}
.compare-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.5rem;
    align-items: center;
}
.compare-side { display:flex; flex-direction:column; gap:0.5rem; }
.compare-label { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); display:flex; align-items:center; gap:0.4rem; }
.compare-track-info { display:flex; align-items:center; gap:0.8rem; }
.compare-thumb { width:52px; height:52px; border-radius:8px; object-fit:cover; }
.compare-title { font-weight:600; font-size:0.95rem; }
.compare-artist { font-size:0.8rem; color:var(--text-muted); }
.compare-arrow-big { display:flex; flex-direction:column; align-items:center; gap:0.5rem; }
.arrow-circle {
    width: 48px; height:48px;
    border-radius:50%;
    background: linear-gradient(135deg,#f820b0,#a855f7);
    display: flex; align-items:center; justify-content:center;
    font-size: 1.1rem; color: white;
    animation: spin 4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.transform-genre-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 100px;
    background: rgba(248,32,176,0.15);
    color: #f820b0;
    border: 1px solid rgba(248,32,176,0.3);
}

/* Status area */
.transform-status-area { min-height:120px; display:flex; align-items:center; justify-content:center; }
.transform-spinner { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.dna-loader { display:flex; gap:4px; align-items:flex-end; height:40px; }
.dna-loader div { width:6px; border-radius:3px; background:linear-gradient(to top,#f820b0,#a855f7); animation:dna 1s ease-in-out infinite; }
.dna-loader div:nth-child(1) { animation-delay:0s; }
.dna-loader div:nth-child(2) { animation-delay:0.15s; }
.dna-loader div:nth-child(3) { animation-delay:0.3s; }
.dna-loader div:nth-child(4) { animation-delay:0.45s; }
.dna-loader div:nth-child(5) { animation-delay:0.6s; }
@keyframes dna { 0%,100%{height:8px} 50%{height:40px} }

.transform-result-badge { color:var(--accent-green); font-weight:700; display:flex; align-items:center; gap:0.5rem; font-size:0.95rem; }
.transform-result-meta { font-size:0.8rem; color:var(--text-muted); margin-top:0.5rem; }

.transform-placeholder { display:flex; flex-direction:column; align-items:center; gap:0.5rem; color:var(--text-muted); font-size:0.9rem; opacity:0.6; }
.transform-placeholder i { font-size:2rem; }

.style-empty-state { border-radius:var(--border-radius-lg); padding:3rem 2rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06); }
.empty-icon-ring { width:80px; height:80px; border-radius:50%; background:rgba(248,32,176,0.1); border:2px solid rgba(248,32,176,0.3); display:flex; align-items:center; justify-content:center; font-size:2rem; color:#f820b0; }
.style-empty-state h3 { font-size:1.2rem; }
.style-empty-state p { color:var(--text-muted); font-size:0.9rem; max-width:400px; line-height:1.6; }
.example-genres { display:flex; flex-wrap:wrap; gap:0.5rem; justify-content:center; }
.example-genres span { padding:0.3rem 0.8rem; border-radius:100px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); font-size:0.8rem; color:var(--text-muted); }

/* Genre DNA */
.genre-analysis-panel { border-radius:var(--border-radius-lg); padding:1.5rem; }
.genre-analysis-panel h4 { font-size:0.95rem; margin-bottom:1rem; display:flex; align-items:center; gap:0.5rem; }
.dna-bars { display:flex; flex-direction:column; gap:0.7rem; }
.dna-bar-row { display:flex; align-items:center; gap:1rem; }
.dna-bar-name { font-size:0.8rem; color:var(--text-muted); min-width:80px; }
.dna-bar-track { flex:1; height:8px; background:rgba(255,255,255,0.08); border-radius:4px; overflow:hidden; }
.dna-bar-fill { height:100%; border-radius:4px; transition:width 1s cubic-bezier(0.16,1,0.3,1); }
.dna-bar-pct { font-size:0.8rem; font-weight:700; min-width:36px; text-align:right; }

/* ── AI SONGWRITER ───────────────────────────── */
.songwriter-layout { display:grid; grid-template-columns:380px 1fr; gap:1.5rem; align-items:start; }
.songwriter-input { border-radius:var(--border-radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1.2rem; }
.songwriter-output { border-radius:var(--border-radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1rem; }

.mood-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.mood-btn { padding:0.6rem 0.5rem; border-radius:var(--border-radius-sm); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--text-muted); font-size:0.82rem; font-weight:600; cursor:pointer; transition:all 0.2s; }
.mood-btn:hover { border-color:rgba(0,210,255,0.3); color:white; }
.mood-btn.active { background:rgba(0,210,255,0.12); border-color:rgba(0,210,255,0.5); color:white; }

.chord-presets { display:flex; flex-wrap:wrap; gap:0.4rem; }
.chord-chip { padding:0.4rem 0.8rem; border-radius:100px; border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:0.78rem; cursor:pointer; transition:all 0.2s; background:transparent; }
.chord-chip:hover { color:white; border-color:rgba(0,210,255,0.4); }
.chord-chip.active { background:rgba(0,210,255,0.15); color:var(--accent-blue); border-color:rgba(0,210,255,0.5); }

/* Output */
.sw-output-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; border-bottom:1px solid var(--glass-border); }
.sw-output-header h3 { font-size:1.1rem; }
.sw-output-actions { display:flex; gap:0.5rem; }
.btn-icon-sm { width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; font-size:0.9rem; }
.btn-icon-sm:hover { background:rgba(255,255,255,0.12); color:white; }

.chord-display { display:flex; align-items:center; gap:0.3rem; font-size:0.85rem; color:var(--text-main); padding:0.6rem 0.8rem; background:rgba(0,210,255,0.08); border-radius:var(--border-radius-sm); border:1px solid rgba(0,210,255,0.2); }
.chord-display-label { color:var(--text-muted); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; }

.lyrics-editor-container { flex:1; min-height:300px; }
.lyrics-placeholder { height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.8rem; color:var(--text-muted); text-align:center; }
.lyrics-placeholder i { font-size:2.5rem; opacity:0.4; }
.lyrics-editor { height:300px; overflow-y:auto; }
.lyrics-loading { display:flex; align-items:center; gap:0.8rem; padding:1rem 0; color:var(--text-muted); font-size:0.9rem; }
.typing-cursor { width:8px; height:20px; background:#f820b0; border-radius:2px; animation:blink 0.7s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Lyric Lab Enhanced Editor */
.lyrics-content { padding:0.5rem 0; position: relative; }
.lyrics-section { margin-bottom:1.5rem; transition: all 0.2s; position: relative; }
.lyrics-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
.lyrics-section-label { font-size:0.75rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:#f820b0; margin-bottom:0 !important; }
.lyrics-section-tools { opacity: 0; transition: opacity 0.2s; display: flex; gap: 0.4rem; list-style: none; }
.lyrics-section:hover .lyrics-section-tools { opacity: 1; }
.ls-tool-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1); color: var(--text-muted); font-size: 0.65rem; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.ls-tool-btn:hover { background: rgba(255,80,80,0.15); color: #ff6b6b; border-color: rgba(255,80,80,0.3); }

.lyrics-lines { 
    font-size:0.95rem; line-height:1.8; color:var(--text-main); white-space: pre-wrap; 
    padding: 0.4rem 0.6rem; border-radius: 6px; transition: all 0.2s; border: 1px solid transparent; 
}
.lyrics-lines:hover { background: rgba(255,255,255,0.03); border-color: rgba(255,255,255,0.1); }
.lyrics-lines:focus { outline: none; background: rgba(255,255,255,0.05); border-color: rgba(0,210,255,0.3); box-shadow: 0 0 12px rgba(0,210,255,0.1); }
.lyrics-lines.chorus { font-weight:600; color: #fff; }

.btn-add-section {
    width: 100%; padding: 0.6rem; margin-top: 1rem;
    border-radius: 8px; border: 1px dashed rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.02); color: var(--text-muted);
    font-size: 0.75rem; font-weight: 600; cursor: pointer;
    transition: all 0.2s; display: flex; align-items: center; justify-content: center; gap: 0.4rem;
}
.btn-add-section:hover { background: rgba(0,210,255,0.05); color: #00d2ff; border-color: rgba(0,210,255,0.3); }

/* Selection-based AI ReWrite Button */
.ai-rewrite-floating {
    position: fixed; z-index: 2000; padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #00d2ff, #3a7bd5); color: white;
    border: none; border-radius: 100px; font-size: 0.75rem; font-weight: 800;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4); cursor: pointer; display: none;
    align-items: center; gap: 0.5rem; pointer-events: auto;
    animation: popIn 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.ai-rewrite-floating:hover { transform: scale(1.05); background: linear-gradient(135deg, #33d9ff, #4a8deb); }
.ai-rewrite-floating i { font-size: 0.85rem; }

[contenteditable]:empty:before { content: attr(placeholder); color: var(--text-muted); opacity: 0.5; }

@keyframes popIn { from { opacity: 0; transform: scale(0.8) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.engine-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(0, 210, 255, 0.1);
    color: #00d2ff;
    border: 1px solid rgba(0, 210, 255, 0.2);
    margin-left: 10px;
    vertical-align: middle;
}

/* ── INSTRUMENT DISPLAY CARD ── */
.instrument-display-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}
.instrument-display-card:hover {
    background: rgba(0, 210, 255, 0.08);
    border-color: rgba(0, 210, 255, 0.3);
    transform: translateY(-2px);
}
.idc-icon {
    font-size: 1.8rem;
    filter: drop-shadow(0 0 10px rgba(0, 210, 255, 0.3));
}
.idc-info { flex: 1; }
.idc-name { font-weight: 700; color: white; font-size: 1rem; }
.idc-category { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.idc-action {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--accent-blue);
    opacity: 0.6;
}

/* ── INSTRUMENT MODAL ── */
.inst-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
    width: 650px;
    max-width: 95vw;
    height: 600px;
    max-height: 85vh;
    z-index: 1100;
    display: none;
    flex-direction: column;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.inst-modal.show {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.inst-search-bar {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(0,0,0,0.3);
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    margin: 1.5rem 0;
    border: 1px solid rgba(255,255,255,0.05);
}
.inst-search-bar input {
    background: transparent;
    border: none;
    color: white;
    font-family: inherit;
    font-size: 0.95rem;
    width: 100%;
}
.inst-search-bar input:focus { outline: none; }

.inst-tabs {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.inst-tab {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}
.inst-tab.active {
    background: rgba(0,210,255,0.15);
    border-color: rgba(0,210,255,0.3);
    color: var(--accent-blue);
}

.inst-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.8rem;
    overflow-y: auto;
    padding-right: 0.5rem;
    flex: 1;
}
.inst-grid::-webkit-scrollbar { width: 4px; }
.inst-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }

.inst-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    padding: 1rem 0.5rem;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.inst-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: var(--accent-blue);
    transform: translateY(-3px);
}
.inst-i-icon { font-size: 1.5rem; }
.inst-i-name { font-size: 0.8rem; font-weight: 600; color: white; }

/* ── MINI SWITCH ── */
.solo-group-toggle { display: flex; align-items: center; gap: 0.5rem; }
.toggle-label.mini { font-size: 0.65rem; font-weight: 800; color: var(--text-muted); letter-spacing: 0.05em; }
.switch-mini { position: relative; display: inline-block; width: 34px; height: 18px; }
.switch-mini input { opacity: 0; width: 0; height: 0; }
.slider-round {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255,255,255,0.1); transition: .4s; border-radius: 34px;
    border: 1px solid rgba(255,255,255,0.1);
}
.slider-round:before {
    position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px;
    background-color: white; transition: .4s; border-radius: 50%;
}
input:checked + .slider-round { background-color: var(--accent-blue); }
input:checked + .slider-round:before { transform: translateX(16px); }

/* ── COUNT STEPPER ── */
.count-stepper { display: flex; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; overflow: hidden; background: rgba(0,0,0,0.2); }
.step-btn {
    width: 28px; height: 28px; background: rgba(255,255,255,0.05); border: none;
    color: white; cursor: pointer; font-size: 1.1rem; transition: background 0.2s;
}
.step-btn:hover { background: rgba(255,255,255,0.1); }
#singer-count {
    width: 34px; height: 28px; background: transparent; border: none;
    color: var(--accent-blue); text-align: center; font-weight: 700; font-family: inherit;
}

@keyframes highlightFlash {
    0% { background: rgba(0,210,255,0.2); box-shadow: 0 0 15px rgba(0,210,255,0.3); }
    100% { background: transparent; box-shadow: none; }
}
.highlight-flash { animation: highlightFlash 1.5s ease-out; }

.rhyme-score-bar { display:flex; align-items:center; gap:0.8rem; }
.rsb-label { font-size:0.8rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:0.4rem; }
.rsb-track { flex:1; height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden; }
.rsb-fill { height:100%; border-radius:3px; background:linear-gradient(to right,#f820b0,#fda085); transition:width 1.2s ease; }
.rsb-val { font-weight:700; font-size:0.9rem; color:var(--accent-green); min-width:40px; }

/* ── MUSICGEN STUDIO ─────────────────────────── */
.musicgen-layout { display:grid; grid-template-columns:400px 1fr; gap:1.5rem; align-items:start; }
.musicgen-prompt { border-radius:var(--border-radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1.2rem; }
.musicgen-output { border-radius:var(--border-radius-lg); padding:1.8rem; display:flex; flex-direction:column; gap:1rem; }

.prompt-textarea { width:100%; padding:0.8rem 1rem; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:var(--border-radius-sm); color:white; font-size:0.9rem; outline:none; resize:vertical; font-family:inherit; line-height:1.6; transition:border-color 0.2s; box-sizing:border-box; }
.prompt-textarea:focus { border-color:#f6d365; }
.prompt-textarea::placeholder { color:var(--text-muted); }
.prompt-hint { font-size:0.78rem; color:var(--text-muted); display:flex; align-items:flex-start; gap:0.4rem; line-height:1.5; }
.prompt-hint i { color:#f6d365; margin-top:0.1rem; flex-shrink:0; }

.tag-cloud { display:flex; flex-wrap:wrap; gap:0.4rem; }
.tag-btn { padding:0.3rem 0.7rem; border-radius:100px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--text-muted); font-size:0.78rem; cursor:pointer; transition:all 0.2s; }
.tag-btn:hover { color:white; border-color:rgba(246,211,101,0.4); background:rgba(246,211,101,0.06); }
.tag-btn.used { color:#f6d365; border-color:rgba(246,211,101,0.5); background:rgba(246,211,101,0.1); }

.mg-config-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:0.8rem; }

/* Output */
.mg-output-header { display:flex; justify-content:space-between; align-items:center; padding-bottom:0.8rem; border-bottom:1px solid var(--glass-border); }
.mg-output-header h3 { font-size:1rem; display:flex; align-items:center; gap:0.5rem; }
.mg-track-count { font-size:0.8rem; color:var(--text-muted); background:rgba(255,255,255,0.06); padding:0.2rem 0.7rem; border-radius:100px; }

/* Progress */
.mg-progress-wrapper { padding:0.8rem 0; }
.mg-progress-label { font-size:0.85rem; color:var(--text-muted); margin-bottom:0.6rem; }
.mg-progress-bar { position:relative; width:100%; height:10px; background:rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; }
.mg-progress-fill { height:100%; background:linear-gradient(to right,#f6d365,#fda085); border-radius:5px; width:0%; transition:width 0.4s ease; }
.mg-progress-glow { position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(90deg,transparent,rgba(246,211,101,0.3),transparent); animation:glow-sweep 1.5s ease infinite; }
@keyframes glow-sweep { 0%{transform:translateX(-100%)} 100%{transform:translateX(200%)} }

/* Track items */
.mg-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem; gap:0.8rem; color:var(--text-muted); text-align:center; }
.mg-empty-icon { font-size:3rem; color:rgba(246,211,101,0.3); }

.mg-track-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--border-radius-md);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
    animation: fadeInUp 0.5s ease forwards;
}
.mg-track-item:hover { border-color:rgba(246,211,101,0.2); background:rgba(246,211,101,0.03); }
.mg-track-num { width:32px; height:32px; border-radius:8px; background:linear-gradient(135deg,#f6d365,#fda085); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.8rem; color:#1a1c28; flex-shrink:0; }
.mg-track-info { flex:1; }
.mg-track-name { font-weight:600; font-size:0.92rem; margin-bottom:0.2rem; }
.mg-track-meta { font-size:0.75rem; color:var(--text-muted); display:flex; gap:0.8rem; }
.mg-track-meta span { display:flex; align-items:center; gap:0.3rem; }
.mg-track-waveform { 
    flex: 1; 
    height: 40px; 
    background: rgba(0, 0, 0, 0.2); 
    border-radius: 6px; 
    position: relative; 
    overflow: hidden; 
    margin: 0 1rem;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mg-waveform-canvas {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.6;
}

.mg-playhead {
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background: #4f46e5; /* Indigo */
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.8);
    pointer-events: none;
    z-index: 2;
    transform: translateX(0);
}

.mg-time-overlay {
    position: absolute;
    bottom: 2px;
    right: 5px;
    font-size: 10px;
    font-family: monospace;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 3;
    background: rgba(0, 0, 0, 0.4);
    padding: 1px 4px;
    border-radius: 3px;
}

.mg-track-waveform:hover .mg-waveform-canvas {
    opacity: 0.9;
}
.mg-track-actions { display:flex; gap:0.4rem; }
.mg-track-btn { width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; font-size:0.8rem; }
.mg-track-btn:hover { color:white; background:rgba(255,255,255,0.12); }
.mg-track-btn.play-btn:hover { background:rgba(246,211,101,0.15); color:#f6d365; border-color:rgba(246,211,101,0.3); }

/* Fake waveforms */
.fake-waveform { height:48px; background:rgba(255,255,255,0.05); border-radius:4px; position:relative; overflow:hidden; }
.fake-waveform::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg,rgba(255,255,255,0.04) 0px,rgba(255,255,255,0.08) 2px,transparent 2px,transparent 6px); }
.refined-wave::after { background:repeating-linear-gradient(90deg,rgba(0,255,136,0.07) 0px,rgba(0,255,136,0.12) 2px,transparent 2px,transparent 6px); }

/* Shared utils */
.w-100 { width:100%; }
.mt-auto { margin-top:auto; }
.text-muted { color:var(--text-muted); }
.text-xs { font-size:0.75rem; }
.toast { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%) translateY(100px); background:rgba(18,20,28,0.95); border:1px solid var(--glass-border); border-radius:var(--border-radius-sm); padding:1rem 2rem; color:white; font-size:0.9rem; backdrop-filter:blur(20px); z-index:999; transition:transform 0.4s cubic-bezier(0.16,1,0.3,1); pointer-events:none; }
.toast.show { transform:translateX(-50%) translateY(0); }
.locked-nav .nav-link { opacity:0.4; }

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

/* ══════════════════════════════════════════
   PIPELINE & TRACK SELECTION
══════════════════════════════════════════ */
.mg-header-right { display:flex; align-items:center; gap:0.8rem; }

.btn-pipeline-all {
    padding: 0.4rem 0.9rem;
    border-radius: 100px;
    background: linear-gradient(135deg, #f820b0, #a855f7);
    color: white;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
    animation: fadeInUp 0.3s ease;
}
.btn-pipeline-all:hover { transform:scale(1.04); box-shadow:0 6px 20px rgba(248,32,176,0.3); }

.mg-track-item.selected {
    border-color: rgba(248,32,176,0.5);
    background: rgba(248,32,176,0.06);
    box-shadow: 0 0 0 1px rgba(248,32,176,0.2);
}
.mg-track-select-cb { width:16px; height:16px; accent-color:#f820b0; cursor:pointer; flex-shrink:0; }

/* Pipeline status panel */
.pipeline-status {
    margin-top: 1rem;
    padding: 1.2rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(248,32,176,0.2);
    border-radius: var(--border-radius-md);
    animation: fadeInUp 0.4s ease;
}
.pipeline-route { display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; flex-wrap:wrap; }
.pipeline-node { display:flex; flex-direction:column; align-items:center; gap:0.2rem; padding:0.5rem 0.8rem; border-radius:8px; border:1px solid rgba(255,255,255,0.1); font-size:0.72rem; color:var(--text-muted); transition:all 0.3s; }
.pipeline-node i { font-size:1.1rem; margin-bottom:0.1rem; }
.pipeline-node.active { border-color:rgba(246,211,101,0.4); color:#f6d365; background:rgba(246,211,101,0.08); }
.pipeline-node.lit { border-color:rgba(0,255,136,0.4); color:var(--accent-green); background:rgba(0,255,136,0.06); }
.pipeline-arrow { color:var(--text-muted); font-size:0.8rem; }
.pipeline-dest-select { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; }
.pipeline-dest-btns { display:flex; gap:0.4rem; flex-wrap:wrap; }
.dest-btn { padding:0.4rem 0.8rem; border-radius:100px; border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:0.8rem; cursor:pointer; transition:all 0.2s; background:transparent; display:flex; align-items:center; gap:0.3rem; }
.dest-btn:hover { color:white; border-color:rgba(248,32,176,0.4); }
.dest-btn.active { border-color:#f820b0; color:white; background:rgba(248,32,176,0.12); }
.btn-send-confirm { padding:0.5rem 1.2rem; border-radius:100px; background:linear-gradient(135deg,#00ff88,#00b4d8); color:#1a1c28; font-weight:700; font-size:0.85rem; cursor:pointer; border:none; display:flex; align-items:center; gap:0.4rem; transition:all 0.2s; }
.btn-send-confirm:hover { transform:scale(1.04); box-shadow:0 4px 16px rgba(0,255,136,0.3); }

/* ══════════════════════════════════════════
   TRACK EDITOR DRAWER
══════════════════════════════════════════ */
.track-editor-drawer {
    margin-top: 1.5rem;
    border-radius: var(--border-radius-lg);
    padding: 0;
    overflow: hidden;
    animation: expandDown 0.5s cubic-bezier(0.16,1,0.3,1) forwards;
    border: 1px solid rgba(246,211,101,0.2);
}
@keyframes expandDown { from{opacity:0;transform:translateY(-20px);max-height:0} to{opacity:1;transform:translateY(0);max-height:1200px} }

/* Editor Header */
.ted-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1.2rem;
    background: rgba(246,211,101,0.06);
    border-bottom: 1px solid rgba(246,211,101,0.15);
}
.ted-title { display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.95rem; color:#f6d365; }
.ted-toolbar { display:flex; align-items:center; gap:0.3rem; flex-wrap:wrap; }
.ted-sep { width:1px; height:24px; background:rgba(255,255,255,0.12); margin:0 0.2rem; }

.ted-btn {
    padding: 0.35rem 0.7rem;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}
.ted-btn:hover:not(:disabled) { color:white; border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.1); }
.ted-btn:disabled { opacity:0.3; cursor:not-allowed; }
.ted-btn.ted-cut:hover { color:#fda085; border-color:rgba(253,160,133,0.4); background:rgba(253,160,133,0.08); }
.ted-btn.ted-delete:hover { color:#ff6b6b; border-color:rgba(255,107,107,0.4); background:rgba(255,107,107,0.08); }
.ted-btn.ted-insert:hover { color:#00ff88; border-color:rgba(0,255,136,0.4); background:rgba(0,255,136,0.08); }
.ted-btn.ted-repaint { color:#f820b0 !important; border-color:rgba(248,32,176,0.3); background:rgba(248,32,176,0.07); }
.ted-btn.ted-repaint:hover { background:rgba(248,32,176,0.15); border-color:#f820b0; }
.ted-btn.ted-export { color:#f6d365 !important; border-color:rgba(246,211,101,0.3); }
.ted-btn.ted-export:hover { background:rgba(246,211,101,0.12); border-color:#f6d365; }
.ted-btn.ted-transcribe { color:#00d2ff !important; border-color:rgba(0,210,255,0.3); }
.ted-btn.ted-transcribe:hover { background:rgba(0,210,255,0.1); border-color:#00d2ff; }
.ted-btn-close { width:28px; height:28px; border-radius:50%; background:rgba(255,80,80,0.1); border:1px solid rgba(255,80,80,0.2); color:#ff6b6b; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; margin-left:0.3rem; }
.ted-btn-close:hover { background:rgba(255,80,80,0.2); color:white; }

/* Timeline */
.ted-timeline-area { padding:0.8rem 1.2rem; background:rgba(0,0,0,0.2); }
.ted-ruler { height:22px; display:flex; align-items:center; position:relative; font-size:0.68rem; color:var(--text-muted); margin-bottom:0.3rem; border-bottom:1px solid rgba(255,255,255,0.07); }
.ted-ruler-tick { position:absolute; display:flex; flex-direction:column; align-items:center; }
.ted-ruler-tick span { font-size:0.65rem; line-height:1; }
.ted-ruler-tick::after { content:''; display:block; width:1px; height:5px; background:rgba(255,255,255,0.2); }

.ted-waveform-container {
    position: relative;
    width: 100%;
    height: 120px;
    background: rgba(0,0,0,0.3);
    border-radius: 6px;
    cursor: crosshair;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.06);
}
.ted-waveform-canvas { position:absolute; top:0; left:0; width:100%; height:100%; }
.ted-playhead {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: #f6d365;
    left: 0;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 8px #f6d365;
    transition: left 0.05s linear;
}
.ted-playhead::before { content:'▼'; position:absolute; top:-2px; left:-5px; color:#f6d365; font-size:0.55rem; }
.ted-selection {
    position: absolute;
    top: 0; bottom: 0;
    background: rgba(248,32,176,0.18);
    border: 1px solid rgba(248,32,176,0.5);
    pointer-events: none;
    z-index: 5;
}
.ted-region-marker {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    z-index: 6;
    pointer-events: none;
}
.ted-region-marker.cut-marker { background: rgba(253,160,133,0.7); }
.ted-region-marker.repaint-marker { background: rgba(248,32,176,0.7); }

.ted-minimap { position:relative; height:32px; margin-top:0.4rem; }
.ted-minimap-canvas { width:100%; height:32px; border-radius:4px; background:rgba(0,0,0,0.3); }
.ted-minimap-viewport { position:absolute; top:0; height:32px; background:rgba(246,211,101,0.15); border:1px solid rgba(246,211,101,0.4); border-radius:2px; pointer-events:none; min-width:20px; }

/* Transport */
.ted-transport {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.2rem;
    background: rgba(0,0,0,0.15);
    border-top: 1px solid rgba(255,255,255,0.05);
}
.ted-transport-left { display:flex; align-items:center; gap:0.3rem; }
.ted-transport-right { display:flex; align-items:center; gap:0.8rem; }
.ted-transport-btn { width:32px; height:32px; border-radius:8px; border:1px solid rgba(255,255,255,0.1); background:rgba(255,255,255,0.04); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.15s; font-size:0.85rem; }
.ted-transport-btn:hover { color:white; background:rgba(255,255,255,0.1); }
.ted-play-btn { width:40px; height:40px; border-radius:50%; background:linear-gradient(135deg,#f6d365,#fda085); color:#1a1c28 !important; border:none !important; font-size:1rem; }
.ted-play-btn:hover { transform:scale(1.08); box-shadow:0 4px 16px rgba(246,211,101,0.4); }
.ted-play-btn.playing { background:linear-gradient(135deg,#ff6b6b,#fda085); }
.ted-timecode { font-family:monospace; font-size:1rem; font-weight:700; color:#f6d365; letter-spacing:1px; }
.ted-zoom-ctrl { display:flex; align-items:center; gap:0.3rem; }
.ted-zoom-label { font-size:0.78rem; color:var(--text-muted); min-width:36px; text-align:center; }
.ted-selection-info { font-size:0.75rem; color:var(--text-muted); }
.ted-transport-btn.loop-active { border-color:rgba(0,210,255,0.4); color:#00d2ff; background:rgba(0,210,255,0.08); }

/* Region list */
.ted-regions-panel { padding:0.8rem 1.2rem; border-top:1px solid rgba(255,255,255,0.05); }
.ted-rp-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.6rem; font-size:0.82rem; font-weight:600; }
.ted-region-list { display:flex; flex-direction:column; gap:0.4rem; max-height:120px; overflow-y:auto; }
.ted-region-empty { font-size:0.78rem; color:var(--text-muted); text-align:center; padding:0.5rem; }
.ted-region-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    font-size: 0.78rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
}
.ted-region-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.ted-region-label { flex:1; color:var(--text-main); }
.ted-region-time { color:var(--text-muted); font-family:monospace; font-size:0.72rem; }
.ted-region-undo { background:transparent; border:none; color:var(--text-muted); cursor:pointer; font-size:0.75rem; padding:0 0.2rem; }
.ted-region-undo:hover { color:#ff6b6b; }

/* Re-inpaint modal overlay */
.repaint-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10,12,20,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    backdrop-filter: blur(4px);
    border-radius: 6px;
    z-index: 20;
}
.repaint-label { font-size:0.85rem; color:#f820b0; font-weight:600; }

/* ══════════════════════════════════════════
   NOTE TRANSCRIPTION PANEL
══════════════════════════════════════════ */
.transcribe-panel {
    margin-top: 1.2rem;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    animation: fadeInUp 0.4s ease;
    border: 1px solid rgba(0,210,255,0.2);
}
.tp-header { display:flex; justify-content:space-between; align-items:center; padding:0.8rem 1.2rem; background:rgba(0,210,255,0.06); border-bottom:1px solid rgba(0,210,255,0.15); }
.tp-title { display:flex; align-items:center; gap:0.6rem; font-weight:700; font-size:0.95rem; color:#00d2ff; }
.tp-body { display:grid; grid-template-columns:1fr 340px; gap:1.2rem; padding:1.2rem; }
.tp-section-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--text-muted); margin-bottom:0.6rem; }

.tp-piano-roll { height:200px; background:rgba(0,0,0,0.3); border-radius:8px; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.06); }
.tpr-loading { display:flex; flex-direction:column; align-items:center; gap:0.8rem; color:var(--text-muted); }
.tpr-canvas { width:100%; height:100%; }

/* Piano roll bars (drawn by JS) */
.note-bar { position:absolute; height:6px; border-radius:2px; background:linear-gradient(to right,#00d2ff,#a855f7); }

.tp-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }

/* Export grid */
.tp-export-section { padding:1.2rem; border-top:1px solid rgba(255,255,255,0.05); }
.tp-export-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }

.tp-export-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    position: relative;
    overflow: hidden;
}
.tp-export-btn:hover { border-color:rgba(255,255,255,0.2); background:rgba(255,255,255,0.07); transform:translateY(-1px); }
.tp-export-btn:hover .tpeb-dl { opacity:1; transform:translateY(0); }
.tpeb-icon { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:0.9rem; color:white; flex-shrink:0; }
.tpeb-info { flex:1; }
.tpeb-name { font-size:0.82rem; font-weight:700; color:var(--text-main); }
.tpeb-desc { font-size:0.7rem; color:var(--text-muted); }
.tpeb-dl { color:var(--text-muted); opacity:0; transform:translateY(4px); transition:all 0.2s; font-size:0.85rem; }
.tp-export-btn.exporting { animation: exportPulse 0.6s ease; }
@keyframes exportPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.04); border-color:rgba(0,255,136,0.5); } }

/* ────────────────────────────────────────────────
   HI-RES AUDIO RESOLUTION — MusicGen Config Row
   ──────────────────────────────────────────────── */
.mg-resolution-row {
    display: flex; align-items: center; gap: 0.8rem;
    margin-top: 0.6rem; padding: 0.75rem 1rem;
    background: linear-gradient(135deg, rgba(246,211,101,0.04), rgba(248,32,176,0.04));
    border: 1px solid rgba(246,211,101,0.18);
    border-radius: var(--border-radius-md); flex-wrap: wrap;
}
.mg-res-icon { font-size:1.2rem; background:linear-gradient(135deg,#f6d365,#f820b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; flex-shrink:0; }
.mg-res-label { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); flex-shrink:0; min-width:80px; }
.mg-res-controls { display:flex; gap:0.5rem; flex:1; flex-wrap:wrap; }
.res-setting-row { flex:1; min-width:160px; display:flex; flex-direction:column; gap:0.3rem; }
.res-select { background:rgba(255,255,255,0.04); border-color:rgba(246,211,101,0.2); }
.res-select:focus { border-color:rgba(246,211,101,0.5); }
.mg-res-badge { display:flex; align-items:center; gap:0.4rem; padding:0.3rem 0.7rem; border-radius:20px; background:rgba(246,211,101,0.1); border:1px solid rgba(246,211,101,0.25); white-space:nowrap; flex-shrink:0; transition:all 0.3s; }
.res-badge-dot { width:7px; height:7px; border-radius:50%; background:#f6d365; box-shadow:0 0 8px #f6d365; animation:badgePulse 1.8s infinite; }
@keyframes badgePulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.res-badge-label { font-size:0.72rem; font-weight:700; color:#f6d365; }

/* ────────────────────────────────────────────────
   STYLE PROMPT PANEL
   ──────────────────────────────────────────────── */
.mg-style-prompt-panel, .mg-stem-panel {
    margin-top: 0.6rem;
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: var(--border-radius-md);
    background: rgba(255,255,255,0.02);
    overflow: hidden;
}
.msp-header { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 0.9rem; }
.msp-title { display:flex; align-items:center; gap:0.5rem; font-size:0.78rem; font-weight:700; color:var(--text-main); }
.msp-title i { color:#a855f7; }
.mg-stem-panel .msp-title i { color:#00d2ff; }
.btn-add-style {
    display:flex; align-items:center; gap:0.35rem;
    padding:0.3rem 0.75rem; border-radius:20px;
    background:linear-gradient(135deg,#a855f7,#6366f1);
    border:none; color:white; font-size:0.72rem; font-weight:700;
    cursor:pointer; transition:all 0.2s;
}
.btn-add-style:hover { transform:scale(1.05); box-shadow:0 4px 12px rgba(168,85,247,0.4); }
.btn-add-style.open { background:linear-gradient(135deg,#6366f1,#a855f7); }
.msp-body { padding:0 0.9rem 0.9rem; }
.msp-style-chips { display:flex; flex-wrap:wrap; gap:0.4rem; margin-bottom:0.7rem; }
.msp-chip {
    padding:0.3rem 0.65rem; border-radius:20px;
    background:rgba(168,85,247,0.08); border:1px solid rgba(168,85,247,0.2);
    color:var(--text-main); font-size:0.72rem; font-weight:600;
    cursor:pointer; transition:all 0.2s;
}
.msp-chip:hover { background:rgba(168,85,247,0.2); border-color:rgba(168,85,247,0.5); }
.msp-chip.active { background:rgba(168,85,247,0.25); border-color:#a855f7; color:#c084fc; }
.msp-input-row { display:flex; gap:0.5rem; align-items:flex-start; }
.msp-textarea {
    flex:1; background:rgba(255,255,255,0.04);
    border:1px solid rgba(168,85,247,0.2); border-radius:8px;
    color:var(--text-main); font-family:inherit; font-size:0.78rem;
    padding:0.5rem 0.7rem; resize:vertical; transition:border-color 0.2s;
}
/* AI ReWrite Transitions */
.ai-thinking-inline {
    display: inline-block;
    animation: pulse-op 1.5s infinite ease-in-out;
    margin: 0 4px;
}
@keyframes pulse-op {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

[contenteditable="true"]:focus {
    outline: none;
    background: rgba(255,255,255,0.02);
}
.msp-textarea:focus { outline:none; border-color:rgba(168,85,247,0.6); }
.msp-apply-btn {
    padding:0.5rem 0.9rem; border-radius:8px;
    background:linear-gradient(135deg,#a855f7,#6366f1);
    border:none; color:white; font-size:0.75rem; font-weight:700;
    cursor:pointer; white-space:nowrap; transition:all 0.2s; align-self:flex-end;
}
.msp-apply-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px rgba(168,85,247,0.4); }

/* ────────────────────────────────────────────────
   STEM OUTPUT PANEL
   ──────────────────────────────────────────────── */
.stem-mode-toggle { display:flex; gap:0.4rem; }
.stem-mode-btn {
    padding:0.28rem 0.75rem; border-radius:20px;
    background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
    color:var(--text-muted); font-size:0.7rem; font-weight:700;
    cursor:pointer; display:flex; align-items:center; gap:0.3rem; transition:all 0.2s;
}
.stem-mode-btn.active { background:linear-gradient(135deg,rgba(0,210,255,0.15),rgba(58,123,213,0.1)); border-color:rgba(0,210,255,0.4); color:#00d2ff; }
.stem-sep-body { padding:0 0.9rem 0.9rem; }
.stem-section-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--text-muted); margin-bottom:0.4rem; display:flex; align-items:center; gap:0.4rem; }
.stem-section-label i { color:#00d2ff; }
.stem-check-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:0.35rem; }
.stem-check {
    display:flex; align-items:center; gap:0.45rem;
    font-size:0.76rem; color:var(--text-main);
    padding:0.4rem 0.6rem; border-radius:8px;
    background:rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.06);
    cursor:pointer; transition:all 0.18s;
}
.stem-check:hover { background:rgba(0,210,255,0.05); border-color:rgba(0,210,255,0.2); }
.stem-check input[type="checkbox"] { width:14px; height:14px; accent-color:#00d2ff; }
.stem-check i { color:var(--text-muted); font-size:0.75rem; width:12px; text-align:center; }
.stem-vocal-lead { border-color:rgba(248,32,176,0.15) !important; }
.stem-vocal-lead:hover { border-color:rgba(248,32,176,0.35) !important; background:rgba(248,32,176,0.05) !important; }
.stem-vocal-lead input[type="checkbox"] { accent-color:#f820b0; }
.stem-vocal-harmony { border-color:rgba(168,85,247,0.15) !important; }
.stem-vocal-harmony:hover { border-color:rgba(168,85,247,0.35) !important; background:rgba(168,85,247,0.05) !important; }
.stem-vocal-harmony input[type="checkbox"] { accent-color:#a855f7; }
.stem-summary {
    margin-top:0.7rem; display:flex; align-items:center; gap:0.6rem;
    padding:0.5rem 0.7rem; border-radius:8px;
    background:rgba(0,210,255,0.05); border:1px solid rgba(0,210,255,0.15);
    font-size:0.72rem; color:#00d2ff;
}
.stem-summary i { flex-shrink:0; }

/* ────────────────────────────────────────────────
   HI-RES EXPORT RESOLUTION PANEL
   ──────────────────────────────────────────────── */
.tp-export-res-panel {
    padding:1.2rem;
    background:linear-gradient(135deg,rgba(246,211,101,0.03),rgba(248,32,176,0.03));
    border:1px solid rgba(246,211,101,0.15);
    border-radius:var(--border-radius-md);
    margin-bottom:1.2rem;
}
.hires-crown-badge {
    display:inline-flex; align-items:center; gap:0.25rem;
    padding:0.15rem 0.55rem; border-radius:20px;
    background:linear-gradient(135deg,#f6d365,#fda085);
    color:#1a1c28; font-size:0.65rem; font-weight:800;
    text-transform:uppercase; letter-spacing:0.06em;
    margin-left:0.5rem; vertical-align:middle;
}
.tp-res-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin:0.8rem 0; }
.tp-res-col { display:flex; flex-direction:column; gap:0.5rem; }
.res-option-group { display:flex; flex-wrap:wrap; gap:0.4rem; }
.res-opt-btn {
    display:flex; flex-direction:column; align-items:center;
    padding:0.45rem 0.65rem; border-radius:8px;
    background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08);
    color:var(--text-main); font-size:0.75rem; font-weight:600;
    cursor:pointer; transition:all 0.2s; line-height:1.2; min-width:70px;
}
.res-opt-btn:hover { background:rgba(246,211,101,0.1); border-color:rgba(246,211,101,0.3); }
.res-opt-btn.active { background:linear-gradient(135deg,rgba(246,211,101,0.18),rgba(248,32,176,0.12)); border-color:rgba(246,211,101,0.5); color:#f6d365; box-shadow:0 0 12px rgba(246,211,101,0.2); }
.res-opt-sub { font-size:0.6rem; font-weight:400; color:var(--text-muted); margin-top:1px; }
.res-opt-btn.active .res-opt-sub { color:rgba(246,211,101,0.7); }
.res-opt-max { color:#f820b0 !important; font-weight:700; }
.res-opt-btn.active .res-opt-max { color:#f820b0 !important; text-shadow:0 0 8px rgba(248,32,176,0.6); }
.res-quality-meter { margin-top:0.8rem; padding:0.8rem; background:rgba(0,0,0,0.2); border-radius:8px; }
.rqm-label { font-size:0.7rem; color:var(--text-muted); margin-bottom:0.4rem; }
.rqm-bar-track { height:8px; border-radius:4px; background:rgba(255,255,255,0.07); overflow:hidden; margin-bottom:0.3rem; }
.rqm-bar-fill { height:100%; border-radius:4px; background:linear-gradient(90deg,#44e5a0,#00d2ff,#a855f7,#f820b0,#f6d365); width:0%; transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.rqm-tiers { display:flex; justify-content:space-between; font-size:0.62rem; color:var(--text-muted); margin-bottom:0.4rem; }
.rqm-detail { font-size:0.75rem; font-weight:600; color:#f6d365; text-align:center; }
.res-note { font-size:0.67rem; color:var(--text-muted); margin-top:0.6rem; line-height:1.5; opacity:0.8; }

/* ────────────────────────────────────────────────
   AI SONGWRITER → MUSICGEN STUDIO PIPELINE
   ──────────────────────────────────────────────── */
.btn-send-musicgen {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 1rem;
    border-radius: 20px;
    background: linear-gradient(135deg, #f6d365, #fda085);
    border: none;
    color: #1a1c28;
    font-size: 0.76rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.25s;
    margin-left: 0.5rem;
    box-shadow: 0 4px 16px rgba(246,211,101,0.25);
    animation: fadeInRight 0.3s ease;
}
.btn-send-musicgen:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 8px 24px rgba(246,211,101,0.45); }
@keyframes fadeInRight { from{opacity:0;transform:translateX(10px)} to{opacity:1;transform:translateX(0)} }

.from-songwriter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1rem;
    margin-bottom: 0.8rem;
    border-radius: var(--border-radius-md);
    background: linear-gradient(135deg, rgba(0,210,255,0.08), rgba(58,123,213,0.06));
    border: 1px solid rgba(0,210,255,0.25);
    animation: slideDown 0.35s ease;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.fsb-left { display:flex; align-items:center; gap:0.7rem; }
.fsb-left > i { font-size:1.1rem; color:#00d2ff; flex-shrink:0; }
.fsb-title { font-size:0.78rem; font-weight:700; color:#00d2ff; }
.fsb-meta { font-size:0.7rem; color:var(--text-muted); margin-top:1px; }
.fsb-clear {
    padding:0.25rem 0.65rem; border-radius:20px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
    color:var(--text-muted); font-size:0.7rem; cursor:pointer;
    transition:all 0.2s; display:flex; align-items:center; gap:0.3rem;
}
.fsb-clear:hover { background:rgba(255,100,100,0.12); color:#ff6b6b; border-color:rgba(255,100,100,0.3); }
.sw-output-actions { display:flex; align-items:center; flex-wrap:wrap; gap:0.3rem; }

/* ═══════════════════════════════════════════════
   VOCAL PRODUCTION STUDIO (VPS)
   ═══════════════════════════════════════════════ */
.vp-studio { margin:1.5rem 0; padding:1.5rem; border-radius:var(--border-radius-lg); border:1px solid rgba(168,85,247,0.2); background:linear-gradient(135deg,rgba(168,85,247,0.04),rgba(0,210,255,0.03)); }
.vps-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.vps-title { display:flex; align-items:center; gap:0.7rem; font-size:1.05rem; font-weight:700; color:var(--text-primary); }
.vps-title i { color:#a855f7; }
.vps-track-badge { padding:0.2rem 0.7rem; border-radius:20px; background:rgba(168,85,247,0.15); border:1px solid rgba(168,85,247,0.3); font-size:0.72rem; color:#a855f7; }
.vps-close { background:none; border:none; color:var(--text-muted); font-size:1rem; cursor:pointer; padding:0.3rem; border-radius:6px; transition:all 0.2s; }
.vps-close:hover { color:#ff6b6b; background:rgba(255,107,107,0.1); }
.vps-pipeline { display:flex; align-items:center; margin-bottom:1.5rem; }
.vps-step { display:flex; align-items:center; gap:0.5rem; padding:0.4rem 0.8rem; border-radius:20px; font-size:0.75rem; font-weight:600; color:var(--text-muted); transition:all 0.3s; }
.vps-step.active { background:rgba(168,85,247,0.15); color:#a855f7; border:1px solid rgba(168,85,247,0.3); }
.vps-step.done { color:#44e5a0; }
.vps-step-dot { width:22px; height:22px; border-radius:50%; background:rgba(255,255,255,0.07); display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; flex-shrink:0; transition:all 0.3s; }
.vps-step.active .vps-step-dot { background:#a855f7; color:white; }
.vps-step.done .vps-step-dot { background:#44e5a0; color:#0f1020; }
.vps-step-line { flex:1; height:2px; background:rgba(255,255,255,0.07); margin:0 0.3rem; min-width:24px; }
.vps-mode-tabs { display:grid; grid-template-columns:1fr 1fr; gap:0.8rem; margin-bottom:1.2rem; }
.vps-mode-btn { display:flex; align-items:center; gap:0.8rem; padding:0.9rem 1rem; border-radius:var(--border-radius-md); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); color:var(--text-primary); cursor:pointer; transition:all 0.25s; text-align:left; }
.vps-mode-btn i { font-size:1.4rem; color:var(--text-muted); flex-shrink:0; transition:color 0.25s; }
.vps-mode-btn.active { border-color:rgba(168,85,247,0.5); background:rgba(168,85,247,0.08); }
.vps-mode-btn.active i { color:#a855f7; }
.vps-mode-title { font-size:0.85rem; font-weight:700; }
.vps-mode-sub { font-size:0.7rem; color:var(--text-muted); margin-top:2px; }
.vps-section { animation:fadeInUp 0.3s ease; }
.vps-sub-label { font-size:0.78rem; font-weight:600; color:var(--text-muted); margin-bottom:0.6rem; display:flex; align-items:center; gap:0.4rem; }
.vps-url-row { display:flex; gap:0.6rem; margin-bottom:1rem; }
.vps-url-row .form-control { flex:1; }
.vps-analyze-btn { padding:0.5rem 1.1rem; border-radius:var(--border-radius-md); background:linear-gradient(135deg,#ff4141,#ff8c42); border:none; color:white; font-size:0.78rem; font-weight:700; cursor:pointer; transition:all 0.25s; white-space:nowrap; display:flex; align-items:center; gap:0.4rem; }
.vps-analyze-btn:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(255,65,65,0.35); }
.vps-sep-result { padding:0.8rem; background:rgba(0,0,0,0.2); border-radius:var(--border-radius-md); }
.vps-sep-tracks { display:flex; flex-direction:column; gap:0.5rem; }
.vps-sep-track { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; }
.vps-sep-track.vocal i { color:#f820b0; }
.vps-sep-track.instrumental i { color:#00d2ff; }
.vps-sep-bar { flex:1; height:6px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; }
.vps-sep-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,#a855f7,#00d2ff); }
.vps-sep-pct { font-size:0.72rem; color:var(--text-muted); width:30px; text-align:right; }
.vps-vocal-source-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.7rem; margin-bottom:0.8rem; }
.vps-source-card { display:flex; flex-direction:column; align-items:center; gap:0.4rem; padding:1rem 0.8rem; border-radius:var(--border-radius-md); background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); cursor:pointer; transition:all 0.25s; text-align:center; }
.vps-source-card input[type=radio] { display:none; }
.vps-source-card i { font-size:1.5rem; color:var(--text-muted); transition:color 0.25s; }
.vps-source-card.active { border-color:rgba(168,85,247,0.5); background:rgba(168,85,247,0.08); }
.vps-source-card.active i { color:#a855f7; }
.vsc-title { font-size:0.8rem; font-weight:700; }
.vsc-sub { font-size:0.68rem; color:var(--text-muted); line-height:1.4; }
.vsc-tag { margin-top:0.3rem; padding:0.15rem 0.5rem; border-radius:10px; font-size:0.63rem; font-weight:700; }
.live-tag { background:rgba(248,32,176,0.15); color:#f820b0; }
.ai-tag { background:rgba(168,85,247,0.15); color:#a855f7; }
.hybrid-tag { background:rgba(0,210,255,0.12); color:#00d2ff; }
.vvc-upload-area { border:2px dashed rgba(168,85,247,0.3); border-radius:var(--border-radius-md); padding:1.2rem; text-align:center; cursor:pointer; transition:all 0.25s; font-size:0.78rem; color:var(--text-muted); display:flex; flex-direction:column; align-items:center; gap:0.4rem; margin-top:0.5rem; }
.vvc-upload-area i { font-size:1.8rem; color:#a855f7; margin-bottom:0.3rem; }
.vvc-upload-area:hover { border-color:#a855f7; background:rgba(168,85,247,0.05); }
.vvc-hint { font-size:0.68rem; opacity:0.6; }
.vvc-or { text-align:center; font-size:0.72rem; color:var(--text-muted); margin:0.6rem 0; }
.vvc-record-btn { width:100%; padding:0.6rem; border-radius:var(--border-radius-md); background:rgba(255,65,65,0.08); border:1px solid rgba(255,65,65,0.25); color:#ff6b6b; font-size:0.8rem; font-weight:600; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.vvc-record-btn:hover, .vvc-record-btn.recording { background:rgba(255,65,65,0.18); border-color:#ff4141; }
.vvc-analysis { margin-top:1rem; padding:0.8rem; background:rgba(0,0,0,0.2); border-radius:var(--border-radius-md); animation:fadeInUp 0.4s ease; }
.vvc-analysis-title { font-size:0.78rem; font-weight:700; color:var(--text-primary); margin-bottom:0.6rem; }
.vvc-traits { display:flex; flex-direction:column; gap:0.4rem; }
.vvc-trait-row { display:grid; grid-template-columns:80px 1fr 60px; align-items:center; gap:0.5rem; font-size:0.72rem; }
.vvc-bar { height:5px; border-radius:3px; background:rgba(255,255,255,0.07); overflow:hidden; }
.vvc-bar-fill { height:100%; border-radius:3px; transition:width 0.6s ease; }
.vvc-badge { margin-top:0.6rem; padding:0.4rem 0.7rem; border-radius:var(--border-radius-sm); background:rgba(68,229,160,0.1); border:1px solid rgba(68,229,160,0.25); color:#44e5a0; font-size:0.72rem; display:flex; align-items:center; gap:0.4rem; }
.hybrid-slider-row { display:flex; align-items:center; gap:0.8rem; margin-bottom:0.3rem; }
.hsr-slider { flex:1; accent-color:#00d2ff; }
.hsr-label { font-size:0.72rem; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:0.3rem; }
.hsr-value { text-align:center; font-size:0.75rem; font-weight:600; color:#00d2ff; }
.vps-next-btn { width:100%; margin-top:1rem; padding:0.75rem; background:linear-gradient(135deg,#a855f7,#6366f1); border:none; border-radius:var(--border-radius-md); color:white; font-size:0.85rem; font-weight:700; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
.vps-next-btn:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(168,85,247,0.4); }
.vps-nav-row { display:flex; align-items:center; justify-content:space-between; margin-top:1rem; gap:0.8rem; }
.vps-back-btn { padding:0.55rem 1.1rem; border-radius:var(--border-radius-md); background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:0.8rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:0.4rem; }
.vps-back-btn:hover { background:rgba(255,255,255,0.09); color:var(--text-primary); }
.vps-nav-row .vps-next-btn { flex:1; margin-top:0; }
/* Mix Step */
.mix-layout { display:grid; grid-template-columns:1fr 1.4fr; gap:1.2rem; }
.mix-panel-title { font-size:0.8rem; font-weight:700; color:var(--text-primary); margin-bottom:0.7rem; display:flex; align-items:center; gap:0.4rem; }
.mix-panel-title i { color:#a855f7; }
.mix-faders-panel, .mix-fx-panel { padding:1rem; background:rgba(0,0,0,0.18); border-radius:var(--border-radius-md); }
.mix-faders { display:flex; gap:0.6rem; justify-content:space-between; overflow-x:auto; padding-bottom:0.3rem; }
.mix-fader-ch { display:flex; flex-direction:column; align-items:center; gap:0.3rem; width:52px; flex-shrink:0; }
.mfc-label { font-size:0.6rem; color:var(--text-muted); text-align:center; line-height:1.2; }
.mfc-meter { width:12px; height:60px; background:rgba(255,255,255,0.05); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; }
.mfc-meter-fill { width:100%; border-radius:6px; }
.mfc-fader { width:80px; transform:rotate(-90deg); transform-origin:center; accent-color:#a855f7; margin:18px 0; }
.mfc-val { font-size:0.62rem; color:var(--text-muted); }
.mix-fader-ch.master .mfc-label { color:#f6d365; font-weight:700; }
.mix-fader-ch.master .mfc-fader { accent-color:#f6d365; }
.mix-fx-grid { display:flex; flex-direction:column; gap:0.5rem; }
.mix-fx-knob-row { display:grid; grid-template-columns:90px 1fr 36px; align-items:center; gap:0.6rem; }
.mfk-label { font-size:0.72rem; color:var(--text-muted); }
.mfk-slider { width:100%; accent-color:#f820b0; }
.mfk-val { font-size:0.7rem; color:#f820b0; font-weight:600; text-align:right; }
.master-preset-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; }
.master-preset-btn { padding:0.45rem 0.6rem; border-radius:var(--border-radius-sm); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:var(--text-muted); font-size:0.72rem; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:0.35rem; }
.master-preset-btn.active { background:rgba(168,85,247,0.12); border-color:rgba(168,85,247,0.35); color:#a855f7; }
.master-preset-btn:hover { background:rgba(168,85,247,0.08); color:#a855f7; }
.loudness-meter { margin-top:0.8rem; padding:0.7rem; background:rgba(0,0,0,0.2); border-radius:var(--border-radius-sm); }
.lm-label { font-size:0.72rem; color:var(--text-muted); margin-bottom:0.4rem; display:flex; align-items:center; gap:0.3rem; }
.lm-bar-track { height:10px; border-radius:5px; background:rgba(255,255,255,0.05); position:relative; margin-bottom:0.25rem; }
.lm-bar-fill { height:100%; border-radius:5px; background:linear-gradient(90deg,#44e5a0,#f6d365,#f820b0); transition:width 0.5s ease; }
.lm-target-line { position:absolute; top:-4px; height:18px; width:2px; background:#fff; border-radius:1px; opacity:0.5; }
.lm-scale { display:flex; justify-content:space-between; font-size:0.6rem; color:var(--text-muted); }
.lm-val { font-size:0.72rem; font-weight:600; color:#44e5a0; margin-top:0.3rem; text-align:center; }
/* Final Export Step */
.final-export-grid { display:grid; grid-template-columns:1fr 2fr; gap:1.2rem; }
.fe-summary { display:flex; flex-direction:column; align-items:center; gap:0.8rem; padding:1rem; background:rgba(0,0,0,0.18); border-radius:var(--border-radius-md); text-align:center; }
.fe-track-thumb { font-size:2.5rem; color:#a855f7; }
.fe-track-title { font-size:0.9rem; font-weight:700; color:var(--text-primary); }
.fe-track-meta { font-size:0.7rem; color:var(--text-muted); margin-top:0.2rem; }
.fe-approve-stamp { margin-top:0.5rem; padding:0.3rem 0.8rem; border-radius:20px; background:rgba(68,229,160,0.1); border:1px solid rgba(68,229,160,0.3); color:#44e5a0; font-size:0.72rem; font-weight:700; display:flex; align-items:center; gap:0.35rem; }
.fe-actions-title { font-size:0.82rem; font-weight:700; color:var(--text-primary); margin-bottom:0.8rem; }
.fe-btn-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; margin-bottom:1rem; }
.fe-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0.2rem; padding:0.8rem 0.5rem; border-radius:var(--border-radius-md); background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); color:var(--text-primary); cursor:pointer; transition:all 0.25s; font-size:0.8rem; font-weight:600; }
.fe-btn i { font-size:1.2rem; margin-bottom:0.15rem; }
.fe-btn-sub { font-size:0.65rem; color:var(--text-muted); font-weight:400; }
.fe-btn.download i { color:#44e5a0; }
.fe-btn.stems i { color:#00d2ff; }
.fe-btn.producer i { color:#f6d365; }
.fe-btn:hover { transform:translateY(-2px); border-color:rgba(168,85,247,0.3); }
/* Hero: Send to Visual Lab */
.fe-visual-lab-btn { width:100%; padding:1rem 1.2rem; display:flex; align-items:center; gap:1rem; border-radius:var(--border-radius-md); background:linear-gradient(135deg,#1a0533,#0f1f3d); border:1px solid rgba(165,85,247,0.4); cursor:pointer; transition:all 0.3s; color:white; position:relative; overflow:hidden; }
.fe-visual-lab-btn::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(248,32,176,0.1),rgba(0,210,255,0.08)); opacity:0; transition:opacity 0.3s; }
.fe-visual-lab-btn:hover::before { opacity:1; }
.fe-visual-lab-btn:hover { transform:translateY(-2px); box-shadow:0 8px 30px rgba(168,85,247,0.3); border-color:#a855f7; }
.fe-vlb-icon { font-size:1.8rem; flex-shrink:0; background:linear-gradient(135deg,#a855f7,#f820b0); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.fe-vlb-text { flex:1; text-align:left; }
.fe-vlb-title { font-size:0.95rem; font-weight:800; margin-bottom:0.15rem; }
.fe-vlb-sub { font-size:0.72rem; color:rgba(255,255,255,0.5); }
.fe-vlb-arrow { font-size:1rem; color:rgba(255,255,255,0.4); transition:transform 0.25s; }
.fe-visual-lab-btn:hover .fe-vlb-arrow { transform:translateX(5px); color:#a855f7; }

/* VPS trigger button on track cards */
.vps-open-btn { color:#a855f7 !important; }
.vps-open-btn:hover { background:rgba(168,85,247,0.15) !important; box-shadow:0 0 10px rgba(168,85,247,0.3); }

/* ── INSTRUMENT SHOWCASE ── */
.mg-instrument-showcase:hover {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(0,210,255,0.4) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.mg-instrument-showcase.highlight-flash {
    animation: inst-flash 1.5s ease-out;
}

@keyframes inst-flash {
    0% { border-color: #00d2ff; box-shadow: 0 0 20px rgba(0,210,255,0.5); }
    100% { border-color: rgba(255,255,255,0.1); box-shadow: none; }
}

/* ── SINGER COUNT STEPPER ── */
.count-stepper {
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    overflow: hidden;
}
.count-stepper input {
    width: 30px;
    border: none;
    background: transparent;
    color: white;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    -moz-appearance: textfield;
}
.count-stepper input::-webkit-outer-spin-button,
.count-stepper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.step-btn {
    width: 24px;
    height: 24px;
    border: none;
    background: rgba(255,255,255,0.1);
    color: white;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.step-btn:hover {
    background: rgba(0,210,255,0.3);
}

/* ── INSTRUMENT MODAL ── */
.inst-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 95%;
    max-width: 900px;
    height: 85vh;
    background: rgba(15, 12, 41, 0.98);
    backdrop-filter: blur(30px);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 24px;
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.inst-modal.show {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.inst-modal-header { padding: 1.5rem 2rem; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; }
.inst-modal-title { font-size: 1.2rem; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 0.8rem; }
.inst-modal-title i { color: #00d2ff; }

.inst-modal-body { flex: 1; display: flex; overflow: hidden; }
.inst-side-tabs { width: 180px; border-right: 1px solid rgba(255,255,255,0.1); padding: 1rem 0; display: flex; flex-direction: column; gap: 0.2rem; }
.inst-tab { padding: 0.8rem 1.5rem; color: #888; cursor: pointer; border-left: 3px solid transparent; transition: all 0.3s; font-size: 0.85rem; font-weight: 500; }
.inst-tab:hover { background: rgba(255,255,255,0.03); color: #fff; }
.inst-tab.active { background: rgba(0,210,255,0.1); color: #00d2ff; border-left-color: #00d2ff; }

.inst-content-area { flex: 1; padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1.2rem; }
.inst-search-box { position: relative; }
.inst-search-box i { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #666; }
.inst-search-box input { width: 100%; border: 1px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.3); border-radius: 12px; padding: 0.8rem 1rem 0.8rem 2.8rem; color: white; outline: none; }
.inst-search-box input:focus { border-color: #00d2ff; box-shadow: 0 0 10px rgba(0,210,255,0.2); }

.inst-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1rem; }
.inst-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; padding: 1.2rem 1rem; text-align: center; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.inst-item:hover { background: rgba(0,210,255,0.1); border-color: #00d2ff; transform: scale(1.05); }
.inst-i-icon { font-size: 2.2rem; }
.inst-i-name { font-size: 0.8rem; font-weight: 600; color: #eee; }