:root {
  --bg: #f6f9fd;
  --bg-2: #fff6f8;
  --ink: #15202b;
  --muted: #6d7885;
  --soft: rgba(255, 255, 255, 0.72);
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.86);
  --line: rgba(255, 79, 106, 0.18);
  --red: #ff3858;
  --coral: #ff756c;
  --cyan: #75dbff;
  --gold: #ffd279;
  --green: #46cf8a;
  --shadow: 0 18px 50px rgba(83, 108, 133, 0.16);
  --red-shadow: 0 10px 34px rgba(255, 56, 88, 0.22);
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 56, 88, 0.18), transparent 28%),
    radial-gradient(circle at 88% 14%, rgba(117, 219, 255, 0.18), transparent 24%),
    radial-gradient(circle at 72% 88%, rgba(255, 210, 121, 0.16), transparent 28%),
    linear-gradient(145deg, #f8fbff 0%, #fff6f8 46%, #edf8ff 100%);
  color: var(--ink);
}

button {
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
}

.phone-shell {
  position: relative;
  width: min(100vw - 24px, 390px);
  height: min(860px, 100vh - 28px);
  overflow: hidden;
  border-radius: 34px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 250, 252, 0.58)),
    radial-gradient(circle at 20% 8%, rgba(255, 56, 88, 0.15), transparent 30%),
    radial-gradient(circle at 92% 32%, rgba(117, 219, 255, 0.2), transparent 32%),
    #f7fbff;
  box-shadow:
    0 32px 90px rgba(65, 92, 120, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.phone-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(255, 255, 255, 0.52) 44px, transparent 48px),
    linear-gradient(rgba(98, 130, 160, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(98, 130, 160, 0.03) 1px, transparent 1px);
  background-size: auto, 52px 52px, 52px 52px;
  pointer-events: none;
  opacity: 0.58;
}

.ambient,
.music-field {
  position: absolute;
  pointer-events: none;
}

.ambient {
  border-radius: 999px;
  filter: blur(26px);
  opacity: 0.78;
}

.ambient-a {
  width: 170px;
  height: 170px;
  left: -48px;
  top: 60px;
  background: rgba(255, 56, 88, 0.18);
  animation: drift 8s ease-in-out infinite alternate;
}

.ambient-b {
  width: 180px;
  height: 180px;
  right: -72px;
  bottom: 140px;
  background: rgba(117, 219, 255, 0.22);
  animation: drift 9s ease-in-out infinite alternate-reverse;
}

.music-field {
  inset: 0;
  color: rgba(255, 56, 88, 0.12);
  font-size: 34px;
}

.music-field span {
  position: absolute;
  animation: float-note 7s ease-in-out infinite;
}

.music-field span:nth-child(1) { left: 20px; top: 120px; }
.music-field span:nth-child(2) { right: 32px; top: 210px; animation-delay: -1.5s; }
.music-field span:nth-child(3) { left: 26px; bottom: 160px; animation-delay: -2.2s; }
.music-field span:nth-child(4) { right: 42px; bottom: 260px; animation-delay: -3s; }

.app {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow: hidden;
  padding-bottom: 78px;
}

.screen {
  display: none;
  height: 100%;
  overflow-y: auto;
  padding: 16px 14px 104px;
  scrollbar-width: none;
}

.screen::-webkit-scrollbar {
  display: none;
}

.screen.active {
  display: block;
  animation: screen-in 0.34s ease both;
}

.glass-panel,
.glass-card {
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(255, 247, 250, 0.58) 42%, rgba(235, 249, 255, 0.5)),
    var(--glass);
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    inset 0 16px 42px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
}

.glass-panel::before,
.glass-card::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), rgba(255, 56, 88, 0.36), transparent);
  pointer-events: none;
}

.home-hero {
  min-height: 162px;
  border-radius: 26px;
  padding: 18px;
  overflow: hidden;
}

.brand-lockup,
.profile-row,
.vip-head,
.income-hero {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-lockup img,
.income-hero img {
  width: 58px;
  height: 58px;
  border-radius: 18px;
  box-shadow: var(--red-shadow);
}

.brand-lockup p {
  margin: 0;
  color: var(--red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.brand-lockup h1,
.income-hero h1,
.account-hero h1 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1.08;
  letter-spacing: -0.03em;
}

.member-chip {
  display: inline-flex;
  margin-top: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 56, 88, 0.12);
  color: #b91f3d;
  font-size: 12px;
  font-weight: 800;
}

.hero-wave {
  display: flex;
  align-items: end;
  gap: 6px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  height: 54px;
}

.hero-wave i,
.sound-line i {
  display: block;
  width: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--red), var(--gold));
  box-shadow: 0 0 18px rgba(255, 56, 88, 0.28);
  animation: pulse-bar 1.4s ease-in-out infinite;
}

.hero-wave i:nth-child(1) { height: 18px; }
.hero-wave i:nth-child(2) { height: 34px; animation-delay: -0.2s; }
.hero-wave i:nth-child(3) { height: 26px; animation-delay: -0.4s; }
.hero-wave i:nth-child(4) { height: 48px; animation-delay: -0.6s; }
.hero-wave i:nth-child(5) { height: 30px; animation-delay: -0.8s; }
.hero-wave i:nth-child(6) { height: 40px; animation-delay: -1s; }
.hero-wave i:nth-child(7) { height: 22px; animation-delay: -1.2s; }

.promo-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 15px;
  border-radius: 22px;
}

.promo-card h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.16;
}

.promo-card p,
.income-hero p,
.vip-head p,
.formula-card p,
.muted {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.soft-button,
.primary,
.secondary,
.text-link,
.section-head button {
  border-radius: 999px;
  white-space: nowrap;
}

.soft-button {
  padding: 9px 12px;
  background: rgba(255, 56, 88, 0.11);
  color: var(--red);
  font-size: 12px;
  font-weight: 850;
}

.primary {
  padding: 10px 16px;
  background: linear-gradient(135deg, var(--red), var(--coral));
  color: white;
  font-weight: 900;
  box-shadow: var(--red-shadow);
}

.secondary {
  padding: 10px 16px;
  background: rgba(21, 32, 43, 0.08);
  color: #263544;
  font-weight: 900;
}

.shortcut-grid,
.overview-grid,
.quick-grid {
  display: grid;
  gap: 10px;
}

.shortcut-grid {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 12px;
}

.shortcut,
.quick {
  min-height: 80px;
  border-radius: 18px;
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.shortcut b,
.quick {
  font-size: 11px;
  line-height: 1.1;
  font-weight: 850;
}

.icon,
.nav-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
}

.icon {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(255, 56, 88, 0.16), rgba(117, 219, 255, 0.22));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 22px rgba(255, 56, 88, 0.12);
}

.icon::before,
.icon::after,
.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
}

.icon-wallet::before { width: 18px; height: 13px; border: 2px solid var(--red); border-radius: 5px; }
.icon-wallet::after { width: 5px; height: 5px; background: var(--red); border-radius: 50%; right: 8px; }
.icon-withdraw::before { width: 18px; height: 12px; border: 2px solid var(--red); border-radius: 4px; transform: rotate(-6deg); }
.icon-withdraw::after { width: 14px; height: 2px; background: var(--gold); transform: rotate(-32deg); }
.icon-fund::before { width: 20px; height: 12px; border: 2px solid var(--cyan); border-radius: 999px 999px 5px 5px; }
.icon-fund::after { width: 12px; height: 12px; border: 2px solid var(--red); border-radius: 50%; bottom: 7px; }
.icon-ticket::before { width: 20px; height: 13px; border: 2px solid var(--red); border-radius: 4px; transform: rotate(-16deg); }
.icon-ticket::after { width: 10px; height: 2px; background: var(--gold); transform: rotate(-16deg); }
.icon-team::before { width: 8px; height: 8px; background: var(--red); border-radius: 50%; box-shadow: 11px 2px 0 var(--cyan); top: 8px; }
.icon-team::after { width: 23px; height: 10px; border: 2px solid var(--red); border-top: 0; border-radius: 0 0 12px 12px; bottom: 7px; }
.icon-crown::before { width: 22px; height: 12px; background: linear-gradient(135deg, var(--gold), var(--red)); clip-path: polygon(0 100%, 10% 30%, 34% 72%, 50% 0, 66% 72%, 90% 30%, 100% 100%); }
.icon-gift::before { width: 20px; height: 16px; border: 2px solid var(--red); border-radius: 5px; bottom: 7px; }
.icon-gift::after { width: 2px; height: 21px; background: var(--cyan); box-shadow: -8px -3px 0 -1px var(--gold), 8px -3px 0 -1px var(--gold); }
.icon-loan::before { width: 19px; height: 22px; border: 2px solid var(--red); border-radius: 7px; }
.icon-loan::after { width: 11px; height: 2px; background: var(--cyan); box-shadow: 0 6px 0 var(--cyan); }
.icon-user::before { width: 9px; height: 9px; background: var(--red); border-radius: 50%; top: 8px; }
.icon-user::after { width: 19px; height: 10px; border: 2px solid var(--red); border-top: 0; border-radius: 0 0 14px 14px; bottom: 7px; }
.icon-task::before { width: 18px; height: 20px; border: 2px solid var(--red); border-radius: 5px; }
.icon-task::after { width: 10px; height: 2px; background: var(--cyan); box-shadow: 0 6px 0 var(--gold); }
.icon-report::before { width: 20px; height: 18px; border: 2px solid var(--red); border-radius: 5px; }
.icon-report::after { width: 3px; height: 14px; background: var(--cyan); box-shadow: 6px -4px 0 var(--red), 12px -8px 0 var(--gold); bottom: 8px; }
.icon-bill::before { width: 19px; height: 22px; border: 2px solid var(--red); border-radius: 7px; }
.icon-bill::after { width: 12px; height: 2px; background: var(--gold); box-shadow: 0 6px 0 var(--cyan); }
.icon-help::before { content: "?"; color: var(--red); font-weight: 950; font-size: 22px; }
.icon-help::after { display: none; }
.icon-download::before { width: 2px; height: 17px; background: var(--red); }
.icon-download::after { width: 14px; height: 14px; border-left: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(-45deg); top: 10px; }
.icon-lang::before { content: "MN"; color: var(--red); font-weight: 950; font-size: 12px; }
.icon-lang::after { display: none; }

.section-head,
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.section-head {
  margin: 18px 0 10px;
}

.section-head h2,
.topbar h1,
.income-card h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}

.section-head button,
.text-link {
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.task-banner {
  display: flex;
  gap: 14px;
  align-items: center;
  border-radius: 22px;
  padding: 14px;
  overflow: hidden;
}

.task-banner h3 {
  margin: 0;
  font-size: 16px;
}

.task-banner p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.vinyl {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #fff 0 12%, var(--red) 13% 20%, transparent 21%),
    repeating-radial-gradient(circle at center, rgba(255, 56, 88, 0.1) 0 9px, rgba(255, 255, 255, 0.7) 10px 13px);
  box-shadow: var(--red-shadow);
  animation: rotate-slow 9s linear infinite;
}

.reward-list,
.video-list,
.vip-list {
  display: grid;
  gap: 12px;
}

.reward-card {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  border-radius: 20px;
  padding: 12px;
}

.reward-card h3 {
  margin: 0;
  font-size: 13px;
}

.reward-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.reward-card em {
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(21, 32, 43, 0.08);
  color: #7b8692;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.avatar {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  background: linear-gradient(135deg, rgba(255, 56, 88, 0.15), rgba(117, 219, 255, 0.2));
  position: relative;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.avatar::before,
.avatar::after {
  content: "";
  position: absolute;
}

.avatar.mic::before { width: 12px; height: 22px; background: var(--red); border-radius: 999px; left: 15px; top: 8px; }
.avatar.mic::after { width: 22px; height: 12px; border: 2px solid var(--cyan); border-top: 0; border-radius: 0 0 999px 999px; left: 10px; top: 21px; }
.avatar.disc::before { inset: 7px; border-radius: 50%; border: 5px solid rgba(255, 56, 88, 0.8); background: white; }
.avatar.disc::after { width: 8px; height: 8px; background: var(--cyan); border-radius: 50%; left: 17px; top: 17px; }
.avatar.wave::before { width: 4px; height: 22px; background: var(--red); border-radius: 999px; left: 10px; top: 10px; box-shadow: 7px -5px 0 var(--gold), 14px 4px 0 var(--cyan), 21px -2px 0 var(--red); }

.topbar {
  height: 42px;
  margin-bottom: 12px;
}

.round-back,
.mini-actions button {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--red);
  font-weight: 950;
}

.stats-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}

.stat-card {
  border-radius: 20px;
  padding: 16px 12px;
  text-align: center;
}

.stat-card b {
  display: block;
  color: var(--red);
  font-size: 28px;
  line-height: 1;
}

.stat-card span {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.video-card {
  overflow: hidden;
  border-radius: 22px;
}

.cover {
  position: relative;
  height: 176px;
  overflow: hidden;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.72), transparent 18%),
    linear-gradient(135deg, rgba(255, 56, 88, 0.2), rgba(117, 219, 255, 0.16)),
    #fff;
}

.cover::before {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 18px;
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(255, 56, 88, 0.38) 13px 18px, transparent 19px 32px),
    radial-gradient(circle at 58% 36%, rgba(255, 56, 88, 0.32), transparent 26%);
  filter: blur(0.2px);
  opacity: 0.78;
}

.cover-b {
  background:
    radial-gradient(circle at 62% 38%, rgba(255, 56, 88, 0.32), transparent 22%),
    linear-gradient(135deg, #f8fbff, #fff0f4 46%, #eaf8ff);
}

.cover-c {
  background:
    radial-gradient(circle at 28% 62%, rgba(117, 219, 255, 0.26), transparent 24%),
    linear-gradient(145deg, #ffffff, #fff5f7 55%, #eef9ff);
}

.play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  color: var(--red);
  box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.34), var(--red-shadow);
  font-size: 24px;
  z-index: 2;
}

.earn-strip {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  background: linear-gradient(90deg, var(--red), var(--coral), var(--gold));
  color: white;
  font-weight: 950;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.earn-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  animation: sweep 2.8s ease-in-out infinite;
}

.vip-card {
  border-radius: 24px;
  padding: 16px;
  overflow: hidden;
}

.vip-card.current {
  border-color: rgba(255, 56, 88, 0.35);
}

.vip-head {
  justify-content: space-between;
}

.vip-head h2 {
  margin: 0;
  font-size: 17px;
  line-height: 1.1;
}

.badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: white;
  font-size: 13px;
  font-weight: 950;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.86), transparent 24%),
    linear-gradient(135deg, var(--red), var(--coral));
  box-shadow: var(--red-shadow);
}

.badge.g { background: linear-gradient(135deg, #ff6f77, #ffd279); }
.badge.g3 { background: linear-gradient(135deg, #ff8a52, #ff3858); }
.badge.s { background: linear-gradient(135deg, #75dbff, #ff6a88); }
.badge.v { background: linear-gradient(135deg, #a79bff, #ff3858); }

.vip-card ul {
  list-style: none;
  margin: 14px 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vip-card li {
  color: #3e4b57;
  font-size: 13px;
  font-weight: 750;
}

.vip-card li::before {
  content: "♪";
  margin-right: 7px;
  color: var(--red);
}

.income-hero,
.income-card,
.formula-card {
  border-radius: 24px;
  padding: 16px;
  margin-bottom: 12px;
}

.income-hero {
  align-items: center;
}

.table-scroll {
  margin-top: 12px;
  overflow-x: auto;
  border-radius: 18px;
  border: 1px solid rgba(255, 56, 88, 0.12);
}

table {
  width: 620px;
  border-collapse: collapse;
  overflow: hidden;
  font-size: 12px;
}

th,
td {
  padding: 12px 10px;
  text-align: left;
  white-space: nowrap;
}

th {
  color: #b91f3d;
  background: rgba(255, 56, 88, 0.1);
  font-weight: 950;
}

td {
  color: #24313d;
  font-weight: 750;
  border-top: 1px solid rgba(255, 56, 88, 0.08);
  background: rgba(255, 255, 255, 0.46);
}

.bonus-matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.bonus-matrix span,
.formula span {
  display: grid;
  place-items: center;
  border-radius: 14px;
  padding: 10px 6px;
  background: rgba(255, 56, 88, 0.1);
  color: #b91f3d;
  font-size: 12px;
  font-weight: 950;
}

.manage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.manage-card {
  border-radius: 20px;
  padding: 14px 10px;
  text-align: center;
}

.manage-card b {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--red);
  color: white;
}

.manage-card h3 {
  margin: 10px 0 4px;
  color: var(--red);
  font-size: 24px;
}

.manage-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.formula-card {
  text-align: center;
  overflow: hidden;
}

.note-orb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--red), var(--coral));
  color: white;
  font-size: 28px;
  box-shadow: var(--red-shadow);
}

.formula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 14px 0 6px;
}

.formula i {
  color: var(--red);
  font-style: normal;
  font-size: 22px;
  font-weight: 950;
}

.formula-card strong {
  display: block;
  color: var(--red);
  font-size: 38px;
  letter-spacing: -0.05em;
  text-shadow: 0 12px 26px rgba(255, 56, 88, 0.2);
}

.formula-card small {
  font-size: 14px;
  letter-spacing: 0.12em;
}

.sound-line {
  display: flex;
  justify-content: center;
  align-items: end;
  gap: 5px;
  height: 28px;
  margin-top: 10px;
}

.sound-line i:nth-child(1) { height: 12px; }
.sound-line i:nth-child(2) { height: 22px; animation-delay: -0.2s; }
.sound-line i:nth-child(3) { height: 16px; animation-delay: -0.4s; }
.sound-line i:nth-child(4) { height: 26px; animation-delay: -0.6s; }
.sound-line i:nth-child(5) { height: 14px; animation-delay: -0.8s; }
.sound-line i:nth-child(6) { height: 20px; animation-delay: -1s; }

.account-hero {
  border-radius: 26px;
  padding: 16px;
}

.account-hero > .primary {
  display: inline-flex;
  margin: 0 92px 12px 0;
  padding: 10px 14px;
  font-size: 13px;
}

.mini-actions {
  position: absolute;
  top: 15px;
  right: 14px;
  display: flex;
  gap: 8px;
}

.profile-row {
  margin-top: 6px;
}

.profile-row img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  box-shadow: var(--red-shadow);
}

.profile-row p {
  display: inline-flex;
  margin: 6px 0 0;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 56, 88, 0.1);
  color: #b91f3d;
  font-size: 12px;
  font-weight: 850;
}

.balance-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.balance-grid div {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.5);
}

.balance-grid span,
.metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 760;
}

.balance-grid b {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  letter-spacing: -0.05em;
}

.action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

.overview-grid {
  grid-template-columns: repeat(3, 1fr);
}

.metric {
  min-height: 92px;
  border-radius: 18px;
  padding: 12px;
}

.metric b {
  display: block;
  margin-top: 8px;
  font-size: 24px;
  letter-spacing: -0.05em;
}

.metric i {
  display: block;
  margin-top: 7px;
  color: var(--red);
  font-style: normal;
  font-weight: 950;
}

.quick-grid {
  grid-template-columns: repeat(4, 1fr);
}

.quick {
  min-height: 78px;
  color: var(--ink);
  text-align: center;
}

.signout {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 18px;
  background: rgba(255, 56, 88, 0.1);
  color: #b91f3d;
  font-weight: 950;
}

.bottom-nav {
  position: absolute;
  z-index: 5;
  left: 10px;
  right: 10px;
  bottom: 10px;
  height: 68px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 7px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.72);
  box-shadow:
    0 20px 50px rgba(70, 96, 123, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px);
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  background: transparent;
  color: #8a96a2;
}

.nav-item b {
  font-size: 10px;
  line-height: 1;
}

.nav-item.active {
  color: var(--red);
  background: rgba(255, 56, 88, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.84), 0 10px 24px rgba(255, 56, 88, 0.12);
}

.nav-item.active::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 4px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--red), var(--gold), transparent);
  animation: nav-wave 1.4s ease-in-out infinite;
}

.nav-icon {
  width: 24px;
  height: 24px;
}

.nav-icon::before {
  inset: 4px;
  border: 2px solid currentColor;
  border-radius: 7px;
}

.nav-icon.home::before { transform: rotate(45deg); border-radius: 5px; }
.nav-icon.home::after { width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; bottom: 5px; }
.nav-icon.tasks::before { border-radius: 50%; }
.nav-icon.tasks::after { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; left: 10px; top: 7px; }
.nav-icon.vip::before { border: 0; background: currentColor; clip-path: polygon(0 88%, 10% 34%, 35% 66%, 50% 8%, 65% 66%, 90% 34%, 100% 88%); }
.nav-icon.income::before { border: 0; width: 4px; height: 17px; background: currentColor; border-radius: 999px; left: 5px; top: 4px; box-shadow: 7px -5px 0 currentColor, 14px 3px 0 currentColor; }
.nav-icon.account::before { width: 9px; height: 9px; border-radius: 50%; left: 8px; top: 4px; }
.nav-icon.account::after { width: 18px; height: 10px; border: 2px solid currentColor; border-top: 0; border-radius: 0 0 12px 12px; bottom: 3px; }

/* V2: brighter ice-glass direction with softer red and more accent colors. */
:root {
  --line: rgba(124, 166, 204, 0.22);
  --red: #ef5368;
  --coral: #ff8d78;
  --cyan: #58cfff;
  --mint: #3ed7aa;
  --gold: #f3bf58;
  --green: #3ed7aa;
  --violet: #8f86ff;
  --shadow: 0 18px 52px rgba(71, 103, 134, 0.14);
  --red-shadow: 0 10px 30px rgba(239, 83, 104, 0.13);
}

