@property --cover-color-1 {
        syntax: "<color>";
        inherits: true;
        initial-value: rgb(90, 140, 150);
      }
      @property --cover-color-2 {
        syntax: "<color>";
        inherits: true;
        initial-value: rgb(60, 90, 100);
      }

      :root {
        --fg: rgba(255, 255, 255, 0.92);
        --muted: rgba(255, 255, 255, 0.46);
        --cover-rgb: 90 140 150;
        --cover-rgb2: 60 90 100;
        --cover-rgbc: 90, 140, 150;
        --cover-rgb2c: 60, 90, 100;
        --cover-color-1: rgb(90, 140, 150);
        --cover-color-2: rgb(60, 90, 100);
        --cover-img: none;
        --player-bg-top: 53 66 77;
        --player-bg-bottom: 23 29 36;
        --player-bg-top-c: 53, 66, 77;
        --player-bg-bottom-c: 23, 29, 36;
        --tone-panel-base: 105%;
        --tone-panel-drag: 0px;
      }

      html,
  body {
    height: 100%;
    background: #171717;
    background: radial-gradient(900px 700px at 20% 0%, color-mix(in srgb, var(--cover-color-1), transparent 78%), transparent 58%),
      radial-gradient(900px 700px at 90% 30%, color-mix(in srgb, var(--cover-color-2), transparent 80%), transparent 62%),
      linear-gradient(180deg, rgb(var(--player-bg-top) / 1) 0%, rgb(var(--player-bg-bottom) / 1) 100%);
    transition: background 0.6s cubic-bezier(0.22, 1, 0.36, 1), --cover-color-1 0.6s cubic-bezier(0.22, 1, 0.36, 1), --cover-color-2 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }

      html {
        -webkit-tap-highlight-color: transparent;
        color-scheme: dark;
      }

      /* Global focus outline reset for app-like experience */
      *:focus, *:focus-visible {
        outline: none !important;
      }

      @media (hover: none) and (pointer: coarse) {
        a,
        button,
        input,
        textarea,
        select,
        [role="button"] {
          -webkit-tap-highlight-color: transparent;
          outline: none;
        }

        a:focus,
        button:focus,
        input:focus,
        textarea:focus,
        select:focus,
        [role="button"]:focus {
          outline: none;
        }
      }

      body {
        margin: 0;
        background: #171717;
        position: relative;
        color: rgba(255, 255, 255, 0.9);
        font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC",
          "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
        touch-action: manipulation;
        min-height: 100dvh;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      body::before {
        content: "";
        position: fixed;
        inset: -140px;
        background-image: var(--cover-img);
        background-size: cover;
        background-position: center;
        /* REMOVED Gaussian blur as requested to prevent banding and use pure gradient */
        /* filter: blur(126px) saturate(1.28); */
        transform: scale(1.22);
        opacity: 0;
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 0;
        /* Force hide the image layer to rely solely on the CSS gradient on body */
        display: none !important;
      }

      body.has-cover::before {
        opacity: 0.5;
      }

      body.has-cover.bgSwap::before,
      body.bgSwap::before {
        opacity: 0.22;
      }

      body.playerOpen::before {
        opacity: 0;
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        background: radial-gradient(900px 700px at 50% 0%, rgba(23, 23, 23, 0) 0%, rgba(23, 23, 23, 0.6) 70%, #171717 100%);
        opacity: 1;
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 0;
      }

      body.playerOpen::after {
        opacity: 0;
      }

      body.solidHome::before {
        opacity: 0;
      }

      body.solidHome::after {
        opacity: 0;
      }

      body.noBgTransition::before,
      body.noBgTransition::after {
        transition: none !important;
      }

      body.solidHome .musicBg {
        opacity: 0 !important;
      }

      body.noBgTransition .musicBg {
        transition: none !important;
      }

      .mono {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      }

      .app {
        min-height: 100%;
        display: grid;
        place-items: center;
        padding: 0;
        position: relative;
        z-index: 1;
      }

      .shell {
        width: min(520px, 100%);
        border: none;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .screen {
        min-height: 100vh;
        min-height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        display: grid;
        grid-template-rows: auto 1fr auto;
        position: relative;
        z-index: 0;
      }

      .musicBg {
        position: fixed;
        inset: -140px;
        background-size: cover;
        background-position: center;
        filter: blur(126px) saturate(1.28);
        transform: scale(1.22);
        opacity: 0;
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: -1;
      }

      #homeScreen[data-tab="library"] .musicBg {
        opacity: 0.55;
      }

      body[data-library-mode="root"] #homeScreen[data-tab="library"] .musicBg {
        opacity: 0;
      }

      #homeScreen:not([data-tab="library"]):not([data-tab="discover"]):not([data-tab="me"]) .musicBg {
        opacity: 0;
      }

      #homeScreen[data-tab="search"] {
        background: transparent;
      }

      #homeScreen[data-tab="discover"] {
        background: transparent;
      }

      body[data-tab="search"] {
        background: linear-gradient(180deg, #393029 0%, #171717 100%);
      }

      body[data-tab="discover"] {
        background: linear-gradient(180deg, #364856 0%, #181A1E 100%);
      }

      body[data-tab="library"][data-library-mode="root"] {
        background: linear-gradient(180deg, #364056 0%, #1A181E 100%);
      }

      body[data-tab="me"] {
        background: linear-gradient(180deg, #2F394F 0%, #151922 100%);
      }

      .topbar {
        display: grid;
        grid-template-columns: 1fr 40px;
        align-items: center;
        padding: calc(env(safe-area-inset-top) + 18px) 18px 14px 18px;
        position: relative;
        z-index: 20;
        backdrop-filter: none;
        transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      .topbarMiniCover {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 36px;
        height: 36px;
        border-radius: 6px;
        object-fit: cover;
        transform: translate3d(-50%, -50%, 0) scale(0.92);
        opacity: 0;
        pointer-events: none;
        z-index: 2;
        will-change: transform, opacity;
      }

      #btnNavBack {
        display: none;
      }

      .topbar.hasBack #btnNavBack {
        display: grid;
      }

      .topbar.hasBack #btnMenu {
        display: none;
      }

      #btnNavBack .iconImg,
#btnExitPlayMode .iconImg {
  width: 24px;
  height: 24px;
  opacity: 0.65;
}

      .topbar::before {
        display: none;
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: calc(env(safe-area-inset-top) + 72px);
        background: transparent;
        -webkit-backdrop-filter: blur(16px);
        backdrop-filter: blur(16px);
        pointer-events: none;
        z-index: -1;
      }

      .brandBtn {
        appearance: none;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.78);
        font: inherit;
        text-align: left;
        padding: 8px 0;
        cursor: pointer;
        font-size: 20px;
        font-weight: 800;
        letter-spacing: 0.2px;
        display: inline-flex;
        align-items: center;
      }

      .brandLogo {
        height: 24px;
        width: auto;
        display: block;
      }

      .icon {
        appearance: none;
        border: none;
        background: transparent;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        cursor: pointer;
      }

      .iconImg {
        width: 20px;
        height: 20px;
        display: block;
        opacity: 0.88;
      }

      #btnSearch .iconImg {
        width: 24px;
        height: 24px;
        margin-left: 6px;
      }

      #btnClosePlayer .iconImg {
        width: 24px;
        height: 24px;
        opacity: 0.5;
      }

      .homeMain {
        padding: 0 18px 96px;
        display: grid;
        gap: 18px;
        align-content: start;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        touch-action: pan-y;
      }

      .homeMain::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      #pageHome {
        padding-top: 4px;
        gap: 24px;
      }

      #pageLibrary {
        padding-top: 4px;
        gap: 24px;
      }

      .homeModule {
        display: grid;
        gap: 16px;
      }

      .librarySections {
        display: grid;
        gap: 14px;
      }

      .librarySections .searchDivider {
        margin: 0;
      }

      .libraryTitleRow {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
      }

      .libraryTitleRow .homeAlbumTitle {
        margin-top: 0;
      }

      .libraryViewAllBtn {
        appearance: none;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
        font-size: 14px;
        font-weight: 800;
        padding: 6px 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      .libraryViewAllBtn:active {
        opacity: 0.85;
      }

      #pageSearch {
        padding-top: calc(env(safe-area-inset-top) + 16px);
        gap: 22px;
      }

      .searchTop {
        display: grid;
        gap: 10px;
      }

      .searchBarRow {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: 14px;
      }

      .searchField {
        position: relative;
        height: 40px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        display: grid;
        align-items: center;
      }

      .searchFieldIcon {
        position: absolute;
        left: 12px;
        top: 50%;
        width: 24px;
        height: 24px;
        transform: translateY(-50%);
        opacity: 0.55;
        pointer-events: none;
      }

      .searchInput {
        width: 100%;
        height: 40px;
        border: none;
        outline: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.9);
        font-size: 15px;
        font-weight: 400;
        padding: 0 60px 0 44px;
        -webkit-appearance: none;
        appearance: none;
      }

      .searchInput::-webkit-search-cancel-button,
      .searchInput::-webkit-search-decoration,
      .searchInput::-webkit-search-results-button,
      .searchInput::-webkit-search-results-decoration {
        -webkit-appearance: none;
        appearance: none;
        display: none;
      }

      .searchInput::placeholder {
        color: rgba(255, 255, 255, 0.28);
        font-weight: 400;
      }

      .searchCancel {
        appearance: none;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
        font-size: 16px;
        font-weight: 400;
        padding: 0;
        position: absolute;
        right: 12px;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        display: none;
      }
      .searchBarRow.show-cancel .searchCancel {
        display: block;
      }

      .searchModule {
        display: grid;
        gap: 14px;
      }

      #searchHistorySection {
        margin-bottom: 18px;
      }

      .searchTitle {
        font-size: 16px;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.86);
        display: flex;
        align-items: baseline;
        justify-content: space-between;
      }

      .searchSubtitle {
        font-size: 12px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.5);
      }

      .searchChips {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .searchChip {
    appearance: none;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 8px;
    height: 28px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

      .searchAlbumResults {
        display: grid;
        gap: 10px;
      }

      #searchResultsSection {
        gap: 0;
      }

      .searchDivider {
        height: 0;
        border-top: 0.5px solid rgba(255, 255, 255, 0.05);
        margin: 24px 0;
      }

      .searchAlbumRow {
        appearance: none;
        border: none;
        background: transparent;
        color: inherit;
        width: 100%;
        padding: 2px 0 8px;
        display: grid;
        grid-template-columns: 56px 1fr 22px;
        gap: 12px;
        align-items: center;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
      }

      .searchAlbumCover {
        width: 56px;
        height: 56px;
        border-radius: 12px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.06);
        border: none;
      }

      .searchAlbumInfo {
        min-width: 0;
        display: grid;
        gap: 4px;
      }

      .searchAlbumName {
        font-size: 14px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.92);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .searchAlbumCount {
        font-size: 12px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.46);
      }

      .hl {
        color: #7ad0ff;
      }

      .page {
        display: none;
      }

      .page.active {
        display: grid;
      }

      #pageMusic {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
      }

      #pageMusic .homeAlbumTitle,
      #pageMusic .homeActions {
        transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: opacity, transform;
      }

      #pageMusic.stagger-enter .homeAlbumTitle,
      #pageMusic.stagger-enter .homeActions {
        opacity: 0;
        transform: translate3d(0, 24px, 0);
        transition: none;
      }

      #pageMusic .homeAlbumTitle {
        transition-delay: 60ms;
      }

      #pageMusic .homeActions {
        transition-delay: 100ms;
      }

      #homeScreen[data-tab="me"] .topbar {
        display: none;
      }

      #homeScreen[data-tab="search"] .topbar {
        display: none;
      }

      .meMain {
        padding-top: calc(env(safe-area-inset-top) + 36px);
      }

      .meHero {
        display: grid;
        justify-items: center;
        gap: 10px;
        padding: 24px 0 10px;
      }

      .meAvatar {
        width: 72px;
        height: 72px;
        border-radius: 999px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        cursor: pointer;
      }

      .meName {
        font-size: 18px;
        font-weight: 900;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.92);
        cursor: pointer;
      }

      .meStats {
        font-size: 13px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.46);
      }

      .albumHero {
        display: grid;
        place-items: center;
        padding: 10px 0 2px;
      }

      .albumCoverFx {
        width: min(210px, 52vw);
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        position: relative;
        transform-origin: center;
        will-change: transform, opacity;
        overflow: hidden;
        isolation: isolate;
        background: rgba(255, 255, 255, 0.08);
      }

      .albumCoverFx::before,
      .albumCoverFx::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: 2;
        mix-blend-mode: screen;
        pointer-events: none;
        will-change: opacity, background-position;
        opacity: 0;
      }

      /* Mode: Sweep (Always active as base layer) */
      .albumCoverFx::before {
        /* Defaults if not set by JS */
        --fx-pos-x: 18%;
        --fx-pos-y: 18%;
        --fx-angle: 120deg;
        
        background-image: radial-gradient(60% 50% at var(--fx-pos-x) var(--fx-pos-y), rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0) 60%),
          linear-gradient(var(--fx-angle), rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 56%);
        background-repeat: no-repeat;
        background-size: 100% 100%, 240% 240%;
        background-position: 0 0, -160% 0;
        /* Cycle: 7s total. Delay: 1s initial. */
        animation: albumSweep 7s ease-in-out infinite;
        animation-delay: 1s;
      }

      /* Sparkle Particles (Managed via JS) */
      .fx-sparkle-container {
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        overflow: hidden;
        border-radius: inherit;
        opacity: 0;
        transition: opacity 1.2s ease-in-out;
      }

      .fx-sparkle-container.visible {
        opacity: 1;
      }

      .fx-sparkle-particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 70%);
        pointer-events: none;
        will-change: transform, opacity;
        opacity: 0;
        border-radius: 50%;
        mix-blend-mode: screen;
      }

      .albumCoverFx.fxPaused .fx-sparkle-container {
        display: none;
      }

      @keyframes albumSweep {
        0% {
          background-position: 0 0, -160% 0;
          opacity: 0;
        }
        8% {
          opacity: 0.15;
        }
        18% {
          opacity: 0.55;
        }
        35% {
          background-position: 0 0, 160% 0;
          opacity: 0;
        }
        100% {
          background-position: 0 0, 160% 0;
          opacity: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .albumCoverFx::before {
          animation: none;
          background-position: 0 0, -40% 0;
          opacity: 0.2;
        }

        .fx-sparkle-container {
          animation: none;
          opacity: 0.4;
        }
      }

      @keyframes skeletonShimmer {
        0% {
          transform: translateX(-100%);
        }
        100% {
          transform: translateX(100%);
        }
      }

      .skeletonShimmer {
        position: relative;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.08);
      }

      .skeletonShimmer::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.1) 40%, rgba(255, 255, 255, 0.16) 50%, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
        transform: translateX(-100%);
        will-change: transform;
        animation: skeletonShimmer 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .skeletonShimmer::after {
          animation: none;
          opacity: 0;
        }
      }

      .albumCoverFx.isSkeleton::before {
        opacity: 0;
        animation: none;
      }

      .albumCoverFx.isSkeleton {
        background: rgba(255, 255, 255, 0.08);
      }

      .albumCoverFx.isSkeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        z-index: 3;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0) 100%);
        width: 60%;
        left: -30%;
        will-change: transform;
        animation: skeletonShimmer 1.25s ease-in-out infinite;
        pointer-events: none;
      }

      @media (prefers-reduced-motion: reduce) {
        .albumCoverFx.isSkeleton::after {
          animation: none;
          opacity: 0;
        }
      }

      .albumCoverFx.isSkeleton .albumCover {
        opacity: 0;
      }

      .skeletonRow {
        pointer-events: none;
      }

      .skeletonRow .trackIdx {
        width: 16px;
        height: 12px;
        border-radius: 999px;
        align-self: center;
        justify-self: center;
      }

      .skeletonRow .trackInfo {
        gap: 6px;
      }

      .skeletonLine {
        display: block;
        height: 12px;
        border-radius: 999px;
        width: 72%;
      }

      .skeletonLine.sub {
        width: 44%;
        opacity: 0.9;
      }

      .skeletonIcon {
        width: 18px;
        height: 18px;
        border-radius: 7px;
        display: block;
      }

      .albumCardSkeleton {
        pointer-events: none;
      }

      .albumCardSkeleton .albumCardCover {
        display: block;
      }

      .albumCardSkeleton .albumCardTitle,
      .albumCardSkeleton .albumCardSub {
        height: 14px;
        border-radius: 999px;
        color: transparent;
      }

      .albumCardSkeleton .albumCardTitle {
        width: 86%;
      }

      .albumCardSkeleton .albumCardSub {
        width: 56%;
      }

      .albumCover {
        width: 100%;
        height: 100%;
        border-radius: inherit;
        object-fit: cover;
        background: transparent;
        border: none;
        box-shadow: none;
        position: relative;
        z-index: 1;
        transform-origin: center;
        will-change: transform, opacity;
      }

      .albumCover.coverDocking {
        z-index: 26;
        pointer-events: none;
      }

      .coverSharedGhost {
        position: fixed;
        left: 0;
        top: 0;
        width: 1px;
        height: 1px;
        transform-origin: 0 0;
        border-radius: 12px;
        object-fit: cover;
        pointer-events: none;
        z-index: 9999;
        will-change: transform, opacity, border-radius;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
      }

      body.sharedCoverEntering #pageMusic .albumCoverFx {
        opacity: 0 !important;
      }

      .homeAlbumTitle {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.92);
        margin-top: 16px;
        display: flex;
        align-items: center;
      }

      .titleAvatars {
        display: inline-flex;
        vertical-align: middle;
        margin-left: 8px;
        align-items: center;
      }

      .titleAvatar {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-left: -6px;
        object-fit: cover;
      }
      
      .titleAvatar:first-child {
        margin-left: 0;
      }

      /* .homeAlbumTitleDate {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
} */

      #pageHome .homeModule:first-child .homeAlbumTitle {
        margin-top: 0;
      }

      .homeAlbumTitle .count {
        color: rgba(255, 255, 255, 0.78);
        font-weight: 700;
        margin-left: 6px;
      }

      .albumStrip {
        display: flex;
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        --fade-right: 0px;
        padding: 0 22px 4px 0;
        margin-right: -22px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-right)), transparent 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 calc(100% - var(--fade-right)), transparent 100%);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;
      }

      .albumStrip[data-fade-right="1"] {
        --fade-right: 28px;
      }

      .albumStrip::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .albumCard {
        appearance: none;
        border: none;
        background: transparent;
        padding: 0;
        text-align: left;
        color: inherit;
        cursor: pointer;
        width: 100px;
        flex: 0 0 100px;
        scroll-snap-align: start;
      }

      .albumCardCoverWrap {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.08);
      }

      .albumCardCover {
        width: 100%;
        aspect-ratio: 1 / 1;
        border-radius: 12px;
        object-fit: cover;
        display: block;
        background: rgba(255, 255, 255, 0.08);
        border: none;
        box-shadow: none;
      }

      .albumCardCoverWrap > .albumCardCover {
        height: 100%;
        aspect-ratio: auto;
        border-radius: inherit;
        background: transparent;
      }

      .albumCardTitle {
        margin-top: 8px;
        font-size: 12px;
        line-height: 14px;
        min-height: 14px;
        font-weight: 900;
        color: rgba(255, 255, 255, 0.86);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .albumCardSub {
    margin-top: 6px;
    font-size: 12px;
    line-height: 14px;
    min-height: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.46);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

      .homeActions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      .pill {
        appearance: none;
        min-width: 0;
        width: 100%;
        height: 46px;
        padding: 0 14px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-weight: 800;
        font-size: 15px;
        color: rgba(255, 255, 255, 0.86);
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(0, 0, 0, 0.12);
        box-shadow: none;
      }

      .pillShuffle,
      .pillPlayAll {
        gap: 8px;
      }

      .pillShuffle::before,
      .pillPlayAll::before {
        content: "";
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
        display: block;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px 18px;
      }

      .pillShuffle::before {
        background-image: url("src/images/RandomPlay.svg");
      }

      .pillPlayAll::before {
        background-image: url("src/images/AllPlay.svg");
      }

      .pill.light {
        background: rgba(255, 255, 255, 0.82);
        color: rgba(0, 0, 0, 0.88);
        border-color: rgba(255, 255, 255, 0.4);
      }

      .listCard {
        border: none;
        background: transparent;
      }

      .trackList {
        display: grid;
        gap: 10px;
      }

      .trackRow {
        text-align: left;
        width: 100%;
        appearance: none;
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.92);
        padding: 10px 0;
        display: grid;
        grid-template-columns: 22px 1fr 22px;
        gap: 14px;
        align-items: center;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }

      @media (hover: hover) and (pointer: fine) {
        .trackRow:hover {
          background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
          border-radius: 12px;
        }
      }

      .trackRow:active {
        background: rgba(0, 0, 0, 0.14);
        border-radius: 12px;
      }

      .trackRow.active {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0) 100%);
        border-radius: 12px;
      }

      .trackIdx {
        color: rgba(255, 255, 255, 0.32);
        font-weight: 700;
        font-size: 13px;
        text-align: center;
      }

      .trackIdx.rankTop1,
      .trackIdx.rankTop2,
      .trackIdx.rankTop3 {
        color: transparent;
        -webkit-background-clip: text;
        background-clip: text;
        font-weight: 900;
      }

      .trackIdx.rankTop1 {
        background-image: linear-gradient(180deg, #FFA057 0%, #FF38A5 100%);
      }

      .trackIdx.rankTop2 {
        background-image: linear-gradient(180deg, #ffe08a 0%, #ff8a00 100%);
      }

      .trackIdx.rankTop3 {
        background-image: linear-gradient(180deg, #ffc29a 0%, #d56a3a 100%);
      }

      .trackInfo {
        min-width: 0;
        display: grid;
        gap: 3px;
      }

      .trackName {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 800;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.92);
      }

      .trackMeta {
    color: rgba(255, 255, 255, 0.38);
    font-weight: 600;
    font-family: inherit;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

      .trackPlayIcon {
        width: 18px;
        height: 18px;
        display: block;
        opacity: 0.45;
        justify-self: end;
      }

      .trackRight {
        width: 22px;
        height: 22px;
        display: grid;
        place-items: center;
        justify-self: end;
      }

@keyframes iridescent {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.aiGeneratingCard {
  margin-top: 8px;
  margin-bottom: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.aiGeneratingCard::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(64, 201, 255, 0) 0deg,
    rgba(64, 201, 255, 0.4) 60deg,
    rgba(166, 77, 255, 0.4) 120deg,
    rgba(255, 64, 129, 0.4) 180deg,
    rgba(64, 255, 207, 0.284) 240deg,
    rgba(64, 201, 255, 0) 360deg
  );
  filter: blur(40px);
  animation: rotateFlow 10s linear infinite;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.aiGeneratingCard > * {
  position: relative;
  z-index: 1;
}

@keyframes rotateFlow {
  0% {
    transform: rotate(0deg) scale(1.2);
  }
  50% {
    transform: rotate(180deg) scale(1.5);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

.aiGeneratingIcon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.aiGeneratingText {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.aiGeneratingTitle {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.2px;
}

.aiGeneratingSub {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px;
}

.copyright-footer {
  text-align: center;
  padding: 32px 0 48px;
  margin-top: 16px;
  opacity: 0.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.copyright-link {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  text-decoration: none;
  transition: color 0.2s, opacity 0.2s;
  padding: 8px 12px;
  cursor: pointer;
}

.copyright-link:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* Copyright Modal */
.copyright-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.copyright-modal.show {
  display: flex;
  opacity: 1;
}

.copyright-modal-content {
  background-color: #121212;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  height: 80%;
  max-height: 90vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.copyright-modal.show .copyright-modal-content {
  transform: scale(1);
}

.copyright-modal-header {
  height: 40px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.copyright-modal-close {
  color: #aaa;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.copyright-modal-close:hover,
.copyright-modal-close:focus {
  color: #fff;
  text-decoration: none;
}

.copyright-frame-container {
  flex: 1;
  overflow: hidden;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.copyright-frame {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

      .trackEq {
        width: 16px;
        height: 16px;
        display: none;
        align-items: flex-end;
        justify-content: center;
        gap: 2px;
      }

      .trackEq > span {
        width: 2px;
        height: 100%;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.72);
        transform-origin: bottom;
        transform: scaleY(0.35);
        animation: trackEq 840ms ease-in-out infinite;
        animation-play-state: paused;
      }

      .trackEq > span:nth-child(2) {
        animation-delay: -0.3s;
      }

      .trackEq > span:nth-child(3) {
        animation-delay: -0.6s;
      }

      body.isPlaying .trackRow.active .trackEq > span {
        animation-play-state: running;
      }

      .trackRow.active .trackRight .trackPlayIcon {
        display: none;
      }

      .trackRow.active .trackRight .trackEq {
        display: flex;
      }

      @keyframes trackEq {
        0% {
          transform: scaleY(0.22);
        }
        50% {
          transform: scaleY(0.95);
        }
        100% {
          transform: scaleY(0.32);
        }
      }

      @keyframes tabEqPulse {
        0% {
          transform: scaleY(0.55);
        }
        22% {
          transform: scaleY(1.18);
        }
        46% {
          transform: scaleY(0.72);
        }
        70% {
          transform: scaleY(1.05);
        }
        100% {
          transform: scaleY(0.6);
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .trackEq > span {
          animation: none;
          transform: scaleY(0.55);
        }

        body.isPlaying:not(.playerOpen) .tabEq > span {
          animation: none;
          transform: scaleY(1);
        }
      }

      .hint {
        padding: 10px 0 14px;
        color: rgba(255, 255, 255, 0.38);
        font-size: 13px;
      }

      #playlistStatus {
        display: none;
      }

      .tabbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        background: transparent;
        border-top: none;
        box-sizing: border-box;
        height: 80px;
        z-index: 120;
        isolation: isolate;
      }

      .tabbar::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        background: rgba(0, 0, 0, 0.001);
        opacity: 1;
        -webkit-backdrop-filter: blur(32px);
        backdrop-filter: blur(32px);
        transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1);
        pointer-events: none;
        z-index: 0;
      }

      body.viz3d.playerOpen .tabbar::before {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: transparent;
      }

      .tabbarInner {
        width: min(520px, calc(100% - 24px));
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;
        padding: 0 12px 0;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
      }

      @supports (color: rgb(var(--cover-rgb) / 1)) {
        .tabbar {
          background: transparent;
        }
      }

      .tab {
        border: none;
        background: transparent;
        color: rgba(255, 255, 255, 0.36);
        font-size: 14px;
        font-weight: 700;
        padding: 0;
        cursor: pointer;
        text-align: center;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 16px;
        box-sizing: border-box;
      }

      .tab.active {
        color: rgba(255, 255, 255, 0.78);
      }

      body.playerOpen .tabbar .tab:not(.tabPlay),
      body.playerOpen .tabbar .tab.active:not(.tabPlay) {
        color: rgba(255, 255, 255, 0.36);
      }

      .tabPlay {
        width: 64px;
        height: 64px;
        border-radius: 999px;
        justify-self: center;
        align-self: center;
        padding: 0;
        display: grid;
        place-items: center;
        opacity: 0.95;
        position: relative;
        margin-top: -14px;
        margin-left: -12px;
        margin-right: -12px;
      }

      .tabPlay:disabled {
        opacity: 0.55;
        cursor: not-allowed;
      }

      .tabPlay .toggleIcon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .tabEq {
        width: 40px;
        height: 40px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        display: none;
        align-items: center;
        justify-content: center;
        gap: 4px;
        pointer-events: none;
      }

      .tabEq > span {
        width: 3px;
        display: block;
        border-radius: 999px;
        transform-origin: center;
        transform: scaleY(1);
      }

      .tabEq > span:nth-child(1) {
        height: 12px;
        background: linear-gradient(180deg, #2AFF69 0%, #78FFA0 100%);
        animation-delay: -0.15s;
      }

      .tabEq > span:nth-child(2) {
        height: 20px;
        background: linear-gradient(180deg, #1398FF 0%, #25EDFF 100%);
        animation-delay: -0.45s;
      }

      .tabEq > span:nth-child(3) {
        height: 12px;
        background: linear-gradient(180deg, #FE2C64 0%, #FFD65A 100%);
        animation-delay: -0.75s;
      }

      body.isPlaying:not(.playerOpen) .tabEq > span {
        animation: tabEqPulse 1500ms ease-in-out infinite;
      }

      body.isPlaying:not(.playerOpen) .tabEq > span:nth-child(1) {
        animation-duration: 1700ms;
        animation-delay: -0.35s;
      }

      body.isPlaying:not(.playerOpen) .tabEq > span:nth-child(2) {
        animation-duration: 1400ms;
        animation-delay: -0.8s;
      }

      body.isPlaying:not(.playerOpen) .tabEq > span:nth-child(3) {
        animation-duration: 1600ms;
        animation-delay: -1.15s;
      }

      body:not(.playerOpen) .tabPlay::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 40px;
        height: 40px;
        transform: translate(-50%, -50%);
        border-radius: 999px;
        border: 2px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box;
        pointer-events: none;
      }

      @supports (background: conic-gradient(from 0deg, #000, #fff)) {
        body:not(.playerOpen) .tabPlay::after {
          content: "";
          position: absolute;
          left: 50%;
          top: 50%;
          width: 40px;
          height: 40px;
          transform: translate(-50%, -50%);
          border-radius: 999px;
          background: conic-gradient(
            from 0deg,
            rgba(255, 255, 255, 0.30) 0 var(--tab-play-progress, 0%),
            rgba(255, 255, 255, 0) 0 100%
          );
          -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
          pointer-events: none;
        }
      }

      body:not(.playerOpen) .tabPlay .toggleIcon {
        display: none !important;
      }

      body:not(.playerOpen) .tabPlay .tabEq {
        display: flex;
      }

      .tabPlayIcon {
        width: 40px;
        height: 40px;
        display: block;
        opacity: 0.9;
      }

      .sheet {
        position: fixed;
        inset: 0;
        display: grid;
        place-items: end center;
        pointer-events: none;
        z-index: 100;
      }

      .sheet.open {
        pointer-events: auto;
      }

      .sheetBg {
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
          linear-gradient(180deg, rgba(var(--player-bg-top-c), 1) 0%, rgba(var(--player-bg-bottom-c), 1) 100%);
        opacity: 0;
        transition: opacity 240ms ease;
        will-change: opacity;
        z-index: 1;
      }

      .sheet.open .sheetBg {
        opacity: 1;
      }

      .sheetPanel {
        position: relative;
        width: 100%;
        max-width: 520px;
        height: 100vh;
        height: 100dvh;
        border: none;
        border-radius: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
          linear-gradient(180deg, rgba(var(--player-bg-top-c), 1) 0%, rgba(var(--player-bg-bottom-c), 1) 100%);
        box-shadow: none;
        transform: translateY(calc(102% + var(--player-drag-y, 0px)));
        transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        overflow: clip;
        z-index: 2;
      }

      @media (min-width: 720px) {
        .sheet {
          place-items: end center;
        }
        .sheetPanel {
          max-width: 520px;
        }
      }

      .sheetPanel input,
      .sheetPanel textarea,
      .sheetPanel select {
        -webkit-user-select: auto;
        user-select: auto;
      }

      @supports (color: rgb(var(--cover-rgb) / 1)) {
        .sheetBg {
          background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
            linear-gradient(180deg, rgb(var(--player-bg-top) / 1) 0%, rgb(var(--player-bg-bottom) / 1) 100%);
        }

        .sheetPanel {
          background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
            linear-gradient(180deg, rgb(var(--player-bg-top) / 1) 0%, rgb(var(--player-bg-bottom) / 1) 100%);
        }
      }

      @media (max-width: 560px) {
        .playerTop {
          padding-left: 18px;
          padding-right: 18px;
        }
        .playerBody {
          padding-left: 18px;
          padding-right: 18px;
        }
      }

      .sheet.open .sheetPanel {
        transform: translateY(var(--player-drag-y, 0px));
      }

      .meAvatarPreviewSheet {
        place-items: center;
        z-index: 230;
        opacity: 0;
        visibility: hidden;
        transition: opacity 320ms ease, visibility 0s linear 320ms;
      }

      .meAvatarPreviewSheet.open {
        opacity: 1;
        visibility: visible;
        transition: opacity 320ms ease;
      }

      .meAvatarPreviewBg {
        background: rgba(0, 0, 0, 0.9);
      }

      .meAvatarPreviewPanel {
        position: relative;
        z-index: 2;
        width: min(520px, 100%);
        height: 100%;
        padding: calc(env(safe-area-inset-top) + 18px) 18px calc(env(safe-area-inset-bottom) + 18px);
        display: grid;
        place-items: center;
        opacity: 0;
        transform: translate3d(0, 10px, 0) scale(0.98);
        transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 200ms ease;
      }

      .meAvatarPreviewSheet.open .meAvatarPreviewPanel {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }

      .meAvatarPreviewImg {
        width: min(88vw, 420px);
        max-width: 100%;
        max-height: min(62vh, 520px);
        border-radius: 22px;
        object-fit: contain;
        background: rgba(255, 255, 255, 0.06);
        border: none;
        box-shadow: 0 22px 70px rgba(0, 0, 0, 0.55);
      }

      .meAvatarPreviewContent {
        width: min(520px, 100%);
        display: grid;
        justify-items: center;
        gap: 48px;
      }

      .meAvatarPreviewContent .pill {
        width: 140px;
        min-width: 140px;
        justify-self: center;
      }

      .player {
        height: 100%;
        display: grid;
        grid-template-rows: auto 1fr;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
      }

      .playerTop {
        display: grid;
        grid-template-columns: 44px 1fr auto;
        align-items: center;
        padding: calc(env(safe-area-inset-top) + 18px) 18px 14px 18px;
      }

      .playerTopTitle {
        display: none;
      }

      .playerTopRight {
        justify-self: end;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .viz3dBtn {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.78);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        opacity: 1;
      }

      body.viz3d .viz3dBtn {
        color: rgba(255, 255, 255, 0.9);
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.18);
      }

      .playModeBtn {
        font-size: 12px;
        font-weight: 900;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.78);
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.08);
        justify-self: end;
        opacity: 1;
      }

      .playMode {
        position: fixed;
        inset: 0;
        display: none;
        z-index: 220;
      }

      .playMode.open {
        display: block;
      }

      .playModePanel {
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)),
          linear-gradient(180deg, rgba(var(--player-bg-top-c), 1) 0%, rgba(var(--player-bg-bottom-c), 1) 100%);
        display: grid;
        grid-template-rows: auto 1fr;
        touch-action: none;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        user-select: none;
        overflow: hidden;
      }

      .playModeFxCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        pointer-events: none;
        z-index: 0;
      }

      .playModeTop {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 18px) 18px 14px 18px;
  gap: 0;
  position: relative;
  z-index: 50;
  border-bottom: none !important;
  box-shadow: none !important;
}

/* Hide player dock and scrollbars when play mode is active */
body.playModeActive .playerDock {
  display: none !important;
}
body.playModeActive::-webkit-scrollbar {
  display: none;
}
body.playModeActive {
  overflow: hidden;
}

.playModeTop > button {
  pointer-events: auto;
}

.playModeToggle {
  appearance: none;
  border: none;
  background: transparent;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  margin: 0;
  margin-right: -10px; /* Shift slightly right as requested */
  pointer-events: auto;
}

.pmToggleIcon {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.88;
  pointer-events: none;
}

.playModeTitle {
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  letter-spacing: 0.2px;
  margin-left: -10px;
  /* Reset any monospaced font from .mono */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.playModeMain {
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        position: relative;
        z-index: 1;
      }

      .playModeLane {
        position: relative;
        min-height: 0;
        overflow: hidden;
      }

      .playModeTip {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: rgba(255, 255, 255, 0.9);
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.6;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.5s ease;
        z-index: 10;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
        white-space: pre-wrap;
      }
      
      .playModeTip.show {
        opacity: 1;
      }

      .playModeCanvas {
        width: 100%;
        height: 100%;
        display: block;
      }

      .playModeKeyboard {
    height: min(44vh, 320px);
    min-height: 220px;
    position: relative;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    contain: layout paint;
  }

  .pmKey {
    position: absolute;
    top: 0;
    border-radius: 0 0 10px 10px; /* Only bottom rounded */
    border: 1px solid rgba(0, 0, 0, 0.35);
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

      .pmKey.white {
        background: rgba(255, 255, 255, 0.94);
        height: 100%;
      }

      .pmKey.black {
        background: linear-gradient(180deg, rgb(6, 6, 6) 0%, rgb(20, 20, 20) 55%, rgb(46, 46, 46) 100%);
        height: 52%;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.55);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          inset 0 -10px 14px rgba(0, 0, 0, 0.55),
          0 10px 18px rgba(0, 0, 0, 0.22);
        z-index: 2;
      }

      .pmKey.black::before {
        content: "";
        position: absolute;
        left: 8%;
        right: 8%;
        top: 0;
        height: 46%;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.03) 55%, rgba(255, 255, 255, 0) 100%);
        pointer-events: none;
      }

      .playMode.lowPerf .pmKey.black {
        background: rgb(20, 20, 20);
        box-shadow: none;
      }

      .playMode.lowPerf .pmKey.black::before {
        display: none;
      }

      .pmKey.on.white {
        background: rgba(180, 255, 240, 0.96);
      }

      .pmKey.on.black {
        background: rgba(30, 210, 255, 0.9);
      }

      .pmKey.hit::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 10%;
        width: 64%;
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%) scale(0.88);
        border-radius: 999px;
        background: radial-gradient(circle at 50% 50%, rgba(40, 220, 255, 0.95), rgba(40, 220, 255, 0.2) 55%, rgba(40, 220, 255, 0) 72%);
        filter: blur(0.2px);
        opacity: 0;
        pointer-events: none;
        animation: pmHitPulse 240ms ease-out;
      }

      @keyframes pmHitPulse {
        0% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(0.75);
        }
        30% {
          opacity: 1;
        }
        100% {
          opacity: 0;
          transform: translate(-50%, -50%) scale(1.45);
        }
      }

      .playerMain {
        min-height: 0;
        position: relative;
      }

      .playerBody {
        padding: 0 18px calc(var(--player-dock-h, 320px) + var(--tabbar-h, 80px) + 10px);
        display: grid;
        place-items: center;
        min-height: 0;
        touch-action: none;
        overscroll-behavior: none;
      }

      @media (min-width: 720px) {
        .playerMain {
          display: grid;
        }
        .playerBody {
          height: 100%;
          box-sizing: border-box;
          padding-bottom: calc(var(--player-dock-h, 320px) + var(--tabbar-h, 80px) + 40px);
          place-items: end center;
        }
      }

      .coverWrap {
        display: grid;
        place-items: center;
        padding: 10px 0 0;
        min-height: 0;
      }

      .cover {
        width: min(420px, 78vw, calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 140px));
        aspect-ratio: 1 / 1;
        max-height: calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 140px);
        border-radius: 12px;
        object-fit: cover;
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.36);
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(0, 0, 0, 0.22);
      }

      .rollWrap {
        width: min(520px, 100%);
        height: min(480px, calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 120px));
        border-radius: 22px;
        border: none;
        background: rgba(0, 0, 0, 0.22);
        box-shadow: none;
        overflow: hidden;
        position: relative;
        touch-action: none;
        user-select: none;
      }

      @media (min-width: 720px) {
        .rollWrap {
          height: min(720px, 100%);
        }
      }

      body.viz3d .rollWrap {
        /* background: radial-gradient(120% 120% at 50% 10%, rgba(40, 64, 96, 0.34) 0%, rgba(0, 0, 0, 0.18) 44%, rgba(0, 0, 0, 0.48) 100%); */
        background: transparent;
      }

      .rollCanvas {
        width: 100%;
        height: 100%;
        display: block;
        touch-action: none;
        position: relative;
        z-index: 1;
        opacity: 1;
        pointer-events: auto;
        transition: opacity 140ms ease;
      }

      .roll3dCanvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity 140ms ease;
      }

      body.viz3d .roll3dCanvas {
        opacity: 1;
        pointer-events: none;
        /* Ensure it breaks out of flow */
        position: fixed; 
        z-index: 1;
        background-image: var(--viz3d-bg-url);
        background-size: cover;
        background-position: center;
      }
      
      .viz3dBg {
        position: fixed;
        inset: 0;
        z-index: 1; /* Behind sheetBg which is z-index 1, but we need to see it? Wait. sheetBg is z-index 1. sheetPanel is z-index 2. 
                       If sheetPanel is 520px wide, the sides are sheetBg. 
                       If we want sides to be blurred bg, viz3dBg should be visible on sides.
                       We should make sheetBg transparent when viz3d is on? 
                       Or put viz3dBg above sheetBg but below sheetPanel? 
                       sheetBg is full screen. If we put viz3dBg above sheetBg, it covers everything. 
                       Let's make sheetBg transparent in viz3d mode. */
        background-image: var(--viz3d-bg-url);
        background-size: cover;
        background-position: center;
        filter: blur(50px) brightness(0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease;
      }
      
      body.viz3d .viz3dBg {
        opacity: 1;
        /* Force static starry background */
        background-image: url('src/Background/ac_bg1.jpg') !important;
        /* Increase z-index to be above normal content if needed, but below sheet */
        z-index: 90;
      }
      
      /* HIDE viz3dBg when player is NOT open, even in 3D mode */
      body.viz3d:not(.playerOpen) .viz3dBg {
        opacity: 0;
        display: none;
      }

      /* 3D Mode Blocking Layer (restored for safety under the stars if needed, but let's just use viz3dBg) */
      /* Actually user said "based on this version", implying previous revert. */
      
      body.viz3d .sheetBg {
        /* User wants starry bg ON TOP of variable bg. */
        /* So sheetBg (variable) stays. We need viz3dBg to be on top. */
        /* sheetBg z-index is 1. viz3dBg z-index is 90 (from above). */
        /* But viz3dBg is child of body, sheetBg is child of playerSheet (z-index 100). */
        /* So viz3dBg is BEHIND sheetBg. */
        
        /* To make stars appear ON TOP of sheetBg, we must use the pseudo-element trick again, OR accept that we can't easily do it with DOM structure. */
        /* User said "I reverted code". The current code I see in Read output has viz3dBg with opacity 1. */
        
        /* Let's try to inject the stars into sheetBg using ::after again, but ONLY when player is open. */
      }
      
      /* New attempt: Use ::after on .sheetBg for the starry overlay */
      body.viz3d.playerOpen .sheetBg::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url('src/Background/ac_bg1.jpg');
        background-size: cover;
        background-position: center;
        opacity: 0.5; /* Semi-transparent */
        filter: blur(20px);
        z-index: 2; /* Above the gradient itself */
        pointer-events: none;
      }
      
      /* Hide the original viz3dBg to avoid confusion/duplication */
      body.viz3d .viz3dBg {
        display: none !important;
      }

      /* Ensure header is above 3D canvas */
      .playerTop {
        position: relative;
        z-index: 10;
      }
      
      /* Ensure main content area respects z-index if needed, though canvas is fixed */
      .playerMain {
        position: relative;
        z-index: 5;
      }

      body.viz3d .rollCanvas {
        opacity: 0;
        pointer-events: none;
      }

      .rollLikeLayer {
        position: fixed;
        left: 50%;
        top: 50%;
        width: min(240px, 52vw);
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%) scale(0.92);
        opacity: 0;
        pointer-events: none;
        filter: drop-shadow(0 18px 52px rgba(0, 0, 0, 0.36));
        transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 140;
      }

      .rollLikeLayer.on {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .playerGuideLayer {
        position: fixed;
        left: 50%;
        top: 50%;
        width: min(240px, 52vw);
        aspect-ratio: 1 / 1;
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0;
        pointer-events: none;
        filter: drop-shadow(0 18px 52px rgba(0, 0, 0, 0.36));
        transition: opacity 160ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
        z-index: 150;
      }

      .playerGuideLayer.on {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      @media (max-height: 740px) {
        .coverWrap {
          padding-top: 6px;
        }
        .cover {
          width: min(380px, 76vw, calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 130px));
          max-height: calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 130px);
        }
        .rollWrap {
          height: min(420px, calc(100dvh - var(--player-dock-h, 320px) - var(--tabbar-h, 80px) - 110px));
        }
      }

      .playerDock {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: var(--tabbar-h, 80px);
        width: min(520px, calc(100% - 36px));
        z-index: 30;
        min-height: 0;
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 14px;
        padding: 8px 18px 14px;
        max-height: calc(100dvh - (env(safe-area-inset-top) + 120px));
        background: none;
        isolation: isolate;
      }

      .playerDock::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: calc(100dvh - (var(--player-dock-h, 320px) + var(--tabbar-h, 80px)));
        bottom: 0;
        background: linear-gradient(180deg, rgba(16, 23, 24, 0) 0%, rgba(16, 23, 24, 0.35) 18%, rgba(16, 23, 24, 0.84) 100%);
        pointer-events: none;
        z-index: -1;
      }

      .playerDockScroll {
        min-height: 0;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        display: grid;
        gap: 16px;
        touch-action: none;
      }

      .playerDockScroll::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .meta2 {
        display: grid;
        gap: 10px;
        padding: 2px 0 0;
      }

      .trackTitleBig {
        font-size: 18px;
        font-weight: 800;
        letter-spacing: 0.1px;
        color: rgba(255, 255, 255, 0.92);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
      }

      .trackTitleRow {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
      }

      .trackTitleRow .trackTitleBig {
        flex: 1;
        min-width: 0;
      }

      #btnFavorite {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        position: relative;
        margin-right: 0;
      }

      #btnFavorite .favIcon {
        --favShiftX: 0px;
        --favShiftY: 0px;
        display: none;
      }

      #btnFavorite .favIconImg {
        --favShiftX: 0px;
        --favShiftY: 0px;
        width: 22px;
        height: 22px;
        display: block;
        transform: translate(var(--favShiftX), var(--favShiftY));
        transition: transform 230ms cubic-bezier(0.2, 0.9, 0.15, 1), filter 230ms cubic-bezier(0.2, 0.9, 0.15, 1);
        opacity: 1;
        will-change: transform;
      }

      #btnShare {
        width: 40px;
        height: 40px;
        border-radius: 12px;
      }

      #btnShare .shareIconImg {
        width: 22px;
        height: 22px;
        display: block;
        opacity: 0.88;
      }

      .trackSub {
    color: rgba(255, 255, 255, 0.46);
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

      .metaActionRow {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-top: 2px;
      }

      .metaTags {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
      }

      .metaTagBtn {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.08);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        color: #ffffff;
        border-radius: 12px;
        padding: 0 6px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        min-width: 54px;
        cursor: pointer;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 400;
        line-height: 1;
      }

      .metaTagBtn.active {
        background: rgba(255, 255, 255, 0.18);
        border-color: rgba(255, 255, 255, 0.22);
      }

      .metaTagTitle {
        font-weight: 400;
        font-size: 12px;
        line-height: 1;
      }

      .metaTagVal {
        font-size: 12px;
        color: #ffffff;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 92px;
      }

      .metaTagSep {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.46);
        font-weight: 400;
      }

      #btnTagTone .metaTagVal {
        display: none;
      }

      .metaIcons {
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .progress2 {
        display: grid;
        gap: 8px;
      }

      .waveSeekWrap {
        position: relative;
      }

      .seekHud {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 10px);
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 0.2px;
        color: rgba(255, 255, 255, 0.92);
        opacity: 0;
        transition: opacity 150ms ease, bottom 150ms ease, font-size 150ms ease;
        pointer-events: none;
        z-index: 2;
      }

      .seekHudSep {
        color: rgba(255, 255, 255, 0.56);
        font-weight: 800;
        padding: 0 2px;
      }

      .waveSeek {
        position: relative;
        width: 100%;
        height: 36px;
        border-radius: 10px;
        border: none;
        background: rgba(0, 0, 0, 0.08);
        overflow: hidden;
      }

      .waveCanvas {
        width: 100%;
        height: 100%;
        display: block;
      }

      .waveSeek input[type="range"] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        touch-action: none;
      }

      .waveSeek input[type="range"]::-webkit-slider-runnable-track {
        height: 100%;
        background: transparent;
      }

      .waveSeek input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 26px;
        height: 36px;
        background: transparent;
        border: none;
        box-shadow: none;
      }

      .waveSeek input[type="range"]::-moz-range-track {
        height: 100%;
        background: transparent;
        border: none;
      }

      .waveSeek input[type="range"]::-moz-range-thumb {
        width: 26px;
        height: 36px;
        background: transparent;
        border: none;
        box-shadow: none;
      }

      #playerSheet.seeking .seekHud {
        opacity: 1;
        bottom: calc(100% + 30px);
        font-size: 20px;
      }

      .meta2,
      .mix2 {
        transition: opacity 150ms ease;
      }

      #playerSheet.seeking .meta2 {
        opacity: 0;
      }

      .mix2 {
        margin-top: 4px;
        display: grid;
        gap: 18px;
        padding: 0;
      }

      .mixRow2 {
        display: grid;
        grid-template-columns: 48px 1fr 60px;
        gap: 12px;
        align-items: center;
      }

      .mixRow2.reverbPresetRow {
        grid-template-columns: 1fr;
      }

      .reverbTags {
        flex-wrap: wrap;
      }

      .tonePanel .reverbTags .metaTagBtn {
        border: none;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 999px;
        padding: 0 14px;
        height: 34px;
        min-width: 0;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.86);
      }

      .tonePanel .reverbTags .metaTagBtn.active {
        background: rgba(255, 255, 255, 0.18);
        border-color: transparent;
      }

      .tonePanel .reverbTags .metaTagTitle {
        font-weight: 800;
      }

      .mixLabel2 {
        color: rgba(255, 255, 255, 0.36);
        font-weight: 700;
        font-size: 13px;
      }

      .mixRow2 input[type="range"],
      .tpHead input[type="range"] {
        --track-h: 2px;
        --thumb-s: 10px;
        height: 56px;
        margin: -18px 0;
        width: 100%;
        display: block;
        appearance: none;
        -webkit-appearance: none;
        touch-action: none;
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
        background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 1)) 0 50% /
            var(--fill-pct, 0%) var(--track-h) no-repeat,
          linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)) 0 50% / 100% var(--track-h)
            no-repeat;
        border-radius: 999px;
      }

      .mixRow2 input[type="range"]::-webkit-slider-runnable-track,
      .tpHead input[type="range"]::-webkit-slider-runnable-track {
        height: var(--track-h);
        background: transparent;
        border-radius: 999px;
      }

      .mixRow2 input[type="range"]::-webkit-slider-thumb,
      .tpHead input[type="range"]::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: var(--thumb-s);
        height: var(--thumb-s);
        border-radius: 50%;
        transform: scale(3);
        background: radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 34%, rgba(255, 255, 255, 0) 34%);
        border: none;
        box-shadow: none;
        margin-top: calc((var(--track-h) - var(--thumb-s)) / 2);
      }

      .mixRow2 input[type="range"]::-moz-range-track,
      .tpHead input[type="range"]::-moz-range-track {
        height: var(--track-h);
        background: rgba(255, 255, 255, 0.3);
        border-radius: 999px;
        border: none;
      }

      .mixRow2 input[type="range"]::-moz-range-progress,
      .tpHead input[type="range"]::-moz-range-progress {
        height: var(--track-h);
        background: rgba(255, 255, 255, 1);
        border-radius: 999px;
      }

      .mixRow2 input[type="range"]::-moz-range-thumb,
      .tpHead input[type="range"]::-moz-range-thumb {
        width: var(--thumb-s);
        height: var(--thumb-s);
        border-radius: 50%;
        transform: scale(3);
        background: radial-gradient(circle closest-side, rgba(255, 255, 255, 1) 34%, rgba(255, 255, 255, 0) 34%);
        border: none;
        box-shadow: none;
      }

      .select2 {
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background: rgba(0, 0, 0, 0.22);
        border-radius: 10px;
        padding: 12px 14px;
        font-weight: 800;
        color: rgba(255, 255, 255, 0.9);
        width: 100%;
      }

      .toneOpenBtn {
        text-align: left;
        cursor: pointer;
      }

      .toneSheet {
        position: fixed;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: min(520px, 100%);
        height: min(62dvh, 560px);
        max-height: calc(100dvh - env(safe-area-inset-top) - 18px);
        pointer-events: none;
        z-index: 140;
      }

      .toneSheet.open {
        pointer-events: auto;
      }

      .tonePanel {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 22px 22px 0 0;
        background: rgba(16, 20, 22, 0.75);
        -webkit-backdrop-filter: blur(22px) saturate(1.8);
        backdrop-filter: blur(22px) saturate(1.8);
        border: none;
        transform: translateY(calc(var(--tone-panel-base, 105%) + var(--tone-panel-drag, 0px)));
        transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
        will-change: transform;
        overflow: hidden;
        display: grid;
        grid-template-rows: auto 1fr;
      }

      .toneHandle {
        width: 46px;
        height: 5px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.22);
        justify-self: center;
        margin-top: 10px;
      }

      .toneHandle {
        margin-bottom: 8px;
      }

      .toneBody {
        min-height: 0;
        overflow: auto;
        overflow-x: hidden;
        padding: 12px 18px calc(env(safe-area-inset-bottom) + 18px);
        display: grid;
        gap: 18px;
        scrollbar-width: none;
        -ms-overflow-style: none;
        overscroll-behavior: contain;
      }

      .toneBody::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      .toneSectionTitle {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 10px;
  }

      .toneSectionHint {
        margin-top: -6px;
        margin-bottom: 10px;
        color: rgba(255, 255, 255, 0.38);
        font-size: 12px;
        font-weight: 400;
      }

      .toneHintText {
        color: rgba(255, 255, 255, 0.38);
        font-size: 12px;
        font-weight: 400;
        line-height: 1.2;
      }

      .toneSheet .toneSection[data-mode] {
        display: none;
      }

      .toneSheet[data-mode="tempo"] .toneSection[data-mode="tempo"],
      .toneSheet[data-mode="pitch"] .toneSection[data-mode="pitch"],
      .toneSheet[data-mode="tempo-pitch"] .toneSection[data-mode="tempo"],
      .toneSheet[data-mode="tempo-pitch"] .toneSection[data-mode="pitch"],
      .toneSheet[data-mode="tone"] .toneSection[data-mode="tone"] {
        display: block;
      }

      .toneSheet[data-mode="tempo-pitch"] {
        height: min(40dvh, calc(100dvh - env(safe-area-inset-top) - 18px));
      }

      .toneSheet[data-mode="tempo-pitch"] .toneBody {
        padding: 10px 18px calc(env(safe-area-inset-bottom) + 14px);
        gap: 8px;
        align-content: start;
      }

      .toneSheet[data-mode="tone"] .toneBody {
        padding-bottom: calc(env(safe-area-inset-bottom) + 48px);
      }

      .toneSheet[data-mode="tempo-pitch"] .toneSectionTitle {
        display: none;
      }

      .tpGroup {
        display: grid;
        gap: 6px;
        padding: 2px 0 4px;
      }

      .tpHead {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
      }

      .tpName {
        font-weight: 900;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.78);
      }

      .tpValue {
        font-weight: 900;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.92);
      }

      .tpPresets {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 0;
      }

      .tpPresetBtn {
        appearance: none;
        border: none;
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.46);
        font-size: 12px;
        font-weight: 400;
        padding: 6px 0;
        border-radius: 8px;
        min-width: 0;
        flex: 1 1 0;
        text-align: center;
        cursor: pointer;
      }

      .tpPresetBtn.active {
        color: rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.20);
      }

      .mixRow2.tpSliderRow {
        grid-template-columns: 1fr;
        gap: 0;
      }

      .mixRow2.tpSliderRow input[type="range"] {
        --track-h: 2px;
        --thumb-s: 12px;
        height: 36px;
        margin: 0;
      }

      .toneResetBtn {
        display: none;
        width: 100%;
        height: 44px;
        border-radius: 14px;
        border: none;
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.92);
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.1px;
        cursor: pointer;
      }

      .toneSheet[data-mode="tempo-pitch"] .toneResetBtn {
        display: block;
      }

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

      .toneBlock {
        border: none;
        background: rgba(255, 255, 255, 0.06);
        border-radius: 14px;
        padding: 12px 12px;
        min-height: 56px;
        display: grid;
        align-content: center;
        gap: 4px;
        text-align: left;
        cursor: pointer;
        color: rgba(255, 255, 255, 0.9);
      }

      .toneBlockTitle {
        font-weight: 600;
        font-size: 14px;
        line-height: 1.15;
      }

