:root{--bg-base:#0a0a0f;--bg-surface:#12121a;--bg-glass:#ffffff0a;--bg-glass-hover:#ffffff14;--border:#ffffff14;--border-hover:#fff3;--accent:#7c3aed;--accent-light:#9d5ff0;--accent-glow:#7c3aed66;--accent-dim:#7c3aed26;--text-primary:#f0f0f5;--text-secondary:#8b8ba8;--text-muted:#4e4e6a;--danger:#ef4444;--gold:#f59e0b;--gold-glow:#f59e0b4d;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--topbar-h:68px;--sidebar-w:400px;--sidebar-collapsed-w:0px;--support-panel-w:520px;--player-max-w:900px;--player-meta-reserve-h:78px;--transition:.2s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg-base);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-family:Inter,system-ui,sans-serif}::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-hover);border-radius:99px}.app-shell{grid-template-rows:var(--topbar-h) 1fr;grid-template-columns:1fr var(--sidebar-w);height:100%;transition:grid-template-columns .28s cubic-bezier(.16,1,.3,1);display:grid;position:relative}.app-shell.playlist-collapsed{grid-template-columns:1fr var(--sidebar-collapsed-w)}.topbar{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);z-index:100;background:#0a0a0fe6;grid-column:1/-1;align-items:center;gap:10px;padding:0 16px;display:flex;position:relative}.main-content{background:var(--bg-base);justify-content:center;align-items:center;padding:20px;display:flex;overflow:hidden}.sidebar{background:var(--bg-surface);border-left:1px solid var(--border);flex-direction:column;display:flex;overflow:hidden}.app-sidebar{min-width:0;transition:border-color .28s cubic-bezier(.16,1,.3,1);position:relative;overflow:visible}.app-sidebar.collapsed{border-left-color:#0000}.playlist-sidebar{min-height:0;transition:background var(--transition), border-color var(--transition);flex:1;position:relative;overflow:visible}.playlist-sidebar.collapsed{background:0 0;border-left-color:#0000;overflow:visible}.playlist-collapse-tab{border:1px solid var(--border);width:28px;height:42px;color:var(--text-secondary);cursor:pointer;z-index:5;transition:color var(--transition), background var(--transition), border-color var(--transition), left .28s cubic-bezier(.16, 1, .3, 1), box-shadow var(--transition);background:#12121af5;border-right:none;border-radius:12px 0 0 12px;justify-content:center;align-items:center;padding:0;display:flex;position:absolute;top:14px;left:-28px;transform:none;box-shadow:0 14px 28px #0000004d}.playlist-collapse-tab:hover{color:var(--text-primary);border-color:var(--border-hover);background:#181824fa}.playlist-collapse-tab.collapsed{left:-24px}.playlist-collapse-tab svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:12px;height:12px}.topbar-side{z-index:1;align-items:center;min-width:0;display:flex;position:relative}.topbar-left{flex:1;gap:12px;padding-right:236px}.topbar-right{justify-content:flex-end;gap:8px;min-width:auto;margin-left:auto}.topbar-center{transform:translate(calc(-50% + var(--topbar-controls-offset,0px)), -50%);z-index:2;align-items:center;gap:14px;transition:transform .32s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;top:50%;left:50%}.playback-controls{align-items:center;gap:10px;display:flex}.topbar-load-area{flex:1;align-items:center;min-width:0;display:flex}.url-form{border-radius:var(--radius-md);width:156px;max-width:min(680px,100%);transition:width .32s cubic-bezier(.16, 1, .3, 1), background var(--transition), border-color var(--transition), box-shadow var(--transition);background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:4px;display:flex;overflow:hidden}.url-form.open{border-color:var(--border);background:#12121aeb;width:min(680px,100%);box-shadow:0 12px 28px #0000003d}.url-form.success{border-color:#22c55e59}.url-input-wrap{opacity:0;pointer-events:none;flex:auto;min-width:0;max-width:0;transition:max-width .32s cubic-bezier(.16,1,.3,1),opacity .18s,transform .32s cubic-bezier(.16,1,.3,1);overflow:hidden;transform:translate(-10px)}.url-form.open .url-input-wrap{opacity:1;pointer-events:auto;max-width:1000px;transform:translate(0)}.url-input{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);width:100%;height:40px;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:0 14px;font-family:Inter,sans-serif;font-size:13px}.url-input::placeholder{color:var(--text-muted)}.url-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.url-close-btn{opacity:0;pointer-events:none;border-color:#0000;width:0;min-width:0;padding:0;overflow:hidden;transform:scale(.88)}.url-form.open .url-close-btn{opacity:1;pointer-events:auto;border-color:var(--border);width:40px;min-width:40px;transform:scale(1)}.url-submit-btn.success{background:#16a34a;animation:.65s url-success-pop;box-shadow:0 0 24px #22c55e59}.url-error{color:var(--danger);white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}@keyframes url-success-pop{0%{transform:scale(1)}35%{transform:scale(1.04)}to{transform:scale(1)}}.btn{border-radius:var(--radius-sm);cursor:pointer;height:40px;transition:all var(--transition);white-space:nowrap;border:none;justify-content:center;align-items:center;gap:6px;padding:0 16px;font-family:Inter,sans-serif;font-size:13px;font-weight:600;display:flex}.btn:active{transform:scale(.96)}.btn:disabled{cursor:not-allowed;opacity:.58;box-shadow:none;transform:none}.btn-primary{background:var(--accent);color:#fff}.btn-primary:hover{background:var(--accent-light);box-shadow:0 0 20px var(--accent-glow)}.btn-icon{background:var(--bg-glass);border:1px solid var(--border);width:40px;color:var(--text-primary);border-radius:var(--radius-sm);padding:0;font-size:16px;line-height:0}.btn-icon:hover{background:var(--bg-glass-hover);border-color:var(--border-hover)}.btn-icon.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 12px var(--accent-glow)}.shuffle-btn{background:var(--bg-glass);border-color:var(--border);color:var(--text-secondary);box-shadow:0 0 14px #0000001f}.shuffle-btn:hover{background:var(--bg-glass-hover);border-color:var(--border-hover);color:var(--text-primary);box-shadow:0 0 16px #00000029}.shuffle-btn.active{color:#ffe3a8;background:#f59e0b38;border-color:#f59e0b94;box-shadow:0 0 18px #f59e0b3d}.shuffle-btn.active:hover{color:#ffe8b8;background:#f59e0b42;border-color:#f59e0b9e;box-shadow:0 0 20px #f59e0b47}.shuffle-glyph{font-size:16px;line-height:1;display:block;transform:translateY(-.5px)}.btn-play{background:var(--accent);color:#fff;width:44px;height:44px;box-shadow:0 0 18px var(--accent-glow);border:none;border-radius:50%;font-size:18px;line-height:0}.btn-play:hover{background:var(--accent-light);box-shadow:0 0 28px var(--accent-glow)}.transport-icon{fill:currentColor;flex-shrink:0;width:18px;height:18px;display:block}.transport-icon-play{width:19px;height:19px;transform:translate(1px)}.transport-icon-preview{width:18px;height:18px}.collection-toggle-btn{border:1px solid var(--border);border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);background:0 0;justify-content:center;align-items:center;font-size:18px;line-height:0;display:flex}.collection-toggle-btn:hover{border-color:var(--border-hover)}.collection-toggle-btn.nomination{font-size:18px}.collection-toggle-btn.nomination:hover{border-color:var(--accent);color:var(--accent-light)}.collection-toggle-btn.nomination.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 14px var(--accent-glow)}.collection-toggle-btn.preview:hover{border-color:var(--accent);color:var(--accent-light)}.collection-toggle-btn.preview.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 14px var(--accent-glow)}.collection-toggle-btn.support:hover{border-color:var(--gold);color:var(--gold)}.collection-toggle-btn.support.active{background:var(--gold-glow);border-color:var(--gold);color:var(--gold);box-shadow:0 0 14px var(--gold-glow)}.collection-icon{fill:currentColor;flex-shrink:0;width:18px;height:18px;display:block}.controls-divider{background:var(--border);flex-shrink:0;width:1px;height:28px}.mobile-topbar-floating-controls{opacity:0;pointer-events:none;z-index:4;transition:transform .32s cubic-bezier(.16,1,.3,1),opacity .18s;position:absolute;bottom:calc(100% + 12px);left:50%;transform:translate(-50%,16px)}.mobile-topbar-floating-controls.visible{opacity:1;pointer-events:auto;transform:translate(-50%)}.mobile-topbar-shell{perspective:1200px;width:100%;height:100%;min-height:88px;position:relative}.mobile-topbar-stage{width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,1,.3,1);position:relative}.mobile-topbar-shell.open .mobile-topbar-stage{transform:rotateX(180deg)}.mobile-topbar-face{backface-visibility:hidden;border-radius:20px;width:100%;transition:opacity .18s,visibility .18s;position:absolute;inset:0}.mobile-topbar-front{border:1px solid var(--border);background:#12121af5;grid-template-rows:auto 1fr;gap:6px;padding:8px 12px 10px;display:grid;position:relative;box-shadow:0 18px 34px #00000047}.mobile-now-playing-inline{color:#f0f0f5e0;justify-content:center;align-items:center;gap:8px;min-width:0;font-size:11px;line-height:1.35;display:flex;overflow:hidden}.mobile-now-playing-dot{background:var(--accent);width:7px;height:7px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%;flex:none;animation:1.6s infinite pulse}.mobile-now-playing-text{white-space:nowrap;text-overflow:ellipsis;text-align:center;min-width:0;overflow:hidden}.mobile-topbar-controls-row{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:14px;min-height:46px;display:grid}.mobile-topbar-slot{z-index:1;align-items:center;min-width:0;display:flex;position:relative;top:auto;transform:none}.mobile-topbar-slot-left{justify-content:flex-start;justify-self:start}.mobile-topbar-slot-right{justify-content:flex-end;justify-self:end}.mobile-topbar-back{border:1px solid var(--border);pointer-events:none;background:#12121af5;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:8px;display:grid;transform:rotateX(180deg);box-shadow:0 18px 34px #00000047}.mobile-topbar-shell.open .mobile-topbar-back{pointer-events:auto}.mobile-topbar-shell.open .mobile-topbar-front{pointer-events:none;opacity:0;visibility:hidden}.mobile-playback-inline-wrap{pointer-events:none;justify-self:center;min-width:0;position:relative;top:auto;left:auto;transform:none}.mobile-playback-inline{pointer-events:auto;justify-content:center;gap:8px;position:relative}.mobile-playback-inline .btn-icon{width:42px;height:42px}.mobile-playback-inline .btn-play{width:46px;height:46px}.mobile-playback-inline .transport-icon{width:17px;height:17px}.mobile-playback-inline .transport-icon-play{width:18px;height:18px}.mobile-playback-floating{box-shadow:none;background:0 0;border:none;gap:10px;padding:0}.mobile-add-btn{background:var(--accent);color:#fff;letter-spacing:.01em;cursor:pointer;width:clamp(58px,18vw,74px);min-width:58px;height:42px;transition:background var(--transition), box-shadow var(--transition), transform var(--transition);border:none;border-radius:999px;flex-shrink:1;padding:0 clamp(10px,3vw,14px);font-size:12px;font-weight:700}.mobile-add-btn:hover{background:var(--accent-light);box-shadow:0 0 20px var(--accent-glow)}.mobile-add-btn,.mobile-current-support-btn{z-index:1;position:relative}.mobile-current-support-btn{opacity:.88;flex-shrink:1;width:clamp(38px,12vw,42px);height:clamp(38px,12vw,42px);font-size:19px}.mobile-current-support-btn.supported{color:var(--gold);opacity:1}.mobile-current-support-btn.nominated{color:var(--accent-light);opacity:1}.mobile-current-support-btn:hover:not(:disabled){color:var(--gold)}.mobile-current-support-btn.locked:hover,.mobile-current-support-btn.locked:focus-visible{color:#c89cff}.mobile-corner-actions{top:calc(10px + env(safe-area-inset-top));z-index:140;pointer-events:auto;align-items:center;gap:10px;display:flex;position:fixed;right:10px}.mobile-corner-toggle{border:1px solid var(--border);border-radius:var(--radius-sm);width:40px;height:40px;color:var(--text-secondary);cursor:pointer;transition:color var(--transition), transform var(--transition), opacity var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);opacity:1;background:#12121aeb;justify-content:center;align-items:center;padding:0;line-height:0;display:flex;box-shadow:0 10px 24px #00000038}.mobile-corner-toggle:hover{border-color:var(--border-hover);background:#181824f5;transform:translateY(-1px)}.mobile-corner-toggle.support:hover,.mobile-corner-toggle.support.active{color:var(--gold);background:#f59e0b1f;border-color:#f59e0b73;box-shadow:0 0 14px #f59e0b2e}.mobile-corner-toggle.nomination{font-size:20px;line-height:1}.mobile-corner-toggle.nomination:hover,.mobile-corner-toggle.nomination.active,.mobile-corner-toggle.preview:hover,.mobile-corner-toggle.preview.active{color:var(--accent-light);background:#7c3aed1f;border-color:#7c3aed73;box-shadow:0 0 14px #7c3aed2e}.mobile-corner-toggle .collection-icon{width:18px;height:18px}.mobile-topbar-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-glass);width:100%;min-width:0;height:100%;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:0 14px;font-family:Inter,sans-serif;font-size:13px}.mobile-topbar-input::placeholder{color:var(--text-muted)}.mobile-topbar-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.mobile-topbar-submit,.mobile-topbar-close{border-radius:var(--radius-sm);height:100%;transition:all var(--transition);font-size:13px;font-weight:600}.mobile-topbar-submit{background:var(--accent);color:#fff;cursor:pointer;border:none;min-width:82px;padding:0 16px}.mobile-topbar-submit:hover:not(:disabled){background:var(--accent-light);box-shadow:0 0 20px var(--accent-glow)}.mobile-topbar-submit:disabled{cursor:not-allowed;opacity:.58;box-shadow:none}.mobile-topbar-submit.success{background:#16a34a;box-shadow:0 0 24px #22c55e59}.mobile-topbar-close{border:1px solid var(--border);background:var(--bg-glass);width:42px;color:var(--text-secondary);cursor:pointer}.mobile-topbar-close:hover{border-color:var(--danger);color:#fff;background:#ef444424}.mobile-url-error{border-radius:var(--radius-sm);color:var(--danger);background:#12121af5;border:1px solid #ef444452;padding:10px 12px;font-size:12px;line-height:1.4;position:absolute;bottom:calc(100% + 8px);left:12px;right:12px;box-shadow:0 14px 28px #00000052}@media (width<=960px){.app-shell,.app-shell.playlist-collapsed{grid-template-rows:1fr auto;grid-template-columns:1fr}.topbar{min-height:112px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));-webkit-backdrop-filter:none;backdrop-filter:none;transform:translateY(calc(-1 * var(--mobile-keyboard-offset,0px)));background:0 0;border-top:none;border-bottom:none;grid-area:2/1;transition:transform .22s;overflow:visible}.main-content{grid-row:1;justify-content:center;align-items:center;min-height:0;padding:12px 14px 20px}.app-sidebar{top:calc(64px + env(safe-area-inset-top));z-index:80;background:0 0;border-left:none;width:auto;transition:transform .32s cubic-bezier(.16,1,.3,1),border-color .28s cubic-bezier(.16,1,.3,1);position:fixed;bottom:0;left:0;right:0;overflow:visible}.app-sidebar.collapsed{transform:translate(100%)}.app-sidebar.collapsed .playlist-sidebar{pointer-events:none}.app-sidebar.collapsed .playlist-collapse-tab{pointer-events:auto}.playlist-sidebar{background:#12121afa padding-box padding-box;border-left:none;border-radius:0;height:100%;overflow:visible;box-shadow:-18px 0 42px #00000057}.playlist-sidebar.collapsed{background:#12121afa;overflow:visible}.playlist-collapse-tab{top:auto;bottom:calc(128px + env(safe-area-inset-bottom));touch-action:pan-y;-webkit-user-select:none;user-select:none;z-index:120;border-radius:18px 0 0 18px;width:52px;height:110px;left:-52px;transform:none}.playlist-collapse-tab.collapsed{left:-52px}.playlist-sidebar:not(.collapsed) .playlist-collapse-tab{left:0;right:auto;bottom:calc(122px + env(safe-area-inset-bottom));border-left:none;border-right:1px solid var(--border);border-radius:0 18px 18px 0}.playlist-collapse-tab svg{width:18px;height:18px}.playlist-sidebar:not(.collapsed) .playlist-collapse-tab svg{transform:none}.playlist-drag-edge{z-index:3;cursor:ew-resize;touch-action:none;width:22px;position:absolute;top:0;bottom:0;right:0}.player-overlay,.overlay-toggle-btn{display:none}}.player-wrap{width:100%;max-width:var(--player-max-w);min-height:min(calc((var(--player-max-w) * 9 / 16) + var(--player-meta-reserve-h)), calc(100dvh - var(--topbar-h) - 40px));justify-content:center;align-items:center;display:flex;position:relative}.player-stage,.player-video-stack{width:100%;position:relative}.player-iframe-container{border-radius:var(--radius-lg);aspect-ratio:16/9;width:100%;box-shadow:0 8px 40px #0009, 0 0 0 1px var(--border);background:#000;position:relative;overflow:hidden}.player-iframe-container iframe{border:none;width:100%;height:100%;display:block}.player-overlay{pointer-events:none;opacity:0;z-index:2;padding:24px;transition:opacity .18s;position:absolute;inset:0}.player-iframe-container:hover .player-overlay.enabled{opacity:1}.player-overlay-main-controls,.player-overlay-sub-controls,.player-overlay-gap{justify-content:center;align-items:center;display:flex}.player-overlay-main-controls{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto;background:#0a0a0f7a;border-radius:999px;gap:14px;padding:14px 18px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 18px 42px #00000057}.player-overlay-sub-controls{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);pointer-events:auto;background:#0a0a0f6b;border-radius:999px;gap:10px;padding:8px 12px;position:absolute;top:calc(50% + 72px);left:50%;transform:translate(-50%);box-shadow:0 14px 34px #00000047}.player-overlay-gap{pointer-events:auto;width:252px;height:22px;position:absolute;top:calc(50% + 50px);left:50%;transform:translate(-50%)}.player-overlay-btn{pointer-events:auto;flex:none}.player-overlay-btn.btn-icon{width:58px;height:58px}.player-overlay-btn-play{width:72px;height:72px}.player-overlay-btn .transport-icon{width:22px;height:22px}.player-overlay-btn-play .transport-icon{width:28px;height:28px}.player-overlay-chip{border:1px solid var(--border);width:34px;height:34px;color:var(--text-secondary);cursor:pointer;transition:color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);pointer-events:auto;background:#ffffff0d;border-radius:999px;justify-content:center;align-items:center;padding:0;font-size:15px;line-height:1;display:flex}.player-overlay-chip:hover:not(:disabled){color:var(--text-primary);border-color:var(--border-hover);background:#ffffff14;transform:translateY(-1px)}.player-overlay-chip:disabled{opacity:.55;cursor:not-allowed}.player-overlay-chip.shuffle.active{color:var(--gold);background:#f59e0b1f;border-color:#f59e0b80;box-shadow:0 0 12px #f59e0b2e}.player-overlay-chip.preview svg{fill:currentColor;width:14px;height:14px}.player-overlay-chip.preview.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 12px var(--accent-glow)}.player-overlay-chip.support{font-size:16px}.player-overlay-chip.support:hover:not(:disabled),.player-overlay-chip.support:focus-visible{color:var(--gold)}.player-overlay-chip.support.supported{color:var(--gold);background:#f59e0b1f;border-color:#f59e0b73;box-shadow:0 0 12px #f59e0b2e}.player-overlay-chip.support.nominated{color:var(--accent-light);background:#7c3aed1f;border-color:#7c3aed73;box-shadow:0 0 12px #7c3aed2e}.player-overlay.disabled .player-overlay-main-controls,.player-overlay.disabled .player-overlay-sub-controls,.player-overlay.disabled .player-overlay-gap{pointer-events:none}.player-empty{aspect-ratio:16/9;border-radius:var(--radius-lg);background:var(--bg-glass);border:2px dashed var(--border);width:100%;color:var(--text-muted);flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex}.player-empty-icon{opacity:.4;font-size:48px}.player-empty-title{color:var(--text-secondary);font-size:18px;font-weight:600}.player-empty-sub{font-size:13px}.now-playing-info{justify-content:space-between;align-items:flex-start;gap:10px;display:flex;position:absolute;top:calc(100% + 16px);left:0;right:0}.now-playing-main{flex:1;align-items:flex-start;gap:10px;min-width:0;display:flex}.now-playing-dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 8px var(--accent-glow);border-radius:50%;margin-top:5px;animation:1.6s infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.now-playing-title{color:#f0f0f5e0;font-size:13px;font-weight:500;line-height:1.4}.now-playing-meta{flex-direction:column;gap:4px;min-width:0;display:flex}.now-playing-link{color:var(--accent-light);white-space:nowrap;text-overflow:ellipsis;font-size:12px;line-height:1.4;text-decoration:underline;overflow:hidden}.now-playing-link:hover{color:#c4b5fd}.overlay-toggle-btn{border:1px solid var(--border);height:30px;color:var(--text-secondary);letter-spacing:.03em;cursor:pointer;transition:color var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);background:#ffffff0a;border-radius:999px;flex:none;padding:0 12px;font-size:11px;font-weight:700}.overlay-toggle-btn:hover{color:var(--text-primary);border-color:var(--border-hover);background:#ffffff12}.overlay-toggle-btn.active{color:var(--accent-light);border-color:var(--accent);background:var(--accent-dim);box-shadow:0 0 12px var(--accent-glow)}.sidebar-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;display:flex}.sidebar-header-main{align-items:center;gap:10px;min-width:0;display:flex}.sidebar-title{text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);font-size:12px;font-weight:600}.sidebar-count{color:var(--text-muted);background:var(--bg-glass);border:1px solid var(--border);border-radius:99px;padding:2px 8px;font-size:11px}.sidebar-header-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.sidebar-icon-btn{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;width:30px;height:30px;transition:all var(--transition);justify-content:center;align-items:center;padding:0;font-size:16px;line-height:1;display:flex}.sidebar-icon-btn:hover:not(:disabled){background:var(--bg-glass-hover);border-color:var(--border-hover)}.sidebar-icon-btn.shuffle.active{background:#f59e0b1f;border-color:#f59e0b80;box-shadow:0 0 12px #f59e0b2e}.sidebar-icon-btn.preview{color:var(--text-secondary)}.sidebar-icon-btn.preview svg{fill:currentColor;width:15px;height:15px}.sidebar-icon-btn.preview:hover:not(:disabled){border-color:var(--accent);color:var(--accent-light)}.sidebar-icon-btn.preview.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light);box-shadow:0 0 12px var(--accent-glow)}.sidebar-icon-btn:disabled{cursor:not-allowed;opacity:.45}.playlist-order-toggle{opacity:0;flex-shrink:0;max-height:0;transition:max-height .28s cubic-bezier(.16,1,.3,1),opacity .18s,transform .28s cubic-bezier(.16,1,.3,1);overflow:hidden;transform:translateY(-10px)}.playlist-order-toggle.visible{opacity:1;max-height:46px;transform:translateY(0)}.playlist-order-toggle-inner{padding:10px 12px 0}.sidebar-toolbar-btn{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);height:30px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:0 12px;font-size:11px;font-weight:600}.sidebar-toolbar-btn:hover:not(:disabled){background:var(--bg-glass-hover);border-color:var(--border-hover);color:var(--text-primary)}.sidebar-toolbar-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light)}.sidebar-toolbar-btn:disabled{cursor:not-allowed;opacity:.45}.playlist-list{flex-direction:column;flex:1;gap:4px;padding:8px;display:flex;overflow-y:auto}.playlist-item{border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition);border:1px solid #0000;flex-shrink:0;align-items:center;gap:10px;padding:8px 10px;display:flex;position:relative}.list-entry-number{width:28px;color:var(--text-muted);font-variant-numeric:tabular-nums;flex-shrink:0;justify-content:flex-end;align-items:center;font-size:11px;font-weight:600;display:flex}.playlist-item:hover .list-entry-number,.playlist-item.active .list-entry-number,.playlist-item.flash .list-entry-number,.fav-item:hover .list-entry-number,.fav-item.selected .list-entry-number{color:var(--text-secondary)}.playlist-item:hover{background:var(--bg-glass);border-color:var(--border)}.playlist-item.active{background:var(--accent-dim);border-color:var(--accent)}.playlist-item.flash{animation:1.4s ease-out forwards playlist-flash}@keyframes playlist-flash{0%{background:#7c3aed4d;border-color:#7c3aedcc;box-shadow:0 0 0 1px #7c3aed47,0 0 18px #7c3aed33}to{box-shadow:none;background:0 0;border-color:#0000}}.playlist-thumb{border-radius:var(--radius-sm);object-fit:cover;background:var(--bg-glass);flex-shrink:0;width:80px;height:45px}.playlist-thumb-placeholder{border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--border);width:80px;height:45px;color:var(--text-muted);flex-shrink:0;justify-content:center;align-items:center;font-size:18px;display:flex}.playlist-item-info{flex:1;min-width:0}.playlist-item-title{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:12px;font-weight:500;line-height:1.4;display:-webkit-box;overflow:hidden}.playlist-item-meta{color:var(--text-muted);margin-top:3px;font-size:11px}.playlist-item-actions{align-items:center;gap:6px;margin-left:auto;display:flex}.item-status-tick{width:18px;height:18px;transition:all var(--transition);background:0 0;flex-shrink:0;justify-content:center;align-items:center;display:flex}.item-status-tick svg{width:100%;height:100%;overflow:visible}.item-status-tick path{fill:none;stroke:#9d5ff06b;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--transition), filter var(--transition), opacity var(--transition)}.item-status-tick.partial{filter:none}.item-status-tick.partial path{stroke:#676782cc}.item-status-tick.complete{filter:drop-shadow(0 0 10px #9d5ff057)}.item-status-tick.complete path{stroke:#f4dbff;stroke-width:2.8px}.item-status-tick.empty{opacity:0;pointer-events:none}.playlist-item:hover .item-status-tick.partial,.playlist-item.active .item-status-tick.partial,.playlist-item.flash .item-status-tick.partial{filter:drop-shadow(0 0 8px #9d5ff024)}.playlist-item:hover .item-status-tick.partial path,.playlist-item.active .item-status-tick.partial path,.playlist-item.flash .item-status-tick.partial path{stroke:#8f8faacc}.playlist-item:hover .item-status-tick.complete,.playlist-item.active .item-status-tick.complete,.playlist-item.flash .item-status-tick.complete{filter:drop-shadow(0 0 12px #9d5ff06b)}.playlist-item:hover .item-status-tick.complete path,.playlist-item.active .item-status-tick.complete path,.playlist-item.flash .item-status-tick.complete path{stroke:#f8e7ff}.item-fav-btn{cursor:pointer;width:28px;height:28px;color:var(--text-muted);border-radius:var(--radius-sm);transition:all var(--transition);opacity:.65;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;font-size:15px;display:flex}.playlist-item:hover .item-fav-btn:not(.supported):not(.nominated),.playlist-item.active .item-fav-btn:not(.supported):not(.nominated),.playlist-item.flash .item-fav-btn:not(.supported):not(.nominated){opacity:1;color:var(--gold)}.item-fav-btn:hover{color:var(--gold)}.item-fav-btn:disabled{cursor:not-allowed}.item-fav-btn.locked{opacity:1}.playlist-item:hover .item-fav-btn.locked,.playlist-item.active .item-fav-btn.locked,.playlist-item.flash .item-fav-btn.locked{color:#c89cff}.item-fav-btn.supported{opacity:1;color:var(--gold)}.item-fav-btn.nominated{opacity:1;color:var(--accent-light);text-shadow:0 0 10px #9d5ff029}.playlist-item:hover .item-fav-btn.supported,.playlist-item.active .item-fav-btn.supported,.playlist-item.flash .item-fav-btn.supported{color:var(--gold)}.playlist-item:hover .item-fav-btn.nominated,.playlist-item.active .item-fav-btn.nominated,.playlist-item.flash .item-fav-btn.nominated{color:#c89cff}.playlist-context-menu{border:1px solid var(--border-hover);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:250;background:#12121af5;flex-direction:column;gap:4px;min-width:180px;padding:6px;display:flex;position:fixed;box-shadow:0 16px 40px #00000073}.playlist-context-menu-item{border-radius:var(--radius-sm);width:100%;color:var(--text-primary);text-align:left;cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;padding:10px 12px;font-size:12px;font-weight:500}.playlist-context-menu-item:hover:not(:disabled){background:var(--bg-glass-hover)}.playlist-context-menu-item:disabled{color:var(--text-muted);cursor:default}.playlist-context-menu-item.danger:hover{color:#fff;background:#ef444424}.fav-panel-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#00000080;animation:.2s fadeIn;position:fixed;inset:0}.fav-panel-backdrop.closing{animation:.24s forwards fadeOut}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}to{opacity:0;-webkit-backdrop-filter:blur();backdrop-filter:blur()}}.fav-panel{width:min(var(--support-panel-w), 100vw);background:var(--bg-surface);border-left:1px solid var(--border);z-index:201;flex-direction:column;height:100%;animation:.25s cubic-bezier(.16,1,.3,1) slideIn;display:flex;position:fixed;top:0;right:0;overflow:hidden}.fav-panel.closing{animation:.24s cubic-bezier(.55,0,.35,1) forwards slideOut}@keyframes slideIn{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOut{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}.fav-panel-header{border-bottom:1px solid var(--border);flex-shrink:0;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.fav-panel-title{align-items:center;gap:10px;font-size:16px;font-weight:600;display:flex}.fav-panel-title span{font-size:20px}.fav-panel-title-icon{justify-content:center;align-items:center;display:inline-flex}.fav-panel.support .fav-panel-title-icon{color:var(--gold)}.fav-panel.nomination .fav-panel-title-icon{color:var(--accent-light)}.fav-panel-actions{align-items:center;gap:8px;display:flex}.fav-panel-action-btn{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);padding:0 12px;font-size:12px;font-weight:600}.fav-panel-action-btn:hover{background:var(--bg-glass-hover);border-color:var(--border-hover);color:var(--text-primary)}.fav-panel-action-btn.active{background:var(--accent-dim);border-color:var(--accent);color:var(--accent-light)}.btn-close{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);justify-content:center;align-items:center;font-size:16px;display:flex}.btn-close:hover{background:var(--danger);border-color:var(--danger);color:#fff}.fav-panel-body{flex-direction:column;flex:1;gap:6px;padding:12px;display:flex;overflow-y:auto}.fav-panel-toast{border-radius:var(--radius-sm);max-width:min(320px,100% - 24px);color:var(--text-primary);z-index:3;background:#12121af5;border:1px solid #7c3aed52;padding:10px 12px;font-size:12px;line-height:1.4;animation:.22s collection-toast-in;position:absolute;bottom:88px;right:12px;box-shadow:0 16px 28px #00000057}.fav-panel-selection-toolbar{flex-shrink:0;align-items:center;gap:8px;padding:0 12px 12px;display:flex}.fav-panel-footer{border-top:1px solid var(--border);background:linear-gradient(#0a0a0f00,#0a0a0f80);flex-shrink:0;padding:12px}.collection-adder{flex-direction:column;gap:8px;display:flex;position:relative}.collection-adder-toast{border-radius:var(--radius-sm);max-width:min(360px,100%);color:var(--text-primary);z-index:3;background:#12121af5;border:1px solid #7c3aed52;padding:10px 12px;font-size:12px;line-height:1.4;animation:.22s collection-toast-in;position:absolute;bottom:calc(100% + 10px);right:0;box-shadow:0 16px 28px #00000057}.app-toast{border-radius:var(--radius-sm);max-width:min(360px,100% - 24px);color:var(--text-primary);z-index:190;background:#12121af5;padding:10px 12px;font-size:12px;line-height:1.4;animation:.22s collection-toast-in;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 16px 28px #00000057}.app-toast.support-toast{border:1px solid #f59e0b5c;box-shadow:0 16px 28px #00000057,0 0 18px #f59e0b1f}@keyframes collection-toast-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.collection-adder-shell{perspective:1200px;width:100%;height:58px;transition:height .32s cubic-bezier(.16,1,.3,1);position:relative}.collection-adder.open .collection-adder-shell{height:72px}.collection-adder-stage{width:100%;height:100%;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.16,1,.3,1);position:relative}.collection-adder.open .collection-adder-stage{transform:rotateX(180deg)}.collection-adder-face{backface-visibility:hidden;border-radius:var(--radius-md);width:100%;position:absolute;inset:0}.collection-adder-front{letter-spacing:.01em;cursor:pointer;transition:transform var(--transition), box-shadow var(--transition), filter var(--transition);border:none;font-size:13px;font-weight:700}.collection-adder-front:hover{filter:brightness(1.05)}.collection-adder-back{border:1px solid var(--border);pointer-events:none;background:#12121af5;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:8px;padding:6px;display:grid;transform:rotateX(180deg);box-shadow:0 16px 34px #00000047}.collection-adder.open .collection-adder-back{pointer-events:auto}.collection-adder.open .collection-adder-front{pointer-events:none}.collection-adder-input{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-glass);width:100%;min-width:0;height:100%;color:var(--text-primary);transition:border-color var(--transition), box-shadow var(--transition);outline:none;padding:0 14px;font-family:Inter,sans-serif;font-size:13px}.collection-adder-input::placeholder{color:var(--text-muted)}.collection-adder-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.collection-adder-submit,.collection-adder-close{border-radius:var(--radius-sm);height:100%;transition:all var(--transition);font-size:13px;font-weight:600}.collection-adder-submit{cursor:pointer;border:none;min-width:88px;padding:0 16px}.collection-adder-submit:disabled{cursor:not-allowed;opacity:.58;box-shadow:none}.collection-adder-close{border:1px solid var(--border);background:var(--bg-glass);width:42px;color:var(--text-secondary);cursor:pointer}.collection-adder-close:hover{border-color:var(--danger);color:#fff;background:#ef444424}.collection-adder-error{min-height:18px;color:var(--danger);white-space:nowrap;text-overflow:ellipsis;padding:0 4px;font-size:12px;overflow:hidden}.fav-panel.support .collection-adder-front,.fav-panel.support .collection-adder-submit{background:var(--gold);color:#1f1503;box-shadow:0 0 18px #f59e0b38}.fav-panel.support .collection-adder-back{border-color:#f59e0b29}.fav-panel.support .collection-adder-submit:hover:not(:disabled){background:#fbbf24;box-shadow:0 0 22px #f59e0b47}.fav-panel.nomination .collection-adder-front,.fav-panel.nomination .collection-adder-submit{background:var(--accent);color:#fff;box-shadow:0 0 18px var(--accent-glow)}.fav-panel.nomination .collection-adder-back{border-color:#7c3aed33}.fav-panel.nomination .collection-adder-submit:hover:not(:disabled){background:var(--accent-light);box-shadow:0 0 22px var(--accent-glow)}.collection-adder-submit.success{color:#fff;background:#16a34a;box-shadow:0 0 22px #22c55e59}.fav-empty{color:var(--text-muted);text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex}.fav-empty-icon{opacity:.4;font-size:40px}.fav-hint{color:var(--text-muted);font-size:12px;line-height:1.5}.fav-sortable-wrap{align-items:stretch;gap:8px;width:100%;display:flex}.fav-item{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:default;transition:background var(--transition), border-color var(--transition), box-shadow var(--transition);flex:1;align-items:center;gap:10px;width:100%;min-width:0;height:68px;min-height:68px;padding:8px 10px;display:flex;overflow:hidden}.fav-panel-body>.fav-item{flex:none}.support-list-number{width:30px}.fav-item:hover{background:var(--bg-glass-hover);border-color:var(--border-hover)}.fav-item.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-glow);background:#f59e0b1a}.fav-sortable-wrap.dragging .fav-item{opacity:.5;box-shadow:0 8px 24px #0006}.drag-handle{background:var(--bg-glass);border:1px solid var(--border);border-radius:var(--radius-sm);width:30px;color:var(--text-muted);cursor:grab;transition:color var(--transition);flex-shrink:0;justify-content:center;align-items:center;font-size:14px;display:flex}.fav-sortable-wrap:hover .drag-handle{color:var(--text-secondary);border-color:var(--border-hover)}.fav-remove-btn{cursor:pointer;width:26px;height:26px;color:var(--text-muted);border-radius:var(--radius-sm);transition:all var(--transition);background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;margin-left:auto;font-size:13px;display:flex}.fav-remove-btn:hover{color:var(--danger);background:#ef44441a}.support-select-toggle{appearance:none;border:2px solid var(--border-hover);cursor:pointer;box-sizing:border-box;width:22px;min-width:22px;max-width:22px;height:22px;min-height:22px;max-height:22px;transition:all var(--transition);background:0 0;border-radius:50%;flex:0 0 22px;justify-content:center;align-self:center;align-items:center;margin:0;padding:0;font-size:0;line-height:1;display:flex}.support-select-toggle::-moz-focus-inner{border:0;padding:0}.support-select-toggle:after{content:"";width:10px;height:10px;transition:background var(--transition);background:0 0;border-radius:50%}.support-select-toggle:hover{border-color:var(--gold)}.support-select-toggle.active{border-color:var(--gold);background:var(--gold-glow)}.support-select-toggle.active:after{background:var(--gold)}.support-context-menu{border:1px solid var(--border-hover);border-radius:var(--radius-md);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);z-index:250;background:#12121af5;flex-direction:column;gap:4px;min-width:220px;padding:6px;display:flex;position:fixed;box-shadow:0 16px 40px #00000073}.support-context-menu-item{border-radius:var(--radius-sm);width:100%;color:var(--text-primary);text-align:left;cursor:pointer;transition:background var(--transition), color var(--transition);background:0 0;border:none;padding:10px 12px;font-size:12px;font-weight:500}.support-context-menu-item:hover{background:var(--bg-glass-hover)}.support-context-menu-item.danger:hover{color:#fff;background:#ef444424}.api-key-notice{background:var(--accent-dim);border-top:1px solid var(--accent);color:var(--text-secondary);flex-shrink:0;align-items:center;gap:8px;padding:12px 16px;font-size:12px;display:flex}.api-key-notice a{color:var(--accent-light);text-decoration:underline}@media (width<=960px){.player-wrap{min-height:calc(100dvh - 202px - env(safe-area-inset-top) - env(safe-area-inset-bottom));justify-content:center;align-items:center}.player-stage{width:100%;max-width:900px}.now-playing-info{position:absolute;top:calc(100% + 14px);left:0;right:0}.now-playing-main{gap:0}.now-playing-dot,.now-playing-title{display:none}.now-playing-meta{width:100%}.sidebar-icon-btn{width:34px;height:34px;font-size:18px}.sidebar-icon-btn.preview svg{width:17px;height:17px}.sidebar-toolbar-btn{height:34px;padding:0 14px;font-size:12px}.playlist-item{gap:12px;padding:10px 12px}.playlist-item-actions{gap:8px}.item-status-tick{width:20px;height:20px}.item-fav-btn{width:34px;height:34px;font-size:18px}.playlist-context-menu-item,.support-context-menu-item{padding:12px 14px;font-size:13px}.fav-panel-selection-toolbar{flex-wrap:wrap}.fav-panel-toast{max-width:none;left:12px;right:12px}.app-toast{bottom:calc(124px + env(safe-area-inset-bottom))}.fav-item{gap:12px;height:76px;min-height:76px;padding:10px 12px}.drag-handle{width:36px;font-size:16px}.fav-remove-btn{width:34px;height:34px;font-size:15px}.support-select-toggle{flex:0 0 26px;width:26px;min-width:26px;max-width:26px;height:26px;min-height:26px;max-height:26px}.support-select-toggle:after{width:12px;height:12px}}