html,
body {
  background:
    radial-gradient(circle at 14% 8%, rgba(88, 207, 255, 0.21), transparent 27%),
    radial-gradient(circle at 90% 10%, rgba(62, 215, 170, 0.18), transparent 26%),
    radial-gradient(circle at 16% 82%, rgba(143, 134, 255, 0.14), transparent 28%),
    radial-gradient(circle at 84% 80%, rgba(239, 83, 104, 0.12), transparent 30%),
    linear-gradient(145deg, #fbfdff 0%, #f3faff 42%, #fff8fb 70%, #f8fbff 100%);
}

.phone-shell {
  background:
    radial-gradient(circle at 18% 4%, rgba(88, 207, 255, 0.18), transparent 32%),
    radial-gradient(circle at 96% 18%, rgba(62, 215, 170, 0.17), transparent 30%),
    radial-gradient(circle at 82% 86%, rgba(239, 83, 104, 0.11), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(241, 249, 255, 0.72) 46%, rgba(255, 247, 250, 0.78)),
    #fbfdff;
}

.phone-shell::before {
  background:
    repeating-linear-gradient(115deg, transparent 0 42px, rgba(255, 255, 255, 0.5) 44px, transparent 48px),
    radial-gradient(circle at 12% 18%, rgba(88, 207, 255, 0.08), transparent 18%),
    linear-gradient(rgba(91, 138, 175, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(91, 138, 175, 0.028) 1px, transparent 1px);
}

.ambient-a {
  background: rgba(88, 207, 255, 0.2);
}

.ambient-b {
  background: rgba(62, 215, 170, 0.18);
}

.music-field {
  color: rgba(239, 83, 104, 0.12);
}

.glass-panel,
.glass-card {
  border-color: rgba(132, 170, 207, 0.22);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(241, 250, 255, 0.54) 46%, rgba(255, 246, 249, 0.46)),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    0 22px 54px rgba(69, 103, 136, 0.13),
    0 0 24px rgba(239, 83, 104, 0.055),
    0 0 0 1px rgba(255, 255, 255, 0.78) inset,
    inset 0 18px 45px rgba(255, 255, 255, 0.22);
}

.glass-panel::before,
.glass-card::before {
  left: 16px;
  right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.98), rgba(239, 83, 104, 0.24), rgba(88, 207, 255, 0.26), transparent);
  box-shadow: 0 0 16px rgba(239, 83, 104, 0.18);
}

.home-hero {
  min-height: 214px;
  border-radius: 28px;
}

.brand-lockup p {
  color: #de4058;
}

.brand-lockup img,
.income-hero img,
.profile-row img {
  box-shadow: 0 12px 30px rgba(88, 207, 255, 0.16), 0 0 24px rgba(239, 83, 104, 0.12);
}

.member-chip {
  background: linear-gradient(135deg, rgba(88, 207, 255, 0.14), rgba(239, 83, 104, 0.1));
  color: #b93a4d;
}

.home-balance-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: calc(100% - 104px);
  margin-top: 14px;
}

.home-balance-row div,
.summary-pill,
.calc-list div {
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
}

.home-balance-row div {
  border-radius: 17px;
  padding: 11px 10px;
}

.home-balance-row span,
.summary-pill span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 780;
  line-height: 1.2;
}

.home-balance-row b,
.summary-pill b {
  display: block;
  margin-top: 5px;
  font-size: 14px;
  letter-spacing: -0.03em;
}

.hero-wave {
  right: 16px;
  bottom: 28px;
  padding: 8px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hero-wave i,
.sound-line i {
  background: linear-gradient(180deg, var(--cyan), var(--mint) 48%, var(--red));
  box-shadow: 0 0 18px rgba(88, 207, 255, 0.22);
}

.notice-slider {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border-radius: 22px;
  overflow: hidden;
}

.notice-slider h2 {
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
}

.notice-slider p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.notice-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  color: white;
  background: linear-gradient(135deg, var(--cyan), var(--mint), var(--red));
  box-shadow: 0 12px 28px rgba(88, 207, 255, 0.18);
  font-size: 20px;
  font-weight: 950;
}

.notice-dots {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.notice-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(239, 83, 104, 0.34);
}

.notice-dots i:nth-child(2) {
  background: rgba(88, 207, 255, 0.42);
}

.notice-dots i:nth-child(3) {
  background: rgba(62, 215, 170, 0.42);
}

.tone-blue {
  --tone: var(--cyan);
  --tone-soft: rgba(88, 207, 255, 0.14);
  --tone-mid: rgba(88, 207, 255, 0.3);
}

.tone-mint {
  --tone: var(--mint);
  --tone-soft: rgba(62, 215, 170, 0.14);
  --tone-mid: rgba(62, 215, 170, 0.28);
}

.tone-gold {
  --tone: var(--gold);
  --tone-soft: rgba(243, 191, 88, 0.16);
  --tone-mid: rgba(243, 191, 88, 0.3);
}

.tone-violet {
  --tone: var(--violet);
  --tone-soft: rgba(143, 134, 255, 0.14);
  --tone-mid: rgba(143, 134, 255, 0.3);
}

.tone-blue,
.tone-mint,
.tone-gold,
.tone-violet {
  border-color: color-mix(in srgb, var(--tone) 32%, white);
}

.tone-blue::before,
.tone-mint::before,
.tone-gold::before,
.tone-violet::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.96), var(--tone-mid), transparent);
  box-shadow: 0 0 18px var(--tone-mid);
}

.shortcut {
  min-height: 86px;
  background:
    radial-gradient(circle at 50% 0, var(--tone-soft, rgba(255, 255, 255, 0.2)), transparent 55%),
    rgba(255, 255, 255, 0.58);
}

.icon {
  background: linear-gradient(135deg, var(--tone-soft, rgba(88, 207, 255, 0.16)), rgba(255, 255, 255, 0.68));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(74, 122, 164, 0.1);
}

.shortcut.tone-blue .icon::before,
.shortcut.tone-blue .icon::after,
.tone-blue .avatar::before,
.tone-blue .avatar::after {
  border-color: var(--cyan);
  color: var(--cyan);
}

.shortcut.tone-mint .icon::before,
.shortcut.tone-mint .icon::after,
.tone-mint .avatar::before,
.tone-mint .avatar::after {
  border-color: var(--mint);
  color: var(--mint);
}

.shortcut.tone-gold .icon::before,
.shortcut.tone-gold .icon::after,
.tone-gold .avatar::before,
.tone-gold .avatar::after {
  border-color: var(--gold);
  color: var(--gold);
}

.shortcut.tone-violet .icon::before,
.shortcut.tone-violet .icon::after,
.tone-violet .avatar::before,
.tone-violet .avatar::after {
  border-color: var(--violet);
  color: var(--violet);
}

.shortcut .icon::before,
.shortcut .icon::after,
.quick .icon::before,
.quick .icon::after {
  border-color: var(--tone, var(--cyan));
}

.shortcut .icon::after,
.quick .icon::after,
.shortcut .icon-user::before,
.quick .icon-user::before,
.shortcut .icon-gift::after,
.quick .icon-gift::after,
.shortcut .icon-task::after,
.quick .icon-task::after,
.shortcut .icon-report::after,
.quick .icon-report::after,
.shortcut .icon-bill::after,
.quick .icon-bill::after,
.shortcut .icon-download::before,
.quick .icon-download::before {
  background: var(--tone, var(--cyan));
}

.shortcut .icon-crown::before,
.quick .icon-crown::before {
  background: linear-gradient(135deg, var(--tone, var(--gold)), rgba(255, 255, 255, 0.78));
}

.shortcut .icon-help::before,
.quick .icon-help::before,
.shortcut .icon-lang::before,
.quick .icon-lang::before {
  color: var(--tone, var(--cyan));
}

.primary {
  background: linear-gradient(135deg, var(--cyan), var(--mint) 48%, var(--coral));
  box-shadow: 0 12px 28px rgba(88, 207, 255, 0.17), 0 8px 22px rgba(239, 83, 104, 0.1);
}

.secondary {
  background: rgba(88, 207, 255, 0.11);
  color: #25647a;
}

.soft-button,
.section-head button,
.text-link {
  color: #3e7f96;
}

.task-banner {
  justify-content: space-between;
}

.task-banner > div:nth-child(2) {
  min-width: 0;
}

.tiny-action {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--mint), var(--cyan));
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(62, 215, 170, 0.18);
}

.vinyl {
  background:
    radial-gradient(circle at center, #fff 0 12%, var(--cyan) 13% 20%, transparent 21%),
    repeating-radial-gradient(circle at center, rgba(88, 207, 255, 0.13) 0 9px, rgba(255, 255, 255, 0.76) 10px 13px);
  box-shadow: 0 14px 30px rgba(88, 207, 255, 0.16);
}

.reward-list {
  margin-top: 12px;
}

.reward-card {
  background:
    radial-gradient(circle at 0 0, var(--tone-soft, rgba(88, 207, 255, 0.12)), transparent 42%),
    rgba(255, 255, 255, 0.56);
}

.reward-card em {
  background: var(--tone-soft, rgba(88, 207, 255, 0.12));
  color: color-mix(in srgb, var(--tone, var(--red)) 70%, #293746);
}

.avatar {
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(135deg, var(--tone-soft, rgba(88, 207, 255, 0.14)), rgba(255, 255, 255, 0.74));
}

.avatar.headset::before {
  width: 22px;
  height: 16px;
  border: 3px solid var(--violet);
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  left: 8px;
  top: 9px;
}

.avatar.headset::after {
  width: 6px;
  height: 13px;
  border-radius: 5px;
  background: var(--red);
  left: 8px;
  top: 22px;
  box-shadow: 20px 0 0 var(--cyan), 12px 8px 0 -2px var(--gold);
}

.avatar.mini-disc::before {
  inset: 8px;
  border-radius: 50%;
  border: 4px solid var(--cyan);
  background: rgba(255, 255, 255, 0.78);
}

.avatar.mini-disc::after {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  left: 18px;
  top: 18px;
}

.avatar.mini-note::before {
  width: 4px;
  height: 21px;
  background: var(--mint);
  left: 20px;
  top: 9px;
  border-radius: 4px;
}

.avatar.mini-note::after {
  width: 13px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  left: 10px;
  top: 25px;
  box-shadow: 12px -18px 0 -3px var(--violet);
}

.home-two-col {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 10px;
  margin-top: 12px;
}

.team-card,
.daily-card,
.calc-list {
  border-radius: 24px;
  padding: 15px;
}

.team-card h2,
.daily-card h2,
.calc-list h2 {
  margin: 0;
  font-size: 16px;
  letter-spacing: -0.03em;
}

.team-card p,
.daily-card p,
.calc-list span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.team-progress {
  display: flex;
  align-items: end;
  gap: 8px;
  height: 78px;
  margin-top: 10px;
}

.team-progress span {
  position: relative;
  flex: 1;
  min-height: 34%;
  height: var(--v);
  border-radius: 14px 14px 10px 10px;
  background: linear-gradient(180deg, var(--cyan), var(--mint));
  box-shadow: 0 10px 24px rgba(88, 207, 255, 0.16);
}

.team-progress span:nth-child(2) {
  background: linear-gradient(180deg, var(--gold), var(--coral));
}

.team-progress span:nth-child(3) {
  background: linear-gradient(180deg, var(--violet), var(--cyan));
}

.team-progress b {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  color: white;
  font-size: 11px;
}

.daily-card strong {
  display: block;
  margin-top: 14px;
  color: #265b70;
  font-size: 34px;
  letter-spacing: -0.06em;
}

.news-stack {
  display: grid;
  gap: 10px;
}

.news-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  border-radius: 20px;
  padding: 12px;
}

.news-item b {
  display: block;
  font-size: 13px;
}

.news-item p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.cover {
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.82), transparent 19%),
    radial-gradient(circle at 80% 26%, rgba(88, 207, 255, 0.18), transparent 24%),
    linear-gradient(135deg, rgba(62, 215, 170, 0.16), rgba(255, 255, 255, 0.58) 42%, rgba(239, 83, 104, 0.12)),
    #fff;
}

.cover::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(88, 207, 255, 0.36) 13px 18px, transparent 19px 32px),
    radial-gradient(circle at 58% 36%, rgba(239, 83, 104, 0.2), transparent 26%),
    radial-gradient(circle at 30% 66%, rgba(62, 215, 170, 0.22), transparent 24%);
}

.cover-b {
  background:
    radial-gradient(circle at 62% 38%, rgba(239, 83, 104, 0.16), transparent 22%),
    radial-gradient(circle at 20% 70%, rgba(143, 134, 255, 0.16), transparent 25%),
    linear-gradient(135deg, #f8fdff, #f3fbff 46%, #fff8fb);
}

.cover-c {
  background:
    radial-gradient(circle at 28% 62%, rgba(62, 215, 170, 0.2), transparent 24%),
    radial-gradient(circle at 82% 26%, rgba(243, 191, 88, 0.18), transparent 24%),
    linear-gradient(145deg, #ffffff, #f4fbff 55%, #fff7fa);
}

.play {
  color: #de4058;
  box-shadow: 0 0 0 9px rgba(255, 255, 255, 0.34), 0 12px 30px rgba(88, 207, 255, 0.16);
}

.earn-strip {
  background: linear-gradient(90deg, var(--cyan), var(--mint), var(--coral));
}

.badge {
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.86), transparent 24%),
    linear-gradient(135deg, var(--cyan), var(--mint), var(--coral));
}

.badge.g { background: linear-gradient(135deg, var(--cyan), var(--mint)); }
.badge.g3 { background: linear-gradient(135deg, var(--gold), var(--coral)); }
.badge.s { background: linear-gradient(135deg, var(--violet), var(--cyan)); }
.badge.v { background: linear-gradient(135deg, var(--mint), var(--gold), var(--red)); }

.vip-card.current {
  border-color: rgba(88, 207, 255, 0.32);
}

.vip-card li::before {
  color: var(--cyan);
}

.income-hero {
  min-height: 118px;
  overflow: hidden;
}

.income-hero::after {
  content: "♪ ♫ ♬";
  position: absolute;
  right: -10px;
  bottom: -18px;
  color: rgba(88, 207, 255, 0.14);
  font-size: 58px;
  font-weight: 900;
  letter-spacing: -0.18em;
  pointer-events: none;
}

.income-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 12px 0;
}

.summary-pill {
  min-height: 74px;
  border-radius: 19px;
  padding: 12px 9px;
  background:
    radial-gradient(circle at 50% 0, var(--tone-soft), transparent 58%),
    rgba(255, 255, 255, 0.58);
}

.summary-pill b {
  color: color-mix(in srgb, var(--tone) 70%, #1a3442);
  font-size: 18px;
}

.income-card {
  overflow: hidden;
}

.income-card h2 {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.income-card h2::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--cyan), var(--mint), var(--red));
  box-shadow: 0 8px 18px rgba(88, 207, 255, 0.17);
}

.table-scroll {
  overflow: visible;
  border-color: rgba(88, 207, 255, 0.18);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.56), rgba(244, 251, 255, 0.36)),
    rgba(255, 255, 255, 0.34);
}

table {
  width: 100%;
  font-size: 11px;
}

.income-table-full,
.reward-table-full,
.income-table-full thead,
.reward-table-full thead,
.income-table-full tbody,
.reward-table-full tbody,
.income-table-full tr,
.reward-table-full tr,
.income-table-full td,
.reward-table-full td {
  display: block;
}

.income-table-full thead,
.reward-table-full thead {
  display: none;
}

.income-table-full tbody,
.reward-table-full tbody {
  padding: 8px;
}

.income-table-full tr,
.reward-table-full tr {
  position: relative;
  margin-bottom: 9px;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0 0, rgba(88, 207, 255, 0.11), transparent 44%),
    rgba(255, 255, 255, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 24px rgba(73, 109, 142, 0.08);
}

.income-table-full tr:not(.group),
.reward-table-full tr {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.reward-table-full tr {
  grid-template-columns: repeat(2, 1fr);
}

.income-table-full tr.group {
  margin: 12px 0 8px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  background: transparent;
}

.income-table-full td,
.reward-table-full td {
  min-width: 0;
  border: 0;
  padding: 7px 8px;
  white-space: normal;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.58);
}

.income-table-full tr:not(.group) td:first-child,
.reward-table-full td:first-child {
  grid-column: 1 / -1;
  padding: 0 2px 2px;
  background: transparent;
  color: #172432;
  font-size: 14px;
  font-weight: 950;
}

.income-table-full tr:not(.group) td:not(:first-child)::before,
.reward-table-full td:not(:first-child)::before {
  display: block;
  margin-bottom: 4px;
  color: #6c7c8d;
  font-size: 9px;
  font-weight: 850;
  line-height: 1.1;
}

.income-table-full tr:not(.group) td:nth-child(2)::before { content: "Барьцаа"; }
.income-table-full tr:not(.group) td:nth-child(3)::before { content: "Даалгавар"; }
.income-table-full tr:not(.group) td:nth-child(4)::before { content: "Нэгж"; }
.income-table-full tr:not(.group) td:nth-child(5)::before { content: "Өдөр"; }
.income-table-full tr:not(.group) td:nth-child(6)::before { content: "Сар"; }
.income-table-full tr:not(.group) td:nth-child(7)::before { content: "Жил"; }

.reward-table-full td:nth-child(2)::before { content: "Хувь"; }
.reward-table-full td:nth-child(3)::before { content: "A шагнал"; }
.reward-table-full td:nth-child(4)::before { content: "B шагнал"; }
.reward-table-full td:nth-child(5)::before { content: "C шагнал"; }

th {
  color: #24687f;
  background: linear-gradient(90deg, rgba(88, 207, 255, 0.12), rgba(62, 215, 170, 0.1));
}

td {
  color: #24313d;
  font-weight: 800;
}

tr.group td {
  color: #fff;
  background: linear-gradient(90deg, rgba(88, 207, 255, 0.88), rgba(62, 215, 170, 0.8));
  letter-spacing: 0.02em;
}

tr.group.a td {
  background: linear-gradient(90deg, rgba(88, 207, 255, 0.88), rgba(143, 134, 255, 0.72));
}

tr.group.b td {
  background: linear-gradient(90deg, rgba(62, 215, 170, 0.86), rgba(88, 207, 255, 0.72));
}

tr.group.c td {
  background: linear-gradient(90deg, rgba(243, 191, 88, 0.9), rgba(255, 141, 120, 0.78));
}

tr.group.d td {
  background: linear-gradient(90deg, rgba(143, 134, 255, 0.88), rgba(239, 83, 104, 0.68));
}

.table-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.explain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.explain {
  border-radius: 18px;
  padding: 12px;
  background:
    radial-gradient(circle at 0 0, var(--tone-soft), transparent 48%),
    rgba(255, 255, 255, 0.56);
}

.explain b {
  display: block;
  font-size: 13px;
  color: color-mix(in srgb, var(--tone) 72%, #213240);
}

.explain p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.manage-card:nth-child(1) b,
.manage-card:nth-child(1) h3 {
  background: var(--cyan);
  color: white;
}

.manage-card:nth-child(2) b,
.manage-card:nth-child(2) h3 {
  background: var(--mint);
  color: white;
}

.manage-card:nth-child(3) b,
.manage-card:nth-child(3) h3 {
  background: var(--gold);
  color: white;
}

.manage-card h3 {
  display: inline-flex;
  margin: 10px auto 4px;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 22px;
}

.calc-list {
  margin-bottom: 12px;
}

.calc-list div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: 9px;
  padding: 10px 12px;
  border-radius: 16px;
}

.calc-list b {
  color: #226981;
  font-size: 14px;
  white-space: nowrap;
}

.note-orb {
  background: linear-gradient(135deg, var(--cyan), var(--mint), var(--coral));
  box-shadow: 0 14px 32px rgba(88, 207, 255, 0.17);
}

.formula span {
  background: linear-gradient(135deg, rgba(88, 207, 255, 0.12), rgba(62, 215, 170, 0.12));
  color: #24687f;
}

.formula i {
  color: var(--coral);
}

.formula-card strong {
  color: #e2475d;
  font-family: ui-rounded, "SF Pro Rounded", Inter, ui-sans-serif, system-ui, sans-serif;
  font-weight: 950;
  letter-spacing: -0.07em;
  text-shadow: 0 14px 28px rgba(88, 207, 255, 0.15), 0 4px 16px rgba(239, 83, 104, 0.12);
}

.profile-row p,
.signout {
  background: rgba(88, 207, 255, 0.1);
  color: #25647a;
}

.metric i {
  color: var(--cyan);
}

.quick:nth-child(4n + 1) .icon,
.metric:nth-child(4n + 1) {
  --tone: var(--cyan);
  --tone-soft: rgba(88, 207, 255, 0.14);
}

.quick:nth-child(4n + 2) .icon,
.metric:nth-child(4n + 2) {
  --tone: var(--mint);
  --tone-soft: rgba(62, 215, 170, 0.14);
}

.quick:nth-child(4n + 3) .icon,
.metric:nth-child(4n + 3) {
  --tone: var(--gold);
  --tone-soft: rgba(243, 191, 88, 0.16);
}

.quick:nth-child(4n) .icon,
.metric:nth-child(4n) {
  --tone: var(--violet);
  --tone-soft: rgba(143, 134, 255, 0.14);
}

.bottom-nav {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(241, 250, 255, 0.68)),
    rgba(255, 255, 255, 0.7);
  border-color: rgba(255, 255, 255, 0.82);
}

