/* =============================================================================
   103.7 REWIND FM — STYLESHEET v3
   ============================================================================= */

/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
  --bg:        #06161C;
  --bg2:       #0a1f28;
  --bg3:       #0d2530;
  --bg4:       #0f2d3a;
  --cream:     #FEEDCB;
  --cream-dim: #b5a98a;
  --pink:      #C63290;
  --pink-glow: rgba(198,50,144,.35);
  --pink-dim:  #8a2465;
  --teal:      #11A2A2;
  --teal-glow: rgba(17,162,162,.3);
  --teal-dim:  #0d7070;
  --gold:      #F8BC0D;
  --gold-dim:  #a07c09;
  --white:     #ffffff;
  --text:      #FEEDCB;
  --text-dim:  #8a9ba0;
  --border:    rgba(17,162,162,.2);
  --border-pink:rgba(198,50,144,.3);
  --card:      rgba(10,31,40,.9);
  --radius:    10px;
  --radius-sm: 6px;
  --font-head: 'Orbitron', sans-serif;
  --font-vt:   'VT323', monospace;
  --font-body: 'Exo 2', sans-serif;
  --player-h:  70px;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 15px; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--font-body);
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: var(--player-h);
}
a { color: var(--teal); text-decoration: none; transition: color .2s; }
a:hover { color: var(--pink); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: var(--font-body); }

/* ── Scanlines ─────────────────────────────────────────────────────────────── */
.scanlines {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 9000;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* SITE HEADER                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(6,22,28,.97);
  border-bottom: 1px solid var(--border-pink);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 30px rgba(198,50,144,.2);
}

/* ── Now-Playing Bar ───────────────────────────────────────────────────────── */
.now-playing-bar {
  background: linear-gradient(90deg,rgba(198,50,144,.12),rgba(17,162,162,.08));
  border-bottom: 1px solid rgba(17,162,162,.15);
  padding: 5px 20px;
}
.npb-inner {
  display: flex; align-items: center; gap: 14px;
  max-width: 1280px; margin: 0 auto;
}
.npb-live { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #ff2244;
  animation: pulse-dot 1.2s ease-in-out infinite;
  box-shadow: 0 0 8px #ff2244;
}
@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.3; transform:scale(.6); }
}
.live-label {
  font-family: var(--font-head); font-size: 9px; font-weight: 700;
  color: #ff2244; letter-spacing: 3px;
}
.eq-bars { display:flex; align-items:flex-end; gap:2px; height:14px; }
.eq-bars span {
  display:block; width:3px; background:var(--teal); border-radius:1px;
  animation: eq .8s ease-in-out infinite alternate;
}
.eq-bars span:nth-child(1){animation-duration:.55s}
.eq-bars span:nth-child(2){animation-duration:.9s;animation-delay:.1s}
.eq-bars span:nth-child(3){animation-duration:.5s;animation-delay:.2s}
.eq-bars span:nth-child(4){animation-duration:.8s;animation-delay:.05s}
.eq-bars span:nth-child(5){animation-duration:.7s;animation-delay:.15s}
@keyframes eq { from{height:3px} to{height:14px} }

.npb-track { flex:1; min-width:0; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.npb-artist { font-weight:700; color:var(--pink); }
.npb-sep    { color:var(--text-dim); margin:0 5px; }
.npb-title  { color:var(--cream); }

.npb-progress-wrap { display:flex; align-items:center; gap:7px; flex-shrink:0; width:160px; }
.npb-progress { flex:1; height:4px; background:var(--bg3); border-radius:2px; overflow:hidden; }
.npb-fill { height:100%; background:linear-gradient(90deg,var(--teal),var(--pink)); width:0%; transition:width 1s linear; }
.npb-time { font-size:11px; color:var(--text-dim); font-family:var(--font-vt); font-size:14px; flex-shrink:0; }

.npb-controls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.npb-listeners { font-size:11px; color:var(--teal); font-family:var(--font-vt); font-size:15px; }

/* ── Header Brand ──────────────────────────────────────────────────────────── */
.header-brand { padding: 8px 20px; }
.brand-link { display:flex; align-items:center; gap:14px; text-decoration:none; justify-content:flex-start; }
.brand-logo { height:44px; width:auto; }
.brand-text { display:flex; flex-direction:column; }
.brand-freq {
  font-family:var(--font-head); font-size:24px; font-weight:900; color:var(--pink);
  line-height:1; text-shadow:0 0 20px var(--pink-glow);
}
.brand-name {
  font-family:var(--font-head); font-size:12px; font-weight:700;
  color:var(--gold); letter-spacing:3px; margin-top:1px;
}
.brand-tag { font-size:11px; color:var(--text-dim); margin-top:1px; }

/* ── Navigation ────────────────────────────────────────────────────────────── */
.site-nav {
  border-top:1px solid rgba(17,162,162,.12);
  padding:0 20px;
  position:relative;
}
.nav-inner {
  display:flex; gap:0; max-width:1280px; margin:0 auto;
  align-items:center;
}
.nav-link {
  display:flex; align-items:center; gap:5px;
  padding:10px 16px;
  font-family:var(--font-head); font-size:10px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--cream-dim);
  text-decoration:none; border-bottom:3px solid transparent;
  transition:color .2s,border-color .2s,background .2s;
  position:relative; white-space:nowrap;
}
.nav-link:hover, .nav-link.active {
  color:var(--pink); border-bottom-color:var(--pink);
  background:rgba(198,50,144,.07);
}
.nav-icon { font-size:12px; }
.nav-toggle {
  display:none; background:none; border:none;
  color:var(--cream); font-size:22px; padding:8px; cursor:pointer;
  margin-left:auto;
}
/* Desktop: links wrap is a flex row */
.nav-links-wrap {
  display:flex; flex:1; align-items:stretch; flex-wrap:wrap;
}

