/*
 * PeerMusic final visual-system layer.
 * This file is intentionally loaded last: it reconciles the accumulated page
 * styles without changing page content, routes, or interaction logic.
 */

:root {
  --pm-vs-pink: #f7cce9;
  --pm-vs-pink-soft: #ffe8f7;
  --pm-vs-blue: #bceeff;
  --pm-vs-blue-soft: #e3f8ff;
  --pm-vs-fusion: #f3f7ff;
  --pm-vs-ink: #17263c;
  --pm-vs-muted: #738198;
  --pm-vs-surface: rgba(255, 255, 255, 0.58);
  --pm-vs-surface-strong: rgba(255, 255, 255, 0.68);
  --pm-vs-surface-soft: rgba(255, 255, 255, 0.44);
  --pm-vs-line: linear-gradient(
    105deg,
    rgba(247, 185, 232, 0.72) 0%,
    rgba(255, 255, 255, 0.92) 30%,
    rgba(243, 247, 255, 0.92) 53%,
    rgba(188, 238, 255, 0.78) 100%
  );
  --pm-vs-shadow: 0 8px 25px rgba(117, 142, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  --pm-vs-shadow-small: 0 5px 16px rgba(117, 142, 184, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --pm-vs-blur: blur(22px) saturate(110%);
  --pm-vs-radius: 20px;
  --pm-vs-radius-control: 14px;
  --pm-vs-space-1: 8px;
  --pm-vs-space-2: 12px;
  --pm-vs-space-3: 16px;
  --pm-vs-space-4: 24px;
  --pm-icon-16: 16px;
  --pm-icon-20: 20px;
  --pm-icon-24: 24px;
  --pm-icon-38: 38px;
  --pm-icon-42: 42px;
  --pm-icon-46: 46px;
}

/*
 * The previous motion file contained captured interface frames, which caused
 * duplicated phone screens outside the app. Use a true seamless colour field.
 */
body {
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 215, 242, 0.72), transparent 34%),
    radial-gradient(circle at 84% 16%, rgba(216, 246, 255, 0.8), transparent 38%),
    radial-gradient(circle at 68% 82%, rgba(243, 247, 255, 0.94), transparent 42%),
    linear-gradient(135deg, #fff8fc 0%, #f3f7ff 50%, #effcff 100%) !important;
  background-size: 170% 170% !important;
  animation: pm-vs-background-flow 18s ease-in-out infinite alternate !important;
}

.site-video-background {
  display: none !important;
}

@keyframes pm-vs-background-flow {
  0% {
    background-position: 0% 18%, 92% 0%, 72% 100%, 0% 50%;
  }

  50% {
    background-position: 22% 2%, 70% 20%, 46% 78%, 52% 48%;
  }

  100% {
    background-position: 8% 30%, 100% 12%, 62% 92%, 100% 50%;
  }
}

/* One readable type scale across primary and secondary screens. */
.phone-shell,
#secondary-page-root {
  color: var(--pm-vs-ink);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

#secondary-page-root .secondary-page-title {
  margin: 0 !important;
  color: var(--pm-vs-ink) !important;
  font-size: clamp(23px, 6.2vw, 28px) !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
}

#secondary-page-root :is(
  .secondary-page-view h2,
  .music-dividend-section-title,
  .wallet-bills-heading h2,
  .help-faq-heading h2,
  .level-roadmap > h2
) {
  color: var(--pm-vs-ink);
  font-size: 18px;
  font-weight: 750;
  line-height: 1.35;
  letter-spacing: -0.012em;
}

#secondary-page-root :is(
  .secondary-page-view h3,
  .secondary-page-product-title,
  .secondary-page-task-title
) {
  color: var(--pm-vs-ink);
  font-size: 15px;
  font-weight: 720;
  line-height: 1.4;
}

#secondary-page-root :is(
  p,
  small,
  .secondary-page-muted,
  .secondary-page-subtitle,
  .secondary-page-product-copy,
  .secondary-page-task-meta
) {
  color: var(--pm-vs-muted);
  line-height: 1.55;
}