.nav-item.active {
  color: #24687f;
  background: linear-gradient(135deg, rgba(88, 207, 255, 0.16), rgba(62, 215, 170, 0.12), rgba(239, 83, 104, 0.08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 24px rgba(88, 207, 255, 0.12);
}

.nav-item.active::after {
  background: linear-gradient(90deg, transparent, var(--cyan), var(--mint), var(--red), transparent);
}

/* Home reward completion and VIP badge upgrade. */
.reward-groups {
  gap: 14px;
}

.reward-group {
  border-radius: 24px;
  padding: 14px;
  overflow: hidden;
}

.reward-group-head {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.reward-group-head h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.reward-items {
  display: grid;
  gap: 9px;
}

.reward-group .reward-card {
  grid-template-columns: 38px 1fr auto;
  padding: 10px;
  border-radius: 18px;
  box-shadow:
    0 10px 24px rgba(70, 96, 123, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.74);
}

.reward-group .reward-card h3 {
  font-size: 12px;
  line-height: 1.2;
}

.reward-group .reward-card p {
  font-size: 11px;
}

.reward-group .reward-card .avatar {
  width: 36px;
  height: 36px;
  border-radius: 13px;
}

.reward-group .reward-card em {
  padding: 7px 9px;
  font-size: 10px;
}

.bonus-rule {
  margin: 10px 0 0;
  padding: 10px 11px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(235, 249, 255, 0.38)),
    var(--tone-soft, rgba(88, 207, 255, 0.1));
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

/* Confirmed home-page customizations. */
.home-hero {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.peer-hero-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 26px;
}

.peer-hero-slider {
  --hero-slide: 0;
  position: relative;
  aspect-ratio: 2.12 / 1;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(250, 253, 255, 0.72)) padding-box,
    linear-gradient(90deg, rgba(244, 188, 212, 0.76), rgba(222, 220, 236, 0.62) 50%, rgba(166, 220, 236, 0.8)) border-box;
  box-shadow:
    0 12px 26px rgba(77, 104, 132, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.peer-hero-track {
  display: flex;
  height: 100%;
  transform: translateX(calc(var(--hero-slide) * -100%));
  transition: transform 0.65s cubic-bezier(0.22, 0.72, 0.24, 1);
}

.peer-hero-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
}

.peer-hero-slide-secondary {
  display: grid;
  place-items: center;
  padding: 6px;
  background:
    radial-gradient(circle at 12% 20%, rgba(246, 190, 218, 0.16), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(164, 224, 239, 0.18), transparent 36%),
    rgba(255, 255, 255, 0.34);
}

.peer-hero-slide-secondary .peer-hero-image {
  width: 100%;
  height: 100%;
  border-radius: 17px;
  object-fit: cover;
  filter: saturate(0.82) brightness(1.035) contrast(0.97);
  box-shadow: 0 8px 18px rgba(91, 115, 143, 0.11);
}

.peer-brand-fixed {
  display: flex;
  min-height: 94px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 10px 18px 8px;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 24px;
  background:
    radial-gradient(circle at 15% 30%, rgba(246, 194, 218, 0.16), transparent 32%),
    radial-gradient(circle at 86% 72%, rgba(170, 225, 239, 0.18), transparent 34%),
    rgba(255, 255, 255, 0.62);
  box-shadow:
    0 10px 24px rgba(80, 105, 133, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

.peer-brand-fixed > img {
  width: 70px;
  height: 70px;
  object-fit: contain;
  filter: saturate(0.82) brightness(1.04);
}

.peer-brand-fixed-copy {
  display: grid;
  gap: 1px;
}

.peer-brand-fixed-copy strong {
  display: flex;
  align-items: baseline;
  color: #657d9f;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: -0.06em;
  line-height: 1;
  text-shadow: 0 3px 5px rgba(92, 112, 137, 0.2);
}

.peer-brand-fixed-copy strong span:last-child {
  color: #dc91b3;
}

.peer-brand-fixed-copy small {
  color: #687080;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.peer-hero-slide-primary {
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 20%, rgba(246, 190, 218, 0.14), transparent 34%),
    radial-gradient(circle at 88% 78%, rgba(164, 224, 239, 0.18), transparent 36%);
}

.peer-hero-slide-primary .peer-hero-image {
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 18px;
  object-fit: cover;
  object-position: center bottom;
  filter: saturate(0.82) brightness(1.035) contrast(0.97);
  transform: scale(1.12);
  transform-origin: center 88%;
}

.peer-hero-slide-tertiary .peer-hero-image {
  filter: saturate(0.76) brightness(1.045) contrast(0.96);
}

.peer-hero-dots {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 9px;
  display: flex;
  gap: 6px;
  transform: translateX(-50%);
}

.peer-hero-dots button {
  width: 8px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  padding: 0;
  background: rgba(210, 216, 235, 0.82);
  box-shadow: 0 2px 5px rgba(60, 79, 102, 0.18);
  transition: width 0.25s ease, background 0.25s ease;
}

.peer-hero-dots button.active {
  width: 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ef96bd, #79d0e5);
}

.shortcut-grid {
  margin-top: 14px;
}

.shortcut-reference-art {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: var(--shortcut-art) center / 100% 100% no-repeat;
  box-shadow: none;
}

.shortcut-reference-art::before,
.shortcut-reference-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 3px;
  padding: 3px;
  border-radius: 16px;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  animation-duration: 5.2s;
  animation-timing-function: cubic-bezier(0.37, 0, 0.18, 1);
  animation-iteration-count: infinite;
}

.shortcut-reference-art::before {
  background: linear-gradient(90deg, #fff0f6 0%, #fbd8e6 36%, #f5b9d0 70%, transparent 100%);
  clip-path: circle(0% at 0% 50%);
  animation-name: shortcut-border-expand-left;
}

.shortcut-reference-art::after {
  background: linear-gradient(90deg, transparent 0%, #b9e2ee 30%, #d0eef5 64%, #ecfaff 100%);
  clip-path: circle(0% at 100% 50%);
  animation-name: shortcut-border-expand-right;
}

.shortcut-reference-art .icon {
  visibility: hidden;
}

.shortcut-reference-art b {
  position: absolute;
  z-index: 3;
  left: 6px;
  right: 6px;
  bottom: 8px;
  display: flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 0;
  color: var(--ink);
  font-size: 10.5px;
  line-height: 1.15;
  text-align: center;
  white-space: normal;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.shortcut-reference-art:nth-child(3) b {
  font-size: 9.5px;
  line-height: 1.08;
}

@keyframes shortcut-border-expand-left {
  0% {
    clip-path: circle(0% at 0% 50%);
    opacity: 0;
  }
  10% {
    clip-path: circle(4% at 0% 50%);
    opacity: 0.06;
  }
  24% {
    clip-path: circle(24% at 0% 50%);
    opacity: 0.28;
  }
  48% {
    clip-path: circle(78% at 0% 50%);
    opacity: 0.66;
  }
  70% {
    clip-path: circle(155% at 0% 50%);
    opacity: 0.94;
  }
  80% {
    clip-path: circle(155% at 0% 50%);
    opacity: 0.94;
  }
  92% {
    clip-path: circle(155% at 0% 50%);
    opacity: 0.2;
  }
  100% {
    clip-path: circle(155% at 0% 50%);
    opacity: 0;
  }
}

@keyframes shortcut-border-expand-right {
  0% {
    clip-path: circle(0% at 100% 50%);
    opacity: 0;
  }
  10% {
    clip-path: circle(4% at 100% 50%);
    opacity: 0.06;
  }
  24% {
    clip-path: circle(24% at 100% 50%);
    opacity: 0.28;
  }
  48% {
    clip-path: circle(78% at 100% 50%);
    opacity: 0.66;
  }
  70% {
    clip-path: circle(155% at 100% 50%);
    opacity: 0.94;
  }
  80% {
    clip-path: circle(155% at 100% 50%);
    opacity: 0.94;
  }
  92% {
    clip-path: circle(155% at 100% 50%);
    opacity: 0.2;
  }
  100% {
    clip-path: circle(155% at 100% 50%);
    opacity: 0;
  }
}

.shortcut-reference-art:nth-child(2) { --shortcut-delay: -0.22s; }
.shortcut-reference-art:nth-child(3) { --shortcut-delay: -0.44s; }
.shortcut-reference-art:nth-child(4) { --shortcut-delay: -0.66s; }
.shortcut-reference-art:nth-child(5) { --shortcut-delay: -0.88s; }
.shortcut-reference-art:nth-child(6) { --shortcut-delay: -1.1s; }
.shortcut-reference-art:nth-child(7) { --shortcut-delay: -1.32s; }
.shortcut-reference-art:nth-child(8) { --shortcut-delay: -1.54s; }

.shortcut-reference-art::before,
.shortcut-reference-art::after {
  animation-delay: var(--shortcut-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .shortcut-reference-art::after {
    animation: none;
    clip-path: none;
    opacity: 0.82;
  }

  .shortcut-reference-art::before {
    animation: none;
    clip-path: none;
    opacity: 0.82;
  }
}

.task-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.daily-task-panel {
  margin-top: 12px;
  padding: 12px;
  border-radius: 24px;
}

.daily-task-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 10px;
}

.daily-task-title h2 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.02em;
}

.daily-calendar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  color: white;
  font-size: 17px;
  font-weight: 900;
  background: linear-gradient(145deg, #f3bed4, #d8d2e8, #b8e2ed);
  box-shadow: 0 6px 14px rgba(114, 120, 188, 0.14);
}

.daily-task-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-task-card {
  min-width: 0;
  padding: 12px 10px 10px;
  border-radius: 20px;
}

.daily-task-card h3 {
  margin: 0;
  color: #8268de;
  font-size: 16px;
}

.daily-task-card p {
  margin: 4px 0 0;
  color: #3f4d5a;
  font-size: 10px;
  line-height: 1.3;
}

.daily-task-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  align-items: center;
  min-height: 86px;
}

.check-sheet {
  position: relative;
  width: 52px;
  height: 68px;
  margin: 4px auto 0;
  border-radius: 8px;
  background: linear-gradient(160deg, #fff, #e9f6ff);
  box-shadow: 0 8px 14px rgba(73, 96, 128, 0.2);
  transform: rotate(-4deg);
}

.check-sheet i {
  display: block;
  width: 32px;
  height: 7px;
  margin: 11px 0 0 12px;
  border-radius: 4px;
  background: linear-gradient(90deg, #edabc8 0 8px, #e6edf4 8px);
}

.task-ring {
  display: grid;
  place-content: center;
  width: 66px;
  height: 66px;
  margin: 0 auto;
  border-radius: 50%;
  text-align: center;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.96) 0 55%, transparent 57%),
    conic-gradient(#efb6cf 0 30%, #d4cde6 30% 58%, #a8dce9 58% 74%, rgba(231, 236, 242, 0.8) 74%);
  box-shadow: 0 6px 14px rgba(88, 106, 132, 0.16);
}

.task-ring strong {
  color: #24405f;
  font-size: 17px;
}

.task-ring span {
  color: #607184;
  font-size: 8px;
}

.share-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 70px;
}

.chain-link {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  font-size: 25px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 5px 12px rgba(74, 96, 120, 0.12);
}

.share-visual > b {
  color: #a9dce8;
}

.qr-mini {
  width: 52px;
  height: 52px;
  border: 6px solid white;
  background:
    repeating-linear-gradient(90deg, #233a64 0 3px, transparent 3px 6px),
    repeating-linear-gradient(0deg, rgba(35, 58, 100, 0.75) 0 3px, transparent 3px 6px),
    #fff;
  box-shadow: 0 5px 12px rgba(74, 96, 120, 0.12);
}

.daily-task-card .invite-count {
  margin: -2px 0 6px;
  text-align: center;
}

.invite-count strong {
  color: #d68eae;
}

.daily-gradient-button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-height: 30px;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  padding: 2px 3px 2px 12px;
  color: #5d6074;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(90deg, #f3bad2, #d8d1e7 48%, #b4e0eb);
  box-shadow: 0 4px 9px rgba(86, 105, 132, 0.13);
}

.daily-gradient-button span {
  flex: 1;
  text-align: center;
}

.daily-gradient-button b {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #79b9cf;
  background: white;
}

.mini-task {
  min-width: 0;
  padding: 12px 10px 13px;
  border-radius: 22px;
  text-align: center;
}

.mini-task h3 {
  min-height: 28px;
  margin: 9px 0 10px;
  font-size: 11px;
  line-height: 1.25;
}

.song-cover,
.share-mark {
  width: 72px;
  height: 58px;
  margin: 0 auto;
}

.song-cover {
  display: grid;
  place-content: center;
  border-radius: 8px;
  color: #fff;
  background:
    radial-gradient(circle at 72% 22%, rgba(108, 208, 255, 0.55), transparent 24%),
    linear-gradient(145deg, #07142f, #183a70 58%, #0a1738);
  box-shadow: 0 8px 18px rgba(38, 71, 130, 0.24);
  transform: rotate(-1deg);
}

.song-cover span,
.song-cover strong {
  display: block;
  font-family: "STKaiti", "KaiTi", serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.song-cover strong {
  margin-top: 2px;
  font-size: 14px;
}

.share-mark {
  position: relative;
}

.share-mark i {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 4px solid #3f4448;
  border-radius: 50%;
  background: #fff;
}

.share-mark i:nth-child(1) { left: 8px; top: 23px; }
.share-mark i:nth-child(2) { right: 9px; top: 5px; }
.share-mark i:nth-child(3) { right: 9px; bottom: 3px; }

.share-mark::before,
.share-mark::after {
  content: "";
  position: absolute;
  left: 24px;
  width: 31px;
  height: 4px;
  border-radius: 4px;
  background: #3f4448;
  transform-origin: left center;
}

.share-mark::before { top: 28px; transform: rotate(-30deg); }
.share-mark::after { top: 32px; transform: rotate(30deg); }

.task-action {
  border-radius: 999px;
  padding: 10px 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--red), var(--coral));
  box-shadow: var(--red-shadow);
}

.reward-group .reward-card {
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
}

.reward-group .reward-card h3 {
  font-size: 12px;
  line-height: 1.35;
}

.reward-group .reward-card strong {
  color: color-mix(in srgb, var(--tone, var(--red)) 76%, #876a2c);
}

.reward-group-head h3 {
  font-size: 17px;
}

.reward-group .bonus-rule {
  color: #273746;
  font-weight: 700;
  text-align: center;
}

/* Compact music-position list on the membership screen. */
#vip .membership-title {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 84px;
  margin-bottom: 12px;
  padding: 12px 26px;
  border-radius: 24px;
}

#vip .membership-title img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 14px rgba(86, 143, 181, 0.18);
}

#vip .membership-title h1 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: 0.06em;
}

#vip .vip-list {
  gap: 10px;
}

.music-worker-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82px;
  align-items: center;
  min-height: 108px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
}

.music-worker-card::after {
  content: none;
}

.music-worker-card.current {
  border-color: rgba(255, 56, 88, 0.35);
}

.music-worker-copy {
  min-width: 0;
}

.music-worker-copy h2 {
  margin: 0 0 10px;
  font-size: 17px;
  line-height: 1.1;
}

.music-worker-copy p {
  margin: 6px 0 0;
  color: #3e4b57;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.2;
}

.music-worker-copy p span {
  display: inline-block;
  width: 18px;
  color: var(--red);
}

.music-worker-copy p strong {
  font-size: inherit;
}

.music-worker-side {
  display: grid;
  justify-items: center;
  gap: 7px;
}

.music-position-icon {
  display: block;
  width: 54px;
  height: 54px;
  border: 0;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  box-shadow: none;
  filter: saturate(0.88) hue-rotate(-6deg) brightness(1.03);
  position: relative;
}

.music-position-icon::before {
  content: none;
}

.music-position-icon {
  color: transparent;
  text-shadow: none;
}

.music-worker-side button,
.joined-state {
  min-width: 62px;
  border-radius: 999px;
  border: 1px solid #6fd0e5;
  padding: 3px 10px;
  color: #b67fbd;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    inset 0 0 0 1px rgba(239, 132, 181, 0.42),
    0 3px 8px rgba(68, 91, 112, 0.1);
}

.task-progress-card {
  margin-top: 12px;
  padding: 20px 18px 18px;
  border-radius: 24px;
}

#tasks .task-progress-card + .video-list {
  margin-top: 12px;
}

/* Final shortcut treatment: thin persistent pink/blue border with a gentle light flow. */
.shortcut-reference-art {
  border: 1px solid transparent;
  background:
    linear-gradient(#ffffff, #fbfdff) padding-box,
    linear-gradient(90deg, rgba(244, 164, 198, 0.96), rgba(217, 210, 234, 0.78) 50%, rgba(130, 210, 233, 0.96)) border-box;
  box-shadow:
    var(--shadow),
    0 0 0 1px rgba(255, 255, 255, 0.7) inset;
}

.shortcut-reference-art::before {
  content: none;
}

.shortcut-reference-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  padding: 1px;
  border-radius: 16px;
  background: linear-gradient(90deg, #f4a8c7 0%, #f6cadc 38%, #ded6e9 50%, #cbe8f0 62%, #85d4e8 100%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  clip-path: none;
  opacity: 0.72;
  pointer-events: none;
  animation: shortcut-border-glow 4.8s ease-in-out infinite;
  animation-delay: var(--shortcut-delay, 0s);
}

.shortcut-line-icon {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 42px;
  height: 42px;
  object-fit: contain;
  transform: translateX(-50%);
}

@keyframes shortcut-border-glow {
  0%, 100% {
    filter: brightness(1) saturate(0.82);
    opacity: 0.18;
  }
  20%, 80% {
    filter: brightness(1.02) saturate(0.9);
    opacity: 0.46;
  }
  50% {
    filter: brightness(1.08) saturate(1);
    opacity: 0.9;
  }
}

.daily-task-card {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.9)) padding-box,
    linear-gradient(90deg, rgba(248, 205, 222, 0.78), rgba(225, 226, 239, 0.58) 50%, rgba(190, 231, 242, 0.78)) border-box;
}

/* Reference-style daily task content, retaining the existing pastel palette. */
.music-player-card,
.share-earn-card {
  display: flex;
  min-height: 232px;
  flex-direction: column;
}

.music-player-visual {
  position: relative;
  display: flex;
  min-height: 112px;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 2px -4px 0;
}

.player-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  width: 78px;
  height: 78px;
  flex: 0 0 78px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.98) 0 36%, transparent 38%),
    radial-gradient(circle, transparent 0 52%, rgba(229, 206, 232, 0.82) 54% 56%, transparent 58%),
    conic-gradient(from 205deg, #b8e2ed, #d7d1e8 42%, #f1b9d1 72%, #b8e2ed);
  box-shadow:
    0 7px 18px rgba(109, 122, 166, 0.14),
    0 0 0 7px rgba(255, 255, 255, 0.42);
}

.player-orbit::before,
.player-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.74);
  border-radius: 50%;
  inset: 8px;
}

.player-orbit::after {
  inset: 17px;
  border-color: rgba(196, 218, 235, 0.76);
}

.player-orbit i {
  position: relative;
  z-index: 2;
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 18px solid #a999d5;
  filter: drop-shadow(0 2px 4px rgba(111, 111, 159, 0.15));
}

.player-wave {
  width: 31px;
  height: 42px;
  opacity: 0.82;
  background:
    linear-gradient(90deg,
      transparent 0 5%,
      #d7cde8 5% 9%,
      transparent 9% 18%,
      #b9dfe9 18% 23%,
      transparent 23% 32%,
      #efbdd3 32% 37%,
      transparent 37% 46%,
      #c8d9e8 46% 51%,
      transparent 51% 61%,
      #e2c5df 61% 66%,
      transparent 66% 76%,
      #b5dfea 76% 81%,
      transparent 81%);
  mask-image: radial-gradient(ellipse at center, #000 0 33%, transparent 74%);
}

.player-wave-left {
  transform: scaleX(-1);
}

.player-timeline {
  display: grid;
  grid-template-columns: auto minmax(30px, 1fr) auto;
  align-items: center;
  gap: 5px;
  margin: 0 2px 8px;
  color: #83909e;
  font-size: 8px;
}

.player-timeline > i {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: #dbe4eb;
}

.player-timeline > i b {
  position: absolute;
  width: 8px;
  height: 8px;
  top: 50%;
  left: 54%;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: #b5dfea;
  box-shadow: 0 1px 4px rgba(83, 108, 133, 0.14);
  transform: translate(-50%, -50%);
}

.share-earn-visual {
  display: flex;
  min-height: 142px;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}

.share-chain-large {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border: 1px solid rgba(226, 211, 230, 0.72);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 7px 16px rgba(102, 115, 144, 0.12);
  font-size: 31px;
  filter: saturate(0.58);
}

.qr-large {
  width: 70px;
  height: 70px;
  border: 7px solid rgba(255, 255, 255, 0.94);
  background:
    repeating-linear-gradient(90deg, #59617e 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, rgba(89, 97, 126, 0.76) 0 4px, transparent 4px 8px),
    #fff;
  box-shadow: 0 7px 16px rgba(102, 115, 144, 0.12);
}

.music-player-card .daily-gradient-button,
.share-earn-card .daily-gradient-button {
  margin-top: auto;
}

/* Coordinated task-screen music players. */
#tasks .video-list {
  gap: 14px;
}

#tasks .video-card {
  position: relative;
  border: 1px solid transparent;
  border-radius: 23px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(250, 253, 255, 0.82)) padding-box,
    linear-gradient(90deg, rgba(244, 188, 212, 0.74), rgba(225, 224, 238, 0.5) 50%, rgba(174, 224, 238, 0.78)) border-box;
  box-shadow:
    0 13px 28px rgba(79, 104, 131, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#tasks .cover {
  height: 164px;
  border-radius: 22px 22px 0 0;
  background:
    radial-gradient(circle at 32% 34%, rgba(247, 199, 220, 0.28), transparent 25%),
    radial-gradient(circle at 72% 63%, rgba(175, 226, 238, 0.3), transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(248, 246, 252, 0.84) 48%, rgba(241, 251, 254, 0.9));
}

#tasks .cover-b {
  background:
    radial-gradient(circle at 68% 34%, rgba(241, 193, 216, 0.26), transparent 24%),
    radial-gradient(circle at 28% 72%, rgba(179, 224, 238, 0.28), transparent 27%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(249, 247, 252, 0.84) 50%, rgba(242, 251, 254, 0.9));
}

#tasks .cover-c {
  background:
    radial-gradient(circle at 28% 48%, rgba(239, 193, 216, 0.24), transparent 26%),
    radial-gradient(circle at 74% 42%, rgba(177, 225, 238, 0.3), transparent 25%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(249, 247, 252, 0.84) 48%, rgba(241, 251, 254, 0.9));
}

#tasks .cover::before {
  inset: 24px 28px;
  border-radius: 20px;
  opacity: 0.8;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(177, 224, 238, 0.7) 9px 14px,
      transparent 14px 24px
    );
  -webkit-mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0, 0, 0, 0.6) 62%, transparent 88%);
  mask-image: radial-gradient(ellipse at center, #000 0 42%, rgba(0, 0, 0, 0.6) 62%, transparent 88%);
  filter: none;
}

#tasks .cover::after {
  content: "♪";
  position: absolute;
  right: 24px;
  top: 20px;
  color: rgba(232, 169, 200, 0.42);
  font-size: 25px;
  font-weight: 800;
  transform: rotate(9deg);
}

#tasks .play {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  color: #b291c9;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.78) 48%, rgba(236, 239, 248, 0.68));
  box-shadow:
    0 0 0 9px rgba(255, 255, 255, 0.36),
    0 9px 22px rgba(102, 118, 155, 0.14),
    0 0 20px rgba(191, 221, 236, 0.24);
  font-size: 21px;
  transition: transform 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

