/*
 * PeerMusic secondary pages — final page-specific layer.
 * Loaded after all legacy/reference styles so each confirmed page keeps its
 * own hierarchy without reintroducing the older generic placeholder layout.
 */

.secondary-page-layer {
  --pm-final-pink: #ffd7f2;
  --pm-final-pink-deep: #f7b9e8;
  --pm-final-blue: #d8f6ff;
  --pm-final-blue-deep: #bceeff;
  --pm-final-fusion: #f3f7ff;
  --pm-final-ink: #243042;
  --pm-final-muted: #778398;
  --pm-final-line: linear-gradient(100deg, #f7b9e8 0%, #f3f7ff 50%, #bceeff 100%);
  --pm-final-glass: rgba(255, 255, 255, 0.72);
  --pm-final-shadow: 0 8px 25px rgba(160, 180, 255, 0.12);
  --pm-final-shadow-raised: 0 12px 28px rgba(95, 119, 151, 0.16);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 215, 242, 0.5), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(216, 246, 255, 0.64), transparent 36%),
    linear-gradient(145deg, #f8fbff 0%, #f7f5ff 48%, #eefcff 100%) !important;
}

.secondary-page-layer .secondary-page-shell {
  width: min(100%, 430px) !important;
  min-height: 100% !important;
  border-radius: 30px !important;
  background: rgba(250, 252, 255, 0.38) !important;
}

.secondary-page-layer .secondary-page-header {
  min-height: 78px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(188, 238, 255, 0.72) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)) padding-box,
    var(--pm-final-line) border-box !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

.secondary-page-layer .secondary-page-brand {
  margin-bottom: 1px !important;
  font-size: 10px !important;
  color: #768bb0 !important;
}

.secondary-page-layer .secondary-page-title {
  font-size: 22px !important;
  line-height: 1.1 !important;
  color: var(--pm-final-ink) !important;
}

.secondary-page-layer .secondary-page-subtitle {
  margin-top: 3px !important;
  font-size: 11px !important;
  color: var(--pm-final-muted) !important;
}

.secondary-page-layer .secondary-page-back,
.secondary-page-layer .secondary-page-header-icon {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.82)) padding-box,
    var(--pm-final-line) border-box !important;
  box-shadow: var(--pm-final-shadow-raised) !important;
}

.secondary-page-layer .secondary-page-body {
  gap: 12px !important;
  padding: 16px 16px 104px !important;
}

.secondary-page-layer .secondary-page-view {
  gap: 12px !important;
}

