@charset "utf-8";
/*!
 * capsule_music —— 胶囊音乐播放器
 * 左下角胶囊 / 播放列表 / 沉浸式全屏 三级界面
 * 胶囊与列表面板是白毛玻璃，沉浸式全屏是暗色；
 * 颜色由 --em-accent、--em-accent2 控制（PHP 按后台设置输出）
 */

#capsule-music {
    /* 白毛玻璃（胶囊 / 面板用） */
    --em-glass: rgba(255, 255, 255, .58);
    --em-glass-top: rgba(255, 255, 255, .82);
    --em-glass-bot: rgba(255, 255, 255, .46);
    --em-line: rgba(255, 255, 255, .8);
    /* 以下一组是「暗色全屏」的默认值；胶囊与面板会就地换成深色系 */
    --em-line-soft: rgba(255, 255, 255, .07);
    --em-ink: #f4f2f6;
    --em-ink-2: rgba(244, 242, 246, .66);
    --em-ink-3: rgba(244, 242, 246, .42);
    --em-accent: #ff6f9c;
    --em-accent2: #b98cff;
    /* 白底上的强调色：亮粉对比度只有 2.4:1，文字/序号要用暗一档的版本 */
    --em-accent-dk: #c7577a;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    line-height: 1.5;
    /* 整个播放器是深色玻璃 UI，根节点就给浅色文字，
       免得某个子元素漏写 color 时继承到浅色模板的深色字 */
    color: var(--em-ink);
}

#capsule-music,
#capsule-music * {
    box-sizing: border-box;
}

#capsule-music button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

#capsule-music svg {
    width: 17px;
    height: 17px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

#capsule-music .em-fill {
    fill: currentColor;
    stroke: none;
}

#capsule-music .em-sp {
    flex: 1;
}

#capsule-music-audio {
    display: none;
}

/* ---------- 玻璃基底：白毛玻璃 ----------
 * 注意：这里必须直接写在这两个元素上，不能再做成「工具类」等 HTML 去加。
 * 早先的写法是只定义一个 .em-glass，但模板里始终没给 .em-capsule /
 * .em-panel 加这个 class，结果背景没渲染 → 面板透明透出浅色页面，
 * 而文字是近白色的 --em-ink → 白字贴白底，列表和歌名全部看不见。
 * 教训：可复用样式写在元素选择器上，别依赖调用方记得加 class。
 *
 * 白毛玻璃这一版：就地重定义 --em-ink 一组变量。CSS 变量沿 DOM 向下继承，
 * 于是这两个子树里的 var(--em-ink*) 全部自动变深色，不必逐条改写子元素规则；
 * 沉浸式全屏不在子树里，仍是原来的深色 UI。 */
#capsule-music .em-capsule,
#capsule-music .em-panel {
    --em-ink: #1c1b21;
    --em-ink-2: rgba(28, 27, 33, .66);
    --em-ink-3: rgba(28, 27, 33, .46);
    --em-line: rgba(255, 255, 255, .8);
    --em-line-soft: rgba(28, 27, 33, .1);

    color: var(--em-ink);
    background-color: var(--em-glass);
    /* 自下而上渐深，玻璃才有厚度感，不是一块半透明色块 */
    background-image: linear-gradient(180deg, var(--em-glass-top), var(--em-glass-bot));
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    border: 1px solid var(--em-line);
}

/* 图标显隐：靠 .is-playing 切换 */
#capsule-music .em-i-pause {
    display: none;
}

#capsule-music.is-playing .em-i-pause {
    display: block;
}

#capsule-music.is-playing .em-i-play {
    display: none;
}

/* 图标是 display 硬切的，补一个小弹跳，切换时不会「啪」地闪一下 */
#capsule-music .em-i-play,
#capsule-music .em-i-pause {
    transform-origin: center;
}

#capsule-music.is-playing .em-i-pause {
    animation: em-pop .28s cubic-bezier(.2, 1.6, .45, 1);
}

#capsule-music:not(.is-playing) .em-i-play {
    animation: em-pop .28s cubic-bezier(.2, 1.6, .45, 1);
}

@keyframes em-pop {
    from { transform: scale(.7); opacity: .35; }
    to { transform: scale(1); opacity: 1; }
}

/* ---------- 波形 ---------- */
#capsule-music .em-eq {
    display: inline-flex;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}

#capsule-music .em-eq em {
    display: block;
    width: 2px;
    height: 4px;
    border-radius: 1px;
    background: var(--em-accent);
}

#capsule-music.is-playing .em-eq em {
    animation: em-eq .9s ease-in-out infinite;
}

#capsule-music.is-playing .em-eq em:nth-child(2) {
    animation-delay: .18s;
}

#capsule-music.is-playing .em-eq em:nth-child(3) {
    animation-delay: .36s;
}

@keyframes em-eq {
    0%, 100% { height: 3px; }
    50% { height: 12px; }
}

/* ---------- 封面 ---------- */
#capsule-music .em-disc-cover,
#capsule-music .em-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
}

/* 换歌时封面靠 background-image 硬换会闪一下，JS 会先预加载再改透明度，
   这里只负责让透明度变化是渐变的（碟面 .18s；糊层走双缓冲交叉淡化 .5s） */
#capsule-music .em-disc-cover {
    transition: opacity .18s ease;
}

#capsule-music .em-bg,
#capsule-music .em-glow {
    transition: opacity .5s ease;
}

/* 糊层双缓冲：b 层初始隐藏，JS 换图时画在隐藏层再交叉淡化 */
#capsule-music .em-bg[data-buf$="-b"],
#capsule-music .em-glow[data-buf$="-b"] {
    opacity: 0;
}

#capsule-music .em-disc-cover::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .32), transparent 62%);
}

/* 播放时封面像唱片一样转。
   圆形轮廓本身看不出转动，得给个参照物——高光反向自转、视觉上始终停在原处，
   否则高光跟着封面一起转，看着像颗滚动的球而不是唱片。
   动画常驻 + play-state 控制启停：暂停时冻结在当前角度，
   若直接摘掉动画，transform 会清零、碟面瞬间跳回 0 度（用户反馈很怪） */
#capsule-music .em-disc-cover {
    animation: em-spin 10s linear infinite;
    animation-play-state: paused;
}

#capsule-music .em-disc-cover::after {
    animation: em-spin 10s linear infinite reverse;
    animation-play-state: paused;
}