#tasks .play:hover,
#tasks .play:focus-visible {
  transform: scale(1.04);
  color: #a685c1;
}

#tasks .play.is-playing {
  color: #7baabe;
  box-shadow:
    0 0 0 9px rgba(255, 255, 255, 0.38),
    0 9px 22px rgba(102, 118, 155, 0.14),
    0 0 0 15px rgba(194, 226, 237, 0.14);
}

#tasks .song-title {
  position: relative;
  display: flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: #596274;
  background:
    linear-gradient(90deg, rgba(244, 190, 213, 0.76), rgba(220, 213, 235, 0.7) 50%, rgba(177, 225, 238, 0.78));
  border-top: 1px solid rgba(255, 255, 255, 0.76);
  font-size: 14px;
  font-weight: 850;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.74);
}

#tasks .song-title::before {
  content: "♫";
  margin-right: 8px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
}

#tasks .song-title::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.36), transparent);
  animation-duration: 4.2s;
}

@media (prefers-reduced-motion: reduce) {
  .shortcut-reference-art::after {
    animation: none;
    opacity: 0.72;
  }

  .shortcut-reference-art::before {
    content: none;
  }
}

.task-progress-card h2 {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 18px;
  text-align: center;
}

.task-progress-track {
  height: 12px;
  padding: 3px;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(255, 125, 166, 0.16), rgba(106, 211, 232, 0.2));
  box-shadow: inset 0 1px 4px rgba(85, 108, 128, 0.12);
}

.task-progress-track span {
  display: block;
  width: max(6px, var(--progress));
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--red), var(--coral), var(--cyan));
  box-shadow: 0 3px 10px rgba(255, 56, 88, 0.2);
  transition: width 0.5s ease;
}

.task-progress-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.task-progress-meta b {
  font-weight: 750;
}

.task-progress-meta strong {
  color: var(--ink);
  font-size: 15px;
}

.joined-state {
  color: #d579ab;
  background: rgba(255, 255, 255, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(239, 132, 181, 0.42),
    0 3px 8px rgba(68, 91, 112, 0.1);
}

.bonus-rule b {
  color: color-mix(in srgb, var(--tone, var(--red)) 68%, #1d2b38);
}

.vip-card {
  overflow: visible;
}

.badge {
  position: relative;
  isolation: isolate;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  overflow: hidden;
  font-size: 12px;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

.badge::before,
.badge::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.badge::before {
  inset: 5px;
  z-index: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.62);
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.88) 0 10%, transparent 11%),
    repeating-radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0 4px, transparent 5px 8px);
  box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.24);
  opacity: 0.6;
  animation: rotate-slow 13s linear infinite;
}

.badge::after {
  z-index: 1;
  inset: 2px;
  border-radius: 50%;
  background:
    conic-gradient(from 30deg, rgba(255, 255, 255, 0.82), color-mix(in srgb, var(--badge-a, var(--cyan)) 70%, white), color-mix(in srgb, var(--badge-b, var(--mint)) 70%, white), rgba(255, 255, 255, 0.7), color-mix(in srgb, var(--badge-a, var(--cyan)) 70%, white)),
    radial-gradient(circle at 68% 18%, rgba(255, 255, 255, 0.8), transparent 18%);
  mask: radial-gradient(circle, transparent 0 57%, #000 59% 100%);
  opacity: 0.72;
  animation: rotate-slow 10s linear infinite;
}

.badge span {
  position: relative;
  z-index: 2;
}

.badge.temp {
  --badge-a: var(--mint);
  --badge-b: var(--cyan);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--mint), var(--cyan));
}

.badge.g,
.badge.g3 {
  --badge-a: var(--cyan);
  --badge-b: var(--mint);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--cyan), var(--mint), var(--red));
}

.badge.g3 {
  --badge-a: var(--gold);
  --badge-b: var(--coral);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--gold), var(--coral), var(--red));
}

.badge.s {
  --badge-a: var(--gold);
  --badge-b: var(--red);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--gold), var(--coral), var(--cyan));
}

.badge.v {
  --badge-a: var(--violet);
  --badge-b: var(--cyan);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--violet), var(--cyan), var(--red));
}

.badge.c {
  --badge-a: var(--gold);
  --badge-b: var(--violet);
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.9), transparent 24%),
    linear-gradient(135deg, var(--gold), var(--violet), var(--cyan));
}

.badge.s3,
.badge.v3,
.badge.c3 {
  box-shadow:
    0 14px 34px rgba(143, 134, 255, 0.17),
    0 0 22px rgba(255, 210, 121, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(18px, 26px, 0) scale(1.08); }
}

@keyframes float-note {
  0%, 100% { transform: translateY(0) rotate(-6deg); opacity: 0.18; }
  50% { transform: translateY(-18px) rotate(8deg); opacity: 0.34; }
}

@keyframes pulse-bar {
  0%, 100% { transform: scaleY(0.72); opacity: 0.72; }
  50% { transform: scaleY(1.08); opacity: 1; }
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(14px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rotate-slow {
  to { transform: rotate(360deg); }
}

@keyframes sweep {
  0%, 38% { transform: translateX(-120%); }
  70%, 100% { transform: translateX(120%); }
}

@keyframes nav-wave {
  0%, 100% { opacity: 0.55; transform: scaleX(0.72); }
  50% { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 560px) {
  .stage {
    padding: 0;
  }

  .phone-shell {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: 0;
  }
}

/* Brighter task-progress accent, without changing its geometry. */
#tasks .task-progress-track {
  background: linear-gradient(90deg, rgba(255, 115, 182, 0.18), rgba(57, 214, 255, 0.2));
}

#tasks .task-progress-track span {
  background: linear-gradient(90deg, #ff73b6 0%, #8a82ff 50%, #39d6ff 100%);
  box-shadow:
    0 0 8px rgba(255, 115, 182, 0.42),
    0 0 10px rgba(57, 214, 255, 0.36);
}

.branded-topbar {
  display: grid;
  min-height: 64px;
  grid-template-columns: 52px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 12px;
}

.page-brand-lockup {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.page-brand-lockup img {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  object-fit: contain;
  filter: saturate(0.9) brightness(1.03);
}

.page-brand-lockup > div {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.page-brand-lockup strong {
  background: var(--ds-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.page-brand-lockup small {
  color: #566579;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.branded-topbar .round-back {
  justify-self: start;
}

.branded-topbar .text-link {
  justify-self: end;
  color: var(--ds-primary);
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

#account .quick-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

#account .quick {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 14px 16px !important;
  border-radius: 20px !important;
  color: #243042;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  text-align: left;
}

#account .quick .icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  margin: 0;
}

.brand-full-logo {
  height: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: saturate(0.94) brightness(1.02);
}

.brand-lockup .brand-full-logo {
  width: min(100%, 240px) !important;
}

.page-brand-lockup .page-brand-full-logo {
  width: min(100%, 156px) !important;
  height: auto !important;
  flex: 0 1 156px;
}

#income .income-hero > .brand-full-logo {
  width: min(100%, 210px) !important;
}

#account .profile-row > .brand-full-logo {
  width: 132px !important;
  max-height: 48px;
}

#account .account-hero > .primary {
  width: 144px;
  min-height: 48px !important;
  height: 48px;
  aspect-ratio: 3 / 1;
  margin-right: 0;
  padding: 0 12px !important;
  gap: 7px;
  font-size: 10px;
  white-space: nowrap;
}

#account .account-hero > .primary .button-system-icon {
  width: 18px !important;
  height: 18px !important;
  flex-basis: 18px;
  font-size: 9px;
}

#account .profile-row {
  justify-content: flex-start;
  padding-left: 0;
}

#account .profile-row > div {
  margin-left: 0;
}

#tasks .task-progress-track {
  height: 18px;
  padding: 3px;
}

#account .account-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: var(--ds-gradient);
  box-shadow:
    0 8px 18px rgba(85, 109, 137, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

#account .account-avatar::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 50%;
  top: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  transform: translateX(-50%);
}

#account .account-avatar::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 16px;
  left: 50%;
  bottom: 6px;
  border-radius: 16px 16px 9px 9px;
  background: rgba(255, 255, 255, 0.94);
  transform: translateX(-50%);
}

#vip .music-worker-side {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
}

#vip .music-position-icon {
  width: 58px !important;
  height: 58px !important;
  border: 1px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 7px 16px rgba(82, 105, 132, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

#vip .music-worker-side .button-system-icon {
  display: none;
}

#vip .music-worker-side button,
#vip .joined-state {
  display: grid;
  width: 68px;
  min-width: 68px;
  height: 25px;
  min-height: 25px !important;
  place-items: center;
  padding: 1px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #a879b8 !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.88)) padding-box,
    linear-gradient(90deg, #ef9fc4, #d8c9e9 50%, #74cce5) border-box !important;
  box-shadow:
    0 3px 8px rgba(76, 98, 122, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}

#home .shortcut-reference-art {
  background: rgba(255, 255, 255, 0.9) !important;
}

#home .shortcut-reference-art .icon,
#home .shortcut-reference-art .icon::before,
#home .shortcut-reference-art .icon::after {
  background-image: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
}

#home .shortcut-reference-art .icon {
  color: #77a8ff !important;
}

#home .shortcut-line-svg {
  filter: none !important;
}

#home .shortcut-line-svg g {
  stroke: #77a8ff !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* The later experimental global design-system pass is intentionally disabled.
   Component updates remain, while the original PeerMusic visual foundation wins. */
@media (min-width: 99999px) {
/* Fixed site-wide visual specification. */
:root {
  --pm-pink: #FFD7F2;
  --pm-pink-deep: #F7B9E8;
  --pm-blue: #D8F6FF;
  --pm-blue-deep: #BCEEFF;
  --pm-blend: #F3F7FF;
  --pm-glass: rgba(255, 255, 255, 0.86);
  --pm-card-radius: 22px;
  --pm-card-shadow: 0 8px 25px rgba(160, 180, 255, 0.12);
  --pm-card-border: linear-gradient(90deg, var(--pm-pink-deep), var(--pm-blend) 50%, var(--pm-blue-deep));
  --glass: var(--pm-glass);
  --glass-strong: var(--pm-glass);
  --shadow: var(--pm-card-shadow);
  --red: var(--pm-pink-deep);
  --coral: var(--pm-pink);
  --cyan: var(--pm-blue-deep);
  --mint: var(--pm-blue);
}

.glass-panel,
.glass-card,
.shortcut-reference-art,
#tasks .video-card,
.daily-task-card,
.music-worker-card {
  border: 1px solid transparent !important;
  border-radius: var(--pm-card-radius) !important;
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box !important;
  box-shadow: var(--pm-card-shadow) !important;
  backdrop-filter: blur(18px) saturate(0.82);
  -webkit-backdrop-filter: blur(18px) saturate(0.82);
}

.glass-panel::before,
.glass-card::before {
  content: none;
}

.home-hero {
  padding: 10px;
}

.peer-brand-fixed {
  min-height: 88px;
  margin-bottom: 8px;
  padding: 7px 16px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.peer-hero-slider {
  border: 1px solid transparent;
  border-radius: var(--pm-card-radius);
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box;
  box-shadow: var(--pm-card-shadow);
}

.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  border-radius: calc(var(--pm-card-radius) - 5px);
  filter: saturate(0.72) brightness(1.045) contrast(0.96);
}

.shortcut-line-svg {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 44px;
  height: 44px;
  overflow: visible;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 4px rgba(247, 185, 232, 0.32))
    drop-shadow(0 0 5px rgba(188, 238, 255, 0.3));
}

.daily-task-panel {
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box !important;
}

.daily-task-card {
  min-height: 232px;
}

.daily-calendar,
.daily-gradient-button {
  background: linear-gradient(90deg, var(--pm-pink-deep), var(--pm-blend) 50%, var(--pm-blue-deep)) !important;
  box-shadow: var(--pm-card-shadow) !important;
}

.daily-gradient-button {
  color: #596274;
}

#tasks .cover {
  height: 176px;
}

#tasks .cover::before {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 9px,
      rgba(188, 238, 255, 0.78) 9px 14px,
      transparent 14px 24px
    );
}

#tasks .cover::after {
  content: "♫";
  display: grid;
  width: 116px;
  height: 116px;
  left: 50%;
  top: 50%;
  right: auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 28px;
  color: rgba(108, 116, 143, 0.42);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.9), transparent 28%),
    linear-gradient(145deg, rgba(255, 215, 242, 0.76), rgba(243, 247, 255, 0.84) 50%, rgba(216, 246, 255, 0.78)) padding-box,
    var(--pm-card-border) border-box;
  box-shadow: var(--pm-card-shadow);
  font-size: 34px;
  transform: translate(-50%, -50%);
}

#tasks .play {
  width: 68px;
  height: 68px;
  border: 1px solid transparent;
  color: #7d718e;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(243, 247, 255, 0.76)) padding-box,
    var(--pm-card-border) border-box;
  box-shadow:
    var(--pm-card-shadow),
    0 0 0 8px rgba(255, 255, 255, 0.34);
}

#tasks .song-title {
  min-height: 52px;
  color: #465164;
  background: rgba(255, 255, 255, 0.72);
  border-top: 1px solid rgba(243, 247, 255, 0.96);
  text-align: left;
}

#tasks .song-title > div {
  display: grid;
  gap: 2px;
}

#tasks .song-title strong {
  color: #3f495b;
  font-size: 14px;
  line-height: 1.1;
}

#tasks .song-title small {
  color: #929ba8;
  font-size: 9px;
  font-weight: 650;
}

/* PeerMusic design-system consolidation. */
:root {
  --pm-space-1: 8px;
  --pm-space-2: 12px;
  --pm-space-3: 16px;
  --pm-space-4: 24px;
  --pm-card-radius: 20px;
  --pm-control-radius: 14px;
  --pm-title: #344052;
  --pm-body: #5f6b7a;
  --pm-caption: #929ba8;
  --pm-motion-fast: 240ms;
  --pm-motion-slow: 5.6s;
}

html,
body {
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 215, 242, 0.48), transparent 32%),
    radial-gradient(circle at 88% 22%, rgba(216, 246, 255, 0.58), transparent 34%),
    linear-gradient(145deg, var(--pm-blend), #fff 48%, var(--pm-blend));
}

.phone-shell {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 215, 242, 0.34), transparent 34%),
    radial-gradient(circle at 88% 26%, rgba(216, 246, 255, 0.42), transparent 36%),
    rgba(243, 247, 255, 0.88);
  box-shadow: 0 16px 48px rgba(160, 180, 255, 0.16);
}

.screen {
  padding: var(--pm-space-3) var(--pm-space-2) 104px;
}

.shortcut-grid,
.daily-task-grid,
.task-pair,
.stats-row {
  gap: var(--pm-space-2);
}

.reward-list,
.video-list,
.vip-list,
.reward-groups {
  gap: var(--pm-space-2);
}

.section-head,
.daily-task-title,
.reward-group-head,
.vip-head,
.profile-row {
  gap: var(--pm-space-2);
}

.reward-group,
.daily-task-panel,
.task-progress-card,
.music-worker-card,
.profile-panel,
.income-hero {
  padding: var(--pm-space-3);
}

.glass-panel,
.glass-card,
.shortcut-reference-art,
#tasks .video-card,
.daily-task-card,
.music-worker-card,
.peer-hero-slider {
  border-radius: var(--pm-card-radius) !important;
}

.glass-panel::after,
.glass-card::after,
.shortcut-reference-art::after,
#tasks .video-card::after,
.music-worker-card::after {
  content: "";
  position: absolute;
  z-index: 6;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--pm-card-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.24;
  pointer-events: none;
  animation: pm-border-breathe var(--pm-motion-slow) ease-in-out infinite;
}

.shortcut-reference-art::before {
  content: none;
}

.section-head h2,
.topbar h1,
.daily-task-title h2,
.task-progress-card h2,
.reward-group-head h3,
.music-worker-copy h2,
.membership-title h1 {
  margin: 0;
  color: var(--pm-title);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.daily-task-card h3,
.reward-card h3,
.mini-task h3,
.vip-card h2 {
  color: var(--pm-title);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
}

.daily-task-card p,
.reward-card p,
.music-worker-copy p,
.vip-card p,
.mini-task p {
  color: var(--pm-body);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.45;
}

.bonus-rule,
.invite-count,
.player-timeline,
.song-title small,
.vip-card li {
  color: var(--pm-caption);
  font-size: 10px;
  line-height: 1.4;
}

button {
  transition:
    transform var(--pm-motion-fast) ease,
    box-shadow var(--pm-motion-fast) ease,
    background-color var(--pm-motion-fast) ease,
    color var(--pm-motion-fast) ease;
}

.primary,
.tiny-action,
.daily-gradient-button,
.mini-task > button,
.task-actions button,
.music-worker-side button,
.joined-state {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  border-radius: 999px !important;
  color: #4f5b6d !important;
  background: linear-gradient(90deg, var(--pm-pink-deep), var(--pm-blend) 50%, var(--pm-blue-deep)) !important;
  box-shadow: var(--pm-card-shadow) !important;
  font-size: 12px;
  font-weight: 800;
}

.primary:hover,
.tiny-action:hover,
.daily-gradient-button:hover,
.mini-task > button:hover,
.task-actions button:hover,
.music-worker-side button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(160, 180, 255, 0.18) !important;
}

.primary:active,
.tiny-action:active,
.daily-gradient-button:active,
.mini-task > button:active,
.task-actions button:active,
.music-worker-side button:active {
  transform: translateY(0) scale(0.985);
}

.round-back,
.mini-actions button {
  border: 1px solid transparent;
  border-radius: var(--pm-control-radius);
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box;
  box-shadow: var(--pm-card-shadow);
}

.daily-task-panel {
  margin-top: var(--pm-space-2);
  padding: var(--pm-space-2);
}

.daily-task-title {
  margin-bottom: var(--pm-space-2);
}

.daily-task-card {
  padding: var(--pm-space-2);
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box !important;
}

.daily-task-card h3 {
  color: var(--pm-title);
}

.daily-calendar {
  width: 28px;
  height: 28px;
  border-radius: var(--pm-space-1);
}

.shortcut-reference-art {
  background:
    linear-gradient(var(--pm-glass), var(--pm-glass)) padding-box,
    var(--pm-card-border) border-box !important;
}

.shortcut-reference-art b {
  color: var(--pm-title);
  font-size: 10px;
  font-weight: 800;
}

.peer-hero-slider,
.peer-hero-slide,
.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  border-radius: var(--pm-card-radius);
}

.peer-hero-track {
  transition-duration: 650ms;
}

.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  filter: saturate(0.7) brightness(1.04) contrast(0.96);
}

.earn-strip::after,
.daily-gradient-button::after {
  animation: none;
}

.nav-item.active::after {
  background: var(--pm-card-border);
  animation: pm-border-breathe var(--pm-motion-slow) ease-in-out infinite;
}

@keyframes pm-border-breathe {
  0%,
  100% {
    opacity: 0.2;
    filter: brightness(0.98);
  }
  50% {
    opacity: 0.62;
    filter: brightness(1.06);
  }
}
}

/* Keep the confirmed content changes in the original visual language. */
.shortcut-line-svg {
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 50%;
  width: 42px;
  height: 42px;
  overflow: visible;
  transform: translateX(-50%);
  filter:
    drop-shadow(0 0 4px rgba(239, 132, 181, 0.22))
    drop-shadow(0 0 5px rgba(111, 208, 229, 0.2));
}

#tasks .cover {
  height: 176px;
}

#tasks .cover::after {
  content: "♫";
  position: absolute;
  display: grid;
  width: 112px;
  height: 112px;
  left: 50%;
  top: 50%;
  right: auto;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 26px;
  color: rgba(104, 112, 142, 0.4);
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.88), transparent 28%),
    linear-gradient(145deg, rgba(246, 190, 218, 0.5), rgba(244, 249, 255, 0.8) 50%, rgba(164, 224, 239, 0.52));
  box-shadow:
    0 12px 28px rgba(75, 104, 133, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-size: 32px;
  transform: translate(-50%, -50%);
}

#tasks .play {
  width: 66px;
  height: 66px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  color: #b291c9;
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.32),
    0 10px 24px rgba(88, 207, 255, 0.15);
}

#tasks .song-title {
  min-height: 52px;
  color: #465164;
  background: linear-gradient(90deg, rgba(246, 190, 218, 0.72), rgba(224, 219, 237, 0.68) 50%, rgba(164, 224, 239, 0.74));
  text-align: left;
}

#tasks .song-title > div {
  display: grid;
  gap: 2px;
}

#tasks .song-title strong {
  color: #3f495b;
  font-size: 14px;
  line-height: 1.1;
}

#tasks .song-title small {
  color: #7f8996;
  font-size: 9px;
  font-weight: 650;
}

/* Final cross-page visual language based on the approved reference screen. */
:root {
  --reference-pink: #efb2cf;
  --reference-pink-soft: #f8dbe8;
  --reference-blue: #8fd3e8;
  --reference-blue-soft: #d9f2fa;
  --reference-mix: #e8e1f0;
  --reference-ink: #283545;
  --reference-muted: #778494;
  --reference-radius: 20px;
  --reference-shadow:
    0 8px 16px rgba(72, 101, 130, 0.16),
    0 2px 4px rgba(72, 101, 130, 0.1),
    -2px 0 8px rgba(239, 178, 207, 0.12),
    2px 0 8px rgba(143, 211, 232, 0.14);
  --reference-border: linear-gradient(
    90deg,
    var(--reference-pink) 0%,
    var(--reference-pink-soft) 28%,
    var(--reference-mix) 50%,
    var(--reference-blue-soft) 72%,
    var(--reference-blue) 100%
  );
}

