/* styles.css - redesigned dark neon / darknet edgy theme */
:root{
  --bg:#050507;
  --panel:#0b0b0f;
  --neon:#00f6ff;
  --accent:#ff00c8;
  --muted:#8b93a4;
  --glass: rgba(255,255,255,0.03);
  --mono: 'Roboto Mono', 'Courier New', monospace;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#050507 0%, #07060a 100%);color:#cbd5e1;font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}
.site-header{position:fixed;top:18px;left:18px;right:18px;display:flex;justify-content:space-between;align-items:center;z-index:40;pointer-events:auto}
.brand .logo{font-family:var(--mono);letter-spacing:6px;color:var(--neon);font-weight:700;font-size:18px;text-shadow:0 0 12px rgba(0,246,255,0.08)}
.brand .tag{color:var(--muted);font-size:12px;margin-top:2px}
.nav a{color:var(--muted);text-decoration:none;margin-left:18px;font-size:13px;padding:8px 10px;border-radius:6px}
.nav a:hover{color:var(--neon);background:rgba(0,246,255,0.03)}

/* Hero */
.hero{min-height:60vh;padding:120px 36px 80px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-inner{max-width:980px}
.hero h1{font-size:48px;line-height:1.02;margin:0 0 12px;color:white;text-shadow:0 6px 24px rgba(0,0,0,0.6)}
.lead{color:var(--muted);font-size:18px;margin-bottom:18px}
.cta .btn{display:inline-block;padding:12px 18px;border-radius:10px;background:linear-gradient(90deg,var(--neon),var(--accent));color:#050507;font-weight:600;text-decoration:none;margin-right:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.btn.ghost{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.03)}

/* Glitch accent */
.glitch{position:absolute;right:10px;top:40px;font-family:var(--mono);font-size:88px;color:#0f1720;mix-blend-mode:overlay;opacity:0.08;transform:rotate(-8deg)}

/* Panels */
.panel{background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);backdrop-filter:blur(4px);margin:28px 36px;padding:28px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.panel h2{margin:0 0 10px;color:var(--neon);font-family:var(--mono);letter-spacing:2px}

/* Player card */
.player-section .player-card{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.player-card .meta{min-width:220px}
.title{font-weight:700;color:white;font-size:18px;font-family:var(--mono)}
.desc{color:var(--muted);font-size:13px;margin-top:6px}
.controls{flex:1;display:flex;align-items:center;gap:12px}
.control-btn{width:64px;height:64px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,0.6)}
.control-btn img{width:28px;height:28px;filter:drop-shadow(0 6px 18px rgba(0,0,0,0.6))}
#seek{flex:1;appearance:none;height:6px;border-radius:6px;background:linear-gradient(90deg,var(--neon),var(--accent));outline:none}
#seek::-webkit-slider-thumb{appearance:none;width:14px;height:14px;border-radius:50%;background:white;box-shadow:0 4px 18px rgba(0,0,0,0.6)}
.time{min-width:110px;text-align:right;color:var(--muted);font-family:var(--mono)}

/* Visualizer (simple bars) */
.visualizer{width:100%;height:60px;margin-top:12px;display:grid;grid-template-columns:repeat(32,1fr);gap:4px}
.visualizer i{display:block;height:6px;background:linear-gradient(180deg,var(--neon),var(--accent));border-radius:3px;opacity:0.9;transform-origin:bottom;transition:height 120ms linear}

/* Footer */
.site-footer{text-align:center;color:var(--muted);padding:34px 12px 64px;font-size:13px}

/* Responsive */
@media (max-width:720px){
  .hero h1{font-size:28px}
  .site-header{left:12px;right:12px;top:12px}
  .control-btn{width:52px;height:52px}
  .visualizer{display:none}
}