/* 🎵 迷你音乐播放器 - 恋爱主题 */
:root{
  --glass:rgba(255,255,255,0.92);--glass-border:rgba(255,179,198,0.35);
  --accent:#ff6b8a;--text:#4a3347;--text3:#8b6b7d;
  --glass-border-hover:rgba(255,107,138,0.5)
}
[data-theme="blue"]{
  --glass:rgba(240,244,255,0.92);--glass-border:rgba(168,196,255,0.35);
  --accent:#5b8def;--text:#2c3e5a;--text3:#6b82a6;
  --glass-border-hover:rgba(91,141,239,0.5)
}

.mini-player{
  position:fixed;bottom:20px;right:20px;z-index:999;
  display:flex;align-items:center;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-radius:50px;padding:6px 8px 6px 6px;
  box-shadow:0 4px 24px rgba(0,0,0,0.12);
  transition:all .35s cubic-bezier(.4,0,.2,1);
  max-width:360px;opacity:0;transform:translateY(16px) scale(.96);pointer-events:none
}
.mini-player.active{opacity:1;transform:translateY(0) scale(1);pointer-events:all}
.mini-player:hover{box-shadow:0 8px 32px rgba(0,0,0,0.18);border-color:var(--glass-border-hover)}

/* 播放按钮 - 圆润好看 */
.mp-play{
  width:40px;height:40px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--accent),rgba(199,125,186,0.9));
  color:#fff;font-size:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:all .25s;box-shadow:0 2px 8px rgba(255,107,138,0.35);position:relative
}
.mp-play::before{
  content:'';display:block;
  width:0;height:0;
  border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;
  margin-left:2px;transition:all .2s
}
.mp-play.playing::before{
  width:3px;height:12px;border:none;
  background:#fff;border-radius:1px;
  box-shadow:5px 0 0 #fff
}
.mp-play:hover{transform:scale(1.08);box-shadow:0 4px 14px rgba(255,107,138,0.5)}
.mp-play:active{transform:scale(.95)}

/* 上/下一首 */
.mp-prev,.mp-next{
  width:28px;height:28px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .2s;border-radius:50%
}
.mp-prev:hover,.mp-next:hover{color:var(--accent);background:rgba(255,107,138,0.08)}

/* 歌曲信息 */
.mp-info{padding:0 10px;overflow:hidden;flex:1;min-width:0}
.mp-title{
  font-size:13px;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.3px;line-height:1.4
}
.mp-time{font-size:10px;color:var(--text3);margin-top:1px;font-variant-numeric:tabular-nums}

/* 进度条 */
.mp-bar{width:60px;height:3px;background:rgba(128,128,128,0.12);border-radius:3px;cursor:pointer;flex-shrink:0;position:relative;overflow:hidden;margin:0 2px}
.mp-bar-fill{height:100%;border-radius:3px;background:var(--accent);width:0;transition:width .3s linear}

/* 关闭 */
.mp-close{
  width:22px;height:22px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;font-size:11px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;margin-left:2px;flex-shrink:0;transition:all .2s
}
.mp-close:hover{color:var(--text);background:rgba(0,0,0,0.06)}

/* 音频可视化小条 */
.mp-visualizer{display:flex;align-items:flex-end;gap:1.5px;height:16px;margin-left:4px;flex-shrink:0}
.mp-visualizer span{width:2.5px;background:var(--accent);border-radius:2px;transition:height .15s}
.mp-visualizer.playing span{animation:vbar .5s ease infinite alternate}
@keyframes vbar{0%{height:3px}100%{height:14px}}

/* 播放列表按钮 */
.mp-list-btn{
  width:28px;height:28px;border:none;background:transparent;
  color:var(--text3);cursor:pointer;font-size:13px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  transition:color .2s;border-radius:50%
}
.mp-list-btn:hover{color:var(--accent);background:rgba(255,107,138,0.08)}

/* 播放列表弹窗 */
.mp-list{
  position:absolute;bottom:calc(100% + 8px);right:0;
  background:var(--glass);border:1px solid var(--glass-border);
  backdrop-filter:blur(24px);border-radius:14px;
  padding:6px;min-width:200px;max-height:220px;overflow-y:auto;
  box-shadow:0 8px 32px rgba(0,0,0,0.15)
}
.mp-list-header{
  font-size:10px;color:var(--text3);padding:6px 10px 4px;
  text-transform:uppercase;letter-spacing:1px;font-weight:600
}
.mp-list-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:all .15s}
.mp-list-item:hover{background:rgba(128,128,128,0.1)}
.mp-list-item.on{background:linear-gradient(135deg,var(--accent),rgba(199,125,186,0.8));color:#fff}
.mp-list-item.on .mp-list-artist,.mp-list-item.on .mp-list-title{color:#fff}
.mp-list-num{width:18px;font-size:10px;color:var(--text3);text-align:center;flex-shrink:0;font-weight:500}
.mp-list-item.on .mp-list-num{color:rgba(255,255,255,0.7)}
.mp-list-info{overflow:hidden;flex:1;min-width:0}
.mp-list-title{font-size:12px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.mp-list-artist{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 手机适配 */
@media(max-width:680px){
  .mini-player{bottom:14px;right:14px;left:14px;max-width:none;border-radius:16px;padding:8px 10px 8px 8px}
  .mp-bar{width:40px}
  .mp-title{font-size:12px}
}