html,
body {
  background:
    radial-gradient(circle at 12% 12%, rgba(143, 211, 232, 0.26), transparent 31%),
    radial-gradient(circle at 84% 88%, rgba(239, 178, 207, 0.24), transparent 34%),
    linear-gradient(155deg, #eaf7fc 0%, #f7fbfd 48%, #fff3f7 100%);
}

.phone-shell {
  background:
    radial-gradient(circle at 6% 18%, rgba(143, 211, 232, 0.22), transparent 32%),
    radial-gradient(circle at 92% 78%, rgba(239, 178, 207, 0.22), transparent 34%),
    linear-gradient(155deg, #e9f7fc 0%, #f8fbfd 48%, #fff3f7 100%);
  box-shadow:
    0 26px 68px rgba(62, 87, 112, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

.screen {
  padding: 16px 14px 104px;
}

.glass-panel,
.glass-card,
.shortcut-reference-art,
.music-worker-card,
#tasks .video-card {
  border: 1px solid transparent !important;
  border-radius: var(--reference-radius) !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(252, 254, 255, 0.88)) padding-box,
    var(--reference-border) border-box !important;
  box-shadow: var(--reference-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.glass-panel::before,
.glass-card::before {
  content: none;
}

.tone-blue,
.tone-mint,
.tone-gold,
.tone-violet {
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(252, 254, 255, 0.88)) padding-box,
    var(--reference-border) border-box !important;
}

.section-head h2,
.topbar h1,
.daily-task-title h2,
.task-progress-card h2,
.reward-group-head h3,
.music-worker-copy h2,
.membership-title h1 {
  color: var(--reference-ink);
}

.glass-panel p,
.glass-card p,
.bonus-rule,
.music-worker-copy p {
  color: var(--reference-muted);
}

.home-hero {
  padding: 12px;
  overflow: hidden;
}

.peer-brand-fixed {
  min-height: 92px;
  margin-bottom: 10px;
  padding: 8px 14px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.peer-brand-fixed > img {
  width: 70px;
  height: 70px;
}

.peer-brand-fixed-copy strong {
  font-size: 33px;
  background: linear-gradient(90deg, #ed9abc, #c5b6df 50%, #72c8e2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 3px 5px rgba(77, 94, 117, 0.12);
}

.peer-brand-fixed-copy strong span:last-child {
  color: inherit;
}

.peer-brand-fixed-copy small {
  color: #252d39;
  font-size: 11px;
  font-weight: 900;
}

.peer-hero-slider {
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.84)) padding-box,
    var(--reference-border) border-box;
  box-shadow: var(--reference-shadow);
}

.peer-hero-slide,
.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  border-radius: 16px;
}

.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  filter: saturate(0.88) brightness(1.02) contrast(0.98);
}

.shortcut-grid {
  gap: 12px;
  margin-top: 14px;
}

.shortcut-reference-art {
  min-height: 88px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(247, 252, 255, 0.86)) padding-box,
    var(--reference-border) border-box !important;
}

.shortcut-reference-art::before {
  content: none;
}

.shortcut-reference-art::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  background: var(--reference-border);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0.42;
  pointer-events: none;
  animation: reference-border-breathe 5.6s ease-in-out infinite;
}

.shortcut-line-svg {
  top: 11px;
  width: 43px;
  height: 43px;
  filter:
    drop-shadow(0 0 4px rgba(239, 178, 207, 0.34))
    drop-shadow(0 0 5px rgba(143, 211, 232, 0.34));
}

.shortcut-reference-art b {
  bottom: 7px;
  color: var(--reference-ink);
  font-size: 10px;
  font-weight: 850;
}

.daily-task-panel,
.task-progress-card,
.reward-group,
.music-worker-card,
.vip-card,
.profile-panel,
.income-hero {
  padding: 16px;
}

.daily-task-panel {
  margin-top: 14px;
}

.daily-task-grid {
  gap: 14px;
}

.daily-task-card {
  min-height: 232px;
  padding: 12px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(252, 254, 255, 0.92)) padding-box,
    var(--reference-border) border-box !important;
}

.daily-task-card h3 {
  color: #7566c7;
}

.daily-calendar,
.daily-gradient-button,
.primary,
.tiny-action,
.mini-task > button,
.music-worker-side button,
.joined-state {
  border: 1px solid rgba(255, 255, 255, 0.92) !important;
  color: white !important;
  background: linear-gradient(90deg, #eca9c9 0%, #d5bde4 48%, #80cfe6 100%) !important;
  box-shadow:
    0 6px 13px rgba(87, 110, 139, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.daily-gradient-button,
.primary,
.tiny-action,
.mini-task > button,
.music-worker-side button {
  border-radius: 999px !important;
  font-weight: 850;
}

.reward-list,
.video-list,
.vip-list,
.reward-groups {
  gap: 14px;
}

.reward-card,
.music-worker-card,
.vip-card {
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(252, 254, 255, 0.9)) padding-box,
    var(--reference-border) border-box !important;
}

#tasks .cover {
  background:
    radial-gradient(circle at 25% 34%, rgba(239, 178, 207, 0.24), transparent 28%),
    radial-gradient(circle at 75% 66%, rgba(143, 211, 232, 0.26), transparent 28%),
    rgba(255, 255, 255, 0.92);
}

#tasks .play {
  border: 1px solid transparent;
  color: #9a78b6;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(249, 252, 255, 0.76)) padding-box,
    var(--reference-border) border-box;
  box-shadow:
    0 0 0 8px rgba(255, 255, 255, 0.3),
    0 8px 18px rgba(85, 109, 137, 0.15);
}

#tasks .song-title {
  color: var(--reference-ink);
  background: linear-gradient(90deg, #efb2cf, #dfcae7 50%, #8fd3e8);
}

.bottom-nav {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(255, 255, 255, 0.92), rgba(249, 253, 255, 0.88)) padding-box,
    var(--reference-border) border-box;
  box-shadow:
    0 -6px 20px rgba(73, 98, 125, 0.12),
    0 8px 18px rgba(73, 98, 125, 0.14);
}

.nav-item.active {
  color: #4d7994;
  background: linear-gradient(145deg, rgba(216, 246, 255, 0.72), rgba(255, 215, 242, 0.64));
}

.nav-item.active::after {
  background: linear-gradient(90deg, transparent, #efb2cf, #8fd3e8, transparent);
}

button {
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

button:active {
  transform: scale(0.98);
}

@keyframes reference-border-breathe {
  0%,
  100% {
    opacity: 0.3;
    filter: brightness(0.98);
  }
  50% {
    opacity: 0.72;
    filter: brightness(1.08);
  }
}

/* Locked PeerMusic Design System — use these tokens for every current and future page. */
:root {
  --ds-primary: #77A8FF;
  --ds-secondary: #8ED9FF;
  --ds-accent: #FFC9D9;
  --ds-background: #F6F8FD;
  --ds-card: #FFFFFF;
  --ds-gradient: linear-gradient(135deg, #77A8FF, #8ED9FF, #FFC9D9);
  --ds-border: rgba(255, 255, 255, 0.45);
  --ds-radius-card: 28px;
  --ds-radius-button: 18px;
  --ds-space-page: 24px;
  --ds-space-module: 24px;
  --ds-space-card: 16px;
  --ds-space-control: 12px;
  --ds-shadow:
    0 10px 30px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --red: var(--ds-primary);
  --coral: var(--ds-accent);
  --cyan: var(--ds-secondary);
  --gold: var(--ds-accent);
  --green: var(--ds-secondary);
  --mint: var(--ds-secondary);
  --violet: var(--ds-primary);
}

html,
body {
  color: #243042;
  background:
    radial-gradient(circle at 14% 12%, rgba(142, 217, 255, 0.2), transparent 32%),
    radial-gradient(circle at 86% 86%, rgba(255, 201, 217, 0.2), transparent 34%),
    var(--ds-background);
  font-family:
    "HarmonyOS Sans",
    "MiSans",
    "SF Pro Display",
    "SF Pro Text",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}

.phone-shell {
  background:
    radial-gradient(circle at 12% 15%, rgba(142, 217, 255, 0.16), transparent 34%),
    radial-gradient(circle at 88% 82%, rgba(255, 201, 217, 0.16), transparent 36%),
    var(--ds-background);
}

.screen {
  padding: var(--ds-space-page) var(--ds-space-page) 124px;
}

.screen > * + * {
  margin-top: var(--ds-space-module);
}

.glass-panel,
.glass-card,
.shortcut-reference-art,
.music-worker-card,
#tasks .video-card,
.bottom-nav {
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-card) !important;
  background: var(--ds-card) !important;
  box-shadow: var(--ds-shadow) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 250ms ease,
    box-shadow 250ms ease;
}

.glass-panel,
.glass-card,
.music-worker-card {
  padding: 24px;
}

.glass-panel::before,
.glass-panel::after,
.glass-card::before,
.glass-card::after,
.shortcut-reference-art::before,
.shortcut-reference-art::after,
.music-worker-card::before,
.music-worker-card::after {
  content: none !important;
}

@media (hover: hover) {
  .glass-panel:hover,
  .glass-card:hover,
  .shortcut-reference-art:hover,
  .music-worker-card:hover,
  #tasks .video-card:hover {
    transform: translateY(-3px) scale(1.002);
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
  }
}

.glass-panel:active,
.glass-card:active,
.shortcut-reference-art:active,
.music-worker-card:active {
  transform: translateY(1px) scale(0.99);
}

.shortcut-grid,
.daily-task-grid,
.task-pair,
.reward-items {
  gap: var(--ds-space-card);
}

.reward-list,
.video-list,
.vip-list,
.reward-groups {
  gap: var(--ds-space-module);
}

.home-hero,
.daily-task-panel,
.daily-task-card,
.task-progress-card,
.reward-group,
.reward-card,
.music-worker-card,
.vip-card,
.profile-panel,
.income-hero {
  padding: 24px !important;
}

.peer-brand-fixed {
  margin: 0 0 24px;
  padding: 0;
}

.peer-hero-slider {
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-card);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
  touch-action: pan-y;
}

.peer-hero-slide,
.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  border-radius: calc(var(--ds-radius-card) - 4px);
}

.peer-hero-track {
  transition-duration: 500ms;
}

.peer-hero-dots {
  gap: 8px;
}

.peer-hero-dots button {
  width: 8px;
  height: 8px;
  border-color: rgba(255, 255, 255, 0.8);
  background: rgba(119, 168, 255, 0.36);
  transition: width 200ms ease, background 200ms ease;
}

.peer-hero-dots button.active {
  background: var(--ds-gradient);
}

.shortcut-reference-art {
  min-height: 112px;
  padding: 24px !important;
}

.shortcut-line-svg,
.nav-icon,
.button-system-icon,
.music-position-icon {
  width: 24px !important;
  height: 24px !important;
}

.shortcut-line-svg {
  top: 24px;
  filter: drop-shadow(0 0 5px rgba(119, 168, 255, 0.22));
}

.shortcut-reference-art b {
  bottom: 18px;
  color: #243042;
  font-size: 13px;
  line-height: 1.2;
}

.button-system-icon {
  display: inline-grid;
  flex: 0 0 24px;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}

.primary,
.tiny-action,
.daily-gradient-button,
.mini-task > button,
.task-actions button,
.music-worker-side button,
.joined-state {
  display: inline-flex;
  min-height: 52px !important;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-control);
  padding: 0 20px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-button) !important;
  color: #fff !important;
  background: var(--ds-gradient) !important;
  box-shadow: var(--ds-shadow) !important;
  font-size: 16px;
  font-weight: 800;
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    filter 250ms ease;
}

.primary:hover,
.tiny-action:hover,
.daily-gradient-button:hover,
.mini-task > button:hover,
.task-actions button:hover,
.music-worker-side button:hover {
  transform: scale(1.02);
  filter: brightness(1.03);
}

.primary:active,
.tiny-action:active,
.daily-gradient-button:active,
.mini-task > button:active,
.task-actions button:active,
.music-worker-side button:active {
  transform: scale(0.97);
}

.round-back,
.mini-actions button {
  width: 52px;
  height: 52px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
}

h1,
.topbar h1 {
  color: #243042;
  font-size: 32px;
  font-weight: 850;
  line-height: 1.2;
}

h2,
.section-head h2,
.daily-task-title h2,
.task-progress-card h2 {
  color: #243042;
  font-size: 26px;
  font-weight: 820;
  line-height: 1.25;
}

h3,
.reward-group-head h3,
.music-worker-copy h2 {
  color: #243042;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}

.daily-task-card h3,
.reward-card h3,
.mini-task h3,
.song-title strong {
  color: #243042;
  font-size: 18px;
  font-weight: 780;
  line-height: 1.35;
}

p,
.daily-task-card p,
.reward-card p,
.music-worker-copy p,
.vip-card p,
.mini-task p {
  color: #5f6c7d;
  font-size: 16px;
  line-height: 1.5;
}

small,
.bonus-rule,
.player-timeline,
.song-title small,
.vip-card li,
.nav-item b {
  color: #8a95a5;
  font-size: 13px;
  line-height: 1.4;
}

input,
textarea,
select {
  min-height: 52px;
  padding: 0 16px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-button);
  color: #243042;
  background: var(--ds-card);
  box-shadow: var(--ds-shadow);
  font: inherit;
}

.daily-task-panel,
.daily-task-card,
.reward-group,
.reward-card,
.music-worker-card,
.vip-card,
#tasks .video-card {
  background: var(--ds-card) !important;
}

.daily-calendar,
.badge,
.joined-state,
.song-title,
.earn-strip {
  background: var(--ds-gradient) !important;
}

#tasks .play {
  border: 1px solid var(--ds-border);
  color: var(--ds-primary);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--ds-shadow);
  transition: transform 200ms ease;
}

#tasks .play:hover {
  transform: scale(1.02);
}

#tasks .play:active {
  transform: scale(0.97);
}

.bottom-nav {
  padding: 12px;
}

.nav-item {
  border-radius: 18px;
  transition:
    transform 300ms ease,
    background 300ms ease,
    color 300ms ease;
}

.nav-item.active {
  color: var(--ds-primary);
  background: linear-gradient(135deg, rgba(119, 168, 255, 0.14), rgba(255, 201, 217, 0.16));
}

.nav-item.active::after {
  background: var(--ds-gradient);
  animation: ds-breathe 5.6s ease-in-out infinite;
}

.screen.active {
  animation: ds-screen-in 300ms ease both;
}

@keyframes ds-screen-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ds-breathe {
  0%,
  100% {
    opacity: 0.52;
    filter: brightness(0.98);
  }
  50% {
    opacity: 1;
    filter: brightness(1.05);
  }
}

/* First-screen design language extended to every customized page. */
.home-hero,
.peer-hero-slider,
.daily-task-panel,
.daily-task-card,
.reward-group,
.reward-card,
.music-worker-card,
.task-progress-card,
#tasks .video-card {
  border: 1px solid rgba(255, 255, 255, 0.82);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(241, 250, 255, 0.54) 46%, rgba(255, 246, 249, 0.46)),
    rgba(255, 255, 255, 0.52);
  box-shadow:
    0 18px 50px rgba(83, 108, 133, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.72) inset,
    inset 0 16px 40px rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.home-hero {
  padding: 10px;
  border-radius: 28px;
  overflow: hidden;
}

.peer-brand-fixed {
  min-height: 92px;
  margin-bottom: 8px;
  padding: 8px 16px 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.peer-brand-fixed > img {
  filter: saturate(0.88) brightness(1.03);
}

.peer-brand-fixed-copy strong {
  color: #6c8299;
  text-shadow: 0 3px 6px rgba(85, 105, 128, 0.18);
}

.peer-brand-fixed-copy strong span:last-child {
  color: #df8ead;
}

.peer-brand-fixed-copy small {
  color: #586677;
}

.peer-hero-slider {
  border-radius: 22px;
  box-shadow:
    0 10px 24px rgba(83, 108, 133, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.peer-hero-slide-secondary .peer-hero-image,
.peer-hero-slide-primary .peer-hero-image,
.peer-hero-slide-tertiary .peer-hero-image {
  border-radius: 18px;
  filter: saturate(0.88) brightness(1.025);
}

.peer-hero-slide-primary .peer-hero-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 516 / 205;
  object-fit: contain;
  object-position: center;
  transform: none;
}

.peer-hero-slide-primary {
  padding: 6px;
  background:
    radial-gradient(circle at 16% 28%, rgba(246, 190, 218, 0.18), transparent 34%),
    radial-gradient(circle at 86% 72%, rgba(164, 224, 239, 0.2), transparent 36%),
    rgba(245, 245, 255, 0.42);
}

.shortcut-reference-art {
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(241, 250, 255, 0.52) 48%, rgba(255, 246, 249, 0.44)),
    rgba(255, 255, 255, 0.5);
  box-shadow:
    0 12px 28px rgba(83, 108, 133, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

.shortcut-reference-art .icon {
  visibility: visible;
}

.shortcut-reference-art b {
  color: var(--ink);
  font-family: inherit;
  font-size: 10px;
  font-weight: 850;
}

.daily-task-panel,
.reward-group,
.task-progress-card,
.music-worker-card {
  border-radius: 24px;
  padding: 16px;
}

.daily-task-grid,
.reward-items,
.vip-list,
.video-list {
  gap: 12px;
}

.daily-task-card,
.reward-card,
#tasks .video-card {
  border-radius: 20px;
}

.daily-task-title h2,
.reward-group-head h3,
.task-progress-card h2,
.music-worker-copy h2 {
  color: var(--ink);
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
}

.daily-task-card h3,
.reward-card h3 {
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
}

.daily-task-card p,
.reward-card p,
.music-worker-copy p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.daily-calendar,
.daily-gradient-button {
  color: white;
  background: linear-gradient(90deg, var(--cyan), var(--mint) 52%, var(--coral));
  box-shadow:
    0 10px 24px rgba(88, 207, 255, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.daily-gradient-button {
  border: 2px solid rgba(255, 255, 255, 0.88);
  font-weight: 850;
}

.music-worker-side button,
.joined-state {
  background: rgba(255, 255, 255, 0.76);
  box-shadow:
    inset 0 0 0 1px rgba(239, 132, 181, 0.34),
    0 4px 10px rgba(68, 91, 112, 0.1);
}

.bonus-rule {
  color: #536171;
  background: rgba(255, 255, 255, 0.46);
}

.player-orbit {
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0 35%, transparent 37%),
    radial-gradient(circle, transparent 0 52%, rgba(220, 209, 233, 0.78) 54% 57%, transparent 59%),
    conic-gradient(from 210deg, rgba(117, 219, 255, 0.78), rgba(143, 134, 255, 0.62) 38%, rgba(239, 132, 181, 0.74) 72%, rgba(117, 219, 255, 0.78));
  box-shadow:
    0 8px 20px rgba(83, 108, 133, 0.14),
    0 0 0 8px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.22s ease,
    box-shadow 0.22s ease,
    filter 0.22s ease;
}

.player-orbit:hover,
.player-orbit:focus-visible {
  outline: none;
  filter: brightness(1.04);
  transform: scale(1.04);
  box-shadow:
    0 10px 24px rgba(83, 108, 133, 0.16),
    0 0 0 9px rgba(255, 255, 255, 0.42),
    0 0 18px rgba(117, 219, 255, 0.18);
}

.player-orbit i {
  border-left-color: #9c7bc8;
}

.player-orbit.is-playing i {
  display: grid;
  width: 18px;
  height: 23px;
  grid-template-columns: repeat(2, 5px);
  justify-content: space-between;
  margin: 0;
  border: 0;
}

.player-orbit.is-playing i::before,
.player-orbit.is-playing i::after {
  content: "";
  height: 23px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d88eb0, #8d7ac3 52%, #70c7dc);
  box-shadow: 0 2px 6px rgba(106, 102, 153, 0.18);
}

.player-wave {
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.music-player-visual.is-playing .player-wave {
  animation: player-wave-active 1.15s ease-in-out infinite;
  filter: saturate(1.05);
}

.music-player-visual.is-playing .player-wave-right {
  animation-delay: -0.42s;
}

.music-player-visual.is-playing .player-wave-left {
  animation-name: player-wave-active-left;
}

@keyframes player-wave-active {
  0%,
  100% {
    opacity: 0.48;
    transform: scaleY(0.72);
  }
  50% {
    opacity: 0.92;
    transform: scaleY(1.08);
  }
}

@keyframes player-wave-active-left {
  0%,
  100% {
    opacity: 0.48;
    transform: scaleX(-1) scaleY(0.72);
  }
  50% {
    opacity: 0.92;
    transform: scaleX(-1) scaleY(1.08);
  }
}

/* Home-page proportions matched to the approved reference screen. */
#home.screen {
  padding: 12px 30px 104px !important;
}

#home .home-hero {
  padding: 0 !important;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

#home .peer-brand-fixed {
  min-height: 96px;
  margin: 0 0 8px !important;
  padding: 4px 6px !important;
}

#home .peer-brand-fixed > img {
  width: 64px;
  height: 64px;
}

#home .peer-brand-fixed > .peer-brand-lockup-image {
  width: min(100%, 258px);
  height: auto;
  max-height: 72px;
  object-fit: contain;
  filter: saturate(0.92) brightness(1.02);
}

#home .peer-brand-fixed-copy strong {
  font-size: 31px;
}

#home .peer-brand-fixed-copy small {
  font-size: 10px;
}

#home .peer-hero-slider {
  aspect-ratio: 2.33 / 1;
  border-radius: 18px;
}

#home .peer-hero-slide,
#home .peer-hero-slide-secondary .peer-hero-image,
#home .peer-hero-slide-primary .peer-hero-image,
#home .peer-hero-slide-tertiary .peer-hero-image {
  border-radius: 16px;
}

#home .peer-hero-slide-primary {
  padding: 6px;
}

#home .shortcut-grid {
  gap: 10px !important;
  margin-top: 12px;
}

#home .shortcut-reference-art {
  min-height: 72px !important;
  padding: 7px 4px !important;
  border-radius: 16px;
}

#home .shortcut-reference-art .icon {
  width: 30px;
  height: 30px;
  border-radius: 11px;
  transform: translateY(-5px);
}

#home .shortcut-reference-art b {
  bottom: 5px;
  min-height: 18px;
  font-size: 9px;
}

#home .daily-task-panel {
  margin-top: 24px;
  padding: 14px !important;
  border-radius: 22px;
}

#home .daily-task-title {
  margin-bottom: 10px;
}

#home .daily-task-grid {
  gap: 12px !important;
}

#home .daily-task-card {
  min-height: 154px !important;
  padding: 10px !important;
  border-radius: 18px;
}

#home .daily-task-card h3 {
  font-size: 13px;
}

#home .daily-task-card p {
  margin-top: 2px;
  font-size: 9px;
}

