/*
 * PeerMusic transparent glass layer
 * Loaded after every page-specific stylesheet so all existing content and
 * layout remain intact while the moving ambient background stays visible.
 */

:root {
  --pm-glass-surface: rgba(255, 255, 255, 0.58);
  --pm-glass-surface-strong: rgba(255, 255, 255, 0.68);
  --pm-glass-surface-soft: rgba(255, 255, 255, 0.43);
  --pm-glass-surface-nested: rgba(250, 253, 255, 0.48);
  --pm-glass-pink: rgba(247, 185, 232, 0.7);
  --pm-glass-fusion: rgba(243, 247, 255, 0.9);
  --pm-glass-blue: rgba(188, 238, 255, 0.74);
  --pm-glass-line: linear-gradient(
    105deg,
    var(--pm-glass-pink) 0%,
    rgba(255, 255, 255, 0.92) 24%,
    var(--pm-glass-fusion) 52%,
    var(--pm-glass-blue) 100%
  );
  --pm-glass-shadow:
    0 8px 25px rgba(117, 142, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
  --pm-glass-blur: blur(22px) saturate(112%);
}

/* Full-site PeerMusic motion background. It sits behind every primary and
   secondary screen while all existing glass surfaces remain interactive. */
.site-video-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  filter: saturate(0.9) brightness(1.04) contrast(0.96);
}

.stage {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

/* The application frame is translucent as well, so the page-level flow is
   visible through the whole experience instead of stopping at the phone. */
.phone-shell {
  background:
    radial-gradient(circle at 10% 14%, rgba(156, 216, 255, 0.12), transparent 38%),
    radial-gradient(circle at 90% 18%, rgba(170, 239, 219, 0.1), transparent 36%),
    radial-gradient(circle at 14% 88%, rgba(207, 195, 255, 0.09), transparent 40%),
    linear-gradient(135deg, rgba(249, 252, 255, 0.24), rgba(244, 249, 255, 0.18) 48%, rgba(246, 253, 251, 0.22)) !important;
  -webkit-backdrop-filter: blur(3px) saturate(108%) !important;
  backdrop-filter: blur(3px) saturate(108%) !important;
  animation: none !important;
}

/* Main five-screen containers. */
.phone-shell :is(
  .glass-panel,
  .glass-card,
  .shortcut-reference-art,
  .daily-task-panel,
  .daily-task-card,
  .task-progress-card,
  .reward-group,
  .reward-card,
  .music-worker-card,
  .video-card,
  .income-card,
  .summary-pill,
  .manage-card,
  .explain,
  .calc-list,
  .formula-card,
  .account-hero,
  .quick,
  .metric,
  .profile-card,
  .account-card,
  .wallet-card,
  .stat-card
) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--pm-glass-surface), var(--pm-glass-surface)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow: var(--pm-glass-shadow) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
  backdrop-filter: var(--pm-glass-blur) !important;
}

/* The shortcut design has an ID-scoped legacy rule, so it needs an equally
   explicit glass override to avoid falling back to the former 90% white fill. */
#home .shortcut-reference-art {
  background:
    linear-gradient(var(--pm-glass-surface), var(--pm-glass-surface)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow: var(--pm-glass-shadow) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
  backdrop-filter: var(--pm-glass-blur) !important;
}

/* Eight home entry glyphs: pink, pale blue and white stay present together.
   Independent durations and negative delays create an organic stagger without
   abrupt high-contrast flashing. */
#home .shortcut-reference-art {
  --pm-icon-flicker-duration: 4.8s;
  --pm-icon-flicker-delay: -0.4s;
}

#home .shortcut-reference-art:nth-child(2) { --pm-icon-flicker-duration: 5.7s; --pm-icon-flicker-delay: -2.1s; }
#home .shortcut-reference-art:nth-child(3) { --pm-icon-flicker-duration: 4.3s; --pm-icon-flicker-delay: -1.3s; }
#home .shortcut-reference-art:nth-child(4) { --pm-icon-flicker-duration: 6.1s; --pm-icon-flicker-delay: -3.5s; }
#home .shortcut-reference-art:nth-child(5) { --pm-icon-flicker-duration: 5.2s; --pm-icon-flicker-delay: -2.8s; }
#home .shortcut-reference-art:nth-child(6) { --pm-icon-flicker-duration: 4.6s; --pm-icon-flicker-delay: -0.9s; }
#home .shortcut-reference-art:nth-child(7) { --pm-icon-flicker-duration: 5.9s; --pm-icon-flicker-delay: -4.1s; }
#home .shortcut-reference-art:nth-child(8) { --pm-icon-flicker-duration: 4.9s; --pm-icon-flicker-delay: -1.8s; }

