/*
 * PeerMusic Duotone Icon Design System
 * Functional icon sizes: 16 / 20 / 24 / 38 / 42 / 46px.
 * Poster, product and album artwork intentionally remain image assets.
 */

:root {
  --pm-icon-16: 16px;
  --pm-icon-20: 20px;
  --pm-icon-24: 24px;
  --pm-icon-38: 38px;
  --pm-icon-42: 42px;
  --pm-icon-46: 46px;
  --pm-icon-stroke: 1.8;
  --pm-icon-primary: #7197cf;
  --pm-icon-secondary: #e99acb;
  --pm-icon-active: #5c8fe6;
  --pm-icon-muted: #8b9bb1;
}

.pm-icon-host {
  display: inline-grid !important;
  place-items: center !important;
  flex: 0 0 auto;
  color: var(--pm-icon-primary);
  font-size: 0 !important;
  line-height: 0 !important;
}

.pm-icon-host::before,
.pm-icon-host::after {
  display: none !important;
  content: none !important;
}

.pm-icon {
  display: block !important;
  width: var(--pm-icon-size, var(--pm-icon-24));
  height: var(--pm-icon-size, var(--pm-icon-24));
  overflow: visible;
  fill: none;
  color: inherit;
  pointer-events: none;
}

.pm-icon--16,
.pm-icon-token-16 { --pm-icon-size: var(--pm-icon-16); }
.pm-icon--20,
.pm-icon-token-20 { --pm-icon-size: var(--pm-icon-20); }
.pm-icon--24,
.pm-icon-token-24 { --pm-icon-size: var(--pm-icon-24); }
.pm-icon--38,
.pm-icon-token-38 { --pm-icon-size: var(--pm-icon-38); }
.pm-icon--42,
.pm-icon-token-42 { --pm-icon-size: var(--pm-icon-42); }
.pm-icon--46,
.pm-icon-token-46 { --pm-icon-size: var(--pm-icon-46); }

.pm-icon-optical {
  transform: translate(12px, 12px) scale(var(--pm-optical-scale, 1)) translate(-12px, -12px);
  transform-origin: 12px 12px;
}

.pm-icon :not(.pm-icon-soft) {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--pm-icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.pm-icon [fill="currentColor"] {
  fill: currentColor;
  stroke: none;
}

.pm-icon .pm-icon-soft {
  fill: var(--pm-icon-secondary);
  opacity: 0.16;
  stroke: none;
}

.nav-item.active .pm-icon,
.secondary-page-nav-item.is-active .pm-icon {
  color: var(--pm-icon-active);
  filter: drop-shadow(0 4px 7px rgba(111, 153, 226, 0.18));
}

.nav-item:not(.active) .pm-icon,
.secondary-page-nav-item:not(.is-active) .pm-icon {
  color: var(--pm-icon-muted);
}

/* Shared icon containers use the token box, not ad-hoc geometry. */
.bottom-nav .nav-icon,
#secondary-page-root .secondary-page-nav-item .nav-icon {
  width: var(--pm-icon-24) !important;
  height: var(--pm-icon-24) !important;
  flex-basis: var(--pm-icon-24) !important;
  transform: none !important;
}

#secondary-page-root .secondary-page-back .pm-icon {
  color: #607fa8;
}

#secondary-page-root .secondary-page-brand i {
  width: var(--pm-icon-24) !important;
  height: var(--pm-icon-24) !important;
  margin: 0 !important;
}

#secondary-page-root .secondary-page-header-icon .pm-icon {
  color: #7298ce;
}

/* The SVG system intentionally wins over the legacy PNG icon sprite. */
#secondary-page-root .secondary-page-brand > i.pm-icon-host {
  color: #789ed4 !important;
  background: transparent !important;
  filter: drop-shadow(0 3px 7px rgba(123, 163, 218, 0.18)) !important;
}

#secondary-page-root .secondary-page-brand > i.pm-icon-host > .pm-icon,
#secondary-page-root .secondary-page-header-icon.pm-icon-host > .pm-icon {
  display: block !important;
}

