/* Neon Glass Player V2 – Live (Play + Stop) */
.rrp{
  --bg-a:#12163a; --bg-b:#0c1030;
  --text:#e8f7ff; --muted:#a4abd1;
  --n1:#ff4fd8; --n2:#35ffe2;
  --radius:18px;
  color:var(--text);
  position:relative;
  padding:18px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(19,25,55,.65), rgba(9,13,36,.65));
  border:1px solid rgba(162,171,255,.08);
  box-shadow: 0 20px 40px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04);
}
.rrp::before{
  content:""; position:absolute; inset:-8px; border-radius:calc(var(--radius) + 8px);
  background:
    radial-gradient(120px 60px at 20% -10%, rgba(53,255,226,.08), transparent 70%),
    radial-gradient(160px 80px at 90% 120%, rgba(255,79,216,.08), transparent 70%);
  filter: blur(10px);
  z-index:-1;
}
.rrp__row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rrp__top{justify-content:space-between;padding-bottom:8px}
.rrp__left{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.rrp__dot{width:10px;height:10px;border-radius:50%;background:var(--n2);box-shadow:0 0 10px var(--n2),0 0 24px rgba(53,255,226,.55)}
.rrp__now{color:var(--muted);font-weight:600}
.rrp__controls{justify-content:flex-start}
.rrp__spacer{flex:1 1 auto}

/* Buttons */
.rrp__btn{
  --size:44px;
  width:var(--size); height:var(--size);
  display:grid; place-items:center;
  border:0; cursor:pointer; border-radius:14px; color:#e9f6ff;
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  box-shadow:0 0 0 1px rgba(255,255,255,.06), 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.06);
  transition:transform .15s ease, box-shadow .2s ease;
}
.rrp__btn:hover{ transform:translateY(-1px) }
.rrp__play{ outline:1px solid rgba(53,255,226,.35); box-shadow:0 0 0 1px rgba(53,255,226,.25),0 8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06),0 0 22px rgba(53,255,226,.18) }
.rrp__btn--ghost{ outline:1px solid rgba(255,79,216,.25); box-shadow:0 0 0 1px rgba(255,79,216,.18),0 8px 18px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.06),0 0 18px rgba(255,79,216,.12) }

/* Volume slider right-aligned */
.rrp__range{-webkit-appearance:none;appearance:none;width:280px;max-width:45vw;height:6px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.08),rgba(255,255,255,.06));outline:none;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
.rrp__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 35%, var(--n1) 36% 100%);border:2px solid #fff;box-shadow:0 0 10px rgba(255,79,216,.55),0 0 20px rgba(255,79,216,.35),0 2px 8px rgba(0,0,0,.45)}
.rrp__range::-moz-range-thumb{width:18px;height:18px;border:none;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 35%, var(--n1) 36% 100%);box-shadow:0 0 10px rgba(255,79,216,.55),0 0 20px rgba(255,79,216,.35),0 2px 8px rgba(0,0,0,.45)}

@media (max-width:640px){
  .rrp__range{max-width:100%;width:100%}
  .rrp__now{flex:1 1 100%}
}