/* ── On Air Dropdown ───────────────────────────────────────────────────────── */
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 1px); left:0;
  background:var(--bg2); border:1px solid var(--border-pink);
  border-radius:0 0 var(--radius) var(--radius);
  box-shadow:0 16px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(198,50,144,.1);
  min-width:280px; z-index:300;
  opacity:0; transform:translateY(-8px); pointer-events:none;
  transition:opacity .2s, transform .2s;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown-menu:hover,
.nav-dropdown.open .nav-dropdown-menu {
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.dropdown-talent {
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--border);
  text-decoration:none; transition:background .15s;
}
.dropdown-talent:last-of-type { border-bottom:none; }
.dropdown-talent:hover { background:rgba(198,50,144,.08); }
.dropdown-avatar {
  width:38px; height:38px; border-radius:50%; background:var(--bg3);
  border:2px solid var(--pink); overflow:hidden; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:18px;
}
.dropdown-avatar img { width:100%; height:100%; object-fit:cover; }
.dropdown-name { font-weight:700; font-size:13px; color:var(--cream); display:block; }
.dropdown-show { font-size:11px; color:var(--text-dim); display:block; }
.dropdown-footer {
  padding:10px 16px; text-align:center;
  border-top:1px solid var(--border);
  font-family:var(--font-head); font-size:10px; letter-spacing:1px;
  color:var(--teal); text-transform:uppercase; text-decoration:none;
  display:block; transition:color .2s;
}
.dropdown-footer:hover { color:var(--pink); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* POPUP PLAYER                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
.popup-player {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
  background: rgba(6,22,28,.98);
  border-top: 2px solid var(--pink);
  box-shadow: 0 -4px 30px rgba(198,50,144,.25);
  backdrop-filter: blur(16px);
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.popup-player.expanded { transform: translateY(0); }

/* Collapsed bar */
.player-bar {
  height: var(--player-h); display:flex; align-items:center;
  gap:12px; padding:0 16px;
  max-width: 1280px; margin: 0 auto;
}
.player-art {
  width:46px; height:46px; border-radius:6px;
  background: var(--bg3); border:1px solid var(--border-pink);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; overflow:hidden; flex-shrink:0;
}
.player-art img { width:100%; height:100%; object-fit:cover; }
.player-track { flex:1; min-width:0; }
.player-artist { font-weight:700; font-size:14px; color:var(--pink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-title  { font-size:12px; color:var(--cream-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-progress {
  flex:1; max-width:300px;
  display:flex; flex-direction:column; gap:4px;
}
.player-bar-track {
  height:4px; background:var(--bg3); border-radius:2px; overflow:hidden; cursor:pointer;
}
.player-bar-fill {
  height:100%; background:linear-gradient(90deg,var(--teal),var(--pink));
  width:0%; transition:width 1s linear; border-radius:2px;
}
.player-timestamps { display:flex; justify-content:space-between; font-family:var(--font-vt); font-size:15px; color:var(--text-dim); }

.player-controls { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.play-pause-btn {
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--teal));
  border:none; color:#fff; font-size:16px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .15s,box-shadow .2s;
  box-shadow:0 0 16px var(--pink-glow);
}
.play-pause-btn:hover { transform:scale(1.08); box-shadow:0 0 24px var(--pink-glow); }
.play-pause-btn:active { transform:scale(.95); }

.vol-wrap { display:flex; align-items:center; gap:6px; }
.vol-icon { font-size:14px; color:var(--text-dim); cursor:pointer; }
input[type=range].vol-slider {
  width:80px; height:4px; cursor:pointer;
  background: transparent;
  -webkit-appearance: none;
}
input[type=range].vol-slider::-webkit-slider-runnable-track {
  height:4px; background:var(--bg3); border-radius:2px;
}
input[type=range].vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px;
  background:var(--pink); border-radius:50%; margin-top:-5px;
  box-shadow:0 0 6px var(--pink-glow);
}

.expand-btn {
  background:none; border:none; color:var(--text-dim); font-size:18px;
  cursor:pointer; padding:6px; transition:color .2s;
}
.expand-btn:hover { color:var(--pink); }

/* Expanded panel */
.player-expanded {
  max-height:0; overflow:hidden;
  transition:max-height .35s cubic-bezier(.4,0,.2,1);
}
.popup-player.open .player-expanded { max-height:300px; }
.player-expanded-inner {
  padding:0 16px 16px;
  max-width:1280px; margin:0 auto;
  display:grid; grid-template-columns:1fr 300px;
  gap:20px;
}
.player-ad-slot {
  display:flex; align-items:center; justify-content:center;
  background:var(--bg3); border:1px dashed rgba(255,255,255,.1);
  border-radius:var(--radius-sm); padding:8px;
  font-size:11px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase;
  min-height:100px;
}
.player-ad-slot.leaderboard { min-height:60px; }
.player-meta { display:flex; flex-direction:column; gap:8px; }
.player-meta-title { font-family:var(--font-head); font-size:10px; letter-spacing:2px; color:var(--teal); text-transform:uppercase; }
.player-listeners-count { font-family:var(--font-vt); font-size:22px; color:var(--cream); }

/* ── Listen button in NPB ──────────────────────────────────────────────────── */
.stream-btn {
  background:linear-gradient(135deg,var(--pink),var(--teal));
  border:none; border-radius:20px;
  color:#fff; font-size:11px; font-weight:700;
  padding:5px 14px; letter-spacing:.5px;
  cursor:pointer; transition:opacity .2s,box-shadow .2s;
  white-space:nowrap;
}
.stream-btn:hover { opacity:.85; box-shadow:0 2px 12px var(--pink-glow); }
.stream-btn.playing { background:linear-gradient(135deg,var(--teal-dim),var(--teal)); }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* PAGE LAYOUT                                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
.site-main { max-width:1280px; margin:0 auto; padding:0 20px 80px; }

/* ── Section Heads ─────────────────────────────────────────────────────────── */
.section-head {
  font-family:var(--font-head); font-size:11px; font-weight:700;
  letter-spacing:3px; text-transform:uppercase;
  color:var(--teal); margin-bottom:18px;
  padding-bottom:10px; border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:8px;
}
.section-head::before { content:''; width:3px; height:14px; background:var(--pink); border-radius:2px; display:block; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.card {
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  backdrop-filter:blur(4px);
}
.card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.card-title {
  font-family:var(--font-head); font-size:12px; font-weight:700;
  color:var(--gold); letter-spacing:1px; margin-bottom:10px;
}

/* ── HOME HERO ─────────────────────────────────────────────────────────────── */
.home-hero {
  position:relative; overflow:hidden;
  padding:60px 0 50px; margin:0 -20px;
  background:linear-gradient(135deg,#06161C 0%,#0d1f28 40%,#150d20 100%);
}
.home-hero::before {
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 60% 80% at 80% 50%, rgba(198,50,144,.15), transparent),
    radial-gradient(ellipse 40% 60% at 20% 30%, rgba(17,162,162,.1), transparent);
}
.home-hero::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);
  pointer-events:none;
}
.hero-inner {
  position:relative; z-index:1;
  max-width:1280px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
}
.hero-copy {}
.hero-eyebrow {
  font-family:var(--font-head); font-size:10px; font-weight:700; color:var(--text-dim);
  letter-spacing:3px; text-transform:uppercase; margin-bottom:6px;
}
.hero-freq {
  font-family:var(--font-head); font-size:clamp(60px,10vw,110px); font-weight:900;
  color:var(--white); line-height:1; margin-bottom:4px;
  text-shadow:0 0 60px var(--pink-glow), 0 0 120px rgba(198,50,144,.1);
}
.hero-name {
  font-family:var(--font-head); font-size:clamp(18px,3vw,28px); font-weight:700;
  color:var(--pink); letter-spacing:4px; text-transform:uppercase;
  text-shadow:0 0 30px var(--pink-glow);
}
.hero-tagline { font-size:14px; color:var(--cream-dim); margin-top:8px; line-height:1.5; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }

.hero-np { position:relative; }
.hero-np-card {
  background:rgba(10,20,28,.85);
  border:1px solid rgba(198,50,144,.4);
  border-radius:16px; padding:28px;
  box-shadow:0 0 60px rgba(198,50,144,.15), 0 20px 40px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
}
.hnp-label {
  font-family:var(--font-vt); font-size:20px; color:var(--teal);
  letter-spacing:4px; text-transform:uppercase; margin-bottom:16px;
  display:flex; align-items:center; gap:8px;
}
.hnp-art {
  width:90px; height:90px; border-radius:10px; margin:0 auto 16px;
  background:linear-gradient(135deg,var(--bg3),var(--bg2));
  border:2px solid rgba(198,50,144,.4);
  display:flex; align-items:center; justify-content:center; font-size:44px;
  overflow:hidden;
}
.hnp-art img { width:100%; height:100%; object-fit:cover; }
.hnp-artist { font-family:var(--font-head); font-size:20px; font-weight:700; color:var(--pink); text-align:center; }
.hnp-title  { font-size:15px; color:var(--cream); text-align:center; margin-top:4px; }
.hnp-album  { font-size:12px; color:var(--text-dim); text-align:center; margin-top:2px; }
.hnp-bar-wrap { margin:18px 0 6px; background:var(--bg3); border-radius:4px; height:5px; overflow:hidden; }
.hnp-bar { height:100%; background:linear-gradient(90deg,var(--teal),var(--pink)); transition:width 1s linear; border-radius:4px; }
.hnp-time-row {
  display:flex; justify-content:space-between;
  font-family:var(--font-vt); font-size:17px; color:var(--text-dim);
}
.hnp-listeners { text-align:center; margin-top:12px; font-size:13px; color:var(--teal); }
.hnp-request-link {
  display:block; text-align:center; margin-top:16px;
  padding:10px; border:1px solid var(--teal); border-radius:var(--radius-sm);
  color:var(--teal); font-family:var(--font-head); font-size:10px; letter-spacing:1.5px;
  text-transform:uppercase; transition:all .2s;
}
.hnp-request-link:hover { background:rgba(17,162,162,.12); color:var(--teal); }

/* ── CTA Strip ─────────────────────────────────────────────────────────────── */
.cta-strip {
  display:grid; grid-template-columns:repeat(3,1fr); gap:14px;
  margin:32px -20px; padding:24px 20px;
  background:linear-gradient(90deg,rgba(198,50,144,.08),rgba(17,162,162,.06));
  border-top:1px solid var(--border-pink); border-bottom:1px solid var(--border);
}
.cta-card {
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:var(--radius);
  background:rgba(10,31,40,.7); border:1px solid var(--border);
  text-decoration:none; transition:border-color .2s,background .2s,transform .15s;
}
.cta-card:hover { border-color:var(--pink); background:rgba(198,50,144,.08); transform:translateY(-2px); }
.cta-icon { font-size:30px; flex-shrink:0; }
.cta-text {}
.cta-label { font-family:var(--font-head); font-size:11px; font-weight:700; color:var(--gold); letter-spacing:1px; display:block; }
.cta-sub   { font-size:12px; color:var(--text-dim); }

/* ── Recently Played ───────────────────────────────────────────────────────── */
.recent-list { list-style:none; display:flex; flex-direction:column; gap:6px; }
.recent-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:var(--radius-sm);
  background:var(--bg2); border-left:3px solid var(--teal);
  transition:border-color .2s,background .15s;
}
.recent-item:hover { border-left-color:var(--pink); background:var(--bg3); }
.recent-num  { font-family:var(--font-vt); font-size:22px; color:var(--teal); min-width:28px; text-align:center; }
.recent-info { flex:1; min-width:0; }
.recent-artist { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-title  { font-size:12px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-time   { font-size:11px; color:var(--pink); white-space:nowrap; }

/* ── News Cards ────────────────────────────────────────────────────────────── */
.news-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:20px; position:relative; overflow:hidden;
  transition:border-color .2s,transform .15s;
}
.news-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--pink),var(--teal)); }
.news-card:hover { border-color:rgba(198,50,144,.4); transform:translateY(-3px); }
.news-date { font-family:var(--font-head); font-size:9px; letter-spacing:2px; color:var(--teal); text-transform:uppercase; margin-bottom:8px; }
.news-title { font-size:15px; font-weight:700; color:var(--cream); margin-bottom:8px; line-height:1.4; }
.news-body  { font-size:13px; color:var(--cream-dim); line-height:1.6; }