#home .shortcut-line-svg stop {
  animation: pm-shortcut-color-flicker var(--pm-icon-flicker-duration) ease-in-out infinite;
  animation-delay: var(--pm-icon-flicker-delay);
}

#home .shortcut-line-svg stop:nth-of-type(2) { animation-delay: calc(var(--pm-icon-flicker-delay) - 1.15s); }
#home .shortcut-line-svg stop:nth-of-type(3) { animation-delay: calc(var(--pm-icon-flicker-delay) - 2.3s); }
#home .shortcut-line-svg stop:nth-of-type(4) { animation-delay: calc(var(--pm-icon-flicker-delay) - 3.45s); }

#home .shortcut-line-svg g {
  animation: pm-shortcut-glow-flicker calc(var(--pm-icon-flicker-duration) * 1.13) ease-in-out infinite;
  animation-delay: var(--pm-icon-flicker-delay);
}

@keyframes pm-shortcut-color-flicker {
  0%,
  100% {
    stop-color: #f5b9dd;
    stop-opacity: 0.82;
  }
  28% {
    stop-color: #ffffff;
    stop-opacity: 0.96;
  }
  61% {
    stop-color: #aeeaff;
    stop-opacity: 0.92;
  }
  82% {
    stop-color: #e9faff;
    stop-opacity: 0.86;
  }
}

@keyframes pm-shortcut-glow-flicker {
  0%,
  100% {
    opacity: 0.82;
    filter:
      drop-shadow(-1px 0 3px rgba(247, 185, 232, 0.2))
      drop-shadow(1px 0 3px rgba(188, 238, 255, 0.25));
  }
  42% {
    opacity: 1;
    filter:
      drop-shadow(-2px 0 5px rgba(247, 185, 232, 0.34))
      drop-shadow(2px 0 5px rgba(188, 238, 255, 0.42))
      drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
  }
  73% {
    opacity: 0.9;
    filter:
      drop-shadow(-1px 0 4px rgba(247, 185, 232, 0.24))
      drop-shadow(2px 0 4px rgba(188, 238, 255, 0.34));
  }
}

/* Nested rows stay lighter than their parent card, avoiding opaque white
   rectangles while retaining a clear reading plane behind small text. */
.phone-shell :is(
  .reward-item,
  .reward-line,
  .task-item,
  .income-row,
  .wallet-row,
  .report-row,
  .list-row,
  .song-title,
  .earn-strip
) {
  background: var(--pm-glass-surface-nested) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 5px 14px rgba(117, 142, 184, 0.07) !important;
  -webkit-backdrop-filter: blur(15px) saturate(108%) !important;
  backdrop-filter: blur(15px) saturate(108%) !important;
}

/* The VIP card owns the glass surface. Its text column must remain fully
   transparent so it cannot create a vertical white seam beside the icon. */
#vip .music-worker-copy {
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

#vip .music-worker-copy p {
  color: #1f2c3d !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* Balanced task-header action: large enough to tap without competing with the
   centered brand. */
#tasks .topbar .text-link {
  display: inline-flex;
  width: auto;
  min-width: 72px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  padding: 5px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #497c9b !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.1;
  white-space: nowrap;
  background:
    linear-gradient(rgba(255, 255, 255, 0.62), rgba(248, 253, 255, 0.5)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 5px 13px rgba(79, 114, 151, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Reward pictograms share one cyan line language and an optically centered
   glass medallion. */
#home .reward-group .avatar.pm-icon-host {
  display: inline-grid !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  color: #3da9cb !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.6), rgba(246, 252, 255, 0.48)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 5px 12px rgba(79, 128, 160, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#home .reward-group-head .avatar.pm-icon-host {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px;
}

#home .reward-group .avatar.pm-icon-host .pm-icon-soft {
  fill: #bceeff !important;
  opacity: 0.2 !important;
}

.bottom-nav {
  background:
    linear-gradient(var(--pm-glass-surface-strong), var(--pm-glass-surface-strong)) padding-box,
    var(--pm-glass-line) border-box !important;
  -webkit-backdrop-filter: blur(26px) saturate(115%) !important;
  backdrop-filter: blur(26px) saturate(115%) !important;
}

