.artist-published-media { height: auto; align-items: start; }
.artist-published-media.is-single { grid-template-columns: minmax(0, 1fr); }
.artist-published-media.has-spotify { grid-template-columns: minmax(0, 1fr); }
.artist-published-media-card {
  min-width: 0;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #ece8f0;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #faf8fd);
  box-shadow: 0 8px 24px rgba(38,24,64,.06);
}
.artist-published-media-card.is-audio { align-self: start; }
.artist-published-media-card > div:first-child { display: grid; grid-template-columns: 33px minmax(0, 1fr); column-gap: 9px; align-items: center; }
.artist-published-media-card > div:first-child > span { width: 33px; height: 33px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #7440e5, #4e22ca); }
.artist-published-media-card > div:first-child .ui-icon { width: 18px; height: 18px; }
.artist-published-media-card strong { min-width: 0; overflow: visible; font-size: 12px; line-height: 1.2; white-space: normal; text-overflow: clip; }
.artist-published-media-card small { min-width: 0; margin-top: 2px; overflow: hidden; color: #77717f; font-size: 8px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.artist-medley-player {
  min-width: 0;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.artist-medley-toggle {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center;
  border: 0 !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, #6834df, #4f21ce) !important;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(80, 33, 206, .2);
}
.artist-medley-toggle > span { display: grid; place-items: center; }
.artist-medley-toggle > span[hidden] { display: none; }
.artist-medley-toggle .ui-icon { width: 13px; height: 13px; stroke-width: 2; }
.artist-medley-toggle [data-medley-play-icon] .ui-icon { margin-left: 2px; fill: currentColor; }
.artist-medley-toggle:focus-visible { outline: 3px solid rgba(91, 43, 212, .22); outline-offset: 2px; }
.artist-medley-progress { min-width: 0; }
.artist-medley-time {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #77717f;
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.artist-medley-time i { font-style: normal; opacity: .55; }
.artist-medley-wave-control { height: 30px; position: relative; }
.artist-medley-wave { width: 100%; height: 28px; display: block; overflow: visible; }
.artist-medley-wave path { fill: none; stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.artist-medley-wave-upcoming { stroke: #d0cbd7; }
.artist-medley-wave-played { stroke: #5b2bd4; }
.artist-medley-wave-control input {
  width: 100%;
  height: 30px;
  margin: 0;
  position: absolute;
  inset: 0;
  cursor: pointer;
  opacity: 0;
}
.artist-medley-wave-control:focus-within { outline: 2px solid rgba(91, 43, 212, .25); outline-offset: 2px; border-radius: 5px; }
.artist-medley-player audio { display: none; }
.artist-spotify-embed { width: 100%; height: 152px; margin-top: 12px; display: block; border: 0; border-radius: 11px; background: #121212; }
.artist-live-video-frame {
  width: 100%;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
  border-radius: 11px;
  background: #0b090d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  aspect-ratio: 16 / 9;
}
.artist-live-video-frame video,
.artist-live-video-frame iframe { width: 100%; height: 100%; margin: 0; display: block; border: 0; }
.artist-live-video-frame video { object-fit: contain; }
.artist-live-video-frame video,
.artist-live-video-frame iframe { pointer-events: none; }
.artist-live-video-thumbnail {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  inset: 0;
  display: block;
  object-fit: cover;
  object-position: center;
  background: #100c16;
}
.artist-live-open {
  width: 100%;
  height: 100%;
  padding: 0;
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  border: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8, 5, 12, .18));
  color: #fff;
  cursor: pointer;
}
.artist-live-open > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background: rgba(23, 15, 31, .46);
  box-shadow: 0 5px 18px rgba(0, 0, 0, .28);
  backdrop-filter: blur(5px);
}
.artist-live-open .ui-icon { width: 16px; height: 16px; margin-left: 2px; fill: currentColor; }
.artist-live-open:focus-visible { outline: 3px solid rgba(255, 255, 255, .9); outline-offset: -5px; }
.media-player-video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: block;
  border: 0;
}
.artist-live-video-duration {
  min-width: 42px;
  height: 23px;
  padding: 0 8px;
  position: absolute;
  z-index: 3;
  left: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 7px;
  color: #fff;
  background: rgba(16, 12, 21, .78);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.artist-live-video-duration[hidden] { display: none; }

@media (max-width: 340px) {
  .artist-published-media { grid-template-columns: 1fr; }
}