#player{
  position:fixed; left:50%; transform:translateX(-50%); bottom:18px;
  width:min(760px, calc(100% - 28px)); z-index:9999;
  display:flex; align-items:center; gap:14px;
  padding:10px 14px; border-radius:16px;
  background:rgba(12,17,20,.62); backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  transition:opacity .45s ease, transform .45s ease;
  font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}
body.idle #player{opacity:0; transform:translateX(-50%) translateY(14px); pointer-events:none}
.pl-ico{
  flex:0 0 auto; width:38px; height:38px; border-radius:11px; cursor:pointer;
  display:grid; place-items:center; color:#f0f6f7;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12);
  transition:background .2s ease, transform .2s ease;
}
.pl-ico:hover{background:rgba(255,255,255,.16); transform:translateY(-1px)}
#pl-bar{
  position:relative; flex:1 1 auto; height:26px; cursor:pointer; touch-action:none;
  display:flex; align-items:center;
}
#pl-track{position:absolute; inset-inline:0; height:5px; border-radius:99px; background:rgba(255,255,255,.16)}
#pl-fill{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  height:5px; border-radius:99px; width:0;
  background:linear-gradient(90deg,#e8b472,#f0a35e);
  box-shadow:0 0 14px rgba(240,163,94,.55);
}
#pl-fill::after{
  content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%);
  width:11px; height:11px; border-radius:50%; background:#fff2df;
  box-shadow:0 0 10px rgba(240,163,94,.8);
}
#pl-time{
  flex:0 0 auto; font-size:12.5px; letter-spacing:.04em; color:#b9cdd1;
  font-variant-numeric:tabular-nums; direction:ltr;
}
@media (max-width:520px){
  #player{gap:9px; padding:8px 10px; bottom:10px}
  #pl-time{display:none}
}
a.pl-ico{text-decoration:none}