/* ---- Playlist page: detail header + item list ----
   .seriesInfo/.episodeList/.episodeRow are reused as-is from
   views/series/Series.css (already in the bundle - Series.ts is always
   a registered route, see app.ts) - same precedent Album.css already
   set for .seriesInfo. Only the header's own cover art needs its own
   rule here, same reason Album.css gives .albumCover its own aspect
   ratio instead of reusing .seriesPoster's. */

.playlistHeader {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.playlistCover {
  width: 160px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 8px;
  background: var(--panel);
  flex-shrink: 0;
}

.playlistCover.noImage { visibility: hidden; }

.playlistActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 4px;
}

@media (max-width: 600px) {
  .playlistHeader { flex-direction: column; }
  .playlistCover { width: 120px; }
}