:root{color-scheme:dark;--icon-sidebar-width: 56px;--settings-overlay-width: 320px;--overlay-panel-width: 300px;--transport-height: 64px;--bg-base: #0a0a12;--bg-elevated: #12121a;--bg-overlay: rgba(15, 15, 25, .95);--bg-panel: rgba(20, 20, 35, .92);--bg-control: rgba(255, 255, 255, .05);--bg-control-hover: rgba(255, 255, 255, .08);--bg-control-active: rgba(255, 255, 255, .12);--accent: #00ff88;--accent-dim: rgba(0, 255, 136, .15);--accent-hover: #00ffaa;--accent-gradient: linear-gradient(135deg, #00ff88, #00cc6a);--danger: #ff4444;--danger-dim: rgba(255, 68, 68, .15);--accent-suno: #a855f7;--accent-suno-hover: #9333ea;--accent-suno-dim: rgba(168, 85, 247, .1);--text-primary: #ffffff;--text-secondary: #888888;--text-muted: #555555;--border-subtle: rgba(255, 255, 255, .08);--border-medium: rgba(255, 255, 255, .15);--transition-fast: .15s ease;--transition-normal: .25s ease;--transition-panel: .35s cubic-bezier(.4, 0, .2, 1);--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;overscroll-behavior:none}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:var(--bg-base);color:var(--text-primary)}body.export-active *,body.export-active *:before,body.export-active *:after{animation-play-state:paused!important}.app-layout{display:grid;grid-template-columns:var(--icon-sidebar-width) 1fr;grid-template-rows:1fr;height:100vh;overflow:hidden}.icon-sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--icon-sidebar-width);background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-subtle);display:flex;flex-direction:column;align-items:center;padding:var(--spacing-md) 0;z-index:100}.icon-btn{width:40px;height:40px;border-radius:var(--radius-md);background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;margin-bottom:var(--spacing-sm);transition:var(--transition-fast)}.icon-btn svg{width:20px;height:20px}.icon-btn:hover:not(:disabled){background:var(--bg-control-hover);color:var(--text-primary)}.icon-btn.active{background:var(--accent-dim);color:var(--accent)}.icon-btn:disabled{opacity:.3;cursor:not-allowed}.icon-btn.live-active{background:var(--danger-dim);color:var(--danger);animation:pulse 1.5s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.icon-sidebar-spacer{flex:1}.canvas-viewport{grid-column:2;position:relative;background:var(--bg-base);display:flex;align-items:center;justify-content:center;overflow:hidden}.app-branding{position:absolute;top:var(--spacing-xs);left:50%;transform:translate(-50%);z-index:10;pointer-events:none}.app-branding-text{font-family:Saira Stencil One,sans-serif;font-size:18px;font-weight:400;letter-spacing:.35em;color:#00ff8840;-webkit-user-select:none;user-select:none;transition:opacity var(--transition-normal)}body.fullscreen-mode .app-branding,body.theater-mode .app-branding{opacity:0}.canvas-viewport:hover .app-branding-text{color:#00ff8826}.canvas-wrapper{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.canvas-wrapper canvas{max-width:100%;max-height:100%;object-fit:contain}#lyricsOverlayCanvas{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}.viewport-controls{position:absolute;bottom:var(--spacing-md);right:var(--spacing-md);display:flex;gap:var(--spacing-sm);opacity:0;transition:opacity var(--transition-normal);z-index:10}.canvas-viewport:hover .viewport-controls{opacity:1}.viewport-btn{width:36px;height:36px;background:var(--bg-overlay);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.viewport-btn svg{width:18px;height:18px}.viewport-btn:hover{background:var(--bg-control-active);border-color:var(--border-medium)}.theater-hint{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);background:var(--bg-overlay);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-sm);font-size:13px;color:var(--text-primary);opacity:0;pointer-events:none;z-index:1001}body.theater-mode .theater-hint{opacity:1;animation:fadeOutHint 3s ease-in-out forwards}@keyframes fadeOutHint{0%,70%{opacity:1}to{opacity:0}}.overlay-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;left:var(--icon-sidebar-width);background:#00000080;opacity:0;visibility:hidden;transition:opacity var(--transition-normal);z-index:80}.overlay-backdrop.visible{opacity:1;visibility:visible}.segmented-control{display:flex;background:var(--bg-control);border-radius:var(--radius-sm);padding:3px;gap:2px}.segmented-control .segment{flex:1;padding:var(--spacing-sm) var(--spacing-md);background:transparent;border:none;border-radius:4px;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.segmented-control .segment:hover{color:var(--text-primary)}.segmented-control .segment.active{background:var(--accent);color:#000}.segmented-control .segment.locked{opacity:.5;cursor:not-allowed}.segmented-control .segment.locked:after{content:" 🔒";font-size:.8em}.segmented-control-4 .segment{padding:var(--spacing-sm);font-size:12px}.option-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-sm)}.option-card{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);cursor:pointer;transition:var(--transition-fast);text-align:left}.option-card:hover{background:var(--bg-control-hover);border-color:var(--border-medium)}.option-card.active{background:var(--accent-dim);border-color:var(--accent)}.option-card-title{display:block;font-size:13px;font-weight:500;color:var(--text-primary);margin-bottom:2px}.option-card-desc{font-size:11px;color:var(--text-secondary)}.option-card.active .option-card-desc{color:var(--accent)}.control-group{margin-bottom:var(--spacing-md)}.control-group:last-child{margin-bottom:0}.btn-reset-defaults{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);width:100%;margin-top:var(--spacing-md);padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--border-subtle);border-radius:var(--radius-md, 6px);background:transparent;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:color .15s,border-color .15s}.btn-reset-defaults:hover{color:var(--text-primary);border-color:var(--text-secondary)}.btn-reset-defaults svg{width:14px;height:14px}.control-group>label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.toggle-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.toggle-label span{font-size:13px;color:var(--text-primary)}.toggle-switch{position:relative;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#ffffff26;border-radius:12px;transition:var(--transition-fast)}.toggle-slider:before{content:"";position:absolute;height:18px;width:18px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:var(--transition-fast)}.toggle-switch input:checked+.toggle-slider{background:var(--accent)}.toggle-switch input:checked+.toggle-slider:before{transform:translate(20px)}.slider-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs)}.slider-label span:first-child{font-size:13px;color:var(--text-primary)}.slider-value{font-size:12px;color:var(--accent);font-weight:500}.slider-modern{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#ffffff26;border-radius:2px;outline:none}.slider-modern::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:var(--accent);border-radius:50%;cursor:pointer;box-shadow:0 0 10px #0f86;transition:transform var(--transition-fast)}.slider-modern::-webkit-slider-thumb:hover{transform:scale(1.15)}.slider-modern::-moz-range-thumb{width:16px;height:16px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}.color-picker{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:48px;height:32px;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent}.color-picker::-webkit-color-swatch-wrapper{padding:0}.color-picker::-webkit-color-swatch{border:2px solid var(--border-medium);border-radius:var(--radius-sm)}.select-modern{width:100%;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:13px;cursor:pointer;outline:none;transition:var(--transition-fast)}.select-modern:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.input-modern{width:100%;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:13px;outline:none;transition:var(--transition-fast)}.input-modern:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.preset-select-row,.preset-save-row{display:flex;gap:var(--spacing-sm);align-items:center}.preset-select-row .select-modern,.preset-save-row .input-modern{flex:1}.btn-icon-sm{width:32px;height:32px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.btn-icon-sm.btn-primary-icon{background:var(--accent);border-color:var(--accent);color:#000}.btn-icon-sm.btn-primary-icon:hover{background:var(--accent-hover)}.btn-icon-sm.btn-danger-icon:hover{background:var(--danger-dim);border-color:var(--danger);color:var(--danger)}.perf-stats{margin-top:var(--spacing-md)}.perf-section{margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle)}.perf-section:last-of-type{border-bottom:none}.perf-section-title{font-size:11px;font-weight:600;color:var(--text-muted);text-transform:uppercase;margin-bottom:var(--spacing-xs);letter-spacing:.5px}.perf-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:1.8}.perf-label{color:var(--text-secondary)}.perf-value{font-family:SF Mono,Menlo,Monaco,Consolas,monospace;color:var(--accent);font-size:11px}.perf-progress{height:4px;background:#ffffff1a;border-radius:2px;margin:4px 0;overflow:hidden}.perf-progress-bar{height:100%;background:var(--accent);border-radius:2px;transition:width .3s ease}.perf-caution-color{color:#fa0!important;background-color:#fa0!important}.perf-warning-color{color:var(--danger)!important;background-color:var(--danger)!important}.perf-warning{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--danger-dim);border:1px solid var(--danger);border-radius:var(--radius-sm);color:var(--danger);font-size:12px}.perf-warning svg{width:16px;height:16px}.panel-live-mode-btn{display:none;width:100%;padding:var(--spacing-md);background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-size:14px;cursor:pointer;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md);transition:var(--transition-fast)}.panel-live-mode-btn:hover{background:var(--bg-control-hover);border-color:var(--danger)}.panel-live-mode-btn svg{width:20px;height:20px}.panel-live-mode-btn svg:first-child{color:var(--danger)}.panel-live-mode-btn .chevron{margin-left:auto;color:var(--text-muted)}.panel-live-mode-btn.live-active{background:var(--danger-dim);border-color:var(--danger)}.panel-live-mode-btn.live-active svg:first-child{animation:pulse 1.5s infinite}.live-monitor-floating{position:fixed;top:var(--spacing-md);left:calc(var(--icon-sidebar-width) + var(--spacing-md));background:var(--bg-overlay);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);z-index:60}.toggle-label-compact{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer;font-size:13px;color:var(--text-secondary)}.toggle-label-compact input{width:14px;height:14px;accent-color:var(--accent)}.btn-primary{background:var(--accent-gradient);border:none;border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);color:#000;font-size:14px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-sm);transition:var(--transition-fast)}.btn-primary svg{width:18px;height:18px}.btn-primary:hover{filter:brightness(1.1)}.btn-primary:active{transform:scale(.98)}.btn-full{width:100%}.btn{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-primary);font-size:13px;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.btn:hover{background:var(--bg-control-hover);border-color:var(--border-medium)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-small{padding:var(--spacing-xs) var(--spacing-sm);font-size:12px}.btn-icon{background:transparent;border:none;color:var(--text-secondary);cursor:pointer;padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.btn-icon:hover{color:var(--text-primary)}.toast-notification{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:12px 24px;border-radius:var(--radius-md);font-size:14px;font-weight:500;z-index:10000;animation:toast-slide-up .3s ease-out;box-shadow:0 4px 12px #0000004d}.toast-success{background:var(--success, #10b981);color:#fff}.toast-error{background:var(--error, #ef4444);color:#fff}.toast-info{background:var(--bg-elevated);color:var(--text-primary);border:1px solid var(--border-subtle)}@keyframes toast-slide-up{0%{opacity:0;transform:translate(-50%) translateY(20px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.preset-sync-status{display:flex;align-items:center;gap:var(--spacing-xs);font-size:11px;color:var(--text-secondary);padding:var(--spacing-xs) 0;margin-bottom:var(--spacing-sm)}.preset-sync-status.syncing{color:var(--accent)}.preset-sync-status.synced{color:var(--success, #10b981)}.preset-sync-status.error{color:var(--warning, #f59e0b)}.preset-sync-status .sync-icon{font-size:12px}.preset-sync-status .sync-icon.spinning{animation:spin 1s linear infinite}.control-group.has-mapping{position:relative}.control-group .control-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--spacing-sm)}.control-group .control-header>label{flex:1;display:block;font-size:12px;color:var(--text-secondary);margin-bottom:var(--spacing-xs)}.audio-mapping-row{display:flex;flex-direction:column;align-items:flex-end;gap:var(--spacing-xs)}.audio-mapping-toggle{width:24px;height:24px;padding:0;background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast);flex-shrink:0}.audio-mapping-toggle:hover{background:var(--bg-control-hover);border-color:var(--border-medium);color:var(--text-secondary)}.audio-mapping-toggle.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.audio-mapping-toggle svg{width:14px;height:14px}.audio-mapping-panel{display:none;flex-direction:column;gap:var(--spacing-xs);padding:var(--spacing-sm);background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);margin-top:var(--spacing-xs);width:100%;min-width:200px}.audio-mapping-panel.expanded{display:flex}.audio-mapping-panel select{width:100%;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-xs) var(--spacing-sm);color:var(--text-primary);font-size:11px;cursor:pointer;outline:none}.audio-mapping-panel select:focus{border-color:var(--accent)}.mapping-ranges{display:flex;flex-direction:column;gap:var(--spacing-xs)}.mapping-range-row{display:flex;align-items:center;gap:var(--spacing-xs)}.mapping-label{font-size:10px;color:var(--text-muted);width:40px;flex-shrink:0}.mapping-arrow{font-size:10px;color:var(--text-muted)}.mapping-range-row input[type=number]{width:50px;background:var(--bg-secondary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:2px 4px;color:var(--text-primary);font-size:10px;text-align:center;outline:none}.mapping-range-row input[type=number]:focus{border-color:var(--accent)}.mapping-range-row input[type=number]::-webkit-inner-spin-button,.mapping-range-row input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.mapping-range-row input[type=number]{-moz-appearance:textfield}.overlay-panel{position:fixed;left:var(--icon-sidebar-width);top:0;bottom:0;width:var(--overlay-panel-width);background:var(--bg-panel);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-subtle);transform:translate(-100%);opacity:0;visibility:hidden;transition:transform var(--transition-panel),opacity var(--transition-normal),visibility 0s var(--transition-panel);z-index:90;display:flex;flex-direction:column}.overlay-panel.open{transform:translate(0);opacity:1;visibility:visible;transition:transform var(--transition-panel),opacity var(--transition-normal),visibility 0s}.panel-header{display:flex;align-items:center;padding:var(--spacing-md);border-bottom:1px solid var(--border-subtle);flex-shrink:0;position:relative}.panel-header h3{flex:1;font-size:16px;font-weight:600;color:var(--text-primary)}.panel-branding{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px}.brand-title{font-family:Saira Stencil One,sans-serif;font-size:18px;color:#0f8;line-height:1.1;letter-spacing:.35em}.panel-title{font-size:10px;font-weight:600;color:var(--text-primary);letter-spacing:1px;text-transform:uppercase}.panel-close-btn{width:32px;height:32px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.panel-close-btn svg{width:18px;height:18px}.panel-close-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.panel-content{flex:1;padding:var(--spacing-md);overflow-y:auto}.panel-section{margin-bottom:var(--spacing-lg)}.panel-section h4{font-size:12px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.export-progress{margin-top:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-md)}.export-info{margin-bottom:var(--spacing-sm)}.export-location{font-size:11px;color:var(--text-muted);word-break:break-all}.export-current-song{font-size:13px;font-weight:500;color:var(--text-primary);margin-top:4px}.progress{height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden}.progress-bar{height:100%;background:var(--accent-gradient);border-radius:3px;transition:width .1s ease;width:0%}.progress-text{font-size:13px;color:var(--accent);text-align:center;margin-top:var(--spacing-sm)}.export-stats{display:flex;gap:var(--spacing-md);flex-wrap:wrap;margin-top:var(--spacing-sm);font-size:12px;color:var(--text-secondary)}.export-playlist-summary{padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-md);margin-bottom:var(--spacing-md)}.export-playlist-summary h4{font-size:12px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px;margin:0 0 var(--spacing-sm) 0}.export-playlist-summary .export-stats{flex-direction:column;gap:var(--spacing-xs);margin-top:0}.export-stat{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-primary)}.export-stat-count{font-weight:600}.export-stat-muted{color:var(--text-secondary)}.export-stat-warning{color:#f59e0b;background:#f59e0b1a;padding:4px 10px;border-radius:var(--radius-sm);margin-top:var(--spacing-xs)}.export-stat-warning svg{width:14px;height:14px}.settings-overlay{position:fixed;right:0;top:0;bottom:0;width:var(--settings-overlay-width);background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-left:1px solid var(--border-subtle);transform:translate(100%);transition:transform var(--transition-panel);z-index:95;display:flex;flex-direction:column}.settings-overlay.open{transform:translate(0)}.settings-collapse-btn{position:absolute;left:-36px;top:50%;transform:translateY(-50%);width:36px;height:64px;background:var(--bg-overlay);border:1px solid var(--border-subtle);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:var(--transition-fast)}.settings-collapse-btn svg{width:18px;height:18px;transition:transform var(--transition-normal)}.settings-overlay.open .settings-collapse-btn svg{transform:rotate(180deg)}.settings-collapse-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.settings-content{flex:1;padding:var(--spacing-md);overflow-y:auto}.settings-content h2{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm);border-bottom:1px solid var(--border-subtle)}.settings-section{margin-bottom:var(--spacing-lg);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-subtle)}.settings-section h4{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--spacing-sm)}.accordion-section{margin-bottom:var(--spacing-sm);background:var(--bg-control);border-radius:var(--radius-md);overflow:hidden}.accordion-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md);cursor:pointer;-webkit-user-select:none;user-select:none;transition:background var(--transition-fast)}.accordion-header:hover{background:var(--bg-control-hover)}.accordion-header h4{font-size:13px;font-weight:500;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.accordion-icon{color:var(--text-muted);transition:transform var(--transition-normal)}.accordion-icon svg{width:16px;height:16px}.accordion-section.open .accordion-icon{transform:rotate(180deg)}.accordion-content{max-height:0;overflow:hidden;transition:max-height .3s ease}.accordion-section.open .accordion-content{max-height:2000px}.accordion-content-inner{padding:0 var(--spacing-md) var(--spacing-md)}.account-state{padding:var(--spacing-md)}.account-welcome{text-align:center;padding:var(--spacing-xl) var(--spacing-md)}.account-welcome .account-icon{width:64px;height:64px;color:var(--text-muted);margin-bottom:var(--spacing-md)}.account-welcome h4{font-size:18px;font-weight:600;margin-bottom:var(--spacing-sm)}.account-welcome p{font-size:14px;color:var(--text-secondary);line-height:1.5}.account-buttons{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}.btn-full{width:100%;justify-content:center}.account-info{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg)}.account-avatar{width:48px;height:48px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;color:var(--accent)}.account-avatar svg{width:24px;height:24px}.account-details{display:flex;flex-direction:column;gap:var(--spacing-xs)}.account-email{font-size:14px;font-weight:500;color:var(--text-primary)}.account-menu{display:flex;flex-direction:column}.account-menu-item{display:flex;align-items:center;gap:var(--spacing-md);padding:var(--spacing-md);background:transparent;border:none;color:var(--text-primary);font-size:14px;cursor:pointer;transition:var(--transition-fast);text-align:left;border-radius:var(--radius-sm)}.account-menu-item:hover{background:var(--bg-control-hover)}.account-menu-item svg{width:18px;height:18px;color:var(--text-secondary)}.account-menu-item .chevron{margin-left:auto;color:var(--text-muted)}.account-menu-item-danger{color:var(--danger)}.account-menu-item-danger svg{color:var(--danger)}.account-divider{border:none;border-top:1px solid var(--border-subtle);margin:var(--spacing-sm) 0}.tier-badge{display:inline-block;padding:2px 8px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.tier-badge.tier-free,.tier-badge.tier-anonymous{background:var(--bg-control);color:var(--text-secondary)}.tier-badge.tier-pro{background:var(--accent-dim);color:var(--accent)}.tier-badge.tier-enterprise{background:#9333ea26;color:#a855f7}.playlist-badge{background:var(--accent);color:#000;font-size:11px;font-weight:600;padding:2px 8px;border-radius:10px;margin-left:var(--spacing-sm)}.playlist-scroll{max-height:300px;overflow-y:auto;margin-bottom:var(--spacing-md)}.playlist-total-duration{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);font-size:11px;color:var(--text-muted);font-weight:600;border-top:1px solid var(--border-subtle);font-variant-numeric:tabular-nums}.playlist-total-duration svg{width:14px;height:14px}.playlist-items{list-style:none}.playlist-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:var(--spacing-sm) var(--spacing-md);padding-top:10px;padding-bottom:10px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition-fast);border-left:3px solid transparent}.playlist-item:hover{background:var(--bg-control-hover)}.playlist-item.selected{background:var(--accent-dim)}.playlist-item.playing{border-left-color:var(--accent)}.playlist-item.excluded{opacity:.4}.playlist-item-checkbox{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}.playlist-item-number{color:var(--text-muted);font-size:11px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;width:18px;text-align:right;flex-shrink:0;margin-left:-4px}.playlist-item-name{flex:1;font-size:12px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;min-width:0}.playlist-item-name-text{display:inline-block;transition:transform .1s linear;white-space:nowrap}.playlist-scroll.scroll-active .playlist-item-name{text-overflow:clip}.playlist-item-duration{color:var(--text-muted);font-size:11px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;flex-shrink:0;margin-left:auto;padding-left:var(--spacing-sm)}.playlist-item-lyrics-btn{background:none;border:none;cursor:pointer;padding:2px 6px;border-radius:4px;transition:var(--transition-fast)}.playlist-item-lyrics-btn.has-lyrics{color:var(--accent)}.playlist-item-lyrics-btn.no-lyrics{color:var(--text-muted)}.playlist-item-lyrics-btn:hover{background:var(--bg-control-hover)}.playlist-item.playlist-item-simple{padding:8px var(--spacing-md);padding-left:calc(var(--spacing-md) - 4px);gap:var(--spacing-xs)}.playlist-item.playlist-item-simple .playlist-item-name{font-size:12px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400}.playlist-item.playlist-item-simple.playing .playlist-item-name{color:var(--accent)}.playlist-actions.playlist-actions-simple{display:flex;justify-content:space-between;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;border-top:1px solid var(--border-subtle);margin-top:var(--spacing-sm)}.playlist-actions.playlist-actions-top{border-top:none;border-bottom:1px solid var(--border-subtle);margin-top:0;margin-bottom:var(--spacing-md);padding-bottom:var(--spacing-sm)}.playlist-actions.playlist-actions-simple .btn-ghost{flex:1;justify-content:center}.playlist-item-lyrics-indicator{display:flex;align-items:center;justify-content:center;flex-shrink:0}.playlist-item-lyrics-indicator svg{width:14px;height:14px}.playlist-item-lyrics-indicator.has-lyrics{color:var(--accent)}.playlist-item-lyrics-indicator.no-lyrics{color:var(--text-muted);opacity:.5}.sidebar-lyrics-panel{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle)}.sidebar-lyrics-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm);color:var(--text-secondary)}.sidebar-lyrics-icon{width:16px;height:16px;color:var(--accent)}.sidebar-lyrics-title{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.sidebar-lyrics-content{max-height:150px;overflow-y:auto;padding:var(--spacing-sm);background:var(--bg-control);border-radius:var(--radius-sm);font-size:11px;color:var(--text-secondary);white-space:pre-wrap;line-height:1.5}.playlist-actions{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.btn-ghost{background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:var(--spacing-sm) var(--spacing-md);color:var(--text-secondary);font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-xs);transition:var(--transition-fast)}.btn-ghost svg{width:14px;height:14px}.btn-ghost:hover{background:var(--bg-control-hover);color:var(--text-primary);border-color:var(--border-medium)}.btn-ghost.btn-danger-text{color:var(--danger)}.btn-ghost.btn-danger-text:hover{background:var(--danger-dim);border-color:var(--danger)}.lyrics-panel-inline{margin-top:var(--spacing-md);padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle)}.lyrics-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-sm)}.lyrics-panel-track{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lyrics-panel-body{max-height:150px;overflow-y:auto;margin-bottom:var(--spacing-sm)}.lyrics-panel-text{font-size:11px;color:var(--text-secondary);white-space:pre-wrap;font-family:inherit;line-height:1.5}.lyrics-panel-actions{display:flex;gap:var(--spacing-sm)}.playlist-overlay-container{position:relative;display:flex;flex-direction:column}.playlist-overlay-container .transport-track-info{max-height:40px;opacity:1;overflow:hidden;transition:max-height var(--transition-panel),opacity var(--transition-normal)}.playlist-overlay-container.expanded .transport-track-info{max-height:0;opacity:0;pointer-events:none}.playlist-overlay{max-height:0;opacity:0;overflow:hidden;background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid transparent;transition:max-height var(--transition-panel),opacity var(--transition-normal),border-color var(--transition-fast)}.playlist-overlay.open{max-height:60vh;opacity:1;overflow:visible;border-top-color:var(--border-subtle)}.playlist-overlay-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-xs) var(--spacing-sm);border-bottom:1px solid var(--border-subtle);flex-shrink:0;min-height:40px}.playlist-overlay-header .collapse-btn{flex-shrink:0}.playlist-overlay-title{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0;overflow:hidden}.playlist-overlay-actions{display:flex;gap:var(--spacing-xs);margin-left:auto}.playlist-overlay-title h4{font-size:14px;font-weight:600;color:var(--text-primary);margin:0;flex-shrink:0}.playlist-overlay-count{font-size:12px;color:var(--text-secondary);flex-shrink:0}.playlist-overlay-duration{font-size:12px;color:var(--text-muted);flex-shrink:0;margin-left:var(--spacing-xs);font-variant-numeric:tabular-nums}.playlist-overlay-duration:not(:empty):before{content:"·";margin-right:var(--spacing-xs)}.btn-icon-sm{width:28px;height:28px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.btn-icon-sm:hover{background:var(--bg-control-hover);color:var(--text-primary)}.btn-icon-sm svg{width:16px;height:16px}.excluded-toggle-btn{position:relative}.excluded-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;color:#000;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center}.playlist-sort-toggles{display:flex;gap:6px;padding:2px;background:var(--bg-control);border-radius:var(--radius-sm);margin-left:var(--spacing-sm);flex-shrink:0}.btn-sort-toggle{display:flex;align-items:center;justify-content:center;gap:1px;width:28px;height:24px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--text-muted);cursor:pointer;transition:var(--transition-fast);position:relative}.btn-sort-toggle:hover{background:var(--bg-control-hover);color:var(--text-secondary)}.btn-sort-toggle.active{background:var(--bg-elevated);color:var(--text-primary);box-shadow:0 1px 2px #0003}.btn-sort-toggle svg{width:14px;height:14px}.btn-sort-toggle .sort-direction{width:10px;height:10px;opacity:.7;transition:transform var(--transition-fast)}.btn-sort-toggle.desc .sort-direction{transform:rotate(180deg)}.btn-sort-toggle[data-sort=custom] .sort-direction{display:none}.playlist-filter-container{position:relative;margin-left:8px;display:flex;align-items:center;flex-shrink:0}.playlist-filter-input{width:120px;height:24px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 22px 0 8px;color:var(--text-primary);font-size:12px;outline:none;transition:var(--transition-fast)}.playlist-filter-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.playlist-filter-input::placeholder{color:var(--text-muted)}.playlist-filter-clear{position:absolute;right:2px;width:18px;height:18px;background:transparent;border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;display:none;align-items:center;justify-content:center;padding:0}.playlist-filter-clear svg{width:12px;height:12px}.playlist-filter-clear:hover{background:var(--bg-control-hover);color:var(--text-primary)}.playlist-filter-container.has-value .playlist-filter-clear{display:flex}.playlist-overlay-item.filtered-out{display:none}.playlist-current-song{display:flex;align-items:center;gap:6px;margin-left:auto;max-width:200px;overflow:hidden;flex-shrink:1;min-width:0}.playlist-current-song.hidden-by-resize{display:none}.playlist-current-song svg{width:14px;height:14px;color:var(--accent);flex-shrink:0}.current-song-name{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;position:relative;flex:1;min-width:0}.current-song-name-inner{display:inline-block;white-space:nowrap}.playlist-current-song.marquee-active .current-song-name-inner{animation:marquee-scroll-continuous var(--marquee-duration, 10s) linear infinite}@keyframes marquee-scroll-continuous{0%{transform:translate(0)}to{transform:translate(-50%)}}.playlist-current-song:hover .current-song-name-inner{animation-play-state:paused}.playlist-overlay-content{display:flex;max-height:calc(60vh - 48px);overflow:hidden}.playlist-overlay-main{flex:1;overflow-y:auto;min-width:0}.playlist-overlay-excluded{width:0;overflow:hidden;border-left:1px solid transparent;transition:width var(--transition-panel),border-color var(--transition-fast)}.playlist-overlay-excluded.visible{width:45%;min-width:200px;border-left-color:var(--border-subtle)}.excluded-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-subtle);background:var(--bg-control)}.excluded-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.excluded-count{font-size:11px;color:var(--text-muted);background:var(--bg-control-hover);padding:2px 6px;border-radius:var(--radius-sm)}.excluded-header .btn-icon-sm{margin-left:auto}.excluded-list{overflow-y:auto;max-height:calc(60vh - 96px)}.playlist-overlay-lyrics{width:0;overflow:hidden;border-left:1px solid transparent;transition:width var(--transition-panel),border-color var(--transition-fast);display:flex;flex-direction:column}.playlist-overlay-lyrics.visible{width:45%;min-width:250px;border-left-color:var(--border-subtle)}.lyrics-overlay-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-subtle);background:var(--bg-control)}.lyrics-overlay-title{font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.lyrics-overlay-track{flex:1;font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lyrics-overlay-header .btn-icon-sm{margin-left:auto}.lyrics-overlay-body{flex:1;overflow-y:auto;max-height:calc(60vh - 120px);padding:var(--spacing-md)}.lyrics-overlay-text{font-family:inherit;font-size:12px;line-height:1.6;color:var(--text-secondary);white-space:pre-wrap;word-break:break-word;margin:0}.lyrics-overlay-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-md);padding:var(--spacing-xl);border:2px dashed var(--border-subtle);border-radius:var(--radius-md);text-align:center;color:var(--text-muted);transition:border-color var(--transition-fast),background var(--transition-fast);min-height:150px}.lyrics-overlay-dropzone.drag-over{border-color:var(--accent);background:var(--accent-dim)}.lyrics-dropzone-icon{color:var(--text-muted)}.lyrics-dropzone-icon svg{width:32px;height:32px}.lyrics-overlay-dropzone p{margin:0;font-size:13px}.lyrics-overlay-actions{display:flex;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-top:1px solid var(--border-subtle);background:var(--bg-control)}.lyrics-overlay-actions .btn-ghost{flex:1;justify-content:center}.playlist-overlay-item .playlist-item-lyrics-btn{background:transparent;border:none;padding:var(--spacing-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);flex-shrink:0}.playlist-overlay-item .playlist-item-lyrics-btn svg{width:14px;height:14px}.playlist-overlay-item .playlist-item-lyrics-btn.has-lyrics{color:var(--accent)}.playlist-overlay-item .playlist-item-lyrics-btn.no-lyrics{color:var(--text-muted);opacity:.5}.playlist-overlay-item .playlist-item-lyrics-btn:hover{background:var(--bg-control-hover);color:var(--text-primary);opacity:1}.playlist-overlay-list{list-style:none;margin:0;padding:var(--spacing-xs) 0}.playlist-overlay-item{display:flex;align-items:center;gap:var(--spacing-xs);padding:10px var(--spacing-md);cursor:pointer;transition:background var(--transition-fast);-webkit-user-select:none;user-select:none;position:relative}.playlist-overlay-item:hover{background:var(--bg-control-hover)}.playlist-overlay-item.selected{background:var(--accent-dim)}.playlist-overlay-item.playing{border-left:3px solid var(--accent);padding-left:calc(var(--spacing-md) - 3px)}.playlist-overlay-item.playing .song-name{color:var(--accent)}.playlist-item-drag-handle{cursor:grab;color:var(--text-muted);padding:var(--spacing-xs);display:flex;align-items:center;justify-content:center;transition:color var(--transition-fast);flex-shrink:0}.playlist-item-drag-handle:hover{color:var(--text-secondary)}.playlist-item-drag-handle svg{width:14px;height:14px}.playlist-item-drag-handle:active{cursor:grabbing}.playlist-item-info{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:var(--spacing-sm)}.song-name{flex:1;min-width:0;font-size:12px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-duration{font-size:11px;font-family:Inter,SF Pro Display,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;font-weight:400;color:var(--text-muted);margin-left:auto}.playlist-item-action-btn{background:transparent;border:none;padding:var(--spacing-xs);color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);opacity:0;transition:opacity var(--transition-fast),color var(--transition-fast),background var(--transition-fast);flex-shrink:0}.playlist-overlay-item:hover .playlist-item-action-btn{opacity:1}.playlist-item-action-btn:hover{background:var(--bg-control-active);color:var(--text-primary)}.playlist-item-action-btn.exclude-btn:hover{color:var(--danger);background:#ff444426}.playlist-item-action-btn.restore-btn:hover,.playlist-item-action-btn.duplicate-btn:hover{color:var(--accent);background:var(--accent-dim)}.playlist-item-action-btn svg{width:14px;height:14px}.playlist-trigger-btn{width:28px;height:28px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast);flex-shrink:0}.playlist-trigger-btn:hover{color:var(--accent);background:var(--accent-dim)}.playlist-trigger-btn svg{width:16px;height:16px}.playlist-trigger-btn.active{color:var(--accent)}.playlist-overlay-item.dragging{opacity:.5;background:var(--bg-control-active)}.playlist-overlay-item.drag-over-top:before{content:"";position:absolute;top:0;left:var(--spacing-md);right:var(--spacing-md);height:2px;background:var(--accent);border-radius:1px}.playlist-overlay-item.drag-over-bottom:after{content:"";position:absolute;bottom:0;left:var(--spacing-md);right:var(--spacing-md);height:2px;background:var(--accent);border-radius:1px}.drag-preview{position:fixed;pointer-events:none;background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--accent);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-md);z-index:1000;box-shadow:0 8px 32px #00000080}.drag-preview-count{font-size:12px;font-weight:600;color:var(--accent)}.drag-preview-text{font-size:11px;color:var(--text-secondary);margin-top:2px}.playlist-overlay-list.drag-over-list{outline:2px dashed var(--accent);outline-offset:-2px;background:rgba(var(--accent-rgb),.05)}.playlist-overlay-empty{padding:var(--spacing-lg);text-align:center;color:var(--text-muted);font-size:13px}@media (max-width: 768px){.playlist-overlay{border-radius:var(--radius-lg) var(--radius-lg) 0 0}.playlist-overlay-content{flex-direction:column}.playlist-overlay-excluded.visible{width:100%;border-left:none;border-top:1px solid var(--border-subtle);max-height:30vh}}.playlist-item.has-error .playlist-item-name-text,.playlist-overlay-item.has-error .song-name,.playlist-item.has-error .playlist-item-duration,.playlist-overlay-item.has-error .song-duration{color:var(--danger)}.playlist-item-error-indicator{display:flex;align-items:center;justify-content:center;color:var(--danger);flex-shrink:0;width:20px;height:20px}.playlist-item-error-indicator svg{width:14px;height:14px}.playlist-overlay-item .playlist-item-error-indicator{margin-right:var(--spacing-sm)}.cleanup-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.cleanup-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.cleanup-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:400px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px #00000080}.cleanup-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:28px;cursor:pointer;padding:4px;line-height:1;z-index:1}.cleanup-modal-close:hover{color:var(--text-primary)}.cleanup-title{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.cleanup-description{font-size:14px;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.cleanup-options{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg)}.cleanup-option{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast)}.cleanup-option:hover{background:var(--bg-control-hover)}.cleanup-option input[type=checkbox]{margin-top:3px;flex-shrink:0}.cleanup-option-content{flex:1}.cleanup-option-label{display:block;font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:2px}.cleanup-option-hint{font-size:12px;color:var(--text-muted)}.cleanup-option-error .cleanup-option-label{color:var(--danger)}.cleanup-duration-inputs{display:flex;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-xs);margin-left:22px}.cleanup-duration-input{width:60px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;text-align:center}.cleanup-duration-input:focus{outline:none;border-color:var(--accent)}.cleanup-duration-label{font-size:12px;color:var(--text-secondary)}.cleanup-wildcard-input{width:100%;margin-top:var(--spacing-xs);margin-left:22px;padding:var(--spacing-xs) var(--spacing-sm);background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;font-family:monospace}.cleanup-wildcard-input:focus{outline:none;border-color:var(--accent)}.cleanup-wildcard-input::placeholder{color:var(--text-muted)}.cleanup-summary{padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-sm);margin-bottom:var(--spacing-lg)}.cleanup-summary-text{font-size:14px;color:var(--text-secondary)}.cleanup-summary-count{font-weight:600;color:var(--text-primary)}.cleanup-summary-warning{color:var(--danger)}.cleanup-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.cleanup-actions .btn-cancel{background:transparent;border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:var(--transition-fast)}.cleanup-actions .btn-cancel:hover{background:var(--bg-control-hover);color:var(--text-primary)}.cleanup-actions .btn-remove{background:var(--danger);border:none;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.cleanup-actions .btn-remove:hover{filter:brightness(1.1)}.cleanup-actions .btn-remove:disabled{opacity:.5;cursor:not-allowed}.cleanup-btn:disabled{opacity:.4;cursor:not-allowed}.cleanup-btn:not(:disabled):hover{background:var(--bg-control-hover);color:var(--text-primary)}.bulk-exclude-btn{color:var(--text-secondary)}.bulk-exclude-btn:hover{background:var(--danger-dim);color:var(--danger)}.bulk-exclude-btn:disabled{opacity:.4;cursor:not-allowed}.bulk-exclude-btn:disabled:hover{background:transparent;color:var(--text-secondary)}.suno-filter-dropdown{position:relative;margin-left:var(--spacing-sm);flex-shrink:0}.suno-filter-btn{position:relative}.suno-filter-btn.active{background:var(--bg-control-active);color:var(--accent)}.suno-filter-badge{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;padding:0 4px;font-size:10px;font-weight:600;color:#000;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center}.suno-filter-panel{position:absolute;top:100%;right:0;margin-top:4px;width:280px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:0 8px 24px #0006;z-index:100;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--transition-fast),visibility var(--transition-fast),transform var(--transition-fast)}.suno-filter-panel.visible{opacity:1;visibility:visible;transform:translateY(0)}.suno-filter-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-sm) var(--spacing-md);border-bottom:1px solid var(--border-subtle);font-size:12px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.suno-filter-header .btn-icon-sm{width:24px;height:24px}.suno-filter-header .btn-icon-sm svg{width:14px;height:14px}.suno-filter-body{padding:var(--spacing-md);display:flex;flex-direction:column;gap:var(--spacing-md);max-height:400px;overflow-y:auto}.suno-filter-group{display:flex;flex-direction:column;gap:var(--spacing-xs)}.suno-filter-group label{font-size:11px;font-weight:500;color:var(--text-muted);text-transform:uppercase;letter-spacing:.3px}.suno-filter-input{width:100%;height:28px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 var(--spacing-sm);color:var(--text-primary);font-size:12px;outline:none;transition:var(--transition-fast)}.suno-filter-input:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.suno-filter-input::placeholder{color:var(--text-muted)}.suno-filter-buttons{display:flex;gap:4px;background:var(--bg-control);border-radius:var(--radius-sm);padding:2px}.suno-filter-option{flex:1;height:26px;background:transparent;border:none;border-radius:var(--radius-xs);color:var(--text-muted);font-size:11px;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.suno-filter-option:hover{color:var(--text-secondary);background:var(--bg-control-hover)}.suno-filter-option.active{background:var(--bg-elevated);color:var(--text-primary);box-shadow:0 1px 2px #0003}.suno-filter-dates{display:flex;align-items:center;gap:var(--spacing-xs)}.suno-filter-date{flex:1;height:28px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:0 var(--spacing-xs);color:var(--text-primary);font-size:11px;outline:none;transition:var(--transition-fast)}.suno-filter-date:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.suno-filter-date-sep{font-size:11px;color:var(--text-muted);flex-shrink:0}@media (max-width: 768px){.suno-filter-panel{position:fixed;top:auto;bottom:80px;left:16px;right:16px;width:auto}}.transport-bar{position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%) translateY(100px);background:var(--bg-overlay);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-sm) var(--spacing-md);display:flex;flex-direction:column;align-items:stretch;gap:var(--spacing-sm);min-width:400px;max-width:calc(100vw - var(--icon-sidebar-width) - 80px);z-index:50;margin-left:calc(var(--icon-sidebar-width) / 2);opacity:0;pointer-events:none;transition:transform var(--transition-panel),opacity var(--transition-panel)}.transport-bar.visible{transform:translate(-50%) translateY(0);opacity:1;pointer-events:auto}.transport-controls{display:flex;align-items:center;gap:var(--spacing-md)}.transport-btn{width:36px;height:36px;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--transition-fast)}.transport-btn svg{width:18px;height:18px}.transport-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.transport-btn-main{width:44px;height:44px;background:var(--accent);color:#000;border-radius:50%}.transport-btn-main:hover{background:var(--accent-hover);color:#000}.transport-btn-main svg{width:22px;height:22px}.transport-time{font-size:13px;color:var(--text-secondary);font-family:SF Mono,Menlo,monospace;min-width:45px}.transport-seek{flex:1;min-width:100px;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:#ffffff26;border-radius:2px;outline:none}.transport-seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}.transport-seek::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}.live-indicator{display:flex;align-items:center;gap:var(--spacing-sm);padding:0 var(--spacing-md);flex:1;min-width:100px}.live-indicator-icon{width:18px;height:18px;color:var(--danger);animation:pulse 1.5s ease-in-out infinite}.live-indicator-text{font-size:13px;font-weight:600;color:var(--danger);letter-spacing:.5px;text-transform:uppercase}.live-indicator-wave{display:flex;align-items:center;gap:3px;margin-left:auto;height:20px}.live-indicator-wave .wave-bar{width:3px;height:100%;background:var(--danger);border-radius:2px;animation:wave-animation 1s ease-in-out infinite}.live-indicator-wave .wave-bar:nth-child(1){animation-delay:0s;height:40%}.live-indicator-wave .wave-bar:nth-child(2){animation-delay:.1s;height:70%}.live-indicator-wave .wave-bar:nth-child(3){animation-delay:.2s;height:100%}.live-indicator-wave .wave-bar:nth-child(4){animation-delay:.3s;height:60%}.live-indicator-wave .wave-bar:nth-child(5){animation-delay:.4s;height:30%}@keyframes wave-animation{0%,to{transform:scaleY(.5);opacity:.6}50%{transform:scaleY(1);opacity:1}}.transport-track-info{display:flex;align-items:center;gap:var(--spacing-sm);width:100%;padding:var(--spacing-xs) var(--spacing-sm);padding-bottom:0;border-top:1px solid var(--border-subtle);overflow:hidden}.transport-track-info span{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transport-track-info #fileName{color:var(--text-primary);font-weight:500}.transport-export-controls{display:none;align-items:center;gap:var(--spacing-md);width:100%}.transport-bar.exporting .transport-controls{display:none}.transport-bar.exporting .transport-export-controls{display:flex}.export-inline-icon{width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;background:var(--accent-dim);border-radius:var(--radius-sm);animation:pulse-glow 2s infinite}.export-inline-icon svg{width:16px;height:16px;color:var(--accent)}.export-inline-info{display:flex;flex-direction:column;min-width:80px;max-width:120px}.export-inline-title{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.5px}.export-inline-track{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.export-inline-progress{flex:1;display:flex;align-items:center;gap:var(--spacing-sm);min-width:100px}.export-inline-progress-bar{flex:1;height:6px;background:var(--bg-control);border-radius:3px;overflow:hidden}.export-inline-progress-fill{height:100%;width:0%;background:var(--accent-gradient);border-radius:3px;transition:width .3s ease}.export-inline-progress-text{font-size:12px;font-weight:600;color:var(--accent);min-width:36px;text-align:right;font-family:SF Mono,Menlo,monospace}.export-inline-stats{display:flex;gap:var(--spacing-sm)}.export-inline-stat{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);font-family:SF Mono,Menlo,monospace}.export-inline-stat svg{width:12px;height:12px;color:var(--text-muted)}.export-inline-stop-btn{width:32px;height:32px;min-width:32px;display:flex;align-items:center;justify-content:center;background:var(--danger-dim);border:none;border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast)}.export-inline-stop-btn svg{width:14px;height:14px;color:var(--danger)}.export-inline-stop-btn:hover:not(:disabled){background:var(--danger)}.export-inline-stop-btn:hover:not(:disabled) svg{color:#fff}.export-inline-stop-btn:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.export-inline-info,.export-inline-stats{display:none}.export-inline-progress{min-width:80px}}@media (max-width: 480px){.export-inline-icon,.export-inline-stop-btn{width:28px;height:28px;min-width:28px}}.export-preview-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:none;align-items:center;justify-content:center;z-index:50;pointer-events:none}.export-preview-overlay.visible{display:flex}.export-preview-overlay-content{text-align:center;padding:var(--spacing-xl);background:#0a0a12e6;border:1px solid rgba(255,255,255,.1);border-radius:12px}.export-preview-overlay-icon{width:64px;height:64px;margin:0 auto var(--spacing-lg);display:flex;align-items:center;justify-content:center;background:#ffffff0d;border-radius:50%;color:var(--accent)}.export-preview-overlay-icon svg{width:32px;height:32px}.export-preview-overlay-title{font-size:20px;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-sm)}.export-preview-overlay-message{font-size:14px;color:var(--text-secondary);margin:0}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.6}}.viz-selector-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spacing-sm);margin-bottom:var(--spacing-lg)}.viz-option{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-md);cursor:pointer;transition:var(--transition-fast);text-align:center;position:relative}.viz-option:hover{background:var(--bg-control-hover);border-color:var(--border-medium)}.viz-option.selected{background:var(--accent-dim);border-color:var(--accent)}.viz-option.locked{opacity:.6}.viz-option-icon{font-size:28px;margin-bottom:var(--spacing-xs);display:block}.viz-option-label{font-size:12px;color:var(--text-secondary)}.viz-option.selected .viz-option-label{color:var(--accent)}.viz-lock-badge{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);font-size:9px;font-weight:600;background:var(--accent-gradient);color:#000;padding:2px 6px;border-radius:4px}.viz-card{width:100%;min-width:0;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-sm);cursor:pointer;transition:var(--transition-fast);text-align:center;position:relative;display:flex;flex-direction:column;gap:var(--spacing-xs)}.viz-card:hover{background:var(--bg-control-hover);border-color:var(--border-medium)}.viz-card.active{background:var(--accent-dim);border-color:var(--accent)}.viz-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.viz-card.locked{opacity:.6}.viz-card-preview{position:relative;width:100%;aspect-ratio:4/3;background:#000;border-radius:var(--radius-sm);overflow:hidden;display:flex;align-items:center;justify-content:center}.viz-card-fallback{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--text-muted);transition:opacity var(--transition-fast);z-index:0}.viz-card-fallback.hidden{opacity:0;pointer-events:none}.viz-card-fallback svg{width:32px;height:32px;flex-shrink:0}.viz-card-fallback i,.viz-card-fallback [data-lucide]{width:32px;height:32px;display:flex;align-items:center;justify-content:center}.viz-card-thumbnail,.viz-card-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity var(--transition-fast);z-index:1;background:#000}.viz-card-thumbnail.loaded{opacity:1}.viz-card-video.playing{opacity:1;z-index:2}.viz-card-loading{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition-fast)}.viz-card-loading.active{opacity:1}.viz-card-loading .spinner{width:24px;height:24px;border:2px solid var(--text-muted);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}.viz-card-name{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.viz-card.active .viz-card-name{color:var(--accent)}.viz-card-lock{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);width:20px;height:20px;background:#0009;border-radius:50%;display:flex;align-items:center;justify-content:center;z-index:2}.viz-card-lock svg{width:12px;height:12px;color:var(--text-muted)}#customVisualizerModal{z-index:2000}.custom-viz-modal{max-width:480px;padding:var(--spacing-xl)}.custom-viz-modal .modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--spacing-lg)}.custom-viz-modal .modal-header h3{font-size:20px;font-weight:600;color:var(--text-primary);margin:0}.custom-viz-description{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg)}.custom-viz-edit-info{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--accent-dim);border:1px solid var(--accent);border-radius:var(--radius-md);margin-bottom:var(--spacing-lg);font-size:13px;color:var(--accent)}.custom-viz-edit-info svg{width:16px;height:16px;flex-shrink:0}.custom-viz-form{margin-bottom:var(--spacing-lg)}.custom-viz-form label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.custom-viz-form textarea{width:100%;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--spacing-md);color:var(--text-primary);font-size:14px;font-family:inherit;resize:vertical;min-height:100px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.custom-viz-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.custom-viz-form textarea::placeholder{color:var(--text-muted)}.custom-viz-char-count{text-align:right;font-size:12px;color:var(--text-muted);margin-top:var(--spacing-xs)}.custom-viz-options{margin-bottom:var(--spacing-lg)}.custom-viz-type-label{display:block;font-size:13px;font-weight:500;color:var(--text-secondary);margin-bottom:var(--spacing-sm)}.custom-viz-type-btns{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.type-btn{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.type-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.type-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.type-btn svg{width:18px;height:18px}.custom-viz-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.custom-viz-actions button{min-width:100px}.custom-viz-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) 0;gap:var(--spacing-md)}.custom-viz-loading h4{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.custom-viz-loading p{font-size:14px;color:var(--text-secondary);margin:0}.loading-spinner{width:48px;height:48px;border:3px solid var(--border-subtle);border-top-color:var(--accent);border-radius:50%;animation:spin 1s linear infinite}.custom-viz-success{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) 0;gap:var(--spacing-md)}.custom-viz-success .success-icon{color:var(--accent)}.custom-viz-success .success-icon svg{width:48px;height:48px}.custom-viz-success h4{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.custom-viz-success p{font-size:14px;color:var(--text-secondary);margin:0}.custom-viz-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl) 0;gap:var(--spacing-md)}.custom-viz-error .error-icon{color:var(--danger)}.custom-viz-error .error-icon svg{width:48px;height:48px}.custom-viz-error h4{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.custom-viz-error p{font-size:14px;color:var(--text-secondary);margin:0;text-align:center;max-width:300px}.viz-create-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing-sm);padding:var(--spacing-md);background:var(--bg-control);border:2px dashed var(--border-medium);border-radius:var(--radius-md);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-fast);min-height:80px}.viz-create-btn:hover{border-color:var(--accent);background:var(--accent-dim);color:var(--accent)}.viz-create-btn svg{width:24px;height:24px}.viz-create-btn span{font-size:12px;font-weight:500}.viz-card{position:relative}.viz-card-user{border-color:var(--border-medium)}.viz-card-badge{position:absolute;top:6px;right:6px;font-size:9px;font-weight:600;text-transform:uppercase;padding:2px 6px;border-radius:4px;background:#ffffff1a;color:var(--text-muted)}.viz-card-badge.user{background:var(--accent-dim);color:var(--accent)}.viz-card-badge.pro{background:linear-gradient(135deg,#6366f14d,#8b5cf64d);color:#a78bfa}.viz-card-actions{position:absolute;top:6px;left:6px;display:flex;gap:4px;z-index:10;opacity:0;transition:opacity var(--transition-fast)}.viz-card:hover .viz-card-actions{opacity:1}.viz-card-edit,.viz-card-clone,.viz-card-delete{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.viz-card-edit:hover,.viz-card-clone:hover{background:var(--accent);color:#fff}.viz-card-delete:hover{background:var(--danger);color:#fff}.viz-card-edit svg,.viz-card-clone svg,.viz-card-delete svg{width:12px;height:12px}.viz-card-admin-actions{position:absolute;bottom:28px;right:6px;display:flex;gap:4px;z-index:10;opacity:0;transition:opacity var(--transition-fast)}.viz-card:hover .viz-card-admin-actions{opacity:1}.viz-card-regenerate,.viz-card-visibility{width:22px;height:22px;padding:0;display:flex;align-items:center;justify-content:center;background:#0009;border:none;border-radius:4px;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.viz-card-regenerate:hover,.viz-card-visibility:hover{background:var(--accent);color:#fff}.viz-card-regenerate svg,.viz-card-visibility svg{width:12px;height:12px}.viz-card-hidden{opacity:.5}.viz-card-hidden:hover{opacity:.75}.viz-card-badge.hidden{background:#ef44444d;color:#f87171}.viz-section-header{grid-column:1 / -1;display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;margin-top:var(--spacing-sm)}.viz-section-header span{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted)}.viz-section-header:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.viz-empty-state{grid-column:1 / -1;text-align:center;padding:var(--spacing-lg);color:var(--text-muted);font-size:13px}@media (max-width: 480px){.custom-viz-modal{padding:var(--spacing-lg)}.custom-viz-type-btns{grid-template-columns:1fr}.custom-viz-actions{flex-direction:column}.custom-viz-actions button{width:100%}}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:var(--icon-sidebar-width);background:#00000080;display:none;align-items:center;justify-content:center;z-index:85;padding:80px}.modal-overlay.open{display:flex}.modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:48px;max-width:550px;width:100%}.modal-close-btn{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:32px;height:32px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.modal-close-btn svg{width:20px;height:20px}.modal-close-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.drop-zone{text-align:center;padding:48px 40px;border:2px dashed var(--border-medium);border-radius:var(--radius-md);transition:var(--transition-fast)}.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-dim)}.drop-zone-icon{margin-bottom:var(--spacing-md);color:var(--accent);opacity:1}.drop-zone-icon img{width:64px;height:64px}.drop-zone h3{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-xs)}.drop-zone p{font-size:14px;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.drop-zone-buttons{display:flex;gap:var(--spacing-md);justify-content:center}.btn-outline{background:transparent;border:1px solid var(--accent);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-primary);font-size:14px;font-weight:400;cursor:pointer;display:inline-flex;align-items:center;gap:var(--spacing-sm);transition:var(--transition-fast)}.btn-outline svg{width:18px;height:18px}.btn-outline:hover{background:#00ff881a;border-color:var(--accent);color:var(--accent)}.btn-outline.btn-live{border-color:#f44;color:var(--text-primary);font-weight:400}.btn-outline.btn-live:hover{background:#ff44441a;border-color:#f44;color:#f44}.btn-outline.btn-live svg{color:inherit}.auth-header{display:flex;align-items:center;gap:8px}.auth-header-buttons{display:flex;gap:8px}.auth-header-user{display:flex;align-items:center;gap:10px}.tier-badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:10px;text-transform:uppercase;letter-spacing:.5px}.tier-badge.tier-anonymous,.tier-badge.tier-free{background:#333;color:#888}.tier-badge.tier-pro{background:var(--accent-gradient);color:#000}.tier-badge.tier-enterprise{background:linear-gradient(135deg,gold,#ff8c00);color:#000}.credits-badge{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 10px;border-radius:10px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;margin-left:6px}.credits-icon{font-size:10px;color:gold}#headerCreditsBalance{font-weight:700}.auth-user-menu{position:relative}.auth-user-btn{display:flex;align-items:center;gap:6px;background:#ffffff0d;padding:6px 12px}.auth-user-btn:hover{background:#ffffff1a}.auth-user-arrow{font-size:10px;color:#888}#headerUserEmail{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.auth-user-dropdown{position:absolute;top:100%;right:0;margin-top:4px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-md);min-width:160px;z-index:1000;box-shadow:0 4px 20px #0006}.auth-user-dropdown a{display:block;padding:10px 14px;color:var(--text-secondary);text-decoration:none;font-size:13px;transition:background var(--transition-fast)}.auth-user-dropdown a:hover{background:var(--bg-control-hover);color:var(--text-primary)}.auth-user-dropdown a:first-child{border-radius:var(--radius-md) var(--radius-md) 0 0}.auth-user-dropdown a:last-child{border-radius:0 0 var(--radius-md) var(--radius-md)}.auth-user-dropdown hr{border:none;border-top:1px solid var(--border-subtle);margin:0}.auth-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000}.auth-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.auth-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:400px;margin:20px;box-shadow:0 8px 40px #00000080}.auth-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px;line-height:1;transition:color var(--transition-fast)}.auth-modal-close:hover{color:var(--text-primary)}.auth-view h2{font-size:24px;font-weight:600;color:var(--text-primary);margin-bottom:8px;text-align:center}.auth-subtitle{font-size:14px;color:var(--text-secondary);text-align:center;margin-bottom:24px}.auth-form{display:flex;flex-direction:column;gap:16px}.auth-form-group{display:flex;flex-direction:column;gap:6px}.auth-form-group label{font-size:13px;color:var(--text-secondary);font-weight:500}.auth-form-group input{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:12px 14px;color:var(--text-primary);font-size:14px;outline:none;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.auth-form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.auth-form-group input::placeholder{color:var(--text-muted)}.auth-error{color:var(--danger);font-size:13px;min-height:18px}.auth-success{color:var(--accent);font-size:13px;padding:10px;background:var(--accent-dim);border-radius:var(--radius-sm);text-align:center}.auth-submit{margin-top:8px;padding:14px 20px;font-size:15px}.auth-oauth-btn{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 20px;background:#fff;color:#333;border-radius:var(--radius-sm);font-weight:500;transition:background var(--transition-fast),transform var(--transition-fast)}.auth-oauth-btn:hover{background:#f0f0f0;transform:translateY(-1px)}.auth-oauth-btn svg{flex-shrink:0}.auth-divider{display:flex;align-items:center;gap:16px;margin:20px 0}.auth-divider:before,.auth-divider:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.auth-divider span{color:var(--text-muted);font-size:12px;text-transform:uppercase}.auth-links{text-align:center;margin-top:20px;font-size:13px;color:var(--text-secondary)}.auth-links a{color:var(--accent);text-decoration:none;transition:color var(--transition-fast)}.auth-links a:hover{color:var(--accent-hover);text-decoration:underline}.auth-link-separator{margin:0 8px;color:var(--border-subtle)}.paywall-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000}.paywall-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.paywall-modal-content{position:relative;background:linear-gradient(135deg,var(--bg-elevated),#2a2a3e);border:1px solid var(--border-medium);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:440px;margin:20px;box-shadow:0 8px 40px #00000080;text-align:center}.paywall-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:24px;cursor:pointer;padding:4px;line-height:1}.paywall-icon{font-size:48px;margin-bottom:16px}.paywall-title{font-size:22px;font-weight:600;color:var(--text-primary);margin-bottom:12px}.paywall-message{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px}.paywall-cta{padding:14px 28px;font-size:15px;font-weight:600}.paywall-secondary{margin-top:12px}.paywall-secondary a{color:var(--text-secondary);font-size:13px;text-decoration:none}.paywall-secondary a:hover{color:var(--text-primary);text-decoration:underline}.paywall-credits{background:var(--accent-dim);border:1px solid rgba(0,255,136,.3);border-radius:var(--radius-md);padding:16px;margin-top:16px}.paywall-credits-title{font-size:13px;color:var(--accent);font-weight:500;margin-bottom:8px}.paywall-credits-info{font-size:12px;color:var(--text-secondary);margin-bottom:12px}.paywall-credits .btn{width:100%}select option:disabled{color:var(--text-muted)}.pricing-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}.pricing-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000000d9;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.pricing-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:900px;max-height:90vh;overflow-y:auto;box-shadow:0 8px 40px #00000080}.pricing-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-muted);font-size:28px;cursor:pointer;padding:4px;line-height:1;z-index:1}.pricing-modal-close:hover{color:var(--text-primary)}.pricing-title{text-align:center;font-size:28px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.pricing-subtitle{text-align:center;font-size:14px;color:var(--text-secondary);margin-bottom:24px}.pricing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:32px}.pricing-toggle-label{font-size:14px;color:var(--text-muted);cursor:pointer;transition:color var(--transition-fast)}.pricing-toggle-label.active,.pricing-toggle-label:hover{color:var(--text-primary)}.pricing-save{background:var(--accent-gradient);color:#000;font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;margin-left:4px}.pricing-toggle-switch{position:relative;width:50px;height:26px}.pricing-toggle-switch input{opacity:0;width:0;height:0}.pricing-toggle-slider{position:absolute;cursor:pointer;top:0;right:0;bottom:0;left:0;background:var(--bg-control);border-radius:26px;transition:background .3s}.pricing-toggle-slider:before{content:"";position:absolute;height:20px;width:20px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:transform .3s}.pricing-toggle-switch input:checked+.pricing-toggle-slider{background:var(--accent-gradient)}.pricing-toggle-switch input:checked+.pricing-toggle-slider:before{transform:translate(24px)}.pricing-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px}.pricing-plan{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:24px;display:flex;flex-direction:column;position:relative}.pricing-plan-featured{border-color:var(--accent);background:var(--accent-dim)}.pricing-plan-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:var(--accent-gradient);color:#000;font-size:11px;font-weight:600;padding:4px 12px;border-radius:12px;white-space:nowrap}.pricing-plan-header{text-align:center;margin-bottom:20px}.pricing-plan-header h3{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:8px}.pricing-plan-price{display:flex;align-items:baseline;justify-content:center;gap:4px}.pricing-amount{font-size:32px;font-weight:700;color:var(--text-primary)}.pricing-period{font-size:14px;color:var(--text-secondary)}.pricing-features{list-style:none;padding:0;margin:0 0 20px;flex:1}.pricing-features li{font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border-subtle);position:relative;padding:8px 0 8px 24px}.pricing-features li:before{content:"✓";position:absolute;left:0;color:var(--accent)}.pricing-features li:last-child{border-bottom:none}.pricing-features li strong{color:var(--text-primary)}.pricing-plan-btn{width:100%;padding:12px 20px;font-size:14px;font-weight:500}.pricing-credits{text-align:center;padding-top:24px;border-top:1px solid var(--border-subtle)}.pricing-credits h3{font-size:18px;color:var(--text-primary);margin-bottom:8px}.pricing-credits>p{font-size:13px;color:var(--text-secondary);margin-bottom:16px}.pricing-credits-options{display:flex;flex-direction:column;gap:12px;margin:16px 0}.pricing-credits-options .btn{padding:10px 20px;font-size:13px}.pricing-credits-info{font-size:11px;color:var(--text-muted)}@media (max-width: 800px){.pricing-plans{grid-template-columns:1fr;max-width:400px;margin-left:auto;margin-right:auto}.pricing-plan-featured{order:-1}.pricing-modal-content{padding:24px 16px}.pricing-title{font-size:24px}}@media (max-width: 500px){.pricing-toggle{flex-wrap:wrap}}.transaction-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000}.transaction-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c}.transaction-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:500px;width:90%;max-height:80vh;display:flex;flex-direction:column}.transaction-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px 8px;transition:color var(--transition-fast)}.transaction-modal-close:hover{color:var(--text-primary)}.transaction-title{text-align:center;font-size:24px;font-weight:600;margin-bottom:24px;color:var(--text-primary)}.transaction-summary{display:flex;justify-content:center;gap:40px;padding:20px;background:var(--bg-control);border-radius:var(--radius-md);margin-bottom:24px}.transaction-balance,.transaction-lifetime{text-align:center}.balance-label,.lifetime-label{display:block;font-size:12px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.balance-value,.lifetime-value{display:block;font-size:28px;font-weight:700;color:var(--text-primary)}.balance-value{color:var(--accent)}.transaction-list{flex:1;overflow-y:auto;margin-bottom:16px}.transaction-loading,.transaction-empty,.transaction-error{text-align:center;color:var(--text-secondary);padding:40px 20px}.transaction-error{color:var(--danger)}.transaction-items{display:flex;flex-direction:column;gap:8px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--bg-control);border-radius:var(--radius-sm);transition:background var(--transition-fast)}.transaction-item:hover{background:var(--bg-control-hover)}.transaction-icon{font-size:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:var(--bg-control-active);border-radius:var(--radius-sm)}.transaction-details{flex:1;display:flex;flex-direction:column;gap:2px}.transaction-reason{font-size:14px;font-weight:500;color:var(--text-primary)}.transaction-date{font-size:12px;color:var(--text-secondary)}.transaction-amount{font-size:16px;font-weight:600}.transaction-amount-positive{color:var(--accent)}.transaction-amount-negative{color:var(--danger)}.transaction-pagination{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:16px;border-top:1px solid var(--border-subtle)}.transaction-page-info{font-size:14px;color:var(--text-secondary)}@media (max-width: 500px){.transaction-modal-content{padding:24px 16px;width:95%;max-height:90vh}.transaction-summary{gap:24px;padding:16px}.balance-value,.lifetime-value{font-size:24px}}.credit-pack{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-md);gap:16px}.credit-pack-info{display:flex;flex-direction:column;gap:4px}.credit-pack-name{font-size:16px;font-weight:600;color:var(--text-primary)}.credit-pack-price{font-size:20px;font-weight:700;color:var(--accent)}.credit-pack-desc{font-size:12px;color:var(--text-secondary)}.credit-pack-buttons{display:flex;gap:8px;align-items:center}.paypal-btn-container{min-width:100px;height:40px}@media (max-width: 500px){.credit-pack{flex-direction:column;align-items:stretch;text-align:center}.credit-pack-buttons{justify-content:center;flex-wrap:wrap}.paypal-btn-container{min-width:150px}}.account-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000}.account-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#000c}.account-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);max-width:600px;width:90%;max-height:85vh;overflow-y:auto}.account-modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--text-secondary);font-size:24px;cursor:pointer;padding:4px 8px;transition:color var(--transition-fast)}.account-modal-close:hover{color:var(--text-primary)}.account-title{text-align:center;font-size:24px;font-weight:600;margin-bottom:24px;color:var(--text-primary)}.account-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:1px solid var(--border-subtle);padding-bottom:12px}.account-tab{background:none;border:none;color:var(--text-secondary);padding:8px 16px;font-size:14px;cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast)}.account-tab:hover{color:var(--text-primary);background:var(--bg-control-hover)}.account-tab.active{color:var(--text-primary);background:#6366f133}.account-tab-content{display:none}.account-tab-content.active{display:block}.account-section{background:var(--bg-control);border-radius:var(--radius-md);padding:20px;margin-bottom:16px}.account-section h3{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:16px}.account-form{display:flex;flex-direction:column;gap:16px}.account-form-group{display:flex;flex-direction:column;gap:6px}.account-form-group label{font-size:13px;color:var(--text-secondary)}.account-form-group input{padding:10px 12px;background:#0000004d;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px}.account-form-group input:focus{outline:none;border-color:#6366f1}.account-form-group input:disabled{opacity:.6;cursor:not-allowed}.account-form-actions{display:flex;align-items:center;gap:12px}.account-save-status{font-size:13px;color:var(--text-secondary)}.account-save-status.success{color:var(--accent)}.account-save-status.error{color:var(--danger)}.account-error{color:var(--danger);font-size:13px}.account-plan-info{display:flex;align-items:center;gap:16px;margin-bottom:16px}.account-plan-badge{padding:8px 16px;border-radius:var(--radius-sm);font-size:14px;font-weight:600}.account-plan-badge.tier-free{background:#9ca3af33;color:#9ca3af}.account-plan-badge.tier-pro{background:#6366f133;color:#818cf8}.account-plan-badge.tier-enterprise{background:#f59e0b33;color:#fbbf24}.account-plan-details p{font-size:13px;color:var(--text-secondary);margin:4px 0}.account-plan-actions{display:flex;gap:8px}.account-credits-info{display:flex;gap:32px;margin-bottom:16px}.account-credits-balance,.account-credits-lifetime{display:flex;flex-direction:column;gap:4px}.credits-label{font-size:12px;color:var(--text-secondary)}.credits-value{font-size:24px;font-weight:700;color:var(--accent)}.account-usage-stats{display:flex;gap:32px}.usage-stat{display:flex;flex-direction:column;gap:4px}.usage-stat-value{font-size:28px;font-weight:700;color:var(--text-primary)}.usage-stat-label{font-size:12px;color:var(--text-secondary)}.account-recent-exports{display:flex;flex-direction:column;gap:8px}.recent-export-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#0003;border-radius:var(--radius-sm)}.recent-export-info{display:flex;flex-direction:column;gap:2px}.recent-export-type{font-size:14px;font-weight:500;color:var(--text-primary);text-transform:capitalize}.recent-export-meta{font-size:12px;color:var(--text-secondary)}.recent-export-date{font-size:12px;color:var(--text-muted)}.account-empty,.account-loading{text-align:center;color:var(--text-secondary);padding:20px}.account-danger-zone{border:1px solid #7f1d1d;background:#7f1d1d1a}.account-danger-zone h3{color:var(--danger)}.account-danger-zone p{font-size:13px;color:var(--text-secondary);margin-bottom:16px}.btn-danger{background:#dc2626;color:#fff}.btn-danger:hover{background:#b91c1c}@media (max-width: 500px){.account-modal-content{padding:24px 16px;width:95%}.account-tabs{flex-wrap:wrap}.account-tab{padding:6px 12px;font-size:13px}.account-credits-info,.account-usage-stats{flex-direction:column;gap:16px}}.sorting-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:2000;padding:var(--spacing-lg)}.sorting-modal-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.sorting-modal-content{position:relative;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);width:100%;max-width:380px;box-shadow:var(--shadow-modal)}.sorting-modal-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:28px;height:28px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.sorting-modal-close:hover{background:var(--bg-control-hover);color:var(--text-primary)}.sorting-modal-title{font-size:18px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.sorting-modal-description{font-size:14px;color:var(--text-secondary);margin-bottom:var(--spacing-lg);line-height:1.5}.sorting-modal-checkbox{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm);border-radius:var(--radius-sm);cursor:pointer;margin-bottom:var(--spacing-lg);transition:var(--transition-fast)}.sorting-modal-checkbox:hover{background:var(--bg-control-hover)}.sorting-modal-checkbox input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}.sorting-modal-checkbox span{font-size:13px;color:var(--text-secondary)}.sorting-modal-actions{display:flex;gap:var(--spacing-sm);justify-content:flex-end}.sorting-modal-actions .btn-cancel{background:transparent;border:1px solid var(--border-medium);border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);color:var(--text-secondary);font-size:14px;cursor:pointer;transition:var(--transition-fast)}.sorting-modal-actions .btn-cancel:hover{background:var(--bg-control-hover);color:var(--text-primary)}.sorting-modal-actions .btn-confirm{background:var(--accent);border:none;border-radius:var(--radius-md);padding:var(--spacing-sm) var(--spacing-lg);color:#000;font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-fast)}.sorting-modal-actions .btn-confirm:hover{filter:brightness(1.1)}.generator-form{display:flex;flex-direction:column;gap:var(--spacing-md)}.generator-btn{margin-top:var(--spacing-sm)}.generator-btn i{width:16px;height:16px}.generator-extension-section{margin-top:var(--spacing-lg);padding-top:var(--spacing-lg);border-top:1px solid var(--border-subtle)}.extension-status-card{padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-md);border:1px solid var(--border-subtle)}.extension-status-card.ready{border-color:var(--success);background:#22c55e0d}.extension-status-card.warning{border-color:var(--warning);background:#f59e0b0d}.extension-status-card.missing{border-color:var(--danger);background:#ef44440d}.extension-status-row{display:flex;align-items:center;gap:var(--spacing-sm)}.extension-status-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.extension-status-indicator.valid{background:var(--success);box-shadow:0 0 8px #22c55e80}.extension-status-indicator.warning{background:var(--warning);box-shadow:0 0 8px #f59e0b80}.extension-status-indicator.error{background:var(--danger);box-shadow:0 0 8px #ef444480}.extension-status-text{flex:1;font-size:12px;font-weight:500;color:var(--text-primary)}.extension-action-btn{margin-top:var(--spacing-sm);width:100%;font-size:12px}.extension-status-card.ready .extension-action-btn{display:none}.extension-privacy-note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--spacing-sm);font-size:10px;color:var(--text-muted);text-align:center}.extension-privacy-note i{width:12px;height:12px;color:var(--success)}.generator-progress{padding:var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-md)}.generator-progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-sm)}.generator-progress-header h4{font-size:13px;font-weight:500;color:var(--text-primary);margin:0;text-transform:none}#generatorProgressText{font-size:13px;color:var(--accent);font-weight:500}.generator-song-list{list-style:none;padding:0;margin:var(--spacing-md) 0;max-height:200px;overflow-y:auto}.generator-song-item{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) 0;border-bottom:1px solid var(--border-subtle)}.generator-song-item:last-child{border-bottom:none}.generator-song-status{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.generator-song-status svg{width:14px;height:14px}.generator-song-status.pending{color:var(--text-muted)}.generator-song-status.generating{color:var(--accent)}.generator-song-status.generating svg{animation:spin 1s linear infinite}.generator-song-status.complete{color:var(--success)}.generator-song-status.error{color:var(--danger)}.generator-song-title{flex:1;font-size:13px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.generator-song-title.pending{color:var(--text-secondary)}.generator-song-download{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition-fast)}.generator-song-download:hover{background:var(--bg-control-hover);color:var(--accent)}.generator-song-download svg{width:14px;height:14px}.generator-captcha{padding:var(--spacing-lg);background:var(--bg-control);border-radius:var(--radius-md);text-align:center}.captcha-warning{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.captcha-warning svg{width:32px;height:32px;color:var(--warning)}.captcha-warning h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0;text-transform:none}.captcha-instructions{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:var(--spacing-lg);text-align:left}.captcha-buttons{display:flex;gap:var(--spacing-sm)}.captcha-buttons button{flex:1}.segmented-control .segment i{width:14px;height:14px;margin-right:4px}.segmented-control .segment.segment-custom{flex:0 0 auto;padding:var(--spacing-sm);min-width:36px}.segmented-control .segment.segment-custom i{margin-right:0}.custom-song-count{margin-top:var(--spacing-sm)}.custom-song-count input{width:100%}.custom-count-hint{display:block;font-size:11px;color:var(--text-muted);margin-top:var(--spacing-xs)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.generator-btn.loading{pointer-events:none;opacity:.7}.generator-btn.loading i{animation:spin 1s linear infinite}.generator-success{padding:var(--spacing-lg);background:var(--bg-control);border-radius:var(--radius-md);text-align:center}.generator-success-icon{width:48px;height:48px;margin:0 auto var(--spacing-md);color:var(--success)}.generator-success h4{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 var(--spacing-sm) 0;text-transform:none}.generator-success p{font-size:13px;color:var(--text-secondary);margin-bottom:var(--spacing-lg)}.input-modern{width:100%;padding:10px 12px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;transition:border-color var(--transition-fast)}.input-modern::placeholder{color:var(--text-muted)}.input-modern:focus{outline:none;border-color:var(--accent)}.input-modern:disabled{opacity:.5;cursor:not-allowed}.advanced-toggle{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;padding:var(--spacing-sm) 0;background:transparent;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;transition:color var(--transition-fast)}.advanced-toggle:hover{color:var(--accent)}.advanced-toggle i{width:14px;height:14px;transition:transform var(--transition-fast)}.advanced-toggle.expanded i{transform:rotate(180deg)}.advanced-options{padding-top:var(--spacing-md);border-top:1px solid var(--border-subtle);margin-top:var(--spacing-sm)}.advanced-options .panel-section{margin-bottom:var(--spacing-md)}.advanced-options .panel-section:last-child{margin-bottom:0}.section-hint{font-size:11px;color:var(--text-muted);margin:0 0 var(--spacing-xs) 0}.select-modern{width:100%;padding:8px 12px;background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);color:var(--text-primary);font-size:13px;cursor:pointer;transition:border-color var(--transition-fast);-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.select-modern:focus{outline:none;border-color:var(--accent)}.select-modern option{background:var(--bg-overlay);color:var(--text-primary)}.select-modern optgroup{font-weight:600;color:var(--text-secondary)}.selected-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--spacing-xs);min-height:24px}.selected-tag{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;background:var(--accent);color:var(--bg-primary);font-size:11px;font-weight:500;border-radius:var(--radius-sm);cursor:default}.selected-tag .remove-tag{display:flex;align-items:center;justify-content:center;width:14px;height:14px;background:transparent;border:none;color:inherit;cursor:pointer;opacity:.7;padding:0;margin-left:2px}.selected-tag .remove-tag:hover{opacity:1}.selected-tag .remove-tag svg{width:10px;height:10px}.checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.checkbox-item{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg-control);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:background-color var(--transition-fast)}.checkbox-item:hover{background:var(--bg-control-hover)}.checkbox-item input[type=checkbox]{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}.checkbox-item.checkbox-full{grid-column:1 / -1}.checkbox-item.checkbox-item-mt{margin-top:var(--spacing-xs)}.panel-section.panel-section-compact{margin-bottom:var(--spacing-sm)}.panel-section.panel-section-compact .section-hint{margin-top:var(--spacing-xs);margin-bottom:0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.generated-content{margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:var(--bg-control);border-radius:var(--radius-sm);border:1px solid var(--border-subtle)}.generated-content label{display:block;font-size:11px;color:var(--text-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}.generated-content textarea{resize:vertical;min-height:60px}.generated-content .btn-text{margin-top:var(--spacing-xs);width:100%}.generating-content{pointer-events:none;opacity:.7}.generating-content .btn-outline:before{content:"";display:inline-block;width:12px;height:12px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin 1s linear infinite;margin-right:6px}.overlay-panel-wide{width:420px;max-width:420px}.library-toolbar{display:flex;flex-direction:column;gap:var(--spacing-md);padding-bottom:var(--spacing-md);border-bottom:1px solid var(--border-color);margin-bottom:var(--spacing-md)}.library-toolbar-shell{padding:var(--spacing-sm);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg);background:linear-gradient(140deg,#ffffff05,#fff0),var(--surface-secondary)}.library-toolbar-row{display:flex;align-items:center;gap:var(--spacing-xs);flex-wrap:wrap}.library-search{position:relative;flex:1;min-width:180px}.library-search-icon{position:absolute;left:var(--spacing-sm);top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--text-muted);pointer-events:none}.library-search input{padding-left:36px;padding-right:32px;width:100%;border-radius:var(--radius-md);border-color:#ffffff1f;background:#ffffff05}.library-search-clear{position:absolute;right:var(--spacing-xs);top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:4px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center}.library-search-clear:hover{color:var(--text-primary);background:var(--surface-hover)}.library-search-clear svg{width:14px;height:14px}.library-toolbar-controls{display:flex;align-items:center;gap:var(--spacing-xs)}.library-filter-toggle{gap:6px;display:flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 10px;background:#ffffff05;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast);position:relative;flex-shrink:0}.library-toolbar-btn-label{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:uppercase}.library-filter-toggle:hover{border-color:#ffffff47;background:var(--surface-hover);color:var(--text-primary)}.library-filter-toggle.active{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.45);color:var(--text-primary)}.library-filter-toggle.has-filters:after{content:"";position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--color-error);border-radius:50%}.library-filter-toggle svg{width:15px;height:15px}.library-active-filters{display:flex;align-items:center;gap:var(--spacing-sm);padding-top:2px}.library-filter-badges{display:flex;flex-wrap:wrap;gap:6px;flex:1}.library-filter-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 7px 4px 9px;background:rgba(var(--accent-rgb),.16);border:1px solid rgba(var(--accent-rgb),.35);color:var(--text-primary);font-size:11px;font-weight:500;border-radius:var(--radius-sm);white-space:nowrap}.library-filter-badge svg{width:10px;height:10px;flex-shrink:0}.library-filter-badge-label{max-width:100px;overflow:hidden;text-overflow:ellipsis}.library-filter-badge-remove{display:flex;align-items:center;justify-content:center;width:14px;height:14px;padding:0;margin-left:2px;background:transparent;border:none;color:inherit;cursor:pointer;opacity:.7;border-radius:2px;transition:all var(--transition-fast)}.library-filter-badge-remove:hover{opacity:1;background:#fff3}.library-filter-badge-remove svg{width:10px;height:10px}.library-filter-clear-all{display:flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;background:transparent;border:none;color:var(--text-muted);cursor:pointer;border-radius:var(--radius-sm);transition:all var(--transition-fast);flex-shrink:0}.library-filter-clear-all:hover{background:var(--surface-hover);color:var(--text-primary)}.library-filter-clear-all svg{width:12px;height:12px}.library-filter-panel{display:flex;flex-direction:column;gap:2px;margin-top:var(--spacing-sm);padding:var(--spacing-sm);background:#ffffff05;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-lg)}.library-filter-section{display:flex;align-items:center;margin-top:var(--spacing-xs)}.library-filter-section:first-child{margin-top:0}.library-filter-section-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.library-filter-row{display:grid;grid-template-columns:1fr;gap:6px var(--spacing-md);padding:6px 0 8px}.library-filter-row+.library-filter-row{border-top:none}.library-filter-row-quick{grid-template-columns:repeat(3,1fr)}.library-filter-row-metadata{grid-template-columns:1fr 1fr}.library-filter-row-timing{grid-template-columns:3fr 2fr}.library-filter-group{display:flex;flex-direction:column;gap:5px;min-width:0}.library-filter-group-wide{min-width:0}.library-filter-label{font-size:10px;color:var(--text-secondary);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.library-filter-toggle-group{display:flex;gap:1px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-sm);padding:2px}.library-filter-option{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:5px 6px;background:transparent;border:none;border-radius:4px;color:var(--text-muted);font-size:var(--font-size-xs);cursor:pointer;transition:all var(--transition-fast);white-space:nowrap}.library-filter-option:hover{color:var(--text-primary)}.library-filter-option.active{background:rgba(var(--accent-rgb),.17);border:1px solid rgba(var(--accent-rgb),.32);color:var(--text-primary);box-shadow:none}.library-filter-option svg{width:12px;height:12px}.library-filter-input{width:100%;height:30px;padding:4px 8px;background:#ffffff05;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-xs);transition:border-color var(--transition-fast)}.library-filter-input:focus{outline:none;border-color:var(--accent-color)}.library-filter-input::placeholder{color:var(--text-muted)}.library-filter-date-range{display:flex;align-items:center;gap:4px}.library-filter-date{flex:1;min-width:0;height:30px;padding:4px 6px;background:#ffffff05;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--font-size-xs);transition:border-color var(--transition-fast)}.library-filter-date:focus{outline:none;border-color:var(--accent-color)}.library-filter-date::-webkit-calendar-picker-indicator{filter:invert(.8);cursor:pointer}.library-filter-date-sep{color:var(--text-muted);font-size:var(--font-size-xs)}.library-filter-length{font-family:var(--font-mono, "SF Mono", "Monaco", "Consolas", monospace);letter-spacing:.5px}.library-filter-length::placeholder{font-family:var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);letter-spacing:normal}.library-view-toggles{display:flex;gap:2px;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);padding:2px}.library-view-btn{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xs);background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.library-view-btn:hover{color:var(--text-primary)}.library-view-btn.active{background:rgba(var(--accent-rgb),.2);color:var(--text-primary);box-shadow:none}.library-view-btn svg{width:16px;height:16px}.library-action-strip{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.library-whole-library-wrap{display:flex;flex-direction:column;gap:4px;padding:8px 10px;border-radius:12px;border:1px solid rgba(var(--accent-rgb),.24);background:rgba(var(--accent-rgb),.05)}.library-whole-library-label{display:inline-flex;align-items:center;gap:8px;color:var(--text-primary);font-size:13px;font-weight:600;cursor:pointer}.library-whole-library-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-color);cursor:pointer}.library-whole-library-note{display:none;margin-left:24px;font-size:11px;line-height:1.3;color:var(--accent-color);text-shadow:0 0 10px rgba(var(--accent-rgb),.3)}.library-whole-library-wrap.checked .library-whole-library-note{display:block}.library-bulk-actions-row{display:flex;align-items:center;gap:var(--spacing-sm)}.library-bulk-menu-dropdown{position:relative;flex-shrink:0}.library-bulk-menu-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(255,255,255,.26);background:#ffffff08;color:var(--text-primary);cursor:pointer;transition:all var(--transition-fast)}.library-bulk-menu-btn:hover{border-color:#fff6;background:#ffffff1a}.library-bulk-menu-btn svg{width:18px;height:18px}.library-bulk-menu{right:0;left:auto;min-width:190px;margin-top:8px;background:#1a1d2e;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);box-shadow:0 12px 28px #0009;z-index:300}.library-bulk-menu-option{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px;background:transparent;border:none;color:var(--text-primary);font-size:13px;font-weight:500;text-align:left;cursor:pointer}.library-bulk-menu-option svg{width:14px;height:14px;color:var(--text-muted)}.library-bulk-menu-option:hover{background:var(--surface-hover)}.library-bulk-menu-divider{height:1px;margin:2px 0;background:#ffffff14}.library-export-dropdown{position:relative}.library-export-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#1a1d2e;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-md);box-shadow:0 12px 28px #0009;z-index:100;min-width:120px;overflow:hidden}.library-export-option{font-size:13px}.library-export-option:hover{background:var(--surface-hover)}.library-export-option:disabled,.library-export-option.disabled{opacity:.45;cursor:not-allowed}.library-export-option:disabled:hover,.library-export-option.disabled:hover{background:transparent}.library-export-option svg{width:14px;height:14px;color:var(--text-muted)}.library-add-all-filtered-btn{display:inline-flex;align-items:center;gap:var(--spacing-xs);flex:1;width:auto;min-height:42px;border-radius:var(--radius-lg);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.08);color:var(--text-primary);justify-content:center;font-size:15px;font-weight:600}.library-add-all-filtered-btn:hover{border-color:rgba(var(--accent-rgb),.75);background:rgba(var(--accent-rgb),.16)}.library-add-all-filtered-btn svg{width:14px;height:14px}.library-add-all-filtered-btn:disabled,.library-add-all-filtered-btn.disabled{opacity:.5;cursor:not-allowed;border-color:#ffffff2e;background:#ffffff08}.library-add-all-filtered-btn:disabled:hover,.library-add-all-filtered-btn.disabled:hover{border-color:#ffffff2e;background:#ffffff08}.library-add-all-progress{width:100%;padding:var(--spacing-xs) 0}.library-add-all-progress-text{font-size:var(--font-size-xs);color:var(--text-secondary);margin-bottom:var(--spacing-xs);text-align:center}.library-add-all-progress-track{height:4px;background:#ffffff14;border-radius:2px;overflow:hidden}.library-add-all-progress-bar{height:100%;width:30%;background:var(--accent);border-radius:2px;animation:addAllProgressSweep 1.2s ease-in-out infinite}@keyframes addAllProgressSweep{0%{transform:translate(-100%)}to{transform:translate(433%)}}.library-add-all-progress.success .library-add-all-progress-track{display:none}.library-add-all-progress.success .library-add-all-progress-text{color:var(--accent)}.library-add-all-progress.error .library-add-all-progress-track{display:none}.library-add-all-progress.error .library-add-all-progress-text{color:var(--danger, #e55)}@media (max-width: 420px){.library-toolbar-btn-label{display:none}.library-filter-toggle{width:32px;padding:0}.library-filter-row-quick,.library-filter-row-metadata,.library-filter-row-timing{grid-template-columns:1fr}.library-bulk-actions-row{gap:8px}.library-bulk-menu-btn{width:40px;height:40px}}.library-content{flex:1;overflow-y:auto;min-height:300px}.library-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);gap:var(--spacing-md);color:var(--text-muted)}.library-spinner{width:32px;height:32px;border:3px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.library-spinner-sm{display:inline-block;width:14px;height:14px;border:2px solid var(--border-color);border-top-color:var(--accent-color);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:6px}.library-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;color:var(--text-muted)}.library-empty-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:var(--surface-secondary);border-radius:var(--radius-lg);margin-bottom:var(--spacing-md)}.library-empty-icon svg{width:32px;height:32px}.library-empty h4{margin:0 0 var(--spacing-xs);color:var(--text-primary)}.library-empty p{margin:0;font-size:var(--font-size-sm)}.library-error{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--spacing-xl);text-align:center;color:var(--text-muted)}.library-error-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#ef44441a;border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);color:var(--color-error)}.library-error-icon svg{width:32px;height:32px}.library-error h4{margin:0 0 var(--spacing-xs);color:var(--text-primary)}.library-error p{margin:0 0 var(--spacing-md);font-size:var(--font-size-sm)}.library-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--spacing-md);padding-bottom:var(--spacing-md)}.library-song-card{position:relative;background:var(--surface-secondary);border-radius:var(--radius-md);overflow:hidden;cursor:pointer;transition:all var(--transition-fast)}.library-song-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.library-song-card.selected{outline:2px solid var(--accent-color);outline-offset:2px}.library-song-card-image{position:relative;aspect-ratio:1;background:var(--surface-tertiary)}.library-song-card-image img{width:100%;height:100%;object-fit:cover}.library-song-card-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.library-song-card-image-placeholder svg{width:32px;height:32px}.library-song-card-checkbox{position:absolute;top:var(--spacing-xs);left:var(--spacing-xs);width:22px;height:22px;background:#0009;border:2px solid rgba(255,255,255,.5);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--transition-fast)}.library-song-card:hover .library-song-card-checkbox,.library-song-card.selected .library-song-card-checkbox,.selection-mode .library-song-card-checkbox{opacity:1}.library-song-card.selected .library-song-card-checkbox{background:var(--accent-color);border-color:var(--accent-color)}.library-song-card-checkbox svg{width:14px;height:14px;color:#fff}.library-song-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:#000000b3;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;opacity:0;transition:opacity var(--transition-fast)}.library-song-card:hover .library-song-card-play{opacity:1}.library-song-card-play svg{width:20px;height:20px;margin-left:2px}.library-song-card-info{padding:var(--spacing-sm)}.library-song-card-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.library-song-card-meta{font-size:var(--font-size-xs);color:var(--text-muted);display:flex;align-items:center;gap:var(--spacing-xs)}.library-song-card-duration{display:flex;align-items:center;gap:2px}.library-song-card-duration svg{width:10px;height:10px}.library-list{display:flex;flex-direction:column;gap:1px;background:var(--border-color);border-radius:var(--radius-md);overflow:hidden}.library-song-row{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background:var(--surface-primary);cursor:pointer;transition:background var(--transition-fast)}.library-song-row:hover{background:var(--surface-hover)}.library-song-row.selected{background:rgba(var(--accent-rgb),.1)}.library-song-row-checkbox{width:18px;height:18px;border:2px solid var(--border-color);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-fast)}.library-song-row.selected .library-song-row-checkbox{background:var(--accent-color);border-color:var(--accent-color)}.library-song-row-checkbox svg{width:12px;height:12px;color:#fff}.library-song-row-image{width:40px;height:40px;border-radius:var(--radius-sm);overflow:hidden;flex-shrink:0;background:var(--surface-secondary)}.library-song-row-image img{width:100%;height:100%;object-fit:cover}.library-song-row-image-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-muted)}.library-song-row-image-placeholder svg{width:20px;height:20px}.library-song-row-info{flex:1;min-width:0}.library-song-row-title{font-size:var(--font-size-sm);font-weight:500;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-song-row-tags{font-size:var(--font-size-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.library-song-row-duration{font-size:var(--font-size-sm);color:var(--text-muted);flex-shrink:0}.library-song-row-actions{display:flex;align-items:center;gap:var(--spacing-xs);opacity:0;transition:opacity var(--transition-fast)}.library-song-row:hover .library-song-row-actions{opacity:1}.library-song-row-action{width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.library-song-row-action:hover{background:var(--surface-secondary);color:var(--text-primary)}.library-song-row-action svg{width:16px;height:16px}.library-load-more{display:flex;justify-content:center;padding:var(--spacing-md)}.library-extension-status{padding:var(--spacing-lg)}.extension-install-link{display:block;margin-top:var(--spacing-sm);font-size:11px;color:var(--text-secondary);text-align:center;text-decoration:none}.extension-install-link:hover{color:var(--text-primary);text-decoration:underline}.library-export-progress{position:absolute;bottom:0;left:0;right:0;padding:var(--spacing-md);background:var(--surface-primary);border-top:1px solid var(--border-color);display:flex;flex-direction:column;gap:var(--spacing-sm)}.library-export-info{display:flex;justify-content:space-between;align-items:center;font-size:var(--font-size-sm);color:var(--text-primary)}.library-notification{position:fixed;bottom:80px;left:50%;transform:translate(-50%) translateY(20px);padding:var(--spacing-sm) var(--spacing-lg);background:var(--surface-primary);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--font-size-sm);color:var(--text-primary);opacity:0;pointer-events:none;transition:opacity var(--transition-normal),transform var(--transition-normal);z-index:10000}.library-notification.show{opacity:1;transform:translate(-50%) translateY(0);pointer-events:auto}.library-notification-success{border-color:var(--color-success)}.library-notification-error{border-color:var(--color-error);color:var(--color-error)}.library-connection-error{display:flex;align-items:center;justify-content:center;padding:var(--spacing-xl);min-height:250px}.library-connection-error-content{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:300px}.library-connection-error-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;background:#f59e0b1a;border-radius:var(--radius-lg);margin-bottom:var(--spacing-md);color:#f59e0b}.library-connection-error-icon svg{width:32px;height:32px}.library-connection-error-title{font-size:var(--font-size-md);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.library-connection-error-message{font-size:var(--font-size-sm);color:var(--text-muted);line-height:1.5;margin-bottom:var(--spacing-lg)}.library-connection-error-btn{display:inline-flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-lg);background:#f59e0b;color:#0a0a0a;font-size:var(--font-size-sm);font-weight:500;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast)}.library-connection-error-btn:hover{background:#fbbf24;transform:translateY(-1px)}.library-connection-error-btn svg{width:16px;height:16px}.panel-expand-btn{width:32px;height:32px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast);margin-left:auto;margin-right:var(--spacing-xs)}.panel-expand-btn svg{width:16px;height:16px}.panel-expand-btn:hover{background:var(--bg-control-hover);color:var(--accent)}.panel-expand-btn:active{transform:scale(.95)}.panel-expand-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.suno-manager-modal{position:fixed;top:0;left:var(--icon-sidebar-width);right:0;bottom:0;background:var(--bg-overlay);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);z-index:200;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(20px);transition:opacity var(--transition-panel),visibility 0s var(--transition-panel),transform var(--transition-panel)}.suno-manager-modal.open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--transition-panel),visibility 0s,transform var(--transition-panel)}.suno-manager-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:#ffffff05}.suno-manager-title{display:flex;align-items:center;gap:var(--spacing-sm);color:var(--text-primary)}.suno-manager-title svg{width:24px;height:24px;color:var(--accent)}.suno-manager-title h2{font-size:18px;font-weight:600;margin:0}.suno-manager-header-actions{display:flex;align-items:center;gap:var(--spacing-xs)}.suno-manager-header-collapse-btn{width:40px;height:40px}.suno-manager-header-collapse-btn svg{width:20px;height:20px}.suno-manager-close-btn{width:40px;height:40px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.suno-manager-close-btn svg{width:20px;height:20px}.suno-manager-close-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.suno-manager-close-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.suno-manager-body{display:flex;flex:1;min-height:0;overflow:hidden}.suno-manager-column{display:flex;flex-direction:column;min-width:0;overflow:hidden}.suno-manager-generator{flex:0 0 420px;max-width:480px;border-right:1px solid var(--border-subtle)}.suno-manager-library{flex:1;min-width:0}.suno-manager-divider{display:none}.suno-manager-column-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-lg);border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:#ffffff03}.suno-manager-column-header>svg{width:18px;height:18px;color:var(--text-secondary);flex-shrink:0}.suno-manager-column-header h3{flex:1;font-size:14px;font-weight:500;color:var(--text-secondary);margin:0;text-transform:uppercase;letter-spacing:.5px}.suno-manager-collapse-btn{width:28px;height:28px;background:transparent;border:none;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast);flex-shrink:0}.suno-manager-collapse-btn svg{width:16px;height:16px}.suno-manager-collapse-btn:hover{background:var(--bg-control-hover);color:var(--text-primary)}.suno-manager-collapse-btn:active{transform:scale(.95)}.suno-manager-collapse-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.suno-manager-column-content{flex:1;padding:var(--spacing-lg);overflow-y:auto;overflow-x:hidden}.suno-manager-column-content .panel-content{padding:0}.suno-manager-generator .panel-section{margin-bottom:var(--spacing-lg)}.suno-manager-generator .generator-form{max-width:100%}.suno-manager-library .library-toolbar-shell{background:var(--surface-secondary)}.suno-manager-library .library-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}.suno-manager-library .library-content{min-height:auto}.suno-manager-modal.open .suno-manager-generator{animation:slideInFromLeft .35s cubic-bezier(.4,0,.2,1) forwards}.suno-manager-modal.open .suno-manager-library{animation:slideInFromRight .35s cubic-bezier(.4,0,.2,1) forwards;animation-delay:.05s}@keyframes slideInFromLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (max-width: 900px){.suno-manager-body{flex-direction:column}.suno-manager-generator{flex:0 0 auto;max-width:100%;max-height:50vh;border-right:none;border-bottom:1px solid var(--border-subtle)}.suno-manager-library{flex:1;min-height:0}.suno-manager-library .library-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.suno-manager-modal{left:0}.suno-manager-header{padding:var(--spacing-sm) var(--spacing-md)}.suno-manager-title h2{font-size:16px}.suno-manager-column-content{padding:var(--spacing-md)}.suno-manager-collapse-btn{display:none}.suno-manager-column-header{padding:var(--spacing-sm) var(--spacing-md)}}.drop-zone-suno-divider{display:flex;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-lg);width:100%;max-width:400px;margin-left:auto;margin-right:auto}.drop-zone-suno-divider:before,.drop-zone-suno-divider:after{content:"";flex:1;height:1px;background:var(--border-subtle)}.drop-zone-suno-divider span{font-size:12px;color:var(--text-muted);white-space:nowrap;text-transform:lowercase}.btn-suno-connect{display:inline-flex;align-items:center;gap:var(--spacing-sm);background:transparent;border:1px solid var(--accent-suno);border-radius:var(--radius-md);padding:var(--spacing-md) var(--spacing-lg);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:var(--transition-fast);margin-top:var(--spacing-md)}.btn-suno-connect svg{width:18px;height:18px}.btn-suno-connect:hover{background:var(--accent-suno-dim);border-color:var(--accent-suno);color:var(--accent-suno)}.btn-suno-connect.btn-suno-ready{border-color:var(--accent)}.btn-suno-connect.btn-suno-ready:hover{background:var(--accent-dim);border-color:var(--accent);color:var(--accent)}.suno-onboarding{position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;display:flex;align-items:center;justify-content:center}.suno-onboarding-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.suno-onboarding-content{position:relative;width:90%;max-width:440px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--spacing-xl);text-align:center;animation:sunoOnboardingFadeIn .2s ease}@keyframes sunoOnboardingFadeIn{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.suno-onboarding-close{position:absolute;top:var(--spacing-md);right:var(--spacing-md);width:32px;height:32px;background:transparent;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast)}.suno-onboarding-close:hover{background:var(--bg-control-hover);color:var(--text-primary)}.suno-onboarding-header{margin-bottom:var(--spacing-lg)}.suno-onboarding-icon{width:40px;height:40px;color:var(--accent-suno);margin-bottom:var(--spacing-md)}.suno-onboarding-state[data-state=success] .suno-onboarding-icon{color:var(--accent)}.suno-onboarding-header h3{font-size:20px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-sm)}.suno-onboarding-header p{font-size:14px;color:var(--text-secondary);line-height:1.5}.suno-onboarding-features{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-lg);text-align:left}.suno-onboarding-feature{display:flex;align-items:flex-start;gap:12px}.suno-onboarding-feature>svg,.suno-onboarding-feature>i{width:20px;height:20px;color:var(--accent-suno);flex-shrink:0;margin-top:2px}.suno-onboarding-feature strong{display:block;font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:2px}.suno-onboarding-feature span{font-size:12px;color:var(--text-secondary);line-height:1.4}.suno-onboarding-cta{display:block;width:100%;padding:12px var(--spacing-lg);background:var(--accent-suno);color:#fff;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;text-align:center;text-decoration:none;cursor:pointer;transition:var(--transition-fast)}.suno-onboarding-cta:hover{background:var(--accent-suno-hover);color:#fff}.suno-onboarding-fallback-link{display:inline-block;margin-top:var(--spacing-md);padding:var(--spacing-xs) var(--spacing-sm);background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;transition:var(--transition-fast)}.suno-onboarding-fallback-link:hover{color:var(--text-secondary)}.suno-onboarding-status{display:flex;align-items:center;justify-content:center;gap:var(--spacing-sm);margin-top:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background:var(--bg-control);border-radius:var(--radius-sm)}.suno-onboarding-refresh-btn{width:28px;height:28px;background:transparent;border:none;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);transition:var(--transition-fast);flex-shrink:0}.suno-onboarding-refresh-btn svg{width:14px;height:14px}.suno-onboarding-refresh-btn:hover{color:var(--text-primary);background:var(--bg-control-hover)}.suno-onboarding-refresh-btn.spinning svg{animation:sunoRefreshSpin .8s linear infinite}@keyframes sunoRefreshSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#sunoOnboardingStatusText{font-size:12px;color:var(--text-secondary)}.suno-onboarding-icon-success{animation:sunoSuccessPulse .6s ease}@keyframes sunoSuccessPulse{0%{transform:scale(.8);opacity:.5}50%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}@media (max-width: 500px){.suno-onboarding-content{padding:var(--spacing-lg) var(--spacing-md);width:95%}.suno-onboarding-header h3{font-size:18px}}.mosaic-drop-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;align-items:center;justify-content:center;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:1;transition:opacity .3s ease;pointer-events:auto}.mosaic-drop-overlay.hidden{opacity:0;pointer-events:none}.mosaic-drop-overlay.drag-active{background:#000000a6}.mosaic-drop-card{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 40px;border-radius:12px;background:#ffffff0f;border:1px dashed rgba(255,255,255,.2);color:#ffffffb3;text-align:center;max-width:340px}.mosaic-drop-card svg{width:40px;height:40px;opacity:.5;stroke:currentColor;fill:none;stroke-width:1.5}.mosaic-drop-card-title{font-size:15px;font-weight:500;color:#ffffffd9}.mosaic-drop-card-subtitle{font-size:12px;opacity:.5}.mosaic-drop-card-dismiss{margin-top:4px;padding:6px 16px;border-radius:6px;border:1px solid rgba(255,255,255,.15);background:#ffffff14;color:#fff9;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.mosaic-drop-card-dismiss:hover{background:#ffffff24;color:#ffffffd9}.mosaic-slide-manager{display:flex;flex-direction:column;gap:8px}.mosaic-slide-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 16px;border:1px dashed rgba(255,255,255,.15);border-radius:8px;cursor:pointer;color:#ffffff80;font-size:13px;transition:border-color .15s,background .15s;position:relative}.mosaic-slide-dropzone:hover{border-color:#ffffff4d;background:#ffffff08}.mosaic-slide-dropzone.drag-active{border-color:#64b4ff80;background:#64b4ff0f}.mosaic-slide-dropzone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.mosaic-slide-list{display:flex;flex-direction:column;gap:3px;max-height:240px;overflow-y:auto}.mosaic-slide-item{display:flex;align-items:center;gap:8px;padding:4px 6px;border-radius:5px;background:#ffffff0a;cursor:grab;transition:background .1s}.mosaic-slide-item:hover{background:#ffffff14}.mosaic-slide-item.dragging{opacity:.4}.mosaic-slide-item-thumb{width:40px;height:24px;border-radius:3px;object-fit:cover;flex-shrink:0;background:#0000004d}.mosaic-slide-item-name{flex:1;font-size:12px;color:#fff9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mosaic-slide-item-remove{flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:none;background:none;color:#ffffff4d;font-size:14px;cursor:pointer;border-radius:3px;padding:0;transition:color .15s,background .15s}.mosaic-slide-item-remove:hover{color:#ff6464e6;background:#ff64641a}.mosaic-slide-actions{display:flex;gap:8px;margin-top:4px}.mosaic-slide-actions button{flex:1;padding:5px 10px;border-radius:5px;border:1px solid rgba(255,255,255,.12);background:#ffffff0f;color:#fff9;font-size:12px;cursor:pointer;transition:background .15s,color .15s}.mosaic-slide-actions button:hover{background:#ffffff1f;color:#ffffffd9}.mosaic-slide-actions .mosaic-slide-clear{border-color:#ff646433;color:#ff646499}.mosaic-slide-actions .mosaic-slide-clear:hover{background:#ff64641a;color:#ff6464d9}#notifications{position:fixed;top:var(--spacing-md);right:var(--spacing-md);z-index:10001;display:flex;flex-direction:column;gap:var(--spacing-sm);pointer-events:none;max-width:400px}.notification{display:flex;align-items:flex-start;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--radius-md);font-size:14px;line-height:1.4;color:var(--text-primary);pointer-events:auto;animation:notification-enter .25s ease forwards;border:1px solid var(--border-subtle);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.notification-error{background:#ff444426;border-color:#ff44444d}.notification-warning{background:#ffaa0026;border-color:#ffaa004d}.notification-info{background:#0096ff26;border-color:#0096ff4d}.notification-success{background:#00ff8826;border-color:#00ff884d}.notification-dismiss{flex-shrink:0;margin-left:auto;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--text-secondary);font-size:16px;cursor:pointer;border-radius:var(--radius-sm);transition:color var(--transition-fast),background var(--transition-fast)}.notification-dismiss:hover{color:var(--text-primary);background:#ffffff1a}.notification-exit{animation:notification-exit .2s ease forwards}@keyframes notification-enter{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes notification-exit{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.notification,.notification-exit{animation:none}}body.theater-mode .app-layout{display:block}body.theater-mode .icon-sidebar,body.theater-mode .overlay-panel,body.theater-mode .overlay-backdrop,body.theater-mode .settings-overlay,body.theater-mode .transport-bar,body.theater-mode .live-monitor-floating{display:none!important}body.theater-mode .canvas-viewport{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000}body.theater-mode .canvas-viewport canvas{width:100%;height:100%}body.theater-mode .viewport-controls{opacity:0;bottom:var(--spacing-lg);right:var(--spacing-lg)}body.theater-mode .canvas-viewport:hover .viewport-controls{opacity:1}.canvas-viewport:fullscreen{background:#000}.canvas-viewport:fullscreen canvas{width:100%;height:100%;object-fit:contain}body.theater-mode.immersive-controls-visible .transport-bar{display:flex!important;position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:1001}body.theater-mode.immersive-controls-visible .viewport-controls{opacity:1}body.theater-mode .canvas-viewport:hover .viewport-controls{opacity:0}body.theater-mode.immersive-controls-visible .canvas-viewport .viewport-controls{opacity:1}.canvas-viewport:fullscreen .viewport-controls{opacity:0;transition:opacity var(--transition-fast)}body.immersive-controls-visible .canvas-viewport:fullscreen .viewport-controls{opacity:1}.canvas-viewport:fullscreen .transport-bar{display:none;position:fixed;bottom:var(--spacing-lg);left:50%;transform:translate(-50%);z-index:2147483647}body.immersive-controls-visible .canvas-viewport:fullscreen .transport-bar{display:flex}body.theater-mode .transport-bar,body.theater-mode .viewport-controls,.canvas-viewport:fullscreen .transport-bar,.canvas-viewport:fullscreen .viewport-controls{transition:opacity var(--transition-fast)}@media (max-width: 768px){:root{--icon-sidebar-width: 0px;--overlay-panel-width: 100%;--settings-overlay-width: 100%}.app-layout{grid-template-columns:1fr;grid-template-rows:1fr auto}.icon-sidebar{position:fixed;left:0;right:0;top:auto;bottom:0;width:100%;height:56px;flex-direction:row;justify-content:space-around;padding:0 var(--spacing-md);border-right:none;border-top:1px solid var(--border-subtle)}.icon-btn{margin-bottom:0}.icon-sidebar-spacer,.icon-btn[data-action=live]{display:none}.panel-live-mode-btn{display:flex}.overlay-panel{left:0;top:auto;bottom:56px;width:100%;max-height:70vh;border-right:none;border-top:1px solid var(--border-subtle);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%)}.overlay-panel.open{transform:translateY(0)}.overlay-backdrop{left:0;bottom:56px}.settings-overlay{left:0;top:auto;bottom:56px;width:100%;max-height:70vh;border-left:none;border-top:1px solid var(--border-subtle);border-radius:var(--radius-lg) var(--radius-lg) 0 0;transform:translateY(100%)}.settings-collapse-btn{display:none}.transport-bar{bottom:calc(56px + var(--spacing-md));left:var(--spacing-md);right:var(--spacing-md);transform:translateY(100px);margin-left:0;min-width:0;max-width:none}.transport-bar.visible{transform:translateY(0)}.transport-controls{flex-wrap:wrap;justify-content:center}.viewport-controls{bottom:calc(56px + var(--spacing-md))}.canvas-viewport{padding-bottom:56px}.live-monitor-floating{left:var(--spacing-md);top:var(--spacing-md)}#playlistPanel.overlay-panel{overflow:hidden}#playlistPanel .panel-content{display:flex;flex-direction:column;padding:0;overflow:hidden;min-height:0;flex:1}#playlistPanel .panel-header{display:none}#playlistPanel .playlist-actions-top{margin:0 var(--spacing-sm);padding:var(--spacing-sm);flex-shrink:0;display:flex;gap:var(--spacing-sm);flex-wrap:nowrap;align-items:center}#playlistPanel .playlist-actions-top button,#playlistPanel .panel-live-mode-btn{height:40px;padding:0 12px;font-size:14px;line-height:1}#playlistPanel .panel-live-mode-btn{display:flex;align-items:center;gap:6px;border-radius:var(--radius-sm);background:var(--bg-control);border:1px solid var(--border-subtle);color:var(--text-primary);flex-shrink:0}.mobile-collapsible-section{display:flex;flex-direction:column;overflow:hidden;transition:flex var(--transition-panel);border-top:1px solid var(--border-subtle)}.mobile-collapsible-section:first-of-type{border-top:none}.mobile-collapsible-section.expanded{flex:1;min-height:0}.mobile-collapsible-section.collapsed{flex:0 0 auto}.mobile-collapsible-section.collapsed .mobile-collapsible-header{padding:6px var(--spacing-md);background:var(--bg-panel);border-top:1px solid var(--border-subtle)}.mobile-collapsible-header{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.mobile-collapsible-header:hover{background:var(--bg-control-hover)}.mobile-collapsible-header h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin:0;flex:1}.mobile-collapsible-section.collapsed .mobile-collapsible-header h4{font-size:11px;color:var(--text-muted)}.mobile-collapsible-header .playlist-badge{margin-right:var(--spacing-sm)}.mobile-collapsible-header svg{width:16px;height:16px;color:var(--text-muted);transition:transform var(--transition-fast)}.mobile-collapsible-section.collapsed .mobile-collapsible-header svg{transform:rotate(180deg)}.mobile-collapsible-section.expanded .mobile-collapsible-header svg{transform:rotate(0)}.mobile-collapsible-body{flex:1;overflow:hidden;display:none;min-height:0;flex-direction:column}.mobile-collapsible-section.expanded .mobile-collapsible-body{display:flex}#playlistPanel .playlist-scroll{max-height:none;flex:1;overflow-y:auto;margin:0;padding:0 var(--spacing-sm)}#playlistPanel .sidebar-lyrics-panel{margin:0;padding:0;border:none;flex:1;display:flex;flex-direction:column;min-height:0}#playlistPanel .sidebar-lyrics-header{display:none}#playlistPanel .sidebar-lyrics-content{max-height:none;margin:0;border-radius:0;flex:1;overflow-y:auto;padding:var(--spacing-sm)}}@media (min-width: 769px){.mobile-collapsible-header{display:none}}@media (max-width: 480px){.transport-bar{padding:var(--spacing-sm);gap:var(--spacing-sm)}.transport-btn{width:32px;height:32px}.transport-btn-main{width:40px;height:40px}.modal-overlay{padding:40px 24px}.modal-content{padding:32px 24px}.drop-zone{padding:32px 20px}.drop-zone-buttons{flex-direction:column}.viz-selector-grid{grid-template-columns:1fr}#playlistPanel .panel-content{display:flex;flex-direction:column;padding:0;overflow:hidden}#playlistPanel .panel-header{display:none}#playlistPanel .panel-live-mode-btn{margin:var(--spacing-sm);flex-shrink:0}#playlistPanel .playlist-actions-top{margin:0 var(--spacing-sm);padding:var(--spacing-sm);flex-shrink:0}.mobile-collapsible-section{display:flex;flex-direction:column;overflow:hidden;transition:flex var(--transition-panel);border-top:1px solid var(--border-subtle)}.mobile-collapsible-section:first-of-type{border-top:none}.mobile-collapsible-section.expanded{flex:1;min-height:0}.mobile-collapsible-section.expanded .mobile-collapsible-header{display:none}.mobile-collapsible-section.collapsed{flex:0 0 auto}.mobile-collapsible-section.collapsed .mobile-collapsible-header{padding:6px var(--spacing-md);background:var(--bg-secondary);border-top:1px solid var(--border-subtle)}.mobile-collapsible-header{display:flex;align-items:center;padding:var(--spacing-sm) var(--spacing-md);background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;flex-shrink:0}.mobile-collapsible-header:hover{background:var(--bg-control-hover)}.mobile-collapsible-header h4{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin:0;flex:1}.mobile-collapsible-section.collapsed .mobile-collapsible-header h4{font-size:11px;color:var(--text-muted)}.mobile-collapsible-header .playlist-badge{margin-right:var(--spacing-sm)}.mobile-collapsible-header svg{width:16px;height:16px;color:var(--text-muted);transition:transform var(--transition-fast)}.mobile-collapsible-section.collapsed .mobile-collapsible-header svg{transform:rotate(-90deg)}.mobile-collapsible-body{flex:1;overflow:hidden;display:none;min-height:0;flex-direction:column}.mobile-collapsible-section.expanded .mobile-collapsible-body{display:flex}#playlistPanel .playlist-scroll{max-height:none;flex:1;overflow-y:auto;margin:0;padding:0 var(--spacing-sm)}#playlistPanel .sidebar-lyrics-panel{margin:0;padding:0;border:none;flex:1;display:flex;flex-direction:column;min-height:0}#playlistPanel .sidebar-lyrics-header{display:none}#playlistPanel .sidebar-lyrics-content{max-height:none;margin:0;border-radius:0;flex:1;overflow-y:auto;padding:var(--spacing-sm)}}#visualizationType{display:none}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:4px;background:#ffffff26;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer}input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--accent);border:none;border-radius:50%;cursor:pointer}input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent)}input[type=color]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:40px;height:28px;border:none;border-radius:var(--radius-sm);cursor:pointer;background:transparent}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--border-medium);border-radius:var(--radius-sm)}select{background:var(--bg-control);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text-primary);font-size:14px;cursor:pointer;outline:none;width:100%}select:hover{border-color:var(--border-medium)}select:focus{border-color:var(--accent)}select:focus{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-dim)}.accordion-section[data-section=Background] .accordion-content-inner{display:flex;flex-direction:column;gap:var(--spacing-sm)}.bg-color-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-sm)}.bg-color-row .control-group{margin-bottom:0}.bg-color-row .color-picker{width:100%}.bg-image-upload{display:flex;flex-direction:column;gap:12px}.bg-image-dropzone{width:100%;height:120px;background:var(--bg-control);border:2px dashed var(--border-medium);border-radius:var(--radius-md);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text-secondary);cursor:pointer;transition:var(--transition-fast)}.bg-image-dropzone:hover{border-color:var(--accent);background:var(--accent-dim)}.bg-image-dropzone.drag-over{border-color:var(--accent);background:var(--accent-dim);border-style:solid}.bg-image-dropzone svg{width:32px;height:32px;opacity:.5;color:var(--accent)}.bg-image-dropzone span{font-size:13px;opacity:.8}.bg-image-dropzone .btn-ghost{margin-top:4px}.bg-image-preview-container{width:100%;height:120px;background:var(--bg-control);border-radius:var(--radius-md);overflow:hidden;position:relative}.bg-image-preview{width:100%;height:100%;object-fit:cover}.bg-image-remove-btn{position:absolute;top:8px;right:8px;width:28px;height:28px;padding:0;display:flex;align-items:center;justify-content:center;background:#000000b3;border:none;border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;opacity:0;transition:var(--transition-fast)}.bg-image-preview-container:hover .bg-image-remove-btn{opacity:1}.bg-image-remove-btn:hover{background:var(--danger);color:#fff}.bg-image-remove-btn svg{width:14px;height:14px}.btn-sm{padding:6px 12px;font-size:12px}.btn-sm svg{width:14px;height:14px}