:root{
  --volt-yellow:#0067FF;
  --volt-black:#0B0B0B;
  --volt-ink:#121212;
  --volt-muted:#9AA0A6;
  --volt-line:rgba(255,255,255,.14);
  --volt-player-h:76px;
}

/* ============ PERSISTENT PLAYER ============ */
.volt-player{
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:100000;
  background:rgba(11,11,11,.97);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-top:1px solid var(--volt-line);
  box-shadow:0 -8px 32px rgba(0,0,0,.45);
  transform:translateZ(0);
  contain:layout paint;
}

.volt-player__bar{
  height:var(--volt-player-h);
  max-width:1320px;
  margin:0 auto;
  padding:0 18px;
  display:flex;
  align-items:center;
  gap:14px;
}

.volt-player__play{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:50%;
  border:0;
  background:var(--volt-yellow);
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
  transition:transform .15s ease, background .15s ease;
}
.volt-player__play:hover{ transform:scale(1.06); }
.volt-player__play:active{ transform:scale(.97); }
.volt-player__play svg{ width:20px; height:20px; display:block; }
.volt-player__play[data-state="loading"]{ background:#0052CC; }
.volt-player__play[data-state="loading"] .icon-play,
.volt-player__play[data-state="loading"] .icon-pause{ display:none; }
.volt-player__play[data-state="playing"] .icon-play{ display:none; }
.volt-player__play[data-state="paused"] .icon-pause{ display:none; }
.volt-player__play[data-state="loading"]::after{
  content:"";
  width:18px;height:18px;
  border:2px solid rgba(0,0,0,.25);
  border-top-color:#fff;
  border-radius:50%;
  animation:volt-spin .7s linear infinite;
}
@keyframes volt-spin{ to{ transform:rotate(360deg); } }

.volt-player__meta{ min-width:0; flex:1 1 auto; display:flex; align-items:center; gap:10px; }
.volt-player__live{
  flex:0 0 auto;
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#FF4D4D;
  border:1px solid rgba(255,77,77,.45);
  background:rgba(255,77,77,.10);
  padding:5px 8px;
  border-radius:4px;
  display:inline-flex; align-items:center; gap:5px;
}
.volt-player__live::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:#FF4D4D;
  animation:volt-pulse 1.8s ease-in-out infinite;
}
@keyframes volt-pulse{ 0%,100%{opacity:1} 50%{opacity:.35} }

.volt-player__text{ min-width:0; }
.volt-player__station{
  font:800 11px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--volt-yellow);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.volt-player__now{
  font:600 14px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#fff;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.volt-player__now[data-idle="true"]{ color:var(--volt-muted); font-weight:500; }

.volt-player__controls{ flex:0 0 auto; display:flex; align-items:center; gap:6px; }

.volt-player__vol{
  display:flex; align-items:center; gap:8px;
  padding-right:4px;
}
.volt-player__vol input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:92px; height:4px; border-radius:2px;
  background:rgba(255,255,255,.22);
  outline:none; cursor:pointer;
}
.volt-player__vol input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:var(--volt-yellow);
  border:0;
}
.volt-player__vol input[type="range"]::-moz-range-thumb{
  width:13px;height:13px;border:0;border-radius:50%;
  background:var(--volt-yellow);
}
.volt-player__mute,
.volt-player__expand{
  width:38px;height:38px;
  border-radius:8px;
  border:1px solid transparent;
  background:transparent;
  color:#fff;
  display:grid; place-items:center;
  cursor:pointer;
}
.volt-player__mute:hover,
.volt-player__expand:hover{ background:rgba(255,255,255,.08); border-color:var(--volt-line); }
.volt-player__mute svg,.volt-player__expand svg{ width:19px;height:19px; }
.volt-player__mute[data-muted="true"] .icon-vol-on{ display:none; }
.volt-player__mute[data-muted="false"] .icon-vol-off{ display:none; }
.volt-player__expand svg{ transition:transform .2s ease; }
.volt-player__expand[aria-expanded="true"] svg{ transform:rotate(180deg); }

/* expanded panel */
.volt-player__panel{
  max-width:1320px;
  margin:0 auto;
  padding:0 18px;
  overflow:hidden;
  max-height:0;
  transition:max-height .28s ease;
}
.volt-player[data-expanded="true"] .volt-player__panel{ max-height:220px; }
.volt-player__panel-inner{
  border-top:1px solid var(--volt-line);
  padding:16px 0 18px;
  display:flex; gap:18px; align-items:center;
}
.volt-player__art{
  width:84px;height:84px;border-radius:10px;
  background:#1b1b1b center/cover no-repeat;
  flex:0 0 auto;
  border:1px solid var(--volt-line);
}
.volt-player__detail{ min-width:0; flex:1 1 auto; }
.volt-player__detail h4{
  margin:0 0 4px;
  font:800 17px/1.3 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#fff;
}
.volt-player__detail p{
  margin:0 0 10px;
  font:400 13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--volt-muted);
}
.volt-player__actions{ display:flex; gap:8px; flex-wrap:wrap; }
.volt-player__actions a,
.volt-player__actions button{
  font:700 11px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
  padding:9px 13px; border-radius:6px;
  border:1px solid var(--volt-line);
  background:rgba(255,255,255,.06);
  color:#fff; cursor:pointer;
}
.volt-player__actions a:hover,
.volt-player__actions button:hover{ background:rgba(255,255,255,.14); }

/* status / error strip */
.volt-player__status{
  display:none;
  max-width:1320px; margin:0 auto;
  padding:0 18px 10px;
  font:600 12px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:#FFB020;
}
.volt-player[data-error="true"] .volt-player__status{ display:block; }
.volt-player__status button{
  margin-left:8px;
  background:transparent;border:1px solid rgba(255,176,32,.5);
  color:#FFB020;border-radius:4px;padding:3px 8px;
  font:700 11px/1 inherit; cursor:pointer;
}

/* mobile */
@media (max-width:720px){
  :root{ --volt-player-h:64px; }
  .volt-player__bar{ padding:0 12px; gap:10px; }
  .volt-player__play{ width:40px;height:40px; }
  .volt-player__play svg{ width:17px;height:17px; }
  .volt-player__vol{ display:none; }
  .volt-player__station{ font-size:10px; }
  .volt-player__now{ font-size:12.5px; }
  .volt-player__mute{ display:none; }
  .volt-player__panel-inner{ padding:12px 0 14px; gap:12px; }
  .volt-player__art{ width:56px;height:56px; }
  .volt-player__detail h4{ font-size:15px; }
  .volt-player__detail p{ font-size:12px; }
}

/* keep page content clear of the dock */
body{ padding-bottom:calc(var(--volt-player-h) + env(safe-area-inset-bottom,0px)); }