:root{ --bg:#0b0f14; --panel:rgba(255,255,255,.06); --panel2:rgba(255,255,255,.09); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.68); --line:rgba(255,255,255,.12); --shadow: 0 20px 70px rgba(0,0,0,.55); --radius: 18px; }
*{box-sizing:border-box}
html,body{height:100%; min-height:100%}
body{ margin:0; color:var(--text); font:16px/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; background-color:#0b0f14; overflow-x:hidden; display:flex; flex-direction:column; min-height:100vh; }
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background: radial-gradient(1000px 600px at 50% 10%, rgba(255,255,255,.10), transparent 65%),
              radial-gradient(900px 600px at 20% 80%, rgba(120,160,210,.10), transparent 60%),
              radial-gradient(900px 600px at 80% 80%, rgba(160,120,210,.08), transparent 60%),
              linear-gradient(180deg, #070a0f 0%, #0b0f14 55%, #070a0f 100%);
}
.wrap{max-width:1100px;margin:0 auto;padding:28px 18px 60px; flex:1 0 auto}
@supports (min-height: 100dvh){ body{ min-height:100dvh } }
a{color:inherit}
header{ display:flex; gap:22px; align-items:center; justify-content:space-between; margin:10px 0 22px; }
.brand{ display:flex; gap:14px; align-items:center; min-width:280px; }
.logo{ width:108px;height:108px;border-radius:20px; background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.05)); border:1px solid var(--line); display:grid; place-items:center; box-shadow: var(--shadow); flex:0 0 auto; overflow:hidden; }
.logo img{ width:100%; height:100%; object-fit: contain; display:block; }
h1{ margin:0; font-size:18px; letter-spacing:.18em; text-transform:uppercase; }
.sub{ margin:3px 0 0; color:var(--muted); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.btn{ padding:10px 12px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text); text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select:none; font-size:14px; }
.btn:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18) }
.hero{ display:grid; grid-template-columns: 1.05fr .95fr; gap:18px; align-items:stretch; }
@media (max-width: 920px){
  .hero{ grid-template-columns: 1fr; }
  header{ flex-wrap: wrap; }
  .actions{ justify-content:flex-start; }
  .cover .label{ display:none; }
}
.card{ background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04)); border:1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; position:relative; }
.cover{ min-height: 420px; background: radial-gradient(900px 500px at 50% 0%, rgba(255,255,255,.12), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55)); display:flex; padding:18px; align-items:flex-end; position:relative; }
.cover::before{ content:""; position:absolute; inset:-20px; background-image:url('/background'); background-size:cover; background-position:center; background-repeat:no-repeat; filter: blur(16px) saturate(1.05); transform: scale(1.04); z-index:-1; opacity:.85; }
.cover > *{ position:relative; z-index:1; }
.cover.has-img{ background-image: url('/cover'); background-repeat:no-repeat; background-position:center; background-size:contain; }
.cover .label{ background: rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.14); backdrop-filter: blur(10px); border-radius: 14px; padding:12px 14px; max-width:560px; }
.cover .label .artist{ letter-spacing:.22em; text-transform:uppercase; font-weight:700; font-size:12px; color: rgba(255,255,255,.78); margin-bottom:4px; }
.cover .label .album{ margin:0; letter-spacing:.12em; text-transform:uppercase; font-weight:800; font-size:16px; }
.cover .label .hint{ margin:6px 0 0; color: rgba(255,255,255,.72); font-size:13px; }
.right{ padding:16px; display:flex; flex-direction:column; gap:12px; }
.now{ padding:14px; border-radius: 16px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.12); }
.now h2{ margin:0 0 8px; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.75); }
.trackTitle{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; margin-bottom:10px; }
.trackTitle strong{ font-size:18px; letter-spacing:.02em; }
.trackTitle span{ color: var(--muted); font-size:13px; }
audio{ width:100%; accent-color: #cfd8e3; filter: saturate(.9); }
.controls{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; margin-top:8px; }
.ctrl{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:10px; padding:10px 12px; border-radius:10px; background: rgba(255,255,255,.10); border:1px solid var(--line); cursor:pointer; width:100%; color:#fff; text-transform:uppercase; letter-spacing:.02em; }
.ctrl .icon{ font-size:18px; line-height:1; display:block; }
.ctrl .label{ font-size:10px; line-height:1.1; display:block; }
.ctrl:hover{ background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.20); }
.list{ display:flex; flex-direction:column; gap:10px; padding-right:6px; }
.list{ scrollbar-width: auto; scrollbar-color: rgba(255,255,255,.35) rgba(255,255,255,.08); }
.list::-webkit-scrollbar{ width:14px; }
.list::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:999px; }
.list::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.22)); border:1px solid rgba(255,255,255,.25); border-radius:999px; }
.list::-webkit-scrollbar-thumb:hover{ background: linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,.30)); }
.row{ border-radius:16px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.04); padding:12px 12px; display:grid; grid-template-columns: 44px 1fr; gap:12px; align-items:center; transition: background .12s ease, border-color .12s ease, transform .12s ease; cursor:pointer; }
.row:hover{ background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); }
.row.playing{ border-color: silver; }
.idx{ width:44px;height:44px;border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); display:grid; place-items:center; color: rgba(255,255,255,.85); font-weight:800; letter-spacing:.06em; }
.meta .name{font-weight:700}
.meta .desc{ color: var(--muted); font-size:12.5px; margin-top:2px; letter-spacing:.02em; }
.pill{ padding:8px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); color: rgba(255,255,255,.78); font-size:12px; letter-spacing:.08em; text-transform:uppercase; user-select:none; }
.fine{ margin-top:6px; opacity:.9; }