/* A single glass recipe. The gradient exists only inside the border. */
.phone-shell :is(
  .glass-panel,
  .glass-card,
  .home-hero,
  .shortcut,
  .daily-task-panel,
  .daily-task-card,
  .reward-group,
  .reward-card,
  .music-worker-card,
  .video-card,
  .income-card,
  .summary-pill,
  .manage-card,
  .account-hero,
  .overview-grid .metric,
  .quick,
  .action-row
),
#secondary-page-root :is(
  .secondary-page-card,
  .secondary-page-form,
  .secondary-page-task,
  .secondary-page-stat,
  .secondary-page-list,
  .secondary-page-list-item,
  .music-dividend-metric,
  .music-dividend-product-card,
  .music-product-fact,
  .level-roadmap-item,
  .wallet-account-card,
  .personal-info-row,
  .notification-item,
  .secondary-page-language,
  .secondary-page-faq
) {
  border: 1px solid transparent !important;
  border-radius: var(--pm-vs-radius) !important;
  background:
    linear-gradient(var(--pm-vs-surface), var(--pm-vs-surface)) padding-box,
    var(--pm-vs-line) border-box !important;
  box-shadow: var(--pm-vs-shadow) !important;
  -webkit-backdrop-filter: var(--pm-vs-blur) !important;
  backdrop-filter: var(--pm-vs-blur) !important;
}

/* Inner rows stay quieter so cards do not look like nested coloured blocks. */
#secondary-page-root :is(
  .secondary-page-list-item,
  .personal-info-row,
  .secondary-page-faq,
  .music-product-fact,
  .level-roadmap-item
) {
  background:
    linear-gradient(var(--pm-vs-surface-soft), var(--pm-vs-surface-soft)) padding-box,
    var(--pm-vs-line) border-box !important;
  box-shadow: var(--pm-vs-shadow-small) !important;
}

/* Consistent page geometry and 8 / 12 / 16 / 24 spacing rhythm. */
#secondary-page-root .secondary-page-shell {
  background: transparent !important;
}

/*
 * A secondary route sits above the primary screen. Its own flowing backdrop
 * must remain visible, while the home screen underneath must not bleed through
 * translucent cards and headers.
 */
#secondary-page-root.secondary-page-layer {
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 16%, rgba(255, 215, 242, 0.58), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(216, 246, 255, 0.72), transparent 38%),
    radial-gradient(circle at 68% 84%, rgba(243, 247, 255, 0.9), transparent 42%),
    linear-gradient(135deg, #fff9fd 0%, #f5f8ff 52%, #effcff 100%) !important;
  background-size: 170% 170% !important;
  animation: pm-vs-background-flow 18s ease-in-out infinite alternate !important;
}

#secondary-page-root .secondary-page-header {
  min-height: 96px !important;
  padding: 16px 20px 12px !important;
  gap: var(--pm-vs-space-2) !important;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.28),
    rgba(255, 255, 255, 0.08)
  ) !important;
  -webkit-backdrop-filter: blur(18px) saturate(108%) !important;
  backdrop-filter: blur(18px) saturate(108%) !important;
}

#secondary-page-root .secondary-page-header-copy {
  min-width: 0;
  gap: 2px !important;
}

#secondary-page-root .secondary-page-body {
  padding: 8px 16px 112px !important;
}

#secondary-page-root .secondary-page-view {
  gap: var(--pm-vs-space-3) !important;
}

#secondary-page-root :is(
  .secondary-page-card,
  .secondary-page-form,
  .secondary-page-list,
  .music-dividend-form,
  .personal-info-settings,
  .wallet-bills-list
) {
  padding: var(--pm-vs-space-3) !important;
}

#secondary-page-root :is(
  .secondary-page-grid,
  .music-dividend-metrics,
  .wallet-dual-grid,
  .level-roadmap-grid,
  .pm-lucky-lower-grid
) {
  gap: var(--pm-vs-space-2) !important;
}

