: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-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;
      }

      html,
      body {
        height: 100%;
        background: #171717;
      }

      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;
        filter: blur(126px) saturate(1.28);
        transform: scale(1.22);
        opacity: 0.5;
        transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
        pointer-events: none;
        z-index: 0;
      }

      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;
      }

      #homeScreen:not([data-tab="library"]) .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, #3c3d46 0%, #181a1e 100%);
      }

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

      @supports (color: rgb(var(--cover-rgb) / 1)) {
        body[data-tab="library"] {
          background: radial-gradient(900px 700px at 20% 0%, rgb(var(--cover-rgb) / 0.22), transparent 58%),
            radial-gradient(900px 700px at 90% 30%, rgb(var(--cover-rgb2) / 0.2), transparent 62%),
            linear-gradient(180deg, rgb(var(--player-bg-top) / 1) 0%, rgb(var(--player-bg-bottom) / 1) 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);
      }

      .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: translate3d(-140%, 0, 0);
        }
        100% {
          transform: translate3d(140%, 0, 0);
        }
      }

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

      .skeletonShimmer::after {
        content: "";
        position: absolute;
        inset: 0;
        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) {
        .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;
      }

      #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;
        -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);
      }

      .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("images/RandomPlay.svg");
      }

      .pillPlayAll::before {
        background-image: url("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;
      }

      .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;
      }

      .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: -8px;
        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;
      }

      .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.3), rgba(0, 0, 0, 0.3)),
          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-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 auto;
        align-items: center;
        padding: calc(env(safe-area-inset-top) + 18px) 18px 10px;
        gap: 10px;
        position: relative;
        z-index: 1;
      }

      .playModeTitle {
        font-weight: 900;
        color: rgba(255, 255, 255, 0.72);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .playModeScore {
        font-weight: 900;
        color: rgba(255, 255, 255, 0.78);
        padding: 0 10px;
      }

      .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;
      }

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

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

      .pmKey {
        position: absolute;
        top: 0;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.35);
        box-sizing: border-box;
      }

      .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%);
      }

      .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: auto;
      }

      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);
        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;
      }

      .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;
        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%;
        background: rgba(255, 255, 255, 1);
        border: 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%;
        background: rgba(255, 255, 255, 1);
        border: 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.45);
        -webkit-backdrop-filter: blur(22px) saturate(1.15);
        backdrop-filter: blur(22px) saturate(1.15);
        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;
      }

      .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("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;
      }