.secondary-page-layer .secondary-page-card,
.secondary-page-layer .secondary-page-form,
.secondary-page-layer .secondary-page-list-item,
.secondary-page-layer .secondary-page-product,
.secondary-page-layer .secondary-page-feedback {
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  background:
    linear-gradient(var(--pm-final-glass), var(--pm-final-glass)) padding-box,
    var(--pm-final-line) border-box !important;
  box-shadow: var(--pm-final-shadow) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

.secondary-page-layer .secondary-page-button,
.secondary-page-layer .pm-ref-primary-button {
  min-height: 46px !important;
  border: 1px solid transparent !important;
  border-radius: 16px !important;
  background:
    linear-gradient(100deg, rgba(247, 185, 232, 0.86), rgba(188, 238, 255, 0.9)) padding-box,
    var(--pm-final-line) border-box !important;
  color: #344c70 !important;
  box-shadow: 0 8px 20px rgba(133, 156, 190, 0.14) !important;
  font-weight: 800 !important;
}

.secondary-page-layer .secondary-page-button.is-secondary {
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(247, 252, 255, 0.86)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-layer .secondary-page-nav {
  min-height: 70px !important;
  margin: 0 10px 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: 0 12px 30px rgba(109, 128, 159, 0.14) !important;
  backdrop-filter: blur(22px) !important;
}

/* Recharge */
.secondary-page-view[data-secondary-view="recharge"] .pm-ref-form {
  gap: 12px !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-section {
  padding: 16px !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-amount-input {
  min-height: 58px !important;
  border-radius: 16px !important;
  background: rgba(247, 250, 255, 0.88) !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-amount-input input {
  font-size: 22px !important;
  color: var(--pm-final-ink) !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-amount-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-amount-grid button {
  min-height: 40px !important;
  border: 1px solid rgba(201, 228, 247, 0.88) !important;
  border-radius: 13px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  color: #4e6281 !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-amount-grid button.is-selected {
  border-color: rgba(247, 185, 232, 0.9) !important;
  background: linear-gradient(100deg, rgba(255, 215, 242, 0.72), rgba(216, 246, 255, 0.76)) !important;
  box-shadow: 0 7px 18px rgba(153, 173, 204, 0.14) !important;
}

.secondary-page-view[data-secondary-view="recharge"] .pm-ref-qr {
  width: 82px !important;
  height: 82px !important;
  border-radius: 14px !important;
  background-color: #fff !important;
}

.secondary-page-upload {
  display: grid !important;
  grid-template-columns: 48px 1fr !important;
  gap: 2px 12px !important;
  align-items: center !important;
  min-height: 86px !important;
  padding: 12px !important;
  border: 1px dashed rgba(128, 200, 235, 0.72) !important;
  border-radius: 16px !important;
  background: linear-gradient(105deg, rgba(255, 215, 242, 0.2), rgba(216, 246, 255, 0.38)) !important;
  cursor: pointer;
}

.secondary-page-upload input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

.secondary-page-upload-icon {
  grid-row: 1 / span 2 !important;
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.72), rgba(188, 238, 255, 0.78)) !important;
  color: #657fa8 !important;
  font-size: 24px !important;
}

.secondary-page-upload small {
  color: var(--pm-final-muted) !important;
}

.secondary-page-upload.has-file {
  border-style: solid !important;
  background: rgba(236, 252, 255, 0.72) !important;
}

/* Withdraw */
.secondary-page-view[data-secondary-view="withdraw"] .withdraw-password-prompt {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 50px 1fr !important;
  gap: 8px 12px !important;
  padding: 16px !important;
}

.withdraw-password-prompt-icon {
  display: grid !important;
  grid-row: 1 / span 2 !important;
  place-items: center !important;
  width: 50px !important;
  height: 50px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(247, 185, 232, 0.58), rgba(188, 238, 255, 0.65)) !important;
  color: #6c79a4 !important;
  font-weight: 900 !important;
}

.withdraw-password-prompt h2 {
  margin: 0 !important;
  font-size: 17px !important;
  color: var(--pm-final-ink) !important;
}

.withdraw-password-prompt p {
  margin: 3px 0 0 !important;
  font-size: 11px !important;
}

.withdraw-password-prompt .secondary-page-button {
  grid-column: 1 / -1 !important;
}

.withdraw-password-prompt-close {
  position: absolute !important;
  top: 9px !important;
  right: 9px !important;
  width: 27px !important;
  height: 27px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #8e9aaf !important;
}

.secondary-page-view[data-secondary-view="withdraw"] .pm-ref-withdraw-hero {
  min-height: 120px !important;
  padding: 22px !important;
  background:
    radial-gradient(circle at 82% 48%, rgba(216, 246, 255, 0.78), transparent 30%),
    linear-gradient(var(--pm-final-glass), var(--pm-final-glass)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="withdraw"] .pm-ref-withdraw-hero strong {
  font-size: 34px !important;
}

.withdraw-fixed-amounts {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.withdraw-fixed-amounts button {
  display: grid !important;
  place-items: center !important;
  min-height: 52px !important;
  border: 1px solid transparent !important;
  border-radius: 15px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(248, 252, 255, 0.8)) padding-box,
    var(--pm-final-line) border-box !important;
  color: #465a7b !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.withdraw-fixed-amounts button small {
  margin-top: 1px !important;
  font-size: 8px !important;
  color: #8c9ab0 !important;
}

.withdraw-fixed-amounts button.is-selected {
  background: linear-gradient(110deg, rgba(247, 185, 232, 0.68), rgba(188, 238, 255, 0.78)) !important;
  box-shadow: 0 8px 20px rgba(120, 143, 178, 0.16) !important;
}

.secondary-page-view[data-secondary-view="withdraw"] .pm-ref-fee-card {
  padding: 14px 16px !important;
}

.withdraw-password-field {
  padding: 14px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background:
    linear-gradient(var(--pm-final-glass), var(--pm-final-glass)) padding-box,
    var(--pm-final-line) border-box !important;
}

/* Music dividend */
.secondary-page-view[data-secondary-view="music-dividend"] {
  gap: 14px !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero {
  min-height: 168px !important;
  padding: 24px 20px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 80% 50%, rgba(216, 246, 255, 0.86), transparent 34%),
    radial-gradient(circle at 20% 78%, rgba(255, 215, 242, 0.76), transparent 42%),
    linear-gradient(rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.78)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-copy {
  z-index: 2 !important;
  width: 58% !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-copy h2 {
  margin: 12px 0 8px !important;
  font-size: 25px !important;
  line-height: 1.25 !important;
  color: #243a5b !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-art {
  right: 12px !important;
  width: 44% !important;
  height: 100% !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-note {
  font-size: 72px !important;
  background: linear-gradient(145deg, #ee8acb, #6fd7ed) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 10px 16px rgba(133, 149, 193, 0.22)) !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric {
  min-height: 92px !important;
  padding: 12px 9px !important;
  border-radius: 18px !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-form {
  gap: 12px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-section-title {
  margin-top: 2px !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-card {
  min-height: 96px !important;
  padding: 12px !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  background:
    linear-gradient(var(--pm-final-glass), var(--pm-final-glass)) padding-box,
    var(--pm-final-line) border-box !important;
  box-shadow: var(--pm-final-shadow) !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-art {
  width: 64px !important;
  height: 64px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.8), rgba(188, 238, 255, 0.9)) !important;
  box-shadow: inset 0 1px 0 #fff, 0 8px 18px rgba(128, 147, 179, 0.16) !important;
}

.secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-product-heading strong {
  font-size: 15px !important;
}

/* Lucky draw */
.secondary-page-view[data-secondary-view="lucky-draw"] .secondary-page-wheel-card {
  padding: 18px !important;
}

.secondary-page-view[data-secondary-view="lucky-draw"] .secondary-page-wheel-wrap {
  min-height: 320px !important;
}

.secondary-page-view[data-secondary-view="lucky-draw"] .secondary-page-wheel {
  width: 286px !important;
  height: 286px !important;
  border: 10px solid rgba(255, 255, 255, 0.76) !important;
  filter: drop-shadow(0 12px 22px rgba(119, 137, 174, 0.18)) !important;
}

/* Invite */
.secondary-page-view[data-secondary-view="invite-center"] .invite-poster {
  min-height: 610px !important;
  padding: 26px 20px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(216, 246, 255, 0.85), transparent 24%),
    radial-gradient(circle at 18% 78%, rgba(255, 215, 242, 0.7), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.86)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="invite-center"] .invite-poster-copy h2 {
  max-width: 270px !important;
  margin-top: 16px !important;
  font-size: 26px !important;
  line-height: 1.28 !important;
}

.secondary-page-view[data-secondary-view="invite-center"] .invite-poster-visual {
  min-height: 210px !important;
}

.secondary-page-view[data-secondary-view="invite-center"] .invite-poster-gift {
  width: 150px !important;
  height: 150px !important;
}

.secondary-page-view[data-secondary-view="invite-center"] .invite-poster-code {
  min-height: 92px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.72) !important;
}

.secondary-page-view[data-secondary-view="invite-center"] .invite-poster-qr {
  width: 104px !important;
  height: 104px !important;
  padding: 10px !important;
  border-radius: 18px !important;
  background: #fff !important;
}

/* Level / career */
.secondary-page-view[data-secondary-view="level-career"] .level-current-card {
  min-height: 170px !important;
  padding: 20px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 88% 52%, rgba(216, 246, 255, 0.78), transparent 30%),
    linear-gradient(var(--pm-final-glass), var(--pm-final-glass)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-current-orb {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 34% 28%, #fff, transparent 22%),
    linear-gradient(145deg, rgba(247, 185, 232, 0.82), rgba(188, 238, 255, 0.9)) !important;
  box-shadow: 0 12px 24px rgba(115, 136, 171, 0.18), inset 0 0 0 8px rgba(255, 255, 255, 0.62) !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-current-orb > span {
  font-size: 42px !important;
  color: #fff !important;
  text-shadow: 0 5px 12px rgba(115, 130, 171, 0.22) !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-current-orb small {
  width: 28px !important;
  height: 28px !important;
  font-size: 10px !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-current-copy h2 {
  font-size: 19px !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-career-actions .secondary-page-button {
  color: #40597d !important;
  text-shadow: none !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-career-actions .secondary-page-button.is-secondary {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(244, 251, 255, 0.88)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-roadmap {
  padding: 16px !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-roadmap-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item {
  min-height: 108px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.74), rgba(248, 252, 255, 0.78)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item > span {
  display: grid !important;
  place-items: center !important;
  width: 38px !important;
  height: 38px !important;
  margin-inline: auto !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.72), rgba(188, 238, 255, 0.82)) !important;
  color: #fff !important;
  box-shadow: 0 7px 14px rgba(129, 147, 179, 0.14) !important;
}

.secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item.is-current {
  box-shadow: 0 0 0 2px rgba(247, 185, 232, 0.28), var(--pm-final-shadow-raised) !important;
}

/* Points mall */
.secondary-page-view[data-secondary-view="points-mall"] .points-mall-hero {
  min-height: 150px !important;
  padding: 22px !important;
}

.secondary-page-view[data-secondary-view="points-mall"] .points-mall-hero strong {
  font-size: 40px !important;
}

.secondary-page-view[data-secondary-view="points-mall"] .secondary-page-grid.is-products {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product {
  min-height: 250px !important;
  padding: 12px !important;
}

.secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product-visual {
  min-height: 132px !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.3), rgba(216, 246, 255, 0.55)) !important;
}

.secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product-visual img {
  width: 88px !important;
  height: 88px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 14px rgba(112, 130, 166, 0.18)) !important;
}

/* Coming soon */
.secondary-page-view[data-secondary-view="coming-soon"] .secondary-page-empty {
  min-height: 360px !important;
  padding: 30px !important;
}

.secondary-page-view[data-secondary-view="coming-soon"] .secondary-page-empty-icon {
  width: 112px !important;
  height: 112px !important;
  font-size: 48px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.72), rgba(188, 238, 255, 0.82)) !important;
  box-shadow: 0 14px 28px rgba(121, 140, 173, 0.16), inset 0 0 0 10px rgba(255, 255, 255, 0.58) !important;
}

/* Music task */
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-player {
  padding: 18px !important;
  border-radius: 26px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover {
  width: 100% !important;
  min-height: 260px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(145deg, rgba(18, 42, 81, 0.96), rgba(59, 93, 145, 0.92)),
    linear-gradient(120deg, #122345, #5678a9) !important;
  overflow: hidden !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover::after {
  content: "枯日勒\A的夜晚" !important;
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  white-space: pre !important;
  text-align: center !important;
  color: #fff !important;
  font-family: "STKaiti", "KaiTi", serif !important;
  font-size: 36px !important;
  line-height: 1.25 !important;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover img,
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover > i {
  opacity: 0 !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-meta {
  text-align: center !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-meta h2 {
  font-size: 20px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-waveform {
  min-height: 78px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-controls {
  min-height: 76px !important;
  padding: 10px !important;
  border-radius: 22px !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 10px 22px rgba(107, 126, 159, 0.16) !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics article {
  position: relative !important;
  display: flex !important;
  min-height: 78px !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 2px !important;
  padding: 13px 10px 12px 58px !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  background:
    linear-gradient(rgba(255, 255, 255, .88), rgba(250, 253, 255, .82)) padding-box,
    linear-gradient(105deg, rgba(247, 185, 232, .72), rgba(243, 247, 255, .92) 50%, rgba(142, 217, 255, .76)) border-box !important;
  box-shadow:
    0 8px 20px rgba(112, 133, 168, .11),
    inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics article::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(255, 239, 249, .92), rgba(235, 248, 255, .94));
  box-shadow:
    0 5px 12px rgba(122, 151, 190, .12),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  transform: translateY(-50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics article::after {
  position: absolute;
  left: 29px;
  top: 50%;
  color: #79bde5;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(129, 150, 210, .16);
  transform: translate(-50%, -52%);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics article:first-child::after {
  content: "♪";
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics article:last-child::after {
  content: "◷";
  color: #a390dc;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics strong,
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics span {
  position: relative;
  z-index: 1;
  width: 100%;
  text-align: left !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics strong {
  font-size: 22px !important;
  line-height: 1.05 !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics span {
  font-size: 8.5px !important;
  line-height: 1.25 !important;
}

/* Daily report */
.secondary-page-view[data-secondary-view="daily-report"] .daily-report-filter {
  padding: 16px !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-overview {
  padding: 18px !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-summary {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .secondary-page-stat {
  min-height: 112px !important;
  padding: 16px !important;
  border-radius: 18px !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .secondary-page-stat strong {
  color: #bf80bb !important;
  font-size: 25px !important;
}

/* Team report */
.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-overview {
  padding: 20px !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-member-summary {
  min-height: 120px !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-network {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-network .secondary-page-stat {
  min-height: 110px !important;
  border-radius: 18px !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-total {
  min-height: 160px !important;
  padding: 22px !important;
}

/* Personal information */
.secondary-page-view[data-secondary-view="personal-info"] .secondary-page-profile {
  min-height: 122px !important;
  padding: 18px !important;
}

.secondary-page-view[data-secondary-view="personal-info"] .secondary-page-profile-avatar {
  width: 76px !important;
  height: 76px !important;
  background:
    url("./assets/pm-logo.png") center / 150% no-repeat,
    linear-gradient(145deg, rgba(255, 215, 242, 0.6), rgba(188, 238, 255, 0.68)) !important;
  color: transparent !important;
}

.secondary-page-view[data-secondary-view="personal-info"] .personal-info-settings {
  padding: 8px 14px !important;
}

.secondary-page-view[data-secondary-view="personal-info"] .personal-info-row {
  min-height: 58px !important;
}

/* Wallet */
.secondary-page-view[data-secondary-view="wallet"] .wallet-dual-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card {
  min-height: 190px !important;
  padding: 18px 16px !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card > span {
  color: #65748d !important;
  font-size: 12px !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card > strong {
  display: block !important;
  margin: 12px 0 6px !important;
  color: var(--pm-final-ink) !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card > strong small {
  font-size: 8px !important;
  color: #7f8ca2 !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card p {
  min-height: 32px !important;
  font-size: 10px !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card .secondary-page-button {
  width: 100% !important;
  color: #40597d !important;
  text-shadow: none !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-account-card .secondary-page-button.is-secondary {
  background:
    linear-gradient(rgba(255, 255, 255, 0.86), rgba(244, 251, 255, 0.9)) padding-box,
    var(--pm-final-line) border-box !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-split-rules {
  padding: 16px !important;
}

.secondary-page-view[data-secondary-view="wallet"] .wallet-bills-heading {
  margin-top: 3px !important;
}

/* Help */
.secondary-page-view[data-secondary-view="help"] .help-center-hero {
  min-height: 132px !important;
  padding: 18px !important;
}

.secondary-page-view[data-secondary-view="help"] .help-center-hero > span {
  width: 62px !important;
  height: 62px !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.62), rgba(188, 238, 255, 0.7)) !important;
}

.secondary-page-view[data-secondary-view="help"] .help-faq-panel {
  padding: 14px !important;
}

.secondary-page-view[data-secondary-view="help"] [data-faq-item] {
  border-radius: 16px !important;
}

/* Language */
.secondary-page-view[data-secondary-view="language"] .secondary-page-language {
  min-height: 74px !important;
  border-radius: 18px !important;
}

.secondary-page-view[data-secondary-view="language"] .secondary-page-language.is-selected {
  background: linear-gradient(105deg, rgba(255, 215, 242, 0.48), rgba(216, 246, 255, 0.62)) !important;
}

/* Notifications */
.secondary-page-view[data-secondary-view="notifications"] .notifications-summary {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: center !important;
  min-height: 150px !important;
  padding: 20px !important;
}

.notifications-summary-icon {
  display: grid !important;
  place-items: center !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.76), rgba(188, 238, 255, 0.84)) !important;
  color: #fff !important;
  font-size: 30px !important;
  box-shadow: 0 10px 20px rgba(121, 140, 173, 0.16) !important;
}

.notifications-summary h2 {
  margin: 4px 0 !important;
  color: var(--pm-final-ink) !important;
  font-size: 18px !important;
}

.notifications-summary p {
  font-size: 11px !important;
}

.notifications-summary > strong {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  display: grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #f2b8df !important;
  color: #fff !important;
}

.notifications-list {
  gap: 10px !important;
}

.notification-item {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) !important;
  gap: 12px !important;
  min-height: 104px !important;
  padding: 14px !important;
}

.notification-item.is-unread {
  box-shadow: 0 0 0 2px rgba(247, 185, 232, 0.2), var(--pm-final-shadow) !important;
}

.notification-icon {
  display: grid !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(255, 215, 242, 0.72), rgba(188, 238, 255, 0.8)) !important;
  color: #fff !important;
  font-weight: 900 !important;
}

.notification-item > div > div {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.notification-item h2 {
  margin: 0 !important;
  font-size: 14px !important;
}

.notification-item time {
  color: #95a0b2 !important;
  font-size: 9px !important;
}

.notification-item p {
  margin: 6px 0 0 !important;
  font-size: 10px !important;
}

@media (max-width: 370px) {
  .secondary-page-layer .secondary-page-body {
    padding-inline: 12px !important;
  }

  .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-hero-copy h2 {
    font-size: 22px !important;
  }

  .secondary-page-view[data-secondary-view="wallet"] .wallet-dual-grid {
    gap: 8px !important;
  }

  .secondary-page-view[data-secondary-view="wallet"] .wallet-account-card {
    padding-inline: 12px !important;
  }
}