/* ── DJ Cards ──────────────────────────────────────────────────────────────── */
.dj-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; text-align:center;
  transition:border-color .2s,box-shadow .2s,transform .15s;
}
.dj-card:hover { border-color:var(--pink); box-shadow:0 6px 24px rgba(198,50,144,.15); transform:translateY(-3px); }
.dj-avatar {
  width:90px; height:90px; border-radius:50%; margin:0 auto 14px;
  background:linear-gradient(135deg,var(--pink-dim),var(--teal-dim));
  display:flex; align-items:center; justify-content:center; font-size:40px;
  overflow:hidden; border:3px solid var(--pink);
  box-shadow:0 0 20px var(--pink-glow);
}
.dj-avatar img { width:100%; height:100%; object-fit:cover; }
.dj-name  { font-family:var(--font-head); font-size:13px; font-weight:700; color:var(--pink); }
.dj-show  { font-size:12px; color:var(--gold); margin-top:3px; }
.dj-hours { font-family:var(--font-vt); font-size:17px; color:var(--teal); margin-top:4px; }
.dj-bio   { font-size:12px; color:var(--text-dim); margin-top:10px; line-height:1.6; }
.dj-stat-row {
  display:flex; justify-content:space-between; padding:5px 0;
  border-bottom:1px solid rgba(17,162,162,.1);
  font-size:12px; text-align:left;
}
.dj-stat-key   { color:var(--text-dim); }
.dj-stat-val   { color:var(--cream); font-weight:600; }