#secondary-page-root .secondary-page-header-icon.pm-icon-host {
  display: grid !important;
  place-items: center !important;
  color: #7298ce !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.8)) padding-box,
    linear-gradient(110deg, rgba(247, 185, 232, 0.9), rgba(243, 247, 255, 0.98) 50%, rgba(188, 238, 255, 0.92)) border-box !important;
  background-image: none !important;
}

.shortcut-grid .icon .pm-icon {
  color: #78a4dc;
  filter: drop-shadow(0 5px 8px rgba(122, 153, 204, 0.13));
}

.quick-grid .icon .pm-icon,
.account-action-glyph .pm-icon,
.vip-detail-icon .pm-icon {
  color: #65a3d3;
}

.reward-group .avatar .pm-icon {
  color: #6daedb;
}

.reward-group.tone-gold .avatar .pm-icon,
.reward-group.tone-violet .avatar .pm-icon {
  color: #8d91db;
}

.music-position-icon.pm-icon-host {
  width: 100% !important;
  height: 100% !important;
}

.music-position-icon.pm-icon-host .pm-icon {
  color: #7e9bd7;
}

#vip .music-note-bubble .music-position-icon.pm-icon-host,
#vip .music-worker-card.current .music-note-bubble .music-position-icon.pm-icon-host {
  display: grid !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  place-items: center !important;
  overflow: visible !important;
}

#vip .music-note-bubble .music-position-icon.pm-icon-host .pm-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon.pm-icon-host .pm-icon {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: auto !important;
}

#secondary-page-root :is(
  .secondary-page-upload-icon,
  .withdraw-password-prompt-icon,
  .pm-ref-location-icon,
  .music-dividend-metric-icon,
  .secondary-page-product-icon,
  .secondary-page-task-icon,
  .personal-info-row-icon,
  .notifications-summary-icon,
  .notification-icon,
  .secondary-page-feedback-icon
) .pm-icon {
  color: #6f9bd0;
}

#secondary-page-root .level-current-orb > span.pm-icon-host,
#secondary-page-root .level-roadmap-item > span.pm-icon-host {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#secondary-page-root .level-current-orb > span .pm-icon {
  color: #8d8ddc;
}

#secondary-page-root .level-roadmap-item > span .pm-icon {
  color: #79a8dc;
}

#secondary-page-root .level-career-actions .is-primary .pm-icon {
  color: #ffffff !important;
}

#secondary-page-root .level-career-actions .is-secondary .pm-icon {
  color: #73a5d7 !important;
}

#secondary-page-root .music-dividend-metric-icon.pm-icon-host > .pm-icon,
#secondary-page-root .secondary-page-feedback-icon.pm-icon-host > .pm-icon {
  display: block !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="lucky-draw"] .secondary-page-wheel > span small::after {
  content: none !important;
  display: none !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="lucky-draw"] .pm-wheel-prize-icon {
  display: grid !important;
  width: 23px !important;
  height: 23px !important;
  margin: 0 auto !important;
  place-items: center !important;
  border: 1px solid rgba(255, 255, 255, 0.94) !important;
  border-radius: 50% !important;
  color: #ffffff !important;
  background: linear-gradient(145deg, #f5afd8, #df8dc5) !important;
  box-shadow:
    0 5px 10px rgba(178, 112, 165, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.54) !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="lucky-draw"] .secondary-page-wheel > span:nth-of-type(7) .pm-wheel-prize-icon {
  background: linear-gradient(145deg, #caa9ee, #8a9fe8 55%, #73cee5) !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="lucky-draw"] .pm-wheel-prize-icon > .pm-icon {
  display: block !important;
  width: var(--pm-icon-16) !important;
  height: var(--pm-icon-16) !important;
}

#secondary-page-root .secondary-page-balance-art b.pm-icon-host,
#secondary-page-root .points-mall-hero > i :is(b, em, span).pm-icon-host {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="help"] .help-center-hero > span.pm-icon-host,
#secondary-page-root .secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon.pm-icon-host {
  display: grid !important;
  place-items: center !important;
  color: #729bd1 !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 252, 255, 0.8)) padding-box,
    linear-gradient(110deg, rgba(247, 185, 232, 0.88), rgba(243, 247, 255, 0.98) 50%, rgba(188, 238, 255, 0.9)) border-box !important;
  background-image: none !important;
}

#secondary-page-root .secondary-page-view[data-secondary-view="help"] .help-center-hero > span.pm-icon-host > .pm-icon,
#secondary-page-root .secondary-page-view[data-secondary-view="notifications"] .notifications-summary-icon.pm-icon-host > .pm-icon {
  display: block !important;
}