/* Functional icon interiors use one pale-blue glass tone site-wide. The
   surrounding pink/blue outlines and brand artwork remain unchanged. */
:root {
  --pm-icon-secondary: #bceeff;
}

.phone-shell .pm-icon .pm-icon-soft,
.login-page .pm-icon .pm-icon-soft {
  fill: #bceeff !important;
  opacity: 0.18 !important;
}

.phone-shell :is(
  .account-action-glyph,
  .quick .icon,
  button.pm-icon-host,
  .secondary-page-icon,
  .secondary-page-header-icon
) .pm-icon {
  color: #3aa8c9 !important;
  filter: drop-shadow(0 3px 6px rgba(77, 174, 207, 0.16)) !important;
}

/* Make the eight shortcut outlines legible without tinting their glass
   interiors. */
#home .shortcut-reference-art {
  border-width: 2px !important;
  box-shadow:
    0 7px 17px rgba(71, 103, 136, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.92),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

/* Preserve descenders such as the final y in “Temporary”. */
#vip .music-worker-copy h2 {
  line-height: 1.24 !important;
  padding: 1px 1px 3px 0;
  overflow: visible !important;
  background-image: linear-gradient(90deg, #d77eae 0%, #918cc5 52%, #42aecf 100%) !important;
  filter:
    drop-shadow(-1px 0 0 rgba(113, 126, 160, 0.22))
    drop-shadow(1px 0 0 rgba(255, 255, 255, 0.94))
    drop-shadow(0 1px 1px rgba(62, 82, 108, 0.18)) !important;
}

/* VIP artwork: the twelve dedicated music images return to the main disc;
   the grade remains visible in a compact glass badge at the upper right. */
#vip .music-note-bubble {
  position: relative !important;
  z-index: 3 !important;
  inset: auto !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  padding: 8px !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#vip .music-note-bubble .music-position-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  filter:
    drop-shadow(-2px 0 4px rgba(247, 185, 232, 0.22))
    drop-shadow(2px 0 4px rgba(116, 211, 239, 0.26)) !important;
}

#vip .music-position-frame .music-worker-level {
  position: absolute !important;
  z-index: 7 !important;
  top: -3px !important;
  right: -3px !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  place-items: center !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  color: #6e83ad !important;
  font-size: 8px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98), rgba(244, 251, 255, 0.78)) padding-box,
    var(--pm-glass-line) border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
  box-shadow:
    0 5px 11px rgba(48, 76, 108, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  opacity: 1 !important;
}

/* The VIP list itself is only a layout parent. The former blue panel is
   removed; each membership card remains an individual glass surface. */
#vip .vip-list {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Secondary-page canvas: reveal the same moving shell background. */
.secondary-page-layer,
.secondary-page-shell,
.secondary-page-view {
  background-color: transparent !important;
}

.secondary-page-layer {
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 215, 242, 0.12), transparent 34%),
    radial-gradient(circle at 92% 20%, rgba(188, 238, 255, 0.18), transparent 36%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(246, 251, 255, 0.2)) !important;
  -webkit-backdrop-filter: blur(8px) saturate(108%) !important;
  backdrop-filter: blur(8px) saturate(108%) !important;
}

/* Top-level secondary cards and panels. */
#secondary-page-root :is(
  .secondary-page-card,
  .secondary-page-form,
  .secondary-page-list,
  .secondary-page-hero,
  .secondary-page-profile,
  .secondary-page-wheel-card,
  .secondary-page-prize-card,
  .secondary-page-language,
  .secondary-page-feedback,
  .secondary-page-player,
  .secondary-page-empty,
  .secondary-page-upload,
  .secondary-page-rating,
  .music-dividend-hero,
  .music-dividend-form,
  .music-dividend-plan,
  .music-dividend-product-card,
  .daily-report-overview,
  .daily-report-summary,
  .team-weekly-overview,
  .team-member-summary,
  .notifications-summary,
  .notifications-list,
  .personal-info-settings,
  .wallet-account-card,
  .wallet-bills-list,
  .wallet-list,
  .wallet-restrictions,
  .wallet-split-rules,
  .help-center-hero,
  .pm-lucky-history
) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--pm-glass-surface), var(--pm-glass-surface)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow: var(--pm-glass-shadow) !important;
  -webkit-backdrop-filter: var(--pm-glass-blur) !important;
  backdrop-filter: var(--pm-glass-blur) !important;
}

