/* OSBeats final mobile UI correction — loaded after every page stylesheet. */

/* CSS-only media icons prevent iOS emoji-style play/pause rendering. */
.os-media-icon{position:relative;display:inline-block;width:14px;height:14px;flex:0 0 14px;color:#fff;vertical-align:middle;pointer-events:none}
.os-media-icon-play::before{content:"";position:absolute;left:4px;top:2px;width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.os-media-icon-pause::before,.os-media-icon-pause::after{content:"";position:absolute;top:2px;width:3px;height:10px;background:currentColor}
.os-media-icon-pause::before{left:3px}.os-media-icon-pause::after{right:3px}
.os-media-icon-prev::before,.os-media-icon-prev::after,.os-media-icon-next::before,.os-media-icon-next::after{content:"";position:absolute;top:3px;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent}
.os-media-icon-prev::before{left:1px;border-right:6px solid currentColor}.os-media-icon-prev::after{left:6px;border-right:6px solid currentColor}
.os-media-icon-next::before{right:6px;border-left:6px solid currentColor}.os-media-icon-next::after{right:1px;border-left:6px solid currentColor}
.profile-inline-play-icon{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}

/* =========================================================
   PLAY BUTTON STANDARD — NO DIAGONAL SPLIT AT ANY WIDTH
   ========================================================= */
#latestGrid .homepage-track-open,
#trendingGrid .homepage-track-open,
#latestGrid .text-play,
#trendingGrid .text-play,
.featured-side .round-play,
.chart-item .round-play,
.cover-play,
.chart-rank-row .mini-play,
.producer-card .play-badge,
.artist-card .play-badge,
body:not(.custom-theme-live) .catalog-row-play,
body:not(.custom-theme-live) .catalog-main-play,
body:not(.custom-theme-live) .catalog-transport button,
#miniPlay{
  -webkit-appearance:none !important;
  appearance:none !important;
  background:#0b0d11 !important;
  background-color:#0b0d11 !important;
  background-image:none !important;
  border:1px solid #b40a15 !important;
  border-radius:0 !important;
  color:#fff !important;
  box-shadow:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  mask:none !important;
  -webkit-mask:none !important;
  outline:none !important;
  text-shadow:none !important;
}

/* Kill old red wedges / decorations on the BUTTON itself. Icon pseudo-elements live on child spans. */
#latestGrid .homepage-track-open::before,#latestGrid .homepage-track-open::after,
#trendingGrid .homepage-track-open::before,#trendingGrid .homepage-track-open::after,
#latestGrid .text-play::before,#latestGrid .text-play::after,
#trendingGrid .text-play::before,#trendingGrid .text-play::after,
.featured-side .round-play::before,.featured-side .round-play::after,
.chart-item .round-play::before,.chart-item .round-play::after,
.cover-play::before,.cover-play::after,
.chart-rank-row .mini-play::before,.chart-rank-row .mini-play::after,
.producer-card .play-badge::before,.producer-card .play-badge::after,
.artist-card .play-badge::before,.artist-card .play-badge::after,
body:not(.custom-theme-live) .catalog-row-play::before,body:not(.custom-theme-live) .catalog-row-play::after,
body:not(.custom-theme-live) .catalog-main-play::before,body:not(.custom-theme-live) .catalog-main-play::after,
#miniPlay::before,#miniPlay::after{
  content:none !important;
  display:none !important;
  background:none !important;
  background-image:none !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
}

#latestGrid .homepage-track-open:hover,#trendingGrid .homepage-track-open:hover,
#latestGrid .text-play:hover,#trendingGrid .text-play:hover,
.featured-side .round-play:hover,.chart-item .round-play:hover,
.cover-play:hover,.chart-rank-row .mini-play:hover,
.producer-card .play-badge:hover,.artist-card .play-badge:hover,
body:not(.custom-theme-live) .catalog-row-play:hover,
body:not(.custom-theme-live) .catalog-main-play:hover,
body:not(.custom-theme-live) .catalog-transport button:hover,#miniPlay:hover{
  background:#16191f !important;
  background-image:none !important;
  border-color:#ed1725 !important;
}

