/* ============================================================
   次元留声机 · 液态玻璃音乐播放器
   MusicPlayer — Liquid Glass Edition
   形态：mini 圆珠 / dock 胶囊 / panel 面板 / immersive 沉浸
   ============================================================ */

:where(#acg-music-player,
#acg-music-player *,
#acg-music-player *::before,
#acg-music-player *::after) {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

#acg-music-player {
    /* —— 氛围色（封面取色后由 JS 覆盖，RGB 三元组）—— */
    --mp-a1: 138 116 249;
    --mp-a2: 84 190 255;
    --mp-lum: 0.5;

    /* —— 玻璃 · 深色基调 —— */
    --mp-ink: rgba(255 255 255 / .96);
    --mp-ink-2: rgba(255 255 255 / .62);
    --mp-ink-3: rgba(255 255 255 / .38);
    --mp-glass-a: rgba(24 26 38 / .58);
    --mp-glass-b: rgba(30 32 48 / .42);
    --mp-glass-c: rgba(16 17 26 / .66);
    --mp-edge-hi: rgba(255 255 255 / .34);
    --mp-edge-lo: rgba(255 255 255 / .06);
    --mp-fill: rgba(255 255 255 / .08);
    --mp-fill-hover: rgba(255 255 255 / .14);
    --mp-hairline: rgba(255 255 255 / .09);
    --mp-shadow:
        0 32px 68px -20px rgba(6 8 18 / .55),
        0 12px 28px -12px rgba(6 8 18 / .38),
        0 2px 8px -2px rgba(6 8 18 / .28);
    --mp-sheen: rgba(255 255 255 / .13);

    --mp-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC",
        "HarmonyOS Sans SC", "MiSans", "Segoe UI", "Microsoft YaHei", sans-serif;
    --mp-ease-spring: cubic-bezier(.32, 1.4, .38, 1);
    --mp-ease-out: cubic-bezier(.22, .61, .21, 1);

    position: fixed;
    z-index: 2002;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    font-family: var(--mp-font);
    font-size: 14px;
    line-height: 1.45;
    color: var(--mp-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-variant-numeric: tabular-nums;
}

#acg-music-player[data-pos="left"]  { left: 18px; }
#acg-music-player[data-pos="right"] { right: 18px; }

/* —— 浅色玻璃 —— */
#acg-music-player[data-tint="light"] {
    --mp-ink: rgba(20 24 40 / .94);
    --mp-ink-2: rgba(24 30 52 / .60);
    --mp-ink-3: rgba(28 34 56 / .36);
    --mp-glass-a: rgba(255 255 255 / .62);
    --mp-glass-b: rgba(255 255 255 / .38);
    --mp-glass-c: rgba(248 250 255 / .70);
    --mp-edge-hi: rgba(255 255 255 / .85);
    --mp-edge-lo: rgba(255 255 255 / .25);
    --mp-fill: rgba(18 22 42 / .06);
    --mp-fill-hover: rgba(18 22 42 / .11);
    --mp-hairline: rgba(18 22 42 / .09);
    --mp-shadow:
        0 32px 68px -22px rgba(28 32 60 / .35),
        0 12px 28px -14px rgba(28 32 60 / .22),
        0 2px 8px -2px rgba(28 32 60 / .14);
    --mp-sheen: rgba(255 255 255 / .55);
}

:where(#acg-music-player) svg {
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

:where(#acg-music-player) img {
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

:where(#acg-music-player) button {
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
    line-height: 1;
}

/* ============================================================
   液态玻璃基材
   ============================================================ */
#acg-music-player .mp-glass {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(152deg, var(--mp-glass-a), var(--mp-glass-b) 42%, var(--mp-glass-c));
    -webkit-backdrop-filter: blur(36px) saturate(1.9);
    backdrop-filter: blur(36px) saturate(1.9);
    box-shadow:
        var(--mp-shadow),
        inset 0 1px 0 var(--mp-edge-hi),
        inset 0 -1px 0 var(--mp-edge-lo);
}

/* 渐变描边环 —— 玻璃切面 */
#acg-music-player .mp-glass::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(158deg,
        rgba(255 255 255 / .62),
        rgba(255 255 255 / .10) 28%,
        rgba(255 255 255 / .02) 55%,
        rgb(var(--mp-a1) / .30) 82%,
        rgb(var(--mp-a2) / .38));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    opacity: .9;
}

/* 指针跟随流光 */
#acg-music-player .mp-glass::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(190px circle at var(--mp-mx, 50%) var(--mp-my, -30%),
        var(--mp-sheen), transparent 65%);
    opacity: 0;
    transition: opacity .5s var(--mp-ease-out);
    pointer-events: none;
}

#acg-music-player .mp-glass:hover::after{ opacity: 1; }

/* ============================================================
   mini · 悬浮圆珠
   ============================================================ */
#acg-music-player .mp-mini {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    transform-origin: bottom center;
    transition: transform .45s var(--mp-ease-spring), opacity .3s var(--mp-ease-out);
}

#acg-music-player.is-drag-move .mp-mini {
    cursor: grabbing;
    transition: none;
    animation: none;
}

#acg-music-player .mp-mini:hover{ transform: translateY(-3px) scale(1.05); }
#acg-music-player .mp-mini:active{ transform: scale(.94); }

#acg-music-player .mp-mini-ring{
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: 50%;
    background: conic-gradient(from -90deg,
        rgb(var(--mp-a1)) 0%,
        rgb(var(--mp-a2)) calc(var(--mp-p, 0) * 1%),
        rgba(255 255 255 / .14) calc(var(--mp-p, 0) * 1%));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 2.5px));
    pointer-events: none;
}

#acg-music-player .mp-mini-cover{
    position: absolute;
    inset: 6px;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255 255 255 / .18);
}