/* Secondary nested surfaces use less white and a smaller blur radius. */
#secondary-page-root :is(
  .secondary-page-stat,
  .secondary-page-list-item,
  .secondary-page-task,
  .secondary-page-product,
  .secondary-page-field,
  .secondary-page-input-shell,
  .secondary-page-note,
  .secondary-page-segmented,
  .secondary-page-amounts > *,
  .secondary-page-actions > *,
  .music-dividend-metric,
  .music-dividend-product-tags > *,
  .personal-info-row,
  .daily-report-summary > *,
  .wallet-dual-grid > *,
  .pm-lucky-prize-grid > div,
  .pm-lucky-history > div:not(.pm-lucky-card-title)
) {
  background: var(--pm-glass-surface-nested) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.76),
    0 5px 15px rgba(117, 142, 184, 0.07) !important;
  -webkit-backdrop-filter: blur(16px) saturate(108%) !important;
  backdrop-filter: blur(16px) saturate(108%) !important;
}

/* Functional controls are glass too, but slightly denser so labels retain
   sufficient contrast over the animated background. */
.phone-shell :is(
  .primary,
  .secondary,
  .tiny-action,
  .daily-gradient-button,
  .reward-action,
  .music-worker-side button,
  .text-link,
  .action-row button,
  .signout
),
#secondary-page-root :is(
  .secondary-page-button,
  .secondary-page-player-button,
  .secondary-page-player-control,
  .music-dividend-submit,
  .personal-info-save
) {
  background:
    linear-gradient(105deg, rgba(255, 215, 242, 0.66), rgba(222, 236, 255, 0.63) 52%, rgba(188, 238, 255, 0.68)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 8px 22px rgba(117, 142, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

/* Readability guardrails: dark copy keeps a reliable contrast ratio while
   auxiliary copy remains visibly subordinate. */
.phone-shell :is(h1, h2, h3, h4, strong, b),
#secondary-page-root :is(h1, h2, h3, h4, strong, b),
.login-page :is(h1, h2, h3, strong, b) {
  color: #203047;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.phone-shell :is(p, small, label),
#secondary-page-root :is(p, small, label) {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.42);
}

/* Login, registration and startup pages share the same material. */
.login-shell {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--pm-glass-surface), var(--pm-glass-surface)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 24px 64px rgba(83, 104, 145, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  -webkit-backdrop-filter: blur(26px) saturate(114%) !important;
  backdrop-filter: blur(26px) saturate(114%) !important;
}

.login-shell::before {
  opacity: 0.58 !important;
}

.brand-panel,
.form-shell .form-wrap {
  background:
    radial-gradient(circle at 24% 14%, rgba(255, 255, 255, 0.46), transparent 34%),
    linear-gradient(145deg, rgba(255, 230, 246, 0.24), rgba(241, 239, 255, 0.2) 52%, rgba(218, 246, 255, 0.27)) !important;
}

.input-shell,
.social-button,
.back-link span {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--pm-glass-surface-strong), var(--pm-glass-surface-strong)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 7px 20px rgba(83, 104, 145, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

.login-button {
  background: linear-gradient(105deg, rgba(234, 120, 182, 0.72), rgba(173, 140, 219, 0.7) 50%, rgba(89, 197, 229, 0.72)) !important;
  -webkit-backdrop-filter: blur(18px) saturate(112%) !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

/* Shared logo halo: a restrained pink glow on the left, pale blue on the
   right, plus a crisp white lift. The source artwork and proportions do not
   change. */
:is(
  .brand-full-logo,
  .page-brand-full-logo,
  .peer-brand-lockup-image,
  .mobile-brand img,
  .brand-panel > img
) {
  filter:
    saturate(1.06)
    contrast(1.025)
    drop-shadow(-1.6px 0 3px rgba(242, 132, 193, 0.42))
    drop-shadow(1.6px 0 3px rgba(73, 196, 230, 0.44))
    drop-shadow(0 0 1px rgba(255, 255, 255, 0.96))
    drop-shadow(0 2px 2px rgba(55, 77, 111, 0.18)) !important;
}

/* Crisp four-colour shortcut glyphs: slim source stroke with a sharp
   pink/blue rim. The edge uses zero-blur shadows so the symbols stay clear. */
#home .shortcut-reference-art .shortcut-line-svg g {
  stroke-width: 1.45 !important;
  shape-rendering: geometricPrecision;
  filter:
    drop-shadow(-0.45px 0 0 rgba(238, 119, 184, 0.72))
    drop-shadow(0.45px 0 0 rgba(49, 183, 229, 0.74))
    drop-shadow(0 0.65px 0 rgba(62, 87, 129, 0.18)) !important;
}

#home .shortcut-reference-art:nth-child(8) .bookmark-shell {
  stroke-width: 1.55 !important;
}

#home .shortcut-reference-art:nth-child(8) .bookmark-note {
  stroke-width: 1.3 !important;
}

/* Three equal indicator slots keep the centre-to-centre spacing unchanged
   when the selected dot grows into a pill. */
#home .peer-hero-dots {
  display: grid !important;
  grid-template-columns: repeat(3, 18px) !important;
  place-items: center !important;
  gap: 0 !important;
  width: 54px !important;
}

#home .peer-hero-dots button {
  justify-self: center !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Bottom navigation follows the compact single-glass-bar reference. */
.phone-shell > .bottom-nav {
  height: 58px !important;
  padding: 4px 6px !important;
  gap: 0 !important;
  border-radius: 19px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(249, 253, 255, 0.78)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 10px 26px rgba(72, 98, 134, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.phone-shell > .bottom-nav .nav-item {
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 4px 2px !important;
  gap: 2px !important;
  border: 0 !important;
  border-radius: 15px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.phone-shell > .bottom-nav .nav-item.active {
  color: #276b77 !important;
  background:
    linear-gradient(105deg,
      rgba(203, 245, 238, 0.72),
      rgba(222, 244, 250, 0.76) 48%,
      rgba(247, 218, 235, 0.68)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 4px 12px rgba(111, 174, 190, 0.11) !important;
}

.phone-shell > .bottom-nav .nav-item::after {
  display: none !important;
}

.phone-shell > .bottom-nav .nav-icon,
.phone-shell > .bottom-nav .nav-icon .pm-icon {
  width: 20px !important;
  height: 20px !important;
  flex-basis: 20px !important;
}

.phone-shell > .bottom-nav .nav-item b {
  color: #7f8d9d !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

.phone-shell > .bottom-nav .nav-item.active b {
  color: #276b77 !important;
  font-weight: 800 !important;
}

/* VIP disc swap: grade in the main disc, music artwork in the small
   upper-right bubble. */
#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

#vip .music-position-frame .music-worker-level {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 20px !important;
  font-weight: 950 !important;
  font-style: italic !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(105deg, #e77fbb 0%, #aa8bda 48%, #45bddf 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.78) !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.94),
    0 2px 4px rgba(67, 80, 126, 0.2) !important;
  filter: none !important;
}

#vip .music-note-bubble {
  position: absolute !important;
  z-index: 7 !important;
  top: -3px !important;
  right: -3px !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  padding: 3px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.8) 48%, rgba(229, 246, 254, 0.72)) padding-box,
    conic-gradient(from 220deg, #f5b1d7, #fff2fa, #bceeff, #f5b1d7) border-box !important;
  box-shadow:
    0 2px 3px rgba(31, 49, 76, 0.12),
    0 7px 14px rgba(31, 49, 76, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

#vip .music-note-bubble .music-position-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon {
  width: 84% !important;
  height: 84% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    saturate(1.06)
    drop-shadow(-0.4px 0 0 rgba(235, 135, 190, 0.46))
    drop-shadow(0.4px 0 0 rgba(63, 188, 224, 0.52)) !important;
}

/* Final VIP icon placement: each of the twelve supplied pictograms occupies
   the main circular stage. The grade stays in a small upper-right badge. */
#vip .music-note-bubble,
#vip .music-worker-card.current .music-note-bubble {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  display: grid !important;
  width: 58px !important;
  height: 58px !important;
  padding: 7px !important;
  place-items: center !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#vip .music-note-bubble .music-position-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: contain !important;
  filter:
    drop-shadow(-2px 0 4px rgba(247, 185, 232, 0.22))
    drop-shadow(2px 0 4px rgba(116, 211, 239, 0.26)) !important;
}

#vip .music-position-frame .music-worker-level {
  position: absolute !important;
  z-index: 8 !important;
  top: -3px !important;
  right: -3px !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  padding: 0 !important;
  place-items: center !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  color: #6e83ad !important;
  font-size: 8px !important;
  font-style: normal !important;
  font-weight: 900 !important;
  letter-spacing: -0.02em !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.98), rgba(244, 251, 255, 0.78)) padding-box,
    var(--pm-glass-line) border-box !important;
  -webkit-background-clip: padding-box, border-box !important;
  background-clip: padding-box, border-box !important;
  -webkit-text-fill-color: currentColor !important;
  -webkit-text-stroke: 0 !important;
  box-shadow:
    0 5px 11px rgba(48, 76, 108, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  opacity: 1 !important;
}

@media (prefers-reduced-transparency: reduce) {
  :root {
    --pm-glass-surface: rgba(255, 255, 255, 0.88);
    --pm-glass-surface-strong: rgba(255, 255, 255, 0.92);
    --pm-glass-surface-nested: rgba(250, 253, 255, 0.86);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-video-background {
    display: none !important;
  }

  #home .shortcut-line-svg stop,
  #home .shortcut-line-svg g {
    animation: none !important;
  }
}

/* 2026-07-30 final interaction and proportion refinements. */

/* Restore the approved concentric glass controls on the two home task cards. */
#home .music-player-visual,
#home .share-earn-visual {
  display: flex !important;
  min-height: 72px !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 2px -4px 0 !important;
  padding: 0 !important;
}

#home .player-wave {
  display: block !important;
  width: 30px !important;
  height: 42px !important;
  flex: 0 0 30px !important;
  opacity: 0.72 !important;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 4px,
      rgba(247, 185, 232, 0.62) 4px 6px,
      transparent 6px 10px,
      rgba(142, 217, 255, 0.62) 10px 12px,
      transparent 12px 16px
    ) !important;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 34%, rgba(0, 0, 0, 0.68) 58%, transparent 82%) !important;
  mask-image: radial-gradient(ellipse at center, #000 0 34%, rgba(0, 0, 0, 0.68) 58%, transparent 82%) !important;
}