#capsule-music.is-playing .em-disc-cover,
#capsule-music.is-playing .em-disc-cover::after {
    animation-play-state: running;
}

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

/* ---------- 关闭按钮 ---------- */
#capsule-music .em-x {
    width: 28px;
    height: 28px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--em-ink);
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: .16s;
}

#capsule-music .em-x:hover {
    background: rgba(255, 255, 255, .26);
    border-color: rgba(255, 255, 255, .34);
    transform: scale(1.07);
}

#capsule-music .em-x svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.1;
}

/* ---------- 进度条 ---------- */
#capsule-music .em-bar {
    position: relative;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .14);
    cursor: pointer;
    transition: height .16s;
    touch-action: none;
}

#capsule-music .em-bar:hover {
    height: 7px;
}

#capsule-music .em-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--em-accent), var(--em-accent2));
}

#capsule-music .em-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    transition: transform .16s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

#capsule-music .em-bar:hover .em-thumb,
#capsule-music .em-bar.is-drag .em-thumb {
    transform: translate(-50%, -50%) scale(1);
}

/* 拖拽时放大并带一圈光晕，手上更有准头 */
#capsule-music .em-bar.is-drag .em-thumb {
    transform: translate(-50%, -50%) scale(1.22);
    box-shadow: 0 0 0 5px rgba(255, 255, 255, .14), 0 2px 6px rgba(0, 0, 0, .45);
}

#capsule-music .em-bar.is-drag {
    height: 7px;
}

#capsule-music .em-time {
    font-size: 11px;
    color: var(--em-ink-3);
    font-variant-numeric: tabular-nums;
}

/* 限定在全屏播放器进度条下的时间戳行（.em-prog 内），
   避免和胶囊文字区的 .em-row 撞名 */
#capsule-music .em-prog .em-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}

/* ---------- 歌单 ---------- */
#capsule-music .em-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .18) transparent;
}

#capsule-music .em-list::-webkit-scrollbar {
    width: 5px;
}

#capsule-music .em-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 3px;
}

#capsule-music .em-tk {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 12px;
    border-radius: 10px;
    text-align: left;
    transition: background .16s;
}

#capsule-music .em-tk:hover {
    background: rgba(255, 255, 255, .075);
}

#capsule-music .em-tk:active {
    background: rgba(255, 255, 255, .15);
}

/* 展开列表时前 12 条依次浮现。可见区大约就 8 行，只给前 12 条挂动画，
   300 行全挂会在展开瞬间和面板的缩放动画抢主线程 */
#capsule-music[data-state="list"] .em-tk:nth-child(-n+12) {
    animation: em-rise .34s cubic-bezier(.2, .85, .2, 1) both;
    animation-delay: calc(var(--i, 0) * 14ms);
}

@keyframes em-rise {
    from { opacity: 0; transform: translateY(9px); }
    to { opacity: 1; transform: none; }
}

#capsule-music .em-tk.is-on {
    background: rgba(255, 255, 255, .1);
}

#capsule-music .em-tk-n {
    width: 16px;
    flex: none;
    text-align: center;
    font-size: 11px;
    color: var(--em-ink-3);
    font-variant-numeric: tabular-nums;
}

#capsule-music .em-tk.is-on .em-tk-n {
    color: var(--em-accent);
}

#capsule-music .em-tk-b {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

#capsule-music .em-tk-b b {
    font-size: 13px;
    font-weight: 500;
    color: var(--em-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#capsule-music .em-tk.is-on .em-tk-b b {
    color: var(--em-accent);
}

#capsule-music .em-tk-b i {
    font-style: normal;
    font-size: 11px;
    color: var(--em-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#capsule-music .em-tk-d {
    flex: none;
    font-size: 11px;
    color: var(--em-ink-3);
    font-variant-numeric: tabular-nums;
}

#capsule-music .em-tk .em-eq {
    display: none;
}

#capsule-music .em-tk.is-on .em-eq {
    display: inline-flex;
}

#capsule-music .em-tk.is-on .em-tk-d {
    display: none;
}

/* 不可播放（VIP / 下架 / 地址为空） */
#capsule-music .em-tk.is-off {
    opacity: .45;
    cursor: not-allowed;
}

#capsule-music .em-tk.is-off .em-tk-b b {
    color: var(--em-ink-3);
}

#capsule-music .em-tk.is-err .em-tk-d {
    color: #ff8a8a;
}

#capsule-music .em-phead {
    flex: none;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 13px 11px;
    border-bottom: 1px solid var(--em-line-soft);
}

#capsule-music .em-phead h4 {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--em-ink);
    border: 0;
}

#capsule-music .em-phead .em-n {
    font-size: 11px;
    font-weight: 400;
    color: var(--em-ink-3);
}

/* ---------- 列表里的全屏按钮 ---------- */
#capsule-music .em-fsbtn {
    height: 30px;
    flex: none;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    background: #6f88ff;
    transition: .18s;
}


#capsule-music .em-fsbtn svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}

/* 「歌词」开关：中性底色与「全屏」区分，开启态再染主题色（见文件末尾 dlrc-on 规则）。
   要放在 .em-fsbtn 系列之后才能盖掉同优先级的渐变底 */
#capsule-music .em-dlbtn {
    color: var(--em-ink-3);
    background: rgba(28, 27, 33, .05);
    box-shadow: none;
}

#capsule-music .em-dlbtn:hover {
    transform: none;
    filter: none;
    color: var(--em-ink);
    background: rgba(28, 27, 33, .1);
}

/* ---------- ① 胶囊 ---------- */
#capsule-music .em-capsule {
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 9000;
    /* 短歌名也保持稳定的胶囊形，长歌名到上限再省略 */
    width: auto;
    min-width: 246px;
    max-width: min(292px, calc(100vw - 40px));
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 8px 8px;
    border-radius: 30px;
    cursor: pointer;
    /* 白玻璃贴在浅色页面上容易糊成一片，靠内高光 + 两层外投影把边界托出来 */
    box-shadow: 0 10px 28px rgba(24, 32, 58, .18), 0 2px 6px rgba(24, 32, 58, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .24s;
}

/* 胶囊内底的迷你进度条：可点可拖。
   它是文字区（.em-meta）的最后一行，跟歌名/歌手对齐成一个整体，
   不再贴着胶囊底边跟圆角打架。元素是 10px 高的热区，
   视觉轨道用 ::before 画（3px），i 是渐变填充；
   拖动中关掉 width 过渡保证跟手 */