#acg-music-player .mp-mini-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#acg-music-player .mp-mini-act{
    position: absolute;
    inset: 6px;
    z-index: 5;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(10 12 22 / .44);
    color: #fff;
    opacity: 0;
    transition: opacity .25s var(--mp-ease-out);
}

#acg-music-player .mp-mini-act svg{ width: 22px; height: 22px; }
#acg-music-player .mp-mini:hover .mp-mini-act{ opacity: 1; }

/* ============================================================
   dock · 悬浮胶囊
   ============================================================ */
#acg-music-player .mp-dock {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 66px;
    padding: 10px 12px 10px 10px;
    border-radius: 33px;
    max-width: min(352px, calc(100vw - 36px));
    transform-origin: bottom center;
    transition: transform .45s var(--mp-ease-spring), opacity .3s var(--mp-ease-out);
    overflow: visible;
}

#acg-music-player .mp-dock-cover{
    position: relative;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 4;
}

#acg-music-player .mp-dock-cover img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 0 0 1.5px rgba(255 255 255 / .22),
        0 4px 14px -4px rgb(var(--mp-a1) / .65);
}

/* 唱针小圆点，可爱的细节 */
#acg-music-player .mp-dock-cover::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(14 16 26 / .78);
    box-shadow: inset 0 0 0 2px rgba(255 255 255 / .55);
}

#acg-music-player .mp-dock-meta{
    flex: 1 1 auto;
    min-width: 0;
    z-index: 4;
    cursor: pointer;
}

#acg-music-player .mp-dock-title{
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
}

#acg-music-player .mp-dock-sub{
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--mp-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .4s;
}

#acg-music-player .mp-dock-sub.is-lyric{ color: rgb(var(--mp-a2) / .95); }

/* 跑马灯：仅溢出时 JS 挂 .is-marquee */
#acg-music-player .mp-marquee-inner { display: inline-block; }

.is-marquee {
    -webkit-mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 16px), transparent);
    mask: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 16px), transparent);
}

.is-marquee .mp-marquee-inner {
    padding-right: 34px;
    animation: mp-marquee var(--mp-mqs, 9s) linear infinite;
}

@keyframes mp-marquee {
    0%, 8% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

#acg-music-player .mp-dock-ctrl{
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    z-index: 4;
}

/* 圆形玻璃按钮 */
#acg-music-player .mp-btn {
    position: relative;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: var(--mp-ink-2);
    transition: background .25s, color .25s, transform .2s var(--mp-ease-spring);
}

#acg-music-player .mp-btn svg{ width: 19px; height: 19px; }
#acg-music-player .mp-btn:hover{ background: var(--mp-fill-hover); color: var(--mp-ink); }
#acg-music-player .mp-btn:active{ transform: scale(.88); }

/* 主播放键（渐变实心） */
#acg-music-player .mp-btn-play {
    width: 40px;
    height: 40px;
    color: #fff;
    background: linear-gradient(135deg, rgb(var(--mp-a1)), rgb(var(--mp-a2)));
    box-shadow:
        0 6px 18px -6px rgb(var(--mp-a1) / .75),
        inset 0 1px 0 rgba(255 255 255 / .38);
    transition: box-shadow .4s, transform .2s var(--mp-ease-spring), filter .3s;
}

#acg-music-player .mp-btn-play svg{ width: 20px; height: 20px; }
#acg-music-player .mp-btn-play:hover{ background: linear-gradient(135deg, rgb(var(--mp-a1)), rgb(var(--mp-a2))); color: #fff; filter: brightness(1.12); }
#acg-music-player .mp-btn-play:active{ transform: scale(.9); }

/* 待恢复播放：呼吸脉冲 */
#acg-music-player.mp-root.is-pending .mp-btn-play,
#acg-music-player.mp-root.is-pending .mp-mini-ring {
    animation: mp-breathe 1.9s var(--mp-ease-out) infinite;
}

@keyframes mp-breathe {
    0%, 100% { box-shadow: 0 6px 18px -6px rgb(var(--mp-a1) / .75), 0 0 0 0 rgb(var(--mp-a1) / .45); }
    55% { box-shadow: 0 6px 18px -6px rgb(var(--mp-a1) / .75), 0 0 0 11px rgb(var(--mp-a1) / 0); }
}

/* dock 收起浮标 */
#acg-music-player .mp-dock-min {
    position: absolute;
    top: -7px;
    left: -4px;
    z-index: 6;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: var(--mp-ink-2);
    background: var(--mp-glass-c);
    box-shadow: 0 3px 10px -3px rgba(6 8 18 / .5), inset 0 0 0 1px var(--mp-hairline);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .25s, transform .3s var(--mp-ease-spring), color .2s;
}

#acg-music-player .mp-dock-min svg{ width: 12px; height: 12px; }
#acg-music-player .mp-dock:hover .mp-dock-min{ opacity: 1; transform: scale(1); }
#acg-music-player .mp-dock-min:hover{ color: var(--mp-ink); }

/* dock 底部进度细线 */
#acg-music-player .mp-dock-seek {
    position: absolute;
    left: 26px;
    right: 26px;
    bottom: 4px;
    height: 12px;
    z-index: 5;
    cursor: pointer;
    display: flex;
    align-items: center;
}

#acg-music-player .mp-dock-seek-track{
    position: relative;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--mp-fill);
    overflow: hidden;
    transition: height .2s var(--mp-ease-out);
}

#acg-music-player .mp-dock-seek:hover .mp-dock-seek-track{ height: 4.5px; }

#acg-music-player .mp-dock-seek-fill{
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, rgb(var(--mp-a1)), rgb(var(--mp-a2)));
}

/* ============================================================
   旋转封面（播放时）
   ============================================================ */
#acg-music-player .mp-spin {
    animation: mp-rotate 26s linear infinite;
    animation-play-state: paused;
}

#acg-music-player.mp-root.is-playing .mp-spin{ animation-play-state: running; }

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