@media(max-width:700px){
  /* Same dimensions / feel as Artist Profile row play control. */
  #latestGrid .homepage-track-open,#trendingGrid .homepage-track-open,
  #latestGrid .text-play,#trendingGrid .text-play,
  .featured-side .round-play,.chart-item .round-play,
  .cover-play,.chart-rank-row .mini-play,
  .producer-card .play-badge,.artist-card .play-badge,
  body:not(.custom-theme-live) .catalog-row-play,#miniPlay{
    width:38px !important;min-width:38px !important;
    height:32px !important;min-height:32px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
    line-height:1 !important;
  }

  /* HOME: genuinely compact horizontal cards, never phone-sized posters. */
  #latestGrid.card-row,#trendingGrid.card-row{grid-template-columns:1fr !important;gap:9px !important}
  #latestGrid .homepage-track-card,#trendingGrid .homepage-track-card{
    display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;min-height:92px !important;height:108px !important;overflow:hidden !important
  }
  #latestGrid .homepage-track-cover-link,#trendingGrid .homepage-track-cover-link,
  #latestGrid .homepage-track-cover,#trendingGrid .homepage-track-cover,
  #latestGrid .homepage-track-cover-image,#trendingGrid .homepage-track-cover-image{
    width:92px !important;min-width:92px !important;max-width:92px !important;
    height:108px !important;min-height:108px !important;max-height:108px !important;
    aspect-ratio:auto !important;object-fit:cover !important
  }
  #latestGrid .homepage-track-body,#trendingGrid .homepage-track-body{padding:8px 10px !important;min-width:0 !important;overflow:hidden !important}
  #latestGrid .homepage-track-body .track-link b,#trendingGrid .homepage-track-body .track-link b{font-size:13px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  #latestGrid .homepage-track-body .artist-link,#trendingGrid .homepage-track-body .artist-link{font-size:10px !important}
  #latestGrid .homepage-track-body .card-foot,#trendingGrid .homepage-track-body .card-foot{margin-top:auto !important;padding-top:7px !important;font-size:10px !important}
  #latestGrid .homepage-track-open,#trendingGrid .homepage-track-open{right:5px !important;bottom:5px !important;width:34px !important;min-width:34px !important;height:30px !important;min-height:30px !important}
  #latestGrid .text-play,#trendingGrid .text-play{width:34px !important;min-width:34px !important;height:30px !important;min-height:30px !important}

  /* Home featured producer/artist cards: horizontal and compact. */
  #producerGrid.card-row,#artistGrid.card-row{grid-template-columns:1fr !important;gap:9px !important}
  #producerGrid .featured-creator-card,#artistGrid .featured-creator-card{
    display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;
    min-height:92px !important;height:100px !important;overflow:hidden !important
  }
  #producerGrid .featured-creator-cover,#artistGrid .featured-creator-cover{
    width:92px !important;min-width:92px !important;max-width:92px !important;
    height:100px !important;min-height:100px !important;max-height:100px !important;aspect-ratio:auto !important
  }
  #producerGrid .featured-creator-body,#artistGrid .featured-creator-body{padding:8px 10px !important;min-width:0 !important}
  #producerGrid .featured-creator-body strong,#artistGrid .featured-creator-body strong{font-size:13px !important}
  #producerGrid .featured-creator-body span,#artistGrid .featured-creator-body span{font-size:10px !important}

  /* PRODUCERS / ARTISTS directory: one compact horizontal card per row. */
  .featured-grid{grid-template-columns:1fr !important;gap:9px !important;min-height:0 !important}
  .producer-card,.artist-card{
    display:grid !important;grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;min-height:92px !important;height:100px !important;overflow:hidden !important;border-radius:0 !important
  }
  .producer-card > a,.producer-card .producer-image,.artist-card .artist-photo{
    width:92px !important;min-width:92px !important;max-width:92px !important;
    height:100px !important;min-height:100px !important;max-height:100px !important;aspect-ratio:auto !important
  }
  .producer-card-body,.artist-info{padding:8px 10px !important;min-width:0 !important;overflow:hidden !important}
  .producer-card-body h3,.artist-name{font-size:14px !important;line-height:1.1 !important}
  .producer-card-body p,.artist-meta,.producer-stats,.artist-stats{font-size:10px !important;line-height:1.25 !important}
  .producer-card .play-badge,.artist-card .play-badge{right:5px !important;bottom:5px !important;width:34px !important;min-width:34px !important;height:30px !important;min-height:30px !important}
}

