/* Bradford Radio — Listener Player CSS v2 */
:root {
  --bg:      #080816;
  --card:    rgba(255,255,255,.05);
  --border:  rgba(255,255,255,.08);
  --border2: rgba(255,255,255,.14);
  --accent:  #e94560;
  --cyan:    #22d3ee;
  --gold:    #fbbf24;
  --text:    #e2e8f0;
  --muted:   rgba(255,255,255,.4);
  --radius:  18px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;display:flex;flex-direction:column;
  overflow-x:hidden;
}

/* ---- BACKGROUND GLOWS ---- */
.bg-glow{
  position:fixed;border-radius:50%;
  filter:blur(120px);pointer-events:none;z-index:0;opacity:.18;
}
.g1{width:500px;height:500px;background:#e94560;top:-200px;right:-150px;animation:drift1 14s ease-in-out infinite}
.g2{width:400px;height:400px;background:#22d3ee;bottom:-150px;left:-100px;animation:drift2 18s ease-in-out infinite}
.g3{width:300px;height:300px;background:#a78bfa;top:40%;left:40%;animation:drift3 22s ease-in-out infinite;opacity:.1}
@keyframes drift1{0%,100%{transform:translate(0,0)}50%{transform:translate(-40px,30px)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}50%{transform:translate(30px,-25px)}}
@keyframes drift3{0%,100%{transform:translate(0,0)}50%{transform:translate(-20px,40px)}}

/* ---- HEADER ---- */
.site-header{
  position:relative;z-index:10;
  background:rgba(8,8,22,.7);
  backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
  padding:.9rem 1.5rem;
}
.header-inner{
  max-width:680px;margin:0 auto;
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
}
.station-brand{display:flex;align-items:center;gap:.85rem;flex:1}
.logo-wrap{
  position:relative;width:52px;height:52px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.logo-ico{font-size:1.6rem;color:var(--accent);position:relative;z-index:2}
.logo-rings{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.lr{
  position:absolute;border-radius:50%;
  border:1.5px solid rgba(233,69,96,.5);
  animation:rings 3s linear infinite;
}
.lr1{width:36px;height:36px;animation-delay:0s}
.lr2{width:48px;height:48px;animation-delay:1s}
.lr3{width:60px;height:60px;animation-delay:2s}
@keyframes rings{0%{transform:scale(.4);opacity:.6}100%{transform:scale(1.3);opacity:0}}

.brand-name{font-size:1rem;font-weight:800;color:#fff;letter-spacing:.01em}
.brand-tag{font-size:.62rem;font-weight:700;letter-spacing:.18em;color:var(--accent);margin-top:.1rem}

.header-right{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.live-badge{
  display:flex;align-items:center;gap:.4rem;
  background:rgba(233,69,96,.18);
  border:1px solid rgba(233,69,96,.4);
  color:var(--accent);
  font-size:.7rem;font-weight:700;letter-spacing:.1em;
  padding:.3rem .75rem;border-radius:20px;
}
.lb-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:blink 1.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.listener-pill{
  display:flex;align-items:center;gap:.35rem;
  font-size:.75rem;color:var(--muted);
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  padding:.3rem .65rem;border-radius:20px;
}
.clock-pill{font-size:.75rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---- MAIN ---- */
.player-main{
  flex:1;display:flex;flex-direction:column;align-items:center;
  gap:1.1rem;padding:1.5rem 1rem 2rem;
  position:relative;z-index:1;max-width:580px;margin:0 auto;width:100%;
}

/* ---- PROGRAM CARD ---- */
.program-card{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:1.25rem 1.5rem;
  text-align:center;
}
.pc-cat{
  display:inline-block;
  background:rgba(233,69,96,.12);
  border:1px solid rgba(233,69,96,.25);
  color:var(--accent);
  font-size:.65rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.2rem .7rem;border-radius:20px;margin-bottom:.65rem;
}
.pc-title{font-size:1.25rem;font-weight:800;color:#fff;margin-bottom:.4rem;line-height:1.3}
.pc-presenter{font-size:.82rem;color:var(--cyan);margin-bottom:.4rem;min-height:1.2rem}
.pc-desc{font-size:.8rem;color:var(--muted);line-height:1.6;min-height:1rem}

/* ---- VISUAL CENTER ---- */
.visual-center{display:flex;flex-direction:column;align-items:center;gap:.85rem}

/* VINYL */
.vinyl{
  width:150px;height:150px;border-radius:50%;
  background:
    radial-gradient(circle at center,
      #111 0%,#111 18%,
      #1a1a1a 19%,#111 30%,
      #1e1e1e 31%,#161616 45%,
      #1a1a1a 46%,#111 58%,
      #202020 59%,#141414 72%,
      #1c1c1c 73%,#111 85%,
      #282828 86%,#0d0d0d 100%
    );
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 1px #333,0 0 50px rgba(233,69,96,.12);
  transition:all .4s;
  position:relative;
}
.vinyl.spinning{animation:vinylSpin 3s linear infinite}
@keyframes vinylSpin{to{transform:rotate(360deg)}}
.vinyl-grooves{
  position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle at center,
    transparent 0px,transparent 5px,
    rgba(255,255,255,.02) 5px,rgba(255,255,255,.02) 6px
  );
}
.vinyl-label{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,#e94560,#c2185b);
  display:flex;align-items:center;justify-content:center;
  position:relative;z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.5);
}
.vl-inner{
  width:38px;height:38px;border-radius:50%;
  background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;
}
.vl-icon{font-size:1rem;color:#fff}

/* EQ BARS */
.eq-wrap{display:flex;align-items:flex-end;gap:3px;height:44px}
.eq-bar{
  width:10px;border-radius:3px 3px 0 0;
  background:linear-gradient(to top,var(--accent),var(--cyan));
  height:4px;min-height:4px;
  transition:height .08s;
}
.eq-wrap.active .eq-bar{
  animation:eqBounce .7s ease-in-out infinite alternate;
  animation-delay:calc(var(--i) * 0.055s);
}
@keyframes eqBounce{
  0%{height:4px}
  100%{height:calc(4px + var(--i, 8) * 2px + 8px)}
}

/* ---- CONN STATUS ---- */
.conn-pill{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;color:var(--muted);
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  padding:.35rem .85rem;border-radius:20px;
  transition:all .3s;
}
.conn-pill.online{color:#86efac;border-color:rgba(34,197,94,.25);background:rgba(34,197,94,.07)}
.conn-pill.error {color:#fca5a5;border-color:rgba(239,68,68,.25);background:rgba(239,68,68,.07)}

/* ---- NOW PLAYING ---- */
.now-playing-strip{
  width:100%;display:flex;align-items:center;gap:.75rem;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:12px;padding:.6rem 1rem;
  overflow:hidden;
}
.np-label{
  font-size:.6rem;font-weight:700;letter-spacing:.12em;
  color:var(--accent);text-transform:uppercase;white-space:nowrap;flex-shrink:0;
}
.np-marquee{
  font-size:.83rem;font-weight:500;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;
}

/* ---- PLAYER CARD ---- */
.player-card{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
  border-radius:var(--radius);
  padding:1.1rem 1.25rem;
  display:flex;flex-direction:column;gap:.85rem;
}

/* Seek */
.seek-row{display:flex;align-items:center;gap:.65rem}
.time-tag{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums;min-width:32px}
.seek-track{flex:1;position:relative;height:6px;background:rgba(255,255,255,.08);border-radius:3px;cursor:pointer}
.seek-fill{
  position:absolute;left:0;top:0;height:100%;
  background:linear-gradient(90deg,var(--accent),#f97316);
  border-radius:3px;width:0;pointer-events:none;transition:width .1s;
}
.seek-input{
  position:absolute;inset:0;width:100%;opacity:0;cursor:pointer;height:100%;
}

/* Controls */
.controls-row{display:flex;align-items:center;justify-content:center;gap:1rem}
.ctrl{
  border:1px solid var(--border2);
  background:rgba(255,255,255,.06);
  border-radius:50%;color:var(--text);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;
}
.ctrl:hover{background:rgba(255,255,255,.12);color:#fff}
.mute-btn{width:42px;height:42px;font-size:1rem}
.play-btn{
  width:68px;height:68px;font-size:1.7rem;
  background:linear-gradient(135deg,var(--accent),#c2185b);
  border:none;color:#fff;
  box-shadow:0 6px 28px rgba(233,69,96,.4);
}
.play-btn:hover{transform:scale(1.06);box-shadow:0 8px 36px rgba(233,69,96,.55)}

/* Volume */
.vol-row{display:flex;align-items:center;gap:.4rem}
.vol-slider{
  width:85px;appearance:none;height:4px;
  border-radius:2px;background:rgba(255,255,255,.12);
  cursor:pointer;outline:none;
}
.vol-slider::-webkit-slider-thumb{
  appearance:none;width:14px;height:14px;
  border-radius:50%;background:var(--cyan);cursor:pointer;
  box-shadow:0 0 6px rgba(34,211,238,.5);
}

/* ---- NO BROADCAST ---- */
.no-broadcast{
  width:100%;
  background:rgba(255,255,255,.03);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2.5rem 1.5rem;
  text-align:center;
  position:relative;overflow:hidden;
}
.nb-icon{font-size:2.8rem;color:var(--muted);display:block;margin-bottom:.85rem}
.nb-title{font-size:1rem;font-weight:700;margin-bottom:.35rem}
.nb-sub{font-size:.8rem;color:var(--muted)}
.nb-pulse{
  position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at 50% 100%,rgba(233,69,96,.06),transparent 70%);
}

/* ---- RECENTLY PLAYED ---- */
.recent-card{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1rem 1.25rem;
}
.rc-head{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.75rem}
.rp-item{
  display:flex;align-items:center;gap:.65rem;
  padding:.5rem 0;border-bottom:1px solid var(--border);
  font-size:.8rem;
}
.rp-item:last-child{border-bottom:none}
.rp-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex-shrink:0}
.rp-name{flex:1;color:var(--text)}
.rp-time{font-size:.7rem;color:var(--muted)}

/* ---- FOOTER ---- */
.site-footer{
  position:relative;z-index:1;
  background:rgba(8,8,22,.6);
  border-top:1px solid var(--border);
  padding:.6rem 1.5rem;
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;color:var(--muted);
}
.admin-link{color:rgba(255,255,255,.2);text-decoration:none;transition:color .2s}
.admin-link:hover{color:rgba(255,255,255,.4)}

/* ---- RESPONSIVE ---- */
@media(max-width:480px){
  .site-header{padding:.7rem 1rem}
  .brand-name{font-size:.88rem}
  .player-main{padding:1rem .75rem 1.5rem}
  .pc-title{font-size:1.05rem}
  .vinyl{width:120px;height:120px}
  .play-btn{width:58px;height:58px;font-size:1.4rem}
  .vol-slider{width:65px}
  .header-right{gap:.4rem}
}