:root{
  color-scheme: dark;
  --bg-deep: #05070a;
  --bg: #090c11;
  --grid: #131c25;
  --cyan: #35f0e0;
  --magenta: #ff3fc0;
  --ink: #f4f1ea;
  --muted: #cdc9c0;
  --line: rgba(244,241,234,0.12);
  --danger: #ff5f6d;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  position:relative;
}
/* Ambient color glow behind the whole page -- same cyan/magenta the Hero
   already uses locally, just extended site-wide at low opacity so every
   section carries a little of that atmosphere instead of only Hero.
   Fixed (doesn't scroll) so it reads as ambient lighting, not a decal
   tied to one spot on a long page. Sits behind the grid layer below. */
body::after{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(ellipse 900px 650px at 12% 8%, rgba(53,240,224,0.09), transparent 60%),
    radial-gradient(ellipse 800px 800px at 90% 30%, rgba(255,63,192,0.07), transparent 60%),
    radial-gradient(ellipse 1000px 600px at 40% 95%, rgba(53,240,224,0.06), transparent 60%);
  pointer-events:none;
  z-index:0;
}
body::before{
  content:"";
  position:fixed; inset:0;
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, var(--grid) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, var(--grid) 39px 40px);
  opacity:0.5;
  pointer-events:none;
  z-index:1;
}
a{color:inherit; text-decoration:none;}

/* ============ HEADER ============ */
header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px 6vw;
  border-bottom: 1px solid var(--line);
  background: rgba(5,7,10,0.6);
  backdrop-filter: blur(6px);
}
.logo{
  font-family:'Orbitron', sans-serif;
  font-weight:900;
  font-size:18px;
  letter-spacing:3px;
}
.logo span{color:var(--cyan);}
.navlinks{display:flex; gap:12px; font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;}
.navlinks a{
  color:var(--cyan); border:1px solid var(--line); border-radius:8px;
  padding:8px 16px; backdrop-filter:blur(6px); transition:all .2s;
}
.navlinks a:hover{border-color:var(--cyan); background:rgba(53,240,224,0.08); box-shadow:0 0 12px rgba(53,240,224,0.35);}
.contact-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:16px; height:16px; padding:0 4px; margin-left:6px;
  background:var(--magenta); color:#fff; border-radius:999px;
  font-size:10px; font-weight:700; line-height:1;
}

/* ============ TOP RADIO STRIP ============ */
#topStrip{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:10px;
  padding:9px 6vw;
  background:rgba(5,7,10,0.5);
  border-bottom:1px solid var(--line);
}
#topStrip .top-dot{
  width:6px; height:6px; border-radius:50%; background:var(--cyan); flex:none;
  animation:pulse 1.6s ease-in-out infinite;
}
#topStrip .top-info{
  flex:1; min-width:0; cursor:pointer;
  display:flex; align-items:baseline; gap:8px;
  font-family:'Share Tech Mono', monospace;
}
#topStrip .top-label{
  flex:none; font-size:10px; letter-spacing:1.5px; color:var(--cyan); opacity:0.85;
}
#topStrip .top-label-short{display:none;}
@media (max-width:600px){
  #topStrip .top-label-full{display:none;}
  #topStrip .top-label-short{display:inline;}
}
#topStrip .top-track{
  flex:1; min-width:0; font-size:11.5px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#topStrip .top-btn{
  border:1px solid var(--line); border-radius:6px; width:24px; height:24px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:10px;
  background:rgba(255,255,255,0.03); color:var(--cyan); cursor:pointer; transition:all .2s;
}
#topStrip .top-btn:hover{border-color:var(--cyan); background:rgba(53,240,224,0.08);}

