/* ================================================
   PRODUCER MODULE CSS
   ================================================ */

/* Shared from educator */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text-muted); }
.breadcrumb-link { color: var(--text-muted); transition: var(--transition-fast); }
.breadcrumb-link:hover { color: var(--text-main); }
.breadcrumb-sep { font-size: 0.7rem; }
.breadcrumb-cur { color: var(--text-main); font-weight: 600; }

/* Producer Tier Badge */
.prod-tier-badge {
    padding: 0.4rem 1rem;
    border-radius: 100px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(248,32,176,0.1);
    color: var(--accent-pink);
    border: 1px solid rgba(248,32,176,0.3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* AI Engine Selector */
.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: var(--accent-blue);
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.2);
    transform: translateY(-1px);
}
.engine-indicator {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
}
.engine-indicator i {
    color: var(--accent-blue);
    font-size: 1rem;
    filter: drop-shadow(0 0 5px rgba(0, 210, 255, 0.5));
}
.engine-pulse {
    width: 6px;
    height: 6px;
    background: var(--accent-green);
    border-radius: 50%;
    position: relative;
}
.engine-pulse::after {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--accent-green);
    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: var(--accent-blue);
    color: black;
    font-weight: 800;
}

/* 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;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.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: var(--accent-blue); filter: drop-shadow(0 0 10px rgba(0,210,255,0.4)); }
.diag-header h3 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.5px; }

.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 var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s;
    position: relative;
}
.engine-card:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255,255,255,0.2); }
.engine-card.active {
    background: rgba(0, 210, 255, 0.08);
    border-color: var(--accent-blue);
    box-shadow: inset 0 0 20px rgba(0, 210, 255, 0.05);
}
.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; color: white; }
.ec-badge.musicgen { background: #0668e1; color: white; }
.ec-badge.local { background: #555; color: white; }
.ec-status { font-size: 1rem; color: rgba(255,255,255,0.1); transition: color 0.3s; }
.engine-card.active .ec-status { color: var(--accent-green); }

.engine-card h4 { font-size: 0.95rem; margin-bottom: 0.6rem; }
.engine-card p { font-size: 0.75rem; color: var(--text-muted); 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; font-weight: 600; display: flex; align-items: center; gap: 0.4rem; color: var(--text-muted); }
.engine-card.active .ec-features span { color: white; }
.ec-features i { font-size: 0.65rem; color: var(--accent-green); }

.diag-footer { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--glass-border); padding-top: 1.5rem; }
.diag-status { display: flex; align-items: center; gap: 0.8rem; font-size: 0.85rem; }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; position: relative; }
.pulse-dot.green { background: var(--accent-green); }
/* 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; }

/* Diag Log */
.diag-log-container {
    background: rgba(0,0,0,0.5);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 2rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.log-header {
    font-size: 0.65rem;
    font-weight: 800;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 1px;
}
.log-status { color: var(--accent-green); background: rgba(0,255,136,0.1); padding: 1px 4px; border-radius: 3px; font-size: 0.6rem; }
.log-body {
    height: 120px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.72rem;
}
.log-line { color: #aaa; }
.log-line span:first-child { color: #666; margin-right: 0.5rem; }
.log-line .sys { color: #888; font-weight: 800; }
.log-line .lyria { color: var(--accent-blue); font-weight: 800; }
.log-line .musicgen { color: #0668e1; font-weight: 800; }


/* MODULE 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: var(--accent-pink); background: rgba(248,32,176,0.08); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeInUp 0.5s ease forwards; }

/* ================================================
   STEM SEPARATOR
   ================================================ */
.stem-layout {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 1.5rem;
    align-items: start;
}

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

.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.1rem; }

/* YT Input */
/* Engine Status */
.engine-status-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    margin-bottom: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff4d4d;
    box-shadow: 0 0 5px #ff4d4d;
    transition: all 0.3s;
}
.engine-online .status-dot {
    background: var(--accent-green);
    box-shadow: 0 0 8px var(--accent-green);
}
.engine-online .status-text { color: var(--accent-green); font-weight: 600; }

.yt-input-group { display: flex; flex-direction: column; gap: 0.5rem; }
.download-format-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}
.format-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
    background: rgba(0, 0, 0, 0.25);
    padding: 0.25rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    box-sizing: border-box;
}
.format-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #b0b0cc;
    font-size: 0.74rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    min-width: 0;
    box-sizing: border-box;
}
.format-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.format-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
}
.format-btn.active {
    background: linear-gradient(135deg, rgba(106, 13, 173, 0.7), rgba(255, 68, 68, 0.6));
    border-color: rgba(255, 68, 68, 0.8);
    color: #fff;
    box-shadow: 0 0 14px rgba(255, 68, 68, 0.35);
}
.format-btn.active i {
    color: #ffdd44;
}