/* =========================================================
   ARTIST PROFILE MOBILE — EXACT REQUESTED LAYOUT
   ========================================================= */
@media(max-width:560px){
  body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
    position:relative !important;z-index:3 !important;clear:both !important;
    width:100% !important;margin:18px 0 0 !important;padding:0 14px 16px !important;transform:none !important
  }
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
    display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;gap:8px !important;width:100% !important;margin:0 !important
  }
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
    position:relative !important;width:100% !important;min-width:0 !important;height:70px !important;min-height:70px !important;
    padding:10px 42px 9px 11px !important;display:flex !important;flex-direction:column !important;
    align-items:flex-start !important;justify-content:center !important;text-align:left !important
  }
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(1){grid-column:1 !important;grid-row:1 !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(2){grid-column:2 !important;grid-row:1 !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(3){grid-column:1 !important;grid-row:2 !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article:nth-child(4){grid-column:2 !important;grid-row:2 !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article>span:first-child{font-size:9px !important;line-height:1.1 !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article>strong{font-size:18px !important;line-height:1.1 !important;margin-top:4px !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article>small{font-size:6px !important;margin-top:4px !important}
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article>.profile-stat-icon{position:absolute !important;right:10px !important;top:50% !important;transform:translateY(-50%) !important;width:24px !important;height:24px !important}

  /* Track number has its own column under the play button; it can never overlap title. */
  body:not(.custom-theme-live) .catalog-track-row{
    display:grid !important;grid-template-columns:40px repeat(4,minmax(0,1fr)) !important;
    grid-template-rows:32px 38px 27px !important;column-gap:4px !important;row-gap:4px !important;
    width:100% !important;min-width:0 !important;min-height:109px !important;max-height:109px !important;
    padding:6px 8px !important;overflow:hidden !important
  }
  body:not(.custom-theme-live) .catalog-row-index{
    grid-column:1 !important;grid-row:1 !important;width:40px !important;min-width:40px !important;height:32px !important;
    display:grid !important;grid-template-rows:24px 8px !important;place-items:center !important;gap:0 !important;padding:0 !important;margin:0 !important
  }
  body:not(.custom-theme-live) .catalog-row-play{width:34px !important;min-width:34px !important;height:24px !important;min-height:24px !important;padding:0 !important}
  body:not(.custom-theme-live) .catalog-row-number{position:static !important;display:block !important;width:100% !important;height:8px !important;margin:0 !important;padding:0 !important;font-size:8px !important;line-height:8px !important;text-align:center !important;color:#a6adb8 !important}
  body:not(.custom-theme-live) .catalog-row-title{grid-column:2 / 5 !important;grid-row:1 !important;min-width:0 !important;padding:1px 5px 0 !important;overflow:hidden !important}
  body:not(.custom-theme-live) .catalog-row-title strong{display:block !important;max-width:100% !important;font-size:11px !important;line-height:1.05 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  body:not(.custom-theme-live) .catalog-row-title small{display:block !important;font-size:7px !important;line-height:1.1 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important}
  body:not(.custom-theme-live) .catalog-duration-cell{grid-column:5 !important;grid-row:1 !important;min-width:0 !important;font-size:8px !important;border-left:0 !important;padding:0 !important}

  /* Compact license row. */
  body:not(.custom-theme-live) .catalog-license-cell{grid-row:2 !important;min-width:0 !important;min-height:38px !important;height:38px !important;padding:13px 1px 2px !important;font-size:8px !important;overflow:hidden !important}
  body:not(.custom-theme-live) .catalog-license-cell::before{top:3px !important;font-size:5px !important}
  body:not(.custom-theme-live) .catalog-price-button{min-height:20px !important;padding:0 1px !important;font-size:8px !important;line-height:20px !important}
  body:not(.custom-theme-live) .catalog-download-cell,body:not(.custom-theme-live) .catalog-share-cell,body:not(.custom-theme-live) .catalog-row-actions{grid-row:3 !important;height:27px !important;min-height:27px !important;padding:0 !important;border-left:0 !important}
  body:not(.custom-theme-live) .catalog-download-cell{grid-column:1 !important}
  body:not(.custom-theme-live) .catalog-share-cell{grid-column:2 / 5 !important;justify-content:flex-start !important;gap:4px !important}
  body:not(.custom-theme-live) .catalog-row-actions{grid-column:5 !important;justify-content:flex-end !important}
  body:not(.custom-theme-live) .catalog-share-cell .catalog-social-icon,body:not(.custom-theme-live) .catalog-action-icon{width:27px !important;height:27px !important;min-width:27px !important;min-height:27px !important;padding:0 !important}

  /* Eight complete compact rows are visible; track 9+ scroll inside catalog. */
  body:not(.custom-theme-live) .catalog-track-scroll{
    display:block !important;width:100% !important;min-width:0 !important;max-width:100% !important;
    height:872px !important;max-height:872px !important;overflow-x:hidden !important;overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;overscroll-behavior:contain !important;
    scrollbar-width:thin !important;scrollbar-color:#73070B #15171c !important
  }
}

@media(max-width:390px){
  #latestGrid .homepage-track-card,#trendingGrid .homepage-track-card,
  #producerGrid .featured-creator-card,#artistGrid .featured-creator-card,.producer-card,.artist-card{grid-template-columns:84px minmax(0,1fr) !important}
  #latestGrid .homepage-track-cover-link,#trendingGrid .homepage-track-cover-link,#latestGrid .homepage-track-cover,#trendingGrid .homepage-track-cover,#latestGrid .homepage-track-cover-image,#trendingGrid .homepage-track-cover-image,
  #producerGrid .featured-creator-cover,#artistGrid .featured-creator-cover,.producer-card>a,.producer-card .producer-image,.artist-card .artist-photo{width:84px !important;min-width:84px !important;max-width:84px !important}
  body:not(.custom-theme-live) .catalog-track-scroll{height:872px !important;max-height:872px !important}
}

/* =========================================================
   EXACT LOCALHOST FIX — REAL SVG MEDIA ICONS
   These replace CSS pseudo triangles so page-specific rules
   cannot erase the white play/pause/transport icon.
   ========================================================= */
.os-media-svg{
  display:block !important;
  width:15px !important;
  height:15px !important;
  min-width:15px !important;
  min-height:15px !important;
  max-width:15px !important;
  max-height:15px !important;
  overflow:visible !important;
  pointer-events:none !important;
  color:#fff !important;
  fill:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
  flex:0 0 15px !important;
}
.os-media-svg path,
.os-media-svg rect,
.os-media-svg polygon{
  fill:#fff !important;
  stroke:none !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Make sure nested Artist/Producer wrappers never hide the SVG. */
.play-triangle,
.profile-inline-play-icon,
.profile-play-stat-icon{
  color:#fff !important;
}
.play-triangle .os-media-svg,
.play-badge .os-media-svg,
.homepage-track-open .os-media-svg,
.text-play .os-media-svg,
.round-play .os-media-svg,
.cover-play .os-media-svg,
.mini-play .os-media-svg,
.catalog-row-play .os-media-svg,
.catalog-main-play .os-media-svg,
.catalog-transport button .os-media-svg,
#miniPlay .os-media-svg{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* =========================================================
   AUTHORITATIVE MOBILE PLAY BUTTON STANDARD
   Artist Profile reference style:
   black rectangle + thin red outline + white SVG icon.
   ========================================================= */
@media(max-width:700px){
  #latestGrid .homepage-track-open,
  #trendingGrid .homepage-track-open,
  #latestGrid .text-play,
  #trendingGrid .text-play,
  .featured-side .round-play,
  .chart-item .round-play,
  .cover-play,
  .chart-rank-row .mini-play,
  .producer-card .play-badge,
  .artist-card .play-badge,
  body:not(.custom-theme-live) .catalog-row-play,
  body:not(.custom-theme-live) .catalog-main-play,
  body:not(.custom-theme-live) .catalog-transport button,
  #miniPlay{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:38px !important;
    min-width:38px !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#0b0d11 !important;
    background-color:#0b0d11 !important;
    background-image:none !important;
    border:1px solid #c20d18 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
    mask:none !important;
    -webkit-mask:none !important;
    color:#fff !important;
    font-size:0 !important;
    line-height:1 !important;
    overflow:hidden !important;
    opacity:1 !important;
    visibility:visible !important;
  }

  #latestGrid .homepage-track-open:hover,
  #trendingGrid .homepage-track-open:hover,
  #latestGrid .text-play:hover,
  #trendingGrid .text-play:hover,
  .featured-side .round-play:hover,
  .chart-item .round-play:hover,
  .cover-play:hover,
  .chart-rank-row .mini-play:hover,
  .producer-card .play-badge:hover,
  .artist-card .play-badge:hover,
  body:not(.custom-theme-live) .catalog-row-play:hover,
  body:not(.custom-theme-live) .catalog-main-play:hover,
  body:not(.custom-theme-live) .catalog-transport button:hover,
  #miniPlay:hover{
    background:#16191f !important;
    border-color:#f01827 !important;
  }

  /* Homepage overlay buttons can be slightly smaller but same design. */
  #latestGrid .homepage-track-open,
  #trendingGrid .homepage-track-open,
  #latestGrid .text-play,
  #trendingGrid .text-play,
  .producer-card .play-badge,
  .artist-card .play-badge{
    width:34px !important;
    min-width:34px !important;
    height:30px !important;
    min-height:30px !important;
  }

  /* Keep Homepage beat cards compact/horizontal on mobile. */
  #latestGrid.card-row,
  #trendingGrid.card-row{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  #latestGrid .homepage-track-card,
  #trendingGrid .homepage-track-card{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
    overflow:hidden !important;
  }
  #latestGrid .homepage-track-cover-link,
  #trendingGrid .homepage-track-cover-link,
  #latestGrid .homepage-track-cover,
  #trendingGrid .homepage-track-cover,
  #latestGrid .homepage-track-cover-image,
  #trendingGrid .homepage-track-cover-image{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:108px !important;
    min-height:108px !important;
    max-height:108px !important;
    aspect-ratio:auto !important;
    object-fit:cover !important;
  }

  /* Compact Homepage creator cards, no giant poster cards. */
  #producerGrid.card-row,
  #artistGrid.card-row{
    grid-template-columns:1fr !important;
    gap:9px !important;
  }
  #producerGrid .featured-creator-card,
  #artistGrid .featured-creator-card{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    overflow:hidden !important;
  }
  #producerGrid .featured-creator-cover,
  #artistGrid .featured-creator-cover{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    aspect-ratio:auto !important;
  }

  /* Compact Producer / Artist directory cards. */
  .producer-card,
  .artist-card{
    display:grid !important;
    grid-template-columns:92px minmax(0,1fr) !important;
    width:100% !important;
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    overflow:hidden !important;
    border-radius:0 !important;
  }
  .producer-card > a,
  .producer-card .producer-image,
  .artist-card .artist-photo{
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:100px !important;
    min-height:100px !important;
    max-height:100px !important;
    aspect-ratio:auto !important;
  }
  .producer-card-body,
  .artist-info{
    min-width:0 !important;
    overflow:hidden !important;
    padding:8px 10px !important;
  }

  /* Artist Profile: stats explicitly lower than identity and exact 2x2. */
  body:not(.custom-theme-live) .artist-profile-stage > .artist-stats-wrap{
    position:relative !important;
    clear:both !important;
    width:100% !important;
    margin:18px 0 0 !important;
    padding:0 14px 16px !important;
    transform:none !important;
  }
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-rows:repeat(2,minmax(70px,auto)) !important;
    grid-auto-flow:row !important;
    gap:8px !important;
    width:100% !important;
    margin:0 !important;
  }
  body:not(.custom-theme-live) .artist-profile-stage .artist-stats article{
    width:100% !important;
    min-width:0 !important;
    min-height:70px !important;
    margin:0 !important;
  }

  /* Artist Profile track number is a dedicated line under its play button. */
  body:not(.custom-theme-live) .catalog-row-index{
    width:40px !important;
    min-width:40px !important;
    display:grid !important;
    grid-template-rows:24px 8px !important;
    place-items:center !important;
    gap:0 !important;
    padding:0 !important;
  }
  body:not(.custom-theme-live) .catalog-row-number{
    position:static !important;
    display:block !important;
    width:100% !important;
    height:8px !important;
    margin:0 !important;
    padding:0 !important;
    font-size:8px !important;
    line-height:8px !important;
    text-align:center !important;
  }
  body:not(.custom-theme-live) .catalog-row-title{
    min-width:0 !important;
    overflow:hidden !important;
  }
  body:not(.custom-theme-live) .catalog-row-title strong{
    display:block !important;
    max-width:100% !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* Eight full catalog rows visible, then catalog scrolls internally. */
  body:not(.custom-theme-live) .catalog-track-scroll{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:872px !important;
    max-height:872px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    scrollbar-width:thin !important;
    scrollbar-color:#73070B #15171c !important;
  }
}

/* Desktop safety: previous broken patch had blank outlined boxes here.
   SVG makes every already-existing desktop play button visible again too. */
@media(min-width:701px){
  .os-media-svg{
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    min-height:14px !important;
  }
}

/* =========================================================
   OSBEATS PLAY BUTTONS — RED / BLACK MIX STANDARD
   Match the established OSBeats action-button treatment.
   Keep real SVG media icons from the previous fix.
   ========================================================= */
#latestGrid .homepage-track-open,
#trendingGrid .homepage-track-open,
#latestGrid .text-play,
#trendingGrid .text-play,
.featured-side .round-play,
.chart-item .round-play,
.cover-play,
.chart-rank-row .mini-play,
.producer-card .play-badge,
.artist-card .play-badge,
.card-actions .os-mobile-play-button,
body:not(.custom-theme-live) .catalog-row-play,
body:not(.custom-theme-live) .catalog-main-play,
body:not(.custom-theme-live) .catalog-transport button,
#miniPlay{
  background:
    linear-gradient(
      135deg,
      #73070B 0%,
      #73070B 38%,
      #310306 72%,
      #050506 100%
    ) !important;
  background-color:#310306 !important;
  background-image:
    linear-gradient(
      135deg,
      #73070B 0%,
      #73070B 38%,
      #310306 72%,
      #050506 100%
    ) !important;
  border:1px solid #7f1119 !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
}