@media (prefers-reduced-motion: no-preference) {
  .pm-icon {
    transition: color 220ms ease, filter 220ms ease, transform 220ms ease;
  }

  button:hover .pm-icon,
  button:focus-visible .pm-icon {
    transform: translateY(-1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pm-icon {
    transition: none !important;
  }
}

/* Home shortcuts follow the compact account-entry reference style. */
#home .shortcut-reference-art {
  display: grid !important;
  grid-template-rows: 28px 22px !important;
  width: 100% !important;
  height: 76px !important;
  min-height: 76px !important;
  max-height: 76px !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 4px !important;
  padding: 7px 4px 6px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(rgba(255, 255, 255, .90), rgba(252, 254, 255, .84)) padding-box,
    linear-gradient(100deg, rgba(247, 185, 232, .72), rgba(243, 247, 255, .88) 50%, rgba(142, 217, 255, .76)) border-box !important;
  box-shadow:
    0 8px 20px rgba(111, 137, 178, .10),
    inset 0 1px 0 rgba(255, 255, 255, .96) !important;
}

#home .shortcut-reference-art .icon {
  display: grid !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  align-self: center !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #76b7e8 !important;
  background: linear-gradient(145deg, rgba(238, 249, 255, .96), rgba(246, 241, 255, .84)) !important;
  box-shadow:
    0 4px 10px rgba(111, 162, 208, .10),
    inset 0 0 0 1px rgba(255, 255, 255, .92) !important;
  transform: none !important;
}

#home .shortcut-reference-art .shortcut-line-svg {
  width: 23px !important;
  height: 23px !important;
  margin: auto !important;
}

#home .shortcut-reference-art .shortcut-line-svg g {
  fill: none !important;
  stroke: var(--shortcut-flow-stroke, #76b7e8) !important;
  stroke-width: 2.15 !important;
  filter: drop-shadow(0 2px 3px rgba(101, 164, 214, .10)) !important;
}

/* The eighth shortcut uses a stronger glass bookmark with a music-note core. */
#home .shortcut-reference-art:nth-child(8) .shortcut-line-svg {
  width: 25px !important;
  height: 25px !important;
}

#home .shortcut-reference-art:nth-child(8) .shortcut-line-svg g {
  stroke-width: 2.65 !important;
  filter:
    drop-shadow(0 -1px 0 rgba(255, 255, 255, .95))
    drop-shadow(0 1px 0 rgba(91, 173, 218, .55))
    drop-shadow(0 3px 4px rgba(83, 139, 184, .22)) !important;
}

#home .shortcut-reference-art:nth-child(8) .bookmark-shell {
  fill: rgba(244, 250, 255, .34) !important;
  stroke-width: 2.75 !important;
}

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

#home .shortcut-reference-art b,
#home .shortcut-reference-art:nth-child(3) b {
  position: static !important;
  display: flex !important;
  width: 100% !important;
  min-height: 22px !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  color: #243042 !important;
  font-size: 9.5px !important;
  font-weight: 800 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
}

/* All eight shortcut glyphs share one light, legible outline treatment. */
#home .shortcut-reference-art .shortcut-line-svg {
  width: 25px !important;
  height: 25px !important;
  overflow: visible !important;
}

#home .shortcut-reference-art .shortcut-line-svg g {
  fill: none !important;
  stroke: var(--shortcut-flow-stroke, #69bce8) !important;
  stroke-width: 1.3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  filter:
    drop-shadow(0 -.35px 0 rgba(255, 255, 255, .88))
    drop-shadow(0 .65px .7px rgba(62, 143, 196, .28)) !important;
}

#home .shortcut-reference-art .shortcut-line-svg :is(path, circle) {
  vector-effect: non-scaling-stroke;
}

#home .shortcut-reference-art:nth-child(8) .bookmark-shell {
  fill: rgba(244, 250, 255, .34) !important;
  stroke-width: 1.4 !important;
}

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