.yt-url-row { display: flex; gap: 0.5rem; align-items: stretch; }
.yt-url-input { flex: 1; border-radius: var(--border-radius-sm); }
.btn-yt-dl {
    padding: 0.5rem 0.8rem; border-radius: var(--border-radius-sm);
    background: linear-gradient(135deg, #cc0000, #ff4444);
    color: #fff; font-weight: 700; font-size: 0.72rem;
    border: none; cursor: pointer; white-space: nowrap;
    display: flex; align-items: center; gap: 0.3rem;
    transition: all 0.15s;
}
.btn-yt-dl:hover { box-shadow: 0 0 12px #ff444460; transform: scale(1.03); }
.btn-yt-dl:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.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: var(--transition-fast);
    white-space: nowrap;
}
.btn-danger:hover { background: #cc0000; }

/* Track Info */
.track-info-card {
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.track-thumb-wrapper { position: relative; flex-shrink: 0; }
.track-thumb { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; }
.track-play-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.4);
    border-radius: 8px;
    color: white;
    font-size: 1.2rem;
    opacity: 0;
    transition: opacity 0.2s;
}
.track-thumb-wrapper:hover .track-play-icon { opacity: 1; }
.track-title { font-weight: 600; font-size: 0.9rem; }
.track-artist { color: var(--text-muted); font-size: 0.8rem; }
.track-meta { color: var(--text-muted); font-size: 0.75rem; margin-top: 0.3rem; display: flex; align-items: center; gap: 0.3rem; }

/* Model Selector */
.setting-group { display: flex; flex-direction: column; gap: 0.5rem; }
.model-selector { display: flex; flex-direction: column; gap: 0.5rem; }
.model-opt {
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--border-radius-sm);
    text-align: left;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.model-opt:hover { border-color: rgba(248,32,176,0.3); color: var(--text-main); }
.model-opt.active { border-color: var(--accent-pink); background: rgba(248,32,176,0.08); color: var(--text-main); }
.model-name { font-weight: 700; font-size: 0.9rem; }
.model-desc { font-size: 0.75rem; color: var(--text-muted); }

/* Separation Progress */
.sep-progress-label { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.sep-progress-bar { width: 100%; height: 8px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.sep-progress-fill { height: 100%; background: linear-gradient(to right, var(--accent-pink), var(--primary-color)); border-radius: 4px; width: 0%; transition: width 0.4s ease; }

/* Stem Output */
.stem-output-panel { display: flex; flex-direction: column; gap: 1rem; }
.stems-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.stems-header h3 { font-size: 1.2rem; }

.stems-grid { display: flex; flex-direction: column; gap: 0.8rem; }
.stem-track {
    border-radius: var(--border-radius-md);
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    padding: 1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s;
}
.stem-track.stem-ready { border-color: rgba(255,255,255,0.15); }
.stem-track.stem-ready:hover { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); }
.stem-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: black;
    flex-shrink: 0;
}
.stem-info { flex: 0 0 160px; }
.stem-name { font-weight: 600; font-size: 0.95rem; }
.stem-status { font-size: 0.75rem; }
.stem-controls { display: flex; align-items: center; gap: 0.8rem; flex: 1; }
.stem-btn {
    width: 36px; height: 36px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all 0.2s;
    flex-shrink: 0;
}
.stem-btn:not([disabled]):hover { background: rgba(255,255,255,0.15); color: white; }
.stem-btn[disabled] { cursor: not-allowed; opacity: 0.3; }
.stem-vol { flex: 1; display: flex; align-items: center; }
.vol-slider {
    width: 100%;
    appearance: none;
    height: 4px;
    background: rgba(255,255,255,0.15);
    outline: none;
    border-radius: 2px;
    cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
    appearance: none;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}
.stem-waiting { opacity: 0.5; }

.mix-hint {
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ================================================
   RVC VOCAL REFINER
   ================================================ */
.rvc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.rvc-panel { border-radius: var(--border-radius-lg); padding: 1.8rem; display: flex; flex-direction: column; gap: 1.2rem; }

.upload-zone {
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: var(--border-radius-md);
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
}
.upload-zone:hover { border-color: rgba(248,32,176,0.4); background: rgba(248,32,176,0.04); }
.upload-icon { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 0.8rem; }
.upload-zone h4 { font-size: 0.95rem; margin-bottom: 0.4rem; }
.upload-link { color: var(--accent-pink); cursor: pointer; text-decoration: underline; }

.rvc-file-info {
    background: rgba(255,255,255,0.04);
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 0.9rem;
}
.rvc-file-info i { color: var(--accent-pink); font-size: 1.2rem; }

.rvc-settings { display: flex; flex-direction: column; gap: 1rem; }
.setting-row { display: flex; flex-direction: column; gap: 0.4rem; }
.setting-label { font-size: 0.8rem; 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;
}
.setting-select:focus { border-color: var(--accent-pink); }
.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: 14px; height: 14px; border-radius: 50%; background: var(--accent-pink); cursor: pointer; }
.slider-val { font-size: 0.9rem; font-weight: 700; color: var(--accent-pink); min-width: 40px; text-align: right; }

/* Compare */
.rvc-compare { border-radius: var(--border-radius-lg); padding: 1.8rem; display: flex; flex-direction: column; gap: 1rem; }
.comparison-track {
    background: rgba(255,255,255,0.03);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--glass-border);
}
.comparison-track.refined { border-color: rgba(0,255,136,0.2); background: rgba(0,255,136,0.03); }
.cmp-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; min-width: 100px; }
.fake-waveform {
    flex: 1;
    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.05) 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.08) 0px, rgba(0,255,136,0.12) 2px, transparent 2px, transparent 6px); }