#home .player-orbit,
#home .share-orbit {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  width: 60px !important;
  height: 60px !important;
  flex: 0 0 60px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(255, 255, 255, 0.96) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0 34%, transparent 36%),
    radial-gradient(circle, transparent 0 51%, rgba(217, 210, 237, 0.78) 53% 56%, transparent 58%),
    conic-gradient(from 210deg, rgba(116, 209, 239, 0.78), rgba(154, 142, 225, 0.62) 38%, rgba(236, 145, 198, 0.72) 72%, rgba(116, 209, 239, 0.78)) !important;
  box-shadow:
    0 8px 18px rgba(72, 94, 129, 0.15),
    0 0 0 7px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

#home .player-orbit::before,
#home .share-orbit::before {
  inset: 7px !important;
}

#home .player-orbit::after,
#home .share-orbit::after {
  inset: 14px !important;
}

#home .player-orbit i {
  margin-left: 4px !important;
  border-top-width: 9px !important;
  border-bottom-width: 9px !important;
  border-left-width: 14px !important;
  border-left-color: #978fda !important;
}

#home .share-orbit-mark {
  color: #8e98dc !important;
  font-size: 22px !important;
}

/* Keep the supplied first VIP musical note fully visible inside its stage. */
#vip .music-worker-card:first-child .music-position-icon {
  opacity: 1 !important;
  transform: translateX(2px) scale(1.12) !important;
  transform-origin: center !important;
}

