/*
 * PeerMusic secondary-page artwork system.
 * Sprite order:
 * recharge, withdraw, dividend, draw
 * invite, level, points, coming soon
 * music task, tasks, report, team
 * profile, wallet, help/language, notifications
 */

.secondary-page-brand > i {
  width: 22px;
  height: 22px;
  display: inline-block;
  flex: 0 0 22px;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  background: url("./assets/member-icons/music-ref-02.png") center / contain no-repeat !important;
  filter: drop-shadow(0 3px 7px rgba(123, 163, 218, 0.22));
}

.secondary-page-brand > i > * {
  display: none !important;
}

.secondary-page-header-icon {
  width: 46px;
  height: 46px;
  display: block;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  background-color: rgba(255, 255, 255, 0.52) !important;
  background-image: url("./assets/secondary-art/secondary-icons-v1.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  box-shadow:
    0 7px 18px rgba(129, 154, 203, 0.14),
    inset 0 0 0 1px rgba(255, 215, 242, 0.34);
}

.secondary-page-header-icon > * {
  display: none !important;
}

.secondary-page-layer:has([data-secondary-view="recharge"]) .secondary-page-header-icon {
  background-position: 0% 0% !important;
}

.secondary-page-layer:has([data-secondary-view="withdraw"]) .secondary-page-header-icon,
.secondary-page-layer:has([data-secondary-view="set-withdrawal-password"]) .secondary-page-header-icon {
  background-position: 33.333% 0% !important;
}

.secondary-page-layer:has([data-secondary-view="music-dividend"]) .secondary-page-header-icon,
.secondary-page-layer:has([data-secondary-view="music-dividend-product"]) .secondary-page-header-icon {
  background-position: 66.666% 0% !important;
}

.secondary-page-layer:has([data-secondary-view="lucky-draw"]) .secondary-page-header-icon {
  background-position: 100% 0% !important;
}

.secondary-page-layer:has([data-secondary-view="invite-center"]) .secondary-page-header-icon {
  background-position: 0% 33.333% !important;
}

.secondary-page-layer:has([data-secondary-view="level-career"]) .secondary-page-header-icon {
  background-position: 33.333% 33.333% !important;
}

.secondary-page-layer:has([data-secondary-view="points-mall"]) .secondary-page-header-icon {
  background-position: 66.666% 33.333% !important;
}

.secondary-page-layer:has([data-secondary-view="coming-soon"]) .secondary-page-header-icon {
  background-position: 100% 33.333% !important;
}

.secondary-page-layer:has([data-secondary-view="music-task-detail"]) .secondary-page-header-icon {
  background-position: 0% 66.666% !important;
}

.secondary-page-layer:has([data-secondary-view="my-tasks"]) .secondary-page-header-icon {
  background-position: 33.333% 66.666% !important;
}

.secondary-page-layer:has([data-secondary-view="daily-report"]) .secondary-page-header-icon {
  background-position: 66.666% 66.666% !important;
}

.secondary-page-layer:has([data-secondary-view="team-rewards"]) .secondary-page-header-icon {
  background-position: 100% 66.666% !important;
}

.secondary-page-layer:has([data-secondary-view="personal-info"]) .secondary-page-header-icon {
  background-position: 0% 100% !important;
}

.secondary-page-layer:has([data-secondary-view="wallet"]) .secondary-page-header-icon {
  background-position: 33.333% 100% !important;
}

.secondary-page-layer:has([data-secondary-view="help"]) .secondary-page-header-icon,
.secondary-page-layer:has([data-secondary-view="language"]) .secondary-page-header-icon {
  background-position: 66.666% 100% !important;
}

.secondary-page-layer:has([data-secondary-view="notifications"]) .secondary-page-header-icon {
  background-position: 100% 100% !important;
}

/* Reference 3D music art; the removed earnings chart stays removed. */
.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-art {
  width: 48%;
  height: calc(100% - 18px);
  right: 8px;
  top: 9px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background-image: url("./assets/peer-hero-slide-2.png");
  background-repeat: no-repeat;
  background-size: 235% 100%;
  background-position: 100% 50%;
  filter: saturate(0.82) brightness(1.08);
  box-shadow: none;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-art > * {
  display: none !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-copy {
  position: relative;
  z-index: 2;
  width: 55%;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-art {
  width: 72px !important;
  height: 72px !important;
  flex: 0 0 72px !important;
  overflow: hidden;
  border: 0;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.72) url("./assets/secondary-art/music-plans-v1.png") 0% 50% / 300% 100% no-repeat !important;
  box-shadow:
    0 8px 18px rgba(127, 152, 199, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-card:nth-child(1) .music-dividend-product-art {
  background-position: 0% 50% !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-card:nth-child(2) .music-dividend-product-art {
  background-position: 50% 50% !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-art > * {
  display: none !important;
}

.secondary-page-view[data-secondary-view="help"] .help-center-hero > span,
.secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon {
  width: 76px;
  height: 76px;
  display: block;
  flex: 0 0 76px;
  overflow: hidden;
  color: transparent !important;
  font-size: 0 !important;
  border-radius: 24px;
  background-color: rgba(255, 255, 255, 0.58) !important;
  background-image: url("./assets/secondary-art/secondary-icons-v1.png") !important;
  background-repeat: no-repeat !important;
  background-size: 400% 400% !important;
  box-shadow: 0 10px 24px rgba(127, 152, 199, 0.15);
}

.secondary-page-view[data-secondary-view="help"] .help-center-hero > span {
  background-position: 66.666% 100% !important;
}

.secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon {
  background-position: 100% 100% !important;
}

.secondary-page-view[data-secondary-view="help"] .help-center-hero > span > *,
.secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon > * {
  display: none !important;
}

.secondary-page-feedback-icon {
  color: transparent !important;
  font-size: 0 !important;
  position: relative;
}

.secondary-page-feedback-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 5px;
  border-left: 2px solid #70a8d9;
  border-bottom: 2px solid #70a8d9;
  transform: translate(-50%, -62%) rotate(-45deg);
}

@media (max-width: 430px) {
  .secondary-page-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
  }

  .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-art {
    width: 46%;
  }

  .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-art {
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }
}

/* Highest-priority artwork layer: it intentionally overrides the shared SVG icon host. */
#secondary-page-root .secondary-page-header-icon {
  background: rgba(255, 255, 255, 0.62) url("./assets/secondary-art/secondary-icons-v1.png") 0% 0% / 400% 400% no-repeat !important;
}

#secondary-page-root .secondary-page-header-icon > * {
  display: none !important;
}

#secondary-page-root:has([data-secondary-view="recharge"]) .secondary-page-header-icon {
  background-position: 0% 0% !important;
}

#secondary-page-root:has([data-secondary-view="withdraw"]) .secondary-page-header-icon,
#secondary-page-root:has([data-secondary-view="set-withdrawal-password"]) .secondary-page-header-icon {
  background-position: 33.333% 0% !important;
}

#secondary-page-root:has([data-secondary-view="music-dividend"]) .secondary-page-header-icon,
#secondary-page-root:has([data-secondary-view="music-dividend-product"]) .secondary-page-header-icon {
  background-position: 66.666% 0% !important;
}

