/* MP3 mobile flow: show one step at a time, never list pagination above player. */
@media (max-width: 980px) {
  html body.view-mp3 .mp3-shell[data-mobile-step="types"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="types"] .mp3-player-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-hero,
  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-player-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-player-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-hero,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-list-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-pagination {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-layout {
    display: block !important;
    width: 100% !important;
    max-width: min(760px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    position: relative !important;
    top: 0 !important;
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 104px) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout {
    display: block !important;
    width: 100% !important;
    max-width: min(760px, calc(100vw - 20px)) !important;
    margin: 0 auto !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    display: grid !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100dvh - 104px) !important;
    overflow: visible !important;
  }
}

/* MP3 home-aligned glass system: keep this as the final mobile override. */
@media (max-width: 980px) {
  html body.view-mp3 {
    --mp3-home-ink: rgba(18, 24, 35, 0.92);
    --mp3-home-soft: rgba(48, 60, 78, 0.78);
    --mp3-home-muted: rgba(112, 126, 146, 0.8);
    --mp3-home-green: #21bfa9;
    --mp3-home-yellow: #ffd128;
    --mp3-home-edge: rgba(255, 255, 255, 0.82);
    --mp3-home-glass:
      radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.22), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.32) 100%);
    --mp3-home-card-shadow:
      0 22px 38px -27px rgba(111, 80, 10, 0.22),
      inset 1px 0 0 rgba(255, 237, 152, 0.28),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(104, 73, 8, 0.035);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
    background-attachment: fixed !important;
    color: var(--mp3-home-ink) !important;
  }

  html body.view-mp3 .app-shell,
  html body.view-mp3 .main,
  html body.view-mp3 #mp3.active-view {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-mp3 #mp3.active-view::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
    background-size: 100% 100%, 120% 120%, 120% 120%, 100% 100% !important;
    background-position: 0 0, -4% 16%, 104% 34%, 0 0 !important;
    filter: none !important;
    opacity: 1 !important;
    animation: mp3HomeAmberViewportDrift 32s ease-in-out infinite alternate !important;
    transform: translateZ(0) !important;
  }

  html body.view-mp3 .sidebar,
  html body.view-mp3 .topbar,
  html body.view-mp3 .site-header,
  html body.view-mp3 .site-beian,
  html body.view-mp3 .app-install-banner {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 14px !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: 980px !important;
    margin: 0 auto !important;
    padding: 34px 16px 118px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body.view-mp3 .mp3-shell::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 18px !important;
    z-index: 0 !important;
    width: calc(100% - 32px) !important;
    height: 900px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 34px !important;
    pointer-events: none !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018) 63%, rgba(255, 255, 255, 0)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(122, 91, 12, 0.02) !important;
  }

  html body.view-mp3 .mp3-shell > .mp3-hero,
  html body.view-mp3 .mp3-shell > .mp3-layout {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
    border: 1px solid var(--mp3-home-edge) !important;
    background: var(--mp3-home-glass) !important;
    -webkit-backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    box-shadow: var(--mp3-home-card-shadow) !important;
  }

  html body.view-mp3 :is(.mp3-hero-stats article, .mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs, .mp3-tabs button.active, .mp3-play-all, .mp3-pagination, .mp3-pagination button, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    background:
      radial-gradient(80% 100% at 94% 50%, rgba(255, 222, 88, 0.16), rgba(255, 255, 255, 0) 60%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 55%, rgba(255, 255, 255, 0.14)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.26) brightness(1.04) !important;
    backdrop-filter: blur(22px) saturate(1.26) brightness(1.04) !important;
    box-shadow:
      0 18px 30px -24px rgba(91, 67, 11, 0.18),
      inset 1px 0 0 rgba(255, 226, 98, 0.12),
      inset -1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(72, 51, 7, 0.025) !important;
    color: var(--mp3-home-soft) !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    gap: 14px !important;
    min-height: 170px !important;
    padding: 16px !important;
    border-radius: 28px !important;
    animation: mp3HomeCardRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-back-button {
    display: none !important;
  }

  html body.view-mp3 .mp3-hero-main {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
  }

  html body.view-mp3 .mp3-orb {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    background:
      radial-gradient(circle at 50% 45%, rgba(255, 208, 44, 0.92), rgba(255, 194, 24, 0.96) 62%, rgba(255, 176, 0, 0.9) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(126, 82, 10, 0.08),
      0 12px 24px rgba(128, 84, 12, 0.12) !important;
    color: transparent !important;
  }

  html body.view-mp3 .mp3-orb img {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    transform: none !important;
    filter: none !important;
  }

  html body.view-mp3 .mp3-hero .eyebrow,
  html body.view-mp3 .mp3-hero p {
    margin: 0 0 4px !important;
    color: rgba(29, 191, 169, 0.9) !important;
    font-size: 12px !important;
    line-height: 1.1 !important;
    font-weight: 680 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-mp3 :is(.mp3-hero h2, .mp3-panel-head h3, .mp3-player-panel h3, .mp3-mobile-detail-head strong, .mp3-mobile-player-head strong, .mp3-type-list button strong, .mp3-question-item strong, .mp3-play-all strong) {
    color: var(--mp3-home-ink) !important;
    font-weight: 660 !important;
    letter-spacing: 0 !important;
    font-variation-settings: "wght" 660 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 -1px 0 rgba(111, 83, 18, 0.045) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.06 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 60px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    display: block !important;
    color: var(--mp3-home-green) !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 780 !important;
    text-shadow: 0 5px 14px rgba(33, 191, 169, 0.16) !important;
  }

  html body.view-mp3 :is(.mp3-hero-stats span, .mp3-panel-head span, .mp3-type-list button small, .mp3-question-item p, .mp3-mobile-detail-head span, .mp3-mobile-player-head span) {
    color: var(--mp3-home-muted) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mp3 .mp3-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.view-mp3 :is(.mp3-type-panel, .mp3-list-panel, .mp3-player-panel) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-type-panel {
    animation: mp3HomeCardRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) 70ms both !important;
  }

  html body.view-mp3 .mp3-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-panel-head span {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html body.view-mp3 .mp3-type-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 148px !important;
    min-height: 148px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    animation: mp3HomeTypeCardIn 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-type-list button > span,
  html body.view-mp3 .mp3-player-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2aa47b !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    min-width: 48px !important;
    max-width: 82px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button:nth-child(1) > span,
  html body.view-mp3 .mp3-player-badge { color: #7b4eea !important; border-color: rgba(149, 111, 255, 0.38) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(238, 231, 255, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(2) > span { color: #20996a !important; border-color: rgba(76, 190, 143, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(223, 244, 234, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(3) > span { color: #1d74d8 !important; border-color: rgba(98, 169, 255, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(228, 241, 255, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(4) > span { color: #159eaa !important; border-color: rgba(98, 198, 212, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(226, 246, 247, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(5) > span { color: #b56d12 !important; border-color: rgba(238, 181, 91, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 241, 212, 0.52)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(6) > span { color: #d84f5f !important; border-color: rgba(239, 132, 146, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 229, 232, 0.52)) !important; }

  html body.view-mp3 .mp3-type-list button div {
    display: block !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-type-list button strong {
    position: absolute !important;
    left: 14px !important;
    right: 34px !important;
    top: 58px !important;
    display: -webkit-box !important;
    max-height: 50px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  html body.view-mp3 .mp3-type-list button small {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 15px !important;
    top: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    padding: 0 !important;
    color: rgba(42, 51, 67, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-style: normal !important;
    font-weight: 660 !important;
    text-align: right !important;
  }

  html body.view-mp3 .mp3-type-list button::after {
    content: "›" !important;
    position: absolute !important;
    right: 14px !important;
    bottom: 18px !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: rgba(109, 123, 145, 0.82) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  html body.view-mp3 .mp3-type-list button.active {
    background:
      radial-gradient(96% 86% at 96% 0%, rgba(255, 216, 76, 0.2), rgba(255, 255, 255, 0) 62%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5) 54%, rgba(255, 255, 255, 0.28)) !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head button,
  html body.view-mp3 .mp3-mobile-player-head button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 19px !important;
    color: rgba(64, 52, 20, 0.86) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head strong,
  html body.view-mp3 .mp3-mobile-player-head strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  html body.view-mp3 .mp3-search {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-search input {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--mp3-home-soft) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 570 !important;
    line-height: 34px !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 50px !important;
    padding: 5px !important;
    border-radius: 25px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #78869a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    color: var(--mp3-home-ink) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-play-all {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    margin: 12px 0 !important;
    padding: 8px 13px !important;
    border-radius: 29px !important;
  }

  html body.view-mp3 .mp3-play-all span {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    color: rgba(18, 24, 35, 0.92) !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.22) 52%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 233, 146, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 18px rgba(128, 92, 8, 0.12) !important;
  }

  html body.view-mp3 .mp3-question-list {
    display: grid !important;
    gap: 11px !important;
    padding-bottom: 14px !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 92px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    min-height: 92px !important;
    padding: 14px 44px 14px 14px !important;
    gap: 11px !important;
    background: transparent !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-player-panel {
    display: grid !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  html body.view-mp3 .mp3-player-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 38px !important;
  }

  html body.view-mp3 .mp3-player-top > span {
    color: var(--mp3-home-green) !important;
    font-size: 15px !important;
    font-weight: 740 !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    font-size: 18px !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    margin: -52px 0 0 72px !important;
    min-height: 58px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  html body.view-mp3 .mp3-transcript {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.24)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.1),
      0 16px 26px rgba(94, 72, 25, 0.055) !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    color: rgba(31, 39, 52, 0.66) !important;
    font-size: 19px !important;
    line-height: 1.42 !important;
    font-weight: 580 !important;
  }

  html body.view-mp3 .mp3-lyric-line.active {
    color: rgba(18, 24, 35, 0.94) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-progress-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mp3-home-muted) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
  }

  html body.view-mp3 #mp3Progress {
    width: 100% !important;
    accent-color: var(--mp3-home-green) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    margin-top: -6px !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    background: var(--mp3-home-green) !important;
    box-shadow: 0 6px 14px rgba(33, 191, 169, 0.24) !important;
  }

  html body.view-mp3 .mp3-control-row {
    display: grid !important;
    grid-template-columns: 42px 42px 60px 42px 54px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-control-row button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: rgba(38, 48, 65, 0.82) !important;
    font-size: 17px !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton {
    width: 54px !important;
    border-radius: 21px !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 56%, rgba(255, 255, 255, 0.18) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 235, 150, 0.42)) !important;
    box-shadow:
      0 16px 24px -18px rgba(73, 55, 12, 0.28),
      0 0 18px rgba(33, 191, 169, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(101, 70, 6, 0.05) !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play::before {
    content: "▶" !important;
    display: block !important;
    color: rgba(18, 24, 35, 0.94) !important;
    font-size: 21px !important;
    line-height: 1 !important;
    transform: translateX(1px) !important;
  }

  html body.view-mp3 .mp3-player-panel.is-playing .mp3-control-row .mp3-main-play::before {
    content: "Ⅱ" !important;
    transform: translateX(0) !important;
    font-size: 22px !important;
    letter-spacing: -0.16em !important;
  }

  html body.view-mp3 .mp3-understand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-understand-row button,
  html body.view-mp3 .mp3-subtitle-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    color: rgba(64, 52, 20, 0.86) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: center !important;
  }

  html body.view-mp3 .mobile-tabbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    width: min(354px, calc(100vw - 32px)) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 31px !important;
    transform: translateX(-50%) !important;
    background:
      radial-gradient(86% 120% at 88% 8%, rgba(255, 246, 174, 0.24), rgba(255, 255, 255, 0) 58%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.22)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) brightness(1.03) !important;
    backdrop-filter: blur(24px) saturate(1.22) brightness(1.03) !important;
    box-shadow:
      0 20px 34px rgba(81, 63, 21, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(111, 83, 18, 0.035) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab {
    position: relative !important;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 54px !important;
    min-height: 54px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    color: rgba(133, 144, 161, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
      color 220ms ease,
      background 260ms ease,
      box-shadow 260ms ease,
      transform 260ms cubic-bezier(0.2, 0.9, 0.22, 1),
      flex-basis 260ms cubic-bezier(0.2, 0.9, 0.22, 1) !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="dashboard"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 10.7 12 4l8 6.7v8.2a1.7 1.7 0 0 1-1.7 1.7h-4.1v-5.1H9.8v5.1H5.7A1.7 1.7 0 0 1 4 18.9zM6.2 11.7v6.7h1.5v-5.1h8.6v5.1h1.5v-6.7L12 6.8z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 10.7 12 4l8 6.7v8.2a1.7 1.7 0 0 1-1.7 1.7h-4.1v-5.1H9.8v5.1H5.7A1.7 1.7 0 0 1 4 18.9zM6.2 11.7v6.7h1.5v-5.1h8.6v5.1h1.5v-6.7L12 6.8z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="practice"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.4 4.2h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2ZM6.4 12.3h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm-8.1-6a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm-8.1 8.1a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.4 4.2h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2ZM6.4 12.3h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm-8.1-6a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm-8.1 8.1a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="profile"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4.6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2 5.5c-4.2 0-7.4 2.4-7.4 5.4v.9h2v-.9c0-1.6 2.3-3.4 5.4-3.4s5.4 1.8 5.4 3.4v.9h2v-.9c0-3-3.2-5.4-7.4-5.4Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4.6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2 5.5c-4.2 0-7.4 2.4-7.4 5.4v.9h2v-.9c0-1.6 2.3-3.4 5.4-3.4s5.4 1.8 5.4 3.4v.9h2v-.9c0-3-3.2-5.4-7.4-5.4Z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab span {
    display: block !important;
    margin: 0 !important;
    color: currentColor !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active {
    flex: 0 0 104px !important;
    color: rgba(29, 37, 48, 0.96) !important;
    border: 1.15px solid rgba(255, 255, 255, 0.96) !important;
    background:
      linear-gradient(142deg, rgba(255, 255, 255, 0.7) 15%, rgba(255, 255, 255, 0.42) 47%, rgba(255, 255, 255, 0.22) 72%) !important;
    box-shadow:
      0 12px 21px rgba(21, 32, 51, 0.08),
      inset 0 -1px 0 rgba(15, 31, 46, 0.03),
      inset -1px 0 8px rgba(255, 235, 178, 0.04),
      inset 1px 0 8px rgba(189, 255, 242, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    animation: mp3HomeTabPop 420ms cubic-bezier(0.2, 0.9, 0.22, 1) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active::before {
    transform: scale(1.1) translateY(-1px) !important;
    background: linear-gradient(180deg, #1e2632, #111723) !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab, .mp3-hero-stats article) {
    transform-origin: center center !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition:
      transform 220ms cubic-bezier(0.2, 0.9, 0.22, 1),
      filter 220ms ease,
      box-shadow 240ms ease,
      background 220ms ease,
      color 220ms ease !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab, .mp3-hero-stats article):active {
    transform: scale(0.972) translateY(1px) !important;
    filter: saturate(1.08) brightness(1.018) !important;
  }

  @keyframes mp3HomeAmberViewportDrift {
    0% { background-position: 0 0, -4% 16%, 104% 34%, 0 0; }
    48% { background-position: 0 0, 1% 23%, 96% 30%, 0 0; }
    100% { background-position: 0 0, -10% 26%, 110% 40%, 0 0; }
  }

  @keyframes mp3HomeCardRise {
    0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  @keyframes mp3HomeTypeCardIn {
    0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.98); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  @keyframes mp3HomeTabPop {
    0% { transform: scale(1); }
    42% { transform: scale(1.085) translateY(-1px); }
    72% { transform: scale(0.985); }
    100% { transform: scale(1); }
  }
}

/* Mobile MP3 final shell: align with the yellow fixed-background glass system. */
@media (max-width: 760px) {
  html body.view-mp3 {
    --mp3-bank-ink: rgba(18, 24, 35, 0.9);
    --mp3-bank-soft: rgba(34, 43, 58, 0.76);
    --mp3-bank-muted: rgba(91, 107, 128, 0.82);
    --mp3-bank-embed: 0 1px 0 rgba(255, 255, 255, 0.66), 0 -1px 0 rgba(111, 83, 18, 0.055);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background:
      linear-gradient(112deg, rgba(255, 224, 74, 0.55) 0%, rgba(255, 238, 151, 0.22) 28%, rgba(255, 255, 255, 0) 50%),
      linear-gradient(252deg, rgba(255, 246, 206, 0.5) 0%, rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #ffd94b 0%, #ffe78c 16%, #fff3cd 34%, #fffaf1 52%, #ffffff 72%, #ffffff 100%) !important;
    background-attachment: fixed !important;
    color: #121722 !important;
  }

  html body.view-mp3 .sidebar,
  html body.view-mp3 .topbar {
    display: none !important;
  }

  html body.view-mp3 .app-shell,
  html body.view-mp3 .main,
  html body.view-mp3 #mp3.active-view {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-mp3 #mp3.active-view::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(104deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0) 50%),
      linear-gradient(260deg, rgba(178, 255, 232, 0.1) 0%, rgba(255, 255, 255, 0) 44%);
    filter: blur(24px);
    opacity: 0.3;
    animation: mp3MobileBgFloat 26s ease-in-out infinite alternate;
  }

  html body.view-mp3 .mp3-shell {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 18px !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 36px clamp(18px, 4.7vw, 20px) 120px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background-color: rgba(255, 255, 255, 0.24) !important;
    background-image:
      radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 10%), rgba(255, 255, 255, 0.3), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 218, 88, 0.13),
      0 18px 42px rgba(94, 72, 25, 0.08) !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    gap: 15px !important;
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 36px !important;
    animation: mp3MobileRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
  }

  html body.view-mp3 .mp3-back-button {
    display: none !important;
  }

  html body.view-mp3 .mp3-hero-main {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-orb {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.46), transparent 42%),
      linear-gradient(145deg, rgba(255, 215, 56, 0.88), rgba(255, 194, 32, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(126, 82, 10, 0.08),
      0 12px 24px rgba(128, 84, 12, 0.12) !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-orb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38));
  }

  html body.view-mp3 .mp3-hero h2,
  html body.view-mp3 .mp3-panel-head h3,
  html body.view-mp3 .mp3-player-panel h3,
  html body.view-mp3 .mp3-mobile-detail-head strong,
  html body.view-mp3 .mp3-mobile-player-head strong {
    margin: 0 !important;
    color: var(--mp3-bank-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    font-variation-settings: "wght" 700 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-hero p,
  html body.view-mp3 .mp3-panel-head span,
  html body.view-mp3 .mp3-mobile-detail-head span,
  html body.view-mp3 .mp3-mobile-player-head span,
  html body.view-mp3 .mp3-type-list button small,
  html body.view-mp3 .mp3-question-item p {
    color: var(--mp3-bank-muted) !important;
    font-weight: 540 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mp3 .mp3-hero p {
    margin: 5px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body.view-mp3 .mp3-hero-stats article,
  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs, .mp3-tabs button.active, .mp3-play-all, .mp3-pagination, .mp3-pagination button, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.16)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.11),
      0 14px 30px rgba(94, 72, 25, 0.055) !important;
    color: var(--mp3-bank-soft) !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 62px !important;
    padding: 11px 12px !important;
    border-radius: 22px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    color: rgba(28, 35, 48, 0.88) !important;
    font-size: 22px !important;
    font-weight: 660 !important;
    line-height: 1 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-hero-stats span {
    margin-top: 6px !important;
    color: var(--mp3-bank-muted) !important;
    font-size: 11px !important;
    font-weight: 540 !important;
  }

  html body.view-mp3 .mp3-type-panel {
    padding: 18px !important;
    border-radius: 34px !important;
    animation: mp3MobileRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) 70ms both;
  }

  html body.view-mp3 .mp3-panel-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-panel-head span {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-type-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 134px !important;
    min-height: 134px !important;
    padding: 14px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    transform: translateY(10px) !important;
    animation: mp3MobileCardIn 540ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 46px !important;
    max-width: 74px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
    font-weight: 690 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button div {
    display: block !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-type-list button strong {
    position: absolute !important;
    left: 14px !important;
    top: 56px !important;
    width: calc(100% - 30px) !important;
    max-height: 42px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: var(--mp3-bank-ink) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-type-list button small {
    position: absolute !important;
    left: 14px !important;
    top: 103px !important;
    width: calc(100% - 30px) !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    position: absolute !important;
    right: 14px !important;
    top: 18px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: rgba(42, 51, 67, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
    text-align: right !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-type-list button.active {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background-color: rgba(255, 255, 255, 0.36) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.96),
      inset 0 -1px 0 rgba(255, 218, 88, 0.16),
      0 18px 38px rgba(94, 72, 25, 0.09) !important;
  }

  html body.view-mp3 .mp3-list-panel,
  html body.view-mp3 .mp3-player-panel {
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 34px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head button,
  html body.view-mp3 .mp3-mobile-player-head button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 19px !important;
    font-size: 14px !important;
    font-weight: 610 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  html body.view-mp3 .mp3-search {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-search input {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--mp3-bank-soft) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 570 !important;
    line-height: 34px !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 50px !important;
    padding: 5px !important;
    border-radius: 25px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6f7f94 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    color: var(--mp3-bank-ink) !important;
    background-color: rgba(255, 255, 255, 0.76) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-play-all {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    margin: 12px 0 !important;
    padding: 8px 13px !important;
    border-radius: 29px !important;
  }

  html body.view-mp3 .mp3-play-all span,
  html body.view-mp3 .mp3-control-row .mp3-main-play {
    display: grid !important;
    place-items: center !important;
    color: rgba(255, 255, 255, 0.94) !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.22), transparent 36%),
      linear-gradient(145deg, rgba(29, 174, 129, 0.88), rgba(21, 144, 109, 0.8)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 14px 28px rgba(14, 126, 96, 0.18) !important;
  }

  html body.view-mp3 .mp3-play-all span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  }

  html body.view-mp3 .mp3-play-all strong,
  html body.view-mp3 .mp3-question-item strong,
  html body.view-mp3 .mp3-control-row button,
  html body.view-mp3 .mp3-understand-row button {
    color: var(--mp3-bank-ink) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-question-list {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 92px !important;
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    min-height: 92px !important;
    padding: 14px 44px 14px 14px !important;
    gap: 11px !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-question-item p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  html body.view-mp3 .mp3-question-item p :is(em, b, i, small),
  html body.view-mp3 .mp3-play-all em {
    min-height: 24px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    color: rgba(91, 107, 128, 0.84) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 570 !important;
    line-height: 18px !important;
  }

  html body.view-mp3 .mp3-star {
    right: 10px !important;
    color: rgba(91, 107, 128, 0.82) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mp3 .mp3-star.saved {
    color: #b98614 !important;
  }

  html body.view-mp3 .mp3-pagination {
    margin: 10px auto 0 !important;
    padding: 7px 9px !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-player-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    color: #2aa47b !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    font-size: 18px !important;
    font-weight: 690 !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    font-size: 25px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-transcript {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    background-image:
      linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.11),
      0 14px 30px rgba(94, 72, 25, 0.06) !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    color: rgba(34, 43, 58, 0.42) !important;
    font-size: 15px !important;
    font-weight: 570 !important;
    line-height: 1.36 !important;
  }

  html body.view-mp3 .mp3-lyric-line.active {
    color: var(--mp3-bank-ink) !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-control-row {
    display: grid !important;
    grid-template-columns: 40px 40px 56px 40px 52px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-control-row button {
    width: 40px !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play {
    width: 56px !important;
    height: 56px !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton {
    width: 52px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
  }

  html body.view-mp3 .mp3-understand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-understand-row button,
  html body.view-mp3 .mp3-subtitle-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    text-align: center !important;
  }

  html body.view-mp3 .mp3-settings-sheet[aria-hidden="true"] {
    display: none !important;
  }

  html body.view-mp3 .mobile-tabbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(342px, calc(100vw - 48px)) !important;
    min-height: 78px !important;
    padding: 6px !important;
    border-radius: 39px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 218, 88, 0.13),
      0 18px 42px rgba(94, 72, 25, 0.08) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab {
    display: grid !important;
    place-items: center !important;
    min-height: 60px !important;
    border-radius: 31px !important;
    color: #8794a6 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active {
    color: var(--mp3-bank-ink) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow:
      0 13px 26px rgba(74, 61, 28, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    animation: mp3MobileTabPop 420ms cubic-bezier(0.2, 0.9, 0.28, 1.25) both;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab) {
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab):active {
    transform: scale(0.976) !important;
  }

  @keyframes mp3MobileRise {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes mp3MobileCardIn {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.98);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes mp3MobileTabPop {
    0% {
      transform: scale(0.94);
    }
    58% {
      transform: scale(1.045);
    }
    100% {
      transform: scale(1);
    }
  }

  @keyframes mp3MobileBgFloat {
    from {
      transform: translate3d(-6px, -3px, 0);
    }
    to {
      transform: translate3d(7px, 4px, 0);
    }
  }
}

@media (max-width: 760px) {
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    min-height: calc(100dvh - 92px) !important;
    padding: 18px 16px 24px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    min-height: calc(100dvh - 92px) !important;
  }
}

/* MP3 profile-style glass pass: align spacing and information rhythm with the profile page. */
html body.view-mp3 {
  background:
    radial-gradient(circle at 5% 18%, rgba(186, 218, 236, 0.26), transparent 36%),
    radial-gradient(circle at 92% 10%, rgba(245, 224, 174, 0.22), transparent 32%),
    radial-gradient(circle at 86% 82%, rgba(198, 229, 222, 0.18), transparent 34%),
    linear-gradient(180deg, #f7f8f9 0%, #f1f3f5 100%) !important;
}

html body.view-mp3 #mp3.active-view {
  --mp3-profile-line: rgba(255, 255, 255, 0.66);
  --mp3-profile-bg:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.58), transparent 40%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.36), rgba(245, 250, 250, 0.12)),
    rgba(255, 255, 255, 0.08);
  --mp3-profile-inner:
    radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.48), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)),
    rgba(255, 255, 255, 0.06);
  --mp3-profile-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(26, 36, 48, 0.035),
    0 18px 40px rgba(31, 41, 55, 0.065);
  --mp3-profile-float:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -1px 0 rgba(26, 36, 48, 0.035),
    0 12px 24px rgba(31, 41, 55, 0.052);
  color: #171d27 !important;
}

html body.view-mp3 .mp3-shell {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
  border: 1px solid var(--mp3-profile-line) !important;
  background: var(--mp3-profile-bg) !important;
  background-color: rgba(255, 255, 255, 0.055) !important;
  box-shadow: var(--mp3-profile-shadow) !important;
  backdrop-filter: blur(26px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.18) !important;
}

html body.view-mp3 :is(.mp3-back-button, .mp3-hero-stats article, .mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs button, .mp3-play-all, .mp3-pagination, .mp3-pagination button, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
  border: 1px solid rgba(255, 255, 255, 0.56) !important;
  background: var(--mp3-profile-inner) !important;
  color: rgba(67, 77, 92, 0.88) !important;
  box-shadow: var(--mp3-profile-float) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 -1px 0 rgba(24, 32, 42, 0.09) !important;
}

html body.view-mp3 :is(.mp3-hero p, .mp3-panel-head span, .mp3-mobile-detail-head span, .mp3-mobile-player-head span) {
  color: rgba(45, 139, 123, 0.78) !important;
  font-weight: 860 !important;
  letter-spacing: 0 !important;
}

html body.view-mp3 :is(.mp3-hero h2, .mp3-panel-head h3, .mp3-player-panel h3, .mp3-mobile-detail-head strong, .mp3-mobile-player-head strong) {
  color: #171d27 !important;
  font-weight: 950 !important;
  letter-spacing: 0 !important;
}

html body.view-mp3 .mp3-orb,
html body.view-mp3 .mp3-player-badge,
html body.view-mp3 .mp3-type-list button > span {
  display: grid !important;
  place-items: center !important;
  color: rgba(67, 77, 92, 0.82) !important;
  background:
    radial-gradient(circle at 22% 0%, rgba(255, 255, 255, 0.62), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(245, 248, 250, 0.14)),
    rgba(255, 255, 255, 0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.74),
    0 10px 22px rgba(31, 41, 55, 0.045) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
}

html body.view-mp3 .mp3-hero-stats {
  gap: 10px !important;
}

html body.view-mp3 .mp3-hero-stats article {
  min-height: 64px !important;
  padding: 12px 13px !important;
  border-radius: 22px !important;
}

html body.view-mp3 .mp3-hero-stats strong {
  color: rgba(48, 56, 69, 0.94) !important;
  font-size: 24px !important;
  font-weight: 920 !important;
  line-height: 1 !important;
}

html body.view-mp3 .mp3-hero-stats span {
  color: rgba(92, 103, 118, 0.76) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
}

html body.view-mp3 .mp3-back-button {
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 18px !important;
  font-size: 15px !important;
  font-weight: 780 !important;
}

html body.view-mp3 .mp3-type-list {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

html body.view-mp3 .mp3-type-list button {
  grid-template-columns: 42px minmax(0, 1fr) 46px !important;
  grid-template-rows: 1fr !important;
  width: 100% !important;
  min-height: 72px !important;
  height: 72px !important;
  padding: 13px 14px !important;
  border-radius: 24px !important;
}

html body.view-mp3 .mp3-type-list button > span,
html body.view-mp3 .mp3-type-list button > div,
html body.view-mp3 .mp3-type-list button > em {
  grid-row: 1 !important;
  align-self: center !important;
}

html body.view-mp3 .mp3-type-list button > span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 16px !important;
  font-size: 13px !important;
  font-weight: 920 !important;
}

html body.view-mp3 .mp3-type-list button strong {
  color: rgba(72, 84, 100, 0.9) !important;
  font-size: 14px !important;
  font-weight: 880 !important;
  line-height: 1.2 !important;
}

html body.view-mp3 .mp3-type-list button em {
  justify-self: end !important;
  width: 46px !important;
  min-width: 46px !important;
  padding: 0 !important;
  color: rgba(48, 56, 69, 0.94) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 22px !important;
  font-weight: 930 !important;
  text-align: right !important;
}

html body.view-mp3 :is(.mp3-type-list button.active, .mp3-question-item.active, .mp3-tabs button.active, .mp3-setting-options button.active, .mp3-understand-row button.active) {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.66), transparent 42%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12)),
    rgba(255, 255, 255, 0.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.86),
    inset 0 -1px 0 rgba(26, 36, 48, 0.04),
    0 15px 28px rgba(31, 41, 55, 0.07) !important;
}

html body.view-mp3 .mp3-type-list button.active > span {
  color: rgba(45, 139, 123, 0.96) !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(214, 238, 233, 0.24)),
    rgba(255, 255, 255, 0.14) !important;
}

html body.view-mp3 .mp3-question-list {
  gap: 10px !important;
}

html body.view-mp3 .mp3-question-item {
  min-height: 72px !important;
  padding: 0 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

html body.view-mp3 .mp3-question-item > button:first-child {
  min-height: 72px !important;
  padding: 12px 12px !important;
  gap: 12px !important;
}

html body.view-mp3 .mp3-question-item > button:first-child > span {
  display: grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 15px !important;
  color: rgba(92, 103, 118, 0.82) !important;
  background: rgba(255, 255, 255, 0.28) !important;
  box-shadow: var(--mp3-profile-float) !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

html body.view-mp3 .mp3-question-item strong {
  color: #171d27 !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: 1.22 !important;
}

html body.view-mp3 .mp3-question-item p {
  gap: 6px !important;
  margin-top: 6px !important;
}

html body.view-mp3 .mp3-question-item p :is(em, b, i, small) {
  min-height: 24px !important;
  padding: 3px 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: 999px !important;
  color: rgba(92, 103, 118, 0.8) !important;
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-style: normal !important;
  font-weight: 780 !important;
  line-height: 18px !important;
}

html body.view-mp3 .mp3-star {
  color: rgba(92, 103, 118, 0.82) !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.view-mp3 .mp3-star.saved {
  color: rgba(169, 121, 24, 0.88) !important;
}

html body.view-mp3 .mp3-play-all {
  min-height: 50px !important;
  border-radius: 22px !important;
}

html body.view-mp3 .mp3-play-all span,
html body.view-mp3 .mp3-control-row .mp3-main-play {
  color: rgba(255, 255, 255, 0.92) !important;
  background:
    radial-gradient(circle at 26% 14%, rgba(255, 255, 255, 0.22), transparent 34%),
    linear-gradient(145deg, rgba(45, 139, 123, 0.78), rgba(87, 130, 166, 0.72)) !important;
}

html body.view-mp3 .mp3-transcript {
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 28px !important;
  background: var(--mp3-profile-bg) !important;
  box-shadow: var(--mp3-profile-shadow) !important;
}

html body.view-mp3 .mp3-lyric-line {
  max-width: 92% !important;
  margin-inline: auto !important;
  color: rgba(92, 103, 118, 0.48) !important;
  font-size: clamp(15px, 1.12vw, 20px) !important;
  font-weight: 760 !important;
  line-height: 1.38 !important;
}

html body.view-mp3 .mp3-lyric-line.active {
  color: #171d27 !important;
  font-weight: 880 !important;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.82),
    0 8px 20px rgba(31, 41, 55, 0.08) !important;
}

@media (min-width: 761px) {
  html body.view-mp3 #mp3.active-view {
    width: min(1180px, calc(100vw - 96px)) !important;
    max-width: min(1180px, calc(100vw - 96px)) !important;
    margin: 0 auto !important;
    padding: 32px 0 56px !important;
  }

  html body.view-mp3 .mp3-shell {
    gap: 18px !important;
    max-width: 1180px !important;
    padding: 0 !important;
  }

  html body.view-mp3 .mp3-hero {
    padding: 24px !important;
    border-radius: 34px !important;
  }

  html body.view-mp3 .mp3-layout {
    grid-template-columns: 240px minmax(320px, 1fr) minmax(380px, 520px) !important;
    gap: 18px !important;
  }

  html body.view-mp3 :is(.mp3-type-panel, .mp3-list-panel, .mp3-player-panel) {
    padding: 20px !important;
    border-radius: 32px !important;
  }
}

@media (max-width: 760px) {
  html body.view-mp3,
  html body.view-mp3 .app-shell,
  html body.view-mp3 .app-shell > .main,
  html body.view-mp3 .app-shell > .main > #mp3.active-view {
    height: auto !important;
    min-height: 100svh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    background-color: transparent !important;
  }

  html body.view-mp3 #mp3.active-view {
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    margin: 0 auto !important;
    padding: 32px 32px 154px !important;
    background: transparent !important;
  }

  html body.view-mp3 .mp3-shell {
    display: grid !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    gap: 16px !important;
    padding: 18px !important;
    border-radius: 30px !important;
  }

  html body.view-mp3 .mp3-back-button {
    display: none !important;
  }

  html body.view-mp3 .mp3-hero-main {
    gap: 13px !important;
  }

  html body.view-mp3 .mp3-orb {
    width: 52px !important;
    height: 52px !important;
    border-radius: 18px !important;
    font-size: 15px !important;
    font-weight: 840 !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-hero p {
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 62px !important;
    padding: 11px 12px !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    font-size: 23px !important;
  }

  html body.view-mp3 .mp3-hero-stats span {
    margin-top: 5px !important;
    font-size: 10.5px !important;
  }

  html body.view-mp3 :is(.mp3-type-panel, .mp3-list-panel, .mp3-player-panel) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 20px !important;
    border-radius: 32px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    min-height: 0 !important;
    padding: 20px !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 14px 0 !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 7px !important;
    border-radius: 24px !important;
    background: var(--mp3-profile-inner) !important;
    box-shadow: var(--mp3-profile-float) !important;
  }

  html body.view-mp3 .mp3-tabs button {
    min-height: 34px !important;
    padding: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    background: var(--mp3-profile-inner) !important;
    box-shadow: var(--mp3-profile-float) !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    font-size: 26px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
  }

  html body.view-mp3 .mp3-transcript {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
  }

  html body.view-mp3 .mp3-lyric-track {
    gap: 8px !important;
    padding: 30px 0 !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body.view-mp3 .mp3-control-row {
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-pagination {
    margin: 12px auto 0 !important;
  }
}

/* Final order lock for the mobile MP3 page. Keep this at EOF. */
@media (max-width: 760px) {
  html body.view-mp3 {
    --mp3-bank-ink: rgba(18, 24, 35, 0.9);
    --mp3-bank-soft: rgba(34, 43, 58, 0.76);
    --mp3-bank-muted: rgba(91, 107, 128, 0.82);
    --mp3-bank-embed: 0 1px 0 rgba(255, 255, 255, 0.66), 0 -1px 0 rgba(111, 83, 18, 0.055);
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    background:
      linear-gradient(112deg, rgba(255, 224, 74, 0.55) 0%, rgba(255, 238, 151, 0.22) 28%, rgba(255, 255, 255, 0) 50%),
      linear-gradient(252deg, rgba(255, 246, 206, 0.5) 0%, rgba(255, 255, 255, 0) 44%),
      linear-gradient(180deg, #ffd94b 0%, #ffe78c 16%, #fff3cd 34%, #fffaf1 52%, #ffffff 72%, #ffffff 100%) !important;
    background-attachment: fixed !important;
    color: #121722 !important;
  }

  html body.view-mp3 .sidebar,
  html body.view-mp3 .topbar {
    display: none !important;
  }

  html body.view-mp3 .app-shell,
  html body.view-mp3 .main,
  html body.view-mp3 #mp3.active-view {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    clip-path: none !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-mp3 #mp3.active-view::before {
    content: "";
    position: fixed;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    filter: blur(24px);
    background:
      linear-gradient(104deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.18) 30%, rgba(255, 255, 255, 0) 50%),
      linear-gradient(260deg, rgba(178, 255, 232, 0.1) 0%, rgba(255, 255, 255, 0) 44%);
    animation: mp3MobileBgFloat 26s ease-in-out infinite alternate;
  }

  html body.view-mp3 .mp3-shell {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 18px !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: 100dvh !important;
    margin: 0 auto !important;
    padding: 36px clamp(18px, 4.7vw, 20px) 120px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background-color: rgba(255, 255, 255, 0.24) !important;
    background-image:
      radial-gradient(circle at var(--glass-x, 30%) var(--glass-y, 10%), rgba(255, 255, 255, 0.3), transparent 36%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.46), rgba(255, 255, 255, 0.14)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 218, 88, 0.13),
      0 18px 42px rgba(94, 72, 25, 0.08) !important;
  }

  html body.view-mp3 :is(.mp3-hero-stats article, .mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs, .mp3-tabs button.active, .mp3-play-all, .mp3-pagination, .mp3-pagination button, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background-color: rgba(255, 255, 255, 0.28) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.16)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.12) !important;
    backdrop-filter: blur(20px) saturate(1.12) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.11),
      0 14px 30px rgba(94, 72, 25, 0.055) !important;
    color: var(--mp3-bank-soft) !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    gap: 15px !important;
    padding: 14px !important;
    border-radius: 36px !important;
    animation: mp3MobileRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both;
  }

  html body.view-mp3 .mp3-back-button {
    display: none !important;
  }

  html body.view-mp3 .mp3-hero-main {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
  }

  html body.view-mp3 .mp3-orb {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 34% 20%, rgba(255, 255, 255, 0.46), transparent 42%),
      linear-gradient(145deg, rgba(255, 215, 56, 0.88), rgba(255, 194, 32, 0.72)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.74),
      inset 0 -1px 0 rgba(126, 82, 10, 0.08),
      0 12px 24px rgba(128, 84, 12, 0.12) !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-orb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.38));
  }

  html body.view-mp3 .mp3-hero h2,
  html body.view-mp3 .mp3-panel-head h3,
  html body.view-mp3 .mp3-player-panel h3,
  html body.view-mp3 .mp3-mobile-detail-head strong,
  html body.view-mp3 .mp3-mobile-player-head strong,
  html body.view-mp3 .mp3-type-list button strong,
  html body.view-mp3 .mp3-question-item strong,
  html body.view-mp3 .mp3-play-all strong {
    color: var(--mp3-bank-ink) !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
    font-variation-settings: "wght" 650 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    font-size: 23px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 :is(.mp3-hero p, .mp3-panel-head span, .mp3-mobile-detail-head span, .mp3-mobile-player-head span, .mp3-type-list button small, .mp3-question-item p, .mp3-hero-stats span) {
    color: var(--mp3-bank-muted) !important;
    font-weight: 540 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mp3 .mp3-hero p {
    margin: 5px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.18 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 62px !important;
    padding: 11px 12px !important;
    border-radius: 22px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    color: rgba(28, 35, 48, 0.88) !important;
    font-size: 22px !important;
    font-weight: 660 !important;
    line-height: 1 !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-type-panel,
  html body.view-mp3 .mp3-list-panel,
  html body.view-mp3 .mp3-player-panel {
    width: 100% !important;
    min-height: 0 !important;
    padding: 18px !important;
    border-radius: 34px !important;
  }

  html body.view-mp3 .mp3-panel-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 15px !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-panel-head span {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.44) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-type-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 156px !important;
    min-height: 156px !important;
    padding: 14px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    animation: mp3MobileCardIn 540ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    min-width: 46px !important;
    max-width: 74px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 12px !important;
    font-weight: 690 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button strong {
    position: absolute !important;
    left: 14px !important;
    top: 54px !important;
    width: calc(100% - 36px) !important;
    max-height: 62px !important;
    overflow: hidden !important;
    font-size: 14.5px !important;
    line-height: 1.16 !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  html body.view-mp3 .mp3-type-list button small {
    position: absolute !important;
    left: 14px !important;
    bottom: 15px !important;
    top: auto !important;
    width: calc(100% - 30px) !important;
    overflow: hidden !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    position: absolute !important;
    right: 14px !important;
    top: 18px !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 0 !important;
    color: rgba(42, 51, 67, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 16px !important;
    text-align: right !important;
    text-shadow: var(--mp3-bank-embed) !important;
  }

  html body.view-mp3 .mp3-type-list button.active {
    border-color: rgba(255, 255, 255, 0.78) !important;
    background-color: rgba(255, 255, 255, 0.36) !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head button,
  html body.view-mp3 .mp3-mobile-player-head button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 19px !important;
    font-size: 14px !important;
    font-weight: 610 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  html body.view-mp3 .mp3-search {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-search input {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--mp3-bank-soft) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 570 !important;
    line-height: 34px !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 50px !important;
    padding: 5px !important;
    border-radius: 25px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #6f7f94 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    color: var(--mp3-bank-ink) !important;
    background-color: rgba(255, 255, 255, 0.76) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-play-all {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    margin: 12px 0 !important;
    padding: 8px 13px !important;
    border-radius: 29px !important;
  }

  html body.view-mp3 .mp3-play-all span,
  html body.view-mp3 .mp3-control-row .mp3-main-play {
    display: grid !important;
    place-items: center !important;
    color: rgba(255, 255, 255, 0.94) !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.22), transparent 36%),
      linear-gradient(145deg, rgba(29, 174, 129, 0.88), rgba(21, 144, 109, 0.8)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.38),
      0 14px 28px rgba(14, 126, 96, 0.18) !important;
  }

  html body.view-mp3 .mp3-play-all span {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
  }

  html body.view-mp3 .mp3-question-list {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 14px !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 92px !important;
    padding: 0 !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    min-height: 92px !important;
    padding: 14px 44px 14px 14px !important;
    gap: 11px !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-question-item p :is(em, b, i, small),
  html body.view-mp3 .mp3-play-all em {
    min-height: 24px !important;
    padding: 3px 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 999px !important;
    color: rgba(91, 107, 128, 0.84) !important;
    background: rgba(255, 255, 255, 0.38) !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 570 !important;
    line-height: 18px !important;
  }

  html body.view-mp3 .mp3-star {
    right: 10px !important;
    color: rgba(91, 107, 128, 0.82) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mp3 .mp3-star.saved {
    color: #b98614 !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    color: #2aa47b !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    font-size: 18px !important;
    font-weight: 690 !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    font-size: 25px !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-transcript {
    height: 168px !important;
    min-height: 168px !important;
    max-height: 168px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(255, 255, 255, 0.62) !important;
    background-color: rgba(255, 255, 255, 0.3) !important;
    background-image: linear-gradient(145deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.16)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.11),
      0 14px 30px rgba(94, 72, 25, 0.06) !important;
  }

  html body.view-mp3 .mp3-control-row {
    display: grid !important;
    grid-template-columns: 40px 40px 56px 40px 52px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-control-row button {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 0 !important;
    height: 40px !important;
    min-height: 40px !important;
    border-radius: 50% !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play {
    width: 56px !important;
    height: 56px !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton {
    width: 52px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
  }

  html body.view-mp3 .mp3-understand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-understand-row button,
  html body.view-mp3 .mp3-subtitle-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    text-align: center !important;
  }

  html body.view-mp3 .mobile-tabbar {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: min(342px, calc(100vw - 48px)) !important;
    min-height: 78px !important;
    padding: 6px !important;
    border-radius: 39px !important;
    border: 1px solid rgba(255, 255, 255, 0.58) !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.54), rgba(255, 255, 255, 0.18)),
      rgba(255, 255, 255, 0.22) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
    backdrop-filter: blur(24px) saturate(1.16) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(255, 218, 88, 0.13),
      0 18px 42px rgba(94, 72, 25, 0.08) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab {
    display: grid !important;
    place-items: center !important;
    min-height: 60px !important;
    border-radius: 31px !important;
    color: #8794a6 !important;
    font-size: 13px !important;
    font-weight: 620 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active {
    color: var(--mp3-bank-ink) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow:
      0 13px 26px rgba(74, 61, 28, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
    animation: mp3MobileTabPop 420ms cubic-bezier(0.2, 0.9, 0.28, 1.25) both;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab) {
    transition: transform 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab):active {
    transform: scale(0.976) !important;
  }
}

/* MP3 HOME-STYLE FINAL PRIORITY LOCK - must stay after every older MP3 block. */
@media (max-width: 980px) {
  html body.view-mp3 {
    --mp3-final-ink: rgba(18, 24, 35, 0.92);
    --mp3-final-soft: rgba(48, 60, 78, 0.78);
    --mp3-final-muted: rgba(112, 126, 146, 0.8);
    --mp3-final-green: #21bfa9;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    color: var(--mp3-final-ink) !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
    background-attachment: fixed !important;
  }

  html body.view-mp3 .app-shell,
  html body.view-mp3 .main,
  html body.view-mp3 #mp3.active-view {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
  }

  html body.view-mp3 #mp3.active-view::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: none !important;
    background:
      radial-gradient(390px 300px at 50% -10%, rgba(255, 204, 32, 0.86), rgba(255, 224, 94, 0.38) 47%, rgba(255, 255, 255, 0) 74%),
      radial-gradient(280px 360px at -12% 20%, rgba(255, 221, 78, 0.24), rgba(255, 255, 255, 0) 72%),
      radial-gradient(300px 340px at 112% 36%, rgba(255, 236, 147, 0.28), rgba(255, 255, 255, 0) 74%),
      linear-gradient(180deg, #ffd128 0%, #ffe88e 20%, #fff7df 49%, #fffdf7 100%) !important;
    background-size: 100% 100%, 120% 120%, 120% 120%, 100% 100% !important;
    background-position: 0 0, -4% 16%, 104% 34%, 0 0 !important;
    animation: mp3FinalBgDrift 32s ease-in-out infinite alternate !important;
  }

  html body.view-mp3 .sidebar,
  html body.view-mp3 .topbar,
  html body.view-mp3 .site-header,
  html body.view-mp3 .site-beian,
  html body.view-mp3 .app-install-banner {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell {
    position: relative !important;
    isolation: isolate !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 14px !important;
    width: min(390px, 100vw) !important;
    max-width: 390px !important;
    min-height: 980px !important;
    margin: 0 auto !important;
    padding: 34px 16px 118px !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body.view-mp3 .mp3-shell::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 18px !important;
    z-index: 0 !important;
    width: calc(100% - 32px) !important;
    height: 900px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 34px !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018) 63%, rgba(255, 255, 255, 0)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      inset 0 -1px 0 rgba(122, 91, 12, 0.02) !important;
  }

  html body.view-mp3 .mp3-shell > .mp3-hero,
  html body.view-mp3 .mp3-shell > .mp3-layout {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
    border: 1px solid rgba(255, 255, 255, 0.82) !important;
    border-radius: 28px !important;
    background:
      radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.22), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.74) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.32) 100%) !important;
    -webkit-backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    backdrop-filter: blur(21px) saturate(1.2) brightness(1.04) !important;
    box-shadow:
      0 22px 38px -27px rgba(111, 80, 10, 0.22),
      inset 1px 0 0 rgba(255, 237, 152, 0.28),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(104, 73, 8, 0.035) !important;
  }

  html body.view-mp3 :is(.mp3-hero-stats article, .mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs, .mp3-tabs button.active, .mp3-play-all, .mp3-pagination, .mp3-pagination button, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    background:
      radial-gradient(80% 100% at 94% 50%, rgba(255, 222, 88, 0.16), rgba(255, 255, 255, 0) 60%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 55%, rgba(255, 255, 255, 0.14)) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.26) brightness(1.04) !important;
    backdrop-filter: blur(22px) saturate(1.26) brightness(1.04) !important;
    box-shadow:
      0 18px 30px -24px rgba(91, 67, 11, 0.18),
      inset 1px 0 0 rgba(255, 226, 98, 0.12),
      inset -1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(72, 51, 7, 0.025) !important;
    color: var(--mp3-final-soft) !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    gap: 14px !important;
    min-height: 170px !important;
    padding: 16px !important;
    animation: mp3FinalCardRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-back-button {
    display: none !important;
  }

  html body.view-mp3 .mp3-hero-main {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 13px !important;
  }

  html body.view-mp3 .mp3-orb {
    display: grid !important;
    place-items: center !important;
    width: 52px !important;
    height: 52px !important;
    padding: 3px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    color: transparent !important;
    background: radial-gradient(circle at 50% 45%, rgba(255, 208, 44, 0.92), rgba(255, 194, 24, 0.96) 62%, rgba(255, 176, 0, 0.9) 100%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.78),
      inset 0 -1px 0 rgba(126, 82, 10, 0.08),
      0 12px 24px rgba(128, 84, 12, 0.12) !important;
  }

  html body.view-mp3 .mp3-orb img {
    display: block !important;
    width: 54px !important;
    height: 54px !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  html body.view-mp3 .mp3-hero .eyebrow,
  html body.view-mp3 .mp3-hero p {
    margin: 0 0 4px !important;
    color: rgba(29, 191, 169, 0.9) !important;
    font-size: 12px !important;
    font-weight: 680 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  html body.view-mp3 :is(.mp3-hero h2, .mp3-panel-head h3, .mp3-player-panel h3, .mp3-mobile-detail-head strong, .mp3-mobile-player-head strong, .mp3-type-list button strong, .mp3-question-item strong, .mp3-play-all strong) {
    color: var(--mp3-final-ink) !important;
    font-weight: 660 !important;
    letter-spacing: 0 !important;
    font-variation-settings: "wght" 660 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62), 0 -1px 0 rgba(111, 83, 18, 0.045) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.06 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 60px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    display: block !important;
    color: var(--mp3-final-green) !important;
    font-size: 22px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    text-shadow: 0 5px 14px rgba(33, 191, 169, 0.16) !important;
  }

  html body.view-mp3 :is(.mp3-hero-stats span, .mp3-panel-head span, .mp3-type-list button small, .mp3-question-item p, .mp3-mobile-detail-head span, .mp3-mobile-player-head span) {
    color: var(--mp3-final-muted) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.58) !important;
  }

  html body.view-mp3 .mp3-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.view-mp3 :is(.mp3-type-panel, .mp3-list-panel, .mp3-player-panel) {
    width: 100% !important;
    min-height: 0 !important;
    padding: 16px !important;
  }

  html body.view-mp3 .mp3-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-panel-head span {
    flex: 0 0 auto !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  }

  html body.view-mp3 .mp3-type-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 11px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 148px !important;
    min-height: 148px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    animation: mp3FinalCardRise 520ms cubic-bezier(0.2, 0.82, 0.2, 1) both !important;
  }

  html body.view-mp3 .mp3-type-list button > span,
  html body.view-mp3 .mp3-player-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #2aa47b !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.72), rgba(224, 243, 236, 0.46)) !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    min-width: 48px !important;
    max-width: 82px !important;
    height: 32px !important;
    padding: 0 10px !important;
    border-radius: 17px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button:nth-child(1) > span,
  html body.view-mp3 .mp3-player-badge { color: #7b4eea !important; border-color: rgba(149, 111, 255, 0.38) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(238, 231, 255, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(2) > span { color: #20996a !important; border-color: rgba(76, 190, 143, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(223, 244, 234, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(3) > span { color: #1d74d8 !important; border-color: rgba(98, 169, 255, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(228, 241, 255, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(4) > span { color: #159eaa !important; border-color: rgba(98, 198, 212, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(226, 246, 247, 0.5)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(5) > span { color: #b56d12 !important; border-color: rgba(238, 181, 91, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 241, 212, 0.52)) !important; }
  html body.view-mp3 .mp3-type-list button:nth-child(6) > span { color: #d84f5f !important; border-color: rgba(239, 132, 146, 0.42) !important; background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 229, 232, 0.52)) !important; }

  html body.view-mp3 .mp3-type-list button strong {
    position: absolute !important;
    left: 14px !important;
    right: 34px !important;
    top: 58px !important;
    display: -webkit-box !important;
    max-height: 50px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  html body.view-mp3 .mp3-type-list button small {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 15px !important;
    top: auto !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    position: absolute !important;
    top: 18px !important;
    right: 14px !important;
    padding: 0 !important;
    color: rgba(42, 51, 67, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-style: normal !important;
    font-weight: 660 !important;
  }

  html body.view-mp3 .mp3-type-list button::after {
    content: "›" !important;
    position: absolute !important;
    right: 14px !important;
    bottom: 18px !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    color: rgba(109, 123, 145, 0.82) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 24px !important;
    line-height: 1 !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head button,
  html body.view-mp3 .mp3-mobile-player-head button {
    min-height: 38px !important;
    padding: 0 13px !important;
    border-radius: 19px !important;
    color: rgba(64, 52, 20, 0.86) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head strong,
  html body.view-mp3 .mp3-mobile-player-head strong {
    display: block !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    gap: 10px !important;
    margin: 12px 0 !important;
  }

  html body.view-mp3 .mp3-search {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-search input {
    min-width: 0 !important;
    width: 100% !important;
    height: 34px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--mp3-final-soft) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 570 !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 5px !important;
    min-height: 50px !important;
    padding: 5px !important;
    border-radius: 25px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 6px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #78869a !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    color: var(--mp3-final-ink) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-play-all {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 58px !important;
    margin: 12px 0 !important;
    padding: 8px 13px !important;
    border-radius: 29px !important;
  }

  html body.view-mp3 .mp3-play-all span {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    color: rgba(18, 24, 35, 0.92) !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.22) 52%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 233, 146, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 18px rgba(128, 92, 8, 0.12) !important;
  }

  html body.view-mp3 .mp3-question-list {
    display: grid !important;
    gap: 11px !important;
    padding-bottom: 14px !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 92px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    min-height: 92px !important;
    padding: 14px 44px 14px 14px !important;
    gap: 11px !important;
    background: transparent !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    display: grid !important;
    place-items: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 17px !important;
    color: #2aa47b !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-player-panel {
    display: grid !important;
    gap: 12px !important;
    min-height: auto !important;
    padding: 16px !important;
  }

  html body.view-mp3 .mp3-player-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 38px !important;
  }

  html body.view-mp3 .mp3-player-top > span {
    color: var(--mp3-final-green) !important;
    font-size: 15px !important;
    font-weight: 740 !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    font-size: 18px !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    margin: -52px 0 0 72px !important;
    min-height: 58px !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  html body.view-mp3 .mp3-transcript {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.24)) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.1),
      0 16px 26px rgba(94, 72, 25, 0.055) !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    color: rgba(31, 39, 52, 0.66) !important;
    font-size: 19px !important;
    line-height: 1.42 !important;
    font-weight: 580 !important;
  }

  html body.view-mp3 .mp3-lyric-line.active {
    color: rgba(18, 24, 35, 0.94) !important;
    font-weight: 680 !important;
  }

  html body.view-mp3 .mp3-progress-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 8px !important;
    color: var(--mp3-final-muted) !important;
    font-size: 12px !important;
    font-weight: 620 !important;
  }

  html body.view-mp3 #mp3Progress {
    width: 100% !important;
    accent-color: var(--mp3-final-green) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    margin-top: -6px !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    background: var(--mp3-final-green) !important;
    box-shadow: 0 6px 14px rgba(33, 191, 169, 0.24) !important;
  }

  html body.view-mp3 .mp3-control-row {
    display: grid !important;
    grid-template-columns: 42px 42px 60px 42px 54px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-control-row button {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 0 !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: rgba(38, 48, 65, 0.82) !important;
    font-size: 17px !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton {
    width: 54px !important;
    border-radius: 21px !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play {
    width: 60px !important;
    height: 60px !important;
    color: transparent !important;
    font-size: 0 !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 56%, rgba(255, 255, 255, 0.18) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 235, 150, 0.42)) !important;
    box-shadow:
      0 16px 24px -18px rgba(73, 55, 12, 0.28),
      0 0 18px rgba(33, 191, 169, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(101, 70, 6, 0.05) !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play::before {
    content: "▶" !important;
    display: block !important;
    color: rgba(18, 24, 35, 0.94) !important;
    font-size: 21px !important;
    line-height: 1 !important;
    transform: translateX(1px) !important;
  }

  html body.view-mp3 .mp3-player-panel.is-playing .mp3-control-row .mp3-main-play::before {
    content: "Ⅱ" !important;
    transform: translateX(0) !important;
    font-size: 22px !important;
    letter-spacing: -0.16em !important;
  }

  html body.view-mp3 .mp3-understand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-understand-row button,
  html body.view-mp3 .mp3-subtitle-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    border-radius: 22px !important;
    color: rgba(64, 52, 20, 0.86) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: center !important;
  }

  html body.view-mp3 .mobile-tabbar {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 80 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: min(354px, calc(100vw - 32px)) !important;
    height: 68px !important;
    min-height: 68px !important;
    padding: 7px 9px !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    border-radius: 31px !important;
    transform: translateX(-50%) !important;
    background:
      radial-gradient(86% 120% at 88% 8%, rgba(255, 246, 174, 0.24), rgba(255, 255, 255, 0) 58%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.42) 58%, rgba(255, 255, 255, 0.22)) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.22) brightness(1.03) !important;
    backdrop-filter: blur(24px) saturate(1.22) brightness(1.03) !important;
    box-shadow:
      0 20px 34px rgba(81, 63, 21, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      inset 0 -1px 0 rgba(111, 83, 18, 0.035) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab {
    position: relative !important;
    display: flex !important;
    flex: 1 1 0 !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    height: 54px !important;
    min-height: 54px !important;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 26px !important;
    color: rgba(133, 144, 161, 0.86) !important;
    background: transparent !important;
    box-shadow: none !important;
    transition:
      color 220ms ease,
      background 260ms ease,
      box-shadow 260ms ease,
      transform 260ms cubic-bezier(0.2, 0.9, 0.22, 1),
      flex-basis 260ms cubic-bezier(0.2, 0.9, 0.22, 1) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="dashboard"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 10.7 12 4l8 6.7v8.2a1.7 1.7 0 0 1-1.7 1.7h-4.1v-5.1H9.8v5.1H5.7A1.7 1.7 0 0 1 4 18.9zM6.2 11.7v6.7h1.5v-5.1h8.6v5.1h1.5v-6.7L12 6.8z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 10.7 12 4l8 6.7v8.2a1.7 1.7 0 0 1-1.7 1.7h-4.1v-5.1H9.8v5.1H5.7A1.7 1.7 0 0 1 4 18.9zM6.2 11.7v6.7h1.5v-5.1h8.6v5.1h1.5v-6.7L12 6.8z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="practice"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.4 4.2h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2ZM6.4 12.3h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm-8.1-6a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm-8.1 8.1a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M6.4 4.2h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2V6.4a2.2 2.2 0 0 1 2.2-2.2ZM6.4 12.3h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2H6.4a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm8.1 0h3.1a2.2 2.2 0 0 1 2.2 2.2v3.1a2.2 2.2 0 0 1-2.2 2.2h-3.1a2.2 2.2 0 0 1-2.2-2.2v-3.1a2.2 2.2 0 0 1 2.2-2.2Zm-8.1-6a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2V6.4a.2.2 0 0 0-.2-.2zm-8.1 8.1a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2zm8.1 0a.2.2 0 0 0-.2.2v3.1c0 .1.1.2.2.2h3.1c.1 0 .2-.1.2-.2v-3.1a.2.2 0 0 0-.2-.2z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab[data-mobile-view="profile"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4.6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2 5.5c-4.2 0-7.4 2.4-7.4 5.4v.9h2v-.9c0-1.6 2.3-3.4 5.4-3.4s5.4 1.8 5.4 3.4v.9h2v-.9c0-3-3.2-5.4-7.4-5.4Z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 4.6a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 4a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm2 5.5c-4.2 0-7.4 2.4-7.4 5.4v.9h2v-.9c0-1.6 2.3-3.4 5.4-3.4s5.4 1.8 5.4 3.4v.9h2v-.9c0-3-3.2-5.4-7.4-5.4Z'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab span {
    margin: 0 !important;
    color: currentColor !important;
    font-size: 10.5px !important;
    line-height: 14px !important;
    font-weight: 650 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active {
    flex: 0 0 104px !important;
    color: rgba(29, 37, 48, 0.96) !important;
    border: 1.15px solid rgba(255, 255, 255, 0.96) !important;
    background: linear-gradient(142deg, rgba(255, 255, 255, 0.7) 15%, rgba(255, 255, 255, 0.42) 47%, rgba(255, 255, 255, 0.22) 72%) !important;
    box-shadow:
      0 12px 21px rgba(21, 32, 51, 0.08),
      inset 0 -1px 0 rgba(15, 31, 46, 0.03),
      inset -1px 0 8px rgba(255, 235, 178, 0.04),
      inset 1px 0 8px rgba(189, 255, 242, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
    animation: mp3FinalTabPop 420ms cubic-bezier(0.2, 0.9, 0.22, 1) !important;
  }

  html body.view-mp3 .mobile-tabbar .mobile-tab.active::before {
    transform: scale(1.1) translateY(-1px) !important;
    background: linear-gradient(180deg, #1e2632, #111723) !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab, .mp3-hero-stats article) {
    transform-origin: center center !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition:
      transform 220ms cubic-bezier(0.2, 0.9, 0.22, 1),
      filter 220ms ease,
      box-shadow 240ms ease,
      background 220ms ease,
      color 220ms ease !important;
  }

  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-play-all, .mp3-tabs button, .mp3-control-row button, .mp3-understand-row button, .mp3-mobile-detail-head button, .mp3-mobile-player-head button, .mobile-tabbar .mobile-tab, .mp3-hero-stats article):active {
    transform: scale(0.972) translateY(1px) !important;
    filter: saturate(1.08) brightness(1.018) !important;
  }

  @keyframes mp3FinalBgDrift {
    0% { background-position: 0 0, -4% 16%, 104% 34%, 0 0; }
    48% { background-position: 0 0, 1% 23%, 96% 30%, 0 0; }
    100% { background-position: 0 0, -10% 26%, 110% 40%, 0 0; }
  }

  @keyframes mp3FinalCardRise {
    0% { opacity: 0; transform: translate3d(0, 10px, 0) scale(0.985); }
    100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  }

  @keyframes mp3FinalTabPop {
    0% { transform: scale(1); }
    42% { transform: scale(1.085) translateY(-1px); }
    72% { transform: scale(0.985); }
    100% { transform: scale(1); }
  }
}

/* MP3 desktop final: align with the current warm homepage glass system. */
@media (min-width: 981px) {
  html body.view-mp3 {
    --mp3-desktop-page: #ffeb8f;
    --mp3-desktop-ink: #0d131c;
    --mp3-desktop-soft: rgba(62, 77, 97, 0.96);
    --mp3-desktop-muted: rgba(96, 110, 130, 0.82);
    --mp3-desktop-green: #00b783;
    --mp3-desktop-blue: #007aff;
    --mp3-desktop-line: rgba(255, 255, 255, 0.84);
    --mp3-desktop-glass:
      radial-gradient(120% 86% at 94% 0%, rgba(255, 236, 140, 0.22), rgba(255, 255, 255, 0) 58%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.32) 100%);
    --mp3-desktop-shadow:
      0 22px 38px -27px rgba(111, 80, 10, 0.22),
      inset 1px 0 0 rgba(255, 237, 152, 0.28),
      inset -1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.94),
      inset 0 -1px 0 rgba(104, 73, 8, 0.035);
    color: var(--mp3-desktop-ink) !important;
    background:
      radial-gradient(430px 820px at calc(50% + 545px) 90px, rgba(255, 248, 231, 0.1), transparent 72%),
      radial-gradient(420px 720px at calc(50% - 830px) 245px, rgba(255, 246, 226, 0.08), transparent 74%),
      radial-gradient(620px 470px at calc(50% + 95px) -220px, rgba(255, 232, 138, 0.13), transparent 74%),
      radial-gradient(470px 360px at calc(50% - 520px) 1405px, rgba(255, 229, 138, 0.11), transparent 76%),
      var(--mp3-desktop-page) !important;
    background-attachment: fixed !important;
    overflow-x: hidden !important;
  }

  html body.view-mp3::before,
  html body.view-mp3::after {
    content: "" !important;
    position: fixed !important;
    z-index: -1 !important;
    pointer-events: none !important;
    border-radius: 999px !important;
    transform: translate3d(0, 0, 0) !important;
  }

  html body.view-mp3::before {
    left: calc(50% - 380px) !important;
    top: 100px !important;
    width: 760px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, 0.8) !important;
    filter: blur(28px) !important;
    animation: mp3DesktopPearlDrift 30s ease-in-out infinite alternate !important;
  }

  html body.view-mp3::after {
    left: calc(50% - 520px) !important;
    top: 1380px !important;
    width: 470px !important;
    height: 360px !important;
    background: rgba(255, 229, 138, 0.11) !important;
    filter: blur(86px) !important;
    animation: mp3DesktopBgDrift 34s ease-in-out infinite alternate !important;
  }

  html body.view-mp3 .app-shell {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 70px minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  html body.view-mp3 .main,
  html body.view-mp3 #mp3,
  html body.view-mp3 #mp3.active-view {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--mp3-desktop-ink) !important;
    background:
      radial-gradient(430px 820px at calc(50% + 545px) 90px, rgba(255, 248, 231, 0.1), transparent 72%),
      radial-gradient(420px 720px at calc(50% - 830px) 245px, rgba(255, 246, 226, 0.08), transparent 74%),
      radial-gradient(620px 470px at calc(50% + 95px) -220px, rgba(255, 232, 138, 0.13), transparent 74%),
      var(--mp3-desktop-page) !important;
    background-attachment: fixed !important;
    box-shadow: none !important;
  }

  html body.view-mp3 .mp3-shell {
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    gap: 18px !important;
    width: min(1224px, calc(100vw - 56px)) !important;
    max-width: 1224px !important;
    min-height: auto !important;
    margin: 22px auto 56px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    -webkit-font-smoothing: antialiased !important;
    text-rendering: geometricPrecision !important;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid var(--mp3-desktop-line) !important;
    background: var(--mp3-desktop-glass) !important;
    box-shadow: var(--mp3-desktop-shadow) !important;
    -webkit-backdrop-filter: blur(30px) saturate(1.18) !important;
    backdrop-filter: blur(30px) saturate(1.18) !important;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card)::before {
    content: "" !important;
    position: absolute !important;
    left: 16px !important;
    top: 2px !important;
    z-index: 0 !important;
    width: min(98px, 58%) !important;
    height: 4px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.76) !important;
    filter: blur(1.5px) !important;
    opacity: 0.82 !important;
    pointer-events: none !important;
    transform: translateX(-12%) !important;
    animation: mp3DesktopEdgeSweep 4.8s ease-in-out infinite !important;
  }

  html body.view-mp3 :is(.mp3-hero, .mp3-type-panel, .mp3-list-panel, .mp3-player-panel, .mp3-settings-card) > * {
    position: relative !important;
    z-index: 1 !important;
  }

  html body.view-mp3 .mp3-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
    align-items: center !important;
    gap: 22px !important;
    min-height: 152px !important;
    padding: 24px 28px !important;
    border-radius: 30px !important;
  }

  html body.view-mp3 .mp3-back-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: max-content !important;
    min-height: 42px !important;
    margin: 0 0 12px !important;
    padding: 0 16px 0 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-soft) !important;
    background: rgba(255, 255, 255, 0.56) !important;
    box-shadow:
      0 12px 26px -22px rgba(163, 107, 5, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    text-shadow: none !important;
  }

  html body.view-mp3 .mp3-back-button::before {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19 12H5m6-6-6 6 6 6' fill='none' stroke='black' stroke-width='2.35' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body.view-mp3 .mp3-hero-main {
    display: grid !important;
    grid-template-columns: 68px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 18px !important;
  }

  html body.view-mp3 .mp3-orb {
    display: grid !important;
    place-items: center !important;
    width: 68px !important;
    height: 68px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  html body.view-mp3 .mp3-orb img {
    display: block !important;
    width: 68px !important;
    height: 68px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  html body.view-mp3 .mp3-hero .eyebrow,
  html body.view-mp3 .mp3-hero p {
    margin: 0 0 7px !important;
    color: var(--mp3-desktop-green) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    line-height: 1.1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    margin: 0 !important;
    color: var(--mp3-desktop-ink) !important;
    font-size: clamp(34px, 3.2vw, 48px) !important;
    font-weight: 700 !important;
    line-height: 1.02 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.68) !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  html body.view-mp3 .mp3-hero-stats article,
  html body.view-mp3 :is(.mp3-type-list button, .mp3-question-item, .mp3-search, .mp3-tabs, .mp3-play-all, .mp3-pagination, .mp3-player-top button, .mp3-subtitle-toggle, .mp3-control-row button, .mp3-understand-row button, .mp3-setting-options button, .mp3-slider-field, .mp3-mobile-detail-head button, .mp3-mobile-player-head button) {
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    background:
      radial-gradient(80% 100% at 94% 50%, rgba(255, 222, 88, 0.16), rgba(255, 255, 255, 0) 60%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.26) 55%, rgba(255, 255, 255, 0.14)) !important;
    box-shadow:
      0 18px 30px -24px rgba(91, 67, 11, 0.18),
      inset 1px 0 0 rgba(255, 226, 98, 0.12),
      inset -1px 0 0 rgba(255, 255, 255, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.82),
      inset 0 -1px 0 rgba(72, 51, 7, 0.025) !important;
    color: var(--mp3-desktop-soft) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.2) brightness(1.04) !important;
    backdrop-filter: blur(22px) saturate(1.2) brightness(1.04) !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    display: grid !important;
    align-content: center !important;
    min-height: 88px !important;
    padding: 16px !important;
    border-radius: 24px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    display: block !important;
    color: var(--mp3-desktop-green) !important;
    font-size: 28px !important;
    font-weight: 780 !important;
    line-height: 1 !important;
    text-shadow: 0 8px 18px rgba(0, 183, 131, 0.16) !important;
  }

  html body.view-mp3 .mp3-hero-stats span {
    display: block !important;
    margin-top: 8px !important;
    color: var(--mp3-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mp3 .mp3-layout {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.62fr) minmax(390px, 1.05fr) minmax(360px, 0.92fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.view-mp3 .mp3-type-panel,
  html body.view-mp3 .mp3-list-panel,
  html body.view-mp3 .mp3-player-panel {
    min-height: 680px !important;
    max-height: none !important;
    padding: 20px !important;
    border-radius: 30px !important;
  }

  html body.view-mp3 .mp3-type-list,
  html body.view-mp3 .mp3-question-list {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, 0.62) transparent !important;
  }

  html body.view-mp3 .mp3-panel-head,
  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
  }

  html body.view-mp3 .mp3-mobile-detail-head,
  html body.view-mp3 .mp3-mobile-player-head {
    display: none !important;
  }

  html body.view-mp3 .mp3-panel-head h3,
  html body.view-mp3 .mp3-player-panel h3,
  html body.view-mp3 .mp3-question-item strong,
  html body.view-mp3 .mp3-type-list button strong,
  html body.view-mp3 .mp3-play-all strong {
    color: var(--mp3-desktop-ink) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62) !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    margin: 0 !important;
    font-size: 22px !important;
    line-height: 1.15 !important;
  }

  html body.view-mp3 .mp3-panel-head span,
  html body.view-mp3 .mp3-player-top > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-green) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 13px !important;
    font-weight: 760 !important;
  }

  html body.view-mp3 .mp3-type-list {
    display: grid !important;
    gap: 12px !important;
  }

  html body.view-mp3 .mp3-type-list button {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 76px !important;
    padding: 13px 14px !important;
    border-radius: 24px !important;
    text-align: left !important;
    transition:
      transform 200ms cubic-bezier(0.2, 0.9, 0.22, 1),
      background 200ms ease,
      border-color 200ms ease,
      box-shadow 220ms ease !important;
  }

  html body.view-mp3 .mp3-type-list button:hover,
  html body.view-mp3 .mp3-question-item:hover,
  html body.view-mp3 .mp3-play-all:hover,
  html body.view-mp3 .mp3-control-row button:hover,
  html body.view-mp3 .mp3-tabs button:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255, 255, 255, 0.92) !important;
    background:
      radial-gradient(80% 100% at 94% 50%, rgba(255, 222, 88, 0.22), rgba(255, 255, 255, 0) 60%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.34) 55%, rgba(255, 255, 255, 0.2)) !important;
  }

  html body.view-mp3 .mp3-type-list button.active,
  html body.view-mp3 .mp3-question-item.active,
  html body.view-mp3 .mp3-tabs button.active,
  html body.view-mp3 .mp3-setting-options button.active,
  html body.view-mp3 .mp3-understand-row button.active {
    border-color: rgba(255, 199, 44, 0.64) !important;
    background:
      radial-gradient(96% 86% at 96% 0%, rgba(255, 216, 76, 0.2), rgba(255, 255, 255, 0) 62%),
      linear-gradient(146deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.5) 54%, rgba(255, 255, 255, 0.28)) !important;
  }

  html body.view-mp3 .mp3-type-list button > span,
  html body.view-mp3 .mp3-player-badge,
  html body.view-mp3 .mp3-question-item > button:first-child > span {
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(88, 198, 157, 0.42) !important;
    color: #20996a !important;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(223, 244, 234, 0.5)) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    border-radius: 18px !important;
    font-size: 12px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button div {
    display: grid !important;
    gap: 4px !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-type-list button strong {
    display: block !important;
    overflow: hidden !important;
    font-size: 14px !important;
    line-height: 1.18 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-type-list button small,
  html body.view-mp3 .mp3-question-item p,
  html body.view-mp3 .mp3-hero-stats span {
    color: var(--mp3-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 560 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    min-width: 32px !important;
    color: var(--mp3-desktop-soft) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-style: normal !important;
    font-weight: 760 !important;
    text-align: right !important;
  }

  html body.view-mp3 .mp3-toolbar {
    display: grid !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
  }

  html body.view-mp3 .mp3-search {
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    align-items: center !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    border-radius: 26px !important;
  }

  html body.view-mp3 .mp3-search span {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    overflow: hidden !important;
    color: transparent !important;
    background: var(--mp3-desktop-muted) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.1'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2.1'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body.view-mp3 .mp3-search input {
    width: 100% !important;
    min-width: 0 !important;
    height: 36px !important;
    border: 0 !important;
    outline: 0 !important;
    color: var(--mp3-desktop-ink) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 620 !important;
  }

  html body.view-mp3 .mp3-search input::placeholder {
    color: rgba(96, 110, 130, 0.72) !important;
  }

  html body.view-mp3 .mp3-tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 50px !important;
    padding: 5px !important;
    border-radius: 25px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(96, 110, 130, 0.84) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-tabs button.active {
    color: var(--mp3-desktop-ink) !important;
    background: rgba(255, 255, 255, 0.76) !important;
    font-weight: 760 !important;
  }

  html body.view-mp3 .mp3-play-all {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 60px !important;
    margin: 0 0 14px !important;
    padding: 8px 14px !important;
    border-radius: 30px !important;
    text-align: left !important;
  }

  html body.view-mp3 .mp3-play-all span {
    display: grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: transparent !important;
    background:
      radial-gradient(circle at 28% 16%, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.22) 52%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(255, 233, 146, 0.42)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.92),
      0 10px 18px rgba(128, 92, 8, 0.12) !important;
  }

  html body.view-mp3 .mp3-play-all span::before {
    content: "" !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background: var(--mp3-desktop-ink) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  html body.view-mp3 .mp3-play-all em {
    display: inline-grid !important;
    min-width: 36px !important;
    height: 32px !important;
    place-items: center !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-green) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-style: normal !important;
    font-weight: 780 !important;
  }

  html body.view-mp3 .mp3-question-list {
    display: grid !important;
    gap: 12px !important;
    padding-bottom: 12px !important;
  }

  html body.view-mp3 .mp3-question-item {
    position: relative !important;
    min-height: 92px !important;
    padding: 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 92px !important;
    padding: 14px 48px 14px 14px !important;
    border: 0 !important;
    background: transparent !important;
    text-align: left !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    width: 38px !important;
    height: 38px !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }

  html body.view-mp3 .mp3-question-item strong {
    display: -webkit-box !important;
    max-height: 42px !important;
    overflow: hidden !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    font-size: 15px !important;
    line-height: 1.28 !important;
  }

  html body.view-mp3 .mp3-question-item p {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin: 8px 0 0 !important;
  }

  html body.view-mp3 .mp3-question-item p :is(em, b, i, small) {
    display: inline-flex !important;
    min-height: 24px !important;
    align-items: center !important;
    padding: 0 9px !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-muted) !important;
    background: rgba(255, 255, 255, 0.48) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
    font-size: 11px !important;
    font-style: normal !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 .mp3-star {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    display: grid !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    place-items: center !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: rgba(96, 110, 130, 0.82) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    transform: translateY(-50%) !important;
  }

  html body.view-mp3 .mp3-star.saved {
    color: #b87a00 !important;
  }

  html body.view-mp3 .mp3-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: fit-content !important;
    margin: 2px auto 0 !important;
    padding: 7px 9px !important;
    border-radius: 18px !important;
  }

  html body.view-mp3 .mp3-pagination[hidden] {
    display: none !important;
  }

  html body.view-mp3 .mp3-pagination button {
    min-width: 74px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 15px !important;
    color: var(--mp3-desktop-soft) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-pagination button:disabled {
    opacity: 0.42 !important;
  }

  html body.view-mp3 .mp3-pagination span {
    color: var(--mp3-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 .mp3-player-panel {
    display: grid !important;
    grid-template-rows: auto auto auto minmax(188px, 1fr) auto auto auto !important;
    gap: 14px !important;
  }

  html body.view-mp3 .mp3-player-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 38px !important;
  }

  html body.view-mp3 .mp3-player-top button,
  html body.view-mp3 .mp3-subtitle-toggle,
  html body.view-mp3 .mp3-understand-row button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-soft) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    text-align: center !important;
  }

  html body.view-mp3 .mp3-player-badge {
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
    font-size: 18px !important;
  }

  html body.view-mp3 .mp3-player-panel h3 {
    width: calc(100% - 74px) !important;
    min-height: 58px !important;
    margin: -72px 0 0 74px !important;
    overflow: hidden !important;
    font-size: clamp(24px, 2.1vw, 34px) !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-transcript {
    display: block !important;
    height: clamp(210px, 31vh, 310px) !important;
    min-height: clamp(210px, 31vh, 310px) !important;
    max-height: clamp(210px, 31vh, 310px) !important;
    padding: 18px !important;
    overflow: hidden auto !important;
    border: 1px solid rgba(255, 255, 255, 0.76) !important;
    border-radius: 26px !important;
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.24)) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      inset 0 -1px 0 rgba(255, 218, 88, 0.1),
      0 16px 26px rgba(94, 72, 25, 0.055) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.14) !important;
    backdrop-filter: blur(18px) saturate(1.14) !important;
    scrollbar-width: none !important;
  }

  html body.view-mp3 .mp3-transcript::-webkit-scrollbar {
    display: none !important;
  }

  html body.view-mp3 .mp3-lyric-track {
    display: grid !important;
    gap: 10px !important;
    min-height: 100% !important;
    padding: 34px 0 !important;
  }

  html body.view-mp3 .mp3-lyric-line {
    max-width: 92% !important;
    margin: 0 auto !important;
    color: rgba(31, 39, 52, 0.6) !important;
    font-size: clamp(15px, 1.12vw, 20px) !important;
    font-weight: 580 !important;
    line-height: 1.38 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.66) !important;
    transition: color 0.28s ease, transform 0.28s ease !important;
  }

  html body.view-mp3 .mp3-lyric-line.active {
    color: rgba(18, 24, 35, 0.94) !important;
    font-weight: 700 !important;
    transform: scale(1.015) !important;
  }

  html body.view-mp3 .mp3-progress-row {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    align-items: center !important;
    gap: 9px !important;
    color: var(--mp3-desktop-muted) !important;
    font-size: 12px !important;
    font-weight: 650 !important;
  }

  html body.view-mp3 #mp3Progress,
  html body.view-mp3 .mp3-slider-field input {
    width: 100% !important;
    accent-color: var(--mp3-desktop-green) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-runnable-track,
  html body.view-mp3 .mp3-slider-field input::-webkit-slider-runnable-track {
    height: 6px !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
  }

  html body.view-mp3 #mp3Progress::-webkit-slider-thumb,
  html body.view-mp3 .mp3-slider-field input::-webkit-slider-thumb {
    width: 18px !important;
    height: 18px !important;
    margin-top: -6px !important;
    border: 2px solid rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    background: var(--mp3-desktop-green) !important;
    box-shadow: 0 6px 14px rgba(0, 183, 131, 0.22) !important;
  }

  html body.view-mp3 .mp3-control-row {
    display: grid !important;
    grid-template-columns: 44px 44px 64px 44px 58px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
  }

  html body.view-mp3 .mp3-control-row button {
    position: relative !important;
    display: grid !important;
    width: 44px !important;
    min-width: 0 !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 50% !important;
    color: rgba(38, 48, 65, 0.82) !important;
    font-size: 0 !important;
    font-weight: 720 !important;
    line-height: 1 !important;
    text-shadow: none !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton {
    width: 58px !important;
    border-radius: 22px !important;
    color: rgba(38, 48, 65, 0.82) !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-control-row button::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    background: currentColor !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
  }

  html body.view-mp3 #mp3SettingsButton::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h10M18 7h2M10 12h10M4 12h2M4 17h8M16 17h4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='8' cy='12' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='14' cy='17' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 7h10M18 7h2M10 12h10M4 12h2M4 17h8M16 17h4' fill='none' stroke='black' stroke-width='2.1' stroke-linecap='round'/%3E%3Ccircle cx='16' cy='7' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='8' cy='12' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3Ccircle cx='14' cy='17' r='2' fill='none' stroke='black' stroke-width='2.1'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 #mp3PrevButton::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m15 18-6-6 6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 #mp3NextButton::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 18 6-6-6-6' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 #mp3PlayButton::before {
    width: 25px !important;
    height: 25px !important;
    transform: translateX(1px) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7Z' fill='black'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 5v14l11-7Z' fill='black'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mp3-player-panel.is-playing #mp3PlayButton::before {
    transform: none !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5h4v14H7zM13 5h4v14h-4z' fill='black'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 5h4v14H7zM13 5h4v14h-4z' fill='black'/%3E%3C/svg%3E") !important;
  }

  html body.view-mp3 .mp3-control-row .mp3-main-play {
    width: 64px !important;
    height: 64px !important;
    color: var(--mp3-desktop-ink) !important;
    background:
      radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 56%, rgba(255, 255, 255, 0.18) 100%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(255, 235, 150, 0.42)) !important;
    box-shadow:
      0 16px 24px -18px rgba(73, 55, 12, 0.28),
      0 0 18px rgba(0, 183, 131, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 0 rgba(101, 70, 6, 0.05) !important;
  }

  html body.view-mp3 .mp3-understand-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-settings-sheet {
    -webkit-backdrop-filter: blur(14px) saturate(1.08) !important;
    backdrop-filter: blur(14px) saturate(1.08) !important;
  }

  html body.view-mp3 .mp3-settings-backdrop {
    background: rgba(255, 235, 142, 0.34) !important;
  }

  html body.view-mp3 .mp3-settings-card {
    width: min(520px, calc(100vw - 48px)) !important;
    padding: 22px !important;
    border-radius: 30px !important;
  }

  html body.view-mp3 .mp3-settings-head h3,
  html body.view-mp3 .mp3-setting-group h4 {
    color: var(--mp3-desktop-ink) !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
  }

  html body.view-mp3 .mp3-setting-options {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-setting-options button {
    min-height: 42px !important;
    padding: 0 10px !important;
    border-radius: 21px !important;
    color: var(--mp3-desktop-soft) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-slider-field {
    display: grid !important;
    gap: 10px !important;
    min-height: 72px !important;
    padding: 14px !important;
    border-radius: 22px !important;
    color: var(--mp3-desktop-soft) !important;
    font-size: 13px !important;
    font-weight: 720 !important;
  }

  html body.view-mp3 :is(button, input, select) {
    font-family: inherit !important;
  }

  @keyframes mp3DesktopPearlDrift {
    0% { transform: translate3d(-18px, 0, 0); opacity: 0.66; }
    100% { transform: translate3d(22px, 8px, 0); opacity: 0.9; }
  }

  @keyframes mp3DesktopBgDrift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(28px, -18px, 0) scale(1.05); }
  }

  @keyframes mp3DesktopEdgeSweep {
    0%, 100% { transform: translateX(-22%); opacity: 0.45; }
    45% { transform: translateX(42%); opacity: 0.9; }
  }
}

@media (min-width: 981px) and (max-width: 1180px) {
  html body.view-mp3 .mp3-shell {
    width: min(1100px, calc(100vw - 32px)) !important;
  }

  html body.view-mp3 .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="list"] .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.58fr) minmax(0, 1.42fr) !important;
    align-items: start !important;
    gap: 14px !important;
    width: 100% !important;
    max-width: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    display: grid !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px) !important;
  }
}

