:root{
    --bg:#050514;
    --panel:#0b0d18cc;
    --glass:#0f1220cc;
    --text:#e9f0ff;
    --muted:#9aa6bf;
    --accent1:#4dd0e1; /* cyan */
    --accent2:#9b59ff; /* purple */
    --soft:#0e1220;
    --radius:16px;
  }
  
  /* Base */
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
    background:var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
  }
  
  /* Background canvas fills screen */
  #bgVisualizer{
    position:fixed; inset:0; z-index:-2; display:block;
    background: radial-gradient(1200px 700px at 10% 10%, #07102a 0%, transparent 40%), linear-gradient(180deg,#04040a, #02020a 60%);
  }
  
  /* Site container */
  .site{position:relative; z-index:2; padding:20px; max-width:1200px; margin:0 auto}
  
  /* Header */
  .site-header{
    display:flex; justify-content:space-between; align-items:center; gap:20px;
    padding:12px 16px; border-radius:12px; margin-bottom:18px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
    border:1px solid rgba(255,255,255,0.03);
  }
  .brand{display:flex; gap:12px; align-items:center}
  .logo{width:56px;height:56px;border-radius:8px;object-fit:cover;filter:drop-shadow(0 8px 30px rgba(75,0,130,0.25))}
  .site-header h1{font-size:20px;margin:0;letter-spacing:0.6px}
  .sub{color:var(--muted); margin:4px 0 0; font-size:13px}
  
  /* Nav */
  .nav a{color:var(--muted); text-decoration:none; margin-left:14px; font-weight:600; padding:8px 12px; border-radius:999px}
  .nav a:hover{color:var(--text); background:rgba(77,208,225,0.06)}
  
  /* Visualizer area */
  .visualizer-area{display:flex; justify-content:center; margin:8px 0 22px}
  .visualizer-wrap{position:relative; width:min(760px,92vw); height:min(520px, 72vw); border-radius:20px; overflow:hidden; background:linear-gradient(180deg,#04102a66,#02061766); border:1px solid rgba(255,255,255,0.03)}
  #visualizer{width:100%; height:100%; display:block}
  .visual-overlay{position:absolute; left:20px; top:20px; z-index:3; color:var(--text)}
  .visual-overlay h2{margin:0;font-size:34px; text-shadow:0 6px 28px rgba(155,89,255,0.12); letter-spacing:1px}
  .visual-overlay .tag{color:var(--muted); margin-top:6px}
  
  /* Player section */
  .player-section{display:grid; grid-template-columns:320px 1fr; gap:20px; margin-top:20px; padding:18px; background:var(--panel); border-radius:18px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 20px 40px rgba(0,0,0,0.6)}
  .glass{backdrop-filter:blur(8px) saturate(130%)}
  
  /* Left column */
  .left{display:flex; flex-direction:column; gap:12px; align-items:center}
  .cover{width:220px; height:220px; border-radius:12px; object-fit:cover; box-shadow:0 18px 40px rgba(0,0,0,0.6)}
  .meta{text-align:center}
  .meta h3{margin:10px 0 2px; font-size:18px}
  .meta p{color:var(--muted); margin:0}
  
  /* Controls */
  .controls{display:flex; gap:12px; align-items:center}
  .ctrl{width:52px;height:52px;border-radius:12px;border:none;background:linear-gradient(180deg,#061029,#051021); color:var(--accent1); font-size:20px; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,0.6)}
  .ctrl.primary{width:68px;height:68px;font-size:22px; background:linear-gradient(135deg,var(--accent2),var(--accent1)); color:#061021; transform:translateY(0)}
  .ctrl:hover{transform:translateY(-4px)}
  
  /* Seek */
  .seek-wrap{width:100%; display:flex; gap:10px; align-items:center}
  .seek-wrap span{font-size:13px; color:var(--muted); width:44px; text-align:center}
  .seek-wrap input[type="range"]{flex:1; appearance:none; height:8px; border-radius:999px; background:linear-gradient(90deg,#ffffff14,#ffffff06); outline:none}
  .seek-wrap input[type="range"]::-webkit-slider-thumb{appearance:none; width:14px; height:14px; border-radius:50%; background:linear-gradient(135deg,var(--accent1),var(--accent2)); box-shadow:0 6px 16px rgba(155,89,255,0.12)}
  
  /* Misc */
  .misc{display:flex; gap:12px; align-items:center; margin-top:2px}
  .volume input{width:120px}
  .badges{display:flex; gap:8px}
  .badges span{padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px; background:rgba(255,255,255,0.03); color:var(--muted)}
  .badges .off{opacity:0.6}
  
  /* Right column */
  .right{display:flex; flex-direction:column; gap:12px}
  .mini-viz{width:100%; height:140px; border-radius:12px; background:linear-gradient(180deg,#02061a,#04102a); border:1px solid rgba(255,255,255,0.02)}
  .playlist-header{display:flex; justify-content:space-between; align-items:center}
  .playlist{list-style:none; max-height:300px; overflow:auto; padding:0; margin:0}
  .playlist li{display:flex; gap:12px; align-items:center; padding:10px; border-radius:10px; background:rgba(255,255,255,0.02); margin-bottom:8px; cursor:pointer}
  .playlist li:hover{background:linear-gradient(90deg, rgba(77,208,225,0.06), rgba(155,89,255,0.03))}
  .playlist img{width:56px; height:56px; object-fit:cover; border-radius:8px}
  
  /* Videos section */
  .videos{margin-top:20px; padding:14px}
  .video-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
  .video-card{border-radius:12px; overflow:hidden; cursor:pointer; background:linear-gradient(180deg,#071026,#031022); border:1px solid rgba(255,255,255,0.03); box-shadow:0 14px 40px rgba(0,0,0,0.6)}
  .video-card img{width:100%; height:140px; object-fit:cover}
  .vtitle{padding:10px; color:var(--muted); font-size:14px}
  
  /* About */
  .about{margin-top:22px; padding:16px}
  .about-inner{display:flex; gap:16px; align-items:center}
  .about-logo{width:90px; height:90px; object-fit:cover; border-radius:8px}
  
  /* Footer */
  .site-footer{margin:28px 0; text-align:center; color:var(--muted)}
  
  /* Lightbox */
  .lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.9); z-index:999}
  .lb-close{position:absolute; right:28px; top:22px; background:transparent; border:none; color:#fff; font-size:24px; cursor:pointer}
  .lb-frame{width:min(92vw,1200px); aspect-ratio:16/9; border-radius:12px; overflow:hidden}
  .lb-frame iframe{width:100%; height:100%}
  
  /* Utilities */
  .btn-ghost{background:transparent; border:1px solid rgba(255,255,255,0.04); padding:8px 10px; border-radius:8px; color:var(--muted); cursor:pointer}
  
  /* Responsive */
  @media (max-width:980px){
    .player-section{grid-template-columns:1fr; padding:14px}
    .cover{width:160px;height:160px}
    .visual-overlay h2{font-size:26px}
    .visualizer-wrap{height:52vw}
  }