: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;}
body{
  background: var(--bg);
  color: var(--ink);
  font-family:'Inter', sans-serif;
  min-height:100vh;
  position:relative;
}
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:32px; font-family:'Share Tech Mono', monospace; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase;}
.navlinks a{color:var(--muted); transition:color .2s;}
.navlinks a:hover{color:var(--cyan);}
.connect-btn{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:1px;
  border:1px solid var(--cyan); color:var(--cyan);
  padding:9px 18px; background:transparent; cursor:pointer;
  transition: all .2s;
}
.connect-btn:hover{background:var(--cyan); color:var(--bg-deep);}
.connect-btn:disabled{opacity:0.6; cursor:default;}
.connect-btn.connected{border-color:var(--ink); color:var(--ink); cursor:default; background:transparent;}
.connect-btn.connected:hover{background:transparent; color:var(--ink);}

/* ============ HERO / NOW PLAYING ============ */
.hero{
  position:relative; z-index:2;
  padding: 70px 6vw 100px;
  overflow:hidden;
}
.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; 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 .status-err{color:var(--danger);}
.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;
}
.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:28px; 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:50px; 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;}
.np-bars span:nth-child(4n){animation-duration:1.1s;}
@keyframes bar{0%,100%{height:15%;} 50%{height:100%;}}
.np-bars.paused span{animation-play-state:paused; height:20%;}
/* Real audio analysis available -- heights are driven directly by JS
   (per-frame frequency data) instead of the decorative keyframe loop
   above, which is the fallback when Web Audio analysis isn't available
   (unsupported browser, tainted cross-origin source, etc). */
.np-bars.audio-reactive span{animation:none; transition: height .08s linear;}
.np-bars.audio-reactive.paused span{height:6%; transition: height .3s ease;}

.np-audio{display:none;}
.np-meta{display:flex; justify-content:space-between; font-family:'Share Tech Mono', monospace; font-size:12.5px; color:var(--muted);}

.np-controls{display:flex; align-items:center; gap:12px; margin-top:26px;}
.ctrl-btn{
  border:1px solid var(--line); display:flex; align-items:center; justify-content:center;
  font-size:14px; cursor:pointer; transition: all .2s; background:transparent; color:var(--ink);
  width:48px; height:48px; flex:none;
}
.ctrl-btn:hover{border-color:var(--cyan); color:var(--cyan);}
.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);}
.listener-count{margin-left:auto; font-family:'Share Tech Mono', monospace; font-size:12.5px; color:var(--muted);}

.hero-copy .eyebrow{
  font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:3px; text-transform:uppercase;
  color:var(--magenta); margin-bottom:18px;
}
.hero-copy h1{
  font-family:'Orbitron', sans-serif; font-weight:700; font-size:clamp(28px,3.2vw,42px); line-height:1.15; margin-bottom:20px; color:var(--cyan);
}
.hero-copy p{font-size:16px; line-height:1.7; color:var(--muted); max-width:420px; margin-bottom:28px;}
.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);
  padding:12px 26px; transition: all .2s; cursor:pointer; background:transparent;
}
.hero-cta:hover{background:var(--cyan); color:var(--bg-deep);}

/* ============ TRACK LIST ============ */
.playlist{position:relative; z-index:2; padding: 30px 6vw 100px;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  margin-bottom:36px; 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(20px,2.4vw,28px); color:var(--ink);}
.section-note{font-size:13.5px; color:var(--muted); max-width:300px;}

.track-row{
  display:grid; grid-template-columns: 32px 1fr auto auto; align-items:center; gap:20px;
  padding: 16px 12px; border-bottom:1px solid var(--line);
  width:100%; text-align:left; color:inherit; font:inherit;
}
.track-num{font-family:'Share Tech Mono', monospace; font-size:12px; color:var(--muted);}
.track-info h4{font-size:15px; font-weight:500; margin-bottom:3px;}
.track-info span{font-size:12.5px; color:var(--muted); font-family:'Share Tech Mono', monospace;}
.track-tag{
  font-family:'Share Tech Mono', monospace; font-size:10.5px; letter-spacing:1px;
  border:1px solid var(--line); padding:4px 9px; opacity:0.85; white-space:nowrap; color:var(--cyan);
}
.track-dur{font-family:'Share Tech Mono', monospace; font-size:12.5px; color:var(--muted); min-width:40px; text-align:right;}
.playlist-empty, .playlist-error{font-family:'Share Tech Mono', monospace; font-size:13.5px; color:var(--muted); padding: 20px 12px;}
.playlist-error{color:var(--danger);}