#home .music-player-visual {
  min-height: 68px;
}

#home .player-orbit {
  width: 58px;
  height: 58px;
  flex-basis: 58px;
}

#home .player-orbit::before {
  inset: 6px;
}

#home .player-orbit::after {
  inset: 13px;
}

#home .player-orbit i {
  border-top-width: 9px;
  border-bottom-width: 9px;
  border-left-width: 14px;
}

#home .player-wave {
  width: 25px;
  height: 34px;
}

#home .player-timeline {
  margin-bottom: 5px;
}

#home .share-earn-visual {
  min-height: 84px;
  gap: 6px;
}

#home .share-chain-large {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 24px;
}

#home .qr-large {
  width: 54px;
  height: 54px;
  border-width: 5px;
}

#home .daily-gradient-button {
  min-height: 28px;
}

/* Keep the original light outlines across the complete interface. */
#home .home-hero {
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 22px;
  padding: 7px !important;
  background: transparent;
  box-shadow:
    0 12px 28px rgba(83, 108, 133, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.glass-panel,
.glass-card,
.daily-task-panel,
.daily-task-card,
.reward-group,
.reward-card,
.music-worker-card,
.task-progress-card,
#tasks .video-card {
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
}

.peer-hero-slider,
.shortcut-reference-art {
  border-width: 1px !important;
  border-style: solid !important;
}

/* Logo lockup sits directly on the page; only the banner keeps its outline. */
#home .home-hero {
  padding: 7px !important;
  border: 1px solid transparent !important;
  border-radius: 22px !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#home .peer-brand-fixed {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Match the share card to the centered music-player composition. */
#home .share-earn-visual {
  min-height: 68px;
  margin: 2px -4px 0;
  gap: 0;
  padding-top: 0;
}

#home .share-orbit {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  cursor: pointer;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.98) 0 35%, transparent 37%),
    radial-gradient(circle, transparent 0 52%, rgba(220, 209, 233, 0.78) 54% 57%, transparent 59%),
    conic-gradient(from 210deg, rgba(117, 219, 255, 0.72), rgba(143, 134, 255, 0.56) 38%, rgba(239, 132, 181, 0.66) 72%, rgba(117, 219, 255, 0.72));
  box-shadow:
    0 8px 20px rgba(83, 108, 133, 0.14),
    0 0 0 8px rgba(255, 255, 255, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

#home .share-orbit::before,
#home .share-orbit::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 50%;
  inset: 6px;
}

#home .share-orbit::after {
  inset: 13px;
  border-color: rgba(196, 218, 235, 0.76);
}

#home .share-orbit-mark {
  position: relative;
  z-index: 2;
  color: #a999d5;
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 2px 5px rgba(111, 111, 159, 0.16);
}

#home .share-orbit:hover,
#home .share-orbit:focus-visible,
#home .share-orbit.is-sharing {
  outline: none;
  filter: brightness(1.04);
  transform: scale(1.04);
}

#home .share-orbit.is-sharing {
  animation: shareOrbitConfirm 0.7s ease-in-out 2 alternate;
}

#home .share-invite-count {
  margin: 0 2px 5px;
  color: #83909e;
  font-size: 8px;
  text-align: center;
}

#home .share-invite-count strong {
  color: #d68eae;
  font-size: 10px;
}

@keyframes shareOrbitConfirm {
  from {
    filter: brightness(1);
  }
  to {
    filter: brightness(1.08);
  }
}

/* Eight shortcut cards: white outer rim with a soft pink-to-blue inner outline. */
#home .shortcut-reference-art {
  position: relative;
  isolation: isolate;
  border: 2px solid transparent !important;
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.82),
      rgba(241, 250, 255, 0.52) 48%,
      rgba(255, 246, 249, 0.44)
    ) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, 0.72) 0%,
      rgba(255, 215, 242, 0.5) 28%,
      rgba(243, 247, 255, 0.58) 50%,
      rgba(216, 246, 255, 0.52) 72%,
      rgba(188, 238, 255, 0.76) 100%
    ) border-box !important;
  box-shadow:
    0 7px 18px rgba(91, 116, 142, 0.13),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72) !important;
}

#home .shortcut-reference-art::before {
  content: "" !important;
  position: absolute;
  z-index: 0;
  inset: 2px;
  border-radius: calc(16px - 2px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(220, 237, 244, 0.28);
  pointer-events: none;
}

#home .shortcut-reference-art::after {
  content: none !important;
}

#home .shortcut-reference-art .icon {
  z-index: 1;
}

/* Slightly enlarge the banner while keeping its original proportions and centering it. */
#home .peer-hero-slider {
  width: calc(100% + 10px);
  max-width: none;
  margin-inline: -5px;
  align-self: center;
}

/* Task progress: soft glass treatment with a calm 40% reveal. */
#tasks .task-progress-card {
  position: relative;
  overflow: hidden;
  padding: 18px 18px 16px !important;
  border: 1px solid transparent !important;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(250, 253, 255, 0.84)) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, 0.6),
      rgba(243, 247, 255, 0.7) 50%,
      rgba(188, 238, 255, 0.68)
    ) border-box !important;
  box-shadow:
    0 8px 25px rgba(160, 180, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#tasks .task-progress-card::before {
  content: "";
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  top: -72px;
  right: -28px;
  background: radial-gradient(circle, rgba(216, 246, 255, 0.52), transparent 70%);
  pointer-events: none;
}

#tasks .task-progress-heading {
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}

#tasks .task-progress-heading h2 {
  margin: 0;
  font-size: 17px;
  text-align: left;
}

#tasks .task-progress-note {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 11px;
  color: #809bdc;
  font-size: 16px;
  font-weight: 900;
  background: linear-gradient(135deg, rgba(255, 215, 242, 0.68), rgba(216, 246, 255, 0.76));
  box-shadow: 0 5px 14px rgba(130, 154, 191, 0.12);
}

#tasks .task-progress-percent {
  min-width: 48px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  color: #66768a;
  font-size: 13px;
  font-weight: 850;
  text-align: center;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 4px 12px rgba(123, 146, 178, 0.1);
}

#tasks .task-progress-track {
  height: 18px;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 215, 242, 0.3), rgba(243, 247, 255, 0.72) 50%, rgba(216, 246, 255, 0.42));
  box-shadow:
    inset 0 2px 5px rgba(111, 132, 158, 0.1),
    0 1px 0 rgba(255, 255, 255, 0.82);
}

#tasks .task-progress-track span {
  position: relative;
  width: var(--progress);
  min-width: 0;
  overflow: hidden;
  background: linear-gradient(90deg, #f7b9e8 0%, #f3dff5 48%, #bceeff 100%);
  box-shadow: 0 2px 8px rgba(183, 177, 226, 0.2);
  transform: scaleX(0);
  transform-origin: left center;
  animation: taskProgressReveal 1.25s cubic-bezier(0.22, 0.72, 0.24, 1) 0.15s forwards;
}

#tasks .task-progress-track span i {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 12%, rgba(255, 255, 255, 0.62) 50%, transparent 88%);
  transform: translateX(-100%);
  animation: taskProgressSheen 3.8s ease-in-out 1.3s infinite;
}

#tasks .task-progress-meta {
  margin-top: 12px;
  color: #7a8796;
  font-size: 12px;
}

#tasks .task-progress-meta b {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

#tasks .task-progress-meta strong {
  color: #354153;
  font-size: 14px;
}

#tasks .task-progress-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

#tasks .task-progress-dot.is-complete {
  background: #e5a8d2;
  box-shadow: 0 0 0 3px rgba(247, 185, 232, 0.18);
}

#tasks .task-progress-dot.is-remaining {
  background: #a9ddec;
  box-shadow: 0 0 0 3px rgba(188, 238, 255, 0.22);
}

@keyframes taskProgressReveal {
  to {
    transform: scaleX(1);
  }
}

@keyframes taskProgressSheen {
  0%,
  46% {
    transform: translateX(-100%);
  }
  78%,
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  #tasks .task-progress-track span {
    animation: none;
    transform: scaleX(1);
  }

  #tasks .task-progress-track span i {
    animation: none;
  }
}

/* Compact song control: a real glass player button instead of a solid color strip. */
#tasks .song-control {
  position: relative;
  display: grid;
  min-height: 54px;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  gap: 10px;
  align-items: center;
  justify-content: stretch;
  margin: 8px;
  padding: 7px 10px;
  border: 1px solid transparent;
  border-radius: 17px;
  color: #344052;
  cursor: pointer;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(248, 252, 255, 0.72)) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, 0.66),
      rgba(243, 247, 255, 0.7) 50%,
      rgba(188, 238, 255, 0.72)
    ) border-box !important;
  box-shadow:
    0 7px 18px rgba(110, 135, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
  text-align: left;
  text-shadow: none;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    filter 180ms ease;
}

#tasks .song-control::before,
#tasks .song-control::after {
  content: none;
}

#tasks .song-control:focus-visible {
  outline: 2px solid rgba(143, 211, 232, 0.68);
  outline-offset: 2px;
}

#tasks .song-control:active {
  transform: scale(0.985);
}

#tasks .song-control-icon {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  color: #8e9ed1;
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.94) 0 45%, transparent 47%),
    conic-gradient(from 215deg, rgba(188, 238, 255, 0.76), rgba(247, 185, 232, 0.68), rgba(188, 238, 255, 0.76));
  box-shadow:
    0 5px 13px rgba(105, 132, 164, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.94);
}

#tasks .song-control-icon::before {
  content: "▶";
  margin-left: 2px;
  font-size: 12px;
  line-height: 1;
}

#tasks .song-control > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

#tasks .song-control strong {
  overflow: hidden;
  color: #354153;
  font-size: 13px;
  font-weight: 850;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tasks .song-control small {
  overflow: hidden;
  color: #8b97a6;
  font-size: 8px;
  font-weight: 650;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#tasks .song-control-equalizer {
  display: flex;
  height: 22px;
  gap: 3px;
  align-items: center;
  justify-content: center;
}

#tasks .song-control-equalizer i {
  width: 3px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f0b3d3, #a9ddec);
  transform-origin: center;
}

#tasks .song-control-equalizer i:nth-child(2) {
  height: 15px;
}

#tasks .song-control.is-playing {
  box-shadow:
    0 9px 22px rgba(110, 135, 166, 0.15),
    0 0 0 3px rgba(216, 246, 255, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

#tasks .song-control.is-playing .song-control-icon::before {
  content: "Ⅱ";
  margin-left: 0;
  font-size: 11px;
  font-weight: 900;
}

#tasks .song-control.is-playing .song-control-equalizer i {
  animation: songControlBeat 0.75s ease-in-out infinite alternate;
}

#tasks .song-control.is-playing .song-control-equalizer i:nth-child(2) {
  animation-delay: -0.36s;
}

#tasks .song-control.is-playing .song-control-equalizer i:nth-child(3) {
  animation-delay: -0.18s;
}

@keyframes songControlBeat {
  from {
    transform: scaleY(0.55);
  }
  to {
    transform: scaleY(1.15);
  }
}

/* Account overview: balanced 3 × 3 proportions with consistent internal rhythm. */
#account .overview-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

#account .metric {
  display: flex;
  min-width: 0;
  min-height: 118px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 13px 11px !important;
  border: 1px solid rgba(255, 255, 255, 0.84) !important;
  border-radius: 21px !important;
  background: rgba(255, 255, 255, 0.84) !important;
  box-shadow:
    0 8px 20px rgba(116, 138, 167, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#account .metric span {
  display: flex;
  min-height: 28px;
  align-items: flex-start;
  color: #657184;
  font-size: 9px;
  font-weight: 760;
  line-height: 1.25;
}

#account .metric b {
  margin-top: 7px;
  color: #253247;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
  letter-spacing: -0.035em;
}

#account .metric i {
  margin-top: 10px;
  color: #7bcff0;
  font-size: 12px;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  #tasks .song-control.is-playing .song-control-equalizer i {
    animation: none;
  }
}

/* Task header mirrors the membership header exactly; the removed back button
   keeps an invisible grid position so the brand remains truly centered. */
#tasks .branded-topbar {
  grid-template-columns: 52px minmax(0, 1fr) 72px;
  gap: 12px;
}

#tasks .topbar-spacer {
  display: block;
  width: 52px;
  height: 52px;
}

#tasks .page-brand-lockup {
  width: 100%;
  min-width: 0;
  justify-content: center;
  overflow: visible;
}

#tasks .page-brand-lockup .page-brand-full-logo {
  display: block;
  width: min(100%, 156px) !important;
  height: auto !important;
  max-height: none;
  flex: 0 1 156px;
  object-fit: contain;
  filter: saturate(0.9) brightness(1.03);
}

#tasks .branded-topbar .text-link {
  font-size: 9px;
}

/* Membership list matched to the approved 12-card reference. */
#vip .vip-list {
  gap: 16px;
  padding: 16px 12px;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.28)) padding-box,
    linear-gradient(
      180deg,
      rgba(188, 238, 255, 0.74),
      rgba(243, 247, 255, 0.56) 48%,
      rgba(247, 185, 232, 0.66)
    ) border-box;
  box-shadow:
    0 10px 28px rgba(112, 137, 168, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.84);
}

#vip .music-worker-card {
  display: grid;
  width: 100%;
  min-height: 126px;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 10px;
  align-items: center;
  margin: 0 auto;
  padding: 14px 16px !important;
  border: 2px solid transparent !important;
  border-radius: 20px !important;
  overflow: visible;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.91), rgba(250, 253, 255, 0.84)) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, 0.8),
      rgba(243, 247, 255, 0.62) 50%,
      rgba(188, 238, 255, 0.84)
    ) border-box !important;
  box-shadow:
    0 7px 14px rgba(79, 103, 133, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#vip .music-worker-card.current {
  min-height: 132px;
}

#vip .music-worker-copy {
  min-width: 0;
  align-self: center;
}

#vip .music-worker-copy h2 {
  display: inline-block;
  margin: 0 0 12px;
  color: transparent;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
  background: linear-gradient(90deg, #e591bd 0%, #b8a7d9 50%, #6bc8e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9));
}

#vip .music-worker-copy p {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 7px 0 0;
  color: #222c39;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
}

#vip .music-worker-copy p span {
  width: 14px;
  flex: 0 0 14px;
  color: #75ccec;
  font-size: 11px;
  text-align: center;
}

#vip .music-worker-copy p strong {
  color: #222c39;
  font-size: inherit;
  font-weight: 850;
}

#vip .music-worker-side {
  display: grid;
  gap: 8px;
  align-self: stretch;
  align-content: center;
  justify-items: center;
}

#vip .music-position-icon {
  display: block;
  width: 66px !important;
  height: 66px !important;
  max-width: none;
  border: 0;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
  box-shadow:
    0 6px 14px rgba(89, 108, 139, 0.14),
    0 0 0 1px rgba(255, 255, 255, 0.78);
  filter: saturate(0.88) brightness(1.025);
}

#vip .music-worker-card.current .music-position-icon {
  width: 80px !important;
  height: 80px !important;
}

#vip .music-worker-side button {
  display: inline-flex;
  min-width: 68px;
  min-height: 23px !important;
  align-items: center;
  justify-content: center;
  padding: 1px 13px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  color: #a67fb8 !important;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(250, 253, 255, 0.82)) padding-box,
    linear-gradient(90deg, rgba(239, 132, 181, 0.76), rgba(111, 208, 229, 0.82)) border-box !important;
  box-shadow:
    0 3px 8px rgba(78, 102, 130, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#vip .music-worker-side .button-system-icon {
  display: none;
}

#vip .music-worker-side button:hover,
#vip .music-worker-side button:focus-visible {
  outline: none;
  filter: brightness(1.03);
  transform: translateY(-1px);
}

#vip .music-worker-side button:active {
  transform: scale(0.97);
}

/* Reward cards: gradient lives only in the border; interiors remain white. */
#home .reward-group,
#home .reward-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .90)) padding-box,
    linear-gradient(90deg, #FFC9D9 0%, #F3F7FF 50%, #8ED9FF 100%) border-box !important;
}

#home .reward-group {
  box-shadow:
    0 8px 25px rgba(160, 180, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .82) !important;
}

#home .reward-card {
  box-shadow:
    0 6px 16px rgba(82, 105, 132, .10),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

/* Locked PeerMusic shortcut system: gradient border, plain white interior. */
#home .shortcut-reference-art {
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  background:
    linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .94)) padding-box,
    linear-gradient(90deg, #FFC9D9 0%, #F3F7FF 50%, #8ED9FF 100%) border-box !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, .08),
    0 8px 25px rgba(160, 180, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .8) !important;
}

#home .shortcut-reference-art .icon {
  display: grid;
  place-items: center;
  overflow: visible;
  color: #77A8FF !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#home .shortcut-reference-art .icon::before,
#home .shortcut-reference-art .icon::after {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#home .shortcut-reference-art .shortcut-line-svg {
  position: static !important;
  display: block;
  width: 30px !important;
  height: 30px !important;
  overflow: visible;
  transform: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

#home .shortcut-reference-art .shortcut-line-svg g {
  fill: none !important;
  stroke: #8DB9FF !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: none !important;
}

/* Keep every carousel poster centered without stretching or cropping. */
#home .peer-hero-slide,
#home .peer-hero-slide-primary,
#home .peer-hero-slide-secondary,
#home .peer-hero-slide-tertiary {
  display: grid !important;
  place-items: center !important;
  padding: 6px !important;
}

#home .peer-hero-slide .peer-hero-image,
#home .peer-hero-slide-primary .peer-hero-image,
#home .peer-hero-slide-secondary .peer-hero-image,
#home .peer-hero-slide-tertiary .peer-hero-image {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
}

/* Compact wallet action beside the account identity. */
#account .account-info-button {
  display: inline-flex;
  min-height: 34px !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 12px !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  color: #fff !important;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  background:
    linear-gradient(135deg, #77A8FF, #8ED9FF 56%, #F7B9E8) padding-box,
    linear-gradient(90deg, #FFD7F2, #F3F7FF 50%, #BCEEFF) border-box !important;
  box-shadow:
    0 7px 18px rgba(119, 168, 255, .18),
    inset 0 1px 0 rgba(255, 255, 255, .54) !important;
}

#account .account-info-icon {
  position: relative;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 1.7px solid currentColor;
  border-radius: 50%;
}

#account .account-info-icon::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  transform: translateX(-50%);
}

#account .account-info-icon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 3px;
  width: 9px;
  height: 4px;
  border: 1.4px solid currentColor;
  border-top: 0;
  border-radius: 0 0 7px 7px;
  transform: translateX(-50%);
}

/* Match the eight production shortcut glyphs exactly; card geometry stays untouched. */
#home .shortcut-reference-art .icon {
  color: #8DB9FF !important;
  transform: translateY(-1px) !important;
}

#home .shortcut-reference-art .shortcut-line-svg g {
  stroke: #8DB9FF !important;
  stroke-width: 2.2 !important;
}

#home .shortcut-reference-art b {
  bottom: 7px !important;
}

/* Equal shortcut geometry and true vertical centering for all eight items. */
#home .shortcut-reference-art {
  display: grid !important;
  grid-template-rows: 30px 20px;
  width: 100%;
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  align-content: center;
  justify-items: center;
  gap: 2px !important;
  padding: 5px 4px !important;
  box-sizing: border-box;
}

#home .shortcut-reference-art .icon {
  width: 30px !important;
  height: 30px !important;
  align-self: center;
  transform: none !important;
}

#home .shortcut-reference-art b,
#home .shortcut-reference-art:nth-child(3) b {
  position: static !important;
  display: flex;
  width: 100%;
  min-height: 20px;
  align-items: center;
  justify-content: center;
  align-self: center;
  color: #243042;
  font-size: 9px;
  line-height: 1.05;
  text-align: center;
}

/* Daily task panel: white interiors with visible pink-to-blue outlines. */
#home .daily-task-panel,
#home .daily-task-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(rgba(255, 255, 255, .92), rgba(255, 255, 255, .88)) padding-box,
    linear-gradient(90deg, #FFC9D9 0%, #F3F7FF 50%, #8ED9FF 100%) border-box !important;
}

#home .daily-task-panel {
  box-shadow:
    0 8px 25px rgba(160, 180, 255, .12),
    inset 0 1px 0 rgba(255, 255, 255, .86) !important;
}

#home .daily-task-card {
  box-shadow:
    0 8px 20px rgba(116, 138, 167, .10),
    inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}

/* Unified subtle Soft UI elevation for cards and controls. */
:root {
  --pm-card-elevation:
    0 8px 20px rgba(82, 105, 132, .10),
    0 2px 5px rgba(82, 105, 132, .05),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(112, 139, 169, .05);
  --pm-button-elevation:
    0 5px 12px rgba(82, 105, 132, .13),
    0 1px 3px rgba(82, 105, 132, .06),
    inset 0 1px 0 rgba(255, 255, 255, .72),
    inset 0 -1px 0 rgba(70, 96, 128, .08);
}

.glass-panel,
.glass-card,
.balance-grid > div,
.overview-grid > .metric,
.quick-grid > .quick,
.daily-task-card,
.reward-card,
.music-worker-card {
  box-shadow: var(--pm-card-elevation) !important;
}

button:not(.peer-hero-dots button) {
  box-shadow: var(--pm-button-elevation) !important;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease,
    filter 220ms ease;
}

@media (hover: hover) {
  button:not(.peer-hero-dots button):hover {
    transform: translateY(-1px);
    filter: brightness(1.015);
  }
}

button:not(.peer-hero-dots button):active {
  transform: translateY(1px) scale(.98);
  box-shadow:
    0 2px 6px rgba(82, 105, 132, .10),
    inset 0 1px 3px rgba(82, 105, 132, .08),
    inset 0 -1px 0 rgba(255, 255, 255, .68) !important;
}

/* Global low-contrast material texture and ambient depth. */
.phone-shell {
  isolation: isolate;
}

.phone-shell::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, .55), transparent 27%),
    radial-gradient(circle at 88% 76%, rgba(188, 238, 255, .18), transparent 34%),
    radial-gradient(circle at 18% 88%, rgba(255, 215, 242, .14), transparent 30%),
    repeating-linear-gradient(
      118deg,
      rgba(255, 255, 255, .08) 0,
      rgba(255, 255, 255, .08) 1px,
      transparent 1px,
      transparent 8px
    );
  opacity: .52;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.app {
  z-index: 2;
}

