*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #080809;--bg2: #0f0f12;--bg3: #161619;--bg4: #1c1c21;--surface: #232329;--surface2: #2c2c35;--border: rgba(255,255,255,.055);--border2: rgba(255,255,255,.1);--border3: rgba(255,255,255,.18);--text: #ededf2;--text2: #8484a0;--text3: #4a4a62;--accent: #6c5ce7;--accent2: #a29bfe;--accent3: #4834d4;--accentRGB: 108, 92, 231;--warm: #fd79a8;--warmRGB: 253, 121, 168;--gold: #fdcb6e;--green: #00b894;--greenRGB: 0, 184, 148;--glow: rgba(108, 92, 231, .12);--glow2: rgba(108, 92, 231, .28);--glow3: rgba(108, 92, 231, .5);--player-h: 84px;--nav-w: 232px;--bottom-nav: 0px;--radius: 12px;--radius-sm: 8px;--radius-xs: 5px;--font-display: "Syne", sans-serif;--font-body: "DM Sans", sans-serif;--ease: cubic-bezier(.23, 1, .32, 1)}@media (max-width: 768px){:root{--nav-w: 0px;--player-h: 64px;--bottom-nav: 64px}}html,body,#root{height:100%;overflow:hidden}body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--surface2);border-radius:4px}::selection{background:var(--glow2);color:var(--accent2)}button{font-family:var(--font-body);cursor:pointer;border:none;background:none}input{font-family:var(--font-body)}a{text-decoration:none;color:inherit}.app-shell{display:grid;grid-template-columns:var(--nav-w) 1fr;grid-template-rows:1fr var(--player-h);height:100vh;overflow:hidden}@media (max-width: 768px){.app-shell{grid-template-columns:1fr;grid-template-rows:1fr var(--player-h)}}.sidebar{grid-row:1 / 2;grid-column:1 / 2;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;z-index:10}@media (max-width: 768px){.sidebar{display:none}}.sidebar-logo{padding:26px 20px 18px;display:flex;align-items:center;gap:10px;flex-shrink:0}.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--accent),var(--accent3));border-radius:9px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 20px var(--glow2),0 4px 12px #0006;flex-shrink:0}.logo-mark svg{width:18px;height:18px;color:#fff}.logo-wordmark{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--text)}.nav-group{padding:4px 10px;flex:1;overflow-y:auto}.nav-group-label{font-size:10px;font-weight:600;letter-spacing:1.8px;text-transform:uppercase;color:var(--text3);padding:14px 10px 5px}.nav-link{display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:all .18s var(--ease);color:var(--text2);font-size:13.5px;position:relative;margin-bottom:1px;-webkit-user-select:none;user-select:none}.nav-link:hover{background:var(--bg3);color:var(--text)}.nav-link.active{background:rgba(var(--accentRGB),.1);color:var(--accent2);font-weight:500}.nav-link.active:before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;background:linear-gradient(180deg,var(--accent),var(--accent2));border-radius:0 3px 3px 0}.nav-link-icon{width:17px;height:17px;flex-shrink:0;opacity:.65}.nav-link.active .nav-link-icon,.nav-link:hover .nav-link-icon{opacity:1}.sidebar-mini-player{padding:10px;border-top:1px solid var(--border);flex-shrink:0}.mini-player-card{background:var(--bg3);border-radius:var(--radius-sm);padding:9px 11px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s}.mini-player-card:hover{background:var(--bg4)}.mini-player-art{width:34px;height:34px;border-radius:6px;background:var(--surface);flex-shrink:0;overflow:hidden}.mini-player-art img{width:100%;height:100%;object-fit:cover}.mini-player-info{flex:1;min-width:0}.mini-player-title{font-size:12px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mini-player-artist{font-size:11px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}.bottom-nav{display:none}@media (max-width: 768px){.bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav);background:var(--bg2);border-top:1px solid var(--border);z-index:300;padding:0 8px;padding-bottom:env(safe-area-inset-bottom)}}.bottom-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;transition:all .15s var(--ease);color:var(--text3);padding:6px 0;border-radius:var(--radius-sm);position:relative}.bottom-nav-item.active{color:var(--accent2)}.bottom-nav-item.active:before{content:"";position:absolute;top:0;left:25%;right:25%;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:0 0 3px 3px}.bottom-nav-label{font-size:10px;font-weight:500;letter-spacing:.2px}.main-content{grid-row:1 / 2;grid-column:2 / 3;overflow-y:auto;overflow-x:hidden;background:var(--bg);position:relative}@media (max-width: 768px){.main-content{grid-column:1 / 2;padding-bottom:calc(var(--player-h) + var(--bottom-nav))}}.page{padding:36px 36px 40px;min-height:100%;animation:pageFadeIn .22s var(--ease) both}@media (max-width: 768px){.page{padding:20px 16px 24px}}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.page-head{margin-bottom:24px}.page-title{font-family:var(--font-display);font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--text);line-height:1;margin-bottom:5px}@media (max-width: 768px){.page-title{font-size:24px}}.page-sub{color:var(--text2);font-size:13px}.section-label{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:-.3px;color:var(--text);margin-bottom:14px;display:flex;align-items:center;gap:8px}.search-wrap{position:relative;margin-bottom:26px}.search-input{width:100%;background:var(--bg3);border:1.5px solid var(--border2);border-radius:50px;padding:12px 120px 12px 48px;color:var(--text);font-size:14px;outline:none;transition:all .2s var(--ease)}.search-input::placeholder{color:var(--text3)}.search-input:focus{border-color:var(--accent);background:var(--bg4);box-shadow:0 0 0 4px var(--glow)}@media (max-width: 768px){.search-input{padding:13px 90px 13px 44px;font-size:16px}}.search-ico{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--text3);pointer-events:none;display:flex}.search-submit{position:absolute;right:5px;top:50%;transform:translateY(-50%);background:var(--accent);color:#fff;border-radius:50px;padding:7px 18px;font-size:13px;font-weight:600;transition:all .18s var(--ease)}.search-submit:hover{background:var(--accent2);transform:translateY(-50%) scale(1.03)}.song-list{display:flex;flex-direction:column;gap:1px}.song-row{display:grid;grid-template-columns:50px 1fr auto;align-items:center;gap:12px;padding:6px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .13s}.song-row:hover{background:var(--bg3)}.song-row.active{background:rgba(var(--accentRGB),.08)}@media (max-width: 768px){.song-row{padding:8px 4px;gap:10px}.song-row:hover{background:transparent}.song-row:active{background:var(--bg3)}}.song-row-thumb{width:50px;height:50px;border-radius:7px;overflow:hidden;background:var(--surface);flex-shrink:0;position:relative}.song-row-thumb img{width:100%;height:100%;object-fit:cover;display:block}.song-row-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .13s;border-radius:7px}.song-row:hover .song-row-overlay,.song-row.active .song-row-overlay{opacity:1}@media (max-width: 768px){.song-row.active .song-row-overlay{opacity:1}.song-row:not(.active) .song-row-overlay{opacity:0}}.song-row-info{min-width:0}.song-row-title{font-size:13.5px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.song-row.active .song-row-title{color:var(--accent2)}.song-row-artist{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.song-row-right{display:flex;align-items:center;gap:4px}.song-row-actions{display:flex;align-items:center;gap:2px;opacity:0;transition:opacity .13s}.song-row:hover .song-row-actions{opacity:1}@media (max-width: 768px){.song-row-actions{opacity:1}.song-row-dur{display:none}}.song-row-dur{font-size:12px;color:var(--text3);font-variant-numeric:tabular-nums;min-width:36px;text-align:right}.ico-btn{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .14s var(--ease);flex-shrink:0}.ico-btn:hover{background:var(--surface2);color:var(--text)}.ico-btn.liked{color:var(--warm)!important}.ico-btn.active-color{color:var(--accent2)!important}@media (max-width: 768px){.ico-btn{width:34px;height:34px}}.player-bar{grid-row:2 / 3;grid-column:1 / 3;background:var(--bg2);border-top:1px solid var(--border);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;padding:0 20px;gap:16px;position:relative;overflow:hidden}@media (max-width: 768px){.player-bar{grid-column:1 / 2;grid-template-columns:1fr auto;padding:0 12px;gap:8px;position:fixed;bottom:var(--bottom-nav);left:0;right:0;height:var(--player-h);z-index:200}}.player-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(var(--accentRGB),.04),transparent);pointer-events:none}.player-track{display:flex;align-items:center;gap:12px;min-width:0}.player-thumb{width:52px;height:52px;border-radius:9px;background:var(--surface);overflow:hidden;flex-shrink:0;box-shadow:0 4px 16px #00000080}.player-thumb img{width:100%;height:100%;object-fit:cover;display:block}.player-thumb.spin img{animation:spinArt 10s linear infinite}@keyframes spinArt{to{transform:rotate(360deg)}}@media (max-width: 768px){.player-thumb{width:44px;height:44px;border-radius:7px}}.player-track-info{min-width:0;flex:1}.player-track-title{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}.player-track-artist{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-center{display:flex;flex-direction:column;align-items:center;gap:7px}@media (max-width: 768px){.player-center{display:none}}.player-btns{display:flex;align-items:center;gap:8px}.ctrl{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text2);transition:all .14s var(--ease);flex-shrink:0}.ctrl:hover{color:var(--text);transform:scale(1.1)}.ctrl.on{color:var(--accent2)}.ctrl-play{width:42px;height:42px;background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 0 20px var(--glow2)}.ctrl-play:hover{transform:scale(1.07);box-shadow:0 0 28px var(--glow3)}.ctrl-play:disabled{opacity:.4;transform:none}.progress-wrap{display:flex;align-items:center;gap:9px;width:100%;max-width:460px}.time{font-size:11px;color:var(--text3);font-variant-numeric:tabular-nums;min-width:32px}.time:last-child{text-align:right}.prog-track{flex:1;height:3px;background:var(--surface);border-radius:3px;position:relative;cursor:pointer;transition:height .13s}.prog-track:hover{height:5px}.prog-fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:3px;pointer-events:none}.prog-thumb{position:absolute;right:-5px;top:50%;transform:translateY(-50%);width:10px;height:10px;background:#fff;border-radius:50%;opacity:0;transition:opacity .13s;pointer-events:none}.prog-track:hover .prog-thumb{opacity:1}.player-right{display:flex;align-items:center;justify-content:flex-end;gap:6px}.mobile-player-controls{display:none}@media (max-width: 768px){.player-right{display:none}.mobile-player-controls{display:flex;align-items:center;gap:4px}}.vol-wrap{display:flex;align-items:center;gap:7px}.vol-slider{-webkit-appearance:none;width:76px;height:3px;background:var(--surface);border-radius:3px;outline:none;cursor:pointer}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;background:var(--accent2);border-radius:50%}.lyrics-panel{position:fixed;right:0;top:0;bottom:var(--player-h);width:320px;background:var(--bg2);border-left:1px solid var(--border);display:flex;flex-direction:column;transform:translate(100%);transition:transform .32s var(--ease);z-index:200}.lyrics-panel.open{transform:translate(0)}@media (max-width: 768px){.lyrics-panel{width:100%;bottom:calc(var(--player-h) + var(--bottom-nav));border-left:none}}.lyrics-panel-head{padding:18px 18px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.lyrics-panel-title{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:-.2px}.lyrics-body{flex:1;overflow-y:auto;padding:18px}.lyric-line{padding:5px 0;font-size:14px;line-height:1.65;color:var(--text3);transition:all .25s var(--ease);cursor:pointer}.lyric-line:hover{color:var(--text2)}.lyric-line.now{color:var(--text);font-size:16px;font-weight:600}.mood-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:12px;margin-bottom:34px}@media (max-width: 768px){.mood-grid{grid-template-columns:repeat(2,1fr);gap:10px}}.mood-card{aspect-ratio:1;border-radius:var(--radius);display:flex;flex-direction:column;justify-content:flex-end;padding:14px;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s var(--ease);position:relative;overflow:hidden}.mood-card:hover{transform:translateY(-3px);box-shadow:0 14px 36px #0006}.mood-card:active{transform:scale(.97)}.mood-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.5) 100%)}.mood-emoji{font-size:26px;margin-bottom:6px;position:relative;z-index:1}.mood-name{font-family:var(--font-display);font-size:14px;font-weight:700;color:#fff;position:relative;z-index:1}.mood-sub{font-size:11px;color:#fff9;margin-top:1px;position:relative;z-index:1}.tabs{display:flex;gap:6px;margin-bottom:22px}.tab-btn{padding:8px 18px;border-radius:50px;font-size:13px;font-weight:500;transition:all .15s var(--ease);color:var(--text2);background:var(--bg3)}.tab-btn.on{background:var(--accent);color:#fff;box-shadow:0 4px 12px var(--glow2)}@media (max-width: 768px){.tab-btn{padding:9px 16px;font-size:14px}}.pl-list{display:flex;flex-direction:column;gap:6px;margin-bottom:28px}.pl-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border);background:var(--bg3);transition:all .14s var(--ease)}.pl-item:hover{background:var(--bg4);border-color:var(--border2)}.pl-item:active{transform:scale(.99)}.pl-item-art{width:42px;height:42px;border-radius:7px;background:rgba(var(--accentRGB),.15);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;overflow:hidden}.pl-item-art img{width:100%;height:100%;object-fit:cover}.pl-item-info{flex:1;min-width:0}.pl-item-name{font-size:13.5px;font-weight:600;margin-bottom:2px}.pl-item-count{font-size:11.5px;color:var(--text2)}.new-pl-btn{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border:1.5px dashed var(--border2);border-radius:var(--radius-sm);color:var(--text2);font-size:13px;font-weight:500;transition:all .14s var(--ease);margin-bottom:20px}.new-pl-btn:hover{border-color:var(--accent);color:var(--accent2);background:var(--glow)}.dl-item{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;transition:background .13s}.dl-item:hover{background:var(--bg3)}.dl-art{width:48px;height:48px;border-radius:7px;background:var(--surface);overflow:hidden;flex-shrink:0}.dl-art img{width:100%;height:100%;object-fit:cover}.dl-info{flex:1;min-width:0}.dl-title{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dl-meta{font-size:11.5px;color:var(--text3);margin-top:1px}.offline-pill{padding:3px 9px;background:rgba(var(--greenRGB),.12);border:1px solid rgba(var(--greenRGB),.25);border-radius:50px;font-size:10px;font-weight:600;color:var(--green);letter-spacing:.5px;flex-shrink:0}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fadeIn .18s var(--ease)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg3);border:1px solid var(--border2);border-radius:var(--radius);padding:24px;width:360px;box-shadow:0 24px 64px #0009;animation:slideUp .22s var(--ease);margin:16px}@keyframes slideUp{0%{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}@media (max-width: 768px){.modal{width:100%;margin:16px}}.modal-title{font-family:var(--font-display);font-size:18px;font-weight:700;margin-bottom:16px}.modal-input{width:100%;background:var(--bg4);border:1.5px solid var(--border2);border-radius:var(--radius-sm);padding:10px 13px;color:var(--text);font-size:14px;outline:none;margin-bottom:16px;transition:border-color .15s}.modal-input:focus{border-color:var(--accent)}.modal-footer{display:flex;gap:8px;justify-content:flex-end}.btn{padding:9px 20px;border-radius:50px;font-size:13px;font-weight:600;transition:all .14s var(--ease)}.btn-ghost{background:var(--surface);color:var(--text2)}.btn-ghost:hover{background:var(--surface2);color:var(--text)}.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent3));color:#fff;box-shadow:0 4px 14px var(--glow2)}.btn-primary:hover{box-shadow:0 6px 20px var(--glow3);transform:translateY(-1px)}.toast{position:fixed;bottom:calc(var(--player-h) + var(--bottom-nav) + 18px);left:50%;transform:translate(-50%) translateY(12px);background:var(--bg4);border:1px solid var(--border2);border-radius:50px;padding:9px 20px;font-size:13px;font-weight:500;color:var(--text);opacity:0;transition:all .28s var(--ease);pointer-events:none;white-space:nowrap;z-index:9999;box-shadow:0 6px 24px #00000080}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px 20px;gap:10px;text-align:center}.empty-ico{font-size:44px;opacity:.35}.empty-head{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text2);margin-top:4px}.empty-body{font-size:13px;color:var(--text3)}.dots{display:flex;gap:7px;justify-content:center;padding:44px 0}.dot{width:7px;height:7px;background:var(--accent);border-radius:50%;animation:dotBounce 1.1s ease-in-out infinite}.dot:nth-child(2){animation-delay:.18s}.dot:nth-child(3){animation-delay:.36s}@keyframes dotBounce{0%,80%,to{transform:translateY(0);opacity:.35}40%{transform:translateY(-9px);opacity:1}}.wave{display:flex;align-items:center;gap:2px;height:14px}.wave-b{width:3px;border-radius:2px;background:var(--accent2);animation:waveAnim .75s ease-in-out infinite}.wave-b:nth-child(1){animation-delay:0s}.wave-b:nth-child(2){animation-delay:.14s}.wave-b:nth-child(3){animation-delay:.28s}@keyframes waveAnim{0%,to{height:4px}50%{height:14px}}.api-notice{background:rgba(var(--accentRGB),.07);border:1px solid rgba(var(--accentRGB),.18);border-radius:var(--radius);padding:14px 18px;margin-bottom:26px;display:flex;align-items:center;gap:12px}.api-notice-text{font-size:13px;color:var(--text2);line-height:1.55}.api-notice-text strong{color:var(--accent2)}.settings-section{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:16px}.settings-section-title{font-size:11px;font-weight:600;margin-bottom:14px;color:var(--text2);text-transform:uppercase;letter-spacing:.8px}.settings-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}.settings-row:last-child{border-bottom:none;padding-bottom:0}.settings-label{font-size:14px;font-weight:500}.settings-desc{font-size:12px;color:var(--text2);margin-top:1px}.settings-input{flex:1;max-width:280px;background:var(--bg4);border:1.5px solid var(--border2);border-radius:var(--radius-sm);padding:8px 12px;color:var(--text);font-size:13px;outline:none;transition:border-color .15s}.settings-input:focus{border-color:var(--accent)}