@media (min-width: 1181px) {
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-layout {
    display: grid !important;
    grid-template-columns: minmax(220px, 0.62fr) minmax(390px, 1.05fr) minmax(360px, 0.92fr) !important;
    align-items: stretch !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-player-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-list-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    display: grid !important;
    min-height: 680px !important;
  }
}

/* MP3 player layout lock: outrank the older data-step player rules. */
@media (max-width: 980px) {
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    display: grid !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 16px !important;
    border-radius: 28px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-badge {
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    width: 58px !important;
    height: 58px !important;
    border-radius: 22px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel h3 {
    width: calc(100% - 74px) !important;
    min-height: 58px !important;
    margin: -58px 0 0 74px !important;
    text-align: left !important;
    font-size: 24px !important;
    line-height: 1.12 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-transcript {
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    padding: 18px !important;
    border-radius: 26px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-control-row {
    display: grid !important;
    grid-template-columns: 42px 42px 60px 42px 54px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-control-row .mp3-main-play {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    color: transparent !important;
    font-size: 0 !important;
  }
}

/* MP3 desktop flow correction: keep the original two-column list and standalone player. */
@media (min-width: 981px) {
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.58fr) minmax(520px, 1.42fr) !important;
    align-items: stretch !important;
    gap: clamp(14px, 1.4vw, 22px) !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    display: grid !important;
    height: auto !important;
    min-height: clamp(560px, 58vh, 700px) !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;
    min-width: 0 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-player-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-hero,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-list-panel {
    display: none !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-layout {
    display: block !important;
    width: 100% !important;
    max-width: min(980px, calc(100vw - 56px)) !important;
    margin: 0 auto !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel {
    position: relative !important;
    top: 0 !important;
    display: grid !important;
    width: 100% !important;
    max-width: 980px !important;
    height: auto !important;
    min-height: clamp(620px, calc(100vh - 160px), 820px) !important;
    max-height: none !important;
    padding: clamp(24px, 3vw, 36px) !important;
    overflow: visible !important;
    align-content: start !important;
    grid-template-rows: auto auto auto auto auto auto auto auto auto !important;
    gap: 14px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-mobile-player-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin: 0 0 4px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-mobile-player-head button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: var(--mp3-desktop-soft) !important;
    background: rgba(255, 255, 255, 0.58) !important;
    box-shadow:
      0 12px 26px -22px rgba(163, 107, 5, 0.16),
      inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
    font-size: 14px !important;
    font-weight: 760 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-mobile-player-head span {
    display: block !important;
    color: var(--mp3-desktop-green) !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    text-transform: uppercase !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-mobile-player-head strong {
    display: block !important;
    color: var(--mp3-desktop-ink) !important;
    font-size: 22px !important;
    font-weight: 760 !important;
    line-height: 1.1 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-badge {
    justify-self: start !important;
    align-self: start !important;
    margin: 0 !important;
    width: 66px !important;
    height: 66px !important;
    border-radius: 24px !important;
    font-size: 20px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-player-panel h3 {
    width: calc(100% - 84px) !important;
    height: auto !important;
    min-height: 66px !important;
    max-height: 112px !important;
    margin: -66px 0 0 84px !important;
    overflow: hidden !important;
    text-align: left !important;
    font-size: clamp(30px, 3vw, 46px) !important;
    line-height: 1.08 !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="player"] .mp3-transcript {
    height: clamp(210px, 28vh, 270px) !important;
    min-height: clamp(210px, 28vh, 270px) !important;
    max-height: clamp(210px, 28vh, 270px) !important;
  }

  html body.view-mp3 .mp3-play-all span {
    font-size: 0 !important;
    line-height: 0 !important;
  }
}

/* MP3 desktop detail polish: compact the list workspace without changing flow. */
@media (min-width: 981px) {
  html body.view-mp3 .mp3-hero {
    min-height: 168px !important;
    height: auto !important;
    padding: 20px 28px !important;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 420px) !important;
    gap: 16px 20px !important;
  }

  html body.view-mp3 .mp3-hero-main {
    grid-template-columns: 60px minmax(0, 1fr) !important;
    gap: 16px !important;
    padding-top: 0 !important;
  }

  html body.view-mp3 .mp3-orb,
  html body.view-mp3 .mp3-orb img {
    width: 60px !important;
    height: 60px !important;
  }

  html body.view-mp3 .mp3-hero .eyebrow,
  html body.view-mp3 .mp3-hero p {
    margin-bottom: 5px !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-hero h2 {
    font-size: clamp(32px, 3vw, 42px) !important;
    line-height: 1.02 !important;
  }

  html body.view-mp3 .mp3-hero-stats {
    gap: 10px !important;
  }

  html body.view-mp3 .mp3-hero-stats article {
    min-height: 68px !important;
    padding: 12px 14px !important;
    border-radius: 22px !important;
  }

  html body.view-mp3 .mp3-hero-stats strong {
    font-size: 24px !important;
  }

  html body.view-mp3 .mp3-hero-stats span {
    margin-top: 6px !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-layout {
    align-items: start !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-type-panel,
  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    height: clamp(540px, calc(100vh - 360px), 660px) !important;
    min-height: 0 !important;
    max-height: 660px !important;
    padding: 18px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-type-panel {
    grid-template-rows: auto minmax(0, 1fr) !important;
  }

  html body.view-mp3 .mp3-shell[data-mobile-step="detail"] .mp3-list-panel {
    position: relative !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }

  html body.view-mp3 .mp3-panel-head {
    margin: 0 0 12px !important;
  }

  html body.view-mp3 .mp3-panel-head h3 {
    font-size: 20px !important;
  }

  html body.view-mp3 .mp3-panel-head span {
    min-height: 30px !important;
    padding: 0 10px !important;
    font-size: 12px !important;
  }

  html body.view-mp3 .mp3-type-list {
    align-content: start !important;
    grid-auto-rows: minmax(58px, max-content) !important;
    gap: 8px !important;
    min-height: 0 !important;
    padding-right: 2px !important;
    overflow: hidden auto !important;
  }

  html body.view-mp3 .mp3-type-list button {
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    min-height: 58px !important;
    height: 58px !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-type-list button > span {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
  }

  html body.view-mp3 .mp3-type-list button strong {
    font-size: 13px !important;
  }

  html body.view-mp3 .mp3-type-list button em {
    min-width: 34px !important;
    font-size: 13px !important;
  }

  html body.view-mp3 .mp3-toolbar {
    position: relative !important;
    z-index: 2 !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
  }

  html body.view-mp3 .mp3-search {
    min-height: 48px !important;
    padding: 0 14px !important;
    border-radius: 24px !important;
  }

  html body.view-mp3 .mp3-tabs {
    width: calc(100% - 172px) !important;
    min-height: 46px !important;
    padding: 5px !important;
    border-radius: 23px !important;
  }

  html body.view-mp3 .mp3-tabs button {
    min-height: 36px !important;
    border-radius: 18px !important;
  }

  html body.view-mp3 .mp3-play-all {
    position: absolute !important;
    top: 76px !important;
    right: 18px !important;
    z-index: 3 !important;
    grid-template-columns: 30px minmax(0, auto) auto !important;
    gap: 7px !important;
    width: 158px !important;
    min-width: 158px !important;
    max-width: 158px !important;
    min-height: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 4px 8px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-play-all span {
    width: 30px !important;
    height: 30px !important;
  }

  html body.view-mp3 .mp3-play-all span::before {
    width: 15px !important;
    height: 15px !important;
  }

  html body.view-mp3 .mp3-play-all strong {
    overflow: hidden !important;
    font-size: 13px !important;
    line-height: 1 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  html body.view-mp3 .mp3-play-all em {
    min-width: 34px !important;
    height: 28px !important;
    font-size: 13px !important;
  }

  html body.view-mp3 .mp3-question-list {
    align-content: start !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding-bottom: 2px !important;
    overflow: hidden auto !important;
  }

  html body.view-mp3 .mp3-question-item {
    min-height: 72px !important;
    height: auto !important;
    border-radius: 20px !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child {
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 11px !important;
    min-height: 72px !important;
    padding: 10px 44px 10px 12px !important;
  }

  html body.view-mp3 .mp3-question-item > button:first-child > span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 15px !important;
  }

  html body.view-mp3 .mp3-question-item strong {
    font-size: 14.5px !important;
    line-height: 1.22 !important;
  }

  html body.view-mp3 .mp3-question-item p {
    gap: 6px !important;
    margin-top: 6px !important;
  }

  html body.view-mp3 .mp3-question-item p :is(em, b, i, small) {
    min-height: 22px !important;
    padding: 0 8px !important;
    font-size: 10.5px !important;
  }

  html body.view-mp3 .mp3-star {
    right: 12px !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    font-size: 17px !important;
  }

  html body.view-mp3 .mp3-pagination {
    gap: 8px !important;
    margin: 8px auto 0 !important;
    padding: 5px 7px !important;
  }

  html body.view-mp3 .mp3-pagination button {
    min-width: 64px !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    border-radius: 16px !important;
  }

  html body.view-mp3 .mp3-control-row #mp3SpeedButton::before {
    content: none !important;
    display: none !important;
  }
}

/* MP3 desktop type badges: distinct but soft colors for fast scanning. */
@media (min-width: 981px) {
  html body.view-mp3 .mp3-type-list button[data-mp3-type] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type] {
    color: var(--mp3-type-ink, #20996a) !important;
    border-color: color-mix(in srgb, var(--mp3-type-ink, #20996a) 34%, rgba(255, 255, 255, 0.74)) !important;
    background:
      radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.22) 58%),
      linear-gradient(145deg, rgba(255, 255, 255, 0.76), var(--mp3-type-wash, rgba(223, 244, 234, 0.54))) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.88),
      0 9px 18px color-mix(in srgb, var(--mp3-type-ink, #20996a) 14%, transparent) !important;
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="RA"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="RA"] {
    --mp3-type-ink: #1fa17d;
    --mp3-type-wash: rgba(215, 246, 233, 0.62);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="RS"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="RS"] {
    --mp3-type-ink: #2786d8;
    --mp3-type-wash: rgba(219, 238, 255, 0.62);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="RL"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="RL"] {
    --mp3-type-ink: #7d5bd6;
    --mp3-type-wash: rgba(236, 229, 255, 0.64);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="ASQ"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="ASQ"] {
    --mp3-type-ink: #d07b21;
    --mp3-type-wash: rgba(255, 236, 210, 0.66);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="SGD"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="SGD"] {
    --mp3-type-ink: #be4f7a;
    --mp3-type-wash: rgba(255, 225, 235, 0.64);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="RTS"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="RTS"] {
    --mp3-type-ink: #2f9698;
    --mp3-type-wash: rgba(218, 246, 247, 0.64);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="SST"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="SST"] {
    --mp3-type-ink: #6875d8;
    --mp3-type-wash: rgba(227, 231, 255, 0.64);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="L-FIB"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="L-FIB"] {
    --mp3-type-ink: #4f8b31;
    --mp3-type-wash: rgba(229, 244, 215, 0.66);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="HIW"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="HIW"] {
    --mp3-type-ink: #b36d2f;
    --mp3-type-wash: rgba(250, 231, 212, 0.66);
  }

  html body.view-mp3 .mp3-type-list button[data-mp3-type="WFD"] > span,
  html body.view-mp3 .mp3-player-badge[data-mp3-type="WFD"] {
    --mp3-type-ink: #138a70;
    --mp3-type-wash: rgba(214, 243, 236, 0.66);
  }
}

/* MP3 desktop hero placement: lower the title lockup without pushing the page down. */
@media (min-width: 981px) {
  html body.view-mp3 .mp3-hero-main {
    align-self: center !important;
    transform: translateY(18px) !important;
  }
}