/* ============================================================
   panel · 展开面板
   ============================================================ */
#acg-music-player .mp-panel {
    position: absolute;
    bottom: 0;
    width: 378px;
    max-width: calc(100vw - 36px);
    border-radius: 30px;
    padding: 22px 22px 18px;
    transform-origin: bottom left;
    overflow: hidden;
    transition: transform .5s var(--mp-ease-spring), opacity .32s var(--mp-ease-out);
}

#acg-music-player[data-pos="left"] .mp-panel { left: 0; transform-origin: bottom left; }
#acg-music-player[data-pos="right"] .mp-panel { right: 0; transform-origin: bottom right; }

/* 氛围光斑 */
#acg-music-player .mp-glow {
    position: absolute;
    z-index: 0;
    width: 280px;
    height: 280px;
    border-radius: 50%;
    filter: blur(56px);
    opacity: .5;
    pointer-events: none;
    transition: background 1.2s var(--mp-ease-out);
}

#acg-music-player .mp-glow-1{
    top: -110px;
    left: -80px;
    background: rgb(var(--mp-a1) / .55);
    animation: mp-drift-a 26s ease-in-out infinite alternate;
}

#acg-music-player .mp-glow-2{
    bottom: -130px;
    right: -90px;
    background: rgb(var(--mp-a2) / .45);
    animation: mp-drift-b 32s ease-in-out infinite alternate;
}

@keyframes mp-drift-a {
    to { transform: translate(46px, 34px) scale(1.15); }
}

@keyframes mp-drift-b {
    to { transform: translate(-40px, -30px) scale(1.12); }
}

#acg-music-player .mp-panel > :not(.mp-glow){ position: relative; z-index: 4; }

/* —— 头部 —— */
#acg-music-player .mp-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

#acg-music-player .mp-head-cover{
    position: relative;
    flex: 0 0 auto;
    width: 92px;
    height: 92px;
    border-radius: 24px;
    transition: transform .6s var(--mp-ease-spring);
}

#acg-music-player .mp-head-cover img{
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
    box-shadow:
        0 14px 30px -10px rgb(var(--mp-a1) / .55),
        0 4px 12px -4px rgba(6 8 18 / .4),
        inset 0 0 0 1px rgba(255 255 255 / .2);
    transition: opacity .35s;
}

#acg-music-player .mp-head-cover.is-loading img{ opacity: 0; }

/* 封面后的光晕 */
#acg-music-player .mp-head-cover::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 24px;
    background: linear-gradient(135deg, rgb(var(--mp-a1) / .8), rgb(var(--mp-a2) / .8));
    filter: blur(22px);
    opacity: .55;
    transition: background 1.2s;
}

#acg-music-player.mp-root.is-playing .mp-head-cover{ transform: scale(1.02); }

#acg-music-player .mp-head-meta{
    flex: 1 1 auto;
    min-width: 0;
}

#acg-music-player .mp-head-title{
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
}

#acg-music-player .mp-head-artist{
    margin-top: 3px;
    font-size: 12.5px;
    color: var(--mp-ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-music-player .mp-head-acts{
    display: flex;
    gap: 2px;
    margin-top: 10px;
    margin-left: -8px;
}

#acg-music-player .mp-head-acts .mp-btn{
    width: 30px;
    height: 30px;
    color: var(--mp-ink-3);
}

#acg-music-player .mp-head-acts .mp-btn svg{ width: 16.5px; height: 16.5px; }
#acg-music-player .mp-head-acts .mp-btn:hover{ color: var(--mp-ink); }

/* —— 进度条 —— */
#acg-music-player .mp-seek {
    position: relative;
    margin-top: 18px;
    padding: 7px 0;
    cursor: pointer;
    touch-action: none;
}

#acg-music-player .mp-seek-track{
    position: relative;
    height: 5px;
    border-radius: 4px;
    background: var(--mp-fill);
    overflow: visible;
    transition: transform .25s var(--mp-ease-out);
}

#acg-music-player .mp-seek:hover .mp-seek-track,
#acg-music-player .mp-seek.is-drag .mp-seek-track{ transform: scaleY(1.35); }

#acg-music-player .mp-seek-buffer{
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 4px;
    background: var(--mp-fill);
}

#acg-music-player .mp-seek-fill{
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, rgb(var(--mp-a1)), rgb(var(--mp-a2)));
    box-shadow: 0 0 12px -2px rgb(var(--mp-a2) / .7);
}

#acg-music-player .mp-seek-thumb{
    position: absolute;
    top: 50%;
    left: 0;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    box-shadow: 0 2px 8px rgba(6 8 18 / .45), 0 0 0 4px rgb(var(--mp-a1) / .28);
    transition: transform .22s var(--mp-ease-spring);
    pointer-events: none;
}

#acg-music-player .mp-seek:hover .mp-seek-thumb,
#acg-music-player .mp-seek.is-drag .mp-seek-thumb{ transform: translate(-50%, -50%) scale(1); }
#acg-music-player .mp-seek.is-drag .mp-seek-thumb{ transform: translate(-50%, -50%) scale(1.25); }

#acg-music-player .mp-seek-bubble{
    position: absolute;
    bottom: 22px;
    left: 0;
    padding: 3px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    background: var(--mp-glass-c);
    box-shadow: 0 6px 16px -6px rgba(6 8 18 / .5), inset 0 0 0 1px var(--mp-hairline);
    transform: translateX(-50%) translateY(4px);
    opacity: 0;
    transition: opacity .2s, transform .2s;
    pointer-events: none;
    white-space: nowrap;
}

#acg-music-player .mp-seek:hover .mp-seek-bubble,
#acg-music-player .mp-seek.is-drag .mp-seek-bubble{ opacity: 1; transform: translateX(-50%) translateY(0); }

