:root{--bg-primary: #ffffff;--bg-secondary: #fafafa;--bg-tertiary: #f0f0f0;--border-color: #ddd;--border-color-light: #d0d0d0;--text-primary: #222;--text-secondary: #666;--text-tertiary: #999;--shadow-sm: rgba(0, 0, 0, .05);--shadow-md: rgba(0, 0, 0, .1);--hover-overlay: #e8e8e8;--active-overlay: #d8d8d8;--progress-bg: #d0d0d0}body.dark-mode{--bg-primary: #1a1a1a;--bg-secondary: #242424;--bg-tertiary: #2d2d2d;--border-color: #404040;--border-color-light: #383838;--text-primary: #e0e0e0;--text-secondary: #a0a0a0;--text-tertiary: #707070;--shadow-sm: rgba(0, 0, 0, .3);--shadow-md: rgba(0, 0, 0, .5);--hover-overlay: #2d2d2d;--active-overlay: #333333;--progress-bg: #2d2d2d;background-color:var(--bg-primary);color:var(--text-primary)}.theme-toggle{position:fixed;bottom:20px;right:20px;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-color);background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:100;transition:all .2s ease;box-shadow:0 2px 8px var(--shadow-sm)}.theme-toggle:hover{background-color:var(--bg-tertiary);transform:scale(1.05)}.theme-toggle:active{transform:scale(.95)}.app-error-toast{position:fixed;top:12px;left:50%;transform:translate(-50%);background:#f8d7da;color:#842029;padding:12px 24px;border-radius:6px;font-size:14px;font-weight:500;font-family:JetBrains Mono,SFMono-Regular,Consolas,monospace;z-index:10000;border:1px solid #f5c2c7;opacity:0;transition:opacity .2s ease;text-align:center;max-width:80vw}.app-error-toast--visible{opacity:1}.context-menu-button{padding:14px;background:none;border:none;color:var(--text-secondary);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}.context-menu-button:hover{background-color:var(--hover-overlay);color:var(--text-primary)}.context-menu{position:fixed;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 12px #00000026;z-index:10000;min-width:160px;transform:translate(-100%,-50%);overflow:hidden}.context-menu-item{display:flex;align-items:center;gap:8px;width:100%;box-sizing:border-box;padding:10px 14px;background:none;border:none;text-align:left;color:var(--text-primary);font-size:13px;font-weight:400;cursor:pointer;transition:background-color .15s ease;font-family:Roboto,sans-serif}.context-menu-item:hover{background-color:var(--hover-overlay)}.context-menu-item:first-child{border-top-left-radius:6px;border-top-right-radius:6px}.context-menu-item:last-child{border-bottom-left-radius:6px;border-bottom-right-radius:6px}.context-menu-item--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.context-menu-item--label{cursor:default;color:var(--text-primary);font-size:14px;border-bottom:1px solid var(--border-color)}.context-menu-item--label:hover{background-color:transparent}.now-playing{display:flex;gap:16px;align-items:center;padding:20px;border:1px solid var(--border-color-light);border-radius:8px;background:var(--bg-secondary);width:90%;min-height:120px;box-sizing:border-box;box-shadow:0 2px 4px var(--shadow-sm)}.now-playing img{width:80px;height:80px;min-width:80px;object-fit:cover;border-radius:4px;box-shadow:0 2px 8px var(--shadow-md);flex-shrink:0}.now-playing-info{flex:1 1 auto;min-width:0;max-width:100%}.now-playing-label{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}.now-playing-title{font-size:16px;font-weight:500;color:var(--text-primary);margin-bottom:4px;overflow:hidden;cursor:default;max-width:100%;position:relative}.now-playing-title-text{display:inline-block;white-space:nowrap;color:var(--text-primary);text-decoration:none}.now-playing-title-text:not(.scrolling){overflow:hidden;text-overflow:ellipsis;max-width:100%}.now-playing-title-text.scrolling{animation:scroll-text 16s ease-in-out infinite;animation-delay:2s}@keyframes scroll-text{0%,15%{transform:translate(0)}50%,65%{transform:translate(calc(-100% + var(--container-width)))}to{transform:translate(0)}}.now-playing-artist{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.now-playing-progress-container{display:flex;align-items:center;gap:8px;margin-top:10px}.now-playing-time{font-size:11px;color:var(--text-tertiary);width:35px}.now-playing-time:first-child{text-align:center}.now-playing-time:last-child{text-align:center}.now-playing-progress{flex:1;height:4px;background-color:var(--progress-bg);border-radius:2px;overflow:hidden}.now-playing-progress-bar{height:100%;background-color:var(--text-primary);transition:width .3s ease;border-radius:2px}@media(max-width:600px){.now-playing{flex-direction:column;text-align:center}.now-playing img{width:100px;height:100px}.now-playing-info,.now-playing-progress-container{width:100%}}.controls{display:flex;gap:12px;align-items:center;padding:16px;border:1px solid var(--border-color);border-radius:8px;background-color:var(--bg-secondary)}.controls button{padding:8px 12px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease}.controls button:hover{background-color:var(--bg-tertiary)}.controls button:active{background-color:var(--active-overlay)}.controls button:disabled{opacity:.4;cursor:not-allowed;pointer-events:none;filter:grayscale(1)}.controls button.loop-off{position:relative}.controls button.loop-off:after{content:"";position:absolute;top:50%;left:50%;width:60%;height:1.2px;background-color:currentColor;transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none}.controls button.loop-active{position:relative}.controls button.loop-active:after{content:"";position:absolute;bottom:2px;left:50%;transform:translate(-50%);width:3px;height:3px;border-radius:50%;background-color:var(--text-primary)}.volume-control{position:relative;display:flex;align-items:center}.volume-slider{position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:8px;padding:12px;background-color:var(--bg-primary);border:1px solid var(--border-color);border-radius:4px;box-shadow:0 2px 8px var(--shadow-md);z-index:10}.volume-slider input[type=range]{width:100px;cursor:pointer}@media(max-width:600px){.controls{flex-wrap:wrap;gap:8px;justify-content:center;margin:0 auto;max-width:300px}.controls button{padding:10px 14px}}.search-container{border:1px solid var(--border-color);border-radius:8px;padding:16px;background-color:var(--bg-secondary)}.search-container--locked:hover{cursor:not-allowed}.search-container h3{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--text-primary)}.search-container form{display:flex;gap:8px;margin-bottom:12px}.search-filters{display:flex;gap:0;margin-bottom:10px;background-color:var(--bg-secondary);border:1px solid var(--border-color);border-radius:8px}.filter-button{padding:10px 20px;border:none;border-radius:6px;color:var(--text-secondary);cursor:pointer;font-size:13px;font-weight:500;text-transform:capitalize;letter-spacing:.3px;position:relative;flex:1;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s ease;background-color:transparent}.filter-button.active{color:var(--text-primary);background-color:var(--bg-primary);border:1px solid var(--border-color)}.filter-button:not(:disabled):hover{color:var(--text-primary);background-color:var(--hover-overlay)}.filter-button:disabled{opacity:.4;cursor:not-allowed;color:var(--text-tertiary)}.filter-button:disabled:hover{color:var(--text-tertiary);background-color:transparent}.search-container select,.search-container input,.search-container form button{box-sizing:border-box;font-family:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--border-color);border-radius:4px;background-color:var(--bg-primary);color:var(--text-primary)}.search-container select{cursor:pointer;width:110px;flex-shrink:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-container input{flex:1;min-width:0}.search-container form button{cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease;flex-shrink:0}.search-container form button:hover{background-color:var(--bg-tertiary)}.search-results{max-height:400px;overflow-y:auto;margin-top:0}.search-result-item{display:flex;gap:12px;padding:8px;margin-bottom:8px;border:1px solid var(--border-color);border-radius:4px;width:100%;text-align:left;cursor:pointer;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .2s ease;align-items:center;box-sizing:border-box;max-width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;position:relative}.search-result-item:hover{background-color:var(--hover-overlay)!important}.search-result-item:active{background-color:var(--active-overlay)!important}.search-result-item:last-child{margin-bottom:0}.search-result-item.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.search-result-item img{width:60px;height:60px;object-fit:cover;border-radius:4px}.search-result-placeholder{width:60px;height:60px;background-color:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;border-radius:4px}.search-result-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.search-result-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14px;line-height:1.4;color:var(--text-primary)}.search-result-meta{font-size:13px;line-height:1.4;font-weight:400;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.search-container--locked select,.search-container--locked input,.search-container--locked form button,.search-container--locked .filter-button{opacity:.5;pointer-events:none}@media(max-width:1200px){.search-results{max-height:240px}}@media(max-width:600px){.search-container{padding:12px}.search-results{max-height:180px}.filter-button{padding:6px 10px;font-size:12px}.search-filters{padding:3px}.filter-button{min-width:70px;padding:6px 12px;font-size:12px}.filter-button span{display:none}}.queue-container{border:1px solid var(--border-color);border-radius:8px;padding:16px;background-color:var(--bg-secondary)}.queue-container h3{margin:0 0 12px;font-size:14px;font-weight:500;color:var(--text-primary)}.queue-tabs{display:flex;gap:8px;margin-bottom:12px;border-bottom:1px solid var(--border-color)}.queue-tab{flex:1;padding:8px 12px;border:none;background:none;color:var(--text-secondary);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;border-bottom:2px solid transparent;margin-bottom:-1px;text-align:center}.queue-tab:hover{color:var(--text-primary)}.queue-tab.active{color:var(--text-primary);border-bottom-color:var(--text-primary)}.queue-list{max-height:300px;overflow-y:auto;overflow-x:hidden}.queue-item{display:flex;gap:8px;padding:8px;border:1px solid var(--border-color);border-radius:4px;width:100%;text-align:left;cursor:grab;background-color:var(--bg-primary);color:var(--text-primary);transition:background-color .2s ease;align-items:center;box-sizing:border-box;max-width:100%;font-family:inherit;font-size:inherit;font-weight:inherit;position:relative}.queue-item:hover{background-color:var(--hover-overlay)!important}.queue-item:active{background-color:var(--active-overlay)!important;cursor:grabbing}.queue-item img{width:60px;height:60px;object-fit:cover;border-radius:4px}.queue-item-placeholder{width:60px;height:60px;background-color:var(--bg-tertiary);display:flex;align-items:center;justify-content:center;border-radius:4px}.queue-item-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.queue-item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14px;line-height:1.4;color:var(--text-primary)}.queue-item-meta{font-size:13px;line-height:1.4;font-weight:400;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-item-index{color:var(--text-tertiary);min-width:20px;font-size:13px;display:flex;align-items:center;justify-content:center;font-weight:400;margin-right:4px}.queue-item.dragging{opacity:.5;cursor:grabbing}.queue-item.drag-over{border-top:2px solid var(--text-primary);margin-top:2px}@media(max-width:600px){.queue-container{padding:12px}}.audio-player{max-width:1400px;margin:30px auto 0;padding:20px;font-family:Roboto,sans-serif}.main-content{display:flex;gap:30px;margin-bottom:16px}.center-section{flex:1;min-width:400px;max-width:800px;display:flex;flex-direction:column;align-items:center;gap:20px}.right-section{flex:1;min-width:400px;max-width:600px;display:flex;flex-direction:column;gap:20px}@media(max-width:1200px){.main-content{flex-direction:column;align-items:center}.center-section{width:100%;min-width:300px;max-width:600px}.right-section{width:100%;min-width:300px;max-width:650px}}@media(max-width:500px){.audio-player{padding:8px}}@media(max-width:400px){.audio-player{padding:4px}}