/* Share Sheet Styles */
.shareSheet {
  height: var(--share-sheet-h, min(40dvh, calc(100dvh - env(safe-area-inset-top) - 18px)));
}

.shareBody {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}

.shareLinkBox {
  width: calc(100% - 36px);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 24px;
  text-align: center;
}

.shareLinkText {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  word-break: break-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: monospace;
  user-select: text;
  -webkit-user-select: text;
}

.shareActions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
}

.shareBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.shareBtnIcon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: grid;
  place-items: center;
  transition: background 0.2s;
}

.shareBtn:active .shareBtnIcon {
  background: rgba(255, 255, 255, 0.2);
}

.shareBtnLabel {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.wechatIcon::after {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 10C17 10 19 10 19 10C21.2091 10 23 11.7909 23 14C23 16.2091 21.2091 18 19 18C19 18 17 18 17 18'/%3E%3Cpath d='M7 10C4.79086 10 3 11.7909 3 14C3 16.2091 4.79086 18 7 18'/%3E%3Cpath d='M14 14H10'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.copyIcon::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.systemIcon::after {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='18' cy='5' r='3'/%3E%3Ccircle cx='6' cy='12' r='3'/%3E%3Ccircle cx='18' cy='19' r='3'/%3E%3Cline x1='8.59' y1='13.51' x2='15.42' y2='17.49'/%3E%3Cline x1='15.41' y1='6.51' x2='8.59' y2='10.49'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

      .toneBlockSub {
        font-weight: 400;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.46);
        line-height: 1.2;
      }

      .toneBlock.active {
        position: relative;
        background: rgba(255, 255, 255, 0.16);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.38);
        transform: translateY(-1px);
      }

      .toneBlock.active::after {
        content: "";
        position: absolute;
        right: 10px;
        top: 50%;
        width: 18px;
        height: 18px;
        background: url("src/images/Check.svg") center / contain no-repeat;
        transform: translateY(-50%);
      }

      .playerControls {
        padding-top: 2px;
      }

      @media (max-width: 380px) {
        .playerBody {
          padding: 0 18px calc(var(--player-dock-h, 320px) + var(--tabbar-h, 80px) + 8px);
        }
        .playerDock {
          padding: 6px 18px 12px;
        }
        .transport2 {
          gap: 44px;
        }
        .btn2 {
          width: 52px;
          height: 52px;
        }
        #btnToggle {
          width: 60px;
          height: 60px;
        }
        .btn2Icon {
          width: 30px;
          height: 30px;
        }
        .btn2Icon.big {
          width: 48px;
          height: 48px;
        }
      }

      .transport2 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 56px;
      }

      .btn2 {
        appearance: none;
        border: none;
        background: transparent;
        width: 56px;
        height: 56px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        cursor: pointer;
        opacity: 0.9;
      }

      .btn2:disabled {
        opacity: 0.5;
        cursor: not-allowed;
      }

      #btnToggle {
        width: 66px;
        height: 66px;
      }

      .btn2Icon {
        width: 32px;
        height: 32px;
        display: block;
        opacity: 0.65;
      }

      .btn2Icon.big {
        width: 48px;
        height: 48px;
        opacity: 0.9;
      }

      #btnToggle {
        position: relative;
      }

      #btnToggle .toggleIcon {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      /* Adjust back buttons position to align with content */
      #btnNavBack,
      #btnClosePlayer,
      #btnExitPlayMode {
        margin-left: -10px;
      }

      #btnSearch {
        margin-right: -12px;
      }

      /* Play Mode Result Modal */
      .playModeResult {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 100;
        pointer-events: none;
      }
      
      .pmResultOverlay {
        display: none;
      }
      
      .pmResultPanel {
  position: absolute;
  bottom: 55%;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
  
  /* User requested: more transparent, no border, no shadow */
  background: rgba(30, 30, 30, 0.6);
  border: none;
  border-radius: 16px;
  padding: 16px 20px;
  width: auto;
  min-width: 260px;
  max-width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* box-shadow removed */
  animation: pmResultPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.pmResultPanel.hiding {
  transform: translateX(-50%) scale(0.9);
  opacity: 0;
}

.pmResultFx {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.pmResultStarFx {
  position: absolute;
  width: 24px;
  height: 24px;
  opacity: 0;
  transform: scale(0);
  animation: pmStarFxAnim ease-in forwards;
}

@keyframes pmStarFxAnim {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0deg);
  }
  15% {
    opacity: 1;
    transform: translate(calc(var(--drift) * 0.1), 10vh) scale(1) rotate(45deg);
  }
  75% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: translate(var(--drift), 110vh) scale(0.6) rotate(180deg);
  }
}