.comparison-arrow { text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.quality-bar { margin-top: 1rem; }
.qb-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.qb-track { width:100%; height:10px; background: rgba(255,255,255,0.08); border-radius:5px; overflow:hidden; margin-bottom:0.3rem; }
.qb-fill { height:100%; background: linear-gradient(to right, var(--accent-pink), var(--accent-green)); border-radius:5px; transition: width 1s ease; }
.qb-val { font-size: 0.85rem; color: var(--accent-green); font-weight: 700; }

/* ================================================
   HARMONY ENGINE
   ================================================ */
.harmony-layout { border-radius: var(--border-radius-lg); padding: 2rem; }
.harmony-cols { display: grid; grid-template-columns: 300px 1fr; gap: 2rem; margin-top: 1.5rem; }
.harmony-left { display: flex; flex-direction: column; gap: 1rem; }
.key-selector { display: flex; gap: 0.5rem; }
.key-selector .setting-select { flex: 1; }
.harmony-styles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.harm-style-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;
}
.harm-style-btn:hover { color: white; border-color: rgba(0,210,255,0.4); }
.harm-style-btn.active { background: rgba(0,210,255,0.15); color: var(--accent-blue); border-color: rgba(0,210,255,0.4); }

.voice-picker { display: flex; gap: 0.5rem; }
.voice-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-muted);
    font-weight: 700;
    transition: all 0.2s;
    cursor: pointer;
    background: transparent;
}
.voice-btn:hover { border-color: rgba(0,210,255,0.4); color: white; }
.voice-btn.active { background: rgba(0,210,255,0.2); color: var(--accent-blue); border-color: rgba(0,210,255,0.6); }

