:root{
  --pb-accent:#111111;
  --pb-border:rgba(0,0,0,.08);
  --pb-wave:rgba(0,0,0,.55);
  --pb-bg:linear-gradient(135deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
  --pb-radius:18px;
}

.pb-player{width:100%; margin:18px 0; font-family:inherit;}
.pb-card{
  width:100%;
  border-radius:var(--pb-radius);
  border:1px solid var(--pb-border);
  background: var(--pb-bg);
  padding:14px;
  display:flex;
  gap:14px;
  align-items:center;
  box-sizing:border-box;
}

.pb-left{min-width:110px; display:flex; justify-content:center;}
.pb-cover-wrap{position:relative; width:86px; height:86px; display:grid; place-items:center;}
.pb-cover-wrap::before,
.pb-cover-wrap::after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  border:2px solid color-mix(in srgb, var(--pb-wave) 55%, transparent);
  opacity:.35;
  transform:scale(.90);
  pointer-events:none;
}
.pb-cover-wrap::after{
  inset:-12px;
  opacity:.18;
  transform:scale(.82);
  pointer-events:none;
}
.pb-playing .pb-cover-wrap::before{animation: pbRing 1.2s ease-in-out infinite;}
.pb-playing .pb-cover-wrap::after{animation: pbRing 1.6s ease-in-out infinite;}
@keyframes pbRing{
  0%{transform:scale(.86); opacity:.12}
  60%{transform:scale(1.05); opacity:.35}
  100%{transform:scale(1.12); opacity:0}
}

.pb-cover{
  width:76px; height:76px; border-radius:999px; overflow:hidden;
  border:1px solid rgba(0,0,0,.10);
  background:#f1f1f1;
  position:relative;
  z-index:1;
}
.pb-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.pb-cover-fallback{width:100%; height:100%; background: radial-gradient(circle at 30% 30%, rgba(0,0,0,.10), rgba(0,0,0,.02));}

.pb-btn{
  appearance:none; border:none; cursor:pointer;
  border-radius:999px;
  width:52px; height:52px;
  background:var(--pb-accent);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
  position:absolute;
  right:-10px;
  bottom:-10px;
  z-index:3;
  touch-action:manipulation;
}

.pb-icon{display:block; width:0; height:0;}
.pb-icon-play{
  border-style:solid;
  border-width:10px 0 10px 16px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}
.pb-playing .pb-icon-play{
  width:16px; height:18px; margin-left:0;
  border:none;
  background:
    linear-gradient(#fff,#fff) left/5px 100% no-repeat,
    linear-gradient(#fff,#fff) right/5px 100% no-repeat;
}

.pb-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px;}
.pb-title{font-weight:700; font-size:16px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.pb-controls{display:flex; align-items:center; gap:10px;}
.pb-time{font-size:12px; opacity:.75; min-width:44px; text-align:center;}
.pb-seek{flex:1; width:100%; accent-color: var(--pb-accent);}

.pb-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.pb-bg-label{display:flex; align-items:center; gap:8px; font-size:12px; opacity:.95; flex:1; min-width:240px;}
.pb-bg-select{
  width:100%;
  min-width:220px;
  border-radius:10px;
  padding:8px 10px;
  border:1px solid color-mix(in srgb, var(--pb-border) 80%, transparent);
  background: color-mix(in srgb, #fff 85%, transparent);
}

.pb-vol{display:flex; align-items:center; gap:10px; min-width:190px;}
.pb-vol-icon{width:16px; height:16px; opacity:.75;
  background: radial-gradient(circle at 25% 50%, rgba(0,0,0,.7) 28%, transparent 29%) 0 0/100% 100% no-repeat;
}
.pb-volume{width:150px;}

.pb-player input[type="range"]{-webkit-appearance:none; appearance:none; height:28px; background:transparent;}
.pb-player input[type="range"]::-webkit-slider-runnable-track{height:6px; border-radius:999px; background: color-mix(in srgb, var(--pb-border) 75%, transparent);}
.pb-player input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:16px; height:16px; border-radius:999px; background: var(--pb-accent); margin-top:-5px; box-shadow:0 4px 10px rgba(0,0,0,.18);}
.pb-player input[type="range"]::-moz-range-track{height:6px; border-radius:999px; background: color-mix(in srgb, var(--pb-border) 75%, transparent);}
.pb-player input[type="range"]::-moz-range-thumb{width:16px; height:16px; border:none; border-radius:999px; background: var(--pb-accent); box-shadow:0 4px 10px rgba(0,0,0,.18);}

@media (max-width:680px){
  .pb-card{flex-direction:column; align-items:center; text-align:center;}
  .pb-left{min-width:unset; width:100%; justify-content:center;}
  .pb-main{width:100%; align-items:center;}
  .pb-title{text-align:center; white-space:normal;}
  .pb-controls{width:100%;}
  .pb-seek{width:100%;}
  .pb-bottom{width:100%;}
  .pb-bg-label{min-width:unset;}
  .pb-vol{width:100%; min-width:unset;}
  .pb-volume{width:100%;}
  .pb-btn{right:-6px; bottom:-10px;}
}

/* mini draggable circle */


/* ---------- mini player (pill) - ultra reliable ---------- */
.pb-mini{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:18px;
  z-index:9999999;
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.92);
  box-shadow:0 16px 40px rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
}
.pb-mini.pb-show{display:flex;}

.pb-mini .pb-mini-cover{
  width:44px;height:44px;border-radius:999px;overflow:hidden;
  border:1px solid rgba(0,0,0,.12);
  background:#f1f1f1;
  flex:0 0 auto;
}
.pb-mini .pb-mini-cover img{width:100%;height:100%;object-fit:cover;display:block;}

.pb-mini button{
  appearance:none;border:none;cursor:pointer;
  touch-action:manipulation;
}

.pb-mini .pb-mini-toggle{
  width:44px;height:44px;border-radius:999px;
  background:var(--pb-accent, #111);
  display:grid;place-items:center;
  box-shadow:0 10px 26px rgba(0,0,0,.18);
}
.pb-mini .pb-mini-icon{
  width:0;height:0;
  border-style:solid;
  border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent #fff;
  margin-left:2px;
}
.pb-mini.pb-playing .pb-mini-icon{
  width:14px;height:16px;margin-left:0;
  border:none;
  background:
    linear-gradient(#fff,#fff) left/4px 100% no-repeat,
    linear-gradient(#fff,#fff) right/4px 100% no-repeat;
}

.pb-mini .pb-mini-close{
  width:30px;height:30px;border-radius:999px;
  background:#e11d48;color:#fff;
  display:grid;place-items:center;
  font-size:18px;line-height:1;
  box-shadow:0 10px 20px rgba(0,0,0,.18);
}
.pb-mini .pb-mini-close:before{content:"×";}

@media (max-width:520px){
  .pb-mini{
    left:12px; right:12px;
    transform:none;
    justify-content:space-between;
    border-radius:18px;
  }
}