/* ============ SUBMIT ============ */
.submit{
  position:relative; z-index:2; padding: 90px 6vw 110px;
  background: rgba(255,255,255,0.015);
  border-top:1px solid var(--line);
}
.submit-inner{display:grid; grid-template-columns: 0.9fr 1.1fr; gap:60px; align-items:start;}
.submit-copy h2{font-family:'Orbitron', sans-serif; font-weight:700; font-size:clamp(24px,2.8vw,32px); color:var(--ink); margin-bottom:18px;}
.submit-copy p{font-size:15px; line-height:1.7; color:var(--muted); margin-bottom:16px;}
.submit-steps{list-style:none; margin-top:24px;}
.submit-steps li{
  font-family:'Share Tech Mono', monospace; font-size:12.5px; color:var(--muted);
  padding:10px 0; border-bottom:1px solid var(--line); display:flex; gap:14px;
}
.submit-steps li span{color:var(--cyan);}
.submit-steps li code{color:var(--cyan);}

.submit-form{border:1px solid var(--line); padding:36px; background: rgba(255,255,255,0.015);}
.field{margin-bottom:22px;}
.field label{
  display:block; font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:1.5px;
  text-transform:uppercase; color:var(--muted); margin-bottom:8px;
}
.field input, .field textarea{
  width:100%; background:transparent; border:1px solid var(--line); color:var(--ink);
  padding:11px 14px; font-family:'Inter'; font-size:14px;
}
.field-hint{
  font-size:12px; color:var(--muted); margin-top:7px; line-height:1.5;
}
.field-hint code{
  font-family:'Share Tech Mono', monospace; color:var(--cyan);
}
.field-hint a{color:var(--cyan);}
.field-hint a:hover{text-decoration:underline;}
.field-optional-note{
  text-transform:none; color:var(--muted); letter-spacing:0; font-size:11px; opacity:0.85;
}
.preview-btn{
  width:100%; font-family:'Share Tech Mono', monospace; font-size:12px; letter-spacing:1px;
  border:1px solid var(--magenta); color:var(--magenta); background:transparent;
  padding:11px; cursor:pointer; transition: all .2s; text-transform:uppercase;
}
.preview-btn:hover{background:var(--magenta); color:var(--bg-deep);}
.preview-result{margin-top:10px; font-size:12px; font-family:'Share Tech Mono', monospace; color:var(--muted);}
.preview-result audio{width:100%; margin-top:8px;}
.preview-result.err{color:var(--danger);}
.preview-result.ok{color:var(--cyan);}
.field input[type="file"]{padding:9px 12px; font-family:'Share Tech Mono', monospace; font-size:12px;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--cyan);}
.field-checkbox label{
  display:flex; align-items:center; gap:8px; text-transform:none; letter-spacing:0;
  font-family:'Inter'; font-size:13.5px; color:var(--ink); margin-bottom:0;
}
.field-checkbox input[type="checkbox"]{width:auto; flex:none;}
.submit-btn{
  width:100%; font-family:'Share Tech Mono', monospace; font-size:13px; letter-spacing:1px;
  border:1px solid var(--cyan); color:var(--cyan); background:transparent;
  padding:13px; cursor:pointer; transition: all .2s; text-transform:uppercase;
}
.submit-btn:hover:not(:disabled){background:var(--cyan); color:var(--bg-deep);}
.submit-btn:disabled{opacity:0.5; cursor:default;}
.submit-note{font-size:12px; color:var(--muted); margin-top:14px; text-align:center; font-family:'Share Tech Mono', monospace;}
.submit-status{font-family:'Share Tech Mono', monospace; font-size:13px; margin-top:16px; text-align:center; min-height:1.2em;}
.submit-status.ok{color:var(--cyan);}
.submit-status.err{color:var(--danger);}
.submit-status.warn{color:var(--magenta);}

/* ============ 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; gap:26px; font-family:'Share Tech Mono', monospace; font-size:11.5px; color:var(--muted);}
.foot-links a:hover{color:var(--cyan);}
.foot-meta{font-family:'Share Tech Mono', monospace; font-size:11.5px; color:var(--muted); opacity:0.85;}

@media (max-width: 860px){
  .hero-inner, .submit-inner{grid-template-columns:1fr;}
  .navlinks{display:none;}
  .track-row{grid-template-columns: 24px 1fr auto;}
  .track-tag{display:none;}
  header{padding: 16px 5vw;}
  .connect-btn{white-space:nowrap; font-size:11px; padding:8px 12px;}
  .logo{font-size:15px;}
}

/* ============ METADATA HELP ============ */
.help-main{max-width:760px;}
.help-intro{font-size:15px; line-height:1.7; color:var(--muted); margin:20px 0 32px;}
.help-intro a{color:var(--cyan);}
.help-intro a:hover{text-decoration:underline;}
.help-intro code, .help-fields code, .help-notes code{
  font-family:'Share Tech Mono', monospace; color:var(--cyan); font-size:0.92em;
}
.help-fields h3, .help-notes h3{
  font-family:'Orbitron', sans-serif; font-size:15px; color:var(--ink); margin: 36px 0 16px;
}
.help-table{width:100%; border-collapse:collapse; font-size:13.5px; margin-bottom:8px;}
.help-table th, .help-table td{
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
}
.help-table th{
  font-family:'Share Tech Mono', monospace; font-size:11px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted);
}
.help-table td{color:var(--ink);}
.help-notes ul{color:var(--muted); font-size:14px; line-height:1.7; padding-left:20px;}
.help-notes li{margin-bottom:10px;}
.help-back{display:inline-block; margin-top:40px;}

