#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(12,12,12,.96);
  border: 1px solid rgba(230,46,45,.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,#2A0000,#C81E1E);
  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: #E62E2D;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 18px rgba(230,46,45,.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: #E62E2D; }
.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; } }

/* Compact mobile public player: controls on one row, progress below. */
@media(max-width:600px){
#pub-player{box-sizing:border-box;width:calc(100% - 24px);max-width:560px;bottom:calc(12px + env(safe-area-inset-bottom));border-radius:18px;padding:10px 12px;display:grid;grid-template-columns:40px minmax(0,1fr) 28px 40px 28px;gap:8px;align-items:center}
#pub-player #pub-cover,#pub-player #pub-cover-ph{grid-column:1;grid-row:1;width:40px;height:40px;border-radius:10px;animation:none}
#pub-player .pub-meta{grid-column:2;grid-row:1;width:auto;min-width:0}
#pub-player #pub-prev{grid-column:3;grid-row:1}#pub-player #pub-play{grid-column:4;grid-row:1;width:40px;height:40px;padding:0}#pub-player #pub-next{grid-column:5;grid-row:1}
#pub-player .pub-btn{justify-content:center;align-items:center;min-height:32px;padding:4px}#pub-player .pub-btn svg{width:17px;height:17px;flex:none}
#pub-player .pub-prog{grid-column:1/-1;grid-row:2;width:100%;min-width:0;height:3px;margin:2px 0}
#pub-player .pub-time{display:none}#pub-player>.seven-play-status{grid-column:1/-1;grid-row:3;min-width:0;max-width:100%;margin:0!important;padding:2px 0!important}
#pub-player #pub-title{font-size:12px}#pub-player #pub-artist{font-size:10px}
body.wl:has(#pub-player.visible){padding-bottom:150px}
}