.wprp-player{
  --wprp-primary:#0ea5e9;
  --wprp-bg:#0b1220;
  --wprp-title-size:18px;
  --wprp-primary-soft:var(--wprp-primary);
  --wprp-primary-glow:rgba(14,165,233,.45);
  --wprp-border:rgba(255,255,255,.10);
  position:relative;
  display:grid;
  gap:.85rem;
  padding:1.1rem 1.25rem;
  border-radius:1.25rem;
  background:
    linear-gradient(155deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%),
    var(--wprp-bg) center/cover no-repeat;
  border:1px solid var(--wprp-border);
  color:#fff;
  max-width:980px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 20px 45px -15px rgba(0,0,0,.45);
  overflow:hidden;
  isolation:isolate;
}
.wprp-player::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120% 140% at 0% 0%, var(--wprp-primary-glow), transparent 60%);
  opacity:.18;
  pointer-events:none;
  z-index:0;
}
@supports (color: color-mix(in srgb, red, blue)){
  .wprp-player{
    --wprp-primary-glow:color-mix(in srgb, var(--wprp-primary) 55%, transparent);
    --wprp-border:color-mix(in srgb, var(--wprp-primary) 22%, rgba(255,255,255,.08));
  }
}

.wprp-info{position:relative;z-index:1;display:flex;align-items:center;gap:.85rem}
.wprp-logo{
  width:52px;height:52px;object-fit:cover;border-radius:50%;
  border:2px solid var(--wprp-primary);
  box-shadow:0 0 0 4px rgba(255,255,255,.06);
  flex-shrink:0;
}
.wprp-info-text{display:grid;gap:.15rem;min-width:0}
.wprp-eyebrow{
  display:flex;align-items:center;gap:.4rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.wprp-live-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.35);
  box-shadow:0 0 0 0 rgba(255,255,255,0);
  transition:background-color .25s ease;
}
.wprp-player.is-playing .wprp-live-dot{
  background:#ff4d4f;
  animation:wprp-pulse 1.6s ease-out infinite;
}
.wprp-title{
  font-weight:700;
  font-size:var(--wprp-title-size,18px);
  line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.wprp-onair-banner{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:.5rem;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  border-left:3px solid var(--wprp-primary);
  padding:.5rem .75rem;
  border-radius:.6rem;
  font-size:.9rem;
  line-height:1.35;
}

.wprp-controls{
  position:relative;z-index:1;
  display:grid;grid-template-columns:auto auto 1fr auto;
  align-items:center;gap:.75rem;
}
.wprp-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;
  background:linear-gradient(155deg, var(--wprp-primary), var(--wprp-primary));
  border:0;color:#fff;border-radius:50%;cursor:pointer;
  box-shadow:0 6px 18px -4px var(--wprp-primary-glow), 0 0 0 1px rgba(255,255,255,.08) inset;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.wprp-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.wprp-btn:active{transform:translateY(0) scale(.94)}
.wprp-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.wprp-btn[hidden]{display:none}
.wprp-icon{display:block;margin:0 auto}

.wprp-volume{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:999px;
  background:rgba(255,255,255,.2);
  outline:none;cursor:pointer;
}
.wprp-volume::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:14px;height:14px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 3px var(--wprp-primary-glow);
  cursor:pointer;transition:box-shadow .15s ease;
}
.wprp-volume::-moz-range-thumb{
  width:14px;height:14px;border-radius:50%;border:0;
  background:#fff;box-shadow:0 0 0 3px var(--wprp-primary-glow);
  cursor:pointer;
}
.wprp-volume::-webkit-slider-runnable-track{background:transparent}
.wprp-volume::-moz-range-track{background:transparent}

.wprp-status-wrap{display:flex;align-items:center;gap:.55rem;justify-self:end;min-width:0}
.wprp-status{font-size:.85rem;opacity:.75;white-space:nowrap}
.wprp-player.is-loading .wprp-status{
  animation:wprp-fade 1.1s ease-in-out infinite;
}

.wprp-eq{display:none;align-items:flex-end;gap:2px;height:16px}
.wprp-player.is-playing .wprp-eq{display:flex}
.wprp-eq span{
  width:3px;border-radius:2px;
  background:var(--wprp-primary);
  animation:wprp-eq 1s ease-in-out infinite;
}
.wprp-eq span:nth-child(1){animation-delay:-.9s}
.wprp-eq span:nth-child(2){animation-delay:-.6s}
.wprp-eq span:nth-child(3){animation-delay:-.3s}
.wprp-eq span:nth-child(4){animation-delay:0s}

@keyframes wprp-eq{
  0%,100%{height:4px}
  50%{height:16px}
}
@keyframes wprp-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,77,79,.55)}
  100%{box-shadow:0 0 0 8px rgba(255,77,79,0)}
}
@keyframes wprp-fade{
  0%,100%{opacity:.45}
  50%{opacity:.9}
}
@media (prefers-reduced-motion: reduce){
  .wprp-live-dot,.wprp-eq span,.wprp-status{animation:none!important}
}

@media(max-width:520px){
  .wprp-controls{grid-template-columns:auto auto 1fr;grid-auto-flow:row}
  .wprp-status-wrap{grid-column:1 / -1;justify-self:start}
}