@media (max-width: 640px){
  .help-table{font-size:12.5px;}
  .help-table th, .help-table td{padding:8px 8px;}
}

/* ============ ADMIN ============ */
.admin-main{position:relative; z-index:2; padding: 70px 6vw 110px; max-width:980px; margin:0 auto;}
.admin-gate{
  border:1px solid var(--line); background: rgba(255,255,255,0.02);
  padding:48px; text-align:center; font-family:'Share Tech Mono', monospace;
}
.admin-gate h2{font-family:'Orbitron', sans-serif; color:var(--ink); margin-bottom:14px; font-size:20px;}
.admin-gate p{color:var(--muted); font-size:13.5px; line-height:1.6; margin-bottom:22px;}
.admin-gate.denied{border-color: rgba(255,95,109,0.4);}
.admin-gate.denied h2{color:var(--danger);}

.setup-panel{
  border:1px dashed var(--line); background: rgba(53,240,224,0.03);
  padding:28px; margin-bottom:40px; font-family:'Share Tech Mono', monospace; font-size:13px;
}
.setup-panel h3{font-family:'Orbitron', sans-serif; font-size:15px; color:var(--cyan); margin-bottom:12px;}
.setup-panel p{color:var(--muted); line-height:1.6; margin-bottom:14px; font-family:'Inter'; font-size:14px;}
.setup-panel code{
  display:block; background: rgba(0,0,0,0.3); border:1px solid var(--line);
  padding:12px 14px; margin-bottom:14px; word-break:break-all; color:var(--cyan);
}
.setup-panel p code{
  display:inline; background:none; border:none; padding:0; margin:0; word-break:normal;
}

.pending-row{
  display:grid; grid-template-columns: 1fr auto auto; align-items:center; gap:20px;
  padding: 18px 14px; border-bottom:1px solid var(--line);
}
.pending-row .track-info h4{font-size:15px; margin-bottom:4px;}
.pending-row .track-info span{font-size:12.5px; color:var(--muted); font-family:'Share Tech Mono', monospace;}
.pending-row audio{height:32px; max-width:220px;}
.approve-btn{
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:1px;
  border:1px solid var(--cyan); color:var(--cyan); background:transparent;
  padding:9px 16px; cursor:pointer; transition: all .2s; text-transform:uppercase; white-space:nowrap;
}
.approve-btn:hover:not(:disabled){background:var(--cyan); color:var(--bg-deep);}
.approve-btn:disabled{opacity:0.5; cursor:default; border-color:var(--line); color:var(--ink);}
.approve-btn.done{border-color:var(--ink); color:var(--ink);}
.pending-actions{display:flex; gap:8px; flex-wrap:wrap;}
.reject-btn{
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:1px;
  border:1px solid var(--danger); color:var(--danger); background:transparent;
  padding:9px 16px; cursor:pointer; transition: all .2s; text-transform:uppercase; white-space:nowrap;
}
.reject-btn:hover:not(:disabled){background:var(--danger); color:var(--bg-deep);}
.reject-btn:disabled{opacity:0.5; cursor:default;}

.rotation-tools{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:14px 0 20px; border-bottom:1px solid var(--line); margin-bottom:8px;
}
.reshuffle-btn{
  font-family:'Share Tech Mono', monospace; font-size:11.5px; letter-spacing:1px;
  border:1px solid var(--magenta); color:var(--magenta); background:transparent;
  padding:10px 18px; cursor:pointer; transition: all .2s; text-transform:uppercase; white-space:nowrap;
}
.reshuffle-btn:hover:not(:disabled){background:var(--magenta); color:var(--bg-deep);}
.reshuffle-btn:disabled{opacity:0.5; cursor:default;}
.rotation-tools-hint{font-size:12.5px; color:var(--muted); line-height:1.5;}