/* Harmony Layers */
.harmony-right { display: flex; flex-direction: column; gap: 0.8rem; }
.harmony-layers { display: flex; flex-direction: column; gap: 0.6rem; }
.harm-layer {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--border-radius-sm);
    padding: 0.8rem 1rem;
    animation: fadeInUp 0.5s both;
}
.harm-l-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; color: white; flex-shrink: 0; }
.harm-l-info { flex: 1; display: flex; flex-direction: column; gap: 0.3rem; }
.harm-l-name { font-size: 0.85rem; font-weight: 600; }
.harm-wave-mini { width: 100%; height: 20px; border-radius: 3px; background: rgba(255,255,255,0.04); position: relative; overflow: hidden; }
.harm-wave-mini::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 2px, transparent 4px); }
.harm-l-vol input { width: 80px; appearance: none; height: 3px; background: rgba(255,255,255,0.15); border-radius:2px; cursor:pointer; outline:none; }
.harm-l-vol input::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; background: white; border-radius: 50%; cursor: pointer; }

/* Shared */
.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.5; }
.mt-1 { margin-top: 0.5rem; }
.w-100 { width: 100%; }
.text-muted { color: var(--text-muted); }
.text-xs { font-size: 0.75rem; }

/* ================================================
   RVC EXTRAS
   ================================================ */
.rvc-record-row { margin-top: 0.4rem; }

/* ================================================
   STEMS CANVAS ROW
   ================================================ */
.stems-canvas-row {
    background: #05010f;
    border-radius: var(--border-radius-sm);
    padding: 0.5rem;
    border: 1px solid var(--glass-border);
    animation: fadeInUp 0.5s both;
}

/* ================================================
   PITCH TRAINER
   ================================================ */
.pitch-layout {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.pitch-meter-wrap {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background: #0d0221;
    border: 1px solid rgba(108,99,255,0.2);
    box-shadow: 0 0 40px rgba(108,99,255,0.08);
}

.pitch-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.pitch-note-display {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -2px;
    color: white;
    text-shadow: 0 0 20px rgba(108,99,255,0.8);
    line-height: 1;
    font-family: 'Outfit', sans-serif;
}

.pitch-hz-display {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

.pitch-accuracy {
    font-size: 0.9rem;
    font-weight: 600;
    margin-top: 0.4rem;
    color: var(--accent-green);
}

.pitch-controls {
    background: var(--bg-panel);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 1.5rem;
}

.pitch-ctrl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}

.pitch-ctrl-left,
.pitch-ctrl-right {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.pitch-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-top: 0.2rem;
}

.pitch-stat {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--border-radius-sm);
    padding: 0.8rem;
    text-align: center;
}

.ps-val {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--accent-blue);
    line-height: 1;
}

.ps-lbl {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ================================================
   COVER STUDIO
   ================================================ */
.cover-layout {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.cover-step {
    border-radius: var(--border-radius-lg);
    padding: 1.8rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    transition: all 0.4s ease;
}

.cover-step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--grad-prod);
    color: black;
    font-weight: 800;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cover-step-body {
    flex: 1;
}
.cover-step-body h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }

/* Cover Mode Cards */
.cover-mode-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.8rem;
}

.cover-mode-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--border-radius-md);
    padding: 1.4rem 1rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
}
.cover-mode-card:hover {
    border-color: rgba(248,32,176,0.35);
    background: rgba(248,32,176,0.05);
}
.cover-mode-card.active {
    border-color: var(--accent-pink);
    background: rgba(248,32,176,0.08);
    box-shadow: 0 0 20px rgba(248,32,176,0.1);
}
.cm-title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 0.6rem;
}
.cm-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
    line-height: 1.4;
}