/* ============ HERO ============ */
.hero{
  position:relative; z-index:2;
  padding: 110px 6vw 100px;
  overflow:hidden;
  text-align:center;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 80% 20%, rgba(53,240,224,0.10), transparent 55%),
              radial-gradient(circle at 10% 80%, rgba(255,63,192,0.08), transparent 50%);
  pointer-events:none;
}
.hero-inner{position:relative; z-index:2; max-width:720px; margin:0 auto; display:flex; flex-direction:column; align-items:center;}
.hero .eyebrow{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--magenta); margin-bottom:20px;
}
.hero h1{
  font-family:'Orbitron', sans-serif; font-weight:700; font-size:clamp(30px,4.4vw,52px); line-height:1.15; margin-bottom:22px; color:var(--cyan);
}
.hero p{font-size:16px; line-height:1.7; color:var(--muted); max-width:520px; margin:0 auto 34px;}
.hero-ctas{display:flex; gap:18px; flex-wrap:wrap; justify-content:center;}
.hero-stats{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; align-items:baseline;
  margin-top:30px;
  font-family:'Share Tech Mono', monospace; font-size:12px; color:var(--muted);
}
.hero-stats:empty{display:none;}
.hero-stats strong{color:var(--cyan); font-weight:700;}
.hero-stats .stat-sep{opacity:0.4;}
.hero-cta{
  display:inline-block; font-family:'Share Tech Mono', monospace; font-size:13px; letter-spacing:1px;
  border:1px solid var(--cyan); color:var(--cyan); border-radius:8px;
  padding:12px 26px; transition: all .2s; cursor:pointer;
  background:rgba(53,240,224,0.05); backdrop-filter:blur(6px);
}
.hero-cta:hover{background:rgba(53,240,224,0.15); box-shadow:0 0 16px rgba(53,240,224,0.45);}
.hero-cta.alt{border-color:var(--magenta); color:var(--magenta); background:rgba(255,63,192,0.05);}
.hero-cta.alt:hover{background:rgba(255,63,192,0.15); box-shadow:0 0 16px rgba(255,63,192,0.45);}

/* ============ NEW-HERE BANNER ============ */
.new-here{
  max-width:720px; margin:0 auto 10px; padding:22px 26px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(53,240,224,0.04);
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.new-here-text .eyebrow{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--magenta); margin-bottom:8px;
}
.new-here-text h2{font-family:'Orbitron', sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0 0 6px;}
.new-here-text p{font-size:14px; color:var(--muted); margin:0; max-width:420px;}

/* ============ ONBOARDING CHECKLIST ============ */
.onboarding{
  max-width:720px; margin:14px auto 0; padding:22px 26px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(255,255,255,0.02);
}
.onboarding-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:16px; flex-wrap:wrap;}
.onboarding-label{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--magenta);
}
.onboarding-progress{font-family:'Share Tech Mono', monospace; font-size:12px; color:var(--muted);}
.onboarding-list{display:flex; flex-direction:column; gap:12px;}
.onboarding-item{display:flex; align-items:center; gap:12px;}
.onboarding-check{
  width:18px; height:18px; flex:none; border:1px solid var(--line); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  font-family:'Share Tech Mono', monospace; font-size:11px; color:transparent;
  transition: all .2s;
}
.onboarding-text{font-size:14px; color:var(--ink); transition: all .2s;}
.onboarding-item.done .onboarding-check{
  border-color:var(--cyan); background:rgba(53,240,224,0.15); color:var(--cyan);
}
.onboarding-item.done .onboarding-check::after{content:"✓";}
.onboarding-item.done .onboarding-text{color:var(--muted); text-decoration:line-through; opacity:0.7;}

/* ============ SECTION SCAFFOLD ============ */
section{position:relative; z-index:2; padding: 30px 6vw 100px;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:44px; border-bottom:1px solid var(--line); padding-bottom:18px; flex-wrap:wrap; gap:16px;
}
.section-eyebrow{font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--magenta);}
.section-title{font-family:'Orbitron', sans-serif; font-weight:700; font-size:clamp(22px,2.6vw,32px); color:var(--ink);}
.section-note{font-size:13.5px; color:var(--muted); max-width:320px;}

/* ============ TOOLS ============ */
.tool-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:22px;
}
.tool-card{
  display:block;
  border:1px solid var(--line);
  padding:26px;
  background: rgba(255,255,255,0.02);
  transition: border-color .2s, transform .2s;
}
.tool-card:hover{border-color:var(--cyan); transform:translateY(-3px);}
.tool-card .tag{
  font-family:'Share Tech Mono', monospace;
  font-size:11px; color:var(--cyan); letter-spacing:1px; margin-bottom:14px; display:block;
}
.tool-card h3{font-family:'Orbitron', sans-serif; font-size:17px; margin-bottom:10px;}
.tool-card p{font-size:14px; color:var(--muted); line-height:1.55; margin-bottom:18px;}
.tool-card .tool-link{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:1px; color:var(--sand, var(--ink));
  border-bottom:1px solid var(--magenta); padding-bottom:2px; width:max-content;
}