/* Controls and buttons use one restrained low-saturation treatment. */
.phone-shell button:not(.peer-hero-dots button),
#secondary-page-root :is(
  button,
  input,
  select,
  textarea,
  .secondary-page-input,
  .secondary-page-input-shell
) {
  border-radius: var(--pm-vs-radius-control) !important;
}

#secondary-page-root :is(
  .secondary-page-button,
  .pm-ref-primary-button,
  .music-dividend-submit
).is-primary,
#secondary-page-root :is(
  .secondary-page-button.is-primary,
  .pm-ref-primary-button,
  .music-dividend-submit,
  .pm-lucky-spin
) {
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.76) !important;
  background: linear-gradient(
    105deg,
    rgba(239, 149, 207, 0.86),
    rgba(174, 170, 234, 0.84) 52%,
    rgba(94, 199, 231, 0.86)
  ) !important;
  box-shadow: 0 8px 20px rgba(117, 142, 184, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

#secondary-page-root :is(
  .secondary-page-button.is-secondary,
  .secondary-page-button.is-compact,
  .pm-ref-amount-grid button,
  .withdraw-fixed-amounts button,
  .pm-ref-network-grid label > span
) {
  color: #426c89 !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)) padding-box,
    var(--pm-vs-line) border-box !important;
  box-shadow: var(--pm-vs-shadow-small) !important;
}

/* Shared functional icon tokens and optical alignment. */
.pm-icon {
  display: block;
  overflow: visible;
  color: #58b8da;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 7px rgba(102, 153, 192, 0.12));
}

.pm-icon--16 { width: var(--pm-icon-16) !important; height: var(--pm-icon-16) !important; }
.pm-icon--20 { width: var(--pm-icon-20) !important; height: var(--pm-icon-20) !important; }
.pm-icon--24 { width: var(--pm-icon-24) !important; height: var(--pm-icon-24) !important; }
.pm-icon--38 { width: var(--pm-icon-38) !important; height: var(--pm-icon-38) !important; }
.pm-icon--42 { width: var(--pm-icon-42) !important; height: var(--pm-icon-42) !important; }
.pm-icon--46 { width: var(--pm-icon-46) !important; height: var(--pm-icon-46) !important; }

.pm-icon-optical {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--pm-optical-scale, 1));
}

#secondary-page-root :is(
  .secondary-page-back,
  .secondary-page-header-icon
) {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52)) padding-box,
    var(--pm-vs-line) border-box !important;
  box-shadow: var(--pm-vs-shadow-small) !important;
}

#secondary-page-root .secondary-page-brand {
  min-height: 24px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: var(--pm-vs-ink) !important;
}

#secondary-page-root .secondary-page-brand .pm-icon {
  width: 20px !important;
  height: 20px !important;
}

/* Three banners: same frame, height, brightness and crop. Dots remain hidden. */
#home .peer-hero-slider {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2.48 / 1 !important;
  border-radius: var(--pm-vs-radius) !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.28)) padding-box,
    var(--pm-vs-line) border-box !important;
  box-shadow: var(--pm-vs-shadow) !important;
}

#home .peer-hero-track,
#home :is(
  .peer-hero-slide,
  .peer-hero-slide-primary,
  .peer-hero-slide-secondary,
  .peer-hero-slide-tertiary
) {
  height: 100% !important;
}

#home :is(
  .peer-hero-slide,
  .peer-hero-slide-primary,
  .peer-hero-slide-secondary,
  .peer-hero-slide-tertiary
) {
  flex: 0 0 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

#home :is(
  .peer-hero-slide,
  .peer-hero-slide-primary,
  .peer-hero-slide-secondary,
  .peer-hero-slide-tertiary
) .peer-hero-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: saturate(0.88) brightness(1.035) contrast(0.96) !important;
}

#home .peer-hero-dots {
  display: none !important;
}