#capsule-music .em-cbar {
    position: relative;
    width: 100%;
    height: 7px;
    margin-top: 2px;
    cursor: pointer;
    touch-action: none;
}

#capsule-music .em-cbar::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 2px;
    height: 3px;
    border-radius: 2px;
    background: rgba(28, 27, 33, .1);
    transition: background .2s;
}

#capsule-music .em-cbar i {
    position: absolute;
    left: 0;
    top: 2px;
    height: 3px;
    width: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--em-accent), var(--em-accent2));
    transition: width .3s linear;
}

#capsule-music .em-cbar:hover::before,
#capsule-music .em-cbar.is-drag::before {
    background: rgba(28, 27, 33, .2);
}

#capsule-music .em-cbar.is-drag i {
    transition: none;
}

/* 悬停不动：只加深投影给一点反馈，胶囊本体不再位移 */
#capsule-music .em-capsule:hover {
    box-shadow: 0 14px 34px rgba(24, 32, 58, .22), 0 3px 8px rgba(24, 32, 58, .09), inset 0 1px 0 rgba(255, 255, 255, .95);
}

#capsule-music[data-state="full"] .em-capsule {
    transform: translateY(14px) scale(.9);
    opacity: 0;
    pointer-events: none;
}

#capsule-music .em-disc {
    position: relative;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

#capsule-music .em-disc-cover {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .08);
}

#capsule-music .em-disc-ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid var(--em-accent);
    opacity: 0;
    transition: .24s;
}

#capsule-music.is-playing .em-disc-ring {
    opacity: .85;
    animation: em-halo 2.6s cubic-bezier(.25, .6, .3, 1) infinite;
}

/* 播放时封面外圈缓缓扩散的光晕，停播即收 */
@keyframes em-halo {
    0% { transform: scale(1); opacity: .7; }
    70%, 100% { transform: scale(1.22); opacity: 0; }
}

#capsule-music .em-disc-badge {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 17px;
    height: 17px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--em-accent), var(--em-accent2));
    border: 2px solid rgba(20, 18, 24, .92);
    transition: .22s;
}

#capsule-music .em-disc-badge svg {
    width: 9px;
    height: 9px;
    color: #fff;
    stroke-width: 2.6;
}

#capsule-music .em-meta {
    position: relative;
    flex: 1;
    min-width: 0;
    max-width: 228px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    /* 视觉上把文字块往下压一点：进度条视觉轨道之下还有一点热区死空间 */
    padding-top: 2px;
}

/* 歌手那一行：hint 悬停时绝对定位叠上来替换它 */
#capsule-music .em-meta .em-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    /* margin-top: 8px; */
    height: 14px;
}

#capsule-music .em-meta b {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--em-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#capsule-music .em-meta .em-art {
    font-style: normal;
    font-size: 11px;
    line-height: 14px;
    color: var(--em-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity .18s ease, transform .18s ease;
}

/* 悬停时提示语上浮替换歌手名。用绝对定位叠在歌手那一行上，
   原来的 max-height 撑开会在 60px 高的胶囊里撑出回流、把内容顶歪 */
#capsule-music .em-capsule:hover .em-meta .em-art {
    opacity: 0;
    transform: translateY(-4px);
}

#capsule-music .em-meta .em-hint {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 14px;
    color: var(--em-accent);
    white-space: nowrap;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

#capsule-music .em-capsule:hover .em-meta .em-hint {
    opacity: 1;
    transform: none;
}

#capsule-music .em-pp ,#capsule-music .em-dock{
    flex: none;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--em-ink);
    background: rgba(28, 27, 33, .05);
    transition: .16s;
}

#capsule-music .em-pp:hover {
    background: linear-gradient(135deg, var(--em-accent), var(--em-accent2));
    color: #fff;
}

#capsule-music .em-pp svg {
    width: 16px;
    height: 16px;
}

/* ---------- ② 播放列表面板 ---------- */
#capsule-music .em-panel {
    position: fixed;
    left: 20px;
    bottom: 90px;
    z-index: 9001;
    width: 364px;
    height: min(64vh, 452px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(24, 32, 58, .2), 0 3px 10px rgba(24, 32, 58, .08), inset 0 1px 0 rgba(255, 255, 255, .95);
    transform-origin: left bottom;
    transform: scale(.72) translateY(14px);
    opacity: 0;
    pointer-events: none;
    transition: transform .34s cubic-bezier(.2, .85, .2, 1), opacity .26s;
}

#capsule-music[data-state="list"] .em-panel {
    transform: none;
    opacity: 1;
    pointer-events: auto;
}

#capsule-music .em-plist {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 8px 6px 10px;
}

#capsule-music .em-plist .em-list {
    padding: 0 4px;
}

/* ---------- ③ 沉浸式全屏 ---------- */
#capsule-music .em-full {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 0;
    /* 封面拉不到时也要有底色，别透出页面 */
    background: #0e0c11;
    transform: translateY(100%);
    opacity: 0;
    visibility: hidden;
    /* 不加 will-change：全屏层常驻提升会长期占用大量显存，
       弱 GPU 机器会被压到软件合成，整页变幻灯片（实测） */
    /* 进场时透明度先走完，出场时压到最后再变——否则下滑途中整块变透明会露出页面。
       visibility 同理，必须等收起动画结束再隐藏，不然关闭时会瞬间消失 */
    transition: transform .44s cubic-bezier(.22, .8, .2, 1), opacity 0s linear .44s, visibility 0s linear .44s;
}

#capsule-music[data-state="full"] .em-full {
    transform: none;
    opacity: 1;
    visibility: visible;
    /* 进场只做 transform：起点在视口外，透明度直接置 1 即可，
       少一路大图层的 alpha 合成，过渡更跟手 */
    transition: transform .44s cubic-bezier(.22, .8, .2, 1), visibility 0s linear 0s;
}

/* 全屏升起的同时，内部三块（顶栏 / 左舞台 / 右歌单）错峰渐入 */
#capsule-music[data-state="full"] .em-ftop {
    animation: em-rise .5s cubic-bezier(.2, .85, .2, 1) .04s both;
}

#capsule-music[data-state="full"] .em-fleft {
    animation: em-rise .58s cubic-bezier(.2, .85, .2, 1) .1s both;
}

#capsule-music[data-state="full"] .em-fright {
    animation: em-rise .58s cubic-bezier(.2, .85, .2, 1) .18s both;
}

