:root{--bg:#0b1020;--card:#121a35;--txt:#fff;--muted:rgba(255,255,255,.75);--b:rgba(255,255,255,.12);--g:#4ade80;--c:#60a5fa}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(135deg,#0b1020,#1b1030);color:var(--txt)}
.top{position:sticky;top:0;z-index:5;display:flex;gap:12px;align-items:center;justify-content:space-between;padding:14px 14px;border-bottom:1px solid var(--b);background:rgba(11,16,32,.85);backdrop-filter: blur(10px)}
.brand{display:flex;gap:12px;align-items:center}
.logo{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.25);font-size:20px}
.t{font-weight:900}
.s{font-size:12px;color:var(--muted)}
.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:0;border-radius:12px;padding:10px 12px;font-weight:900;cursor:pointer;background:linear-gradient(90deg,var(--g),var(--c));color:#071018}
.btn.ghost{background:rgba(255,255,255,.1);color:var(--txt);border:1px solid var(--b)}
.layout{display:grid;grid-template-columns:360px 1fr;gap:14px;padding:14px;max-width:1200px;margin:0 auto}
.list,.player{background:rgba(18,26,53,.75);border:1px solid var(--b);border-radius:16px;padding:14px}
.listHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.search{width:100%;padding:12px;border-radius:12px;border:1px solid var(--b);background:rgba(0,0,0,.25);color:var(--txt)}
.tracks{margin-top:10px;max-height:65vh;overflow:auto;padding-right:4px}
.track{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.18);cursor:pointer;margin-bottom:8px}
.track:hover{border-color:rgba(96,165,250,.35)}
.track.active{border-color:rgba(74,222,128,.55);background:rgba(74,222,128,.10)}
.track .name{font-weight:800;font-size:13px}
.track .meta{font-size:11px;color:var(--muted)}
.nowTitle{font-weight:900;font-size:18px}
.nowMeta{font-size:12px;color:var(--muted);margin-top:4px}
.controls{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.sliders{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}
.sl label{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);font-weight:800}
.sl input{width:100%}
.lyrics{margin-top:14px;border:1px solid rgba(255,255,255,.10);border-radius:14px;padding:14px;background:rgba(0,0,0,.18);min-height:90px}
.line{font-size:20px;font-weight:900}
.next{margin-top:8px;color:var(--muted)}
.hint{margin-top:12px;font-size:12px;color:var(--muted);line-height:1.35}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr}
  .tracks{max-height:40vh}
  .actions{width:100%}
  .btn{width:100%;text-align:center}
}