#acg-music-player .mp-times{
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 11px;
    font-weight: 550;
    color: var(--mp-ink-3);
    letter-spacing: .03em;
}

/* —— 控制区 —— */
#acg-music-player .mp-ctrl {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding: 0 6px;
}

#acg-music-player .mp-ctrl .mp-btn{ width: 38px; height: 38px; }
#acg-music-player .mp-ctrl .mp-btn svg{ width: 20px; height: 20px; }

#acg-music-player .mp-ctrl-play{
    width: 54px !important;
    height: 54px !important;
}

#acg-music-player .mp-ctrl-play svg{ width: 24px !important; height: 24px !important; }

/* 模式按钮激活小点 */
#acg-music-player .mp-btn-mode.is-active { color: rgb(var(--mp-a2)); }

#acg-music-player .mp-btn-mode.is-active::after{
    content: "";
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgb(var(--mp-a2));
}

/* —— 音量弹层 —— */
#acg-music-player .mp-vol {
    position: relative;
}

#acg-music-player .mp-vol-pop{
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%) translateY(8px) scale(.92);
    width: 44px;
    padding: 14px 0 10px;
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s, transform .3s var(--mp-ease-spring);
}

#acg-music-player .mp-vol.is-open .mp-vol-pop{
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0) scale(1);
}

#acg-music-player .mp-vol-slider{
    position: relative;
    width: 6px;
    height: 104px;
    border-radius: 4px;
    background: var(--mp-fill);
    cursor: pointer;
    touch-action: none;
}

#acg-music-player .mp-vol-fill{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60%;
    border-radius: 4px;
    background: linear-gradient(0deg, rgb(var(--mp-a1)), rgb(var(--mp-a2)));
}

#acg-music-player .mp-vol-slider::after{
    content: "";
    position: absolute;
    left: -7px;
    right: -7px;
    top: 0;
    bottom: 0;
}

#acg-music-player .mp-vol-num{
    font-size: 10.5px;
    font-weight: 650;
    color: var(--mp-ink-2);
}

#acg-music-player .mp-vol-mute{
    width: 30px !important;
    height: 30px !important;
}

#acg-music-player .mp-vol-mute svg{ width: 16px !important; height: 16px !important; }

/* —— 标签页 —— */
#acg-music-player .mp-tabs {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    padding: 4px;
    border-radius: 14px;
    background: var(--mp-fill);
    position: relative;
}

#acg-music-player .mp-tab{
    flex: 1;
    padding: 7px 0;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 620;
    color: var(--mp-ink-2);
    text-align: center;
    transition: color .25s, background .3s var(--mp-ease-out), box-shadow .3s;
}

#acg-music-player .mp-tab.is-active{
    color: var(--mp-ink);
    background: linear-gradient(152deg, rgba(255 255 255 / .16), rgba(255 255 255 / .07));
    box-shadow: 0 3px 10px -4px rgba(6 8 18 / .5), inset 0 1px 0 rgba(255 255 255 / .18);
}

#acg-music-player[data-tint="light"] .mp-tab.is-active {
    background: rgba(255 255 255 / .82);
    box-shadow: 0 3px 10px -4px rgba(28 32 60 / .28), inset 0 1px 0 rgba(255 255 255 / .9);
}

#acg-music-player .mp-tab-badge{
    margin-left: 4px;
    font-size: 10px;
    color: var(--mp-ink-3);
    font-weight: 600;
}

/* —— 视口（歌词 / 列表）—— */
#acg-music-player .mp-view {
    position: relative;
    height: 252px;
    margin-top: 12px;
    overflow: hidden;
}

#acg-music-player .mp-pane{
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateX(14px);
    pointer-events: none;
    transition: opacity .3s var(--mp-ease-out), transform .35s var(--mp-ease-out);
}

#acg-music-player .mp-pane.is-show{
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

#acg-music-player .mp-pane[data-pane="lyric"]:not(.is-show){ transform: translateX(-14px); }

/* —— 歌词 —— */
#acg-music-player .mp-lyrics {
    position: absolute;
    inset: 0;
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    mask: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent);
    cursor: default;
}

#acg-music-player .mp-lyr-scroll{
    transition: transform .6s cubic-bezier(.24, .86, .3, 1);
    will-change: transform;
}

#acg-music-player .mp-lyrics.is-free .mp-lyr-scroll{ transition: none; }

#acg-music-player .mp-lyr-line{
    padding: 8px 12px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mp-ink-3);
    filter: blur(var(--mp-lb, 0px));
    opacity: var(--mp-lo, .8);
    transform: scale(var(--mp-ls, 1));
    transition: color .45s, filter .55s, opacity .55s, transform .55s var(--mp-ease-out);
    cursor: pointer;
    border-radius: 12px;
}

#acg-music-player .mp-lyr-line:hover{ color: var(--mp-ink-2); filter: blur(0); }

#acg-music-player .mp-lyr-line.is-on{
    color: var(--mp-ink);
    font-size: 14.5px;
    font-weight: 700;
    text-shadow: 0 0 22px rgb(var(--mp-a2) / .45);
}

#acg-music-player .mp-lyr-trans{
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-weight: 500;
    opacity: .72;
}

#acg-music-player .mp-lyr-hint{
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--mp-ink-3);
    font-size: 12.5px;
    letter-spacing: .1em;
}

/* —— 播放列表 —— */
#acg-music-player .mp-list {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

#acg-music-player .mp-search{
    position: relative;
    flex: 0 0 auto;
    margin: 0 2px 10px;
}

#acg-music-player .mp-search svg{
    position: absolute;
    top: 50%;
    left: 12px;
    width: 14px;
    height: 14px;
    transform: translateY(-50%);
    color: var(--mp-ink-3);
}