/* ============ RADIO WIDGET ============ */
.radio-layout{display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:center;}
.np-panel{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding:40px;
  position:relative;
  transition: border-color .6s ease, box-shadow .6s ease;
}
.np-panel::before{
  content:""; position:absolute; top:-1px; left:24px; right:24px; height:1px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
}
.np-panel.is-playing{
  border-color: rgba(53,240,224,0.35);
  box-shadow: 0 0 40px -12px rgba(53,240,224,0.35);
}
.np-label{
  display:flex; align-items:center; gap:8px;
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:2px; color:var(--cyan);
  margin-bottom:20px;
}
.np-label .status-err{color:var(--danger);}
.dot{width:7px; height:7px; border-radius:50%; background:var(--cyan); animation: pulse 1.6s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;} 50%{opacity:0.3;}}
.np-track{font-family:'Orbitron', sans-serif; font-weight:700; font-size:26px; color:var(--ink); margin-bottom:8px; line-height:1.15;}
.np-artist{font-size:14px; color:var(--muted); margin-bottom:10px; font-family:'Share Tech Mono', monospace;}
.np-genre{
  display:inline-block; font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:1px;
  text-transform:uppercase; border:1px solid var(--line); padding:4px 9px; color:var(--cyan); opacity:0.85; margin-bottom:24px;
}
.np-genre:empty{display:none;}
.np-bars{display:flex; align-items:flex-end; gap:3px; height:44px; margin-bottom:24px;}
.np-bars span{
  flex:1; background: linear-gradient(180deg, var(--cyan), var(--magenta));
  animation: bar 1.2s ease-in-out infinite;
}
.np-bars span:nth-child(odd){animation-duration:0.85s;}
.np-bars span:nth-child(3n){animation-duration:1.5s;}
@keyframes bar{0%,100%{height:15%;} 50%{height:100%;}}
.np-bars.paused span{animation-play-state:paused; height:20%;}
.np-controls{display:flex; align-items:center; gap:12px;}
.ctrl-btn{
  border:1px solid var(--line); border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition: all .2s; background:rgba(255,255,255,0.03); color:var(--ink);
  backdrop-filter:blur(6px); width:48px; height:48px; flex:none;
}
.ctrl-btn:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(53,240,224,0.08); box-shadow:0 0 12px rgba(53,240,224,0.35);}
.ctrl-btn.main{
  width:auto; height:auto; flex:1; padding:15px; border-color:var(--cyan); color:var(--cyan);
  font-family:'Share Tech Mono', monospace; font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
}
.ctrl-btn.main:hover{background:var(--cyan); color:var(--bg-deep);}

.radio-copy p{font-size:15px; line-height:1.7; color:var(--muted); margin-bottom:22px; max-width:420px;}
.radio-ctas{display:flex; gap:14px; flex-wrap:wrap;}

