
:root{--bg:#0a0a0f;--panel:#14141c;--panel2:#1c1c26;--line:#2a2a38;--txt:#37d96c;--muted:#5cb87f;--acc:#1db954;--acc2:#37d96c}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{background:var(--bg);color:var(--txt);font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh;padding-bottom:150px;-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
.wrap{max-width:720px;margin:0 auto;padding:20px 16px}
header{text-align:center;padding:8px 0 14px}
header h1{font-size:1.5rem;letter-spacing:.1em;font-weight:600}
.notice{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.notice .nlabel{color:var(--txt);font-size:.88rem;font-weight:600;flex-shrink:0}
.notice .marquee{flex:1;overflow:hidden;white-space:nowrap}
.notice .marquee span{display:inline-block;color:var(--acc);font-size:.85rem;padding-left:100%;animation:mq 45s linear infinite}
@keyframes mq{to{transform:translateX(-100%)}}
.notice .ntoday{color:var(--txt);font-size:.82rem;flex-shrink:0}
#list{display:flex;flex-direction:column;gap:8px}
.song{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:.15s}
.song:hover{background:var(--panel2)}
.song.playing{border-color:var(--acc);background:#12241a}
.song .num{width:26px;text-align:center;color:var(--muted);font-size:.85rem;flex-shrink:0}
.song.playing .num{color:var(--acc)}
.song.playing .num::before{content:"♪";font-size:1rem}
.song .info{flex:1;min-width:0}
.song .t{font-size:.95rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.song .eq{display:none;gap:2px;align-items:flex-end;height:16px;flex-shrink:0}
.song.playing .eq{display:flex}
.song .eq i{width:3px;background:linear-gradient(180deg,#4ade80,#1db954);border-radius:2px;animation:eq .9s ease-in-out infinite}
.song .eq i:nth-child(2){animation-delay:.25s}
.song .eq i:nth-child(3){animation-delay:.5s}
@keyframes eq{0%,100%{height:5px}50%{height:16px}}
.empty{text-align:center;color:var(--muted);padding:70px 0;line-height:2}
.search{margin:0 0 14px;display:flex;gap:8px;align-items:stretch}
.search input{width:100%;flex:1;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:11px 14px;color:var(--txt);font-size:.9rem;outline:none;transition:.15s}
.search input:focus{border-color:var(--acc)}
.dl-btn{display:flex;align-items:center;flex:0 0 auto;border:1px solid #ff7ab8;color:var(--acc);border-radius:10px;padding:11px 16px;font-size:.9rem;text-decoration:none;white-space:nowrap;transition:.15s}
.dl-btn:active{background:var(--acc);color:#0a0a0f}
.search input::placeholder{color:var(--muted)}
.chips{display:flex;gap:8px;margin:0 0 14px}
.chip{flex:1;text-align:center;padding:9px 0;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:.86rem;color:var(--txt);cursor:pointer;transition:.15s;user-select:none}
.chip:hover{border-color:var(--acc)}
.chip.on{background:#12241a;border-color:var(--acc);color:var(--acc);font-weight:600}
.chip-lk{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;text-align:center;padding:9px 0;
  background:linear-gradient(180deg,#15291d,#101d16);border:1px solid var(--acc);border-radius:10px;
  font-size:.86rem;color:var(--acc2);font-weight:600;text-decoration:none;white-space:nowrap;transition:.15s;
  box-shadow:0 0 0 0 rgba(29,185,84,.35)}
.chip-lk:hover{border-color:var(--acc2);box-shadow:0 0 10px rgba(29,185,84,.35)}
.chip-lk:active{background:var(--acc);color:#08120b}
.chip-lk .rl{width:6px;height:6px;border-radius:50%;background:var(--acc2);box-shadow:0 0 6px var(--acc2);flex:none}
.empty .home-link{display:inline-block;margin-top:12px;padding:9px 28px;border:1px solid var(--acc);border-radius:10px;color:var(--acc);text-decoration:none;font-size:.9rem;transition:.15s}
.empty .home-link:hover{background:#12241a}
#sentinel{height:1px}
.end{text-align:center;color:var(--muted);font-size:.75rem;padding:14px 0}
.foot{text-align:center;color:var(--muted);font-size:.72rem;line-height:2;padding:26px 12px 6px;opacity:.85}
.foot a{color:var(--muted);text-decoration:none;border-bottom:1px dashed var(--line)}
.foot a:hover{color:var(--acc)}
.empty a{color:var(--acc);text-decoration:none}
/* 播放器底栏 */
#player{position:fixed;left:0;right:0;bottom:0;background:rgba(16,16,24,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:10px 16px calc(10px + env(safe-area-inset-bottom));z-index:99}
#player .inner{max-width:720px;margin:0 auto}
#bar{width:100%;height:4px;-webkit-appearance:none;appearance:none;background:var(--line);border-radius:2px;cursor:pointer;margin-bottom:10px}
#bar::-webkit-slider-thumb{-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--acc)}
#bar::-moz-range-thumb{width:12px;height:12px;border:none;border-radius:50%;background:var(--acc)}
.ctl{display:flex;align-items:center;gap:14px}
/* 播放条大音柱动画 */
.big-eq{display:flex;gap:4px;align-items:flex-end;height:44px;flex-shrink:0}
.big-eq i{width:5px;border-radius:2px;background:linear-gradient(180deg,#4ade80,#1db954);box-shadow:0 0 8px rgba(29,185,84,.55)}
.big-eq i:nth-child(1){height:10px;animation:eqa .9s ease-in-out infinite}
.big-eq i:nth-child(2){height:28px;animation:eqb .7s ease-in-out infinite .12s}
.big-eq i:nth-child(3){height:44px;animation:eqc 1.1s ease-in-out infinite .24s}
.big-eq i:nth-child(4){height:22px;animation:eqb .8s ease-in-out infinite .38s}
.big-eq i:nth-child(5){height:32px;animation:eqa 1s ease-in-out infinite .5s}
.big-eq.off i{animation-play-state:paused}
@keyframes eqa{0%,100%{height:10px}50%{height:44px}}
@keyframes eqb{0%,100%{height:30px}40%{height:8px}70%{height:36px}}
@keyframes eqc{0%,100%{height:44px}30%{height:13px}60%{height:30px}}
.ctl .meta{flex:0 1 auto;min-width:0}
.btns{display:flex;gap:10px;align-items:center;margin:0 auto;flex-shrink:0}
.ctl .now{font-size:.88rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctl .time{color:var(--muted);font-size:.72rem;margin-top:2px}
.btn{width:42px;height:42px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--panel2);color:var(--txt);transition:.15s;flex-shrink:0}
.btn:hover{background:var(--line)}
.btn svg{width:20px;height:20px;fill:currentColor;display:block}
.btn.play{width:52px;height:52px;background:var(--acc);color:#0a0a0f}
.btn.play svg{width:24px;height:24px}
.btn.play:hover{background:#22c55e}
.btn .ico-pause{display:none}
.btn.playing .ico-play{display:none}
.btn.playing .ico-pause{display:block}
@media(max-width:480px){
  header h1{font-size:1.25rem}
  .ctl{gap:10px}
  .btn{width:38px;height:38px}
  .btn.play{width:48px;height:48px}
  .chips{gap:6px}
  .chip,.chip-lk{font-size:.8rem;padding:8px 0;border-radius:9px}
  .chip-lk{gap:3px}
  .chip-lk .rl{width:5px;height:5px}
}
