/* CR_COLLECTIVE_V172G_HOME_VOD_TOP10_MUSIC_CLEANUP_STYLE */

/*
  Safe visual/style layer:
  - Home + VOD Top 10 widgets get the same dark Spotify/Top Tracks row feel.
  - Music Library old fallback app/loader below the new list is hidden.
  - Does not touch playback logic.
*/

html body .cr-v172g-hidden-old-ml,
html body [data-cr-v172g-hidden-old-ml="1"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* remove extra bottom gap after the v172b Music Library renderer */
body[data-cr-v172g-page="music-library"] [data-cr-mltop-v172b] {
  margin-bottom: 120px !important;
}

body[data-cr-v172g-page="music-library"] main {
  padding-bottom: 0 !important;
}

/* Home / VOD Top10 card */
body[data-cr-v172g-page="home"] .cr-v172g-top10-card,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card {
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(139,92,246,.13), transparent 34%),
    linear-gradient(135deg, rgba(13,16,27,.96), rgba(8,11,19,.98)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42) !important;
  overflow: hidden !important;
}

/* Card heading area when the current markup exposes it */
body[data-cr-v172g-page="home"] .cr-v172g-top10-card header,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card header,
body[data-cr-v172g-page="home"] .cr-v172g-top10-card > div:first-child,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card > div:first-child {
  border-color: rgba(255,255,255,.075) !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-top10-card h1,
body[data-cr-v172g-page="home"] .cr-v172g-top10-card h2,
body[data-cr-v172g-page="home"] .cr-v172g-top10-card h3,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card h1,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card h2,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card h3 {
  color: #fff !important;
  font-weight: 1000 !important;
}

/* Top10 rows */
body[data-cr-v172g-page="home"] .cr-v172g-top10-row,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row {
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,.11), transparent 34%),
    linear-gradient(135deg, rgba(24,27,39,.92), rgba(12,15,26,.97)) !important;
  box-shadow: 0 18px 46px rgba(0,0,0,.18) !important;
  overflow: hidden !important;
  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-top10-row:hover,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row:hover {
  border-color: rgba(139,92,246,.28) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(139,92,246,.17), transparent 34%),
    linear-gradient(135deg, rgba(30,34,48,.95), rgba(13,17,29,.98)) !important;
  transform: translateY(-1px);
}

body[data-cr-v172g-page="home"] .cr-v172g-top10-row img,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row img {
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,.11) !important;
  object-fit: cover !important;
}

/* Rank badge */
body[data-cr-v172g-page="home"] .cr-v172g-rank,
body[data-cr-v172g-page="vod"] .cr-v172g-rank {
  display: grid !important;
  place-items: center !important;
  min-width: 38px !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(167,139,250,.22) !important;
  background: rgba(109,40,217,.34) !important;
  color: #fff !important;
  font-weight: 1000 !important;
}

/* Small row play button */
body[data-cr-v172g-page="home"] .cr-v172g-row-play,
body[data-cr-v172g-page="vod"] .cr-v172g-row-play {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(167,139,250,.28) !important;
  background: linear-gradient(135deg, rgba(109,40,217,.78), rgba(139,92,246,.58)) !important;
  color: #fff !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: 0 0 26px rgba(139,92,246,.2) !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-row-play::before,
body[data-cr-v172g-page="vod"] .cr-v172g-row-play::before {
  content: "▶";
  font-size: 13px;
  line-height: 1;
  transform: translateX(1px);
}

/* Action buttons in Home/VOD top10 rows */
body[data-cr-v172g-page="home"] .cr-v172g-top10-row a,
body[data-cr-v172g-page="home"] .cr-v172g-top10-row button,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row a,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row button {
  border-radius: 999px !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-top10-row a[href],
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row a[href] {
  text-underline-offset: 3px !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-action,
body[data-cr-v172g-page="vod"] .cr-v172g-action {
  min-height: 34px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  background: rgba(255,255,255,.045) !important;
  color: rgba(255,255,255,.92) !important;
  text-decoration: none !important;
  font-weight: 950 !important;
}

body[data-cr-v172g-page="home"] .cr-v172g-action:hover,
body[data-cr-v172g-page="vod"] .cr-v172g-action:hover {
  border-color: rgba(167,139,250,.48) !important;
  background: rgba(139,92,246,.16) !important;
}

/* Make "Seen in tracklists" look consistent */
body[data-cr-v172g-page="home"] .cr-v172g-seen,
body[data-cr-v172g-page="vod"] .cr-v172g-seen {
  color: rgba(255,255,255,.88) !important;
  font-size: .78rem !important;
  font-weight: 950 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

/* Top10 card layout helpers without assuming exact markup */
body[data-cr-v172g-page="home"] .cr-v172g-top10-card .cr-v172g-top10-row + .cr-v172g-top10-row,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-card .cr-v172g-top10-row + .cr-v172g-top10-row {
  margin-top: 10px !important;
}

/* If the row uses an old block layout, compact it gently */
body[data-cr-v172g-page="home"] .cr-v172g-top10-row,
body[data-cr-v172g-page="vod"] .cr-v172g-top10-row {
  min-height: 78px !important;
}

/* prevent accidental old loader panels from making a big blank gap */
body[data-cr-v172g-page="music-library"] .cr-mltop-v172b-hidden {
  display: none !important;
}