/* 学习站 · 背景音乐胶囊样式 */
.music-pill{
  position:fixed;left:26px;bottom:26px;z-index:60;
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:999px;padding:8px 14px;
  box-shadow:0 4px 20px rgba(0,0,0,.12);
  backdrop-filter:blur(10px);
  transition:all .25s ease;
}
.music-pill.fxp-red{border-color:#e7cdd3}
.mp-btn{
  border:none;background:none;cursor:pointer;
  width:30px;height:30px;border-radius:50%;
  font-size:13px;color:var(--green);
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;
}
.mp-btn:hover{background:var(--green-soft);transform:scale(1.1)}
.music-pill.fxp-red .mp-btn{color:#B3455C}
.music-pill.fxp-red .mp-btn:hover{background:#F7E7EA}
.mp-name{
  font-size:12px;color:var(--sub);
  max-width:110px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:.5px;
}
.music-pill.on .mp-name{color:var(--green);font-weight:500}
.music-pill.fxp-red.on .mp-name{color:#B3455C}
.mp-vol{
  width:64px;height:4px;accent-color:var(--green);
  cursor:pointer;
}
.music-pill.fxp-red .mp-vol{accent-color:#B3455C}
/* 播放中呼吸效果 */
.music-pill.on{box-shadow:0 4px 24px rgba(30,92,79,.25)}
.music-pill.fxp-red.on{box-shadow:0 4px 24px rgba(179,69,92,.25)}
@media (max-width:600px){
  .music-pill{left:14px;bottom:14px;padding:6px 10px}
  .mp-name{display:none}
  .mp-vol{width:48px}
}