#capsule-music .em-bg {
    position: absolute;
    inset: -12%;
    background-size: cover;
    background-position: center;
    /* 模糊越重、铺得越大，光栅化越吃 GPU；弱机器上重 blur + 常驻漂移动画
       会掉进软件合成（整页幻灯片，实测）。取遮罩下够看的最小模糊，
       且完全静态不动画 */
    filter: blur(26px) saturate(150%);
    opacity: .52;
}

#capsule-music .em-veil {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 30% 45%, rgba(14, 12, 17, .66), rgba(11, 10, 14, .92));
}

#capsule-music .em-fcontent {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#capsule-music .em-ftop {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 26px 6px;
}

#capsule-music .em-ftop .em-t {
    font-size: 11.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--em-ink-3);
}

#capsule-music .em-collapse,
#capsule-music .em-plistbtn {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 10px;
    font-size: 12.5px;
    color: var(--em-ink);
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    transition: .16s;
}

#capsule-music .em-collapse:hover,
#capsule-music .em-plistbtn:hover {
    background: rgba(255, 255, 255, .26);
}

/* 前台独立页（?plugin=capsule_music）没有「列表/胶囊」形态可回，收起按钮无意义，直接不渲染。
   注意只藏 .em-collapse——列表开关（.em-plistbtn）独立类名，不受影响 */
#capsule-music.em-standalone .em-collapse {
    display: none;
}

/* 前台独立页只有全屏一个形态：胶囊与列表面板整体不存在，
   全屏层无条件常显（不依赖 data-state，避免 JS 就绪前的胶囊闪现，也不要进场动画） */
#capsule-music.em-standalone .em-capsule,
#capsule-music.em-standalone .em-panel {
    display: none;
}

#capsule-music.em-standalone .em-full {
    transform: none;
    opacity: 1;
    visibility: visible;
    transition: none;
}

#capsule-music .em-collapse svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.1;
}

#capsule-music .em-fbody {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 40px;
    padding: 6px 48px 34px;
    min-height: 0;
}

#capsule-music .em-fleft {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-width: 0;
}

#capsule-music .em-stage {
    position: relative;
    flex: none;
    display: grid;
    place-items: center;
}

#capsule-music .em-glow {
    position: absolute;
    width: min(420px, 52vh);
    height: min(420px, 52vh);
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    filter: blur(26px) saturate(180%);
    opacity: .42;
}

#capsule-music .em-fdisc {
    position: relative;
    flex: none;
    width: min(300px, 36vh);
    height: min(300px, 36vh);
    border-radius: 50%;
}

#capsule-music .em-fdisc .em-disc-cover {
    position: absolute;
    inset: 0;
}

/* 大碟转得比胶囊慢：尺寸变大后同样的角速度会显得更快，22s 一圈刚好。
   高光必须跟着换成同一个周期，否则反向自转不同步，高光会慢慢漂走。
   周期覆盖不能挂在 .is-playing 上——暂停恢复时周期突变会导致相位跳变 */
#capsule-music .em-fdisc .em-disc-cover,
#capsule-music .em-fdisc .em-disc-cover::after {
    animation-duration: 22s;
}

#capsule-music .em-fdisc::after {
    content: "";
    position: absolute;
    inset: -13px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .14);
}

#capsule-music .em-hole {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 19%;
    height: 19%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(12, 10, 15, .94) 52%, rgba(12, 10, 15, .5) 100%);
    border: 1px solid rgba(255, 255, 255, .1);
    box-shadow: inset 0 0 22px rgba(0, 0, 0, .5);
}

#capsule-music .em-ftx {
    min-width: 0;
    max-width: 100%;
    text-align: center;
}

#capsule-music .em-ftx b {
    display: block;
    font-size: 25px;
    font-weight: 500;
    letter-spacing: -.3px;
    color: var(--em-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#capsule-music .em-ftx i {
    display: block;
    margin-top: 7px;
    font-style: normal;
    font-size: 13px;
    color: var(--em-ink-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#capsule-music .em-lrc {
    min-height: 58px;
    max-width: 520px;
    text-align: center;
}

#capsule-music .em-lrc .em-cur {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--em-ink);
}

#capsule-music .em-lrc .em-nx {
    margin-top: 5px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--em-ink-3);
}

/* 跳行时由 JS 打上 .is-in（同一句重复写入不会重播），轻微上浮 + 去模糊。
   起点是 .3 而不是 0：换字现在正好落在 LRC 时间标签上，若从全透明起步，
   那一瞬间等于还是读不到新句 —— 等于把刚修掉的延迟又还回去一小截。
   时长也收到 .3s，理由同上。 */
#capsule-music .em-lrc .is-in {
    animation: em-lrc-in .3s cubic-bezier(.2, .85, .2, 1);
}

@keyframes em-lrc-in {
    from { opacity: .3; transform: translateY(7px); filter: blur(2px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* 这里原有「旧句先离场 .17s、动画结束后才换字」的 .is-out / em-lyr-out。
   已删除：那 .17s 是加在每一句上的固定延迟，实测端到端 180~340ms 的主因之一。
   变化改由进场动画单独表达，换字不再等待。 */

#capsule-music .em-nolyric .em-lrc {
    display: none;
}

#capsule-music .em-prog {
    width: min(480px, 100%);
}

#capsule-music .em-ctl {
    display: flex;
    align-items: center;
    gap: 8px;
}

#capsule-music .em-ctl button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--em-ink-2);
    transition: .16s;
}

#capsule-music .em-ctl button:hover {
    background: rgba(255, 255, 255, .12);
    color: var(--em-ink);
}

#capsule-music .em-ctl .em-main {
    width: 54px;
    height: 54px;
    margin: 0 2px;
    background: var(--em-ink);
    color: #16141a;
}

#capsule-music .em-ctl .em-main:hover {
    /* 悬停不再跳成纯白（用户反馈突兀），只轻微放大给反馈 */
    transform: scale(1.05);
}

#capsule-music .em-ctl .em-main svg {
    width: 22px;
    height: 22px;
}

#capsule-music .em-fright {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    padding-left: 26px;
    border-left: 1px solid var(--em-line-soft);
    /* 隐藏/显示列表：宽度交给 grid-template-columns 过渡，这里只做淡入淡出；
       overflow hidden 防止列宽收到 0 时内容撑破 */
    overflow: hidden;
    transition: opacity .3s, border-color .3s;
}