#secondary-page-root:has([data-secondary-view="lucky-draw"]) .secondary-page-header-icon {
  background-position: 100% 0% !important;
}

#secondary-page-root:has([data-secondary-view="invite-center"]) .secondary-page-header-icon {
  background-position: 0% 33.333% !important;
}

#secondary-page-root:has([data-secondary-view="level-career"]) .secondary-page-header-icon {
  background-position: 33.333% 33.333% !important;
}

#secondary-page-root:has([data-secondary-view="points-mall"]) .secondary-page-header-icon {
  background-position: 66.666% 33.333% !important;
}

#secondary-page-root:has([data-secondary-view="coming-soon"]) .secondary-page-header-icon {
  background-position: 100% 33.333% !important;
}

#secondary-page-root:has([data-secondary-view="music-task-detail"]) .secondary-page-header-icon {
  background-position: 0% 66.666% !important;
}

#secondary-page-root:has([data-secondary-view="my-tasks"]) .secondary-page-header-icon {
  background-position: 33.333% 66.666% !important;
}

#secondary-page-root:has([data-secondary-view="daily-report"]) .secondary-page-header-icon {
  background-position: 66.666% 66.666% !important;
}

#secondary-page-root:has([data-secondary-view="team-rewards"]) .secondary-page-header-icon {
  background-position: 100% 66.666% !important;
}

#secondary-page-root:has([data-secondary-view="personal-info"]) .secondary-page-header-icon {
  background-position: 0% 100% !important;
}

#secondary-page-root:has([data-secondary-view="wallet"]) .secondary-page-header-icon {
  background-position: 33.333% 100% !important;
}

#secondary-page-root:has([data-secondary-view="help"]) .secondary-page-header-icon,
#secondary-page-root:has([data-secondary-view="language"]) .secondary-page-header-icon {
  background-position: 66.666% 100% !important;
}

#secondary-page-root:has([data-secondary-view="notifications"]) .secondary-page-header-icon {
  background-position: 100% 100% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon {
  width: 38px !important;
  height: 38px !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.7) url("./assets/secondary-art/secondary-icons-v1.png") 0% 0% / 400% 400% no-repeat !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon[data-metric-icon="today"] {
  background-position: 0% 0% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon[data-metric-icon="total"] {
  background-position: 33.333% 0% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon[data-metric-icon="level"] {
  background-position: 33.333% 33.333% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon > * {
  display: none !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon {
  width: 76px !important;
  height: 76px !important;
  color: transparent !important;
  font-size: 0 !important;
  background: rgba(255, 255, 255, 0.7) url("./assets/secondary-art/secondary-icons-v1.png") 100% 100% / 400% 400% no-repeat !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon > * {
  display: none !important;
}