/* ── Newsletter Banner ─────────────────────────────────────────────────────── */
.newsletter-banner {
  background:linear-gradient(135deg,rgba(198,50,144,.12),rgba(17,162,162,.08));
  border:1px solid rgba(198,50,144,.3); border-radius:var(--radius);
  padding:32px; display:flex; gap:24px; align-items:center; flex-wrap:wrap;
  margin:40px 0;
}
.newsletter-copy { flex:1; min-width:200px; }
.newsletter-copy h3 { font-family:var(--font-head); font-size:16px; color:var(--cream); margin-bottom:6px; }
.newsletter-copy p  { font-size:13px; color:var(--cream-dim); }
.newsletter-form { display:flex; gap:10px; flex-wrap:wrap; }
.newsletter-form input {
  flex:1; min-width:200px; background:var(--bg3); border:1px solid var(--border);
  color:var(--cream); border-radius:var(--radius-sm); padding:10px 14px; font-size:14px;
}
.newsletter-form input:focus { outline:none; border-color:var(--pink); }

/* ── Tables ────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x:auto; border-radius:var(--radius); }
table.rfm-table { width:100%; border-collapse:collapse; font-size:14px; }
.rfm-table th {
  background:var(--bg3); color:var(--teal); font-family:var(--font-head);
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:11px 14px; text-align:left; border-bottom:2px solid var(--pink);
  cursor:pointer; user-select:none; white-space:nowrap;
}
.rfm-table th:hover { color:var(--pink); }
.rfm-table td { padding:10px 14px; border-bottom:1px solid rgba(17,162,162,.08); vertical-align:middle; }
.rfm-table tr:hover td { background:rgba(17,162,162,.04); }
.badge { display:inline-block; padding:2px 9px; border-radius:12px; font-size:11px; font-weight:700; }
.badge-song   { background:rgba(17,162,162,.15); color:var(--teal); }
.badge-no-req { background:rgba(198,50,144,.15); color:var(--pink); }

/* ── Forms & Buttons ───────────────────────────────────────────────────────── */
.rfm-form { display:flex; flex-direction:column; gap:16px; }
.form-row  { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-group label {
  font-family:var(--font-head); font-size:9px; font-weight:700;
  letter-spacing:1.5px; text-transform:uppercase; color:var(--teal);
}
.form-group input,
.form-group select,
.form-group textarea {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--cream); border-radius:var(--radius-sm);
  padding:11px 14px; font-size:14px; width:100%;
  transition:border-color .2s,box-shadow .2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(198,50,144,.15);
}
.form-group select option { background:var(--bg2); }

