/* ============================================================
   全站增强播放器样式（主页 / 资源库 / 管理后台共用）
   覆盖：播放条工具按钮 · 编码兼容提示 · 右下角后台迷你播放器
   三端主题变量命名不同（--dim / --text-dim、--border / --card-border、
   --bg2 / --card），因此每个变量都做链式回退，保证观感一致
   ============================================================ */

.mp-wrap { position: relative; width: 100%; }
.mp-media {
  display: block; width: 100%; border-radius: var(--radius);
  background: #05070c;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .12)));
}
video.mp-media { max-height: max(300px, min(78vh, 860px)); object-fit: contain; }

/* --- 视频舞台：承载画面手势 / 中央播放按钮 / 提示气泡 --- */
.mp-stage { position: relative; display: block; line-height: 0; }
.mp-stage .mp-media { width: 100%; }
/* 画面自适应容器：脚本按视频真实比例算出最大尺寸并居中，避免大片黑边 */
.mp-stage-fit {
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 0;
}
.mp-stage-fit > video.mp-media { max-width: 100%; max-height: 100%; }

/* 中央大播放按钮（PotPlayer 风格）：暂停时显示，播放中隐藏，悬停可再唤出 */
.mp-center-play {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(1);
  width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 30px; line-height: 1; color: #eaf4ff;
  border: 1px solid rgba(255, 255, 255, .28);
  background: radial-gradient(circle at 50% 40%, rgba(70, 226, 255, .32), rgba(6, 10, 18, .72));
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  cursor: pointer;
  transition: opacity .18s ease, transform .18s ease;
  opacity: 1;
}@media (hover: hover) and (pointer: fine) {

.mp-center-play:hover{ transform: translate(-50%, -50%) scale(1.06); }
}
.mp-wrap.mp-is-playing .mp-center-play { opacity: 0; pointer-events: none; }@media (hover: hover) and (pointer: fine) {

.mp-stage:hover .mp-center-play{ opacity: .92; pointer-events: auto; }
}@media (hover: hover) and (pointer: fine) {

.mp-wrap.mp-is-playing .mp-stage:hover .mp-center-play{ opacity: .55; }
}