/* Hide specific top elements when result is open */
.playModeTop.result-open .playModeTitle,
.playModeTop.result-open .playModeToggle {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

@keyframes pmResultPop {
        0% { transform: translateX(-50%) scale(0.9); opacity: 0; }
        100% { transform: translateX(-50%) scale(1); opacity: 1; }
      }
      
      .pmResultHeader {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 4px;
        width: 100%;
      }
      
      .pmResultTitle {
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
      }
      
      .pmResultSong {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  /* Allow wrapping and expansion */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  max-width: 260px;
  text-align: center;
}
      
      .pmResultContent {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 100%;
      }
      
      .pmResultScoreSection {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;
      }
      
      .pmResultLabel {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.5);
      }
      
      .pmResultValue {
        font-size: 32px;
        font-weight: 700;
        color: #fff;
        line-height: 1.1;
        letter-spacing: -0.5px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      }
      
      .pmResultStars {
        display: flex;
        gap: 6px;
        height: 24px;
        align-items: center;
        justify-content: center;
      }
      
      .pmResultStar {
        width: 20px;
        height: 20px;
        color: rgba(255, 255, 255, 0.2);
        transition: color 0.3s;
      }
      
      .pmResultStar svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      @keyframes pmStarPop {
        0% { transform: scale(0) rotate(-45deg); opacity: 0; }
        60% { transform: scale(1.4) rotate(10deg); opacity: 1; }
        80% { transform: scale(0.9) rotate(-5deg); opacity: 1; }
        100% { transform: scale(1) rotate(0); opacity: 1; }
      }
      
      .pmResultStar.active {
        color: #FFD700;
        /* Increased duration to 0.5s for more perceived "bounce" */
        animation: pmStarPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
      }
      
      .pmResultActions {
        display: flex;
        gap: 12px;
        width: 100%;
        margin-top: 4px;
      }
      
      .pmResultBtn {
        flex: 1;
        height: 36px;
        border-radius: 18px;
        border: none;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 0.2s;
      }
      
      .pmResultBtn:active {
        opacity: 0.8;
      }
      
      .pmResultBtn.secondary {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
      }
      
      .pmResultBtn.primary {
        background: #fff;
        color: #000;
      }

      /* Instrument Tooltip */
      .instrument-tooltip {
        position: absolute;
        background: rgba(30, 30, 30, 0.7);
        backdrop-filter: blur(16px) saturate(180%);
        -webkit-backdrop-filter: blur(16px) saturate(180%);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 12px;
        padding: 14px;
        color: #fff;
        font-size: 13px;
        line-height: 1.5;
        z-index: 1000;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        max-width: 280px;
        pointer-events: none;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease;
      }

      .instrument-tooltip.visible {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
      }

      .instrument-tooltip-title {
        font-weight: 600;
        margin-bottom: 6px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 12px;
        opacity: 0.8;
      }

      .instrument-tooltip-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .instrument-tag {
        background: rgba(255, 255, 255, 0.1);
        padding: 2px 6px;
        border-radius: 4px;
        font-size: 12px;
        white-space: nowrap;
      }

      .clickable-instrument {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
        text-decoration-color: rgba(255, 255, 255, 0.4);
        transition: color 0.2s, text-decoration-color 0.2s;
      }

      .clickable-instrument:hover {
        color: #fff;
        text-decoration-color: rgba(255, 255, 255, 0.8);
      }

#installAppSection {
  display: none;
}

.installAppBtn {
  gap: 10px;
  width: 100%;
  height: auto; /* Allow auto height based on padding */
  min-height: 64px; /* Ensure minimum height */
  font-size: 15px; /* Match aiGeneratingTitle size */
  
  /* Override .pill.light styles */
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-radius: 12px;
  
  /* Alignment */
  justify-content: flex-start;
  padding: 8px 12px; /* Match aiGeneratingCard padding */
  
  /* Text Weight matching aiGeneratingTitle */
  font-weight: 600;
  letter-spacing: 0.2px;
}

.installAppIcon {
  width: 32px;
  height: 32px;
  margin: 0 8px;
  border-radius: 8px;
  object-fit: cover;
  pointer-events: none;
}

.installAppTextCol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.installAppTitle {
  font-size: 15px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.2px;
}

.installAppSubtitle {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.1px;
}