:root,:root[data-theme=golden]{--color-bg: #080807;--color-surface: #0f0f0e;--color-elevated: #181816;--color-divider: #2a2a28;--color-text: #f0ebe0;--color-text-muted: #6a6560;--color-accent: #c8973a;--color-accent-dim: #8a6520}:root[data-theme=midnight]{--color-bg: #06080f;--color-surface: #0c0e1a;--color-elevated: #141826;--color-divider: #1e2236;--color-text: #e8eaf6;--color-text-muted: #5a6080;--color-accent: #7c9fd4;--color-accent-dim: #4a6a9a}:root[data-theme=ocean]{--color-bg: #060c10;--color-surface: #0a1218;--color-elevated: #101e24;--color-divider: #182830;--color-text: #e0f0f4;--color-text-muted: #506470;--color-accent: #4ab0c4;--color-accent-dim: #2e8a9e}:root[data-theme=forest]{--color-bg: #060a07;--color-surface: #0a1210;--color-elevated: #101c14;--color-divider: #1a2a1e;--color-text: #e2f0e4;--color-text-muted: #526858;--color-accent: #6ab87a;--color-accent-dim: #4a9a5a}:root[data-theme=sunset]{--color-bg: #0e0808;--color-surface: #180e0c;--color-elevated: #201412;--color-divider: #301c18;--color-text: #f4e8e0;--color-text-muted: #705850;--color-accent: #d4785a;--color-accent-dim: #a85a40}:root[data-theme=lavender]{--color-bg: #09080e;--color-surface: #100e18;--color-elevated: #181422;--color-divider: #221e32;--color-text: #eeeaf8;--color-text-muted: #605868;--color-accent: #9d88c8;--color-accent-dim: #7a68a8}:root{--color-bg: #080807;--color-surface: #0f0f0e;--color-elevated: #181816;--color-divider: #2a2a28;--color-text: #f0ebe0;--color-text-muted: #6a6560;--color-accent: #c8973a;--color-accent-dim: #8a6520;--font-mono: "JetBrains Mono", "Courier New", monospace;--font-body: "Manrope", system-ui, sans-serif;--font-display: "Cormorant Garamond", Georgia, serif;--radius-xs: 2px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-xl: 12px;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--space-6: 48px;--titlebar-height: 38px;--sidebar-width: 200px;--playback-bar-height: 72px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;user-select:none}button{background:none;border:none;cursor:pointer;color:inherit;font-family:inherit;font-size:inherit;padding:0}input,textarea{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;outline:none}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--color-divider);border-radius:var(--radius-xs)}::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.app-root{display:flex;flex-direction:column;height:100vh;background:var(--color-bg);overflow:hidden}.app-body{display:flex;flex:1;overflow:hidden;margin-top:var(--titlebar-height);margin-bottom:var(--playback-bar-height)}.app-main{flex:1;overflow:hidden;display:flex;flex-direction:column}.titlebar{position:fixed;top:0;left:0;right:0;height:var(--titlebar-height);background:#0f0f0eb3;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-bottom:1px solid rgba(42,42,40,.6);display:flex;align-items:center;z-index:1000;-webkit-app-region:drag;app-region:drag;border-radius:var(--radius-lg) var(--radius-lg) 0 0}.titlebar-title{flex:1;padding-left:var(--space-4);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--color-accent)}.titlebar-controls{display:flex;align-items:center;gap:0;-webkit-app-region:no-drag;app-region:no-drag}.titlebar-btn{width:46px;height:var(--titlebar-height);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-text-muted);transition:background .15s,color .15s;-webkit-app-region:no-drag}.titlebar-btn:hover{background:var(--color-elevated);color:var(--color-text)}.titlebar-btn.close:hover{background:#c0392b;color:#fff}.sidebar{width:var(--sidebar-width);min-width:var(--sidebar-width);background:#0f0f0e99;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-right:1px solid rgba(42,42,40,.5);display:flex;flex-direction:column;padding:var(--space-4) 0;overflow-y:auto;overflow-x:hidden}.sidebar-section-label{font-family:var(--font-mono);font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);padding:0 var(--space-3);margin-bottom:var(--space-2);opacity:.6}.nav-item{display:flex;align-items:center;gap:9px;margin:1px 8px;padding:0 10px;height:34px;cursor:pointer;border-radius:var(--radius-md);transition:background .15s,color .15s;color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;border:none;width:calc(100% - 16px);box-sizing:border-box}.nav-item:hover{background:var(--color-elevated);color:var(--color-text)}.nav-item.active{color:var(--color-accent);background:#c8973a1a}.nav-item-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.nav-item-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing{display:flex;height:100%;overflow:hidden}.now-playing-left{width:240px;min-width:240px;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);border-right:1px solid var(--color-divider);overflow-y:auto}.album-art-container{width:100%;aspect-ratio:1;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-elevated);flex-shrink:0}.album-art-img{width:100%;height:100%;object-fit:cover;display:block}.album-art-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--color-divider)}.track-info-panel{display:flex;flex-direction:column;gap:var(--space-1)}.track-title{font-family:var(--font-display);font-size:22px;font-weight:400;color:var(--color-text);line-height:1.25;word-break:break-word}.track-artist{font-family:var(--font-mono);font-size:12px;font-weight:400;color:var(--color-accent);letter-spacing:.04em}.track-album{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--color-text-muted);letter-spacing:.03em;margin-top:2px}.now-playing-right{position:relative;flex:1;overflow:hidden;display:flex;flex-direction:column}.empty-state{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-3);color:var(--color-text-muted)}.empty-state-icon{font-size:48px;opacity:.3}.empty-state-text{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.5}.lyrics-source-badge{position:absolute;bottom:var(--space-3);right:var(--space-3);font-family:var(--font-mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-accent);opacity:.45;pointer-events:none;z-index:2}.lyrics-container{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--space-6) var(--space-4);display:flex;flex-direction:column;gap:0;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 88%,transparent 100%);scroll-behavior:smooth}.lyrics-inner{display:flex;flex-direction:column;gap:2px;padding-bottom:40%;padding-top:40%}.lyric-line{padding:6px 8px;position:relative;cursor:pointer;font-family:var(--font-body);transition:color .25s}.lyric-line:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#c8973a99;transform:scaleY(0);transform-origin:top center;opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s}font-size: 14px; font-weight: 400; color: var(--color-text); line-height: 1.5; word-break: break-word; } .lyric-line:hover{background:#ffffff0a}.lyric-line.past{color:var(--color-text)}.lyric-line.active{color:var(--color-accent)}.lyric-line.active:before{transform:scaleY(1);opacity:1}.lyric-line.blank{height:24px;opacity:.3}.lyric-subtext{display:block;font-family:var(--font-mono);font-size:.65em;color:var(--color-text-muted);letter-spacing:.02em;margin-top:3px;font-weight:400;opacity:.85}.lyric-line.active .lyric-subtext{color:var(--color-accent-dim);opacity:1}.lyrics-status-label{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);letter-spacing:.08em;text-transform:uppercase;opacity:.5}.lyrics-no-lyrics{display:flex;align-items:center;justify-content:center;flex:1;color:var(--color-text-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.5;padding-top:25%}.fs-root{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;overflow:hidden;background:#0d0d0b}.fs-bg{position:absolute;inset:-60px;z-index:0;background-size:cover;background-position:center;filter:blur(80px) brightness(.18) saturate(1.6);transform:scale(1.15)}.fs-overlay{position:absolute;inset:0;z-index:1;background:#00000059}.fs-blobs{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}.fs-blob-1{position:absolute;width:55vw;height:55vw;border-radius:50%;background:radial-gradient(circle,rgba(200,151,58,.13) 0%,transparent 70%);top:-15%;left:-10%;filter:blur(40px)}.fs-blob-2{position:absolute;width:40vw;height:40vw;border-radius:50%;background:radial-gradient(circle,rgba(58,90,138,.1) 0%,transparent 70%);bottom:5%;right:5%;filter:blur(50px)}.fs-blob-3{position:absolute;width:28vw;height:28vw;border-radius:50%;background:radial-gradient(circle,rgba(180,100,40,.07) 0%,transparent 70%);top:8%;right:12%;filter:blur(35px)}.fs-body{position:relative;z-index:3;display:flex;flex-direction:column;flex:1;min-height:0;align-items:stretch}.fs-topbar{position:relative;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 20px;flex-shrink:0;width:100%;box-sizing:border-box}.fs-topbar-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff0f;border:.5px solid rgba(255,255,255,.12);cursor:pointer;transition:background .15s;justify-self:start}.fs-topbar-close:hover{background:#ffffff1f}.fs-topbar-center{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;justify-self:center}.fs-topbar-title{font-size:12px;font-weight:500;color:#ffffffbf;letter-spacing:.02em;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-topbar-artist{font-size:10px;color:#c8973aa6;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-topbar-actions{display:flex;align-items:center;gap:8px;justify-self:end}.fs-topbar-icon{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:#ffffffb3;opacity:.3;cursor:pointer;transition:opacity .15s}.fs-topbar-icon:hover{opacity:.7}.fs-topbar-icon svg{width:16px;height:16px}.fs-panels{display:flex;flex:1;min-height:0;align-items:stretch;width:min(1200px,100%);margin:0 auto;padding:0 20px 24px;box-sizing:border-box;overflow:hidden}.fs-left{width:clamp(280px,35vw,380px);flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;padding:32px 40px;box-sizing:border-box}.fs-art{width:min(300px,85%);aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--color-elevated);box-shadow:0 28px 72px #000000a6;flex-shrink:0}.fs-art img{width:100%;height:100%;object-fit:cover;display:block}.fs-art-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;color:var(--color-divider)}.fs-track-info{display:flex;flex-direction:column;gap:4px;width:min(420px,80%)}.fs-title{font-family:var(--font-body);font-size:18px;font-weight:600;color:var(--color-text);line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.fs-artist{font-family:var(--font-mono);font-size:12px;color:var(--color-accent);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fs-waveform{display:flex;align-items:center;gap:2px;height:28px;cursor:pointer;width:min(420px,80%)}.fs-bar{flex:1;border-radius:1px;background:#f0ebe026;min-width:2px;transform-origin:center}.fs-bar.played{background:var(--color-accent)}[data-playing=true] .fs-bar.played{animation:waveform-wave 1.4s ease-in-out infinite;animation-delay:calc(var(--bar-index, 0) * -58.333ms)}.fs-time{display:flex;gap:6px;font-family:var(--font-mono);font-size:10px;color:#f0ebe066;letter-spacing:.03em}.fs-time-sep{opacity:.5}.fs-controls{display:flex;align-items:center;gap:14px}.fs-ctrl{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#f0ebe080;background:transparent;border:none;border-radius:var(--radius-md);cursor:pointer;transition:color .15s,background .15s}.fs-ctrl:hover{color:var(--color-accent);background:#c8973a1a}.fs-ctrl-play{width:48px;height:48px;font-size:22px;color:var(--color-text);background:#f0ebe01a;border-radius:50%}.fs-ctrl-play:hover{color:var(--color-accent);background:#c8973a2e}.fs-lyrics-panel{position:relative;display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}.fs-lyrics-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 82%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 12%,black 82%,transparent 100%)}.fs-lyrics-scroll::-webkit-scrollbar{display:none}.fs-lyrics-inner{display:flex;flex-direction:column;padding-top:28vh;padding-bottom:45vh;padding-left:48px;padding-right:52px;max-width:680px}.fs-lyric-wrapper{padding:5px 8px;position:relative;cursor:pointer;transform-origin:left center;transition:transform .45s cubic-bezier(.4,0,.2,1),opacity .45s ease,filter .45s ease}.fs-lyric-wrapper.near{transform:scaleX(1.015)}.fs-lyric-wrapper.active{transform:scaleX(1.03)}.fs-lyric-wrapper:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:#c8973a99;transform:scaleY(0);transform-origin:top center;opacity:0;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s}.fs-lyric-wrapper.active:before{transform:scaleY(1);opacity:1}.fs-lyric-wrapper.blank{height:22px;opacity:.25!important}.fs-lyric{color:#ffffff2e;word-break:break-word;text-align:left;background:transparent;font-variation-settings:"wght" 300;transition:color .4s ease,font-variation-settings .4s ease,letter-spacing .4s ease,opacity .4s ease,filter .4s ease}.fs-lyric.near{font-variation-settings:"wght" 380;color:#ffffff59}.fs-lyric.active{font-variation-settings:"wght" 620;color:#fffffff2;letter-spacing:-.01em}.fs-lyric.past{font-variation-settings:"wght" 300;color:#ffffff2e}.lyric-word{display:inline;color:#ffffff40;font-variation-settings:"wght" 400;transition:color .15s ease,font-variation-settings .15s ease}.lyric-word.sung{color:#fffffff5;font-variation-settings:"wght" 620}.playback-bar{position:fixed;bottom:0;left:0;right:0;height:var(--playback-bar-height);background:#0f0f0eb3;backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);border-top:1px solid rgba(42,42,40,.6);display:flex;align-items:center;padding:0 var(--space-3);gap:var(--space-3);z-index:900;border-radius:0 0 var(--radius-lg) var(--radius-lg)}.playback-artwork{width:48px;height:48px;border-radius:var(--radius-md);overflow:hidden;background:var(--color-elevated);flex-shrink:0}.playback-artwork img{width:100%;height:100%;object-fit:cover;display:block}.playback-artwork-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--color-divider)}.playback-track-info{width:160px;min-width:120px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;overflow:hidden}.playback-title{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playback-artist{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--color-text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playback-spacer{flex:1}.playback-progress-section{display:flex;flex-direction:column;align-items:center;gap:4px;width:380px;flex-shrink:0}@keyframes waveform-wave{0%,to{transform:scaleY(1.18)}50%{transform:scaleY(.82)}}.waveform{display:flex;align-items:center;gap:2px;height:32px;cursor:pointer;padding:4px 0}.waveform-bar{width:3px;border-radius:var(--radius-xs);background:var(--color-divider);transition:background .1s;flex-shrink:0;transform-origin:center}.waveform-bar.played{background:var(--color-accent)}[data-playing=true] .waveform-bar.played{animation:waveform-wave 1.4s ease-in-out infinite;animation-delay:calc(var(--bar-index, 0) * -58.333ms)}.waveform-bar:hover{opacity:.8}.playback-time{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted)}.playback-time-sep{opacity:.4}.playback-controls{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}.control-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--color-text-muted);border-radius:var(--radius-md);transition:color .15s,background .15s}.control-btn:hover{color:var(--color-accent);background:#c8973a1a}.control-btn.play-pause{width:36px;height:36px;font-size:18px;color:var(--color-text);background:var(--color-elevated);border-radius:var(--radius-lg)}.control-btn.play-pause:hover{color:var(--color-accent);background:#c8973a26}.fullscreen-toggle-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--color-text-muted);border-radius:var(--radius-sm);transition:color .15s,background .15s;margin-left:var(--space-2)}.fullscreen-toggle-btn:hover{color:var(--color-accent);background:#c8973a1a}.settings-view{flex:1;overflow-y:auto;padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-4);max-width:640px}.settings-header{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--color-text-muted);padding-bottom:var(--space-3);border-bottom:1px solid var(--color-divider)}.settings-section{display:flex;flex-direction:column;gap:var(--space-3)}.settings-section-title{font-family:var(--font-mono);font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--color-accent-dim)}.settings-field{display:flex;flex-direction:column;gap:6px}.settings-label{font-family:var(--font-mono);font-size:11px;font-weight:400;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}.settings-input{width:100%;background:var(--color-elevated);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:12px;color:var(--color-text);transition:border-color .15s;user-select:text}.settings-input:focus{border-color:var(--color-accent);outline:none}.settings-input::placeholder{color:var(--color-text-muted);opacity:.5}.settings-divider{height:1px;background:var(--color-divider);margin:var(--space-1) 0}.settings-slider-row{display:flex;align-items:center;gap:var(--space-3)}.settings-slider{flex:1;-webkit-appearance:none;height:4px;border-radius:var(--radius-xs);background:var(--color-elevated);outline:none;cursor:pointer}.settings-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;transition:background .15s}.settings-slider::-webkit-slider-thumb:hover{background:#daa84a}.settings-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--color-accent);cursor:pointer;border:none}.settings-slider-value{font-family:var(--font-mono);font-size:11px;color:var(--color-accent);min-width:48px;text-align:right}.settings-btn{padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s,border-color .15s;border:1px solid transparent}.settings-btn.primary{background:var(--color-accent);color:#080807;border-color:var(--color-accent)}.settings-btn.primary:hover{background:#daa84a;border-color:#daa84a}.settings-btn.secondary{background:transparent;color:var(--color-text-muted);border-color:var(--color-divider)}.settings-btn.secondary:hover{border-color:var(--color-text-muted);color:var(--color-text)}.settings-btn.danger{background:transparent;color:#c0392b;border-color:#c0392b40}.settings-btn.danger:hover{background:#c0392b20;border-color:#c0392b}.settings-btn-row{display:flex;gap:var(--space-2);flex-wrap:wrap}.settings-note{font-family:var(--font-body);font-size:12px;color:var(--color-text-muted);line-height:1.6;padding:var(--space-2) var(--space-3);background:var(--color-elevated);border-radius:var(--radius-md);border-left:2px solid var(--color-divider)}.settings-note code{font-family:var(--font-mono);font-size:11px;color:var(--color-accent);background:#c8973a1a;padding:1px 4px;border-radius:var(--radius-xs)}.settings-status{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}.settings-status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.settings-status-dot.connected{background:#2ecc71;box-shadow:0 0 6px #2ecc7199}.settings-status-dot.disconnected{background:var(--color-text-muted)}.settings-status-dot.error{background:#e74c3c;box-shadow:0 0 6px #e74c3c99}.settings-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}.settings-toggle-label{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;inset:0;background:var(--color-divider);border-radius:10px;cursor:pointer;transition:background .2s}.toggle-track:after{content:"";position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:var(--color-text-muted);transition:transform .2s,background .2s}.toggle-switch input:checked+.toggle-track{background:#c8973a4d}.toggle-switch input:checked+.toggle-track:after{transform:translate(16px);background:var(--color-accent)}.callback-paste-area{margin-top:var(--space-3);padding:var(--space-3);background:var(--color-elevated);border:1px solid var(--color-divider);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-2)}.callback-paste-label{font-family:var(--font-mono);font-size:11px;color:var(--color-text-muted);letter-spacing:.06em;text-transform:uppercase}.callback-paste-input{width:100%;background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);font-family:var(--font-mono);font-size:11px;color:var(--color-text);transition:border-color .15s;user-select:text}.callback-paste-input:focus{border-color:var(--color-accent);outline:none}.placeholder-view{flex:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--space-3);color:var(--color-text-muted)}.placeholder-view-icon{font-size:40px;opacity:.2}.placeholder-view-text{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.4}.auth-error-banner{margin:var(--space-3);padding:var(--space-2) var(--space-3);background:#e74c3c1f;border:1px solid rgba(231,76,60,.3);border-radius:var(--radius-md);font-family:var(--font-mono);font-size:11px;color:#e74c3c;letter-spacing:.04em}.playlists-view{flex:1;overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2)}.playlist-item{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2);border-radius:var(--radius-md);cursor:pointer;transition:background .12s}.playlist-item:hover{background:var(--color-elevated)}.playlist-art{width:40px;height:40px;border-radius:var(--radius-sm);background:var(--color-elevated);overflow:hidden;flex-shrink:0}.playlist-art img{width:100%;height:100%;object-fit:cover}.playlist-info{flex:1;overflow:hidden}.playlist-name{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.playlist-tracks{font-family:var(--font-mono);font-size:10px;color:var(--color-text-muted);margin-top:2px}.queue-view{flex:1;overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-1)}.queue-header{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);padding:var(--space-2) var(--space-2);opacity:.6}.theme-picker{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:4px 0}.theme-chip{width:22px;height:22px;border-radius:50%;background:var(--chip-color, #888);border:2px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;flex-shrink:0}.theme-chip:hover{transform:scale(1.15)}.theme-chip.active{border-color:var(--color-text);transform:scale(1.2);box-shadow:0 0 0 1px var(--chip-color)}.font-picker{display:flex;gap:6px;flex-wrap:wrap}.font-chip{padding:5px 10px;border-radius:var(--radius-md);border:1px solid var(--color-divider);background:transparent;color:var(--color-text-muted);font-size:12px;cursor:pointer;transition:border-color .15s,color .15s,background .15s;white-space:nowrap}.font-chip:hover{border-color:var(--color-text-muted);color:var(--color-text)}.font-chip.active{border-color:var(--color-accent);color:var(--color-accent);background:#c8973a14}