:root{
  --bg:#eef1f6;
  --card:#ffffff;
  --text:#14171a;
  --sub:#5b6675;
  --accent:#3b82f6;
  --muted:#d3dae6;
  --shadow:0 10px 30px rgba(0,0,0,.15);
  --cover: 160px;
  --vinyl: 132px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);}
.player-card{width:min(92vw,560px);margin:4vh auto;padding:18px;background:var(--card);border-radius:16px;box-shadow:var(--shadow)}

.hero-stacked{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:8px}
.hero-stacked .meta{text-align:center}
.hero-stacked .meta h1{margin:0;font-size:22px;line-height:1.2}
.hero-stacked .meta .sub{margin:4px 0 0;font-size:16px;color:var(--sub)}

.hero-stacked .art-wrap{width:100%;display:grid;place-items:center;position:relative;padding:6px 0;overflow:hidden}
.hero-stacked .cover{display:block;width:var(--cover);height:auto;border-radius:12px;z-index:2;box-shadow:0 8px 18px rgba(0,0,0,.25)}
.hero-stacked .vinyl{position:absolute;width:var(--vinyl);top:12px;left:50%;transform:translateX(-50%);filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));z-index:1}
.vinyl.spin{animation:turn 3s linear infinite}
@keyframes turn{to{transform:translateX(-50%) rotate(360deg)}}

.volume-below{display:flex;align-items:center;gap:10px;justify-content:center}
.volume-below input[type=range]{width:260px}

.progress-row{display:grid;grid-template-columns:46px 1fr 46px auto;gap:10px;align-items:center;margin:18px 6px 6px}
#seek{width:100%}
#seek,#volume{-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:var(--muted)}
#seek::-webkit-slider-thumb,#volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.rate{opacity:.85;padding:4px 8px;border:1px solid var(--muted);border-radius:8px;cursor:default}

.controls{display:flex;justify-content:center;gap:12px;margin:8px 0 16px}
.controls button{min-width:44px;height:44px;border-radius:10px;border:1px solid var(--muted);background:#fff;cursor:pointer;font-size:18px;box-shadow:0 3px 10px rgba(0,0,0,.06)}
.controls .primary{background:var(--accent);color:#fff;border-color:transparent;font-weight:700}

.notes-card{margin:10px 0 14px;padding:12px;border:1px solid var(--muted);border-radius:12px;background:#fff}
.notes-card h3{margin:0 0 6px;font-size:16px}
#notes{white-space:pre-wrap;color:var(--text)}

.playlist{margin-top:8px;border:1px solid var(--muted);border-radius:12px;overflow:hidden}
.track{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--muted);cursor:pointer;background:#fff}
.track:last-child{border-bottom:0}
.track .thumb{width:44px;height:44px;border-radius:6px;object-fit:cover}
.track .t-title{font-weight:700}
.track .t-artist{color:var(--sub);font-size:14px;margin-top:2px}
.track .info{margin-left:auto;font-size:13px;padding:6px 10px;border:1px solid var(--muted);border-radius:999px;background:#fff;cursor:pointer}
.track .info:hover{background:#f3f6ff}
.track.active{background:#e7efff}

/* Responsive cover/vinyl sizing */
@media (min-width:1280px){ :root{ --cover:150px; --vinyl:124px } }
@media (max-width:900px){ :root{ --cover:150px; --vinyl:130px } .volume-below input[type=range]{width:220px} }
@media (max-width:600px){ :root{ --cover:120px; --vinyl:104px } .volume-below input[type=range]{width:180px} }


/* Playlist notes preview */
.track .t-notes{
  font-size: 13px;
  color: var(--sub);
  margin-top: 6px;
  line-height: 1.3;
}
.t-notes button.more, .t-notes button.less{
  border: none;
  background: none;
  cursor: pointer;
  color: var(--accent);
  padding: 0 0 0 6px;
  font-size: 12px;
}