:root{
  --rp-bg:#2b0a1a;
  --rp-border:#5a1b36;
  --rp-accent:#ff2d78;
  --rp-text:#ffffff;
}

#radio-slot{ width:100%; }

.rp{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px;
  border-radius:16px;
  border:1px solid var(--rp-border);
  background:
    radial-gradient(1200px 120px at 10% 0%, rgba(255,45,120,.20), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.18)),
    var(--rp-bg);
  color: var(--rp-text);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
  min-height:70px;
}

.rp *{ box-sizing:border-box; }

.rp-left{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 220px;
  flex: 1;
  overflow:hidden;
}

.rp-btn{
  height:42px;
  min-width:42px;
  padding:0 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  color: var(--rp-text);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
  user-select:none;
  white-space:nowrap;
}
.rp-btn.icon{ width:42px; padding:0; }
.rp-btn:active{ transform: scale(.98); }
.rp-btn:hover{ border-color: rgba(255,255,255,.22); background: rgba(0,0,0,.34); }

.rp-title{
  display:flex;
  flex-direction:column;
  line-height:1.08;
  overflow:hidden;
}
.rp-title strong{
  font-size:13px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rp-title span{
  font-size:11px;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rp-eq{
  display:flex;
  align-items:flex-end;
  gap:3px;
  width:46px;
  height:22px;
  padding:2px 0;
  opacity:.9;
}
.rp-eq i{
  display:block;
  width:4px;
  height:6px;
  border-radius:4px;
  background: rgba(255,255,255,.35);
  transform-origin: bottom;
}
.rp.playing .rp-eq i{
  background: var(--rp-accent);
  animation: rpEq 0.9s ease-in-out infinite;
}
.rp.playing .rp-eq i:nth-child(2){ animation-duration: 0.8s; }
.rp.playing .rp-eq i:nth-child(3){ animation-duration: 1.05s; }
.rp.playing .rp-eq i:nth-child(4){ animation-duration: 0.75s; }
.rp.playing .rp-eq i:nth-child(5){ animation-duration: 0.95s; }

@keyframes rpEq{
  0%{ transform: scaleY(.35); }
  50%{ transform: scaleY(1.7); }
  100%{ transform: scaleY(.45); }
}

.rp-mid{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex: 0 0 auto;
}

.rp-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  font-size:12px;
  white-space:nowrap;
}

.rp-vol{
  display:flex;
  align-items:center;
  gap:8px;
}
.rp-vol label{
  font-size:12px;
  opacity:.85;
}
.rp-vol input[type="range"]{
  width:160px;
  accent-color: var(--rp-accent);
}
.rp-vol .rp-num{
  font-size:12px;
  opacity:.9;
  min-width:44px;
  text-align:right;
}

.rp-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  flex: 0 0 auto;
}

.rp-cta{
  display:none;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.20);
  background: rgba(0,0,0,.30);
  color: var(--rp-text);
  padding:10px 12px;
  border-radius:14px;
  font-size:12px;
}
.rp.needs-gesture .rp-cta{ display:inline-flex; }

@media(max-width: 720px){
  .rp{ width:100%; }

  .rp{
    flex-wrap:wrap;
    gap:10px;
    padding:12px 12px;
  }
  .rp-left{ width:100%; min-width:0; }
  .rp-mid{ width:100%; justify-content:space-between; }
  .rp-right{ width:100%; justify-content:space-between; }
  .rp-vol input[type="range"]{ width: 55vw; max-width: 320px; }
}

/* RADIO: mobile no overflow, desktop-like layout */
@media(max-width: 520px){
  .rp{ max-width:100%; }
  .rp-left{ min-width:0; }
  .rp-mid{ width:100%; }
  .rp-right{ width:100%; }
  .rp-vol{ width:100%; }
  .rp-vol input[type="range"]{ flex:1; width:auto; min-width:0; }
  .rp-num{ min-width:36px; }
  /* tighter buttons so it fits all phones */
  .rp-btn{ height:40px; }
  .rp-btn.icon{ min-width:40px; width:40px; }
}