/* Route-specific illustration atlas: one source, nine purpose-built visuals. */
.pm-vs-art {
  display: block;
  position: absolute;
  z-index: 0;
  width: 132px;
  height: 132px;
  pointer-events: none;
  opacity: 0.88;
  background-image: url("./assets/secondary-art/secondary-illustrations-v1.png");
  background-repeat: no-repeat;
  background-size: 300% 300%;
  filter: saturate(0.82) brightness(1.04)
    drop-shadow(0 12px 20px rgba(116, 145, 190, 0.12));
}

.pm-vs-art--recharge { background-position: 0% 0%; }
.pm-vs-art--withdraw { background-position: 50% 0%; }
.pm-vs-art--invite { background-position: 100% 0%; }
.pm-vs-art--music { background-position: 0% 50%; }
.pm-vs-art--language { background-position: 50% 50%; }
.pm-vs-art--help { background-position: 100% 50%; }
.pm-vs-art--team { background-position: 0% 100%; }
.pm-vs-art--profile { background-position: 50% 100%; }
.pm-vs-art--lucky { background-position: 100% 100%; }

#secondary-page-root :is(
  .pm-ref-section:first-child,
  .pm-ref-withdraw-hero,
  .invite-poster,
  .help-center-hero,
  .team-weekly-overview,
  .secondary-page-profile,
  .wallet-account-card.is-main,
  .secondary-page-empty
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate;
}

#secondary-page-root :is(
  .pm-ref-section:first-child,
  .pm-ref-withdraw-hero,
  .invite-poster,
  .help-center-hero,
  .team-weekly-overview,
  .secondary-page-profile,
  .wallet-account-card.is-main,
  .secondary-page-empty
) > :not(.pm-vs-art) {
  position: relative;
  z-index: 1;
}

#secondary-page-root .pm-ref-section:first-child .pm-vs-art,
#secondary-page-root .pm-ref-withdraw-hero .pm-vs-art,
#secondary-page-root .wallet-account-card.is-main .pm-vs-art {
  right: -8px;
  bottom: -20px;
}

#secondary-page-root :is(.invite-poster, .help-center-hero, .team-weekly-overview) .pm-vs-art {
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}

#secondary-page-root :is(.secondary-page-profile, .secondary-page-empty) .pm-vs-art {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#secondary-page-root .invite-poster-visual {
  background: transparent !important;
}

#secondary-page-root .invite-poster-visual img {
  opacity: 0 !important;
}

/* Lucky wheel artwork and labels remain functional, but icon positions are fixed. */
#secondary-page-root .secondary-page-wheel > span small {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
}

#secondary-page-root .pm-wheel-prize-icon,
#secondary-page-root .pm-vs-inline-icon {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  vertical-align: middle;
}

#secondary-page-root .pm-lucky-card-title h2,
#secondary-page-root .pm-lucky-rules,
#secondary-page-root .pm-ref-inline-note {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Page-specific fixes found in visual QA. */
#secondary-page-root .music-dividend-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#secondary-page-root .music-dividend-metric {
  min-width: 0 !important;
  min-height: 116px !important;
  padding: 14px 10px !important;
}

#secondary-page-root .music-dividend-metric strong {
  white-space: nowrap;
  font-size: clamp(22px, 6.5vw, 29px) !important;
}

#secondary-page-root .level-roadmap-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#secondary-page-root .level-roadmap-item {
  min-height: 82px !important;
}

#secondary-page-root .secondary-page-grid.is-products {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: stretch;
}

#secondary-page-root .secondary-page-product {
  height: 100%;
}

#secondary-page-root .secondary-page-product-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#secondary-page-root .secondary-page-product-media {
  aspect-ratio: 1.24 / 1 !important;
}

#secondary-page-root .daily-report-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#secondary-page-root .team-weekly-network {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#secondary-page-root .personal-info-row {
  min-height: 64px !important;
}

#secondary-page-root .secondary-page-nav {
  border-radius: 26px 26px 0 0 !important;
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(24px) saturate(110%) !important;
  backdrop-filter: blur(24px) saturate(110%) !important;
  box-shadow: 0 -8px 28px rgba(117, 142, 184, 0.1) !important;
}

