/*
 * PeerMusic task/report secondary pages
 * Visual-only overrides for:
 * music-task-detail, my-tasks, daily-report and team-rewards.
 *
 * This file intentionally leaves the existing markup, copy and interaction
 * hooks untouched. Load it after secondary-reference.css.
 */

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  ) {
  --pm-task-ink: #17283f;
  --pm-task-text: #52657e;
  --pm-task-muted: #8a98ad;
  --pm-task-pink: #f5a7d6;
  --pm-task-pink-soft: #ffd9ef;
  --pm-task-blue: #69c7eb;
  --pm-task-blue-soft: #d9f5ff;
  --pm-task-violet: #a997eb;
  --pm-task-glass: rgba(255, 255, 255, 0.82);
  --pm-task-line: linear-gradient(
    105deg,
    rgba(247, 169, 215, 0.76),
    rgba(255, 255, 255, 0.98) 30%,
    rgba(235, 240, 255, 0.94) 56%,
    rgba(117, 207, 238, 0.78)
  );
  --pm-task-fill: linear-gradient(
    100deg,
    rgba(244, 151, 207, 0.9),
    rgba(177, 158, 232, 0.9) 52%,
    rgba(92, 196, 232, 0.92)
  );
  --pm-task-shadow:
    0 14px 34px rgba(112, 139, 181, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  --pm-task-shadow-soft:
    0 8px 22px rgba(121, 151, 192, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-header {
  min-height: 128px !important;
  padding:
    max(17px, env(safe-area-inset-top))
    17px
    11px !important;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-back {
  width: 44px !important;
  height: 44px !important;
  border-radius: 16px !important;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-brand {
  gap: 7px;
  min-height: 30px;
  font-size: 18px;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-brand
  i {
  font-size: 27px;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-title {
  margin-top: 8px !important;
  color: var(--pm-task-ink) !important;
  font-size: 26px !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-body {
  padding: 0 14px 15px !important;
}

.secondary-page-view:is(
    [data-secondary-view="music-task-detail"],
    [data-secondary-view="my-tasks"],
    [data-secondary-view="daily-report"],
    [data-secondary-view="team-rewards"]
  ) {
  gap: 14px !important;
  color: var(--pm-task-text);
}

.secondary-page-view:is(
    [data-secondary-view="music-task-detail"],
    [data-secondary-view="my-tasks"],
    [data-secondary-view="daily-report"],
    [data-secondary-view="team-rewards"]
  )
  :is(.secondary-page-card, .secondary-page-task, .secondary-page-stat) {
  border: 1px solid transparent !important;
  background:
    linear-gradient(var(--pm-task-glass), var(--pm-task-glass)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: var(--pm-task-shadow-soft) !important;
  -webkit-backdrop-filter: blur(22px) saturate(1.03) !important;
  backdrop-filter: blur(22px) saturate(1.03) !important;
}

.secondary-page-view:is(
    [data-secondary-view="music-task-detail"],
    [data-secondary-view="my-tasks"],
    [data-secondary-view="daily-report"],
    [data-secondary-view="team-rewards"]
  )
  :is(h2, h3, strong, b) {
  color: var(--pm-task-ink);
}

.secondary-page-view:is(
    [data-secondary-view="music-task-detail"],
    [data-secondary-view="my-tasks"],
    [data-secondary-view="daily-report"],
    [data-secondary-view="team-rewards"]
  )
  :is(p, small, span) {
  text-rendering: optimizeLegibility;
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-nav {
  min-height: 72px;
  margin: 0 10px max(8px, env(safe-area-inset-bottom));
  padding: 7px 5px;
  border-radius: 25px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.9), rgba(250, 253, 255, 0.84)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow: var(--pm-task-shadow);
}

.secondary-page-shell:has(
    .secondary-page-view:is(
        [data-secondary-view="music-task-detail"],
        [data-secondary-view="my-tasks"],
        [data-secondary-view="daily-report"],
        [data-secondary-view="team-rewards"]
      )
  )
  .secondary-page-nav-item.is-active {
  color: #5d91da;
  background: linear-gradient(
    115deg,
    rgba(255, 224, 242, 0.72),
    rgba(235, 248, 255, 0.88)
  );
  box-shadow:
    0 6px 15px rgba(129, 157, 202, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

/* Music task detail ------------------------------------------------------- */

.secondary-page-view[data-secondary-view="music-task-detail"] {
  gap: 14px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-player {
  position: relative;
  display: grid;
  gap: 13px;
  padding: 0 !important;
  overflow: visible;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

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

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover {
  position: relative;
  width: min(100%, 276px);
  min-height: 276px;
  margin-inline: auto;
  border: 1px solid transparent;
  border-radius: 34px;
  background:
    radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.98), transparent 28%),
    radial-gradient(circle at 78% 66%, rgba(216, 246, 255, 0.58), transparent 34%),
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(248, 252, 255, 0.74)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow:
    0 17px 38px rgba(121, 147, 190, 0.13),
    inset 0 0 0 5px rgba(255, 255, 255, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  -webkit-backdrop-filter: blur(24px) saturate(1.04);
  backdrop-filter: blur(24px) saturate(1.04);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover::before {
  width: 205px;
  height: 205px;
  left: 50%;
  bottom: auto;
  top: 50%;
  border-color: rgba(255, 255, 255, 0.7);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.62) 0 30%,
    rgba(244, 208, 236, 0.12) 31% 55%,
    rgba(190, 233, 251, 0.1) 56% 70%,
    transparent 71%
  );
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.16),
    0 0 0 36px rgba(216, 246, 255, 0.08);
  transform: translate(-50%, -50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover::after {
  width: 128px;
  height: 128px;
  right: -30px;
  top: -42px;
  background: rgba(216, 246, 255, 0.16);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover-glow {
  width: 126px;
  height: 126px;
  opacity: 0.82;
  border-color: rgba(255, 255, 255, 0.8);
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.86),
    rgba(248, 218, 238, 0.2) 54%,
    rgba(196, 235, 251, 0.16) 70%,
    transparent 72%
  );
  box-shadow:
    0 12px 32px rgba(133, 157, 197, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover img {
  width: 104px;
  height: 104px;
  opacity: 0.14;
  filter: saturate(0.72) brightness(1.15);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover > i {
  left: 19px;
  bottom: 17px;
  color: rgba(102, 137, 175, 0.28);
  font-size: 8px;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-waveform {
  position: absolute;
  z-index: 2;
  top: 69px;
  left: 50%;
  width: min(calc(100% - 52px), 245px);
  height: 138px;
  gap: 4px;
  padding: 9px 5px;
  pointer-events: none;
  transform: translateX(-50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-waveform > i {
  width: 4px;
  min-height: 10px;
  opacity: 0.42;
  background: linear-gradient(
    180deg,
    rgba(238, 151, 206, 0.72),
    rgba(169, 161, 229, 0.58) 52%,
    rgba(87, 194, 228, 0.76)
  );
  box-shadow: none;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-meta {
  gap: 4px;
  padding-top: 2px;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-meta
  > .secondary-page-badge {
  display: none;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-meta > h2 {
  font-size: 22px !important;
  font-weight: 950;
  letter-spacing: -0.035em;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-meta > p {
  margin: 0;
  color: #8290a7 !important;
  font-size: 12px;
  font-weight: 720;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-timeline {
  width: min(100%, 286px);
  margin: 0 auto;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-timeline
  > .secondary-page-progress {
  height: 7px;
  overflow: visible;
  background: rgba(220, 230, 241, 0.72) !important;
  box-shadow: inset 0 1px 3px rgba(91, 119, 154, 0.07);
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-timeline
  > .secondary-page-progress
  > span {
  position: relative;
  background: var(--pm-task-fill) !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-timeline
  > .secondary-page-progress
  > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -8px;
  width: 14px;
  height: 14px;
  border: 4px solid rgba(255, 255, 255, 0.94);
  border-radius: 50%;
  background: #bfeeff;
  box-shadow: 0 4px 12px rgba(112, 150, 191, 0.18);
  transform: translateY(-50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-timeline
  > .secondary-page-list-item {
  padding-top: 7px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-timeline
  > .secondary-page-list-item
  small {
  color: #718096 !important;
  font-size: 11px;
  font-weight: 720;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-controls {
  position: relative;
  display: grid;
  grid-template-columns: 0;
  justify-content: center;
  gap: 0;
  width: 0;
  height: 0;
  min-height: 0;
  margin: 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > button:not(.secondary-page-player-control) {
  width: 42px;
  height: 42px;
  color: #7487a8;
  background:
    linear-gradient(rgba(255, 255, 255, 0.84), rgba(250, 252, 255, 0.72)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow:
    0 9px 20px rgba(118, 144, 184, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > .secondary-page-player-control {
  position: absolute;
  z-index: 4;
  top: -336px;
  left: 50%;
  width: 92px;
  height: 92px;
  border: 1px solid transparent;
  color: transparent;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92) 0 42%, transparent 43%),
    linear-gradient(rgba(255, 255, 255, 0.68), rgba(250, 252, 255, 0.58)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow:
    0 15px 36px rgba(117, 143, 185, 0.15),
    inset 0 0 0 5px rgba(255, 255, 255, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
  transform: translateX(-50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > .secondary-page-player-control::before,
.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > .secondary-page-player-control::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 8px;
  height: 34px;
  border-radius: 99px;
  background: var(--pm-task-fill);
  transform: translateY(-50%);
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > .secondary-page-player-control::before {
  left: 35px;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .music-task-controls
  > .secondary-page-player-control::after {
  right: 35px;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics {
  gap: 9px;
  margin-top: 2px;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics > article {
  min-height: 78px;
  padding: 13px 10px;
  border-radius: 22px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(248, 252, 255, 0.76)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow: var(--pm-task-shadow-soft);
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics strong {
  background: var(--pm-task-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 24px;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .music-task-metrics span {
  color: var(--pm-task-muted);
  font-size: 9px;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  > .secondary-page-form {
  gap: 14px;
  padding: 17px !important;
  border-radius: 24px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] .secondary-page-rating {
  gap: 5px;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .secondary-page-rating
  > legend {
  margin-bottom: 2px;
  color: var(--pm-task-ink);
  font-size: 13px;
  font-weight: 850;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  .secondary-page-rating
  > label {
  min-height: 38px;
  font-size: 21px;
}

.secondary-page-view[data-secondary-view="music-task-detail"]
  > .secondary-page-form
  .secondary-page-button {
  width: 100%;
  min-height: 50px !important;
  border-radius: 18px !important;
}

.secondary-page-view[data-secondary-view="music-task-detail"] > .secondary-page-note {
  padding: 16px 18px !important;
  border-radius: 22px !important;
}

/* My tasks --------------------------------------------------------------- */

.secondary-page-view[data-secondary-view="my-tasks"] {
  display: grid;
  gap: 14px !important;
}

.secondary-page-view[data-secondary-view="my-tasks"] > .secondary-page-segmented {
  order: 1;
  gap: 2px;
  padding: 5px;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(250, 253, 255, 0.78)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow: var(--pm-task-shadow-soft);
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-segmented
  button {
  min-height: 48px;
  border-radius: 21px;
  color: #526078;
  font-size: 14px;
  font-weight: 850;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-segmented
  button.is-active {
  color: #fff;
  background: var(--pm-task-fill);
  box-shadow:
    0 9px 22px rgba(127, 156, 208, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child {
  order: 2;
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  align-items: center;
  min-height: 138px;
  padding: 20px 20px 18px 132px !important;
  overflow: hidden;
  border-radius: 28px !important;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 88px;
  height: 88px;
  border: 12px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.94) 0 48%, transparent 49%),
    conic-gradient(
      var(--pm-task-pink) 0 16%,
      var(--pm-task-violet) 16% 28%,
      var(--pm-task-blue) 28% 40%,
      rgba(227, 237, 247, 0.8) 40% 100%
    );
  box-shadow:
    0 9px 22px rgba(126, 151, 191, 0.11),
    inset 0 0 0 1px rgba(255, 255, 255, 0.9);
  transform: translateY(-50%);
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-list-item {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 8px;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-list-item
  h2 {
  font-size: 17px !important;
  font-weight: 900;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-list-item
  b {
  color: var(--pm-task-ink);
  font-size: 18px;
  font-weight: 900;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-progress {
  grid-column: 1 / -1;
  height: 12px;
  margin-top: 8px;
  background: rgba(224, 233, 243, 0.72) !important;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-progress
  > span {
  background: var(--pm-task-fill) !important;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  > .secondary-page-card:first-child
  > .secondary-page-muted {
  grid-column: 1 / -1;
  margin-top: 6px;
  color: #7f8fa5 !important;
  font-size: 11px;
  font-weight: 720;
}

.secondary-page-view[data-secondary-view="my-tasks"] > .secondary-page-list {
  order: 3;
  gap: 12px;
}

.secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task {
  grid-template-columns: 58px minmax(0, 1fr) auto;
  gap: 13px;
  min-height: 96px !important;
  padding: 15px 16px !important;
  border-radius: 25px !important;
}

.secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task-icon {
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255, 255, 255, 0.96);
  border-radius: 19px;
  color: #ed75b8;
  font-size: 23px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255, 255, 255, 0.98), transparent 42%),
    linear-gradient(145deg, rgba(255, 222, 241, 0.88), rgba(238, 245, 255, 0.92));
  box-shadow:
    0 9px 20px rgba(128, 151, 191, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.98);
}

.secondary-page-view[data-secondary-view="my-tasks"]
  .secondary-page-task:nth-child(2)
  .secondary-page-task-icon {
  color: #749cdf;
  background: linear-gradient(145deg, rgba(239, 234, 255, 0.9), rgba(223, 247, 255, 0.94));
}

.secondary-page-view[data-secondary-view="my-tasks"]
  .secondary-page-task:nth-child(3)
  .secondary-page-task-icon {
  color: #70b8e5;
  background: linear-gradient(145deg, rgba(225, 245, 255, 0.94), rgba(241, 236, 255, 0.9));
}

.secondary-page-view[data-secondary-view="my-tasks"]
  .secondary-page-task:nth-child(4)
  .secondary-page-task-icon {
  color: #a68be5;
}

.secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task-title {
  overflow: visible;
  color: var(--pm-task-ink) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.3;
  white-space: normal;
}

.secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task-meta {
  margin-top: 5px;
  color: #7f90a7 !important;
  font-size: 10px !important;
  font-weight: 700;
}

.secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task-status {
  min-width: 66px;
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  color: #e467a9 !important;
  font-size: 10px !important;
  background:
    linear-gradient(rgba(255, 242, 249, 0.9), rgba(255, 242, 249, 0.86)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: 0 6px 14px rgba(130, 153, 194, 0.09) !important;
}

.secondary-page-view[data-secondary-view="my-tasks"]
  .secondary-page-task[data-task-status="done"]
  .secondary-page-task-status {
  color: #55a9dd !important;
  background:
    linear-gradient(rgba(235, 248, 255, 0.92), rgba(235, 248, 255, 0.88)) padding-box,
    var(--pm-task-line) border-box !important;
}

/* Daily report ----------------------------------------------------------- */

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

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-filter {
  grid-template-columns: minmax(0, 1fr) 78px;
  gap: 10px;
  align-items: end;
  padding: 16px !important;
  border-radius: 24px !important;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-filter
  .secondary-page-field {
  gap: 7px;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-filter
  .secondary-page-field
  > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 820;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-filter
  .secondary-page-input {
  min-height: 48px;
  border-radius: 16px !important;
  color: var(--pm-task-ink);
  font-size: 13px;
  font-weight: 820;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-filter
  .secondary-page-button {
  min-width: 0;
  min-height: 48px !important;
  padding-inline: 12px !important;
  border-radius: 16px !important;
  color: #407897 !important;
  font-size: 12px !important;
  background:
    linear-gradient(rgba(218, 245, 255, 0.92), rgba(204, 238, 251, 0.9)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: 0 8px 18px rgba(111, 171, 202, 0.13) !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-overview {
  display: grid;
  gap: 16px;
  padding: 18px !important;
  overflow: hidden;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at 92% 5%, rgba(216, 246, 255, 0.58), transparent 35%),
    radial-gradient(circle at 2% 98%, rgba(255, 215, 242, 0.26), transparent 32%),
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(249, 252, 255, 0.78)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: var(--pm-task-shadow) !important;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-heading {
  min-height: 44px;
  padding: 0 2px;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-heading
  small {
  margin-bottom: 4px;
  color: #9a82bb !important;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.16em;
}

.secondary-page-view[data-secondary-view="daily-report"] .daily-report-heading h2 {
  color: var(--pm-task-ink) !important;
  font-size: 18px !important;
  font-weight: 920;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-heading
  > span {
  padding: 6px 10px;
  border: 1px solid transparent;
  color: #6e82a0;
  font-size: 9px;
  font-weight: 800;
  background:
    linear-gradient(rgba(246, 249, 255, 0.9), rgba(239, 249, 255, 0.86)) padding-box,
    var(--pm-task-line) border-box;
}

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

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-summary
  .secondary-page-stat {
  display: grid;
  align-content: center;
  min-height: 110px;
  padding: 15px 14px !important;
  overflow: hidden;
  border-radius: 22px !important;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-summary
  .secondary-page-stat::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -22px;
  width: 72px;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.62) 0 35%,
    rgba(216, 246, 255, 0.18) 36% 64%,
    transparent 65%
  );
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-summary
  .secondary-page-stat
  span {
  position: relative;
  z-index: 1;
  min-height: 0;
  color: #6f7f96;
  font-size: 10px;
  font-weight: 780;
}

.secondary-page-view[data-secondary-view="daily-report"]
  .daily-report-summary
  .secondary-page-stat
  strong {
  position: relative;
  z-index: 1;
  margin-top: 10px;
  background: var(--pm-task-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 27px;
  font-weight: 950;
  letter-spacing: -0.035em;
}

/* Team rewards ----------------------------------------------------------- */

.secondary-page-shell.is-full-page:has(
    .secondary-page-view[data-secondary-view="team-rewards"]
  )
  .secondary-page-body {
  display: block !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] {
  display: grid;
  grid-template-rows: auto auto !important;
  gap: 15px !important;
  min-height: auto !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-overview {
  display: grid;
  align-content: start !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 19px !important;
  overflow: hidden;
  border-radius: 29px !important;
  background:
    radial-gradient(circle at 4% 5%, rgba(255, 215, 242, 0.32), transparent 31%),
    radial-gradient(circle at 96% 20%, rgba(216, 246, 255, 0.62), transparent 37%),
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(249, 252, 255, 0.78)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: var(--pm-task-shadow) !important;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-reward-summary-title {
  gap: 7px;
  min-height: 34px;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-reward-summary-title
  h2 {
  color: var(--pm-task-ink) !important;
  font-size: 20px !important;
  font-weight: 940;
  letter-spacing: -0.035em;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-reward-summary-title
  > span,
.secondary-page-view[data-secondary-view="team-rewards"]
  .team-reward-summary-title
  > i {
  font-size: 14px;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-member-summary {
  grid-template-columns: 132px minmax(0, 1fr);
  gap: 18px;
  min-height: 138px;
  padding: 18px 20px;
  border: 1px solid transparent;
  border-radius: 25px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.8), rgba(249, 252, 255, 0.76)) padding-box,
    var(--pm-task-line) border-box;
  box-shadow: var(--pm-task-shadow-soft);
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-member-avatars {
  height: 90px;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-member-avatars
  > span {
  top: 22px;
  width: 58px;
  height: 58px;
  border-width: 3px;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-member-avatars
  > span:nth-child(1) {
  left: 0;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-member-avatars
  > span:nth-child(2) {
  left: 38px;
  top: 4px;
  width: 82px;
  height: 82px;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-member-avatars
  > span:nth-child(3) {
  right: -2px;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-member-summary small {
  color: #64758e;
  font-size: 12px;
  font-weight: 800;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-member-summary strong {
  margin-top: 6px;
  color: var(--pm-task-ink);
  font-size: 46px;
  font-weight: 950;
  letter-spacing: -0.045em;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-member-summary
  strong
  em {
  font-size: 13px;
  font-weight: 820;
}

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

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-weekly-network
  .secondary-page-stat {
  display: grid;
  align-content: center;
  min-height: 94px;
  padding: 14px !important;
  border-radius: 22px !important;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-weekly-network
  .secondary-page-stat
  span {
  min-height: 0;
  color: #728197;
  font-size: 10px;
  font-weight: 800;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-weekly-network
  .secondary-page-stat
  strong {
  margin-top: 8px;
  background: var(--pm-task-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 22px;
  font-weight: 950;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-total {
  display: grid;
  gap: 8px;
  min-height: 154px;
  padding: 21px !important;
  overflow: hidden;
  border-radius: 29px !important;
  background:
    radial-gradient(circle at 88% 22%, rgba(216, 246, 255, 0.56), transparent 34%),
    radial-gradient(circle at 9% 90%, rgba(255, 215, 242, 0.3), transparent 35%),
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(249, 252, 255, 0.78)) padding-box,
    var(--pm-task-line) border-box !important;
  box-shadow: var(--pm-task-shadow) !important;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-weekly-total::after {
  right: -30px;
  bottom: -42px;
  width: 152px;
  height: 152px;
  opacity: 0.7;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-total > span {
  color: #62738c;
  font-size: 12px;
  font-weight: 820;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-total > strong {
  background: var(--pm-task-fill);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 38px;
  font-weight: 950;
}

.secondary-page-view[data-secondary-view="team-rewards"]
  .team-weekly-total
  > strong
  small {
  color: #718096;
  font-size: 11px;
}

.secondary-page-view[data-secondary-view="team-rewards"] .team-weekly-total > p {
  max-width: 72%;
  color: #8996a8 !important;
  font-size: 10px;
  line-height: 1.5;
}

@media (max-width: 360px) {
  .secondary-page-shell:has(
      .secondary-page-view:is(
          [data-secondary-view="music-task-detail"],
          [data-secondary-view="my-tasks"],
          [data-secondary-view="daily-report"],
          [data-secondary-view="team-rewards"]
        )
    )
    .secondary-page-header {
    min-height: 121px !important;
    padding-inline: 12px !important;
  }

  .secondary-page-view[data-secondary-view="music-task-detail"] .music-task-cover {
    width: min(100%, 258px);
    min-height: 258px;
  }

  .secondary-page-view[data-secondary-view="music-task-detail"]
    .music-task-controls
    > .secondary-page-player-control {
    top: -319px;
  }

  .secondary-page-view[data-secondary-view="my-tasks"]
    > .secondary-page-card:first-child {
    min-height: 130px;
    padding: 18px 15px 16px 116px !important;
  }

  .secondary-page-view[data-secondary-view="my-tasks"]
    > .secondary-page-card:first-child::before {
    left: 16px;
    width: 78px;
    height: 78px;
    border-width: 10px;
  }

  .secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 9px;
    padding-inline: 12px !important;
  }

  .secondary-page-view[data-secondary-view="my-tasks"] .secondary-page-task-icon {
    width: 48px;
    height: 48px;
  }

  .secondary-page-view[data-secondary-view="team-rewards"] .team-member-summary {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 14px;
  }

  .secondary-page-view[data-secondary-view="team-rewards"]
    .team-member-avatars
    > span:nth-child(2) {
    left: 29px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .secondary-page-view:is(
      [data-secondary-view="music-task-detail"],
      [data-secondary-view="my-tasks"],
      [data-secondary-view="daily-report"],
      [data-secondary-view="team-rewards"]
    )
    *,
  .secondary-page-view:is(
      [data-secondary-view="music-task-detail"],
      [data-secondary-view="my-tasks"],
      [data-secondary-view="daily-report"],
      [data-secondary-view="team-rewards"]
    )
    *::before,
  .secondary-page-view:is(
      [data-secondary-view="music-task-detail"],
      [data-secondary-view="my-tasks"],
      [data-secondary-view="daily-report"],
      [data-secondary-view="team-rewards"]
    )
    *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}