.drag-drop-provider[data-v-9a38b0ea]{width:100%;height:100%}.drag-preview[data-v-9a38b0ea]{position:fixed;pointer-events:none;z-index:10000}.drag-preview-content[data-v-9a38b0ea]{display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:8px;box-shadow:0 4px 12px #0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(78,205,196,.5)}.drag-preview-icon svg[data-v-9a38b0ea]{width:20px;height:20px;color:#4ecdc4}.drag-preview-text[data-v-9a38b0ea]{display:flex;align-items:center;gap:4px}.drag-count[data-v-9a38b0ea]{font-size:18px;font-weight:700;color:#4ecdc4}.drag-label[data-v-9a38b0ea]{color:#fffc;font-size:14px}.drop-zones-overlay[data-v-9a38b0ea]{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:9999}.drop-zone-indicator[data-v-9a38b0ea]{position:absolute;border:2px dashed transparent;border-radius:8px;transition:all .2s ease;pointer-events:none}.drop-zone-indicator.drop-zone-active[data-v-9a38b0ea]{border-color:#4ecdc4;background:#4ecdc41a}.drop-zone-indicator.drop-zone-playlist[data-v-9a38b0ea]{border-color:#1db954}.drop-zone-indicator.drop-zone-artist[data-v-9a38b0ea]{border-color:#e22856}.drop-zone-indicator.drop-zone-folder[data-v-9a38b0ea]{border-color:#4ecdc4}.drop-zone-content[data-v-9a38b0ea]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px;background:#000c;border-radius:8px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.drop-zone-icon svg[data-v-9a38b0ea]{width:24px;height:24px;color:#4ecdc4}.drop-zone-text[data-v-9a38b0ea]{color:#fff;font-size:14px;font-weight:500;text-align:center}.file-drop-overlay[data-v-9a38b0ea]{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10001;display:flex;align-items:center;justify-content:center}.file-drop-content[data-v-9a38b0ea]{text-align:center;padding:48px;border:2px dashed #4ECDC4;border-radius:16px;background:#4ecdc41a;max-width:400px}.file-drop-icon[data-v-9a38b0ea]{margin-bottom:24px}.file-drop-icon svg[data-v-9a38b0ea]{width:64px;height:64px;color:#4ecdc4}.file-drop-content h3[data-v-9a38b0ea]{font-size:24px;font-weight:600;color:#fff;margin-bottom:8px}.file-drop-content p[data-v-9a38b0ea]{color:#ffffffb3;font-size:16px}.reorder-placeholder[data-v-9a38b0ea]{background:#4ecdc433;border:2px dashed #4ECDC4;border-radius:4px;margin:2px 0;transition:all .2s ease}.drop-target-highlighted{outline:2px dashed rgba(78,205,196,.5);outline-offset:2px;transition:outline .2s ease}.drop-zone-hover{background:#4ecdc41a!important;outline:2px solid #4ECDC4;outline-offset:-2px}.dragging{opacity:.5;transform:rotate(5deg);transition:all .2s ease}.custom-drag-image{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#1e1e1ef2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(78,205,196,.5);border-radius:8px;color:#fff;font-size:14px;font-weight:500;box-shadow:0 4px 12px #0000004d}.custom-drag-image .drag-count{font-size:18px;font-weight:700;color:#4ecdc4}.custom-drag-image .drag-label{color:#fffc}.modal-backdrop[data-v-d5aaaae3]{position:fixed;top:0;right:0;bottom:0;left:0;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px}.modal-panel[data-v-d5aaaae3]{background:#282828;border-radius:12px;border:1px solid rgba(255,255,255,.1);box-shadow:0 25px 50px -12px #000c;width:100%;max-width:800px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}.modal-header[data-v-d5aaaae3]{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.modal-title[data-v-d5aaaae3]{font-size:20px;font-weight:600;color:#fff;margin:0}.modal-subtitle[data-v-d5aaaae3]{font-size:14px;color:#fff9;margin:4px 0 0}.close-btn[data-v-d5aaaae3]{width:32px;height:32px;background:none;border:none;color:#fff9;cursor:pointer;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-btn[data-v-d5aaaae3]:hover{background:#ffffff1a;color:#fff}.close-btn svg[data-v-d5aaaae3]{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}.modal-content[data-v-d5aaaae3]{flex:1;display:flex;overflow:hidden}.tab-nav[data-v-d5aaaae3]{width:200px;padding:20px 0;border-right:1px solid rgba(255,255,255,.1);background:#ffffff05}.tab-btn[data-v-d5aaaae3]{display:flex;align-items:center;gap:12px;width:100%;padding:12px 24px;background:none;border:none;color:#fff9;font-size:14px;cursor:pointer;transition:all .2s ease;text-align:left}.tab-btn[data-v-d5aaaae3]:hover{background:#ffffff0d;color:#fffc}.tab-btn.active[data-v-d5aaaae3]{background:#1db9541a;color:#1db954;border-right:2px solid #1db954}.tab-btn svg[data-v-d5aaaae3]{width:18px;height:18px}.tab-content[data-v-d5aaaae3]{flex:1;overflow-y:auto}.tab-panel[data-v-d5aaaae3]{padding:24px}.section[data-v-d5aaaae3]{margin-bottom:32px}.section[data-v-d5aaaae3]:last-child{margin-bottom:0}.section-title[data-v-d5aaaae3]{font-size:16px;font-weight:600;color:#fff;margin:0 0 16px}.setting-group[data-v-d5aaaae3]{display:flex;flex-direction:column;gap:16px}.setting-item[data-v-d5aaaae3]{display:flex;flex-direction:column;gap:8px}.setting-item.checkbox-item[data-v-d5aaaae3]{flex-direction:row;align-items:flex-start;gap:0}.setting-label[data-v-d5aaaae3]{font-size:14px;font-weight:500;color:#ffffffe6}.setting-input[data-v-d5aaaae3]{padding:8px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:#fff;font-size:14px;width:200px}.setting-input[data-v-d5aaaae3]:focus{outline:none;border-color:#1db954;box-shadow:0 0 0 2px #1db95433}.color-input-group[data-v-d5aaaae3]{display:flex;align-items:center;gap:8px}.color-input[data-v-d5aaaae3]{width:40px;height:32px;border:none;border-radius:6px;cursor:pointer;background:none}.slider-group[data-v-d5aaaae3]{display:flex;align-items:center;gap:12px;width:250px}.slider-input[data-v-d5aaaae3]{flex:1;height:4px;background:#ffffff1a;border-radius:2px;outline:none;cursor:pointer}.slider-input[data-v-d5aaaae3]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:16px;height:16px;background:#1db954;border-radius:50%;cursor:pointer}.slider-value[data-v-d5aaaae3]{font-size:14px;color:#fff9;min-width:35px}.checkbox-label[data-v-d5aaaae3]{display:flex;align-items:center;gap:12px;cursor:pointer;flex:1}.checkbox-input[data-v-d5aaaae3]{display:none}.checkbox-custom[data-v-d5aaaae3]{width:18px;height:18px;border:2px solid rgba(255,255,255,.3);border-radius:4px;position:relative;transition:all .2s ease}.checkbox-input:checked+.checkbox-custom[data-v-d5aaaae3]{background:#1db954;border-color:#1db954}.checkbox-input:checked+.checkbox-custom[data-v-d5aaaae3]:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.setting-description[data-v-d5aaaae3]{font-size:12px;color:#ffffff80;margin:4px 0 0 30px}.checkbox-item .setting-description[data-v-d5aaaae3]{margin-left:30px}.modal-footer[data-v-d5aaaae3]{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-top:1px solid rgba(255,255,255,.1);background:#ffffff05}.footer-actions[data-v-d5aaaae3]{display:flex;gap:12px}.btn-secondary.danger[data-v-d5aaaae3]{color:#f55;border-color:#ff55554d}.btn-secondary.danger[data-v-d5aaaae3]:hover{background:#ff55551a;border-color:#ff555580}.now-playing-wrapper[data-v-e80d2ca3]{position:fixed;bottom:0;left:0;right:0;height:90px;z-index:1000}.now-playing-bar[data-v-e80d2ca3]{height:100%;border-top:1px solid var(--glass-border);display:flex;align-items:center;padding:0 16px;gap:16px}.player-left[data-v-e80d2ca3]{display:flex;align-items:center;gap:12px;min-width:0;flex:0 1 300px}.song-cover[data-v-e80d2ca3]{width:56px;height:56px;border-radius:8px;overflow:hidden;background:#ffffff0d;flex-shrink:0}.cover-image[data-v-e80d2ca3]{width:100%;height:100%;object-fit:cover}.cover-placeholder[data-v-e80d2ca3]{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--accent-primary),#4ecdc4);color:#fff}.cover-placeholder svg[data-v-e80d2ca3]{width:24px;height:24px}.song-info[data-v-e80d2ca3]{display:flex;align-items:center;gap:12px;min-width:0;flex:1}.song-details[data-v-e80d2ca3]{min-width:0;flex:1}.song-title[data-v-e80d2ca3]{font-size:14px;color:#fff;font-weight:500;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.song-artist[data-v-e80d2ca3]{font-size:12px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:color .2s ease}.song-artist[data-v-e80d2ca3]:hover{color:#fff;text-decoration:underline}.player-center[data-v-e80d2ca3]{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;max-width:600px}.playback-controls[data-v-e80d2ca3]{display:flex;align-items:center;gap:16px}.control-btn[data-v-e80d2ca3]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.control-btn[data-v-e80d2ca3]:hover:not(:disabled){color:#fff;background:#ffffff1a}.control-btn[data-v-e80d2ca3]:disabled{opacity:.3;cursor:not-allowed}.control-btn svg[data-v-e80d2ca3]{width:20px;height:20px}.control-btn.small svg[data-v-e80d2ca3]{width:16px;height:16px}.control-btn.play-btn[data-v-e80d2ca3]{width:40px;height:40px;background:#fff;color:#000}.control-btn.play-btn[data-v-e80d2ca3]:hover:not(:disabled){transform:scale(1.05);background:#ffffffe6}.control-btn.active[data-v-e80d2ca3]{color:var(--accent-primary)}.loading-spinner svg[data-v-e80d2ca3]{animation:spin-e80d2ca3 1s linear infinite}.playback-bar[data-v-e80d2ca3]{display:flex;align-items:center;gap:12px;width:100%;max-width:500px}.time[data-v-e80d2ca3]{font-size:11px;color:var(--text-secondary);min-width:40px;text-align:center;font-variant-numeric:tabular-nums}.progress-bar[data-v-e80d2ca3]{flex:1;height:20px;position:relative;cursor:pointer;display:flex;align-items:center;border-radius:10px}.progress-bg[data-v-e80d2ca3]{position:absolute;width:100%;height:4px;background:#fff3;border-radius:2px}.progress-fill[data-v-e80d2ca3]{position:absolute;height:4px;background:#fff;border-radius:2px;transition:width .1s ease}.progress-thumb[data-v-e80d2ca3]{position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%);opacity:0;transition:opacity .2s ease;box-shadow:0 2px 4px #0000004d}.progress-bar:hover .progress-fill[data-v-e80d2ca3]{background:var(--accent-primary)}.progress-bar:hover .progress-thumb[data-v-e80d2ca3]{opacity:1}.player-right[data-v-e80d2ca3]{display:flex;align-items:center;gap:8px;flex:0 1 300px;justify-content:flex-end}.icon-btn[data-v-e80d2ca3]{background:none;border:none;color:var(--text-secondary);cursor:pointer;padding:8px;border-radius:50%;transition:all .2s ease}.icon-btn[data-v-e80d2ca3]:hover{color:#fff;background:#ffffff1a}.icon-btn.active[data-v-e80d2ca3]{color:var(--accent-primary)}.icon-btn svg[data-v-e80d2ca3]{width:16px;height:16px}.volume-control[data-v-e80d2ca3]{display:flex;align-items:center;gap:8px}.volume-slider[data-v-e80d2ca3]{width:80px;height:20px;position:relative;cursor:pointer;display:flex;align-items:center;border-radius:10px}.volume-bg[data-v-e80d2ca3]{position:absolute;width:100%;height:4px;background:#fff3;border-radius:2px}.volume-fill[data-v-e80d2ca3]{position:absolute;height:4px;background:#fff;border-radius:2px;transition:width .1s ease}.volume-thumb[data-v-e80d2ca3]{position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;transform:translate(-50%);opacity:0;transition:opacity .2s ease;box-shadow:0 2px 4px #0000004d}.volume-slider:hover .volume-fill[data-v-e80d2ca3]{background:var(--accent-primary)}.volume-slider:hover .volume-thumb[data-v-e80d2ca3]{opacity:1}@keyframes spin-e80d2ca3{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (max-width: 768px){.now-playing-bar[data-v-e80d2ca3]{padding:0 12px;gap:8px}.player-left[data-v-e80d2ca3]{flex:0 1 200px}.player-right[data-v-e80d2ca3]{flex:0 1 120px}.volume-control[data-v-e80d2ca3]{display:none}.playback-controls[data-v-e80d2ca3]{gap:12px}.playback-bar[data-v-e80d2ca3]{max-width:300px}}.context-menu-overlay[data-v-f373cec4]{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10000}.context-menu[data-v-f373cec4]{position:absolute;min-width:240px;max-width:320px;border-radius:8px;padding:4px;box-shadow:0 10px 40px #00000080;color:#fff;font-size:14px;overflow:hidden;outline:none}.context-menu-header[data-v-f373cec4]{padding:8px 12px;font-weight:600;opacity:.7;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:4px}.context-menu-separator[data-v-f373cec4]{height:1px;background:#ffffff14;margin:4px 8px;border:none}.context-menu-item[data-v-f373cec4]{display:flex;align-items:center;width:100%;padding:8px 12px;gap:12px;background:none;border:none;border-radius:4px;text-align:left;cursor:pointer;transition:all .15s ease;color:#ffffffe6;font-size:14px;position:relative}.context-menu-item[data-v-f373cec4]:hover,.context-menu-item.with-submenu[data-v-f373cec4]:hover{background:#ffffff14}.context-menu-item.destructive[data-v-f373cec4]{color:#ff6b6b}.context-menu-item.destructive[data-v-f373cec4]:hover{background:#ff6b6b1a}.context-menu-item svg[data-v-f373cec4]{width:16px;height:16px;flex-shrink:0;opacity:.8}.submenu-arrow[data-v-f373cec4]{margin-left:auto;opacity:.5}.playlist-submenu[data-v-f373cec4]{position:absolute;top:-4px;left:calc(100% + 4px);border-radius:8px;padding:4px;min-width:200px;max-height:320px;overflow-y:auto;box-shadow:0 10px 40px #00000080;z-index:10001}.playlist-submenu-header[data-v-f373cec4]{padding:8px 12px;font-weight:600;opacity:.7;font-size:12px;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:4px}.playlist-item[data-v-f373cec4]{display:flex;align-items:center;gap:12px;padding:8px 12px;width:100%;background:none;border:none;border-radius:4px;cursor:pointer;color:#ffffffe6;font-size:14px;text-align:left;transition:all .15s ease}.playlist-item[data-v-f373cec4]:hover{background:#ffffff14}.playlist-item.new[data-v-f373cec4]{border-top:1px solid rgba(255,255,255,.08);margin-top:4px;padding-top:12px;color:var(--accent-primary)}.playlist-item svg[data-v-f373cec4]{width:16px;height:16px;flex-shrink:0}.playlist-color[data-v-f373cec4]{width:12px;height:12px;border-radius:50%;flex-shrink:0}.playlist-name[data-v-f373cec4]{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.playlist-count[data-v-f373cec4]{font-size:12px;opacity:.6;flex-shrink:0}.playlist-submenu[data-v-f373cec4]::-webkit-scrollbar{width:6px}.playlist-submenu[data-v-f373cec4]::-webkit-scrollbar-track{background:transparent}.playlist-submenu[data-v-f373cec4]::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.playlist-submenu[data-v-f373cec4]::-webkit-scrollbar-thumb:hover{background:#ffffff26}.toast-container[data-v-fd880d3b]{position:fixed;bottom:100px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;pointer-events:none}.toast[data-v-fd880d3b]{display:flex;align-items:center;gap:12px;padding:16px;background:#282828f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:8px;box-shadow:0 8px 32px #00000080;min-width:300px;max-width:500px;pointer-events:auto;cursor:pointer;transition:all .3s ease}.toast[data-v-fd880d3b]:hover{transform:translate(-4px)}.toast-icon[data-v-fd880d3b]{flex-shrink:0;width:20px;height:20px}.toast-icon svg[data-v-fd880d3b]{width:100%;height:100%}.toast-success .toast-icon[data-v-fd880d3b]{color:#10b981}.toast-error .toast-icon[data-v-fd880d3b]{color:#ef4444}.toast-warning .toast-icon[data-v-fd880d3b]{color:#f59e0b}.toast-info .toast-icon[data-v-fd880d3b]{color:#3b82f6}.toast-content[data-v-fd880d3b]{flex:1}.toast-message[data-v-fd880d3b]{color:#fff;font-size:14px;margin:0}.toast-close[data-v-fd880d3b]{flex-shrink:0;width:20px;height:20px;background:none;border:none;color:#ffffff80;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s ease}.toast-close[data-v-fd880d3b]:hover{background:#ffffff1a;color:#fff}.toast-close svg[data-v-fd880d3b]{width:14px;height:14px}.toast-enter-active[data-v-fd880d3b],.toast-leave-active[data-v-fd880d3b]{transition:all .3s ease}.toast-enter-from[data-v-fd880d3b],.toast-leave-to[data-v-fd880d3b]{transform:translate(100%);opacity:0}.toast-move[data-v-fd880d3b]{transition:transform .3s ease}@media (max-width: 640px){.toast-container[data-v-fd880d3b]{left:20px;right:20px;bottom:80px}.toast[data-v-fd880d3b]{min-width:auto;width:100%}}.nav-section[data-v-3e25e569]{margin-bottom:24px}.nav-section-title[data-v-3e25e569]{font-size:11px;font-weight:600;letter-spacing:.05em;color:#fff6;text-transform:uppercase;margin:0 0 12px;padding:0 16px}.nav-section-header[data-v-3e25e569]{display:flex;align-items:center;justify-content:space-between;padding:0 16px;margin-bottom:12px}.nav-section-header.clickable[data-v-3e25e569]{cursor:pointer;-webkit-user-select:none;user-select:none}.nav-section-header.clickable:hover h3[data-v-3e25e569]{color:#fff9}.nav-section-header h3[data-v-3e25e569]{font-size:11px;font-weight:600;letter-spacing:.05em;color:#fff6;text-transform:uppercase;margin:0;transition:color .2s}.section-actions[data-v-3e25e569]{display:flex;align-items:center;gap:8px}.add-btn[data-v-3e25e569]{width:20px;height:20px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:4px;color:#fff6;cursor:pointer;transition:all .2s}.add-btn[data-v-3e25e569]:hover{background:#ffffff0d;border-color:#fff3;color:#fffc}.add-btn svg[data-v-3e25e569]{width:14px;height:14px}.expand-icon[data-v-3e25e569]{width:16px;height:16px;color:#fff6;transition:transform .2s}.expand-icon.expanded[data-v-3e25e569]{transform:rotate(180deg)}.nav-item.primary[data-v-3e25e569]{margin-bottom:8px}.nested-items[data-v-3e25e569]{margin-top:4px;margin-bottom:16px;padding-left:16px}.nav-item.nested[data-v-3e25e569]{padding:8px 16px;font-size:13px;opacity:.8;transition:all .2s}.nav-item.nested[data-v-3e25e569]:hover{opacity:1;padding-left:20px}.nav-item.nested.active[data-v-3e25e569]{opacity:1;background:#ffffff14}.artist-avatar.mini[data-v-3e25e569]{width:24px;height:24px;border-radius:50%;overflow:hidden;background:#ffffff1a;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#fff9;flex-shrink:0}.artist-avatar.mini img[data-v-3e25e569]{width:100%;height:100%;object-fit:cover}.nav-empty-state[data-v-3e25e569]{padding:16px;text-align:center;font-size:12px;color:#ffffff4d;font-style:italic}.expand-enter-active[data-v-3e25e569],.expand-leave-active[data-v-3e25e569]{transition:all .3s ease;transform-origin:top}.expand-enter-from[data-v-3e25e569],.expand-leave-to[data-v-3e25e569]{opacity:0;transform:scaleY(.8) translateY(-10px)}.nav-item[data-v-3e25e569]{display:flex;align-items:center;gap:12px;padding:10px 16px;color:#ffffffb3;text-decoration:none;border-radius:8px;transition:all .2s;position:relative;font-size:14px;font-weight:500}.nav-item[data-v-3e25e569]:hover{color:#fff;background:#ffffff0d}.nav-item.active[data-v-3e25e569]{color:#fff;background:#ffffff1a}.nav-item svg[data-v-3e25e569]{width:20px;height:20px;flex-shrink:0}.sidebar-nav[data-v-3e25e569]{flex:1;overflow-y:auto;padding:24px 8px}.sidebar-nav[data-v-3e25e569]::-webkit-scrollbar{width:6px}.sidebar-nav[data-v-3e25e569]::-webkit-scrollbar-track{background:transparent}.sidebar-nav[data-v-3e25e569]::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:3px}.sidebar-nav[data-v-3e25e569]::-webkit-scrollbar-thumb:hover{background:#fff3}@tailwind base;@tailwind components;@tailwind utilities;:root{--bg-primary: #000;--bg-secondary: #181818;--bg-tertiary: #282828;--bg-hover: #333333;--bg-active: #404040;--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-tertiary: #a7a7a7;--border-color: #282828;--accent-primary: #1db954;--accent-hover: #1ed760;--spacing-xs: 4px;--spacing-sm: 8px;--spacing-md: 16px;--spacing-lg: 24px;--spacing-xl: 32px;--sidebar-width: 232px;--now-playing-height: 90px;--glass-bg: rgba(18, 18, 18, .6);--glass-border: rgba(255, 255, 255, .05);--blur-amount: 20px}*{margin:0;padding:0;box-sizing:border-box}html,body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-primary);color:var(--text-primary);overflow:hidden;font-size:14px;font-weight:400;line-height:1.6}#app{width:100vw;height:100vh;display:flex;flex-direction:column;background:var(--bg-primary)}.app-container{display:flex;flex:1;background:#0a0a0a;height:100vh}.sidebar{width:var(--sidebar-width);background:var(--glass-bg);backdrop-filter:blur(var(--blur-amount));-webkit-backdrop-filter:blur(var(--blur-amount));border-right:1px solid var(--glass-border);display:flex;flex-direction:column;flex-shrink:0;position:relative;height:100%;z-index:10}.sidebar-content{display:flex;flex-direction:column;height:100%;position:relative;z-index:1;background:transparent}.sidebar-header{padding:20px;display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}.app-logo{display:flex;flex-direction:column;align-items:center;gap:12px;color:#fff;flex:1}.logo-container{width:80px;height:80px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}.logo-image{width:100%;height:100%;object-fit:contain;display:block}.logo-text-container{display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.1}.logo-line{font-size:14px;font-weight:700;letter-spacing:.05em;display:block}.logo-text{font-size:22px;font-weight:600;letter-spacing:-.5px}.prefs-toggle-btn{width:32px;height:32px;padding:0;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#fff9;border-radius:6px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.prefs-toggle-btn:hover{background:#ffffff14;color:#fffc}.prefs-toggle-btn svg{width:18px;height:18px}.sidebar-nav{flex:1;padding:12px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.05) transparent}.nav-section{margin-bottom:16px;padding:0;background:transparent;border-radius:0;border:none}.nav-section:not(:last-child):after{content:"";display:block;height:1px;background:#ffffff0f;margin:16px 0}.nav-section-header{display:flex;align-items:center;gap:8px;padding:0 8px;margin-bottom:8px;height:32px;justify-content:space-between}.nav-section-header h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff6;flex:1;margin:0}.nav-items{display:flex;flex-direction:column;gap:2px}.nav-item{display:flex;align-items:center;gap:12px;padding:0 8px;height:36px;border-radius:6px;color:#ffffffb3;cursor:pointer;transition:all .15s ease;position:relative;font-size:14px;text-decoration:none}.nav-item:hover{background:#ffffff0a;color:#ffffffe6}.nav-item.active{background:#ffffff14;color:#fff}.nav-item svg{width:20px;height:20px;flex-shrink:0;opacity:.8}.nav-item:hover svg,.nav-item.active svg{opacity:1}.nav-empty-state{font-size:13px;color:#ffffff80;padding:0 12px}.artist-nav-item{font-size:13px}.artist-avatar{width:24px;height:24px;background:linear-gradient(135deg,#1db954,#4ecdc4);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#fff;overflow:hidden;flex-shrink:0}.avatar-image{width:100%;height:100%;object-fit:cover}.avatar-initial{font-size:11px;font-weight:600;color:#fff}.item-count{margin-left:auto;font-size:12px;color:#fff6}.add-btn{width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffff80;cursor:pointer;border-radius:4px;transition:all .15s ease}.add-btn:hover{background:#ffffff0d;color:#fffc}.add-btn svg{width:16px;height:16px}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-footer{padding:16px 24px;border-top:1px solid var(--glass-border);position:relative}.user-info{display:flex;align-items:center;gap:12px;cursor:pointer;padding:8px 0;border-radius:6px;transition:all .2s ease}.user-info:hover{background:#ffffff0d}.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#1db954,#4ecdc4);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}.user-avatar .avatar-initial{font-size:14px;font-weight:600;color:#fff}.user-details{flex:1;min-width:0}.user-name{font-size:14px;font-weight:500;color:var(--text-primary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-email{font-size:12px;color:var(--text-secondary);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-menu-btn{width:24px;height:24px;background:none;border:none;color:#ffffff80;border-radius:4px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;flex-shrink:0}.user-menu-btn:hover{background:#ffffff0d;color:var(--text-primary)}.user-menu-btn svg{width:16px;height:16px}.user-dropdown{position:absolute;bottom:100%;left:16px;right:16px;margin-bottom:8px;z-index:100}.main-content{flex:1;background:#000;display:flex;flex-direction:column;min-width:0;position:relative}.content-scroll{flex:1;overflow-y:auto;background:var(--bg-primary);color:#fff;padding:16px}.context-menu{background:#282828f2;-webkit-backdrop-filter:blur(var(--blur-amount));backdrop-filter:blur(var(--blur-amount));border:1px solid var(--glass-border);border-radius:6px;padding:4px 0;box-shadow:0 10px 25px #00000080;min-width:180px}.context-menu-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 16px;color:#ffffffe6;font-size:14px;text-align:left;background:none;border:none;cursor:pointer;transition:all .15s ease;text-decoration:none}.context-menu-item:hover{background:#ffffff14}.context-menu-item.danger{color:#f55}.context-menu-item.danger:hover{background:#ff55551a}.context-menu-item svg{width:16px;height:16px;opacity:.8;flex-shrink:0}.menu-divider{margin:4px 0;border:none;border-top:1px solid var(--glass-border)}.menu-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50}.auth-container{width:100vw;height:100vh;background:var(--bg-primary)}.loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.1);border-top:2px solid #1db954;border-radius:50%;animation:spin 1s linear infinite}.caption-text{font-size:12px;font-weight:400;color:#ffffff80}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px;border:3px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#ffffff26;background-clip:padding-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.fade-enter-active,.fade-leave-active{transition:opacity .3s ease}.fade-enter-from,.fade-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:all .3s ease}.slide-enter-from{transform:translateY(-10px);opacity:0}.slide-leave-to{transform:translateY(10px);opacity:0}.glassmorphic{background:var(--glass-bg);backdrop-filter:blur(var(--blur-amount));-webkit-backdrop-filter:blur(var(--blur-amount));border:1px solid var(--glass-border);border-radius:8px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem}.modal-container{background:#181818f2;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);border-radius:16px;width:100%;max-width:32rem;max-height:90vh;overflow-y:auto;box-shadow:0 20px 25px -5px #00000080}.dark-300{color:#ffffffe6}.dark-400{color:#ffffffb3}.dark-500{color:#ffffff80}.dark-600{background-color:#ffffff1a}.dark-700{background-color:#ffffff0d;border-color:#ffffff1a}.dark-800{background-color:#ffffff08}.primary-500{background-color:#1db954}.primary-600{background-color:#1aa34a}.accent-500{background-color:#4ecdc4}.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.z-50{z-index:50}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.p-4{padding:1rem}.p-6{padding:1.5rem}.space-y-6>*+*{margin-top:1.5rem}.rounded-2xl{border-radius:1rem}.w-full{width:100%}.max-w-lg{max-width:32rem}.mx-auto{margin-left:auto;margin-right:auto}.shadow-2xl{box-shadow:0 25px 50px -12px #00000040}.btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-primary:hover{background:#ffffffe6}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{display:inline-flex;align-items:center;justify-content:center;padding:8px 16px;background:#ffffff0d;color:var(--text-secondary);border:1px solid rgba(255,255,255,.08);border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;text-decoration:none}.btn-secondary:hover{background:#ffffff1a;color:var(--text-primary);border-color:#ffffff26}.input-primary{width:100%;padding:12px 16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;color:var(--text-primary);font-size:14px;transition:all .2s ease}.input-primary::placeholder{color:#ffffff80}.input-primary:focus{outline:none;border-color:#1db954;box-shadow:0 0 0 2px #1db95433}.focus-visible{outline:none;box-shadow:0 0 0 2px #1db954}