/* Record area */
.cover-record-area {
    background: #050012;
    border-radius: var(--border-radius-md);
    overflow: hidden;
    border: 1px solid rgba(108,99,255,0.2);
    margin-top: 0.8rem;
}

.cover-record-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--glass-border);
}

.cover-timer {
    font-size: 1.2rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    color: var(--accent-pink);
    min-width: 50px;
}

/* Mix row */
.cover-mix-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 0.6rem;
}

.cover-fader-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-sm);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    text-align: center;
}

.cover-fader-group span {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-blue);
}

/* Module tab scrollable on small screens */
/* ================================================
   NEW STEM STYLES
   ================================================ */
.stem-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 0.5rem 0;
}
.stem-divider::before, .stem-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--glass-border);
}
.stem-divider span {
    padding: 0 10px;
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--text-muted);
}

.daw-upload-zone {
    border: 2px dashed rgba(255,255,255,0.1);
    border-radius: var(--border-radius-sm);
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.daw-upload-zone:hover {
    border-color: var(--accent-blue);
    background: rgba(0,210,255,0.05);
    color: white;
}
.daw-upload-zone i { font-size: 1.2rem; color: var(--accent-blue); }
.daw-upload-zone.importing {
    border-color: var(--accent-blue);
    background: rgba(0,210,255,0.1);
    animation: pulse-border 1.5s infinite;
}
.daw-upload-zone.success {
    border-color: var(--accent-green);
    background: rgba(0,255,136,0.05);
}

@keyframes pulse-border {
    0% { border-color: rgba(0,210,255,0.2); }
    50% { border-color: var(--accent-blue); }
    100% { border-color: rgba(0,210,255,0.2); }
}

.stem-ai-label {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    background: rgba(0,210,255,0.15);
    color: var(--accent-blue);
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    margin-top: 0.3rem;
}

.chk-row input[type="checkbox"] {
    accent-color: var(--accent-blue);
}

/* Stem Checkbox */
.stem-checkbox {
    accent-color: var(--accent-green);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
}

.stem-select-all-row {
    display: flex;
    align-items: center;
    padding: 0.6rem 1.2rem;
    background: rgba(0,255,136,0.04);
    border: 1px solid rgba(0,255,136,0.15);
    border-radius: var(--border-radius-sm);
}
.stem-select-all-row .sel-check-all {
    font-size: 0.85rem;
}

/* ================================================
   UNIFIED CLICK / METRONOME TRACK PANEL
   ================================================ */
.click-track-panel {
    border-radius: var(--border-radius-md);
    padding: 1.2rem 1.5rem;
    margin-top: 0.5rem;
    border: 1px solid rgba(255,107,53,0.2);
}
.click-track-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.click-track-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.click-track-title { display: flex; flex-direction: column; gap: 0.15rem; }
.click-track-controls {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

/* Stats Row */
.click-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}
.click-stat {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--border-radius-sm);
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.click-stat-icon {
    width: 28px; height: 28px;
    border-radius: 6px;
    background: rgba(255,107,53,0.15);
    color: #ff6b35;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}
.click-stat-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--accent-blue);
    font-family: 'Outfit', sans-serif;
}
.click-stat-lbl {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 0.2rem;
}

/* Timeline Canvas */
.click-timeline-wrap {
    background: #05010f;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    margin-bottom: 0.6rem;
}

