/* 音乐播放器组件（玻璃拟态） */
.mp-player {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 10px; border-radius: 999px;
  background: rgba(20, 28, 44, .42);
  border: 1px solid rgba(255, 255, 255, .22);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .35);
  font-family: -apple-system, "PingFang SC", sans-serif;
  color: #fff; user-select: none;
  transition: transform .3s, opacity .3s;
}
.mp-player:hover { transform: translateY(-3px); }
.mp-cover {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25), 0 4px 12px rgba(0,0,0,.4);
  animation: mp-spin 14s linear infinite; animation-play-state: paused;
}
.mp-player.playing .mp-cover { animation-play-state: running; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
.mp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-info { min-width: 118px; max-width: 180px; }
.mp-title { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-artist { font-size: 10.5px; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.mp-progress {
  margin-top: 6px; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,.22); cursor: pointer; overflow: hidden;
}
.mp-bar { height: 100%; width: 0; border-radius: 2px; background: #ffd97a; transition: width .2s linear; }
.mp-btn {
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0;
  background: rgba(255, 217, 122, .92); color: #2a2118;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s, background .2s;
}
.mp-btn:hover { transform: scale(1.08); background: #ffd97a; }
.mp-btn svg { width: 18px; height: 18px; fill: currentColor; }
/* 内嵌模式（放在页面指定插槽中） */
.mp-player.mp-inline {
  position: static;
  border-radius: 18px;
  width: 100%;
  padding: 14px 16px 14px 14px;
  transform: none;
}
.mp-player.mp-inline:hover { transform: none; }
.mp-player.mp-inline .mp-info { flex: 1; max-width: none; }
@media (max-width: 560px) {
  .mp-player { right: 12px; bottom: 12px; padding: 8px 12px 8px 8px; }
  .mp-info { min-width: 88px; max-width: 120px; }
  .mp-cover { width: 44px; height: 44px; }
}