.glass-panel,
.glass-card {
  -webkit-backdrop-filter: blur(18px) saturate(1.06);
  backdrop-filter: blur(18px) saturate(1.06);
}

.screen h1,
.screen h2,
.screen h3,
.screen strong,
.screen b {
  text-shadow: 0 1px 0 rgba(255, 255, 255, .58);
}

/* Slightly stronger depth for the reward groups shown in the reference. */
#home .reward-group {
  box-shadow:
    0 14px 30px rgba(82, 105, 132, .14),
    0 4px 10px rgba(82, 105, 132, .07),
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(112, 139, 169, .05) !important;
}

#home .reward-card {
  box-shadow:
    0 8px 18px rgba(82, 105, 132, .12),
    0 2px 5px rgba(82, 105, 132, .05),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

#home .bonus-rule {
  box-shadow:
    0 4px 11px rgba(82, 105, 132, .07),
    inset 0 1px 0 rgba(255, 255, 255, .88) !important;
}

/* White account balances with restrained neumorphic depth. */
#account .balance-grid > div {
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(247, 250, 254, .92)) padding-box,
    linear-gradient(135deg, rgba(255, 255, 255, .96), rgba(227, 234, 243, .72)) border-box !important;
  box-shadow:
    -5px -5px 14px rgba(255, 255, 255, .78),
    7px 9px 20px rgba(104, 126, 153, .14),
    0 2px 5px rgba(104, 126, 153, .06),
    inset 1px 1px 0 rgba(255, 255, 255, .96),
    inset -1px -1px 0 rgba(120, 145, 173, .06) !important;
}

/* Rebalance the vertical rhythm of every reward group. */
#home .reward-group {
  padding: 12px !important;
}

#home .reward-group-head {
  min-height: 34px;
  margin-bottom: 8px;
}

#home .reward-group-head .avatar {
  width: 34px;
  height: 34px;
}

#home .reward-items {
  gap: 8px;
}

#home .reward-group .reward-card {
  min-height: 58px;
  padding: 8px 10px !important;
}

#home .bonus-rule {
  display: flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 6px 10px;
  line-height: 1.25;
}

/* Shortcut outlines breathe smoothly from pale to deeper pink/blue. */
#home .shortcut-reference-art::before {
  content: "" !important;
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 1px;
  border: 0;
  border-radius: inherit;
  background:
    linear-gradient(
      90deg,
      #FFF2F8 0%,
      #F7B9E8 22%,
      #FFF7FB 42%,
      #F3F7FF 50%,
      #F4FCFF 58%,
      #8ED9FF 78%,
      #F2FCFF 100%
    );
  background-size: 220% 100%;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .58;
  pointer-events: none;
  animation: shortcut-border-depth 5.6s ease-in-out infinite;
}

@keyframes shortcut-border-depth {
  0%,
  100% {
    background-position: 0% 50%;
    opacity: .52;
  }
  50% {
    background-position: 100% 50%;
    opacity: .94;
  }
}

/* One shared carousel geometry for all three posters. */
#home .peer-hero-slider {
  aspect-ratio: 2.33 / 1 !important;
}

#home .peer-hero-track {
  gap: 0 !important;
  height: 100%;
  transition:
    transform 720ms cubic-bezier(.22, .61, .36, 1) !important;
  will-change: transform;
}

#home .peer-hero-slide,
#home .peer-hero-slide-primary,
#home .peer-hero-slide-secondary,
#home .peer-hero-slide-tertiary {
  flex: 0 0 100% !important;
  width: 100% !important;
  height: 100% !important;
  padding: 6px !important;
  box-sizing: border-box;
}

#home .peer-hero-slide .peer-hero-image,
#home .peer-hero-slide-primary .peer-hero-image,
#home .peer-hero-slide-secondary .peer-hero-image,
#home .peer-hero-slide-tertiary .peer-hero-image {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* Final light consistency pass across all five screens. */
.screen {
  padding-inline: 16px !important;
}

.topbar,
.branded-topbar {
  min-height: 56px;
  margin-bottom: 16px;
}

.section-head {
  display: flex;
  min-height: 30px;
  align-items: center;
  margin: 20px 0 10px;
}

.section-head h2 {
  margin: 0;
  color: #243042;
  font-size: 18px;
  font-weight: 850;
  line-height: 1.25;
  letter-spacing: -.02em;
}

#tasks .video-list,
#vip .vip-list,
#income .income-list,
#account .overview-grid,
#account .quick-grid {
  gap: 12px;
}

.screen .glass-panel,
.screen .glass-card {
  transition:
    transform 250ms ease,
    box-shadow 250ms ease,
    border-color 250ms ease;
}

/* Account quick entries: one balanced horizontal row of four cards. */
#account .quick-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

#account .quick {
  display: flex;
  min-width: 0;
  min-height: 94px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 10px 4px !important;
  border: 1px solid transparent !important;
  border-radius: 20px !important;
  color: #243042;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.22;
  text-align: center;
  text-wrap: balance;
  background:
    linear-gradient(rgba(255, 255, 255, .86), rgba(255, 255, 255, .80)) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, .56),
      rgba(243, 247, 255, .50) 50%,
      rgba(188, 238, 255, .62)
    ) border-box !important;
  box-shadow:
    0 8px 20px rgba(116, 138, 167, .10),
    inset 0 1px 0 rgba(255, 255, 255, .94) !important;
}

#account .quick .icon {
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  margin: 0;
}

/* Account quick entries: equal card proportions and aligned icon/label rows. */
#account .quick-grid {
  gap: 9px;
  align-items: stretch;
}

#account .quick {
  display: grid;
  height: 102px;
  min-height: 102px;
  grid-template-rows: 32px 30px;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: 9px 3px !important;
  box-sizing: border-box;
}

#account .quick .icon {
  width: 32px;
  height: 32px;
  align-self: center;
}

#account .quick-label {
  display: flex;
  min-width: 0;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  color: #243042;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.18;
  text-align: center;
}

@media (max-width: 360px) {
  #account .quick-grid {
    gap: 6px;
  }

  #account .quick {
    height: 98px;
    min-height: 98px;
    padding-inline: 3px !important;
    font-size: 9px;
  }

  #account .quick-label {
    font-size: 9px;
  }
}

/* Keep the membership header centered after removing its back control. */
#vip .topbar-spacer {
  display: block;
  width: 52px;
  height: 52px;
}

/* Three invitation actions, added without changing the reward-card rhythm. */
#home .reward-group .reward-card {
  grid-template-columns: 38px minmax(0, 1fr) 48px;
  column-gap: 6px;
}

#home .reward-action {
  display: inline-flex;
  min-width: 48px;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #72849a;
  font-size: 8px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  background:
    linear-gradient(rgba(255, 255, 255, .88), rgba(250, 253, 255, .82)) padding-box,
    linear-gradient(90deg, rgba(247, 185, 232, .76), rgba(243, 247, 255, .66) 50%, rgba(142, 217, 255, .82)) border-box;
  box-shadow:
    0 5px 12px rgba(100, 126, 157, .10),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

#home .reward-action:hover,
#home .reward-action:focus-visible {
  outline: none;
  color: #567994;
  filter: brightness(1.025);
  transform: translateY(-1px);
}

#home .reward-action:active {
  transform: scale(.96);
}

/* Center each music artwork inside one stable circular frame. */
#vip .music-position-frame {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 6px 14px rgba(89, 108, 139, .12),
    inset 0 0 0 1px rgba(255, 255, 255, .88);
}

#vip .music-worker-card.current .music-position-frame {
  width: 80px;
  height: 80px;
}

#vip .music-position-frame .music-position-icon,
#vip .music-worker-card.current .music-position-frame .music-position-icon {
  display: block;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 50%;
  object-fit: contain;
  object-position: 50% 50%;
  transform: none !important;
}

/* Account page: compact the hero and rebalance the mobile vertical rhythm. */
#account .account-hero {
  padding: 14px !important;
  border-radius: 26px !important;
}

#account .account-hero > .primary {
  width: 142px;
  min-height: 42px !important;
  height: 42px;
}

#account .mini-actions {
  top: 14px;
  right: 14px;
  gap: 8px;
}

#account .mini-actions button {
  width: 46px;
  height: 46px;
  border-radius: 17px;
}

#account .profile-row {
  min-height: 54px;
  margin-top: 10px;
  gap: 10px;
}

#account .profile-row h1 {
  font-size: 21px;
}

#account .profile-row p {
  margin-top: 4px;
  padding: 4px 8px;
  font-size: 11px;
}

#account .balance-grid {
  gap: 10px;
  margin-top: 13px;
}

#account .balance-grid div {
  padding: 12px 14px;
  border-radius: 18px;
}

#account .balance-grid span {
  font-size: 10px;
}

#account .balance-grid b {
  margin-top: 5px;
  font-size: 27px;
}

#account .action-row {
  gap: 10px;
  margin-top: 12px;
}

#account .action-row button {
  min-height: 44px;
  padding-block: 9px;
}

#account .section-head {
  margin-block: 18px 10px;
}

#account .section-head h2 {
  font-size: 22px;
}

#account .metric {
  min-height: 108px;
}

/* Bottom navigation icons: one rounded, balanced line-weight system. */
.bottom-nav {
  align-items: stretch;
}

.nav-item {
  gap: 5px;
  color: #8796a7;
}

.nav-icon {
  width: 25px !important;
  height: 25px !important;
  color: currentColor;
  filter: drop-shadow(0 2px 3px rgba(85, 108, 132, .08));
  transition:
    color 260ms ease,
    filter 260ms ease,
    transform 260ms ease;
}

.nav-icon::before,
.nav-icon::after {
  box-sizing: border-box;
}

.nav-icon.home::before {
  width: 14px;
  height: 14px;
  inset: 3px auto auto 6px;
  border: 2px solid currentColor;
  border-right: 0;
  border-bottom: 0;
  border-radius: 4px 0 0;
  transform: rotate(45deg);
}

.nav-icon.home::after {
  width: 14px;
  height: 11px;
  left: 6px;
  bottom: 3px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 5px 5px;
}

.nav-icon.tasks::before {
  inset: 3px;
  border-width: 2px;
  border-radius: 50%;
}

.nav-icon.tasks::after {
  left: 10px;
  top: 8px;
  border-top-width: 4.5px;
  border-bottom-width: 4.5px;
  border-left-width: 7px;
}

.nav-icon.vip::before {
  width: 19px;
  height: 15px;
  left: 3px;
  top: 5px;
  border-radius: 2px 2px 5px 5px;
}

.nav-icon.vip::after {
  width: 17px;
  height: 2px;
  left: 4px;
  bottom: 3px;
  border-radius: 999px;
  background: currentColor;
}

.nav-icon.income::before {
  width: 4px;
  height: 17px;
  left: 4px;
  top: 5px;
  border-radius: 999px;
  box-shadow: 7px -5px 0 currentColor, 14px 2px 0 currentColor;
}

.nav-icon.account::before {
  width: 9px;
  height: 9px;
  left: 8px;
  top: 3px;
  border-width: 2px;
}

.nav-icon.account::after {
  width: 19px;
  height: 10px;
  left: 3px;
  bottom: 2px;
  border-width: 2px;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

.nav-item.active {
  color: #72bfe1;
}

.nav-item.active .nav-icon {
  filter:
    drop-shadow(-2px 0 4px rgba(247, 185, 232, .30))
    drop-shadow(2px 0 4px rgba(142, 217, 255, .34));
  transform: translateY(-1px);
}

.nav-item.active b {
  color: #54798e;
}

@media (max-width: 360px) {
  #home .reward-group .reward-card {
    grid-template-columns: 34px minmax(0, 1fr) 44px;
    column-gap: 5px;
  }

  #home .reward-action {
    min-width: 44px;
    padding-inline: 5px;
    font-size: 8px;
  }
}

/* Bottom navigation icons matched to the latest five-icon reference. */
.bottom-nav .nav-icon {
  position: relative;
  display: block;
  width: 23px !important;
  height: 23px !important;
}

.bottom-nav .nav-icon::before,
.bottom-nav .nav-icon::after {
  content: "";
  position: absolute;
  display: block;
  inset: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  clip-path: none;
  transform: none;
}

.bottom-nav .nav-icon.home::before {
  width: 13px;
  height: 13px;
  left: 5px;
  top: 2px;
  border: 2px solid currentColor;
  border-right: 0;
  border-bottom: 0;
  border-radius: 3px 0 0;
  transform: rotate(45deg);
}

.bottom-nav .nav-icon.home::after {
  width: 13px;
  height: 10px;
  left: 5px;
  bottom: 2px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 4px 4px;
}

.bottom-nav .nav-icon.tasks::before {
  width: 18px;
  height: 18px;
  left: 2.5px;
  top: 2.5px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.bottom-nav .nav-icon.tasks::after {
  left: 9px;
  top: 7px;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  border-left: 7px solid currentColor;
}

.bottom-nav .nav-icon.vip::before {
  width: 19px;
  height: 15px;
  left: 2px;
  top: 3px;
  border-radius: 1px 1px 4px 4px;
  background: currentColor;
  clip-path: polygon(0 82%, 8% 31%, 34% 62%, 50% 6%, 66% 62%, 92% 31%, 100% 82%, 100% 100%, 0 100%);
}

.bottom-nav .nav-icon.vip::after {
  width: 18px;
  height: 2px;
  left: 2.5px;
  bottom: 2px;
  border-radius: 999px;
  background: currentColor;
}

.bottom-nav .nav-icon.income::before {
  width: 4px;
  height: 17px;
  left: 2px;
  top: 4px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 7px -4px 0 currentColor, 14px 2px 0 currentColor;
}

.bottom-nav .nav-icon.income::after {
  display: none;
}

.bottom-nav .nav-icon.account::before {
  width: 5px;
  height: 5px;
  left: 9px;
  top: 1px;
  border-radius: 50%;
  background: currentColor;
}

.bottom-nav .nav-icon.account::after {
  width: 17px;
  height: 13px;
  left: 3px;
  bottom: 1px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 0 0 12px 12px;
}

/* Soften the three blue account actions into low-saturation glass controls. */
#account .account-hero > .primary,
#account .action-row .primary,
#account .account-info-button {
  border: 1px solid transparent !important;
  color: #587b94 !important;
  background:
    linear-gradient(
      135deg,
      rgba(216, 246, 255, .88),
      rgba(243, 247, 255, .86) 52%,
      rgba(255, 215, 242, .76)
    ) padding-box,
    linear-gradient(
      90deg,
      rgba(247, 185, 232, .48),
      rgba(243, 247, 255, .46) 50%,
      rgba(188, 238, 255, .58)
    ) border-box !important;
  box-shadow:
    0 7px 18px rgba(119, 168, 255, .10),
    inset 0 1px 0 rgba(255, 255, 255, .90) !important;
}

#account .account-hero > .primary .button-system-icon,
#account .action-row .primary .button-system-icon,
#account .account-info-icon {
  color: #6da8c5;
}

/* Account recharge and withdrawal: one balanced two-button system. */
#account .action-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#account .action-row button {
  display: inline-flex;
  min-width: 0;
  min-height: 48px !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 14px !important;
  border: 1px solid transparent !important;
  border-radius: 18px !important;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  box-shadow:
    0 7px 18px rgba(100, 126, 157, .09),
    inset 0 1px 0 rgba(255, 255, 255, .92) !important;
}

#account .action-row .primary {
  color: #587b94 !important;
  background:
    linear-gradient(
      135deg,
      rgba(188, 238, 255, .84),
      rgba(243, 247, 255, .86) 50%,
      rgba(255, 215, 242, .78)
    ) padding-box,
    linear-gradient(90deg, rgba(247, 185, 232, .54), rgba(188, 238, 255, .66)) border-box !important;
}

#account .action-row .secondary {
  color: #5c7f96;
  background:
    linear-gradient(rgba(255, 255, 255, .84), rgba(232, 249, 255, .72)) padding-box,
    linear-gradient(90deg, rgba(247, 185, 232, .42), rgba(243, 247, 255, .48) 50%, rgba(188, 238, 255, .64)) border-box !important;
}

#account .account-action-glyph,
#account .action-row .primary .account-action-glyph {
  position: relative;
  display: grid;
  width: 21px !important;
  height: 21px !important;
  flex: 0 0 21px;
  place-items: center;
  border: 1.6px solid currentColor;
  border-radius: 50%;
  color: #70aac6;
  font-size: 0;
  background: rgba(255, 255, 255, .48);
  box-shadow: none !important;
}

#account .account-action-glyph::before {
  display: block;
  color: currentColor;
  font-size: 14px;
  font-weight: 750;
  line-height: 1;
}

#account .recharge-glyph::before {
  content: "+";
  transform: translateY(-.5px);
}

#account .withdraw-glyph::before {
  content: "↓";
  font-size: 12px;
  transform: translateY(-1px);
}

#account .action-row button:hover,
#account .action-row button:focus-visible {
  outline: none;
  filter: brightness(1.025);
  transform: translateY(-1px);
}

#account .action-row button:active {
  transform: scale(.975);
}

/* Larger account actions after removing the balance row. */
#account .action-row {
  gap: 12px;
  margin-top: 16px;
}

#account .action-row button {
  min-height: 58px !important;
  gap: 10px;
  padding: 13px 16px !important;
  border-radius: 20px !important;
  font-size: 16px;
}

#account .account-action-glyph,
#account .action-row .primary .account-action-glyph {
  width: 24px !important;
  height: 24px !important;
  flex-basis: 24px;
}

#account .wallet-glyph::before {
  content: "";
  width: 11px;
  height: 8px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: none;
}

#account .wallet-glyph::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 3px;
  right: 4px;
  border: 1.3px solid currentColor;
  border-radius: 2px;
  background: rgba(255, 255, 255, .72);
}

#account .bill-glyph::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 12px;
  top: 4px;
  border: 1.5px solid currentColor;
  border-radius: 2px;
  transform: none;
}

#account .bill-glyph::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 1.5px;
  top: 8px;
  border-radius: 99px;
  background: currentColor;
  box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor;
}

/* Keep every music artwork visually centered in its circular frame. */
#vip .music-position-frame {
  align-self: center;
  justify-self: center;
}

#vip .music-position-frame .music-position-icon,
#vip .music-worker-card.current .music-position-frame .music-position-icon {
  object-fit: cover;
  object-position: center center;
}

/* VIP worker cards matched to the approved two-column reference. */
#vip .music-worker-card,
#vip .music-worker-card.current {
  min-height: 132px;
  grid-template-columns: minmax(0, 1fr) 84px;
  gap: 12px;
  padding: 16px 18px !important;
}

#vip .music-worker-copy h2 {
  margin-bottom: 10px;
  font-size: 16px;
}

#vip .music-worker-copy p {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.22;
}

#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  width: 76px;
  height: 76px;
  padding: 2px;
  box-sizing: border-box;
  background: linear-gradient(
    90deg,
    rgba(247, 185, 232, .90),
    rgba(243, 247, 255, .82) 50%,
    rgba(188, 238, 255, .94)
  );
  box-shadow:
    0 7px 16px rgba(82, 105, 132, .16),
    0 0 0 2px rgba(255, 255, 255, .82),
    inset 0 1px 0 rgba(255, 255, 255, .94);
}

#vip .music-position-frame .music-position-icon,
#vip .music-worker-card.current .music-position-frame .music-position-icon {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: none;
}

#vip .music-worker-card {
  position: relative;
  isolation: isolate;
}

#vip .music-worker-copy,
#vip .music-worker-side {
  position: relative;
  z-index: 2;
}

#vip .music-worker-level {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 110px;
  min-width: 66px;
  transform: translateY(-48%);
  color: transparent;
  font-size: 46px;
  font-weight: 950;
  font-style: italic;
  line-height: .86;
  letter-spacing: -.07em;
  text-align: center;
  pointer-events: none;
  user-select: none;
  background: linear-gradient(
    135deg,
    rgba(238, 151, 207, .72),
    rgba(174, 182, 225, .68) 52%,
    rgba(120, 209, 237, .72)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 1px rgba(153, 174, 215, .44);
  paint-order: stroke fill;
  text-shadow:
    -1px 0 0 rgba(255, 190, 225, .38),
    1px 0 0 rgba(141, 217, 242, .42),
    0 2px 5px rgba(111, 137, 173, .14);
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .88));
}

/* Rotating pastel ring; the music artwork remains completely still. */
#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: rgba(255, 255, 255, .88);
}

#vip .music-position-frame::before,
#vip .music-worker-card.current .music-position-frame::before {
  content: "" !important;
  position: absolute;
  z-index: 0;
  inset: -28%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(247, 185, 232, .96) 0deg,
    rgba(255, 225, 244, .88) 82deg,
    rgba(243, 247, 255, .92) 150deg,
    rgba(188, 238, 255, .98) 228deg,
    rgba(220, 245, 255, .90) 306deg,
    rgba(247, 185, 232, .96) 360deg
  );
  animation: music-position-ring-spin 3.2s linear infinite;
  will-change: transform;
}

#vip .music-position-frame .music-position-icon,
#vip .music-worker-card.current .music-position-frame .music-position-icon {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, .93);
}

@keyframes music-position-ring-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  #vip .music-position-frame::before,
  #vip .music-worker-card.current .music-position-frame::before {
    animation: none;
  }
}

/* Account quick entries use a true 1:1 square proportion. */
#account .quick {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  grid-template-rows: 30px 30px;
  align-content: center;
  gap: 4px;
  padding: 7px 3px !important;
  border-radius: 18px !important;
}

#account .quick .icon {
  width: 30px;
  height: 30px;
}

#account .quick-label {
  min-height: 30px;
}

@media (max-width: 360px) {
  #account .quick {
    height: auto;
    min-height: 0;
    grid-template-rows: 28px 28px;
    padding-block: 6px !important;
  }

  #account .quick .icon {
    width: 28px;
    height: 28px;
  }
}

/* Final VIP card proportions based on the approved compact reference. */
#vip .music-worker-card,
#vip .music-worker-card.current {
  min-height: 124px;
  grid-template-columns: minmax(0, 1fr) 80px;
  gap: 10px;
  padding: 14px 16px !important;
}