.rfm-btn {
  background:linear-gradient(135deg,var(--pink),var(--teal));
  border:none; border-radius:var(--radius-sm); color:#fff;
  font-family:var(--font-head); font-size:11px; font-weight:700;
  letter-spacing:2px; padding:12px 24px; text-transform:uppercase;
  cursor:pointer; transition:opacity .2s,transform .1s,box-shadow .2s;
  display:inline-block; text-align:center;
}
.rfm-btn:hover  { opacity:.88; box-shadow:0 4px 20px rgba(198,50,144,.4); color:#fff; }
.rfm-btn:active { transform:scale(.97); }
.rfm-btn.full   { width:100%; }
.rfm-btn.outline {
  background:transparent; border:1px solid var(--teal); color:var(--teal);
  box-shadow:none;
}
.rfm-btn.outline:hover { background:rgba(17,162,162,.12); color:var(--teal); opacity:1; }
.rfm-btn:disabled { opacity:.4; pointer-events:none; }
.rfm-btn.btn-gold { background:linear-gradient(135deg,var(--gold),var(--gold-dim)); color:var(--bg); }

/* ── Request Search ────────────────────────────────────────────────────────── */
.req-search-results {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-sm); margin-top:8px;
  max-height:320px; overflow-y:auto; display:none;
}
.req-result-item {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 14px; cursor:pointer; border-bottom:1px solid rgba(17,162,162,.08);
  transition:background .15s;
}
.req-result-item:last-child { border-bottom:none; }
.req-result-item:hover:not(.disabled) { background:rgba(17,162,162,.08); }
.req-result-item.disabled { opacity:.4; cursor:not-allowed; }
.req-item-artist { font-weight:700; font-size:14px; }
.req-item-title  { font-size:12px; color:var(--text-dim); }
.req-item-dur    { font-family:var(--font-vt); font-size:18px; color:var(--teal); }
.req-item-warn   { font-size:11px; color:var(--pink); }
.req-selected {
  background:rgba(17,162,162,.08); border:1px solid var(--teal);
  border-radius:var(--radius-sm); padding:12px 16px; margin:10px 0; display:none;
}