#acg-music-player .mp-search input{
    width: 100%;
    height: 34px;
    padding: 0 12px 0 34px;
    border: 0;
    outline: 0;
    border-radius: 12px;
    background: var(--mp-fill);
    color: var(--mp-ink);
    font: inherit;
    font-size: 12.5px;
    box-shadow: inset 0 0 0 1px transparent;
    transition: box-shadow .25s, background .25s;
}

#acg-music-player .mp-search input::placeholder{ color: var(--mp-ink-3); }

#acg-music-player .mp-search input:focus{
    background: var(--mp-fill-hover);
    box-shadow: inset 0 0 0 1.5px rgb(var(--mp-a2) / .55);
}

#acg-music-player .mp-rows{
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 2px 6px;
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--mp-a1) / .4) transparent;
}

#acg-music-player .mp-rows::-webkit-scrollbar{ width: 4px; }
#acg-music-player .mp-rows::-webkit-scrollbar-thumb{ border-radius: 4px; background: rgb(var(--mp-a1) / .38); }
#acg-music-player .mp-rows::-webkit-scrollbar-track{ background: transparent; }

#acg-music-player .mp-row{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 13px;
    cursor: pointer;
    transition: background .2s;
}

#acg-music-player .mp-row:hover{ background: var(--mp-fill); }

#acg-music-player .mp-row-idx{
    flex: 0 0 auto;
    width: 22px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--mp-ink-3);
}

#acg-music-player .mp-row-meta{ flex: 1 1 auto; min-width: 0; }

#acg-music-player .mp-row-name{
    font-size: 12.8px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-music-player .mp-row-artist{
    margin-top: 1px;
    font-size: 11px;
    color: var(--mp-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-music-player .mp-row.is-cur{ background: linear-gradient(90deg, rgb(var(--mp-a1) / .18), rgb(var(--mp-a2) / .10)); }
#acg-music-player .mp-row.is-cur .mp-row-name{ color: rgb(var(--mp-a2)); }

/* 均衡器动条 */
#acg-music-player .mp-eq {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    width: 15px;
    height: 13px;
    margin: 0 auto;
}

#acg-music-player .mp-eq i{
    flex: 1;
    border-radius: 2px;
    background: linear-gradient(0deg, rgb(var(--mp-a1)), rgb(var(--mp-a2)));
    height: 30%;
    animation: mp-eq .9s ease-in-out infinite alternate;
    animation-play-state: paused;
}

#acg-music-player.mp-root.is-playing .mp-eq i{ animation-play-state: running; }

#acg-music-player .mp-eq i:nth-child(1){ animation-duration: .74s; }
#acg-music-player .mp-eq i:nth-child(2){ animation-duration: .52s; animation-delay: .12s; }
#acg-music-player .mp-eq i:nth-child(3){ animation-duration: .88s; animation-delay: .05s; }

@keyframes mp-eq {
    0% { height: 22%; }
    100% { height: 96%; }
}

#acg-music-player .mp-empty{
    padding: 42px 0;
    text-align: center;
    color: var(--mp-ink-3);
    font-size: 12.5px;
    letter-spacing: .06em;
}

/* —— 全网搜索 —— */
#acg-music-player .mp-list-sect {
    margin: 2px 10px 8px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--mp-ink-3);
}

#acg-music-player .mp-row-idx svg {
    width: 15px;
    height: 15px;
    margin: 0 auto;
    color: rgb(var(--mp-a2));
}

#acg-music-player svg.mp-row-plus {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    color: var(--mp-ink-3);
    transition: color .2s, transform .25s var(--mp-ease-spring);
}

#acg-music-player .mp-row-net:hover svg.mp-row-plus {
    color: rgb(var(--mp-a2));
    transform: scale(1.18);
}

#acg-music-player .mp-row-go {
    background: linear-gradient(90deg, rgb(var(--mp-a1) / .1), rgb(var(--mp-a2) / .06));
    box-shadow: inset 0 0 0 1px rgb(var(--mp-a2) / .22);
}

#acg-music-player .mp-row-go .mp-row-name { color: rgb(var(--mp-a2)); }

#acg-music-player .mp-net-loading {
    padding: 34px 0;
    text-align: center;
    color: var(--mp-ink-3);
    font-size: 12px;
    letter-spacing: .06em;
}

#acg-music-player .mp-net-loading i {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 3px 1px 0;
    border-radius: 50%;
    background: rgb(var(--mp-a2));
    animation: mp-dot 1s ease-in-out infinite;
}

#acg-music-player .mp-net-loading i:nth-child(2) { animation-delay: .16s; }
#acg-music-player .mp-net-loading i:nth-child(3) { animation-delay: .32s; margin-right: 8px; }

@keyframes mp-dot {
    0%, 100% { transform: translateY(0); opacity: .4; }
    40% { transform: translateY(-4px); opacity: 1; }
}

/* ============================================================
   immersive · 全屏沉浸
   ============================================================ */
#acg-music-player .mp-imm {
    position: fixed;
    inset: 0;
    z-index: 25000;
    display: none;
    overflow: hidden;
    background: #0a0b12;
    font-family: var(--mp-font);
    color: rgba(255 255 255 / .96);
    opacity: 0;
    transition: opacity .45s var(--mp-ease-out);
}

#acg-music-player .mp-imm.is-open{ display: block; }
#acg-music-player .mp-imm.is-in{ opacity: 1; }

#acg-music-player .mp-imm-bg{
    position: absolute;
    inset: -8%;
    background-position: center;
    background-size: cover;
    filter: blur(72px) saturate(1.7) brightness(.5);
    transform: scale(1.15);
    transition: background-image 1s, opacity 1s;
}

#acg-music-player .mp-imm-veil{
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 90% at 50% 0%, rgb(var(--mp-a1) / .22), transparent 55%),
        radial-gradient(110% 90% at 85% 100%, rgb(var(--mp-a2) / .20), transparent 55%),
        linear-gradient(180deg, rgba(6 7 14 / .28), rgba(6 7 14 / .55));
    transition: background 1.2s;
}