#secondary-page-root .secondary-page-nav-item {
  min-width: 0 !important;
  gap: 4px !important;
}

@media (max-width: 380px) {
  #secondary-page-root .secondary-page-header {
    padding-inline: 14px !important;
  }

  #secondary-page-root .secondary-page-body {
    padding-inline: 12px !important;
  }

  .pm-vs-art {
    width: 112px;
    height: 112px;
  }

  #secondary-page-root .music-dividend-metric {
    min-height: 104px !important;
    padding-inline: 7px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-vs-art,
  .site-video-background {
    animation: none !important;
  }
}

/* Final cascade reconciliation after legacy artwork and layout layers. */
#home :is(
  .glass-card,
  .glass-panel,
  .shortcut,
  .daily-task-card,
  .reward-group,
  .home-task-card,
  .music-player-card
) {
  border-radius: var(--pm-vs-radius) !important;
}

#home :is(
  .peer-hero-slide,
  .peer-hero-slide-primary,
  .peer-hero-slide-secondary,
  .peer-hero-slide-tertiary
) {
  position: relative !important;
}

#home :is(
  .peer-hero-slide,
  .peer-hero-slide-primary,
  .peer-hero-slide-secondary,
  .peer-hero-slide-tertiary
) .peer-hero-image {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
}

/*
 * Functional icons must remain shared SVGs. Older illustration styles used a
 * bitmap sprite and hid the real icon nodes; this restores the token system.
 */
#secondary-page-root :is(
  .secondary-page-header-icon,
  .secondary-page-brand > i,
  .help-center-hero > span,
  .notifications-summary-icon
) {
  background:
    linear-gradient(var(--pm-vs-surface-strong), var(--pm-vs-surface-strong)) padding-box,
    var(--pm-vs-line) border-box !important;
  border: 1px solid transparent !important;
  color: #58b8da !important;
  box-shadow: var(--pm-vs-shadow-small) !important;
}

#secondary-page-root :is(
  .secondary-page-header-icon,
  .secondary-page-brand > i,
  .help-center-hero > span,
  .notifications-summary-icon
) > * {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#secondary-page-root .secondary-page-header-icon > .pm-icon,
#secondary-page-root .secondary-page-brand > i > .pm-icon {
  width: var(--pm-icon-20) !important;
  height: var(--pm-icon-20) !important;
}

#secondary-page-root .secondary-page-form {
  position: relative;
  overflow: hidden;
}

#secondary-page-root .secondary-page-form > :not(.pm-vs-art) {
  position: relative;
  z-index: 1;
}

#secondary-page-root .secondary-page-form > .pm-vs-art {
  right: -18px;
  top: 4px;
  width: 150px;
  height: 150px;
  opacity: 0.34;
}

/* Dedicated page artwork wins over the shared decorative atlas. */
#secondary-page-root :is(
  [data-secondary-view="music-dividend"] .music-dividend-hero,
  [data-secondary-view="music-task-detail"] .secondary-page-player,
  [data-secondary-view="points-mall"] .secondary-page-product-media,
  [data-secondary-view="level-career"] .level-current-card
) .pm-vs-art {
  display: none !important;
}

/*
 * The mall hero uses a dedicated 3D music-points illustration. Functional
 * controls remain SVGs; this replaces only the old decorative placeholder.
 */
#secondary-page-root
  [data-secondary-view="points-mall"]
  .points-mall-hero
  > i {
  width: 112px !important;
  height: 112px !important;
  right: 12px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background:
    transparent
    url("./assets/secondary-art/secondary-icons-v1.png")
    66.666% 33.333% / 400% 400%
    no-repeat !important;
  box-shadow: none !important;
  filter:
    saturate(0.82)
    brightness(1.06)
    drop-shadow(0 12px 20px rgba(116, 145, 190, 0.14));
}

#secondary-page-root
  [data-secondary-view="points-mall"]
  .points-mall-hero
  > i
  > * {
  display: none !important;
}