/* 全屏列表独立排版：列宽加大后标题/歌手可以呼吸，别再用面板的小字 */
#capsule-music .em-fright .em-tk {
    padding: 10px 14px;
    gap: 13px;
}

#capsule-music .em-fright .em-tk-n {
    width: 20px;
    font-size: 11.5px;
}

#capsule-music .em-fright .em-tk-b {
    gap: 6px;
}

#capsule-music .em-fright .em-tk-b b {
    font-size: 14px;
    letter-spacing: .1px;
}

#capsule-music .em-fright .em-tk-b i {
    font-size: 12px;
    color: rgba(255, 255, 255, .48);
}

/* 隐藏列表态：右列宽度收到 0，左舞台自然铺满 */
#capsule-music .em-fbody {
    transition: grid-template-columns .38s cubic-bezier(.22, .8, .2, 1);
}

#capsule-music.nolist .em-fbody {
    grid-template-columns: minmax(0, 1fr) 0px;
}

#capsule-music.nolist .em-fright {
    opacity: 0;
    border-left-color: transparent;
}

/* 全屏右列列表头：波形指示放标题左侧（放右侧角落会被当成"..."菜单），
   标题加大、数量收成弱化胶囊，行下加清晰分隔 */
#capsule-music .em-fright .em-phead {
    padding: 6px 0 13px;
    border-bottom-color: rgba(255, 255, 255, .12);
}

#capsule-music .em-fright .em-phead .em-eq {
    height: 15px;
    gap: 3px;
    margin-right: 2px;
}

#capsule-music .em-fright .em-phead .em-eq em {
    width: 3px;
    height: 5px;
}

#capsule-music.is-playing .em-fright .em-phead .em-eq em {
    animation-name: em-eq-fs;
}

@keyframes em-eq-fs {
    0%, 100% { height: 4px; }
    50% { height: 15px; }
}

#capsule-music .em-fright .em-phead h4 {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
}

#capsule-music .em-fright .em-phead .em-n {
    font-size: 11px;
    padding: 2px 9px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .09);
    color: rgba(255, 255, 255, .62);
}

#capsule-music .em-fright .em-plist {
    padding: 10px 0 0;
}

/* ---------- 按下反馈 ----------
 * 之前只有 hover 态，按下去毫无手感（触屏更是完全没反馈）。
 * 放在样式表末尾，才能压过前面同优先级的 :hover 规则。 */
#capsule-music .em-pp:active,
#capsule-music .em-ctl button:active,
#capsule-music .em-ctl .em-main:active,
#capsule-music .em-x:active,
#capsule-music .em-fsbtn:active,
#capsule-music .em-collapse:active,
#capsule-music .em-plistbtn:active {
    transform: scale(.93);
    transition-duration: .07s;
}

/* 按下也不动：胶囊保持原位（用户要求点击时不要动） */
#capsule-music .em-capsule:active {
    transform: none;
}

/* ---------- 白毛玻璃：内部细节修正 ----------
 * 底色换成白玻璃后，原来为深色 UI 硬编码的 rgba(255,255,255,x) 填充和描边
 * 在白底上就全看不见了（和当初 .em-glass 那条死规则是同一个病根）。
 * 这几条专门把它们换成深色系；沉浸式全屏不在胶囊/面板子树里，不受影响。
 * 用后代选择器（#capsule-music .em-panel .em-tk）是为了压过前面的通用规则。 */
#capsule-music .em-capsule .em-disc-cover {
    background-color: rgba(28, 27, 33, .06);
}

/* 徽标外圈原来是深色描边，用来跟深色胶囊分开；换到白玻璃上要反过来 */
#capsule-music .em-capsule .em-disc-badge {
    border-color: rgba(255, 255, 255, .92);
}



/* 悬停底色是 var(--em-ink)，在胶囊里已经变深，字要跟着变白才看得见 */
#capsule-music .em-capsule .em-pp:hover {
    color: #fff;
}

#capsule-music .em-capsule .em-hint {
    color: var(--em-accent-dk);
}

#capsule-music .em-panel .em-x {
    background: rgba(28, 27, 33, .07);
    border-color: rgba(28, 27, 33, .12);
}

#capsule-music .em-panel .em-x:hover {
    background: rgba(28, 27, 33, .14);
    border-color: rgba(28, 27, 33, .22);
}

#capsule-music .em-panel .em-list {
    scrollbar-color: rgba(28, 27, 33, .22) transparent;
}

#capsule-music .em-panel .em-list::-webkit-scrollbar-thumb {
    background: rgba(28, 27, 33, .22);
}

#capsule-music .em-panel .em-tk:hover {
    background: rgba(28, 27, 33, .055);
}

#capsule-music .em-panel .em-tk:active {
    background: rgba(28, 27, 33, .1);
}

#capsule-music .em-panel .em-tk.is-on {
    background: rgba(28, 27, 33, .07);
}

/* 亮粉在白玻璃上对比度只有 2.4:1，文字类改用它暗一档的版本 */
#capsule-music .em-panel .em-tk.is-on .em-tk-b b,
#capsule-music .em-panel .em-tk.is-on .em-tk-n {
    color: var(--em-accent-dk);
}

/* 「无法播放」原来是 #ff8a8a，浅色只够贴在深色底上 */
#capsule-music .em-panel .em-tk.is-err .em-tk-d {
    color: #c9403c;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
    #capsule-music .em-fbody {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 6px 28px 28px;
    }

    #capsule-music .em-fright {
        display: none;
    }

    /* 窄屏下右列表本来就隐藏，开关没意义 */
    #capsule-music .em-plistbtn {
        display: none;
    }
}

@media (max-width: 760px) {
    /* 移动端不显示悬浮歌词：纯文字条压在页面内容上，小屏没有「桌面」可言；
       面板头部的「歌词」开关一并藏掉，免得点了没反应 */
    #capsule-music .em-dlrc {
        display: none !important;
    }

    #capsule-music .em-dlbtn {
        display: none;
    }

    #capsule-music .em-panel {
        width: calc(100vw - 40px);
    }

    #capsule-music .em-meta {
        max-width: 158px;
    }

    #capsule-music .em-ftx b {
        font-size: 20px;
    }

    #capsule-music .em-lrc .em-cur {
        font-size: 16px;
    }

    #capsule-music .em-lrc .em-nx {
        font-size: 12px;
    }

    #capsule-music .em-ctl .em-main {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 420px) {
    #capsule-music .em-capsule {
        left: 12px;
        bottom: 12px;
        /* 窄屏就撑满一行，和下面板同宽，比留一截空白好看 */
        min-width: calc(100vw - 24px);
    }

    #capsule-music .em-panel {
        left: 12px;
        bottom: 82px;
        width: calc(100vw - 24px);
    }

    #capsule-music .em-meta {
        max-width: 124px;
    }
}