/* 手势提示气泡 */
.mp-toast {
  position: absolute; left: 50%; top: 14px;
  transform: translate(-50%, -8px);
  padding: 6px 14px; border-radius: 999px;
  font-size: 13px; line-height: 1.5; letter-spacing: .5px;
  color: #eaf4ff; background: rgba(6, 10, 18, .78);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.mp-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* 播放失败提示层 */
.mp-err {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; gap: 12px; justify-items: center;
  padding: 24px; text-align: center;
  line-height: 1.6; font-size: 13.5px; color: #ffd9a0;
  background: rgba(6, 10, 18, .82);
  border-radius: var(--radius);
}
.mp-err b { color: var(--warn, #ffb020); }
.mp-err-copy { max-width: 460px; }

/* 智能转码进度覆盖层：盖住黑屏画面，转完自动续播 */
.mp-busy {
  position: absolute; inset: 0; z-index: 6;
  display: grid; place-items: center;
  background: radial-gradient(600px 340px at 50% 42%, color-mix(in srgb, var(--accent, #37d6a8) 8%, transparent), rgba(5, 7, 15, .88));
  border-radius: var(--radius);
  animation: mpBusyIn .25s ease both;
}
@keyframes mpBusyIn { from { opacity: 0; } }
.mp-busy-box {
  display: grid; justify-items: center; gap: 10px;
  padding: 26px 40px; text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 25%, transparent);
  border-radius: var(--radius);
  background: rgba(6, 10, 18, .78);
  box-shadow: 0 12px 44px rgba(0, 0, 0, .5), 0 0 26px color-mix(in srgb, var(--accent, #37d6a8) 12%, transparent);
}
.mp-busy-ico { font-size: 30px; animation: mpBusySpin 2.4s ease-in-out infinite; }
@keyframes mpBusySpin {
  0%, 100% { transform: rotate(-8deg) scale(1); }
  50% { transform: rotate(8deg) scale(1.12); }
}
.mp-busy-title { font-size: 15px; letter-spacing: 1px; color: #dff6ff; }
.mp-busy-title .mono { color: var(--accent, #37d6a8); font-weight: 700; }
.mp-busy-track {
  width: min(320px, 56vw); height: 8px; border-radius: 6px;
  background: rgba(255, 255, 255, .09); overflow: hidden;
}
.mp-busy-bar {
  display: block; width: 0; height: 100%; border-radius: 6px;
  background: var(--accent, #37d6a8);
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #37d6a8) 55%, transparent);
  transition: width .4s ease;
}
.mp-busy-msg { font-size: 12px; color: #9fb4d8; }

/* ================= 播放列表面板（队列 / 我的歌单） ================= */
.mp-pl {
  position: fixed; right: 20px; bottom: 20px; z-index: 9990;
  width: min(360px, 92vw); max-height: min(64vh, 540px);
  display: flex; flex-direction: column;
  border-radius: var(--radius); overflow: hidden;
  background: rgba(8, 12, 24, .94);
  border: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 28%, transparent);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6), 0 0 28px color-mix(in srgb, var(--accent, #37d6a8) 12%, transparent);
  animation: mpPlIn .22s ease both;
}
.mp-pl[hidden] { display: none; }
@keyframes mpPlIn { from { opacity: 0; transform: translateY(14px); } }
.mp-pl-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 18%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #37d6a8) 10%, transparent), transparent);
}
.mp-pl-head > b { font-size: 13.5px; letter-spacing: 1px; color: var(--accent, #37d6a8); }
.mp-pl-tabs { display: flex; gap: 4px; margin-left: auto; }
.mp-pl-tabs button {
  padding: 4px 10px; font-size: 11.5px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid transparent; background: transparent; color: #9fb4d8;
  transition: color .2s, background .2s, border-color .2s;
}@media (hover: hover) and (pointer: fine) {

.mp-pl-tabs button:hover{ color: #dff6ff; }
}
.mp-pl-tabs button.on {
  color: var(--accent, #37d6a8); border-color: color-mix(in srgb, var(--accent, #37d6a8) 40%, transparent);
  background: color-mix(in srgb, var(--accent, #37d6a8) 8%, transparent);
}
.mp-pl-x {
  border: 0; background: transparent; color: #9fb4d8; cursor: pointer;
  font-size: 13px; padding: 2px 6px; border-radius: 6px;
}@media (hover: hover) and (pointer: fine) {

.mp-pl-x:hover{ color: #ff7b7b; background: rgba(255, 123, 123, .1); }
}
.mp-pl-body { flex: 1; overflow: auto; padding: 6px; }
.mp-pl-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent; transition: background .18s;
}@media (hover: hover) and (pointer: fine) {

.mp-pl-item:hover{ background: color-mix(in srgb, var(--accent, #37d6a8) 7%, transparent); border-color: color-mix(in srgb, var(--accent, #37d6a8) 18%, transparent); }
}
.mp-pl-item.now {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #37d6a8) 14%, transparent), color-mix(in srgb, var(--accent) 8%, transparent));
  border-color: color-mix(in srgb, var(--accent, #37d6a8) 40%, transparent);
}
.mp-pl-item.now .mp-pl-nm { color: var(--accent, #37d6a8); }
.mp-pl-idx {
  flex: 0 0 24px; text-align: center; font-size: 11px; color: #9fb4d8;
}
.mp-pl-item.now .mp-pl-idx { color: var(--accent, #37d6a8); animation: mpPlPulse 1.2s ease-in-out infinite; }
@keyframes mpPlPulse { 50% { opacity: .35; } }
.mp-pl-nm {
  flex: 1; min-width: 0; font-size: 12.5px; color: var(--text, #e8eefc);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mp-pl-tag { flex: 0 0 auto; font-size: 10.5px; color: #9fb4d8; }
.mp-pl-del {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  font-size: 12px; opacity: 0; transition: opacity .15s; padding: 2px 4px;
}@media (hover: hover) and (pointer: fine) {

.mp-pl-item:hover .mp-pl-del{ opacity: .75; }
}@media (hover: hover) and (pointer: fine) {

.mp-pl-del:hover{ opacity: 1 !important; }
}
.mp-pl-empty {
  padding: 30px 14px; text-align: center; font-size: 12px;
  color: #9fb4d8; line-height: 1.9;
}
.mp-pl-foot {
  display: flex; gap: 8px; padding: 9px 12px; flex-wrap: wrap;
  border-top: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 18%, transparent);
}
.mp-pl-foot button {
  flex: 1 1 auto; min-width: 56px; padding: 7px 10px; font-size: 12px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 30%, transparent); background: color-mix(in srgb, var(--accent, #37d6a8) 5%, transparent);
  color: #dff6ff; transition: color .2s, background .2s, border-color .2s; white-space: nowrap;
}@media (hover: hover) and (pointer: fine) {

.mp-pl-foot button:hover:not(:disabled){
  background: color-mix(in srgb, var(--accent, #37d6a8) 14%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, #37d6a8) 25%, transparent);
}
}
.mp-pl-foot button:disabled { opacity: .4; cursor: not-allowed; }
.mp-pl-foot .mp-pl-ok { border-color: rgba(52, 211, 153, .55); color: #a7f3d0; }@media (hover: hover) and (pointer: fine) {

.mp-pl-foot .mp-pl-ok:hover{
  background: rgba(52, 211, 153, .16);
  box-shadow: 0 0 12px rgba(52, 211, 153, .3);
}
}
.mp-pl-name {
  flex: 1 1 100%; padding: 7px 10px; font-size: 12.5px; border-radius: var(--radius-sm);
  border: 1px solid color-mix(in srgb, var(--accent, #37d6a8) 35%, transparent); background: rgba(4, 8, 18, .8);
  color: var(--text, #e8eefc); outline: none;
}
.mp-pl-name:focus { border-color: var(--accent, #37d6a8); box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #37d6a8) 25%, transparent); }
.mp-pl-ck {
  flex: 0 0 auto; width: 15px; height: 15px; margin: 0;
  accent-color: var(--accent, #37d6a8); cursor: pointer;
}
@media (max-width: 768px) {
  .mp-pl { right: 10px; left: 10px; bottom: 10px; width: auto; }
}
.mp-note-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.mp-note-hint { font-size: 12px; opacity: .75; }
.mp-btn.mp-fix:disabled { opacity: .6; cursor: progress; }

/* --- 工具条（旧版兼容保留） --- */
.mp-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 10px;
  font-family: inherit;
}
.mp-bar .mp-count { color: var(--dim, var(--text-dim, #8b93a7)); font-size: 12px; margin-right: auto; }

/* ================= 自定义控制栏（PotPlayer 风格） ================= */
.mp-ctrl {
  margin-top: 8px; padding: 10px 12px 8px;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .12)));
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
  user-select: none;
}
.mp-video { display: grid; gap: 0; }
/* 视频：控制栏默认半隐藏，鼠标移入或暂停时浮出 */
.mp-video .mp-ctrl {
  position: absolute; left: 10px; right: 10px; bottom: 10px; margin: 0;
  background: linear-gradient(180deg, rgba(6, 9, 16, .55), rgba(6, 9, 16, .88));
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
  pointer-events: none;
}
.mp-video:hover .mp-ctrl,
.mp-video:focus-within .mp-ctrl,
.mp-video:not(.mp-is-playing) .mp-ctrl {
  opacity: 1; transform: none; pointer-events: auto;
}

/* 进度条 */
.mp-seek { position: relative; height: 18px; display: flex; align-items: center; cursor: pointer; }
.mp-seek-track {
  position: relative; width: 100%; height: 5px; border-radius: 4px; overflow: hidden;
  background: rgba(127, 127, 127, .32);
}
.mp-seek-buf, .mp-seek-cur { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: 0; }
.mp-seek-buf { background: rgba(255, 255, 255, .26); }
.mp-seek-cur {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent, #37d6a8) 55%, transparent), var(--accent, #37d6a8));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent, #37d6a8) 60%, transparent);
}
.mp-seek-dot {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--accent, #37d6a8);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #37d6a8) 22%, transparent), 0 2px 8px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.mp-seek-tip {
  position: absolute; bottom: 20px; left: 0; transform: translateX(-50%);
  padding: 2px 7px; border-radius: 6px; font-size: 11px; white-space: nowrap;
  background: rgba(6, 9, 16, .92); color: var(--text, #e8ecf5);
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .14)));
  opacity: 0; transition: opacity .15s; pointer-events: none;
}
.mp-seek-tip.show { opacity: 1; }

.mp-ctrl-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.mp-gap { flex: 1 1 auto; }
.mp-time { font-size: 12px; color: var(--dim, var(--text-dim, #8b93a7)); }
.mp-time b { color: var(--text, #e8ecf5); font-weight: 600; }
.mp-count { font-size: 11.5px; color: var(--dim, var(--text-dim, #8b93a7)); }

.mp-ico {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text, #e8ecf5);
  font-size: 14px; line-height: 1; cursor: pointer;
  transition: color .18s, background .18s, border-color .18s, transform .1s;
}@media (hover: hover) and (pointer: fine) {

.mp-ico:hover{
  color: var(--accent, #37d6a8);
  background: color-mix(in srgb, var(--accent, #37d6a8) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent, #37d6a8) 45%, transparent);
}
}
.mp-ico:active { transform: scale(.94); }
.mp-ico.mp-on {
  color: var(--accent, #37d6a8);
  background: color-mix(in srgb, var(--accent, #37d6a8) 16%, transparent);
  border-color: var(--accent, #37d6a8);
}

/* 音量 */
.mp-vol { display: inline-flex; align-items: center; gap: 4px; }
.mp-vol-range {
  width: 74px; height: 4px; -webkit-appearance: none; appearance: none;
  border-radius: 4px; background: rgba(127, 127, 127, .34); cursor: pointer;
}
.mp-vol-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px; border-radius: 50%; border: none;
  background: var(--accent, #37d6a8);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent, #37d6a8) 60%, transparent);
}
.mp-vol-range::-moz-range-thumb {
  width: 12px; height: 12px; border: none; border-radius: 50%;
  background: var(--accent, #37d6a8);
}
.mp-ctrl .mp-btn { padding: 5px 9px; font-size: 12px; min-height: 44px; } /* R22-3 */
.mp-btn {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px; /* R22-3 */
  padding: 6px 11px;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .12)));
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text, #e8ecf5);
  font-size: 12.5px; line-height: 1; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .1s;
}@media (hover: hover) and (pointer: fine) {

.mp-btn:hover{
  border-color: color-mix(in srgb, var(--accent, #37d6a8) 60%, transparent);
  color: var(--accent, #37d6a8);
  background: color-mix(in srgb, var(--accent, #37d6a8) 8%, transparent);
}
}
.mp-btn:active { transform: scale(.97); }
.mp-btn:disabled { opacity: .4; cursor: not-allowed; }
.mp-btn:focus-visible { outline: 2px solid var(--accent, #37d6a8); outline-offset: 2px; }
.mp-btn.mp-on {
  border-color: var(--accent, #37d6a8);
  color: var(--accent, #37d6a8);
  background: color-mix(in srgb, var(--accent, #37d6a8) 14%, transparent);
}

/* --- 编码 / 封装兼容提示条 --- */
.mp-note {
  display: flex; align-items: flex-start; gap: 9px;
  margin: 0 0 10px; padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--warn, #ffb020) 40%, transparent);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--warn, #ffb020) 9%, transparent);
  color: var(--text, #e8ecf5);
  font-size: 12.5px; line-height: 1.65;
}
.mp-note.ok {
  border-color: color-mix(in srgb, var(--ok, #3ddc97) 34%, transparent);
  background: color-mix(in srgb, var(--ok, #3ddc97) 8%, transparent);
}
.mp-note b { color: var(--warn, #ffb020); }
.mp-note.ok b { color: var(--ok, #3ddc97); }
.mp-note-ico { flex: 0 0 auto; font-size: 14px; line-height: 1.4; }
.mp-note-copy { min-width: 0; }
.mp-note code {
  padding: 1px 5px; border-radius: var(--radius-sm);
  border: none;
  background: rgba(127, 127, 127, .16);
  font-family: Consolas, monospace; font-size: 11.5px;
}

/* --- 音频大舞台：旋转黑胶 + 中央播放 + 左右切歌，与视频舞台同规格 --- */
.mp-audio {
  position: relative; width: 100%;
}
.mp-audio audio.mp-media { border: 0; background: transparent; }
.mp-audio-stage {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; min-height: min(44vh, 320px); padding: 38px 20px 30px; line-height: 1.4;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .12)));
  border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--accent, #37d6a8) 14%, transparent), transparent 62%),
    radial-gradient(circle at 82% 88%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 55%),
    linear-gradient(165deg, rgba(10, 15, 28, .92), rgba(4, 7, 14, .96));
}
.mp-disc-row { display: flex; align-items: center; gap: clamp(18px, 6vw, 46px); }

/* 旋转唱片：播放时转动，中心高亮 */
.mp-vinyl {
  width: clamp(132px, 24vw, 188px); height: clamp(132px, 24vw, 188px); border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent, #37d6a8) 26%, rgba(255, 255, 255, .1)) 0 17%,
      rgba(8, 10, 16, .92) 18% 34%, rgba(255, 255, 255, .05) 34% 36%,
      rgba(8, 10, 16, .88) 37% 52%, rgba(255, 255, 255, .04) 52% 54%,
      rgba(8, 10, 16, .85) 55% 100%);
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .14)));
  box-shadow:
    0 0 0 6px color-mix(in srgb, var(--accent, #37d6a8) 7%, transparent),
    0 0 44px color-mix(in srgb, var(--accent, #37d6a8) 18%, transparent),
    0 14px 40px rgba(0, 0, 0, .45),
    inset 0 0 26px rgba(0, 0, 0, .6);
  animation: mpVinyl 3.2s linear infinite;
  animation-play-state: paused;
}
.mp-wrap.mp-is-playing .mp-vinyl,
.mp-audio.mp-playing .mp-vinyl { animation-play-state: running; }
.mp-audio-ico { font-size: clamp(30px, 5vw, 42px); filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent, #37d6a8) 55%, transparent)); }
@keyframes mpVinyl { to { transform: rotate(360deg); } }

/* 唱片两侧 ⏮ / ⏭ 圆形切歌按钮 */
.mp-disc-btn {
  flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center; font-size: 19px; cursor: pointer;
  color: #dff6ff; border: 1px solid var(--border, rgba(255, 255, 255, .16));
  background: rgba(8, 12, 24, .55);
  transition: color .22s ease, border-color .22s ease, background .22s ease;
}@media (hover: hover) and (pointer: fine) {

.mp-disc-btn:hover{
  color: var(--accent, #37d6a8); border-color: var(--accent, #37d6a8);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent, #37d6a8) 35%, transparent);
  transform: scale(1.07);
}
}
.mp-disc-btn.ghost { visibility: hidden; }   /* 无列表时占位保持对称 */
.mp-audio-stage .mp-center-play { width: 84px; height: 84px; font-size: 32px; }
.mp-audio-bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.mp-audio-bars i {
  width: 4px; height: 30%; border-radius: var(--radius-pill);
  background: linear-gradient(to top, color-mix(in srgb, var(--accent, #37d6a8) 55%, transparent), var(--accent, #37d6a8));
  animation: mpBars 1.1s ease-in-out infinite;
  animation-play-state: paused;
}
.mp-audio.mp-playing .mp-audio-bars i { animation-play-state: running; }
.mp-audio-bars i:nth-child(2n) { animation-delay: .14s; }
.mp-audio-bars i:nth-child(3n) { animation-delay: .31s; }
.mp-audio-bars i:nth-child(4n) { animation-delay: .47s; }
.mp-audio-bars i:nth-child(5n) { animation-delay: .62s; }
.mp-audio audio { width: 100%; }
@keyframes mpBars { 0%, 100% { height: 26%; } 50% { height: 100%; } }

/* --- 后台迷你播放器（右下角常驻，弹窗关闭后继续播放） --- */
#cxMiniPlayer {
  position: fixed; right: 18px; bottom: 18px; z-index: 9999;
  width: min(320px, calc(100vw - 24px));
  padding: 10px 12px 12px;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .14)));
  border-radius: var(--radius);
  background: var(--bg2, var(--card, rgba(16, 20, 30, .96)));
  color: var(--text, #e8ecf5);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  animation: mpMiniIn .28s ease-out;
}
#cxMiniPlayer[hidden] { display: none; }
@keyframes mpMiniIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.mp-mini-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mp-mini-title {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 600;
}
.mp-mini-tag {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .14)));
  color: var(--dim, var(--text-dim, #8b93a7)); font-size: 10px; letter-spacing: .6px;
}
.mp-mini-x {
  flex: 0 0 auto; width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--border, var(--card-border, rgba(255, 255, 255, .14)));
  border-radius: 6px; background: transparent;
  color: var(--dim, var(--text-dim, #8b93a7)); font-size: 12px; cursor: pointer;
}@media (hover: hover) and (pointer: fine) {

.mp-mini-x:hover{ color: var(--danger, #ff5470); border-color: var(--danger, #ff5470); }
}
#cxMiniPlayer .mp-mini-slot { min-width: 0; }
#cxMiniPlayer video.mp-media,
#cxMiniPlayer audio.mp-media { border-radius: var(--radius-sm); }
#cxMiniPlayer video.mp-media { max-height: 168px; }
#cxMiniPlayer audio.mp-media { width: 100%; border: none; background: transparent; }
.mp-mini-bar { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.mp-mini-bar .mp-btn { padding: 5px 9px; font-size: 11.5px; }
.mp-mini-progress {
  height: 3px; margin-top: 8px; border-radius: var(--radius-pill);
  background: rgba(127, 127, 127, .22); overflow: hidden;
}
.mp-mini-progress i {
  display: block; height: 100%; width: 0;
  background: var(--accent, #37d6a8);
  box-shadow: 0 0 10px var(--accent, #37d6a8);
  transition: width .3s linear;
}

@media (max-width: 480px) {
  #cxMiniPlayer { right: 10px; left: 10px; bottom: 10px; width: auto; }
  video.mp-media { max-height: 46vh; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-audio-bars i { animation: none; height: 60%; }
  .mp-vinyl { animation: none; }
  #cxMiniPlayer { animation: none; }
}
/* R21 双通道：站内「减少动效」开关开启时同上 */
html[data-a11y-motion="0"] .mp-audio-bars i { animation: none; height: 60%; }
html[data-a11y-motion="0"] .mp-vinyl { animation: none; }
html[data-a11y-motion="0"] #cxMiniPlayer { animation: none; }