#acg-music-player .mp-imm-blob{
    position: absolute;
    width: 46vw;
    height: 46vw;
    min-width: 380px;
    min-height: 380px;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .32;
    mix-blend-mode: screen;
    pointer-events: none;
    transition: background 1.2s;
}

#acg-music-player .mp-imm-blob-1{
    top: -14%;
    left: -8%;
    background: rgb(var(--mp-a1));
    animation: mp-drift-a 30s ease-in-out infinite alternate;
}

#acg-music-player .mp-imm-blob-2{
    bottom: -18%;
    right: -10%;
    background: rgb(var(--mp-a2));
    animation: mp-drift-b 36s ease-in-out infinite alternate;
}

/* 颗粒噪点，消色带、添质感 */
#acg-music-player .mp-imm-grain {
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
}

#acg-music-player .mp-imm-close{
    position: absolute;
    top: calc(22px + env(safe-area-inset-top, 0px));
    right: 26px;
    z-index: 10;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: rgba(255 255 255 / .8);
    background: rgba(255 255 255 / .1);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: inset 0 0 0 1px rgba(255 255 255 / .16);
    transition: background .25s, transform .25s var(--mp-ease-spring);
}

#acg-music-player .mp-imm-close svg{ width: 18px; height: 18px; }
#acg-music-player .mp-imm-close:hover{ background: rgba(255 255 255 / .2); transform: scale(1.06); }

#acg-music-player .mp-imm-stage{
    position: relative;
    z-index: 5;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(340px, 44%) minmax(0, 1fr);
    align-items: center;
    gap: 4vw;
    padding: 6vh 7vw 15vh;
}

#acg-music-player .mp-imm-left{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3.4vh;
    justify-self: end;
}

#acg-music-player .mp-imm-cover{
    position: relative;
    width: min(400px, 38vh);
    aspect-ratio: 1;
    border-radius: 28px;
    transform: perspective(900px) rotateX(var(--mp-tx, 0deg)) rotateY(var(--mp-ty, 0deg));
    transition: transform .3s var(--mp-ease-out);
}

#acg-music-player .mp-imm-cover img{
    width: 100%;
    height: 100%;
    border-radius: 28px;
    object-fit: cover;
    box-shadow:
        0 40px 90px -24px rgba(4 6 14 / .8),
        0 18px 40px -18px rgb(var(--mp-a1) / .55),
        inset 0 0 0 1px rgba(255 255 255 / .22);
    transition: opacity .4s;
}

/* 封面地面反光 */
#acg-music-player .mp-imm-cover::after {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: -34px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(50% 100% at 50% 0%, rgb(var(--mp-a1) / .4), transparent 75%);
    filter: blur(14px);
}

#acg-music-player .mp-imm-meta{ text-align: center; max-width: 380px; }

#acg-music-player .mp-imm-title{
    font-size: clamp(19px, 2.2vw, 26px);
    font-weight: 750;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-music-player .mp-imm-artist{
    margin-top: 6px;
    font-size: clamp(13px, 1.2vw, 15px);
    color: rgba(255 255 255 / .58);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acg-music-player .mp-imm-right{
    height: min(58vh, 560px);
    min-width: 0;
    position: relative;
    overflow: hidden;
    -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}

#acg-music-player .mp-imm-right .mp-lyr-scroll{ transition: transform .7s cubic-bezier(.24, .86, .3, 1); }

#acg-music-player .mp-imm-right .mp-lyr-line{
    padding: 13px 20px;
    text-align: left;
    font-size: clamp(17px, 1.9vw, 24px);
    font-weight: 650;
    border-radius: 16px;
}

#acg-music-player .mp-imm-right .mp-lyr-line.is-on{
    font-size: clamp(19px, 2.1vw, 27px);
    font-weight: 750;
    text-shadow: 0 0 34px rgb(var(--mp-a2) / .5);
}

#acg-music-player .mp-imm-right .mp-lyr-line:hover{ background: rgba(255 255 255 / .05); }

#acg-music-player .mp-imm-right .mp-lyr-trans{
    margin-top: 4px;
    font-size: clamp(12px, 1.2vw, 15px);
}

#acg-music-player .mp-imm-right .mp-lyr-hint{ font-size: 15px; }

/* 沉浸控制条 */
#acg-music-player .mp-imm-ctrl {
    position: absolute;
    left: 50%;
    bottom: calc(4.5vh + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 8;
    width: min(600px, calc(100vw - 48px));
    padding: 16px 26px 14px;
    border-radius: 26px;
}

#acg-music-player .mp-imm-ctrl .mp-seek{ margin-top: 0; }

#acg-music-player .mp-imm-btns{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 26px;
    margin-top: 6px;
}

#acg-music-player .mp-imm-btns .mp-btn{ width: 44px; height: 44px; color: rgba(255 255 255 / .72); }
#acg-music-player .mp-imm-btns .mp-btn svg{ width: 22px; height: 22px; }
#acg-music-player .mp-imm-btns .mp-btn:hover{ color: #fff; background: rgba(255 255 255 / .12); }

#acg-music-player .mp-imm-btns .mp-ctrl-play{
    width: 58px !important;
    height: 58px !important;
    color: #fff !important;
}

#acg-music-player .mp-imm-btns .mp-ctrl-play svg{ width: 26px !important; height: 26px !important; }

/* 沉浸模式打开时锁定页面滚动 */
html.mp-lock,
html.mp-lock body { overflow: hidden !important; }

/* ============================================================
   toast 轻提示
   ============================================================ */
#acg-music-player .mp-toast {
    position: fixed;
    left: 50%;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 25001;
    padding: 9px 18px;
    border-radius: 18px;
    font-family: var(--mp-font);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--mp-ink);
    transform: translateX(-50%) translateY(14px) scale(.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .38s var(--mp-ease-spring);
}