/* 电脑端不显示「收起到侧边」（.em-dock）—— 只剩触屏需要它：
   小屏上胶囊是横贯屏幕的一条，挡住内容，收成贴边把手才有意义；
   桌面上胶囊只占左下角一小块，收起后反倒「找不到播放器了」。
   这里和上面的 max-width:760px 是同一对断点：桌面 = >760px。
   必须 !important：本段在文件靠前，而 .em-dock / .em-docktab 的布局规则
   （display:grid、收起态的 translateX / visibility）在文末的 ⑤ 侧边停靠里，
   同权重、后出现的赢 —— 不加就会被静默吃掉（跟 .em-dlrc 一个道理）。 */
@media (min-width: 761px) {
    #capsule-music .em-dock,
    #capsule-music .em-docktab {
        display: none !important;
    }

    /* 兜住手机上留下的 docked 状态（localStorage 同源共享）：
       在手机收起过、再拿电脑打开，胶囊会照旧滑出屏幕 —— 而桌面已经没有
       展开把手可点，那就真没得救了。这里直接把收起态摊平。 */
    #capsule-music.em-docked .em-capsule {
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* 尊重系统的减少动效设置。
   名单外的是同一个例外：封面旋转（em-spin）和电平柱（em-eq em / em-lv em）。
   它们不是装饰动效，而是「正在播放 / 它还没死」这个状态本身 —— 关掉之后看到的
   是一排死竖线加一张静止封面，第一反应必然是「功能坏了」，比动效本身更糟。
   代价可控：都只有几个像素宽、贴在屏幕边缘或塞在胶囊里，不构成前庭刺激。
   实测（2026-09，本机 Windows「动画效果」关闭 → reduce 命中 true）这几处被一并
   枪毙，正是「改了却没动静」的真正原因 —— 不是缓存，也不是选择器写错。
   被豁免的这三个要放慢只能靠 !important：它们的 duration 分散在 (1,3,1) 的
   .is-playing / :nth-child 规则里，同一个媒体块内的选择器压不过。
   其余装饰性动画照常尊重该设置。 */
@media (prefers-reduced-motion: reduce) {
    #capsule-music .em-bg,
    #capsule-music .em-disc-ring,
    #capsule-music .em-i-play,
    #capsule-music .em-i-pause,
    #capsule-music .em-lrc .is-in,
    #capsule-music .em-dlrc .is-in,
    #capsule-music[data-state="full"] .em-ftop,
    #capsule-music[data-state="full"] .em-fleft,
    #capsule-music[data-state="full"] .em-fright,
    #capsule-music[data-state="list"] .em-tk {
        animation: none !important;
    }

    /* 上面被豁免的两个：不关，只放慢一档。
       放慢而不是照旧，是为了让这个设置仍然有效果可感；
       不照旧也不是为了好看 —— 照旧等于把 reduce 当没看见。 */
    #capsule-music .em-docktab .em-lv em {
        animation-duration: 3.2s !important;
    }

    #capsule-music.is-playing .em-docktab .em-lv em,
    #capsule-music.is-playing .em-eq em {
        animation-duration: 1.4s !important;
    }

    #capsule-music .em-panel,
    #capsule-music .em-full,
    #capsule-music .em-capsule,
    #capsule-music .em-docktab,
    #capsule-music .em-disc-cover,
    #capsule-music .em-bg,
    #capsule-music .em-glow {
        transition-duration: .01s;
    }
}

/* ---------- ④ 桌面歌词 ----------
 * 无底色的纯文字歌词条，贴底（与左下胶囊同一水平线）且水平居中，
 * 可读性靠两层 drop-shadow 把字从任何页面背景上托起来。
 * 单击条身 = 播放/暂停（暂停后条身仍常驻，方便再点继续），× = 关闭，
 * 开关记进 localStorage。仅在「已开启 + 非全屏 + 歌词开关打开」时显示。 */
#capsule-music .em-dlrc {
    position: fixed;
    left: 50%;
    bottom: 20px;
    transform: translate(-50%, 10px);
    z-index: 9100;
    width: max-content;
    max-width: min(78vw, 720px);
    padding: 4px 34px 5px 16px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    /* 轻阴影：把字从背景上托出来即可，太重会显脏 */
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .3)) drop-shadow(0 0 8px rgba(0, 0, 0, .16));
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}

/* 桌面歌词：dlrc-on 即显示（后台「显示歌词」只决定默认值，前台点「歌词」按钮仍可开启）；
   全屏有自己的歌词，桌面歌词条不出现 */
#capsule-music.dlrc-on:not([data-state="full"]) .em-dlrc {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity .3s, transform .3s, visibility 0s;
}

#capsule-music .em-dlrc-line {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: .3px;
    /* 主色起笔 → 辅色收尾：整句都在品牌色系里，开头不再发白 */
    background: linear-gradient(100deg, var(--em-accent) 15%, var(--em-accent2) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--em-accent);
}

/* 跳行时 JS 会打 .is-in：从下方带模糊上浮进场（幅度比全屏大，孤行更明显）。
   同样把起点抬到 .3、时长收到 .3s —— 桌面歌词是唯一的歌词载体时不显示在
   面板里，读不到就是彻底的"延迟"。 */
#capsule-music .em-dlrc .is-in {
    animation: em-dlrc-in .3s cubic-bezier(.2, .85, .2, 1) both;
}