#vip .music-worker-copy h2 {
  margin-bottom: 8px;
  color: transparent;
  font-size: 15px;
  background-image: linear-gradient(
    90deg,
    #ed7fbc 0%,
    #b090d1 50%,
    #42b8dc 100%
  );
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(35, 52, 76, .28));
}

#vip .music-worker-copy p {
  margin-top: 5px;
  font-size: 11px;
}

#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  width: 72px;
  height: 72px;
  padding: 4px;
  box-shadow:
    0 2px 4px rgba(16, 24, 40, .10),
    0 9px 18px rgba(16, 24, 40, .16),
    0 16px 28px rgba(16, 24, 40, .08),
    inset 0 1px 1px rgba(255, 255, 255, .98);
}

#vip .music-worker-side button {
  min-width: 64px;
  min-height: 22px !important;
  font-size: 10px;
}

#vip .music-worker-level {
  position: relative;
  z-index: 2;
  isolation: isolate;
  top: auto;
  right: auto;
  display: grid;
  width: 50px;
  height: 50px;
  min-width: 50px;
  place-items: center;
  transform: none;
  border: 3px solid transparent;
  border-radius: 50%;
  color: #8289bd;
  font-size: 19px;
  font-weight: 950;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.04em;
  background:
    radial-gradient(
      circle at 30% 22%,
      rgba(255, 255, 255, .98) 0 8%,
      rgba(255, 255, 255, .42) 19%,
      transparent 40%
    ) padding-box,
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .94),
      rgba(255, 235, 247, .76) 48%,
      rgba(224, 248, 255, .82)
    ) padding-box,
    conic-gradient(
      from 215deg,
      rgba(247, 185, 232, .94),
      rgba(255, 228, 245, .90),
      rgba(243, 247, 255, .88),
      rgba(188, 238, 255, .98),
      rgba(219, 245, 255, .90),
      rgba(247, 185, 232, .94)
    ) border-box;
  -webkit-background-clip: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
  -webkit-text-stroke: 0;
  paint-order: normal;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .98) inset,
    0 0 0 1px rgba(255, 255, 255, .78),
    0 3px 5px rgba(31, 42, 61, .12),
    0 9px 18px rgba(31, 42, 61, .13);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .98),
    0 2px 3px rgba(24, 32, 45, .20);
  opacity: .76;
  filter: none;
}

#vip .music-worker-level::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, .88);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(171, 210, 236, .16),
    inset 0 -4px 8px rgba(193, 220, 242, .16);
}

#vip .music-worker-level::after {
  content: "♪";
  position: absolute;
  top: 1px;
  right: 2px;
  display: grid;
  width: 14px;
  height: 14px;
  place-items: center;
  border-radius: 50%;
  color: #70cce9;
  font-size: 9px;
  font-style: normal;
  line-height: 1;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 5px rgba(45, 68, 97, .12);
}

#vip .music-worker-card,
#vip .music-worker-card.current {
  grid-template-columns: minmax(0, 1fr) 50px 80px;
  gap: 8px;
}

@media (max-width: 360px) {
  #vip .music-worker-card,
  #vip .music-worker-card.current {
    grid-template-columns: minmax(0, 1fr) 44px 72px;
    gap: 6px;
    padding-inline: 12px !important;
  }

  #vip .music-worker-level {
    width: 44px;
    height: 44px;
    min-width: 44px;
    font-size: 17px;
  }

  #vip .music-position-frame,
  #vip .music-worker-card.current .music-position-frame {
    width: 66px;
    height: 66px;
  }
}

/* Account identity card: clearer hierarchy with the original glass language. */
#account .account-hero {
  padding: 22px 18px 24px !important;
  overflow: visible;
  border-radius: 27px !important;
}

#account .account-hero > .primary {
  width: calc(25% - 4px);
  min-width: 0;
  height: 38px;
  min-height: 38px !important;
  padding: 0 11px !important;
  border-radius: 14px !important;
  font-size: 9px;
  letter-spacing: .01em;
  margin: 0 !important;
  vertical-align: middle;
}

#account .account-hero > .primary .button-system-icon {
  width: 15px !important;
  height: 15px !important;
  flex-basis: 15px;
}

#account .mini-actions {
  top: 22px;
  right: 18px;
}

#account .mini-actions button {
  width: 42px;
  height: 42px;
  border-radius: 15px;
  color: #6aa9cb;
  background: rgba(255, 255, 255, .72);
  box-shadow:
    0 7px 18px rgba(84, 112, 145, .10),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

#account .profile-row {
  min-height: 104px;
  margin-top: 26px;
  gap: 16px;
  align-items: center;
}

#account .account-avatar {
  width: 86px;
  height: 86px;
  flex-basis: 86px;
  border-width: 3px;
  box-shadow:
    0 10px 22px rgba(85, 109, 137, .18),
    0 0 0 4px rgba(216, 246, 255, .42),
    inset 0 1px 0 rgba(255, 255, 255, .82);
}

#account .account-avatar::before {
  width: 26px;
  height: 26px;
  top: 15px;
}

#account .account-avatar::after {
  width: 51px;
  height: 30px;
  bottom: 10px;
}

#account .profile-row > div {
  min-width: 0;
  flex: 1 1 auto;
}

#account .profile-row h1 {
  overflow: hidden;
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#account .profile-row p {
  margin-top: 8px;
  padding: 6px 13px;
  font-size: 12.5px;
  line-height: 1.1;
}

#account .account-info-button {
  width: calc(25% - 4px);
  min-width: 0;
  height: 38px;
  min-height: 38px !important;
  flex-direction: row;
  gap: 6px;
  margin-left: 10px;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  font-size: 9px;
  vertical-align: middle;
  white-space: nowrap;
}

#account .account-info-button > span:last-child {
  line-height: 1.1;
  letter-spacing: 0;
  writing-mode: horizontal-tb;
}

#account .account-info-icon {
  width: 15px;
  height: 15px;
  flex-basis: 15px;
}

#account .action-row {
  gap: 14px;
  margin-top: 25px;
}

#account .action-row button {
  min-height: 62px !important;
  gap: 10px;
  padding: 12px 15px !important;
  border-radius: 21px !important;
  font-size: 16px;
}

#account .account-action-glyph,
#account .action-row .primary .account-action-glyph {
  width: 23px !important;
  height: 23px !important;
  flex-basis: 23px;
}

#account .account-info-button:hover,
#account .account-info-button:focus-visible,
#account .mini-actions button:hover,
#account .mini-actions button:focus-visible {
  outline: none;
  filter: brightness(1.02);
  transform: translateY(-1px);
}

#account .account-info-button:active,
#account .mini-actions button:active {
  transform: scale(.97);
}

@media (max-width: 360px) {
  #account .account-hero {
    padding: 19px 14px 21px !important;
  }

  #account .account-hero > .primary {
    width: calc(25% - 4px);
    min-width: 0;
    height: 36px;
    min-height: 36px !important;
  }

  #account .profile-row {
    min-height: 92px;
    margin-top: 22px;
    gap: 12px;
  }

  #account .account-avatar {
    width: 76px;
    height: 76px;
    flex-basis: 76px;
  }

  #account .account-avatar::before {
    width: 23px;
    height: 23px;
    top: 13px;
  }

  #account .account-avatar::after {
    width: 45px;
    height: 26px;
    bottom: 9px;
  }

  #account .profile-row h1 {
    font-size: 24px;
  }

  #account .profile-row p {
    padding: 5px 8px;
    font-size: 10px;
  }

  #account .account-info-button {
    width: calc(25% - 4px);
    min-width: 0;
    height: 36px;
    min-height: 36px !important;
    margin-left: 8px;
    padding-inline: 8px !important;
    font-size: 9px;
  }

  #account .account-info-icon {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }

  #account .action-row {
    gap: 11px;
    margin-top: 21px;
  }
}

/* VIP levels: compact 3D glass marker on the music disc. */
#vip .music-worker-card,
#vip .music-worker-card.current {
  grid-template-columns: minmax(0, 1fr) 80px;
}

#vip .music-worker-level {
  position: absolute;
  z-index: 5;
  isolation: isolate;
  top: 9px;
  right: 9px;
  display: grid;
  width: 30px;
  height: 30px;
  min-width: 30px;
  place-items: center;
  transform: none;
  border: 2px solid transparent;
  border-radius: 50%;
  color: #7183ad;
  font-size: 10px;
  font-weight: 950;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.03em;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .64) 38%, rgba(237, 248, 255, .58)) padding-box,
    conic-gradient(
      from 220deg,
      rgba(247, 185, 232, .86),
      rgba(255, 237, 248, .90),
      rgba(188, 238, 255, .92),
      rgba(247, 185, 232, .86)
    ) border-box;
  -webkit-background-clip: padding-box, border-box;
  background-clip: padding-box, border-box;
  -webkit-text-stroke: 0;
  box-shadow:
    0 2px 3px rgba(28, 41, 61, .10),
    0 7px 14px rgba(28, 41, 61, .16),
    inset 0 1px 1px rgba(255, 255, 255, .98),
    inset 0 -3px 6px rgba(180, 209, 233, .18);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .96);
  opacity: 1;
  filter: none;
  pointer-events: none;
  user-select: none;
}

#vip .music-worker-level::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 3px;
  display: block;
  border: 1px solid rgba(255, 255, 255, .92);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(164, 206, 232, .14);
}

#vip .music-worker-level::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 7px;
  display: block;
  width: 7px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .82);
  filter: blur(.2px);
}

@media (max-width: 360px) {
  #vip .music-worker-card,
  #vip .music-worker-card.current {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  #vip .music-worker-level {
    top: 8px;
    right: 7px;
    width: 27px;
    height: 27px;
    min-width: 27px;
    font-size: 9px;
  }
}

/* Personal information moves into the left account action. */
#account .personal-glyph::before {
  content: "";
  position: absolute;
  top: 4px;
  width: 6px;
  height: 6px;
  border: 1.4px solid currentColor;
  border-radius: 50%;
  background: rgba(255, 255, 255, .66);
  transform: none;
}

#account .personal-glyph::after {
  content: "";
  position: absolute;
  bottom: 4px;
  width: 12px;
  height: 7px;
  border: 1.4px solid currentColor;
  border-radius: 8px 8px 5px 5px;
  background: rgba(255, 255, 255, .48);
}

/* Account role: music identity with a soft embossed title. */
#account .profile-row .account-role {
  display: flex;
  width: max-content;
  min-height: 16px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin: 8px 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: #596d91;
  background: none !important;
  box-shadow: none;
  white-space: nowrap;
}

#account .profile-row .account-role::before {
  display: none;
  content: none;
}

#account .account-role-note {
  display: grid;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  place-items: center;
  overflow: visible;
  color: transparent;
  font-size: 11.5px;
  font-weight: 950;
  line-height: 16px;
  background: linear-gradient(145deg, #df69ad, #7f91c9 52%, #27b4da);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 1px 1px rgba(37, 61, 91, .24));
}

#account .account-role strong,
#account .account-role-title {
  display: inline-block;
  color: transparent;
  font-size: 11.5px;
  font-weight: 950;
  letter-spacing: -.02em;
  background: linear-gradient(
    90deg,
    rgba(222, 105, 172, .98),
    rgba(139, 151, 202, .98) 52%,
    rgba(45, 177, 215, .98)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .35px rgba(255, 255, 255, .86);
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .90),
    -1px 0 2px rgba(31, 44, 62, .22),
    1px 0 2px rgba(31, 44, 62, .22),
    0 -1px 2px rgba(31, 44, 62, .18),
    0 1px 2px rgba(31, 44, 62, .24),
    0 0 4px rgba(31, 44, 62, .12);
}

@media (max-width: 360px) {
  #account .profile-row .account-role {
    gap: 3px;
    min-height: 14px;
    padding: 0;
  }

  #account .account-role-note {
    width: 14px;
    height: 14px;
    flex-basis: 14px;
    font-size: 9.5px;
    line-height: 14px;
  }

  #account .account-role strong,
  #account .account-role-title {
    font-size: 9.5px;
  }
}

/* VIP disc: level in the center, music artwork in the upper-right bubble. */
#vip .music-position-frame,
#vip .music-worker-card.current .music-position-frame {
  display: grid;
  overflow: visible;
  place-items: center;
  background: transparent;
}

#vip .music-position-frame::before,
#vip .music-worker-card.current .music-position-frame::before {
  inset: 0;
  border-radius: 50%;
}

#vip .music-position-frame::after,
#vip .music-worker-card.current .music-position-frame::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 4px;
  border: 1px solid rgba(255, 255, 255, .94);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .82) 42%, rgba(229, 244, 252, .82));
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .98),
    inset 0 -5px 10px rgba(175, 207, 231, .17);
}

#vip .music-position-frame .music-worker-level {
  position: relative;
  z-index: 3;
  top: auto;
  right: auto;
  display: grid;
  width: auto;
  height: auto;
  min-width: 0;
  place-items: center;
  transform: none;
  border: 0;
  border-radius: 0;
  color: transparent;
  font-size: 20px;
  font-weight: 950;
  font-style: italic;
  line-height: 1;
  letter-spacing: -.04em;
  background: linear-gradient(105deg, #e77fbb 0%, #ae8ad8 48%, #4ec2e2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: .2px rgba(255, 255, 255, .72);
  box-shadow: none;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .96),
    0 2px 4px rgba(78, 84, 130, .22);
  filter: drop-shadow(0 1px 2px rgba(64, 82, 116, .12));
  opacity: 1;
}

#vip .music-position-frame .music-worker-level::before,
#vip .music-position-frame .music-worker-level::after {
  display: none;
  content: none;
}

#vip .music-note-bubble {
  position: absolute;
  z-index: 6;
  isolation: isolate;
  top: -3px;
  right: -3px;
  display: grid;
  width: 24px;
  height: 24px;
  padding: 3px;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid transparent;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .99), rgba(255, 255, 255, .76) 44%, rgba(230, 247, 254, .68)) padding-box,
    conic-gradient(from 220deg, rgba(247, 185, 232, .92), rgba(255, 239, 249, .92), rgba(188, 238, 255, .98), rgba(247, 185, 232, .92)) border-box;
  box-shadow:
    0 2px 3px rgba(20, 29, 43, .12),
    0 8px 16px rgba(20, 29, 43, .18),
    inset 0 1px 1px rgba(255, 255, 255, .98),
    inset 0 -3px 6px rgba(168, 201, 226, .16);
}

#vip .music-note-bubble .music-position-icon,
#vip .music-worker-card.current .music-note-bubble .music-position-icon {
  position: relative;
  z-index: 1;
  width: 84% !important;
  height: 84% !important;
  margin: 0 !important;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  background: transparent;
  box-shadow: none;
  transform: none !important;
}

@media (max-width: 360px) {
  #vip .music-position-frame .music-worker-level {
    font-size: 18px;
  }

  #vip .music-note-bubble {
    top: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    padding: 3px;
  }
}

/* VIP detail rows use three matching light-blue line icons. */
#vip .music-worker-copy p span {
  display: inline-grid;
  width: 15px;
  height: 16px;
  flex: 0 0 15px;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: #65cbed;
  font-size: 14px;
  font-weight: 850;
  line-height: 16px;
  text-align: center;
  background: none !important;
  box-shadow: none;
  text-shadow: 0 1px 1px rgba(79, 177, 211, .18);
}

#vip .music-worker-copy p span::before,
#vip .music-worker-copy p span::after {
  display: none;
  content: none;
}

#vip .music-worker-copy p .vip-detail-icon {
  position: relative;
  color: #79cfee;
  filter:
    drop-shadow(0 -0.7px 0 rgba(255, 255, 255, .96))
    drop-shadow(0 1px 0 rgba(92, 181, 220, .58))
    drop-shadow(0 2px 2px rgba(69, 139, 178, .22));
}

#vip .music-worker-copy p .vip-detail-icon::before,
#vip .music-worker-copy p .vip-detail-icon::after {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

#vip .music-worker-copy p .vip-detail-icon.is-reward::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 rgba(82, 174, 215, .42);
  transform: translate(-50%, -50%);
}

#vip .music-worker-copy p .vip-detail-icon.is-reward::after {
  content: "$";
  display: grid;
  inset: 0;
  place-items: center;
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(75, 166, 207, .4);
}

#vip .music-worker-copy p .vip-detail-icon.is-task::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 12px;
  height: 13px;
  border: 1.8px solid currentColor;
  border-radius: 2.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 rgba(82, 174, 215, .42);
  transform: translate(-50%, -50%);
}

#vip .music-worker-copy p .vip-detail-icon.is-task::after {
  content: "✓";
  top: 1px;
  left: 3px;
  color: currentColor;
  font-size: 9px;
  font-weight: 900;
  line-height: 13px;
  text-shadow:
    0 -1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(75, 166, 207, .4);
}

#vip .music-worker-copy p .vip-detail-icon.is-term::before {
  content: "";
  top: 50%;
  left: 50%;
  width: 11px;
  height: 14px;
  border: 1.8px solid currentColor;
  border-radius: 2px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    0 1px 0 rgba(82, 174, 215, .42);
  transform: translate(-50%, -50%);
}

#vip .music-worker-copy p .vip-detail-icon.is-term::after {
  content: "";
  top: 5px;
  left: 5px;
  width: 5px;
  height: 1.3px;
  border-radius: 99px;
  background: currentColor;
  box-shadow:
    0 3px 0 currentColor,
    0 6px 0 currentColor,
    0 1px 0 rgba(255, 255, 255, .72);
}

/* Soft pink-to-blue gradient for the task music-player cards. */
#tasks .video-card {
  border: 1px solid transparent !important;
  background:
    linear-gradient(
        140deg,
        rgba(255, 244, 250, .92) 0%,
        rgba(252, 251, 255, .90) 48%,
        rgba(237, 250, 255, .92) 100%
      )
      padding-box,
    linear-gradient(
        90deg,
        rgba(247, 185, 232, .76),
        rgba(243, 247, 255, .80) 50%,
        rgba(188, 238, 255, .82)
      )
      border-box !important;
}

#tasks .cover,
#tasks .cover-b,
#tasks .cover-c {
  background:
    radial-gradient(circle at 24% 26%, rgba(255, 215, 242, .52), transparent 34%),
    radial-gradient(circle at 80% 74%, rgba(216, 246, 255, .72), transparent 38%),
    linear-gradient(
      135deg,
      rgba(255, 250, 253, .96),
      rgba(247, 246, 255, .90) 52%,
      rgba(241, 252, 255, .94)
    );
}

/* Unified glass music icons for every home reward group. */
#home .reward-group .avatar {
  position: relative;
  display: block;
  isolation: isolate;
  border: 1px solid transparent;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .98), rgba(255, 255, 255, .78) 55%, rgba(237, 249, 255, .72)) padding-box,
    conic-gradient(from 210deg, rgba(247, 185, 232, .82), rgba(255, 239, 249, .84), rgba(188, 238, 255, .92), rgba(247, 185, 232, .82)) border-box !important;
  box-shadow:
    0 7px 15px rgba(71, 92, 119, .13),
    inset 0 1px 1px rgba(255, 255, 255, .98);
}

#home .reward-group-head .avatar {
  width: 40px;
  height: 40px;
}

#home .reward-group .reward-card .avatar {
  width: 36px;
  height: 36px;
}

#home .reward-group .avatar::before,
#home .reward-group .avatar::after {
  box-sizing: border-box;
}

#home .reward-group .avatar.disc::before,
#home .reward-group .avatar.mini-disc::before {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 56%;
  height: 56%;
  border: 3px solid;
  border-color: #ee9fc8 #78d3e9 #78d3e9 #ee9fc8;
  border-radius: 50%;
  background: rgba(255, 255, 255, .86);
  transform: translate(-50%, -50%);
}

#home .reward-group .avatar.disc::after,
#home .reward-group .avatar.mini-disc::after {
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e892bf, #70cfe9);
  transform: translate(-50%, -50%);
  box-shadow: 0 1px 3px rgba(79, 125, 156, .16);
}

#home .reward-group .avatar.mini-note::before {
  left: 57%;
  top: 43%;
  width: 4px;
  height: 19px;
  border-radius: 99px;
  background: linear-gradient(180deg, #73d3eb, #ae91d8);
  transform: translate(-50%, -50%);
}

#home .reward-group .avatar.mini-note::after {
  left: 41%;
  top: 68%;
  width: 11px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0a1c9, #75d4eb);
  transform: translate(-50%, -50%) rotate(-12deg);
  box-shadow: 10px -15px 0 -3px #79d4ea;
}

#home .reward-group .avatar.wave::before {
  left: 33%;
  top: 50%;
  width: 3px;
  height: 17px;
  border-radius: 99px;
  background: #ef9bc5;
  transform: translate(-50%, -50%);
  box-shadow:
    6px -5px 0 #b29add,
    12px 3px 0 #73d2ea,
    18px -2px 0 #91dded;
}

#home .reward-group .avatar.wave::after {
  content: none;
}

#home .reward-group .avatar.mic::before {
  left: 50%;
  top: 42%;
  width: 9px;
  height: 17px;
  border-radius: 99px;
  background: linear-gradient(180deg, #7ed5eb, #a993d8 52%, #ee9ec6);
  transform: translate(-50%, -50%);
}

#home .reward-group .avatar.mic::after {
  left: 50%;
  top: 50%;
  width: 21px;
  height: 12px;
  border: 2px solid #73cee7;
  border-top: 0;
  border-radius: 0 0 999px 999px;
  background: transparent;
  transform: translateX(-50%);
}

#home .reward-group .avatar.headset::before {
  left: 50%;
  top: 47%;
  width: 23px;
  height: 16px;
  border: 3px solid #83d5ea;
  border-right-color: #aa93d9;
  border-bottom: 0;
  border-radius: 15px 15px 0 0;
  transform: translate(-50%, -50%);
}

#home .reward-group .avatar.headset::after {
  left: 22%;
  top: 53%;
  width: 6px;
  height: 12px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ef9cc6, #ad93d9);
  box-shadow: 19px 0 0 #74d2e9;
}

/* Keep the first membership grades softly colored without changing their layout. */
#vip .music-worker-card:nth-child(-n + 3) .music-worker-level {
  color: transparent;
  background-image: linear-gradient(
    105deg,
    rgba(222, 137, 184, 0.78) 0%,
    rgba(171, 155, 207, 0.74) 48%,
    rgba(96, 183, 211, 0.78) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}