#latestGrid .homepage-track-open:hover,
#trendingGrid .homepage-track-open:hover,
#latestGrid .text-play:hover,
#trendingGrid .text-play:hover,
.featured-side .round-play:hover,
.chart-item .round-play:hover,
.cover-play:hover,
.chart-rank-row .mini-play:hover,
.producer-card .play-badge:hover,
.artist-card .play-badge:hover,
.card-actions .os-mobile-play-button:hover,
body:not(.custom-theme-live) .catalog-row-play:hover,
body:not(.custom-theme-live) .catalog-main-play:hover,
body:not(.custom-theme-live) .catalog-transport button:hover,
#miniPlay:hover{
  background:
    linear-gradient(
      135deg,
      #920008 0%,
      #65060a 40%,
      #2b0306 74%,
      #050506 100%
    ) !important;
  background-image:
    linear-gradient(
      135deg,
      #920008 0%,
      #65060a 40%,
      #2b0306 74%,
      #050506 100%
    ) !important;
  border-color:#b51621 !important;
}

body:not(.custom-theme-live) .catalog-track-row.playing .catalog-row-play,
body:not(.custom-theme-live) .catalog-main-play.is-playing,
#miniPlay.is-playing{
  background:
    linear-gradient(
      135deg,
      #9a0009 0%,
      #73070B 42%,
      #350306 76%,
      #050506 100%
    ) !important;
  border-color:#d01925 !important;
}