#acg-music-player .mp-toast.is-show{
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
}

/* ============================================================
   形态显隐
   ============================================================ */
#acg-music-player .mp-mini,
#acg-music-player .mp-dock,
#acg-music-player .mp-panel { display: none; }

#acg-music-player.mp-root[data-ui="mini"] .mp-mini{ display: block; }
#acg-music-player.mp-root[data-ui="dock"] .mp-dock{ display: flex; }
#acg-music-player.mp-root[data-ui="panel"] .mp-panel{ display: block; }

/* 入场动画 */
@keyframes mp-rise {
    from { transform: translateY(26px) scale(.9); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
}

#acg-music-player.mp-root[data-ui="mini"] .mp-mini,
#acg-music-player.mp-root[data-ui="dock"] .mp-dock,
#acg-music-player.mp-root[data-ui="panel"] .mp-panel{
    animation: mp-rise .55s var(--mp-ease-spring);
}

/* ============================================================
   移动端
   ============================================================ */
@media (max-width: 640px) {
    #acg-music-player { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
    #acg-music-player[data-pos="left"] { left: 12px; }
    #acg-music-player[data-pos="right"] { right: 12px; }

    #acg-music-player .mp-dock { max-width: calc(100vw - 24px); height: 60px; border-radius: 30px; }
    #acg-music-player .mp-dock-min { opacity: 1; transform: scale(1); }

    #acg-music-player .mp-panel {
        position: fixed;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-width: none;
        padding: 20px 18px 16px;
    }

    #acg-music-player .mp-view { height: min(240px, 32vh); }

    #acg-music-player .mp-imm-stage {
        grid-template-columns: 1fr;
        gap: 0;
        padding: calc(9vh + env(safe-area-inset-top, 0px)) 7vw 24vh;
        align-content: start;
    }

    #acg-music-player .mp-imm-left { justify-self: center; gap: 2.6vh; }
    #acg-music-player .mp-imm-cover { width: min(56vw, 26vh); }
    #acg-music-player .mp-imm-right { height: 30vh; margin-top: 3vh; }
    #acg-music-player .mp-imm-right .mp-lyr-line { text-align: center; }
    #acg-music-player .mp-imm-ctrl { padding: 12px 18px 10px; }
    #acg-music-player .mp-imm-btns { gap: 14px; }
}

@media (max-height: 560px) {
    #acg-music-player .mp-view{ height: 170px; }
}

/* ============================================================
   stage · 歌词舞台特效
   底部巨幕逐字入场 + 卡拉OK渐染 / 两侧竖排词影 /
   四周氛围光 + 周界流光 / 上升光尘
   ============================================================ */
@property --mp-ang {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

#acg-music-player .mp-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.1s var(--mp-ease-out);
}

#acg-music-player.mp-root.is-fx.is-playing .mp-stage { opacity: 1; }
#acg-music-player.mp-root.is-imm .mp-stage { opacity: 0 !important; }

/* —— 四周氛围光（双层异相呼吸）—— */
#acg-music-player .mp-stage-aurora,
#acg-music-player .mp-stage-aurora i {
    position: absolute;
    inset: 0;
}

#acg-music-player .mp-stage-aurora i:nth-child(1) {
    box-shadow: inset 0 0 24vh -8vh rgb(var(--mp-a1) / .5);
    animation: mp-aurora 8s ease-in-out infinite alternate;
}

#acg-music-player .mp-stage-aurora i:nth-child(2) {
    box-shadow: inset 0 0 30vh -12vh rgb(var(--mp-a2) / .42);
    animation: mp-aurora 11s ease-in-out -5s infinite alternate;
}

#acg-music-player[data-tint="light"] .mp-stage-aurora i:nth-child(1) { box-shadow: inset 0 0 24vh -9vh rgb(var(--mp-a1) / .34); }
#acg-music-player[data-tint="light"] .mp-stage-aurora i:nth-child(2) { box-shadow: inset 0 0 30vh -13vh rgb(var(--mp-a2) / .28); }

@keyframes mp-aurora {
    0% { opacity: .5; }
    100% { opacity: 1; }
}

/* 换行时的心跳脉冲 */
#acg-music-player .mp-stage.is-beat .mp-stage-aurora { animation: mp-beat .9s var(--mp-ease-out); }

@keyframes mp-beat {
    0% { filter: brightness(1); }
    22% { filter: brightness(1.9) saturate(1.3); }
    100% { filter: brightness(1); }
}

/* —— 周界流光（旋转的高光沿屏幕边框游走）—— */
#acg-music-player .mp-stage-sweep {
    position: absolute;
    inset: 10px;
    border-radius: 26px;
    padding: 2px;
    background: conic-gradient(from var(--mp-ang),
        transparent 0turn .38turn,
        rgb(var(--mp-a2) / .9) .46turn,
        rgba(255 255 255 / .95) .5turn,
        rgb(var(--mp-a1) / .9) .54turn,
        transparent .62turn 1turn);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .45;
    filter: drop-shadow(0 0 6px rgb(var(--mp-a2) / .8));
    animation: mp-sweep 22s linear infinite;
}

#acg-music-player[data-tint="light"] .mp-stage-sweep { opacity: .55; }

@keyframes mp-sweep {
    to { --mp-ang: 360deg; }
}

/* —— 两侧竖排词影 —— */
#acg-music-player .mp-stage-side {
    position: absolute;
    top: 6vh;
    bottom: 20vh;
    width: min(11vw, 150px);
}

#acg-music-player .mp-stage-side-l { left: max(1.2vw, 12px); }
#acg-music-player .mp-stage-side-r { right: max(1.2vw, 12px); }