.recent-plays{margin-bottom:24px; max-width:420px;}
.recent-plays:empty{display:none;}
.recent-plays-label{
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:2px;
  color:var(--muted); opacity:0.7; margin-bottom:10px;
}
.recent-plays-item{
  font-size:13.5px; color:var(--muted); line-height:1.7;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.recent-plays-item .recent-plays-artist{opacity:0.65;}

/* ============ COMMUNITY PREVIEW ============ */
.community-preview{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding:32px;
  max-width:560px;
}
.community-preview-list:empty::after{
  content:"Nothing posted yet.";
  font-size:13.5px; color:var(--muted); font-style:italic; opacity:0.75;
}
.community-preview-item{
  padding:12px 0; border-top:1px solid var(--line);
}
.community-preview-item:first-child{border-top:none; padding-top:0;}
.community-preview-meta{
  font-family:'Share Tech Mono', monospace; font-size:11px; color:var(--cyan); opacity:0.85; margin-bottom:6px;
}
.community-preview-content{font-size:14px; color:var(--muted); line-height:1.5;}

/* ============ CONTACT ============ */
.contact-box{
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  padding:40px;
  max-width:560px;
}
.contact-box p{font-size:14px; color:var(--muted); line-height:1.6;}
.contact-box textarea{
  width:100%; margin-top:6px; padding:14px;
  background:var(--bg-deep); border:1px solid var(--line); color:var(--ink);
  font-family:'Inter', sans-serif; font-size:14px; line-height:1.5;
  resize:vertical;
}
.contact-box textarea:focus{outline:none; border-color:var(--cyan);}
.contact-status{margin-top:12px; font-size:13px; color:var(--cyan); min-height:1.4em;}
.tip-presets{display:flex; gap:12px; flex-wrap:wrap; margin-top:18px;}
.contact-loading{font-size:13px; color:var(--muted);}
.contact-thread{
  margin-top:16px; padding-top:16px; border-top:1px solid var(--line);
  font-size:13.5px; line-height:1.6;
}
.contact-thread:first-child{margin-top:0; padding-top:16px;}
#repliesArea{margin-top:16px;}
.contact-msg{color:var(--muted);}
.contact-msg strong{color:var(--ink);}
.contact-reply{margin-top:8px; color:var(--ink);}
.contact-reply strong{color:var(--cyan);}
.contact-pending{margin-top:8px; color:var(--muted); font-style:italic; opacity:0.75;}

/* ============ FOOTER ============ */
footer{
  position:relative; z-index:2;
  padding: 40px 6vw; display:flex; justify-content:space-between; align-items:center;
  border-top:1px solid var(--line); flex-wrap:wrap; gap:16px;
}
.foot-links{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; font-family:'Share Tech Mono', monospace; font-size:11.5px;}
.foot-links a{
  color:var(--cyan); border:1px solid var(--line); border-radius:8px;
  padding:6px 14px; backdrop-filter:blur(6px); transition:all .2s;
}
.foot-links a:hover{border-color:var(--cyan); background:rgba(53,240,224,0.08); box-shadow:0 0 12px rgba(53,240,224,0.35);}
.foot-meta{font-family:'Share Tech Mono', monospace; font-size:11.5px; color:var(--muted); opacity:0.85;}

@media (max-width: 860px){
  .radio-layout{grid-template-columns:1fr;}
  header{padding: 16px 5vw; flex-wrap:wrap; justify-content:center; text-align:center; gap:12px;}
  .navlinks{flex-wrap:wrap; justify-content:center; gap:8px;}
  .logo{font-size:15px;}
  .hero{padding: 90px 6vw 70px;}
}

/* ============ MINI PLAYER ============ */
#miniPlayer{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; align-items:center; gap:14px;
  height:60px; padding:0 18px;
  background:rgba(5,7,10,0.88);
  backdrop-filter:blur(6px);
  border-top:1px solid rgba(53,240,224,0.35);
  transform:translateY(100%);
  transition:transform .3s ease;
}
#miniPlayer.visible{transform:translateY(0);}
#miniPlayer .mini-dot{
  width:7px; height:7px; border-radius:50%; background:var(--cyan); flex:none;
  animation:pulse 1.6s ease-in-out infinite;
}
#miniPlayer.paused .mini-dot{animation:none; opacity:0.35;}
#miniPlayer .mini-info{flex:1; min-width:0; cursor:pointer;}
#miniPlayer .mini-track{
  font-family:'Share Tech Mono', monospace; font-size:13px; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#miniPlayer .mini-artist{
  font-family:'Share Tech Mono', monospace; font-size:11px; color:var(--muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
#miniPlayer .mini-bars{display:flex; align-items:flex-end; gap:2px; height:18px; flex:none;}
#miniPlayer .mini-bars span{
  width:3px; background:linear-gradient(180deg, var(--cyan), var(--magenta));
  animation:bar 1.2s ease-in-out infinite;
}
#miniPlayer .mini-bars span:nth-child(2){animation-duration:0.85s;}
#miniPlayer .mini-bars span:nth-child(3){animation-duration:1.5s;}
#miniPlayer.paused .mini-bars span{animation-play-state:paused; height:20%;}
#miniPlayer .mini-btn{
  border:1px solid var(--line); border-radius:8px; width:36px; height:36px; flex:none;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  background:rgba(255,255,255,0.03); color:var(--ink); cursor:pointer; transition:all .2s;
}
#miniPlayer .mini-btn:hover{border-color:var(--cyan); color:var(--cyan); background:rgba(53,240,224,0.08);}
#miniPlayer .mini-btn.main{border-color:var(--cyan); color:var(--cyan);}
#miniPlayer .mini-close{
  border:none; background:none; flex:none; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); font-size:16px; cursor:pointer;
}
#miniPlayer .mini-close:hover{color:var(--ink);}
body.mini-player-active{padding-bottom:60px;}

@media (max-width:500px){
  #miniPlayer{height:52px; gap:10px; padding:0 12px;}
  #miniPlayer .mini-mute{display:none;}
  body.mini-player-active{padding-bottom:52px;}
}