/* White media icon stays visible over the red/black mix. */
#latestGrid .homepage-track-open .os-media-svg,
#trendingGrid .homepage-track-open .os-media-svg,
#latestGrid .text-play .os-media-svg,
#trendingGrid .text-play .os-media-svg,
.featured-side .round-play .os-media-svg,
.chart-item .round-play .os-media-svg,
.cover-play .os-media-svg,
.chart-rank-row .mini-play .os-media-svg,
.producer-card .play-badge .os-media-svg,
.artist-card .play-badge .os-media-svg,
.card-actions .os-mobile-play-button .os-media-svg,
body:not(.custom-theme-live) .catalog-row-play .os-media-svg,
body:not(.custom-theme-live) .catalog-main-play .os-media-svg,
body:not(.custom-theme-live) .catalog-transport button .os-media-svg,
#miniPlay .os-media-svg{
  fill:#fff !important;
  color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* =========================================================
   OSBEATS GLOBAL PLAY BUTTON STANDARD
   Applies on desktop + tablet + mobile.
   Horizontal red/black mix — no diagonal split.
   ========================================================= */
html body .homepage-track-open,
html body .text-play,
html body .round-play,
html body .cover-play,
html body .mini-play,
html body .play-badge,
html body .catalog-row-play,
html body .catalog-main-play,
html body #miniPlay,
html body #stickyPlay,
html body #playBtn,
html body #playTrack,
html body #playPause,
html body #nowPlayingPlay,
html body .main-play,
html body .now-playing-main-play,
html body .osb-global-media-control.osb-global-play,
html body .osb-global-play-label,
html body button[aria-label="Play"],
html body button[aria-label="Play or pause"],
html body button[aria-label^="Play "],
html body button[aria-label*="Play track"],
html body button[aria-label*="play track"],
html body button[title="Preview"],
html body button[onclick^="playFrom("],
html body button[onclick^="playIndex("],
html body button[onclick^="playTrack("]{
  -webkit-appearance:none !important;
  appearance:none !important;
  background-color:#310306 !important;
  background-image:linear-gradient(
    90deg,
    #73070B 0%,
    #5a060a 34%,
    #310306 62%,
    #151015 82%,
    #0b0d11 100%
  ) !important;
  border:1px solid #8f111a !important;
  border-radius:0 !important;
  clip-path:none !important;
  -webkit-clip-path:none !important;
  mask:none !important;
  -webkit-mask:none !important;
  color:#fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 0 0 1px rgba(0,0,0,.20) !important;
}

