:root{--bg:#0a0a0a;--bg-card:#151515;--bg-card-hover:#1c1c1c;--bg-input:#161616;--border:#ffffff12;--text:#f0f0f0;--text-2:#8a8a8a;--text-3:#505050;--accent:#1db954;--accent-glow:#1db95440;--accent-soft:#1db9541f;--red:#e74c3c;--red-soft:#e74c3c26;--r:14px;--safe-b:env(safe-area-inset-bottom,0px);color:var(--text);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;font-family:-apple-system,BlinkMacSystemFont,SF Pro Display,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#app{background:var(--bg);height:100%}body{overscroll-behavior-y:contain;overflow-x:hidden}::-webkit-scrollbar{width:0}.app{max-width:480px;min-height:100vh;padding-bottom:var(--safe-b);margin:0 auto}.app.has-player{padding-bottom:calc(72px + var(--safe-b))}.top-spacer{height:8px}.tabs{z-index:100;background:linear-gradient(to bottom, var(--bg) 80%, transparent);-webkit-backdrop-filter:blur(16px);gap:4px;margin-bottom:4px;padding:8px 16px;display:flex;position:sticky;top:0}.tab-btn{color:var(--text-3);cursor:pointer;background:0 0;border:none;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:8px;padding:11px 16px;font-family:inherit;font-size:.88rem;font-weight:600;transition:all .2s;display:flex}.tab-btn.active{background:var(--bg-card);color:var(--text)}.tab-btn:active{transform:scale(.97)}.tab-count{background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:2px 7px;font-size:.68rem;font-weight:700}.tab-content{padding:4px 12px 20px;animation:.2s fadeIn}@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.search-container{z-index:50;background:var(--bg);padding-bottom:8px;position:sticky;top:52px}.search-input-wrap{border-radius:var(--r);background:var(--bg-input);border:1px solid var(--border);align-items:center;gap:12px;height:48px;padding:0 16px;transition:border-color .2s,box-shadow .2s;display:flex}.search-input-wrap:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}.search-icon{color:var(--text-3);flex-shrink:0}.search-input{color:var(--text);background:0 0;border:none;outline:none;flex:1;min-width:0;font-family:inherit;font-size:.95rem}.search-input::placeholder{color:var(--text-3)}.search-clear{width:28px;height:28px;color:var(--text-2);cursor:pointer;background:#ffffff14;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.state-message{color:var(--text-2);justify-content:center;align-items:center;gap:12px;padding:48px 20px;font-size:.9rem;display:flex}.empty-state{text-align:center;flex-direction:column;align-items:center;padding:56px 20px;display:flex}.empty-icon{margin-bottom:16px}.empty-title{color:var(--text-2);font-size:1rem;font-weight:600}.empty-sub{color:var(--text-3);margin-top:6px;font-size:.85rem}.spinner{border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;width:20px;height:20px;animation:.6s linear infinite spin}.btn-spinner{border:2px solid #ffffff26;border-top-color:var(--accent);border-radius:50%;width:16px;height:16px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.track-list{flex-direction:column;gap:4px;display:flex}.track-card{border-radius:var(--r);background:var(--bg-card);border:1px solid #0000;align-items:center;gap:12px;padding:8px 10px;transition:all .15s;display:flex}.track-card.clickable{cursor:pointer}.track-card.clickable:active{background:var(--bg-card-hover);transform:scale(.985)}.track-card.track-active{background:#1db9540f;border-color:#1db95440}.track-cover{background:#111;border-radius:10px;flex-shrink:0;width:48px;height:48px;position:relative;overflow:hidden}.track-cover img{object-fit:cover;width:100%;height:100%;display:block}.track-cover-fallback{width:100%;height:100%;color:var(--text-3);background:linear-gradient(135deg,#141420,#1a1a2e);justify-content:center;align-items:center;display:flex}.cover-play-overlay{color:#fff;opacity:0;border-radius:inherit;background:#0000008c;justify-content:center;align-items:center;transition:opacity .15s;display:flex;position:absolute;inset:0}.cover-play-overlay.visible,.track-card.clickable:hover .cover-play-overlay{opacity:1}.track-info{flex:1;min-width:0}.track-title{white-space:nowrap;text-overflow:ellipsis;font-size:.88rem;font-weight:600;line-height:1.3;overflow:hidden}.track-title.accent{color:var(--accent)}.track-meta-line{color:var(--text-2);align-items:center;gap:6px;margin-top:2px;font-size:.78rem;display:flex}.track-artist{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.track-dot,.track-duration{color:var(--text-3);flex-shrink:0}.sent-badge{background:var(--accent-soft);width:28px;height:28px;color:var(--accent);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.dl-btn{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s;display:flex}.dl-btn:hover:not(:disabled){box-shadow:0 4px 16px var(--accent-glow);transform:scale(1.08)}.dl-btn:active:not(:disabled){transform:scale(.93)}.dl-btn:disabled{cursor:not-allowed}.dl-btn.loading{background:var(--bg-card);border:2px solid var(--border)}.dl-btn.done{background:var(--accent-soft);color:var(--accent)}.dl-btn.error{background:var(--red-soft);color:var(--red)}.player{border-top:1px solid var(--border);z-index:200;background:#111;width:100%;max-width:480px;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.slide-up-enter-active,.slide-up-leave-active{transition:all .3s}.slide-up-enter-from,.slide-up-leave-to{opacity:0;transform:translate(-50%)translateY(100%)}.player-progress{cursor:pointer;background:#ffffff0f;height:3px}.player-progress-fill{background:var(--accent);height:100%;transition:width .25s linear}.player-body{padding:10px 16px calc(10px + var(--safe-b));cursor:pointer;align-items:center;gap:12px;display:flex;position:relative}.player-cover{background:#1a1a1a;border-radius:8px;flex-shrink:0;width:42px;height:42px;overflow:hidden}.player-cover img{object-fit:cover;width:100%;height:100%;display:block}.player-cover-fb{background:linear-gradient(135deg,#15803d,#1a1a2e);width:100%;height:100%}.player-info{flex:1;min-width:0}.player-title{white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.player-artist{color:var(--text-2);white-space:nowrap;text-overflow:ellipsis;font-variant-numeric:tabular-nums;margin-top:1px;font-size:.72rem;overflow:hidden}.player-vol{width:32px;height:32px;color:var(--text-2);cursor:pointer;background:#ffffff12;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex}.vol-popup{border:1px solid var(--border);z-index:300;background:#1a1a1a;border-radius:12px;padding:12px 16px;position:absolute;bottom:calc(100% + 8px);right:56px;box-shadow:0 8px 32px #0009}.vol-fade-enter-active,.vol-fade-leave-active{transition:all .15s}.vol-fade-enter-from,.vol-fade-leave-to{opacity:0;transform:translateY(6px)}.vol-slider{appearance:none;cursor:pointer;background:#ffffff1a;border-radius:2px;outline:none;width:110px;height:4px}.vol-slider::-webkit-slider-thumb{-webkit-appearance:none;background:var(--accent);border:none;border-radius:50%;width:16px;height:16px}.vol-slider::-moz-range-thumb{background:var(--accent);border:none;border-radius:50%;width:16px;height:16px}.player-play{background:var(--accent);color:#000;cursor:pointer;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;height:38px;transition:transform .15s;display:flex}.player-play:active{transform:scale(.88)}@media (width<=380px){.track-cover{width:42px;height:42px}.hero-title{font-size:1.7rem}}