:root{--bg-dark:#0a0a0a;--text-main:#fff;--text-muted:#aaa;--accent:#5865f2}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;outline:none;margin:0;padding:0}body{background:var(--bg-dark);color:var(--text-main);font-family:Segoe UI,system-ui,sans-serif;overflow:hidden}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:#0000001a;border-radius:10px}::-webkit-scrollbar-thumb{background:#ffffff26;border:1px solid #ffffff0d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#ffffff4d}*{scrollbar-width:thin;scrollbar-color:#ffffff26 #0000001a}.loading{height:100vh;color:var(--text-muted);justify-content:center;align-items:center;display:flex}.app-container{width:100vw;height:100vh;display:flex;position:relative;overflow:hidden}.blurred-background{filter:blur(80px)brightness(.5);z-index:0;pointer-events:none;background-position:50%;background-size:cover;width:120%;height:120%;transition:background-image 1s ease-in-out;position:absolute;top:-10%;left:-10%}.left-panel{z-index:1;background:#0003;border-right:1px solid #ffffff1a;flex-direction:column;flex:0 0 45%;justify-content:center;align-items:center;padding:3rem;display:flex;position:relative}.left-panel.empty{color:var(--text-muted)}.album-art-container{aspect-ratio:1;border-radius:12px;flex-shrink:0;width:100%;max-width:min(400px,45vh);margin-bottom:2rem;overflow:hidden;box-shadow:0 20px 50px #0009}.album-art{object-fit:cover;width:100%;height:100%}.album-art.fallback{color:var(--text-muted);background:#ffffff0d;justify-content:center;align-items:center;display:flex}.album-art.fallback svg{width:100px;height:100px}.track-info{text-align:left;width:100%;max-width:400px;margin-bottom:1.5rem}.title{white-space:nowrap;text-overflow:ellipsis;text-shadow:0 2px 4px #00000080;margin-bottom:.2rem;font-size:1.5rem;font-weight:700;overflow:hidden}.author{color:var(--text-muted);text-shadow:0 2px 4px #00000080;font-size:1rem}.seekbar-container{width:100%;max-width:400px;margin-bottom:2rem}.seekbar-bg{cursor:pointer;background:#fff3;border-radius:3px;height:6px;position:relative;overflow:hidden}.seekbar-fill{background:var(--text-main);pointer-events:none;border-radius:3px;height:100%;transition:width .1s linear}.time-labels{color:var(--text-muted);justify-content:space-between;margin-top:.5rem;font-size:.75rem;display:flex}.controls-row{align-items:center;gap:1.5rem;display:flex}.control-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;transition:color .2s,transform .1s;display:flex}.control-btn:hover{color:var(--text-main)}.control-btn:active{transform:scale(.85)}.control-btn.active{color:var(--accent)}.control-btn.main-play{color:var(--text-main);background:#ffffff26;border-radius:50%;width:64px;height:64px;transition:transform .15s,background .2s;box-shadow:0 4px 15px #0000004d}.control-btn.main-play:hover{background:#ffffff40;transform:scale(1.05)}.control-btn.main-play:active{transform:scale(.95)}.filter-container{justify-content:center;width:100%;max-width:400px;margin-top:1.5rem;display:flex}.filter-select{color:var(--text-main);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);appearance:none;text-align:center;background:#ffffff14;border:1px solid #ffffff26;border-radius:12px;outline:none;padding:.6rem 1.2rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:all .2s;box-shadow:0 4px 15px #0000001a}.filter-select:hover,.filter-select:focus{border-color:var(--accent);background:#ffffff26}.filter-select option{background:var(--bg-dark);color:var(--text-main);font-weight:400}.right-panel{z-index:1;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#0a0a0abf;flex-direction:column;flex:1;display:flex;position:relative;overflow:hidden}.tabs-header{z-index:20;border-bottom:1px solid #ffffff1a;padding:1.5rem 2rem 0;display:flex;position:relative}.tab-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;margin-right:1rem;padding:.5rem 1rem;font-size:1.1rem;font-weight:600;transition:all .2s}.tab-btn.active{color:var(--text-main);border-bottom-color:var(--text-main)}.tabs-header button[title=About\ Hikari]{transition:transform .1s,color .2s}.tabs-header button[title=About\ Hikari]:active{transform:scale(.8)}.tab-content{flex:1;padding:1.5rem 2rem;position:relative;overflow-y:auto}.empty-state{text-align:center;color:var(--text-muted);margin-top:2rem}.queue-search-wrapper{margin-bottom:1.5rem}.queue-search-input{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff0d;border:1px solid #ffffff26;border-radius:12px;outline:none;width:100%;padding:.8rem 1.2rem;font-size:1rem;transition:all .2s}.queue-search-input:focus{border-color:var(--accent);background:#ffffff1a;box-shadow:0 4px 15px #0003}.queue-search-input::placeholder{color:#ffffff4d}.queue-item{border-radius:8px;align-items:center;padding:.75rem;transition:background .2s;display:flex}.queue-item:hover{background:#ffffff14}.queue-index{width:30px;color:var(--text-muted);font-size:.9rem}.queue-meta{flex-direction:column;flex:1;display:flex;overflow:hidden}.queue-title{white-space:nowrap;text-overflow:ellipsis;font-weight:600;overflow:hidden}.queue-author{color:var(--text-muted);font-size:.8rem}.queue-actions{align-items:center;gap:1rem;display:flex}.queue-requester{color:var(--accent);background:#5865f233;border-radius:12px;padding:.2rem .5rem;font-size:.8rem}.remove-btn{color:#ff4a4a;cursor:pointer;opacity:0;background:0 0;border:none;transition:opacity .2s,transform .1s}.queue-item:hover .remove-btn{opacity:1}.remove-btn:active{transform:scale(.8)}.lyrics-container{max-width:600px;margin:0 auto;position:relative}.lyrics-offset-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:5;background:#0006;border-radius:20px;flex-direction:column;align-items:center;padding:.5rem;display:flex;position:fixed;top:5rem;right:2rem}.lyrics-offset-controls button{color:#fff;cursor:pointer;background:0 0;border:none;padding:.2rem}.lyrics-text{white-space:pre-wrap;color:var(--text-main);text-shadow:0 2px 4px #00000080;font-family:inherit;font-size:1.5rem;line-height:2}.lyrics-source{color:var(--text-muted);margin-top:2rem;display:block}.fab-add{background:var(--accent);color:#fff;cursor:pointer;z-index:10;border:none;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;transition:transform .2s;display:flex;position:absolute;bottom:2rem;right:2rem;box-shadow:0 4px 15px #00000080}.fab-add:hover{transform:scale(1.05)}.search-modal{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;pointer-events:none;z-index:20;background:#0a0a0af2;flex-direction:column;width:100vw;height:100vh;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;right:0;transform:translate(100%)}.search-modal.open{opacity:1;pointer-events:auto;transform:translate(0)}.modal-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;padding:2rem;display:flex}.close-btn{color:#fff;cursor:pointer;background:0 0;border:none}.modal-body{flex-direction:column;gap:1.5rem;width:100%;max-width:800px;margin:0 auto;padding:2rem;display:flex}.search-input{color:#fff;background:#ffffff14;border:1px solid #fff3;border-radius:8px;outline:none;width:100%;padding:1rem 1.5rem;font-size:1.2rem;transition:border-color .2s}.search-input:focus{border-color:var(--accent)}.modal-actions{justify-content:flex-end;gap:1rem;display:flex}.btn-primary{background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:8px;padding:.8rem 1.5rem;font-weight:700}.btn-secondary{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:8px;padding:.8rem 1.5rem;font-weight:700}.synced-lyrics-container{text-align:center;flex-direction:column;gap:1.5rem;padding:4rem 1rem;display:flex}.lyric-line{color:#ffffff4d;cursor:default;margin:0;font-size:1.5rem;font-weight:600;transition:all .3s}.lyric-line.active{color:#fff;text-shadow:0 4px 15px #fff6;font-size:2rem;transform:scale(1.05)}.lyric-line.passed{color:#ffffff26}@keyframes slideDownPill{0%{opacity:0;top:3.5rem;transform:translate(-50%)scale(.9)}70%{opacity:1;top:6.5rem;transform:translate(-50%)scale(1.05)}to{opacity:1;top:6rem;transform:translate(-50%)scale(1)}}.resume-sync-btn{color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);cursor:pointer;z-index:10;background:#5865f2cc;border:1px solid #fff3;border-radius:50px;padding:.5rem 1.5rem;font-size:.9rem;font-weight:600;transition:background .2s,transform .2s;animation:.4s cubic-bezier(.34,1.56,.64,1) forwards slideDownPill;position:absolute;top:6rem;left:50%;transform:translate(-50%);box-shadow:0 4px 20px #0009}.resume-sync-btn:hover{background:#5865f2;transform:translate(-50%)scale(1.05)}@media (width<=768px){.app-container{scroll-snap-type:y mandatory;flex-direction:column;overflow:hidden auto}.blurred-background{height:200%;position:fixed}.left-panel{scroll-snap-align:start;border-bottom:1px solid #ffffff1a;border-right:none;flex:none;width:100%;height:100dvh;padding:2rem 1rem}.album-art-container{max-width:min(300px,45vh)}.right-panel{scroll-snap-align:start;flex:none;width:100%;height:100dvh}.tabs-header{padding:4rem 1rem .5rem}.tab-content{padding:1rem}.remove-btn{opacity:1}@keyframes slideDownPillMobile{0%{opacity:0;top:5rem;transform:translate(-50%)scale(.9)}to{opacity:1;top:7rem;transform:translate(-50%)scale(1)}}.resume-sync-btn{animation:.4s cubic-bezier(.34,1.56,.64,1) forwards slideDownPillMobile}.search-modal{width:100%}.modal-body{padding:3rem 1rem 1rem}.search-input{font-size:1rem}}.left-panel.pip{background:#0006;border:none;flex:1;justify-content:flex-end;width:100vw;height:100vh;padding:0}.left-panel.pip .album-art-container{aspect-ratio:auto;z-index:-1;width:100%;max-width:none;height:100%;box-shadow:none;border-radius:0;flex-shrink:1;margin:0;position:absolute;top:0;left:0}.left-panel.pip .seekbar-container{z-index:10;background:linear-gradient(#0000,#000000e6);width:100%;max-width:none;margin:0;padding:3rem 1.5rem 1rem}.context-menu-overlay{z-index:1000;background:0 0;width:100vw;height:100vh;position:fixed;top:0;left:0}.context-menu{z-index:1001;-webkit-backdrop-filter:blur(25px);backdrop-filter:blur(25px);background:#141414d9;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:2px;min-width:200px;padding:.5rem;animation:.15s cubic-bezier(.2,.8,.2,1) popIn;display:flex;position:fixed;box-shadow:0 10px 30px #00000080}@keyframes popIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.context-menu-item{color:var(--text-main);text-align:left;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:12px;padding:.6rem 1rem;font-family:inherit;font-size:.9rem;transition:background .1s,color .1s;display:flex}.context-menu-icon{color:var(--text-muted);justify-content:center;align-items:center;display:flex}.context-menu-item:hover{color:#fff;background:#5865f2e6}.context-menu-item:hover .context-menu-icon{color:#fff}.context-menu-item.danger,.context-menu-item.danger .context-menu-icon{color:#ff4a4a}.context-menu-item.danger:hover{color:#fff;background:#ff4a4a}.context-menu-item.danger:hover .context-menu-icon{color:#fff}.info-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:9999;background:#0009;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.info-modal{background:#141414f2;border:1px solid #ffffff26;border-radius:16px;flex-direction:column;gap:1.5rem;width:90%;max-width:500px;padding:2rem;animation:.3s cubic-bezier(.2,.8,.2,1) popIn;display:flex;position:relative;box-shadow:0 20px 60px #0009}.info-close-btn{color:var(--text-muted);cursor:pointer;background:0 0;border:none;transition:color .2s;position:absolute;top:1.2rem;right:1.2rem}.info-close-btn:hover{color:#fff}.info-modal-header{align-items:center;gap:1.5rem;display:flex}.info-modal-art-wrapper{border-radius:8px;flex-shrink:0;width:90px;height:90px;overflow:hidden;box-shadow:0 4px 15px #0000004d}.info-modal-art{object-fit:cover;object-position:center;width:100%;height:100%}.info-modal-meta{flex-direction:column;gap:.3rem;display:flex;overflow:hidden}.info-modal-meta h2{white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.2rem;overflow:hidden}.info-modal-meta h3{color:var(--text-muted);margin:0;font-size:.9rem;font-weight:400}.info-badges{flex-wrap:wrap;gap:.5rem;margin-top:.3rem;display:flex}.info-requester{color:var(--accent);background:#5865f233;border-radius:12px;width:fit-content;padding:.2rem .6rem;font-size:.85rem}.info-duration{color:var(--text-main);background:#ffffff26;border-radius:12px;width:fit-content;padding:.2rem .6rem;font-size:.85rem}.info-modal-details{background:#ffffff0d;border-radius:12px;flex-direction:column;gap:1rem;padding:1.5rem;display:flex}.info-row{flex-direction:column;gap:.2rem;display:flex}.info-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.8rem;font-weight:700}.info-link{color:var(--text-main);word-break:break-all;font-size:.9rem;text-decoration:none;transition:color .2s}.info-link:hover{color:var(--accent);text-decoration:underline}body.perf-mode .blurred-background{filter:none!important;background-image:none!important;background-color:var(--bg-dark)!important}body.perf-mode .right-panel,body.perf-mode .filter-select,body.perf-mode .queue-search-input,body.perf-mode .lyrics-offset-controls,body.perf-mode .resume-sync-btn,body.perf-mode .context-menu,body.perf-mode .info-modal-overlay{-webkit-backdrop-filter:none!important}body.perf-mode .right-panel{background:#111214!important}body.perf-mode .context-menu,body.perf-mode .info-modal{background:#1e1f22!important}body.perf-mode .info-modal-overlay{background:#000000d9!important}body.perf-mode .queue-search-input,body.perf-mode .filter-select,body.perf-mode .resume-sync-btn,body.perf-mode .lyrics-offset-controls{background:#2b2d31!important;border-color:#0000!important}