#pub-player {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%) translateY(90px);
  z-index: 400; width: min(680px, 94vw);
  display: flex; align-items: center; gap: 12px;
  background: rgba(16,10,30,.96);
  border: 1px solid rgba(168,85,247,.35);
  border-radius: 100px; padding: 9px 18px 9px 10px;
  box-shadow: 0 18px 60px rgba(0,0,0,.7);
  backdrop-filter: blur(20px);
  transition: transform .35s cubic-bezier(.34,1.3,.64,1);
}
#pub-player.visible { transform: translateX(-50%) translateY(0); }
#pub-cover, #pub-cover-ph {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  background: linear-gradient(135deg,#3b0764,#7C3AED);
  display: flex; align-items: center; justify-content: center;
}
#pub-player.playing #pub-cover { animation: pubspin 9s linear infinite; }
@keyframes pubspin { to { transform: rotate(360deg); } }
.pub-meta { min-width: 0; width: 150px; flex-shrink: 1; }
#pub-title  { font-size: 12.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#pub-artist { font-size: 10.5px; color: rgba(255,255,255,.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-btn {
  background: none; border: none; cursor: pointer; color: rgba(255,255,255,.7);
  display: flex; padding: 4px; flex-shrink: 0; transition: color .15s, transform .15s;
}
.pub-btn svg { width: 16px; height: 16px; }
.pub-btn:hover { color: #fff; transform: scale(1.1); }
.pub-play {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg,#A855F7,#EC4899);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(168,85,247,.5);
}
.pub-play svg { width: 15px; height: 15px; fill: #fff; }
.pub-prog {
  flex: 1; height: 4px; border-radius: 3px;
  background: rgba(255,255,255,.12); cursor: pointer; min-width: 60px;
}
.pub-fill { height: 100%; width: 0%; border-radius: 3px; background: linear-gradient(90deg,#A855F7,#EC4899); }
.pub-time { font-size: 10.5px; color: rgba(255,255,255,.45); flex-shrink: 0; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pub-meta { width: 90px; } }