/* ── Library controls ─────────────────────────────────────────────────────── */
.lib-controls { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.lib-search {
  flex:1; min-width:200px; background:var(--bg3); border:1px solid var(--border);
  color:var(--cream); border-radius:var(--radius-sm); padding:10px 14px; font-size:14px;
}
.lib-search:focus { outline:none; border-color:var(--pink); }
.lib-select {
  background:var(--bg3); border:1px solid var(--border);
  color:var(--cream); border-radius:var(--radius-sm); padding:10px 12px; font-size:13px;
}
.lib-select option { background:var(--bg2); }

/* ── Pagination ────────────────────────────────────────────────────────────── */
.pagination { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:24px; }
.page-btn {
  background:var(--bg3); border:1px solid var(--border); color:var(--cream-dim);
  border-radius:var(--radius-sm); padding:7px 13px; font-size:13px; cursor:pointer;
  transition:all .2s;
}
.page-btn:hover  { border-color:var(--teal); color:var(--teal); }
.page-btn.active { background:var(--pink); border-color:var(--pink); color:#fff; font-weight:700; }

/* ── Schedule Table ────────────────────────────────────────────────────────── */
.schedule-table { width:100%; border-collapse:collapse; font-size:13px; }
.schedule-table th {
  background:var(--bg3); color:var(--gold); font-family:var(--font-head);
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:10px 10px; border-bottom:2px solid var(--pink); text-align:center;
}
.schedule-table th:first-child { text-align:left; }
.schedule-table td {
  padding:9px 10px; border-bottom:1px solid rgba(17,162,162,.08); text-align:center; color:var(--text-dim);
}
.schedule-table td:first-child { font-family:var(--font-vt); font-size:16px; color:var(--teal); text-align:left; white-space:nowrap; }
.schedule-table td.has-show { color:var(--cream); font-weight:600; }
.schedule-table tr:hover td { background:rgba(17,162,162,.04); }

/* ── Contest Cards ─────────────────────────────────────────────────────────── */
.contest-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:24px; position:relative; overflow:hidden;
}
.contest-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold),var(--pink)); }

/* ── Members Portal ────────────────────────────────────────────────────────── */
.auth-tabs { display:flex; margin-bottom:20px; background:var(--bg3); border-radius:var(--radius-sm); padding:3px; }
.auth-tab { flex:1; padding:9px; border:none; background:transparent; color:var(--text-dim); font-family:var(--font-head); font-size:10px; font-weight:700; border-radius:6px; letter-spacing:1px; text-transform:uppercase; cursor:pointer; transition:all .2s; }
.auth-tab.active { background:var(--pink); color:#fff; }
.member-tabs { display:flex; gap:4px; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:24px; }
.member-tab { background:none; border:none; border-bottom:3px solid transparent; color:var(--text-dim); font-family:var(--font-head); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:10px 16px; cursor:pointer; transition:all .2s; margin-bottom:-2px; }
.member-tab:hover, .member-tab.active { color:var(--pink); border-bottom-color:var(--pink); }
.member-panel { display:none; }
.member-panel.active { display:block; }
.wall-post { background:var(--bg2); border-radius:var(--radius-sm); padding:16px; margin-bottom:12px; border-left:3px solid var(--teal); }
.wall-post-header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.wall-post-user { font-weight:700; color:var(--pink); font-size:14px; }
.wall-post-time { font-size:11px; color:var(--text-dim); }
.wall-post-body { font-size:14px; color:var(--cream); line-height:1.6; }
.wall-post-footer { display:flex; gap:12px; margin-top:10px; }
.like-btn { background:none; border:none; color:var(--text-dim); font-size:13px; cursor:pointer; transition:color .2s; }
.like-btn:hover, .like-btn.liked { color:var(--pink); }

/* ── About Page ────────────────────────────────────────────────────────────── */
.stat-bar {
  display:flex; flex-direction:column; gap:10px; margin:20px 0;
}
.stat-bar-item { display:flex; justify-content:space-between; align-items:center; }
.stat-bar-item span:first-child { color:var(--text-dim); font-size:13px; }
.stat-bar-item strong { color:var(--cream); font-weight:700; }

/* ── Toast ─────────────────────────────────────────────────────────────────── */
.toast {
  position:fixed; bottom:calc(var(--player-h) + 16px); right:20px; z-index:600;
  background:var(--bg2); border:1px solid var(--teal); border-radius:var(--radius-sm);
  padding:12px 20px; font-size:14px; color:var(--cream); max-width:340px;
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all .3s ease;
}
.toast.show { transform:translateY(0); opacity:1; pointer-events:auto; }
.toast.toast-error { border-color:var(--pink); }
.toast.toast-success { border-color:var(--teal); }

/* ── Spinner ───────────────────────────────────────────────────────────────── */
.spinner { display:inline-block; width:20px; height:20px; border:2px solid var(--border); border-top-color:var(--pink); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.loading-state { text-align:center; padding:40px; color:var(--text-dim); }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.site-footer { background:var(--bg2); border-top:2px solid rgba(198,50,144,.3); padding:50px 20px 0; margin-top:80px; }
.footer-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:250px 1fr; gap:50px; padding-bottom:40px; }
.footer-brand .footer-freq { font-family:var(--font-head); font-size:28px; font-weight:900; color:var(--pink); text-shadow:0 0 20px var(--pink-glow); }
.footer-brand .footer-name { font-family:var(--font-head); font-size:12px; color:var(--gold); letter-spacing:3px; margin-top:2px; }
.footer-brand .footer-tag  { font-size:12px; color:var(--text-dim); margin-top:4px; }
.footer-brand .footer-market { font-size:11px; color:var(--text-dim); margin-top:2px; }
.footer-links { display:flex; gap:40px; flex-wrap:wrap; }
.footer-col   { display:flex; flex-direction:column; gap:8px; }
.footer-col h4 { font-family:var(--font-head); font-size:9px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--teal); margin-bottom:4px; }
.footer-col a  { font-size:13px; color:var(--text-dim); transition:color .2s; }
.footer-col a:hover { color:var(--cream); }
.footer-bottom { border-top:1px solid var(--border); padding:16px 0; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:11px; color:var(--text-dim); max-width:1280px; margin:0 auto; }

