:root{
  --bg:#0a0b0f; --panel:#14151b; --panel2:#1a1b23;
  --accent:#7ba8ff; --accent2:#9a7bff;
  --text:#f0f1ff; --muted:#a5a6b8; --border:#2b2c37; --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#1b1530 0%,#12111a 50%,#0e0d12 100%);
  color:var(--text);font:500 15px/1.5 ui-sans-serif,system-ui,Segoe UI,Inter}
.frame{display:grid;grid-template-columns:80px 1fr 360px;grid-template-rows:1fr auto;height:100vh}

/* Sidebar */
.side{border-right:1px solid var(--border);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);padding:12px}
.brand{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:grid;place-items:center;font-weight:900;color:#111;margin-bottom:8px}
.side__nav{display:flex;flex-direction:column;gap:8px}
.iconbtn{width:48px;height:48px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);cursor:pointer}

/* Main */
.main{padding:16px 24px 120px;overflow:auto}
.top{display:grid;grid-template-columns:120px 1fr 40px;gap:12px;align-items:center;margin-bottom:16px}
.top__title{margin:0;opacity:.9}
.top__search{width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel2);color:var(--text)}
.top__user{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--panel2)}

.hero{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:32px 20px;gap:16px;background:radial-gradient(circle at 50% 0%, var(--accent2), #14151b 60%);border-radius:var(--radius);border:1px solid var(--border)}
.hero__cover{width:220px;height:220px;border-radius:20px;background:#0003 url('cover.jpg') center/cover no-repeat;box-shadow:0 0 20px #000a}
.eyebrow{letter-spacing:.12em;text-transform:uppercase;margin:.25rem 0;color:var(--muted)}
.hero__meta h1{margin:.25rem 0 0;font-size:38px;line-height:1.05}
.muted{color:var(--muted)}
.hero__actions{display:flex;gap:10px;margin-top:12px}
.btn{background:var(--panel2);color:var(--text);border:1px solid var(--border);padding:10px 16px;border-radius:999px;cursor:pointer}
.btn--primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#111;border:0;font-weight:900}

.row{margin-top:22px}
.row h3{margin:0 0 10px}

.tracks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.track{display:grid;grid-template-columns:28px 1fr 90px;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--border);padding:8px 10px;border-radius:10px;cursor:pointer;
  box-shadow:0 0 10px #0004;transition:transform .1s ease, background .1s ease}
.track:hover{background:var(--panel2);transform:scale(1.01)}
.track--active{outline:2px solid var(--accent)}
.title{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Now playing */
.now{border-left:1px solid var(--border);background:rgba(0,0,0,.25);backdrop-filter:blur(6px);padding:16px;overflow:auto}
.now__cover{width:100%;aspect-ratio:1;border-radius:14px;background:#0003 url('cover.jpg') center/cover no-repeat;margin-bottom:8px}
.now__title{font-weight:800;font-size:20px;margin-bottom:2px}
.now__ctrl{display:flex;gap:10px;margin:8px 0}
.now__ctrl button,.now__seek input,.now__extra select,.now__extra input{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:8px}
.now__ctrl .big{font-size:18px}
.now__seek{display:grid;grid-template-columns:44px 1fr 52px;gap:8px;align-items:center;margin-top:6px}
.now__extra{display:flex;gap:10px;align-items:center;margin-top:10px}
.grow{flex:1}

/* Player bar */
.bar{grid-column:1/4;position:sticky;bottom:0;background:rgba(18,18,26,.9);backdrop-filter:blur(6px);border-top:1px solid var(--border);display:grid;grid-template-columns:320px 1fr 320px;gap:10px;padding:10px 16px;align-items:center}
.bar__meta{display:flex;gap:10px;align-items:center;min-width:0}
.bar__thumb{width:48px;height:48px;border-radius:10px;background:#0003 url('cover.jpg') center/cover no-repeat}
.bar__center{display:flex;flex-direction:column;gap:8px;align-items:center}
.bar__buttons button{background:var(--panel2);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:6px 8px;cursor:pointer}
.bar__seek{display:grid;grid-template-columns:44px 1fr 52px;gap:8px;align-items:center;width:100%}
.bar__right{display:flex;gap:10px;justify-content:flex-end;align-items:center}

/* Range */
input[type="range"]{appearance:none;height:6px;background:#2d2a3c;border-radius:999px;outline:none}
input[type="range"]::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:0;box-shadow:0 0 0 2px #0006}

/* Responsive */
@media (max-width:1100px){ .frame{grid-template-columns:80px 1fr} .now{display:none} }
@media (max-width:740px){ .bar{grid-template-columns:1fr} .bar__right{display:none} }