*{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#121212;--panel:#1e1e1e;--accent:#1db954;--text:#fff;--muted:#b3b3b3}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:110px}
#app{max-width:960px;margin:0 auto;padding:20px}
header{text-align:center;margin-bottom:20px}
header h1{font-size:28px}
header .sub{color:var(--muted);font-size:12px;margin-top:6px}
.search-bar{display:flex;gap:10px;margin-bottom:16px}
.search-bar input{flex:1;padding:12px 16px;border:none;border-radius:24px;background:#2a2a2a;color:#fff;font-size:15px;outline:none}
.search-bar input:focus{background:#333}
.search-bar button{padding:12px 28px;border:none;border-radius:24px;background:var(--accent);color:#fff;font-size:15px;cursor:pointer}
.search-bar button:hover{filter:brightness(1.1)}
.status{padding:10px 16px;border-radius:8px;margin-bottom:12px;font-size:14px}
.status.hidden{display:none}
.status.error{background:#4a1a1a;color:#ff8a8a}
.status.info{background:#1a3a4a;color:#8ad0ff}
main{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:var(--panel);border-radius:12px;padding:16px;min-height:200px}
.panel h2{font-size:16px;margin-bottom:12px;display:flex;justify-content:space-between;align-items:center}
.mini-btn{background:#333;border:none;color:var(--muted);padding:4px 10px;border-radius:6px;font-size:12px;cursor:pointer}
.song-list{list-style:none;max-height:320px;overflow-y:auto}
.song-list li{padding:10px 8px;border-bottom:1px solid #2a2a2a;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:8px}
.song-list li:hover{background:#2a2a2a}
.song-list li.playing{color:var(--accent)}
.song-list .s-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.song-list .s-artist{color:var(--muted);font-size:13px;flex-shrink:0}
.song-list .empty{color:var(--muted);text-align:center;padding:20px;cursor:default}
.lyrics{max-height:320px;overflow-y:auto;line-height:2;text-align:center;color:var(--muted)}
.lyrics .placeholder{padding:40px 0}
.lyrics .line{transition:color .3s}
.lyrics .line.active{color:var(--accent);font-weight:bold;font-size:17px}
#player{position:fixed;bottom:0;left:0;right:0;background:#181818;border-top:1px solid #2a2a2a;padding:12px 20px;display:flex;align-items:center;gap:14px}
#cover{width:52px;height:52px;border-radius:8px;background:#2a2a2a;object-fit:cover}
#cover[src=""]{visibility:hidden}
.meta{flex-shrink:0;min-width:0;max-width:200px}
#songName{font-weight:bold;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#artistName{color:var(--muted);font-size:13px}
.controls{display:flex;gap:8px}
.controls button{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:6px}
.controls button:hover{color:var(--accent)}
#playBtn{font-size:28px}
.progress{flex:1;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}
.progress input[type=range]{flex:1;accent-color:var(--accent)}
#volume{width:90px;accent-color:var(--accent)}
@media(max-width:700px){
  main{grid-template-columns:1fr}
  .meta{max-width:120px}
  #volume{display:none}
}