/* Count-in Label */
.click-countin-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    background: rgba(255,107,53,0.06);
    border-radius: var(--border-radius-sm);
    border: 1px solid rgba(255,107,53,0.15);
}
.click-countin-label i { color: #ff6b35; }

/* ================================================
   SELECTIVE DOWNLOAD BAR
   ================================================ */
.selective-download-bar {
    border-radius: var(--border-radius-md);
    padding: 1.2rem 1.5rem;
    margin-top: 0.5rem;
}
.sel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.sel-header h4 {
    font-size: 0.95rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.sel-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sel-check-all {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
}
.sel-check-all input { accent-color: var(--accent-green); width: 16px; height: 16px; }
.sel-convert-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.8rem;
    border-top: 1px solid var(--glass-border);
}

/* Modal adjustments */
.api-modal {
    max-height: 85vh;
    overflow-y: auto;
}

@media (max-width: 1200px) {
    .module-tabs { overflow-x: auto; padding-bottom: 0; }
    .tab-btn { white-space: nowrap; }
    .pitch-ctrl-row { grid-template-columns: 1fr; }
    .cover-mode-grid { grid-template-columns: 1fr 1fr; }
    .cover-mix-row { grid-template-columns: 1fr 1fr; }
    .stem-layout { grid-template-columns: 1fr; }
    .rvc-layout { grid-template-columns: 1fr; }
    .harmony-cols { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════════
   FUTURISTIC PRODUCER UI (STEMS & PROJECTS)
   ══════════════════════════════════════════════════════════════════════ */

.stem-track-modern {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.8rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stem-track-modern::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 4px; height: 100%;
    background: var(--accent-pink);
    opacity: 0;
    transition: opacity 0.3s;
}

.stem-track-modern.active-playback {
    background: rgba(248, 32, 176, 0.06);
    border-color: rgba(248, 32, 176, 0.3);
    box-shadow: 0 4px 20px rgba(248, 32, 176, 0.1);
}
.stem-track-modern.active-playback::before { opacity: 1; }

.stem-top-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.8rem;
}

.stem-meta { display: flex; align-items: center; gap: 0.8rem; }
.stem-id-tag {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.6rem;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    color: var(--text-main);
}

.stem-status-badge {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.stem-actions-mini { display: flex; gap: 0.4rem; }
.mini-btn {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mini-btn:hover { background: rgba(255, 255, 255, 0.1); color: white; }
.mini-btn.active-solo { background: #ffca28; border-color: #ffca28; color: black; box-shadow: 0 0 10px rgba(255, 202, 40, 0.4); }
.mini-btn.active-mute { background: #ef5350 !important; border-color: #ef5350 !important; color: white !important; box-shadow: 0 0 10px rgba(239, 83, 80, 0.4); }

.stem-waveform-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    height: 60px;
    margin-bottom: 0.8rem;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.futuristic-wave { width: 100%; height: 100%; border-radius: 8px; display: block; }

.stem-bottom-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stem-label-group {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 600;
}

.stem-playback-group { display: flex; align-items: center; gap: 1rem; }
.play-btn-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: var(--grad-prod);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s;
    font-size: 0.8rem;
}
.play-btn-circle:hover:not(:disabled) { transform: scale(1.1); }
.play-btn-circle:disabled { opacity: 0.2; cursor: default; }

.neon-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100px;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}
.neon-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-pink);
    box-shadow: 0 0 8px var(--accent-pink);
    cursor: pointer;
}

.dl-btn-mini {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.2s;
}
.dl-btn-mini:hover:not(:disabled) { color: white; }

/* Library Drawer */
.project-library-drawer {
    margin-top: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: var(--glass-bg);
}

.drawer-header {
    padding: 0.9rem 1.4rem;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
}

.drawer-title-group {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.drawer-header h4 { 
    margin: 0; 
    font-size: 0.92rem; 
    font-weight: 700; 
    color: var(--text-main); 
    display: flex; 
    align-items: center; 
    gap: 0.5rem; 
}

#project-count {
    background: rgba(138, 43, 226, 0.25);
    border: 1px solid rgba(138, 43, 226, 0.45);
    color: #e0b0ff;
    padding: 0.1rem 0.55rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.3;
}

.drawer-icon { 
    margin-left: 0.4rem; 
    transition: transform 0.3s; 
    color: var(--text-muted); 
    font-size: 0.85rem;
}
.project-library-drawer.collapsed .drawer-icon { transform: rotate(180deg); }
.project-library-drawer.collapsed .drawer-content { display: none; }

.drawer-filters {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
    flex-shrink: 0;
}

.history-filter-btn {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.history-filter-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}
.history-filter-btn.active {
    background: linear-gradient(135deg, rgba(106, 13, 173, 0.6), rgba(255, 68, 68, 0.5));
    border-color: rgba(255, 68, 68, 0.5);
    color: #fff;
    box-shadow: 0 0 8px rgba(255, 68, 68, 0.3);
}

.history-clear-btn {
    background: none;
    border: none;
    color: rgba(255, 100, 100, 0.7);
    font-size: 0.72rem;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    border-radius: 6px;
    transition: all 0.2s;
    margin-left: 0.3rem;
}
.history-clear-btn:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.12);
}

