:root{
  --arstudio-blue:#0087FF;
  --arstudio-bg:#111317;
  --arstudio-card:#1a1d23;
  --arstudio-text:#f2f2f2;
  --arstudio-muted:#9aa0a6;
}
.track-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  max-width:640px;
  margin:0 auto;
}

.track-player{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--arstudio-card);
  color:var(--arstudio-text);
  border-radius:10px;
  padding:12px;
}
.track-player__cover{
  width:64px;
  height:64px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  background:#000;
}
.track-player__body{
  flex:1;
  min-width:0;
}
.track-player__meta{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:8px;
  margin-bottom:6px;
}
.track-player__title{
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-player__subtitle{
  font-size:12px;
  color:var(--arstudio-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.track-player__controls{
  display:flex;
  align-items:center;
  gap:10px;
}
.track-player__playbtn{
  width:34px;
  height:34px;
  flex-shrink:0;
  border:none;
  border-radius:50%;
  background:var(--arstudio-blue);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .15s ease, background .15s ease;
}
.track-player__playbtn:hover{ transform:scale(1.06); }
.track-player__playbtn svg{ width:14px; height:14px; }

.track-player__progress-wrap{
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
}
.track-player__time{
  font-size:11px;
  color:var(--arstudio-muted);
  font-variant-numeric:tabular-nums;
  width:36px;
  flex-shrink:0;
}
.track-player__time--end{ text-align:right; }

.track-player__seek{
  -webkit-appearance:none;
  appearance:none;
  flex:1;
  height:4px;
  border-radius:2px;
  background:linear-gradient(to right, var(--arstudio-blue) var(--progress,0%), #3a3f47 0%);
  outline:none;
  cursor:pointer;
}
.track-player__seek::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 0 2px var(--arstudio-blue);
}
.track-player__seek::-moz-range-thumb{
  width:12px;
  height:12px;
  border:none;
  border-radius:50%;
  background:#fff;
  cursor:pointer;
  box-shadow:0 0 0 2px var(--arstudio-blue);
}

.track-player.is-playing .track-player__playbtn{
  background:#00c2ff;
}

@media (max-width:480px){
  .track-player__cover{ width:52px; height:52px; }
  .track-player__title{ font-size:13px; }
}