#acg-music-player .mp-stage-ghost {
    position: absolute;
    writing-mode: vertical-rl;
    max-height: 100%;
    overflow: hidden;
    font-weight: 650;
    font-size: clamp(17px, 1.9vw, 26px);
    letter-spacing: .22em;
    white-space: nowrap;
    color: rgb(var(--mp-a2) / .22);
    -webkit-mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    mask: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
    opacity: 0;
    animation: mp-ghost 15s var(--mp-ease-out) forwards;
}

#acg-music-player .mp-stage-side-r .mp-stage-ghost { color: rgb(var(--mp-a1) / .22); }

#acg-music-player[data-tint="light"] .mp-stage-ghost { color: rgb(var(--mp-a1) / .3); }
#acg-music-player[data-tint="light"] .mp-stage-side-r .mp-stage-ghost { color: rgb(var(--mp-a2) / .3); }

@keyframes mp-ghost {
    0% { transform: translateY(60px); opacity: 0; }
    10% { opacity: 1; }
    68% { opacity: .55; }
    100% { transform: translateY(-220px); opacity: 0; }
}

/* —— 底部巨幕行 —— */
#acg-music-player .mp-stage-line {
    position: absolute;
    left: 50%;
    bottom: calc(3vh + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(1240px, 94vw);
    text-align: center;
    opacity: 1;
    transition: opacity .3s, transform .3s, filter .3s;
}

#acg-music-player .mp-stage-line.is-out {
    opacity: 0;
    transform: translateX(-50%) translateY(-34px);
    filter: blur(10px);
}

#acg-music-player .mp-stage-stack {
    position: relative;
    font-size: clamp(30px, 4.4vw, 62px);
    font-weight: 860;
    line-height: 1.2;
    letter-spacing: .02em;
}

#acg-music-player .mp-stage-stack span {
    display: inline-block;
    animation: mp-char-in .72s var(--mp-ease-spring) both;
    animation-delay: var(--d, 0s);
}

@keyframes mp-char-in {
    0% { transform: translateY(.85em) rotate(7deg) scale(1.45); opacity: 0; filter: blur(16px); }
    55% { opacity: 1; }
    100% { transform: none; opacity: 1; filter: blur(0); }
}

/* 底层：暗字 */
#acg-music-player .mp-stage-base { color: rgba(255 255 255 / .2); }
#acg-music-player[data-tint="light"] .mp-stage-base { color: rgba(20 24 40 / .16); }

/* 顶层：逐字氛围插值上色（JS 写 inline color），clip-path 随播放进度渐染（卡拉OK）
   —— 不能用 background-clip:text：逐字动画产生合成层后裁剪会退化成色块 */
#acg-music-player .mp-stage-fill {
    position: absolute;
    inset: 0;
    clip-path: inset(0 100% 0 0);
    filter: drop-shadow(0 0 26px rgb(var(--mp-a1) / .55)) drop-shadow(0 2px 10px rgba(6 8 18 / .35));
}

#acg-music-player[data-tint="light"] .mp-stage-fill {
    filter: drop-shadow(0 0 22px rgb(var(--mp-a2) / .45)) drop-shadow(0 2px 8px rgba(255 255 255 / .6));
}

#acg-music-player .mp-stage-trans {
    margin-top: 12px;
    font-size: clamp(14px, 1.5vw, 22px);
    font-weight: 640;
    letter-spacing: .05em;
    color: var(--mp-ink-2);
    text-shadow: 0 1px 12px rgba(6 8 18 / .3);
    animation: mp-trans-in .8s .35s var(--mp-ease-out) both;
}

@keyframes mp-trans-in {
    from { opacity: 0; transform: translateY(14px); filter: blur(6px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* —— 上升光尘 —— */
#acg-music-player .mp-stage-dust,
#acg-music-player .mp-stage-dust i { position: absolute; }

#acg-music-player .mp-stage-dust { inset: 0; overflow: hidden; }

#acg-music-player .mp-stage-dust i {
    bottom: -12px;
    left: var(--x);
    width: var(--sz);
    height: var(--sz);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255 255 255 / .9), var(--c) 60%, transparent);
    filter: blur(var(--bl));
    opacity: 0;
    animation: mp-dust var(--dur) linear var(--delay) infinite;
    animation-play-state: paused;
}

#acg-music-player.mp-root.is-fx.is-playing .mp-stage-dust i { animation-play-state: running; }

@keyframes mp-dust {
    0% { transform: translateY(0) translateX(0) scale(.6); opacity: 0; }
    12% { opacity: var(--o); }
    82% { opacity: calc(var(--o) * .5); }
    100% { transform: translateY(-94vh) translateX(var(--drift)) scale(1.1); opacity: 0; }
}

/* —— 特效开关按钮激活态 —— */
#acg-music-player .mp-btn.is-fx-on { color: rgb(var(--mp-a2)); }

#acg-music-player .mp-btn.is-fx-on::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgb(var(--mp-a2));
}

/* —— 舞台特效 · 移动端精简 —— */
@media (max-width: 768px) {
    #acg-music-player .mp-stage-side { display: none; }
    #acg-music-player .mp-stage-sweep { display: none; }
    #acg-music-player .mp-stage-line { bottom: calc(13vh + env(safe-area-inset-bottom, 0px)); }
    #acg-music-player .mp-stage-stack { font-size: clamp(21px, 6vw, 30px); }
    #acg-music-player .mp-stage-dust i:nth-child(n+8) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    #acg-music-player .mp-stage { display: none; }
}

/* ============================================================
   可访问性 / 降级
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #acg-music-player *, .mp-imm *, .mp-toast {
        animation-duration: .01s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01s !important;
    }
    #acg-music-player .mp-spin { animation: none !important; }
}

@supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
    #acg-music-player .mp-glass{ background: linear-gradient(152deg, rgba(26 28 42 / .96), rgba(18 19 30 / .97)); }
    #acg-music-player[data-tint="light"] .mp-glass {
        background: linear-gradient(152deg, rgba(252 253 255 / .97), rgba(242 245 252 / .97));
    }
}