.drawer-content {
    max-height: 400px;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    overflow-y: auto;
}

.project-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-card:hover { transform: translateX(4px); background: rgba(255, 255, 255, 0.06); border-color: rgba(255,255,255,0.12); }

.proj-icon {
    width: 38px; height: 38px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: #fff; flex-shrink: 0;
}

.proj-info { flex: 1; min-width: 0; }
.proj-name { font-weight: 600; font-size: 0.86rem; color: var(--text-main); margin-bottom: 0.25rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.proj-meta-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}

.proj-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.68rem;
    font-weight: 700;
}
.badge-audio { background: rgba(138, 43, 226, 0.25); color: #d896ff; border: 1px solid rgba(138, 43, 226, 0.4); }
.badge-video { background: rgba(0, 198, 255, 0.2); color: #00e5ff; border: 1px solid rgba(0, 198, 255, 0.4); }
.badge-silent { background: rgba(255, 65, 108, 0.2); color: #ff758c; border: 1px solid rgba(255, 65, 108, 0.4); }
.badge-stems { background: rgba(0, 230, 118, 0.2); color: #69f0ae; border: 1px solid rgba(0, 230, 118, 0.4); }

.proj-size, .proj-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.proj-actions { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.btn-proj-mini {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-muted);
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}
.btn-proj-mini:hover { background: rgba(255,255,255,0.12); color: white; }

.btn-use-stem {
    background: rgba(106, 13, 173, 0.25);
    border: 1px solid rgba(106, 13, 173, 0.4);
    color: #e0b0ff;
    font-weight: 600;
}
.btn-use-stem:hover {
    background: rgba(106, 13, 173, 0.5);
    color: #fff;
    box-shadow: 0 0 8px rgba(106, 13, 173, 0.4);
}

.btn-dl-again {
    color: #00e5ff;
}
.btn-dl-again:hover {
    color: #fff;
    background: rgba(0, 198, 255, 0.25);
}

.btn-del {
    color: rgba(255, 255, 255, 0.35);
}
.btn-del:hover {
    color: #ff4444;
    background: rgba(255, 68, 68, 0.15);
}


/* MODAL & BACKDROP VISIBILITY */
.api-modal.active {
    display: block !important;
    animation: modalSlideIn 0.3s ease-out forwards;
}
.modal-backdrop.active {
    display: block !important;
    opacity: 1;
}

@keyframes modalSlideIn {
    from { transform: translate(-50%, -45%); opacity: 0; }
    to { transform: translate(-50%, -50%); opacity: 1; }
}

/* ─── YOUTUBE COPYRIGHT DISCLAIMER MODAL ──────── */
.yt-copyright-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.75); backdrop-filter: blur(8px);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    animation: fadeIn 0.2s ease;
}
.yt-copyright-card {
    background: linear-gradient(145deg, #14142a 0%, #1a1a3a 100%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px; max-width: 560px; width: 92%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(99,102,241,0.08);
    animation: modalSlideUp 0.3s ease;
    overflow: hidden;
}
@keyframes modalSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.yt-cr-header {
    display: flex; align-items: center; gap: 0.7rem;
    padding: 1.2rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06);
}
.yt-cr-header h3 { margin: 0; font-size: 1.1rem; color: #fff; }
.yt-cr-body { padding: 1rem 1.3rem; max-height: 55vh; overflow-y: auto; }
.yt-cr-section {
    display: flex; gap: 0.8rem; padding: 0.8rem;
    border-radius: 10px; margin-bottom: 0.6rem;
}
.yt-cr-ok { background: rgba(0,255,136,0.04); border: 1px solid rgba(0,255,136,0.1); }
.yt-cr-warn { background: rgba(255,107,53,0.06); border: 1px solid rgba(255,107,53,0.15); }
.yt-cr-info { background: rgba(108,99,255,0.06); border: 1px solid rgba(108,99,255,0.12); }
.yt-cr-icon { flex-shrink: 0; font-size: 1.1rem; padding-top: 2px; }
.yt-cr-section strong { color: #fff; font-size: 0.85rem; display: block; margin-bottom: 3px; }
.yt-cr-section p { color: #9ca3af; font-size: 0.78rem; margin: 0; line-height: 1.45; }
.yt-cr-footer {
    padding: 1rem 1.3rem; border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(0,0,0,0.15);
}
.yt-cr-checkbox {
    display: flex; align-items: flex-start; gap: 0.5rem;
    cursor: pointer; margin-bottom: 0.8rem;
}
.yt-cr-checkbox input { margin-top: 3px; accent-color: #6366f1; cursor: pointer; }
.yt-cr-checkbox span { color: #d1d5db; font-size: 0.8rem; }
.yt-cr-btns { display: flex; gap: 0.6rem; justify-content: flex-end; }
.yt-cr-cancel {
    padding: 0.5rem 1.2rem; border-radius: 8px;
    border: 1px solid #333; background: transparent;
    color: #888; font-size: 0.8rem; cursor: pointer;
}
.yt-cr-cancel:hover { border-color: #555; color: #ccc; }
.yt-cr-accept {
    padding: 0.5rem 1.2rem; border-radius: 8px;
    font-size: 0.8rem; font-weight: 700;
}
.yt-cr-accept:disabled { opacity: 0.4; cursor: not-allowed; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================
   ENGINE CONFIG MODAL (Cloudflare Tunnel & Mac M4)
   ================================================ */
.engine-config-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}
.engine-config-card {
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95), rgba(15, 15, 26, 0.98));
    border: 1px solid rgba(0, 210, 255, 0.25);
    border-radius: 16px;
    max-width: 520px;
    width: 92%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.8), 0 0 30px rgba(0, 210, 255, 0.15);
    animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.engine-config-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.engine-config-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.engine-config-body {
    padding: 1.4rem 1.5rem;
}
.engine-config-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
}
.engine-input-box {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.engine-input-box input {
    flex: 1;
    padding: 0.7rem 0.9rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.4);
    color: #38bdf8;
    font-family: 'JetBrains Mono', monospace, Consolas;
    font-size: 0.85rem;
    outline: none;
    transition: border-color 0.2s;
}
.engine-input-box input:focus {
    border-color: var(--accent-blue);
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.2);
}
.ping-res-box {
    margin-top: 10px;
    font-size: 0.82rem;
    padding: 0.65rem 0.9rem;
    border-radius: 8px;
    line-height: 1.4;
}
.ping-res-box.success {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #4ade80;
}
.ping-res-box.error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #f87171;
}
.ping-res-box.loading {
    background: rgba(0, 210, 255, 0.08);
    border: 1px solid rgba(0, 210, 255, 0.25);
    color: #38bdf8;
}
.tunnel-guide-box {
    margin-top: 1.2rem;
    padding: 0.9rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
    color: var(--text-muted, #94a3b8);
}
.tunnel-guide-box code {
    font-family: monospace;
    background: rgba(0, 0, 0, 0.5);
    padding: 2px 6px;
    border-radius: 4px;
    color: #a78bfa;
}