/* Account message and refresh controls share one compact tool group. */
#account .mini-actions {
  top: 14px !important;
  right: 14px !important;
  display: grid !important;
  grid-template-columns: repeat(2, 36px) !important;
  gap: 7px !important;
}

#account .mini-actions button {
  display: grid !important;
  width: 36px !important;
  height: 36px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 14px !important;
}

#account .account-refresh-button.is-refreshing .pm-icon {
  animation: account-refresh-spin 0.7s ease-in-out;
}

@keyframes account-refresh-spin {
  to {
    transform: rotate(360deg);
  }
}

#account .overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* New poster fills the player frame without stretching. */
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-player {
  gap: 14px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover {
  position: relative !important;
  width: min(100%, 300px) !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  margin-inline: auto !important;
  overflow: hidden !important;
  border: 1px solid transparent !important;
  border-radius: 26px !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.4), rgba(242, 249, 255, 0.34)) padding-box,
    var(--pm-glass-line) border-box !important;
  box-shadow:
    0 14px 30px rgba(36, 55, 95, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover::before,
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover::after,
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover-glow,
.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover > i {
  display: none !important;
  content: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover > img {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 43% !important;
  opacity: 1 !important;
  filter: saturate(0.9) brightness(0.94) contrast(1.03) !important;
  transform: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] > .music-task-player > .music-task-waveform {
  display: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover > .music-task-controls {
  position: absolute !important;
  z-index: 3 !important;
  inset: 0 !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-cover
  .secondary-page-player-control {
  position: relative !important;
  inset: auto !important;
  display: grid !important;
  width: 74px !important;
  height: 74px !important;
  place-items: center !important;
  padding: 0 0 0 3px !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
  border-radius: 50% !important;
  color: rgba(255, 255, 255, 0.96) !important;
  font-size: 25px !important;
  background: rgba(237, 246, 255, 0.22) !important;
  box-shadow:
    0 12px 28px rgba(4, 16, 48, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.08) !important;
  backdrop-filter: blur(10px) saturate(1.08) !important;
  transform: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-cover
  .secondary-page-player-control::before,
.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-cover
  .secondary-page-player-control::after {
  display: none !important;
  content: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-submit-form {
  display: block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-submit-form .secondary-page-button {
  width: 100% !important;
  min-height: 52px !important;
  margin: 0 !important;
}

/* Removed wallet filters leave a clean transition into the bill list. */
.secondary-page-view[data-secondary-view="wallet"] .wallet-bills-heading {
  margin-top: 4px !important;
}

/* Compact seven-day team rewards query. */
.team-seven-day-query {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  gap: 9px 10px !important;
  align-items: end !important;
  padding: 14px !important;
}

.team-seven-day-query .secondary-page-field {
  gap: 6px !important;
}

.team-seven-day-query .secondary-page-input,
.team-seven-day-query .secondary-page-button {
  min-height: 44px !important;
}

.team-seven-day-query > p {
  grid-column: 1 / -1 !important;
  margin: 0 !important;
  color: #72829a !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  text-align: center !important;
}

/* Daily report follows the compact reference hierarchy. */
.secondary-page-view[data-secondary-view="daily-report"] {
  gap: 12px !important;
}

.secondary-page-shell:has([data-secondary-view="daily-report"]) .secondary-page-brand.is-image-brand {
  display: flex !important;
  width: 138px !important;
  min-height: 40px !important;
  margin: 0 auto 4px !important;
  align-items: center !important;
  justify-content: center !important;
}

.secondary-page-shell:has([data-secondary-view="daily-report"]) .secondary-page-brand.is-image-brand img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(116, 157, 207, 0.13)) !important;
}

.daily-report-date-nav {
  display: grid !important;
  width: min(100%, 190px) !important;
  min-height: 42px !important;
  grid-template-columns: 38px 1fr 38px !important;
  align-items: center !important;
  margin: -4px auto 0 !important;
  padding: 3px !important;
  border-radius: 18px !important;
}

.daily-report-date-nav button {
  display: grid !important;
  width: 34px !important;
  height: 34px !important;
  place-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #526d96 !important;
  font-size: 24px !important;
  background: rgba(255, 255, 255, 0.38) !important;
}

.daily-report-date-nav strong {
  color: #24334d !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  text-align: center !important;
}

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

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-heading h2 {
  margin-top: 3px !important;
  color: #1c2b45 !important;
  font-size: 34px !important;
  line-height: 1 !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-heading h2 em {
  color: #3995b4 !important;
  font-size: 11px !important;
  font-style: normal !important;
}

.daily-report-chart {
  width: 100% !important;
  height: 116px !important;
  margin: 8px 0 12px !important;
}

.daily-report-chart svg {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

.daily-report-chart-area {
  fill: url(#pm-report-fill) !important;
  stroke: none !important;
}

.daily-report-chart-line {
  fill: none !important;
  stroke: url(#pm-report-line) !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
}

.daily-report-chart circle {
  fill: #65c8ef !important;
  stroke: rgba(255, 255, 255, 0.96) !important;
  stroke-width: 2 !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-summary {
  gap: 10px !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-summary .secondary-page-stat {
  min-height: 88px !important;
  padding: 13px 14px !important;
}

/* VIP position badges: keep the original circle sizes, but place the grade
   inside the large disc and the dedicated music artwork inside the small badge. */
#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
}

#vip .music-position-frame .music-worker-level {
  position: relative !important;
  z-index: 4 !important;
  inset: auto !important;
  display: grid !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: transparent !important;
  font-size: 20px !important;
  font-style: italic !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(105deg, #e58ac0 0%, #a390d7 50%, #54b9da 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.2px rgba(255, 255, 255, 0.82) !important;
  box-shadow: none !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96),
    0 2px 4px rgba(67, 80, 126, 0.2) !important;
}

#vip .music-note-bubble,
#vip .music-worker-card.current .music-note-bubble {
  position: absolute !important;
  z-index: 8 !important;
  top: -3px !important;
  right: -3px !important;
  bottom: auto !important;
  left: auto !important;
  display: grid !important;
  width: 24px !important;
  height: 24px !important;
  padding: 3px !important;
  place-items: center !important;
  overflow: hidden !important;
  border: 1.5px solid transparent !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.99), rgba(248, 252, 255, 0.82) 48%, rgba(229, 246, 254, 0.74)) padding-box,
    conic-gradient(from 220deg, #f5b1d7, #fff2fa, #bceeff, #f5b1d7) border-box !important;
  box-shadow:
    0 2px 3px rgba(31, 49, 76, 0.12),
    0 7px 14px rgba(31, 49, 76, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
}

#vip .music-note-bubble .music-position-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon,
#vip .music-worker-card:first-child .music-note-bubble .music-position-icon {
  width: 84% !important;
  height: 84% !important;
  margin: auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: 1 !important;
  transform: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter:
    saturate(1.04)
    drop-shadow(-0.4px 0 0 rgba(235, 135, 190, 0.42))
    drop-shadow(0.4px 0 0 rgba(63, 188, 224, 0.48)) !important;
}

/* Final secondary-page rendering pass.
   Keep the compact mobile cards while giving long values and state badges
   enough optical room at every supported viewport. */
#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric {
  grid-template-columns: 26px minmax(0, 1fr) !important;
  gap: 4px 6px !important;
  padding-inline: 8px !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric-icon {
  width: 26px !important;
  height: 26px !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div > strong {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  font-size: clamp(14px, 3.8vw, 19px) !important;
  letter-spacing: -0.055em !important;
  text-overflow: clip !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-content: center !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div > span,
#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div > strong,
#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div > small {
  grid-column: 1 !important;
  width: 100% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="music-dividend"] .music-dividend-metric > div > small {
  margin: 1px 0 0 !important;
  font-size: 6px !important;
  line-height: 1 !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="invite-center"] .invite-poster-code > strong {
  min-width: 0 !important;
  overflow: visible !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-overflow: clip !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item:not(.is-locked) {
  position: relative !important;
  grid-template-columns: 30px auto minmax(4px, 1fr) !important;
  padding-right: 52px !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item:not(.is-locked) > span {
  width: 30px !important;
  height: 30px !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="level-career"] .level-roadmap-item:not(.is-locked) > small {
  position: absolute !important;
  top: 10px !important;
  right: 8px !important;
  width: auto !important;
  min-width: 40px !important;
  max-width: 48px !important;
  padding: 4px 5px !important;
  overflow: visible !important;
  font-size: 7px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-overflow: clip !important;
}

/* Points mall product artwork.
   The four merchandise types use one cohesive 2x2 illustration sprite so
   the visual matches the reference instead of repeating a generic note icon. */
#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product-media {
  position: relative !important;
  overflow: hidden !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product-artwork {
  position: absolute !important;
  z-index: 4 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url("./assets/secondary-art/points-products-v1.png") !important;
  background-repeat: no-repeat !important;
  background-size: 200% 200% !important;
  filter: saturate(0.82) brightness(1.025) drop-shadow(0 7px 9px rgba(105, 128, 171, 0.12)) !important;
  pointer-events: none !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] [data-product-art="vip"] .secondary-page-product-artwork {
  background-position: 0 0 !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] [data-product-art="frame"] .secondary-page-product-artwork {
  background-position: 100% 0 !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] [data-product-art="ticket"] .secondary-page-product-artwork {
  background-position: 0 100% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] [data-product-art="theme"] .secondary-page-product-artwork {
  background-position: 100% 100% !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="points-mall"] .secondary-page-product-media .secondary-page-product-icon {
  opacity: 0 !important;
}