html body .homepage-track-open:hover,
html body .text-play:hover,
html body .round-play:hover,
html body .cover-play:hover,
html body .mini-play:hover,
html body .play-badge:hover,
html body .catalog-row-play:hover,
html body .catalog-main-play:hover,
html body #miniPlay:hover,
html body #stickyPlay:hover,
html body #playBtn:hover,
html body #playTrack:hover,
html body #playPause:hover,
html body #nowPlayingPlay:hover,
html body .main-play:hover,
html body .now-playing-main-play:hover,
html body .osb-global-media-control.osb-global-play:hover,
html body .osb-global-play-label:hover,
html body button[aria-label="Play"]:hover,
html body button[aria-label="Play or pause"]:hover,
html body button[aria-label^="Play "]:hover,
html body button[title="Preview"]:hover,
html body button[onclick^="playFrom("]:hover,
html body button[onclick^="playIndex("]:hover,
html body button[onclick^="playTrack("]:hover{
  background-image:linear-gradient(
    90deg,
    #92000a 0%,
    #73070B 38%,
    #3d0407 66%,
    #141015 84%,
    #08090c 100%
  ) !important;
  border-color:#c71823 !important;
}

/* Active/playing state stays red/black — never solid black. */
html body .catalog-track-row.playing .catalog-row-play,
html body .is-playing.osb-global-play,
html body .osb-global-media-control.osb-global-play.is-playing{
  background-image:linear-gradient(
    90deg,
    #a0000b 0%,
    #79070c 42%,
    #3a0307 70%,
    #090b0f 100%
  ) !important;
  border-color:#dc1725 !important;
}