@keyframes em-dlrc-in {
    from { opacity: .3; transform: translateY(12px) scale(.99); filter: blur(3px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

/* ---------- 歌词光带扫过（全屏当前句 + 桌面歌词条）----------
 * 一道光沿着一句歌词从左扫到右，位置由 JS 每帧写进根节点的 --em-lp。
 *
 * 两处的做法刻意不同，因为两处的「底」不一样：
 *   全屏当前句是深色糊底上的浅色字 → 底就压成字的原色 var(--em-ink)
 *     （#f4f2f6，注意 .em-lrc 在 .em-full 里，不是 .em-panel），
 *     光带用品牌色扫过。白字已经很亮了，再叠白等于看不见，只能靠变颜色。
 *   桌面歌词条本来就是 accent→accent2 的渐变字 → 底保持那条品牌渐变不动，
 *     光带是一道掠过的白光（在亮底上，提亮才看得见）。
 *   两边的方向相反是刻意的，不是漏改。
 *
 * 为什么不做「逐字染色」：LRC 只有行级时间标签，没有逐字时间。逐字效果必须按
 * 字数均摊去猜每个字唱到哪，遇英文单词或长间奏就偏；光带只表示「这一句在走」，
 * 不假装知道字级位置，所以不存在这个误差。
 *
 * 为什么渐变要分两层：background-clip: text 之下，没有背景的地方等于没有字。
 * 所以叠在光带下面的那层「底色」不是装饰，它承载这句歌词的字色本身 ——
 * 少了它，光带以外的地方整句都是透明的。
 *
 * 为什么用 @supports 兜住：不支持 background-clip: text 的浏览器完全不进这一段，
 * 退回原来的纯色文字，连下面那条 inline-block 的布局变化都不会发生。
 *
 * 这一条刻意不进 prefers-reduced-motion 的关停名单：它是「唱到哪」的状态指示
 * （等同进度条），不是装饰动画。放慢就等于跟音乐脱节，停掉就等于把这个功能删了。
 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    #capsule-music .em-lrc .em-cur,
    #capsule-music .em-dlrc-line {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* 当前句收成 inline-block：光带要贴着文字宽度扫。
       块级元素会撑满 .em-lrc 那个 520px 的容器，短句居中之后两端全是空白，
       光带就有小半程在空跑（--em-lp 的 100% 指的是元素宽度，不是文字宽度）。
       实测这句「如果你也刚好抬头看树」的盒子就是 200px = 文字实际宽度。 */
    #capsule-music .em-lrc .em-cur {
        display: inline-block;
    }

    /* 全屏：底 = 字原色，光带叠在它上面。
       刻意不把底色调暗成 var(--em-ink-3) —— 调暗后当前句和下面那行
       .em-nx 落成一个灰度，「正在唱的这句」就没了层级。 */
    #capsule-music .em-lrc .em-cur {
        background-image:
            radial-gradient(ellipse 78px 100% at calc(var(--em-lp, 0) * 100%) 50%,
                var(--em-accent2) 0%, var(--em-accent) 30%,
                rgba(255, 111, 156, .42) 56%, rgba(255, 111, 156, 0) 82%),
            linear-gradient(90deg, var(--em-ink), var(--em-ink));
    }

    /* 桌面歌词条：底沿用原来的品牌渐变（主色起笔 → 辅色收尾），
       光带是掠过它的一道白光。这样开这个效果前后，歌词条本身的观感没变，
       只是多了一道扫过去的光。 */
    #capsule-music .em-dlrc-line {
        background-image:
            radial-gradient(ellipse 88px 100% at calc(var(--em-lp, 0) * 100%) 50%,
                #ffffff 0%, #ffd0e0 32%,
                rgba(255, 255, 255, .38) 60%, rgba(255, 255, 255, 0) 84%),
            linear-gradient(100deg, var(--em-accent) 15%, var(--em-accent2) 90%);
    }
}

#capsule-music .em-dlrc-x {
    position: absolute;
    top: 50%;
    right: 7px;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(17, 16, 22, .45);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    transition: opacity .18s, background .18s;
}

#capsule-music .em-dlrc-x svg {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

#capsule-music .em-dlrc:hover .em-dlrc-x {
    opacity: 1;
}

#capsule-music .em-dlrc-x:hover {
    background: rgba(17, 16, 22, .7);
}

/* 全屏有自己的歌词，桌面歌词条在全屏态收起 */
#capsule-music[data-state="full"] .em-dlrc {
    display: none;
}

/* 列表页头「歌词」按钮的开启态：淡主题色底 + 主题色字，一眼看出桌面歌词开着 */
#capsule-music.dlrc-on .em-dlbtn {
color: #4a5464;
    background: #e5e7eb;
}

/* ---------- ⑤ 侧边停靠 ----------
 * 胶囊右缘的小按钮把播放器整个收进屏幕左侧外，只留一个贴边的把手；
 * 点把手展开。状态记进 localStorage，翻页/刷新后保持收起。
 *
 * 把手的形态是一块 38×62 的白毛玻璃圆角片，里面装着 4 根电平柱：
 * 播放中它们错峰跳动，停着就定格成高低不一的静态柱。用图形而不是文字，
 * 是因为收起态宽度只有 38px，任何文案都得竖排；电平柱本身就是通用的
 * 「音乐 / 正在播放」符号，小屏和触屏都认得出。
 * 悬停时电平柱淡出让位给向右的箭头，把「点一下能拉开」这层语义补上；
 * 触屏没有 hover，看到的就是常驻电平柱，不影响使用。 */


#capsule-music .em-dock:hover ,#capsule-music .em-pp:hover{
    background: linear-gradient(135deg, var(--em-accent), var(--em-accent2));
    color: #fff;
}

#capsule-music .em-dock svg {
    width: 12px;
    height: 12px;
}

/* 收起：胶囊整体滑出左缘（沿用胶囊自身的 transform 过渡），把手接管交互 */
#capsule-music.em-docked .em-capsule {
    transform: translateX(calc(-100% - 32px));
    pointer-events: none;
}

/* 把手常驻 DOM，用 visibility + 位移做显隐。
 * 早先是 display:none / flex 硬切，收起那一刻整块「啪」地冒出来，
 * 跟胶囊滑出屏幕的动画完全对不上；现在改成从屏幕外滑进来，
 * 和胶囊是同一套位移曲线，看起来像同一个动作的两半。 */
#capsule-music .em-docktab {
    position: fixed;
    left: 0;
    bottom: 20px;
    z-index: 9000;
    width: 50px;
    height: 50px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid var(--em-line);
    border-left: 0;
    border-radius: 0 15px 15px 0;
    color: var(--em-accent-dk, var(--em-accent));
    background-color: var(--em-glass);
    background-image: linear-gradient(180deg, var(--em-glass-top), var(--em-glass-bot));
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
    box-shadow: 0 6px 18px rgba(24, 32, 58, .16), inset 0 1px 0 rgba(255, 255, 255, .9);
    /* visibility 必须等位移动画走完再切：否则收起时把手先消失、胶囊才滑走，
       中间空一拍；展开时同理。所以隐藏在 .34s 之后，显示是立即的 */
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .24s,
                visibility 0s linear .34s, box-shadow .24s;
}