/* ── Ad slots ──────────────────────────────────────────────────────────────── */
.ad-slot {
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.03); border:1px dashed rgba(255,255,255,.1);
  border-radius:var(--radius-sm); color:var(--text-dim); font-size:11px;
  letter-spacing:1px; text-transform:uppercase;
}
.ad-slot.leaderboard { height:90px; width:100%; }
.ad-slot.mrec { height:250px; width:300px; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/* RESPONSIVE                                                                   */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-inner { grid-template-columns:1fr; text-align:center; }
  .hero-np-card { max-width:400px; margin:0 auto; }
  .hero-actions { justify-content:center; }
  .cta-strip { grid-template-columns:1fr; }
  .footer-inner { grid-template-columns:1fr; }
  .player-expanded-inner { grid-template-columns:1fr; }
}
@media (max-width:768px) {
  :root { --player-h: 60px; }
  .nav-toggle { display:block; }
  .nav-inner { flex-wrap:wrap; }
  .nav-links-wrap { display:none; width:100%; flex-direction:column; }
  .nav-links-wrap.open { display:flex; }
  .nav-links-wrap.open .nav-link { display:flex; width:100%; border-bottom:1px solid var(--border); border-left:3px solid transparent; border-bottom-color:var(--border); }
  .nav-links-wrap.open .nav-link.active { border-left-color:var(--pink); }
  .nav-dropdown-menu { position:static; opacity:1; transform:none; pointer-events:auto; box-shadow:none; border:none; }
  .player-progress { display:none; }
  .vol-wrap { display:none; }
  .expand-btn { display:none; }
  .form-row { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .home-hero { padding:40px 0 30px; }
  .hero-freq { font-size:60px; }
  .site-main { padding:0 12px 80px; }
  .npb-progress-wrap { display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════ */
/* MOBILE — Comprehensive responsive overrides                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── Player window: not relevant on mobile (popup blocked) ─────────────────  */
/* The stream button opens the popup or falls back to audio on mobile          */

@media (max-width: 768px) {
  /* Base */
  body { font-size: 14px; }
  .site-main { padding: 0 12px 100px; }

  /* Header */
  .site-header { position: sticky; top: 0; z-index: 200; }
  .now-playing-bar { padding: 4px 12px; }
  .npb-inner { gap: 8px; }
  .npb-progress-wrap { display: none; }
  .npb-listeners { display: none; }
  .npb-artist { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

  .header-brand { padding: 8px 12px; }
  .brand-freq { font-size: 20px; }
  .brand-name { font-size: 10px; letter-spacing: 2px; }
  .brand-tag  { display: none; }

  /* Nav */
  .site-nav { padding: 0 12px; }
  .nav-inner { min-height: 44px; }
  .nav-toggle { display: block; }
  .nav-links-wrap { display: none; width: 100%; flex-direction: column; background: var(--bg2); border-top: 1px solid var(--border); }
  .nav-links-wrap.open { display: flex; }
  .nav-link { display: flex; width: 100%; padding: 12px 16px; border-bottom: 1px solid var(--border); border-bottom-color: var(--border) !important; border-left: 3px solid transparent; }
  .nav-link.active { border-left-color: var(--pink); }
  .nav-dropdown-menu { position: static; opacity: 1; transform: none; pointer-events: auto; box-shadow: none; border: none; border-radius: 0; }
  .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; transform: none; }

  /* Hero */
  .home-hero { padding: 28px 0 24px; }
  .hero-inner { grid-template-columns: 1fr; gap: 20px; text-align: center; padding: 0 12px; }
  .hero-freq { font-size: 52px; }
  .hero-name { font-size: 16px; letter-spacing: 3px; }
  .hero-tagline { font-size: 14px; }
  .hero-actions { justify-content: center; gap: 10px; }
  .hero-actions .rfm-btn { font-size: 12px; padding: 11px 18px; }
  .hero-np-card { max-width: 100%; padding: 18px; }
  .hnp-art { width: 70px; height: 70px; font-size: 34px; }
  .hnp-artist { font-size: 15px; }
  .hnp-title { font-size: 13px; }

  /* CTA strip */
  .cta-strip { grid-template-columns: 1fr; gap: 10px; margin: 20px -12px; padding: 16px 12px; }
  .cta-card { padding: 12px 14px; gap: 12px; }
  .cta-icon { font-size: 24px; }
  .cta-label { font-size: 12px; }

  /* Recently played + Top 10 grid */
  .site-main > div[style*="grid-template-columns:1fr 1fr"] { display: grid; grid-template-columns: 1fr !important; }

  /* Cards */
  .card { padding: 16px; }
  .card-grid { grid-template-columns: 1fr; }

  /* Forms */
  .form-row { grid-template-columns: 1fr; }
  .rfm-form { gap: 12px; }
  .rfm-btn { font-size: 12px; padding: 11px 18px; }

  /* On Air cards */
  .dj-card { padding: 18px 14px; }

  /* Recent list */
  .recent-item { padding: 8px 10px; gap: 8px; }
  .recent-num { font-size: 18px; min-width: 22px; }
  .recent-artist { font-size: 13px; }
  .recent-title  { font-size: 11px; }

  /* Newsletter */
  .newsletter-banner { flex-direction: column; gap: 14px; padding: 20px; }
  .newsletter-form { width: 100%; }
  .newsletter-form input { min-width: 0; flex: 1; }

  /* Footer */
  .site-footer { padding: 30px 12px 0; }
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
  .footer-links { gap: 20px; }
  .footer-bottom { flex-direction: column; gap: 4px; font-size: 10px; }

  /* Library table */
  .rfm-table td:nth-child(3),
  .rfm-table th:nth-child(3) { display: none; } /* hide duration col on small screens */

  /* Popup player on mobile: inline stream button triggers audio directly */
  .popup-player { display: none !important; } /* hide bottom bar; Listen Live opens popup or inline */

  /* Request modal */
  #reqModal > div:last-child { margin: 12px; padding: 20px; }

  /* Now Playing bar stream button */
  .stream-btn { font-size: 10px; padding: 4px 10px; }

  /* Section heads */
  .section-head { font-size: 10px; letter-spacing: 2px; }

  /* DJs */
  .dj-name { font-size: 12px; }
  .dj-bio  { font-size: 11px; }

  /* Tables */
  .table-wrap { border-radius: 6px; }
  .rfm-table { font-size: 13px; }
  .rfm-table th, .rfm-table td { padding: 8px 10px; }

  /* Schedule table */
  .schedule-table th:not(:first-child):not(:nth-child(2)) { display: none; }
  .schedule-table td:not(:first-child):not(:nth-child(2)) { display: none; }

  /* Contests */
  .contest-card { padding: 16px; }

  /* Members auth */
  .auth-tabs { margin-bottom: 14px; }
  .member-tabs { gap: 2px; }
  .member-tab { font-size: 9px; padding: 8px 10px; letter-spacing: .5px; }

  /* About sidebar */
  .site-main > div[style*="340px"] { display: grid; grid-template-columns: 1fr !important; }
}

/* Extra small */
@media (max-width: 400px) {
  .hero-freq { font-size: 42px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .rfm-btn { text-align: center; }
  .npb-inner { flex-wrap: wrap; }
  .npb-track { min-width: 0; flex: 1; font-size: 12px; }
}

/* Mobile: inline audio player (popup blocked) */
@media (max-width: 768px) {
  .mobile-player-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
    background: rgba(6,22,28,.98);
    border-top: 2px solid var(--pink);
    padding: 0 12px;
    height: 60px;
    display: flex; align-items: center; gap: 12px;
    box-shadow: 0 -4px 20px rgba(198,50,144,.2);
  }
  .mobile-player-art { width: 38px; height: 38px; border-radius: 6px; background: var(--bg3); border: 1px solid var(--border-pink); display: flex; align-items: center; justify-content: center; font-size: 18px; overflow: hidden; flex-shrink: 0; }
  .mobile-player-art img { width: 100%; height: 100%; object-fit: cover; }
  .mobile-player-info { flex: 1; min-width: 0; }
  .mobile-player-artist { font-size: 12px; font-weight: 700; color: var(--pink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-player-title  { font-size: 11px; color: var(--cream-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-play-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,var(--pink),var(--teal)); border: none; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
}
@media (min-width: 769px) {
  .mobile-player-bar { display: none; }
}

/* ── Y2Krew Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Auth gate */
  #authGate { padding: 0 !important; }
  .auth-tabs button { font-size: 12px; padding: 9px 8px; }

  /* Dashboard tabs */
  .member-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .member-tab  { white-space: nowrap; font-size: 9px; padding: 8px 10px; }

  /* Friend cards */
  #panel-friends .card-grid { grid-template-columns: 1fr 1fr; }

  /* Vault cards */
  #panel-vault .card-grid { grid-template-columns: 1fr 1fr; }

  /* Profile view on mobile */
  #profileView [style*="grid-template-columns:1fr 2fr"] {
    display: flex !important; flex-direction: column !important;
  }

  /* Wall input */
  #wallInput { font-size: 14px; }

  /* Edit profile */
  #panel-edit-profile .rfm-form { gap: 10px; }
}