/* Real SVG icons and existing player SVG icons remain white. */
html body .os-media-svg,
html body .osb-global-media-control::before,
html body .osb-global-inline-play,
html body #playIcon,
html body #nowPlayingPlayIcon,
html body .main-play svg,
html body .now-playing-main-play svg,
html body button[aria-label="Play"] svg,
html body button[aria-label="Play or pause"] svg{
  color:#fff !important;
  fill:#fff !important;
  stroke:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}

/* Span-based play controls still behave like buttons. */
html body .homepage-track-open,
html body .play-badge{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* =========================================================
   MOBILE COVER PLAY OVERLAYS + BOTTOM PLAYER CORRECTION
   - Hide play controls that sit directly on cover art on phones.
   - Keep the card/body play buttons.
   - Center bottom-player transport icons.
   - Give pop-out arrow the same OSBeats red/black mix.
   ========================================================= */
@media(max-width:700px){

  /* Cover-art play overlays are not needed on mobile. */
  #latestGrid .homepage-track-open,
  #trendingGrid .homepage-track-open,
  .beat-card .cover-play,
  .producer-card .play-badge,
  .artist-card .play-badge{
    display:none !important;
  }

  /* Bottom player transport buttons: exact icon centering. */
  #stickyPrev,
  #stickyPlay,
  #stickyNext,
  #stickyPopout{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:38px !important;
    min-width:38px !important;
    height:38px !important;
    min-height:38px !important;
    padding:0 !important;
    margin:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
    line-height:1 !important;
    border-radius:0 !important;
    overflow:hidden !important;
  }

  #stickyPrev .os-media-svg,
  #stickyPlay .os-media-svg,
  #stickyNext .os-media-svg,
  #stickyPopout .os-media-svg{
    display:block !important;
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    min-height:15px !important;
    margin:0 !important;
    padding:0 !important;
    position:static !important;
    transform:none !important;
    flex:0 0 15px !important;
    fill:#fff !important;
    color:#fff !important;
  }

  /* Main Play/Pause button uses the site-wide horizontal red/black mix. */
  #stickyPlay{
    background-color:#310306 !important;
    background-image:linear-gradient(
      90deg,
      #73070B 0%,
      #5a060a 34%,
      #310306 62%,
      #151015 82%,
      #0b0d11 100%
    ) !important;
    border:1px solid #8f111a !important;
  }

  /* Pop-out arrow must match the same OSBeats red/black mix. */
  #stickyPopout,
  #stickyPopout.osb-global-external,
  #stickyPopout.osb-popout-icon{
    background-color:#310306 !important;
    background-image:linear-gradient(
      90deg,
      #73070B 0%,
      #5a060a 34%,
      #310306 62%,
      #151015 82%,
      #0b0d11 100%
    ) !important;
    border:1px solid #8f111a !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
    clip-path:none !important;
    -webkit-clip-path:none !important;
  }

  /* Disable any legacy CSS-drawn pop-out icon now that SVG is used. */
  #stickyPopout::before,
  #stickyPopout::after{
    content:none !important;
    display:none !important;
  }

  #stickyPlay:hover,
  #stickyPopout:hover{
    background-image:linear-gradient(
      90deg,
      #92000a 0%,
      #73070B 38%,
      #3d0407 66%,
      #141015 84%,
      #08090c 100%
    ) !important;
    border-color:#c71823 !important;
  }
}