#capsule-music.em-docked .em-docktab {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .24s,
                visibility 0s linear 0s, box-shadow .24s;
}

/* 悬停只加深投影，把手本体不位移：本体一移动，就跟「拉出来 / 收进去」
   的正戏撞在一起，用户分不清是 hover 效果还是真展开了 */
#capsule-music .em-docktab:hover {
    box-shadow: 0 10px 26px rgba(24, 32, 58, .22), inset 0 1px 0 rgba(255, 255, 255, .9);
}

/* 按下反馈必须紧跟在上面那条之后写。
 * 注意优先级：#capsule-music.em-docked .em-docktab 与 #capsule-music .em-docktab:active
 * 同为 (1,2,0)，靠书写顺序决胜 —— 上面那条 transform: none 写在后面，
 * 会把文件开头「按下反馈」那组规则里的 scale(.93) 整个压掉，
 * 结果就是「只有收起来的时候按得动、反而没手感」。
 * 这里带上 .em-docked 变成 (1,3,0)，稳稳压过，顺序也不再有影响。 */
#capsule-music.em-docked .em-docktab:active {
    transform: scale(.93);
    transition-duration: .07s;
}

#capsule-music .em-docktab svg {
    width: 14px;
    height: 14px;
}

/* 电平柱：基准高度写在 height 上（一柱一档，--h），动画只改 scaleY。
 * 用 height 做动画每帧都会触发回流，而这种常驻在屏幕边缘的小东西
 * 最不该持续占主线程，所以高度只当"静态基准"，动起来交给 transform。
 *
 * 为什么待机也要跳（em-dock-idle）：
 * 第一版只在 .is-playing 时跳，暂停就是四根完全不动的竖线。用户收起到侧边、
 * 碰巧没在放歌（或音源加载失败），看到一排定格竖线的第一反应是"功能坏了"。
 * 中间版本给了个幅度很小的"呼吸"（scaleY .52 → .74，3.4s）—— 实测这个幅度
 * 在 18~26px 的柱子上只有 4~6px 位移，看的人根本不会把它读成"在动"，
 * 等于没修。现在待机也走满幅度（.34 → 1），只把节奏压慢到播放态的 1/2.5，
 * 一眼能看出"活得很好"，又能看出"现在没放"。 */
#capsule-music .em-docktab .em-lv {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
    transition: opacity .18s, transform .18s;
}

#capsule-music .em-docktab .em-lv em {
    display: block;
    width: 4px;
    height: var(--h, 26px);
    border-radius: 2px;
    transform-origin: bottom center;
    background: linear-gradient(180deg, var(--em-accent2), var(--em-accent));
    animation: em-dock-idle 2.4s ease-in-out infinite;
}

#capsule-music .em-docktab .em-lv em:nth-child(1) { --h: 18px; }
#capsule-music .em-docktab .em-lv em:nth-child(2) { --h: 26px; }
#capsule-music .em-docktab .em-lv em:nth-child(3) { --h: 21px; }
#capsule-music .em-docktab .em-lv em:nth-child(4) { --h: 24px; }

/* 待机错峰：周期与负 delay 各不相同，四根柱子的跳动错开，
   否则整排一起起伏会像在闪烁。
   一律用负 delay：正 delay 会让柱子在"延迟阶段"没有动画值可应用，
   transform 回落成 none（满高），一帧可见的窜顶 —— 播放态那组已经踩过这个坑 */
#capsule-music .em-docktab .em-lv em:nth-child(2) { animation-duration: 2.7s; animation-delay: -.45s; }
#capsule-music .em-docktab .em-lv em:nth-child(3) { animation-duration: 2.2s; animation-delay: -.9s; }
#capsule-music .em-docktab .em-lv em:nth-child(4) { animation-duration: 2.9s; animation-delay: -1.35s; }

/* 待机：满幅度（.34 → 1），但节奏慢 —— 播放态是它的 2.5 倍速。
   早先用过 .52 → .74 的"轻呼吸"，实测那点位移压根没人看得出，等于没修；
   幅度留给播放态去区分就没意义了，改成"快慢"来区分，感知强得多。 */
@keyframes em-dock-idle {
    0%, 100% { transform: scaleY(.34); }
    50% { transform: scaleY(1); }
}

/* 播放中：切到快速跳动，幅度拉满。
   只覆盖 animation-name / duration / delay 三个分量，不重写整个简写，
   免得把 timing-function 和 iteration-count 一起冲掉 */
#capsule-music.is-playing .em-docktab .em-lv em {
    animation-name: em-dock-lv;
    animation-duration: .95s;
    animation-delay: 0s;
}

/* 四根柱子的周期各不相同（.95 / 1.18 / 1.04 / 1.26s），错开之后才像在跳；
   同一个周期只靠 delay 错拍，看久了会露出「齐步走」的机械感。
 *
 * 错拍一律用负 delay，不用正 delay：正 delay 会让柱子在「延迟阶段」没有动画值
 * 可应用，transform 回落成 none（= scaleY(1) 满高），于是按下播放的瞬间
 * 后两根会先窜到顶再开始跳，是一帧可见的闪跳。负 delay 相位等价但没有死区。 */
#capsule-music.is-playing .em-docktab .em-lv em:nth-child(2) {
    animation-duration: 1.18s;
    animation-delay: -1.06s;
}

#capsule-music.is-playing .em-docktab .em-lv em:nth-child(3) {
    animation-duration: 1.04s;
    animation-delay: -.78s;
}

#capsule-music.is-playing .em-docktab .em-lv em:nth-child(4) {
    animation-duration: 1.26s;
    animation-delay: -.90s;
}

@keyframes em-dock-lv {
    0%, 100% { transform: scaleY(.18); }
    50% { transform: scaleY(1); }
}

/* 悬停时电平柱让位给箭头 */
#capsule-music .em-docktab .em-dock-chev {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 15px;
    height: 15px;
    transform: translate(-50%, -50%);
    color: var(--em-accent-dk, var(--em-accent));
    opacity: 0;
    transition: opacity .18s;
}

#capsule-music .em-docktab:hover .em-lv {
    opacity: 0;
    transform: scaleX(.55);
}

#capsule-music .em-docktab:hover .em-dock-chev {
    opacity: 1;
}

/* 独立音乐页只有全屏形态，没有胶囊，不提供停靠 */
#capsule-music.em-standalone .em-dock,
#capsule-music.em-standalone .em-docktab {
    display: none !important;
}