:root{--bg-base: #121212;--bg-elevated: #181818;--bg-elevated-2: #1f1f1f;--bg-hover: #282828;--bg-active: #383838;--accent: #1db954;--accent-hover: #1ed760;--accent-soft: rgba(29, 185, 84, .15);--text-primary: #ffffff;--text-secondary: #b3b3b3;--text-muted: #6a6a6a;--border: rgba(255, 255, 255, .08);--shadow: 0 8px 24px rgba(0, 0, 0, .5);--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--player-height: 90px;--header-height: 64px;--sidebar-width: 320px}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{background:var(--bg-base);color:var(--text-primary);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden}button{background:transparent;border:none;color:inherit;cursor:pointer;font:inherit}input{background:transparent;border:none;color:inherit;font:inherit;outline:none}a{color:inherit;text-decoration:none}audio{display:none!important}.app-shell{display:grid;grid-template-rows:var(--header-height) 1fr var(--player-height);height:100vh;height:100dvh}.app-header{display:flex;align-items:center;padding:0 24px;background:#121212f2;backdrop-filter:blur(12px);border-bottom:1px solid var(--border);gap:16px;position:sticky;top:0;z-index:10}.brand{font-weight:700;font-size:18px;letter-spacing:.4px;display:flex;align-items:center;gap:8px;flex-shrink:0}.brand-mark{width:28px;height:28px;border-radius:50%;background:var(--accent);display:grid;place-items:center;color:#000;font-size:14px}.favorites-btn{display:flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;background:var(--bg-elevated);color:var(--text-secondary);font-size:13px;font-weight:500;border:1px solid transparent;white-space:nowrap;transition:color .15s,background .15s,transform .1s;flex-shrink:0;cursor:pointer}.favorites-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.favorites-btn:active{transform:scale(.97)}.favorites-btn.active{color:var(--accent);background:var(--accent-soft)}.favorites-count{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:12px;text-align:center}.favorites-btn.has-items .favorites-count{color:var(--accent);font-weight:600}.fav-btn{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--text-muted);background:transparent;transition:color .15s,background .15s,transform .1s;cursor:pointer}.fav-btn:hover{color:var(--accent);background:var(--accent-soft);transform:scale(1.1)}.fav-btn.active{color:var(--accent)}.search-cluster{flex:1;display:flex;align-items:center;gap:16px;min-width:0}.search-bar{flex:1;min-width:0;max-width:480px;display:flex;align-items:center;gap:10px;background:var(--bg-elevated);border:1px solid var(--border);border-radius:999px;padding:10px 16px;transition:border-color .2s,background .2s}.search-bar:focus-within{border-color:var(--accent);background:var(--bg-elevated-2)}.search-bar input{flex:1;font-size:14px;min-width:0}.search-bar .icon{color:var(--text-secondary);display:grid;place-items:center;flex-shrink:0}.source-pills{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;flex-shrink:0;padding:2px}.source-pills::-webkit-scrollbar{display:none}.pill{padding:7px 14px;border-radius:999px;font-size:12px;font-weight:500;background:var(--bg-elevated);color:var(--text-secondary);border:1px solid transparent;white-space:nowrap;transition:color .15s,background .15s,transform .1s;cursor:pointer}.pill:hover{color:var(--text-primary);background:var(--bg-hover)}.pill:active{transform:scale(.96)}.pill.active{background:var(--accent);color:#000;font-weight:600}.pill.active:hover{background:var(--accent-hover);color:#000}.main-area{display:grid;grid-template-columns:1fr var(--sidebar-width);overflow:hidden;min-height:0}.track-list-panel{overflow-y:auto;padding:16px 24px 24px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-secondary);margin-bottom:12px;display:flex;align-items:center;gap:12px}.section-title .meta{font-size:12px;color:var(--text-muted);text-transform:none;letter-spacing:0}.track-list{display:flex;flex-direction:column}.track-row{display:grid;grid-template-columns:32px 1fr auto auto auto;align-items:center;gap:14px;padding:10px 12px;border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;user-select:none}.track-row:hover{background:var(--bg-hover)}.track-row.active{background:var(--bg-active)}.track-row.active .track-name{color:var(--accent)}.track-row .index{color:var(--text-secondary);font-variant-numeric:tabular-nums;font-size:13px;display:grid;place-items:center}.track-row:hover .index,.track-row.active .index{color:var(--accent)}.track-row .play-icon,.track-row:hover .index-num,.track-row.active .index-num{display:none}.track-row:hover .play-icon,.track-row.active .play-icon{display:block}.track-main{min-width:0}.track-name{font-size:15px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.track-artist-album{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.track-source-tag{font-size:10px;padding:2px 6px;border-radius:var(--radius-sm);background:var(--bg-elevated-2);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px}.track-duration{color:var(--text-secondary);font-size:13px;font-variant-numeric:tabular-nums}.empty-state{padding:64px 24px;text-align:center;color:var(--text-secondary)}.empty-state .title{font-size:18px;margin-bottom:8px;color:var(--text-primary)}.empty-state .subtitle{font-size:13px;color:var(--text-muted)}.loading-row{padding:10px 12px;color:var(--text-secondary);font-size:13px}.lyric-panel{background:linear-gradient(180deg,var(--bg-elevated) 0%,var(--bg-base) 100%);border-left:1px solid var(--border);overflow:hidden;display:flex;flex-direction:column;padding:16px 0 24px}.lyric-header{padding:0 24px 12px;display:flex;align-items:center;justify-content:space-between}.lyric-header .title{font-size:12px;text-transform:uppercase;letter-spacing:1.2px;color:var(--text-secondary)}.lyric-body{flex:1;overflow-y:auto;padding:24px 24px 80px;mask-image:linear-gradient(180deg,transparent 0,#000 80px,#000 calc(100% - 80px),transparent 100%);scroll-behavior:smooth}.lyric-line{font-size:16px;font-weight:600;line-height:1.6;padding:10px 0;color:var(--text-muted);cursor:pointer;transition:color .2s,transform .3s}.lyric-line.translation{font-size:13px;font-weight:500;color:var(--text-muted);padding-top:0;margin-top:-4px;margin-bottom:8px}.lyric-line.empty{height:24px}.lyric-line.active{color:var(--accent);transform:scale(1.02)}.lyric-empty{display:grid;place-items:center;height:100%;color:var(--text-muted);font-size:13px;text-align:center;padding:0 24px}.player{display:grid;grid-template-columns:280px 1fr 120px;align-items:center;padding:0 24px;background:var(--bg-elevated);border-top:1px solid var(--border);gap:24px}.player-track-info{display:flex;align-items:center;gap:12px;min-width:0}.player-cover{width:56px;height:56px;border-radius:var(--radius-sm);background:var(--bg-elevated-2);display:grid;place-items:center;color:var(--text-muted);flex-shrink:0;overflow:hidden}.player-cover img{width:100%;height:100%;object-fit:cover}.player-meta{min-width:0}.player-track-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-track-artist{font-size:12px;color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}.player-center{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:760px;margin:0 auto;width:100%}.player-controls{display:flex;align-items:center;gap:20px}.player-controls .icon-btn{color:var(--text-secondary);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:color .2s,background .2s,transform .15s}.player-controls .icon-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.player-controls .icon-btn:active{transform:scale(.92)}.player-controls .play-btn{background:var(--text-primary);color:#000;width:36px;height:36px}.player-controls .play-btn:hover{background:#fff;color:#000;transform:scale(1.06)}.player-controls .play-btn:disabled,.player-controls .icon-btn:disabled{opacity:.4;cursor:not-allowed}.progress-bar{display:flex;align-items:center;gap:10px;width:100%;font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}.progress-track{flex:1;height:4px;background:var(--bg-active);border-radius:2px;cursor:pointer;position:relative;overflow:hidden}.progress-track:hover{background:var(--bg-hover)}.progress-fill{position:absolute;left:0;top:0;bottom:0;background:var(--text-primary);width:0%;border-radius:2px}.progress-track:hover .progress-fill{background:var(--accent)}.player-extras{display:flex;align-items:center;justify-content:flex-end;min-width:0}.volume-control{position:relative;display:flex;align-items:center}.volume-btn{color:var(--text-secondary);width:32px;height:32px;border-radius:50%;display:grid;place-items:center;transition:color .2s,background .2s}.volume-btn:hover{color:var(--text-primary);background:var(--bg-hover)}.volume-slider{position:absolute;bottom:calc(100% + 12px);right:-4px;background:var(--bg-elevated-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:14px 10px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:20}.volume-slider:after{content:"";position:absolute;bottom:-6px;right:14px;width:10px;height:10px;background:var(--bg-elevated-2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);transform:rotate(45deg)}@media(hover:hover){.volume-control:hover .volume-slider,.volume-control:focus-within .volume-slider{opacity:1;visibility:visible;transform:translateY(0)}}.volume-control.open .volume-slider{opacity:1;visibility:visible;transform:translateY(0)}.volume-slider input[type=range]{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:6px;height:90px;accent-color:var(--accent);cursor:pointer}.app-footer-note{position:fixed;bottom:calc(var(--player-height) + 8px);right:16px;font-size:11px;color:var(--text-muted);background:#00000080;padding:4px 8px;border-radius:var(--radius-sm);pointer-events:none;z-index:5}@media(max-width:900px){:root{--sidebar-width: 280px;--header-height: 64px}.app-header{padding:0 12px;gap:8px}.brand{font-size:0;gap:0}.brand-mark{width:32px;height:32px}.favorites-label{display:none}.favorites-btn{padding:7px 10px}.search-cluster{gap:8px}.player{grid-template-columns:1fr auto;gap:12px;padding:0 12px}.player-center{grid-column:1 / -1;grid-row:2}.player-extras{grid-column:2;grid-row:1}}@media(max-width:720px){:root{--header-height: auto;--player-height: auto}.app-shell{grid-template-rows:auto 1fr auto}.app-header{flex-wrap:wrap;padding:8px 12px;gap:6px 8px}.brand{order:1}.search-cluster{order:2;flex:1 1 100%;flex-wrap:wrap;gap:6px}.search-bar{flex:1 1 100%;max-width:none;padding:8px 12px}.source-pills{flex:1 1 100%;justify-content:flex-start;gap:4px}.pill{padding:6px 12px;font-size:11px}.main-area{grid-template-columns:1fr}.lyric-panel{display:none}.player{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;padding:10px 12px;gap:6px 10px}.player-track-info{grid-column:1;grid-row:1;min-width:0}.player-track-info .player-meta{display:flex;flex-direction:column;min-width:0}.player-extras{grid-column:2;grid-row:1;align-self:center;justify-self:end}.player-center{grid-column:1 / -1;grid-row:2;width:100%;max-width:none;margin:0}.player-controls{gap:16px}.progress-bar{gap:8px}.volume-control.open .volume-slider{right:0;bottom:calc(100% + 8px)}.app-footer-note{display:none}}@media(max-width:480px){.player-cover{width:44px;height:44px}.player-track-name{font-size:13px}.player-track-artist{font-size:11px}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:5px}::-webkit-scrollbar-thumb:hover{background:#fff3}