/* ============================================
   SurAI - Hindi Song Generator
   Acid Neon Music Theme
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
  --black:      #0D0D0D;
  --black2:     #111111;
  --black3:     #161616;
  --black4:     #1c1c1c;
  --neon-green: #CCFF00;
  --neon-pink:  #FF3CAC;
  --neon-blue:  #00D4FF;
  --neon-purple:#B44FFF;
  --white:      #F0F0F0;
  --grey:       #888888;
  --grey2:      #555555;
  --border:     rgba(255,255,255,0.07);
  --border-g:   rgba(204,255,0,0.25);
  --border-p:   rgba(255,60,172,0.25);

  --grad-gp:    linear-gradient(135deg, #CCFF00, #FF3CAC);
  --grad-gp-soft: linear-gradient(135deg, rgba(204,255,0,0.12), rgba(255,60,172,0.12));

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-neon-g: 0 0 20px rgba(204,255,0,0.3);
  --shadow-neon-p: 0 0 20px rgba(255,60,172,0.3);
  --shadow-card:   0 8px 40px rgba(0,0,0,0.6);

  --t: all 0.28s cubic-bezier(0.4,0,0.2,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: 'Outfit', sans-serif;
  background: var(--black);
  color: var(--white);
  overflow-x: hidden;
  line-height: 1.6;
}
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; }
select,textarea,input { font-family:inherit; }

/* ---- Noise Texture ---- */
.noise {
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.4;
}

/* ---- Grid Background ---- */
.grid-bg {
  position: fixed; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(204,255,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,255,0,0.03) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Navbar ---- */
.navbar {
  position: fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: 1200px; margin:0 auto; padding:0 24px;
  height: 66px; display:flex; align-items:center; justify-content:space-between;
}
.logo { display:flex; align-items:center; gap:10px; }
.logo-mark {
  width:36px; height:36px;
  background: var(--grad-gp);
  border-radius: var(--r-sm);
  display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-neon-g);
}
.logo-wave { font-size:1.2rem; color:#000; font-weight:900; }
.logo-name {
  font-family:'Syne',sans-serif;
  font-size:1.4rem; font-weight:800;
  background: var(--grad-gp);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.logo-tag {
  font-size:0.6rem; font-weight:700; letter-spacing:1.5px;
  background: var(--neon-green); color:#000;
  padding:2px 7px; border-radius:4px;
}
.nav-links { display:flex; align-items:center; gap:6px; }
.nav-links a {
  color:var(--grey); font-size:0.88rem; font-weight:500;
  padding:7px 13px; border-radius:var(--r-sm); transition:var(--t);
}
.nav-links a:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.nav-cta {
  background: var(--grad-gp) !important; color:#000 !important;
  font-weight:700 !important; padding:8px 18px !important;
  border-radius:var(--r-sm) !important;
  box-shadow: var(--shadow-neon-g) !important;
}
.nav-cta:hover { opacity:0.9; transform:translateY(-1px); }
.hamburger { display:none; flex-direction:column; gap:5px; padding:8px; }
.hamburger span { display:block; width:22px; height:2px; background:var(--white); border-radius:2px; transition:var(--t); }
.mobile-nav {
  display:none; flex-direction:column;
  padding:10px 24px 14px; border-top:1px solid var(--border); gap:2px;
}
.mobile-nav a { color:var(--grey); font-size:0.92rem; padding:9px 12px; border-radius:var(--r-sm); transition:var(--t); }
.mobile-nav a:hover { color:var(--white); background:rgba(255,255,255,0.05); }
.mobile-nav.open { display:flex; }

/* ---- Utility ---- */
.neon-green { color:var(--neon-green); }
.neon-pink  { color:var(--neon-pink); }
.sec-tag {
  display:inline-block;
  border:1px solid var(--border-g);
  color:var(--neon-green);
  font-size:0.72rem; font-weight:700; letter-spacing:2px; text-transform:uppercase;
  padding:5px 14px; border-radius:20px; margin-bottom:14px;
  background: rgba(204,255,0,0.06);
}

/* ---- HERO ---- */
.hero {
  min-height:100vh; display:flex; align-items:center;
  max-width:1200px; margin:0 auto; padding:100px 24px 60px;
  gap:60px; position:relative; z-index:1;
}
.hero-left { flex:1; max-width:560px; }
.hero-pill {
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(204,255,0,0.08); border:1px solid var(--border-g);
  color:var(--neon-green); font-size:0.82rem; font-weight:600;
  padding:7px 16px; border-radius:20px; margin-bottom:22px;
  animation: fadeUp 0.6s ease both;
}
.pill-dot {
  width:7px; height:7px; background:var(--neon-green); border-radius:50%;
  animation: blink 1.5s ease infinite;
}
@keyframes blink { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.hero-h1 {
  font-family:'Syne',sans-serif;
  font-size: clamp(2.4rem,5.5vw,4rem);
  font-weight:800; line-height:1.1; margin-bottom:18px;
  animation: fadeUp 0.6s ease 0.1s both;
}
.hero-p {
  color:var(--grey); font-size:1.05rem; line-height:1.7;
  margin-bottom:32px; animation: fadeUp 0.6s ease 0.2s both;
}
.hero-btns {
  display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;
  animation: fadeUp 0.6s ease 0.3s both;
}
.btn-neon {
  display:inline-flex; align-items:center; gap:9px;
  background: var(--grad-gp); color:#000;
  font-size:0.95rem; font-weight:700;
  padding:13px 26px; border-radius:var(--r-md);
  box-shadow: var(--shadow-neon-g); transition:var(--t);
}
.btn-neon:hover { transform:translateY(-2px); box-shadow:0 0 32px rgba(204,255,0,0.5); }
.btn-neon.small { font-size:0.85rem; padding:10px 20px; }
.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  background:transparent; border:1px solid var(--border-g);
  color:var(--neon-green); font-size:0.95rem; font-weight:600;
  padding:13px 26px; border-radius:var(--r-md); transition:var(--t);
}
.btn-outline:hover { background:rgba(204,255,0,0.08); transform:translateY(-2px); }

.hero-counts {
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  animation: fadeUp 0.6s ease 0.4s both;
}
.hcount { text-align:center; }
.hcount span:first-child { font-family:'Syne',sans-serif; font-size:1.6rem; font-weight:800; color:var(--neon-green); }
.hcount span:nth-child(2) { font-size:1rem; font-weight:700; color:var(--neon-green); }
.hcount small { display:block; font-size:0.72rem; color:var(--grey); margin-top:2px; }
.hcount-div { width:1px; height:32px; background:var(--border); }

/* Hero Right */
.hero-right {
  flex:1; display:flex; flex-direction:column;
  align-items:center; gap:20px; position:relative;
  animation: fadeUp 0.6s ease 0.2s both;
}
.vinyl-wrap { position:relative; }
.vinyl {
  width:220px; height:220px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #2a2a2a, #0d0d0d);
  border:3px solid #222;
  display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  box-shadow: 0 0 60px rgba(204,255,0,0.15), 0 0 120px rgba(255,60,172,0.1);
  animation: vinylSpin 8s linear infinite paused;
}
.vinyl.playing { animation-play-state:running; }
.vinyl::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background: repeating-radial-gradient(circle at center, transparent 20px, rgba(255,255,255,0.02) 21px, transparent 22px);
}
.vinyl-center {
  width:50px; height:50px; border-radius:50%;
  background: var(--grad-gp);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; z-index:2;
  box-shadow: 0 0 20px rgba(204,255,0,0.5);
}
.vinyl-ring {
  position:absolute; border-radius:50%; border:1px solid rgba(255,255,255,0.05);
}
.r1 { width:80px; height:80px; }
.r2 { width:130px; height:130px; }
.r3 { width:180px; height:180px; }
@keyframes vinylSpin { to { transform:rotate(360deg); } }
.vinyl-glow {
  position:absolute; inset:-30px; border-radius:50%;
  background: radial-gradient(ellipse, rgba(204,255,0,0.1), transparent 70%);
  pointer-events:none; z-index:-1;
}

/* Hero Waveform */
.hero-waveform {
  display:flex; align-items:center; gap:3px; height:40px;
}
.wv-bar {
  width:4px; background:var(--neon-green); border-radius:2px;
  animation: wvDance 1s ease-in-out infinite;
  opacity:0.7;
}
.wv-bar:nth-child(odd) { background:var(--neon-pink); }
.wv-bar:nth-child(1){height:10px;animation-delay:0s}
.wv-bar:nth-child(2){height:22px;animation-delay:.05s}
.wv-bar:nth-child(3){height:30px;animation-delay:.1s}
.wv-bar:nth-child(4){height:18px;animation-delay:.15s}
.wv-bar:nth-child(5){height:36px;animation-delay:.2s}
.wv-bar:nth-child(6){height:24px;animation-delay:.25s}
.wv-bar:nth-child(7){height:14px;animation-delay:.3s}
.wv-bar:nth-child(8){height:32px;animation-delay:.35s}
.wv-bar:nth-child(9){height:20px;animation-delay:.4s}
.wv-bar:nth-child(10){height:28px;animation-delay:.45s}
.wv-bar:nth-child(11){height:16px;animation-delay:.5s}
.wv-bar:nth-child(12){height:38px;animation-delay:.55s}
.wv-bar:nth-child(13){height:22px;animation-delay:.6s}
.wv-bar:nth-child(14){height:12px;animation-delay:.65s}
.wv-bar:nth-child(15){height:30px;animation-delay:.7s}
.wv-bar:nth-child(16){height:18px;animation-delay:.75s}
.wv-bar:nth-child(17){height:26px;animation-delay:.8s}
.wv-bar:nth-child(18){height:14px;animation-delay:.85s}
.wv-bar:nth-child(19){height:34px;animation-delay:.9s}
.wv-bar:nth-child(20){height:20px;animation-delay:.95s}
@keyframes wvDance { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0.3)} }

.now-playing-card {
  display:flex; align-items:center; gap:12px;
  background:var(--black3); border:1px solid var(--border-g);
  border-radius:var(--r-md); padding:12px 18px;
  box-shadow: var(--shadow-neon-g);
  width:100%; max-width:280px;
}
.np-icon { font-size:1.4rem; }
.np-info { flex:1; }
.np-title { display:block; font-size:0.88rem; font-weight:700; color:var(--white); }
.np-sub { font-size:0.72rem; color:var(--grey); }
.np-play {
  width:32px; height:32px; background:var(--grad-gp); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:#000; font-weight:900;
  box-shadow:var(--shadow-neon-g);
}

/* ---- GENRES ---- */
.genres { padding:60px 0; position:relative; z-index:1; }
.genres-inner { max-width:1200px; margin:0 auto; padding:0 24px; text-align:center; }
.genres-title {
  font-family:'Syne',sans-serif; font-size:1.5rem; font-weight:700;
  margin-bottom:24px; color:var(--grey);
}
.genre-pills { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.gpill {
  background:var(--black3); border:1px solid var(--border);
  color:var(--grey); font-size:0.85rem; font-weight:600;
  padding:9px 18px; border-radius:20px; transition:var(--t);
}
.gpill:hover { border-color:var(--border-g); color:var(--neon-green); background:rgba(204,255,0,0.06); }
.gpill.active {
  background:var(--grad-gp); color:#000; border-color:transparent;
  box-shadow:var(--shadow-neon-g);
}

/* ---- GENERATOR ---- */
.generator { padding:80px 0; position:relative; z-index:1; }
.gen-inner { max-width:900px; margin:0 auto; padding:0 24px; }
.gen-header { text-align:center; margin-bottom:40px; }
.gen-header h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; margin-bottom:10px; }
.gen-header p { color:var(--grey); font-size:1rem; }

.gen-card {
  background:var(--black2); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:36px;
  box-shadow:var(--shadow-card); position:relative; overflow:hidden;
}
.gen-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--grad-gp);
}

/* Tabs */
.gen-tabs { display:flex; gap:6px; margin-bottom:28px; background:var(--black3); padding:5px; border-radius:var(--r-md); }
.gtab {
  flex:1; padding:10px; border-radius:var(--r-sm);
  font-size:0.85rem; font-weight:600; color:var(--grey); transition:var(--t);
}
.gtab:hover { color:var(--white); }
.gtab.active { background:var(--grad-gp); color:#000; box-shadow:var(--shadow-neon-g); }

.tab-panel { display:none; }
.tab-panel.active { display:block; }

.field-label {
  display:flex; align-items:center; gap:8px;
  font-size:0.85rem; font-weight:600; color:var(--grey);
  margin-bottom:10px;
}
.textarea-box { position:relative; margin-bottom:12px; }
.textarea-box textarea {
  width:100%; background:var(--black3); border:1px solid var(--border);
  border-radius:var(--r-md); color:var(--white);
  font-size:0.97rem; line-height:1.65; padding:14px 18px 36px;
  resize:vertical; min-height:110px; outline:none; transition:var(--t);
}
.textarea-box textarea::placeholder { color:var(--grey2); }
.textarea-box textarea:focus { border-color:var(--border-g); box-shadow:0 0 0 3px rgba(204,255,0,0.08); }
.char-info { position:absolute; bottom:10px; right:14px; font-size:0.72rem; color:var(--grey2); }

.quick-ideas { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quick-ideas span { font-size:0.78rem; color:var(--grey2); white-space:nowrap; }
.qidea {
  background:rgba(255,255,255,0.04); border:1px solid var(--border);
  color:var(--grey); font-size:0.76rem; font-weight:500;
  padding:5px 12px; border-radius:20px; transition:var(--t);
}
.qidea:hover { background:rgba(204,255,0,0.08); border-color:var(--border-g); color:var(--neon-green); }

/* Theme Grid */
.theme-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:8px; }
.theme-btn {
  background:var(--black3); border:1px solid var(--border);
  color:var(--grey); font-size:0.8rem; font-weight:600;
  padding:10px 6px; border-radius:var(--r-sm); transition:var(--t); text-align:center;
}
.theme-btn:hover { border-color:var(--border-p); color:var(--neon-pink); background:rgba(255,60,172,0.06); }
.theme-btn.active { background:rgba(255,60,172,0.15); border-color:var(--neon-pink); color:var(--neon-pink); }

/* Intensity Slider */
.intensity-row {
  display:flex; align-items:center; gap:14px;
  font-size:0.82rem; color:var(--grey);
}
.neon-slider {
  flex:1; -webkit-appearance:none; height:4px;
  background:linear-gradient(90deg, var(--neon-green) var(--val,70%), var(--black4) var(--val,70%));
  border-radius:2px; outline:none; cursor:pointer;
}
.neon-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:16px; height:16px;
  background:var(--neon-green); border-radius:50%;
  box-shadow:var(--shadow-neon-g); cursor:pointer;
}
.intensity-val {
  font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:800;
  color:var(--neon-green); min-width:24px; text-align:center;
}

/* Voice Recorder */
.voice-recorder { text-align:center; padding:10px 0; }
.recorder-visual { display:flex; flex-direction:column; align-items:center; gap:16px; margin-bottom:16px; }
.mic-ring {
  width:90px; height:90px; border-radius:50%;
  border:2px solid var(--border-g);
  display:flex; align-items:center; justify-content:center;
  transition:var(--t);
}
.mic-ring.recording {
  border-color:var(--neon-pink);
  box-shadow:0 0 0 8px rgba(255,60,172,0.1), 0 0 30px rgba(255,60,172,0.3);
  animation:micPulse 1s ease infinite;
}
@keyframes micPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.mic-btn {
  width:70px; height:70px; border-radius:50%;
  background:var(--grad-gp); color:#000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-neon-g); transition:var(--t);
}
.mic-btn:hover { transform:scale(1.05); }
.mic-btn.recording { background:linear-gradient(135deg,#FF3CAC,#ff0066); box-shadow:var(--shadow-neon-p); }

.rec-waveform {
  display:flex; align-items:center; gap:3px; height:32px; opacity:0.3; transition:var(--t);
}
.rec-waveform.active { opacity:1; }
.rw-bar {
  width:3px; background:var(--neon-pink); border-radius:2px;
  height:8px; transition:height 0.1s ease;
}

.rec-status { font-size:0.88rem; color:var(--grey); margin-bottom:8px; }
.rec-timer { font-size:0.88rem; color:var(--neon-pink); font-weight:700; margin-bottom:12px; }
.rec-controls { display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.rec-action {
  font-size:0.82rem; font-weight:600; padding:8px 16px;
  border-radius:var(--r-sm); transition:var(--t);
}
.rec-action.play { background:rgba(204,255,0,0.1); border:1px solid var(--border-g); color:var(--neon-green); }
.rec-action.use { background:var(--grad-gp); color:#000; }
.rec-action.del { background:rgba(255,60,172,0.1); border:1px solid var(--border-p); color:var(--neon-pink); }
.rec-action:hover { opacity:0.85; transform:translateY(-1px); }
.rec-hint { font-size:0.78rem; color:var(--grey2); max-width:400px; margin:0 auto; }

/* Settings Bar */
.settings-bar {
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:24px 0 20px;
}
.sbar-group label {
  display:block; font-size:0.75rem; font-weight:700;
  color:var(--grey2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:7px;
}
.neon-select {
  width:100%; background:var(--black3); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--white);
  font-size:0.85rem; font-weight:500; padding:9px 32px 9px 12px;
  outline:none; transition:var(--t); cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
}
.neon-select:focus { border-color:var(--border-g); }

/* Generate Button */
.gen-btn {
  width:100%; background:var(--grad-gp); color:#000;
  font-family:'Syne',sans-serif; font-size:1.05rem; font-weight:800;
  padding:17px; border-radius:var(--r-md);
  box-shadow:var(--shadow-neon-g); transition:var(--t);
  position:relative; overflow:hidden; letter-spacing:0.5px;
}
.gen-btn::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,0.15),transparent);
  opacity:0; transition:var(--t);
}
.gen-btn:hover { transform:translateY(-2px); box-shadow:0 0 40px rgba(204,255,0,0.5); }
.gen-btn:hover::before { opacity:1; }
.gen-btn:disabled { opacity:0.7; cursor:not-allowed; transform:none; }
.gen-btn-text,.gen-btn-loading {
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.spin { animation:spin 1s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* Progress */
.gen-progress {
  margin-top:24px; padding:20px;
  background:var(--black3); border:1px solid var(--border);
  border-radius:var(--r-md);
}
.gp-bar-track {
  height:5px; background:rgba(255,255,255,0.06);
  border-radius:3px; overflow:hidden; margin-bottom:18px;
}
.gp-bar-fill {
  height:100%; background:var(--grad-gp); border-radius:3px;
  width:0%; transition:width 0.4s ease;
  box-shadow:var(--shadow-neon-g);
}
.gp-steps { display:flex; justify-content:space-between; gap:6px; margin-bottom:12px; }
.gp-step {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  flex:1; opacity:0.35; transition:var(--t);
}
.gp-step.active,.gp-step.done { opacity:1; }
.gps-dot {
  width:9px; height:9px; border-radius:50%;
  background:var(--grey2); transition:var(--t);
}
.gp-step.active .gps-dot { background:var(--neon-green); box-shadow:var(--shadow-neon-g); animation:blink 0.8s ease infinite; }
.gp-step.done .gps-dot { background:var(--neon-green); }
.gp-step span { font-size:0.68rem; color:var(--grey); text-align:center; }
.gp-step.active span,.gp-step.done span { color:var(--white); }
.gp-label { font-size:0.82rem; color:var(--grey); text-align:center; }

/* Song Result */
.song-result {
  margin-top:24px; background:var(--black3);
  border:1px solid var(--border-g); border-radius:var(--r-lg);
  overflow:hidden;
}
.sr-header {
  display:flex; align-items:center; gap:16px;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.sr-disc {
  width:52px; height:52px; border-radius:50%;
  background:var(--grad-gp); display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; box-shadow:var(--shadow-neon-g);
  animation:vinylSpin 4s linear infinite paused;
}
.sr-disc.playing { animation-play-state:running; }
.sr-info { flex:1; }
.sr-info h3 { font-family:'Syne',sans-serif; font-size:1.1rem; font-weight:700; margin-bottom:3px; }
.sr-info p { font-size:0.8rem; color:var(--grey); }
.sr-badge {
  background:rgba(204,255,0,0.1); border:1px solid var(--border-g);
  color:var(--neon-green); font-size:0.72rem; font-weight:700;
  padding:4px 12px; border-radius:20px;
}

/* Audio Player */
.audio-player { padding:20px 24px; border-bottom:1px solid var(--border); }
.ap-waveform {
  height:60px; background:var(--black4); border-radius:var(--r-sm);
  position:relative; overflow:hidden; cursor:pointer; margin-bottom:14px;
}
.ap-progress-overlay {
  position:absolute; top:0; left:0; bottom:0; width:0%;
  background:rgba(204,255,0,0.08); transition:width 0.3s ease;
  border-right:2px solid var(--neon-green);
}
.ap-bars {
  position:absolute; inset:0;
  display:flex; align-items:center; gap:2px; padding:0 8px;
}
.ap-bar {
  flex:1; border-radius:1px; background:rgba(255,255,255,0.15);
  transition:background 0.3s ease;
}
.ap-bar.played { background:var(--neon-green); }
.ap-controls { display:flex; align-items:center; gap:14px; }
.ap-btn {
  font-size:1rem; color:var(--grey); transition:var(--t); padding:4px;
}
.ap-btn:hover { color:var(--neon-green); }
.ap-play-btn {
  width:44px; height:44px; border-radius:50%;
  background:var(--grad-gp); color:#000;
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-neon-g); transition:var(--t);
}
.ap-play-btn:hover { transform:scale(1.08); }
.ap-time { font-size:0.8rem; color:var(--grey); flex:1; }
.ap-vol { display:flex; align-items:center; gap:8px; }
.vol-slider {
  width:80px; -webkit-appearance:none; height:3px;
  background:var(--black4); border-radius:2px; outline:none; cursor:pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:12px; height:12px;
  background:var(--neon-green); border-radius:50%; cursor:pointer;
}

/* Lyrics */
.lyrics-section { padding:16px 24px; border-bottom:1px solid var(--border); }
.lyrics-header {
  display:flex; justify-content:space-between; align-items:center;
  font-size:0.85rem; font-weight:600; color:var(--grey);
}
.lyrics-toggle {
  font-size:0.78rem; color:var(--neon-green); font-weight:600;
  background:rgba(204,255,0,0.06); border:1px solid var(--border-g);
  padding:4px 12px; border-radius:20px; transition:var(--t);
}
.lyrics-toggle:hover { background:rgba(204,255,0,0.12); }
.lyrics-body { margin-top:14px; }
.lyrics-text {
  font-size:0.9rem; line-height:2; color:var(--grey);
  white-space:pre-line;
}
.lyrics-text .lyric-line { transition:var(--t); }
.lyrics-text .lyric-line.active { color:var(--neon-green); font-weight:600; }

/* Result Actions */
.sr-actions { display:flex; gap:10px; padding:18px 24px; flex-wrap:wrap; }
.sra-btn {
  display:inline-flex; align-items:center; gap:7px;
  font-size:0.82rem; font-weight:600; padding:9px 16px;
  border-radius:var(--r-sm); transition:var(--t);
}
.sra-btn.primary { background:var(--grad-gp); color:#000; box-shadow:var(--shadow-neon-g); }
.sra-btn.primary:hover { opacity:0.9; transform:translateY(-1px); }
.sra-btn.secondary { background:rgba(255,60,172,0.1); border:1px solid var(--border-p); color:var(--neon-pink); }
.sra-btn.secondary:hover { background:rgba(255,60,172,0.18); }
.sra-btn.ghost { border:1px solid var(--border); color:var(--grey); }
.sra-btn.ghost:hover { color:var(--white); background:rgba(255,255,255,0.04); }

/* ---- LIBRARY ---- */
.library { padding:80px 0; position:relative; z-index:1; }
.lib-inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.lib-header { text-align:center; margin-bottom:40px; }
.lib-header h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800; margin-bottom:10px; }
.lib-header p { color:var(--grey); }
.lib-empty { text-align:center; padding:60px 20px; }
.lib-empty-icon { font-size:3rem; margin-bottom:16px; opacity:0.4; }
.lib-empty p { color:var(--grey); margin-bottom:24px; line-height:1.7; }
.lib-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.lib-card {
  background:var(--black2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px; transition:var(--t);
  cursor:pointer;
}
.lib-card:hover { border-color:var(--border-g); transform:translateY(-3px); box-shadow:var(--shadow-neon-g); }
.lib-card-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.lib-disc {
  width:44px; height:44px; border-radius:50%;
  background:var(--grad-gp); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; flex-shrink:0;
}
.lib-card h4 { font-size:0.9rem; font-weight:700; margin-bottom:2px; }
.lib-card span { font-size:0.72rem; color:var(--grey); }
.lib-card-meta { display:flex; gap:8px; flex-wrap:wrap; }
.lib-tag {
  font-size:0.68rem; font-weight:600; padding:3px 9px; border-radius:20px;
  background:rgba(204,255,0,0.08); color:var(--neon-green); border:1px solid var(--border-g);
}

/* ---- FEATURES ---- */
.features { padding:80px 0; position:relative; z-index:1; }
.feat-inner { max-width:1200px; margin:0 auto; padding:0 24px; }
.feat-header { text-align:center; margin-bottom:48px; }
.feat-header h2 { font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.4rem); font-weight:800; }
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.feat-card {
  background:var(--black2); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:26px; transition:var(--t);
}
.feat-card:hover { border-color:var(--border-g); transform:translateY(-4px); }
.feat-icon { font-size:2rem; margin-bottom:14px; display:block; }
.feat-card h3 { font-family:'Syne',sans-serif; font-size:1rem; font-weight:700; margin-bottom:8px; }
.feat-card p { color:var(--grey); font-size:0.87rem; line-height:1.6; }

/* ---- FOOTER ---- */
.footer {
  background:var(--black2); border-top:1px solid var(--border);
  padding:56px 0 0; position:relative; z-index:1;
}
.footer-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  display:flex; gap:60px; margin-bottom:44px;
}
.footer-brand { flex:1.5; }
.footer-brand p { color:var(--grey2); font-size:0.85rem; margin:14px 0 20px; line-height:1.7; }
.footer-socials { display:flex; gap:10px; }
.footer-socials a {
  background:var(--black3); border:1px solid var(--border);
  color:var(--grey); font-size:0.78rem; font-weight:600;
  padding:7px 14px; border-radius:var(--r-sm); transition:var(--t);
}
.footer-socials a:hover { border-color:var(--border-g); color:var(--neon-green); }
.footer-cols { display:flex; gap:44px; }
.fcol h4 { font-size:0.8rem; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:14px; color:var(--white); }
.fcol a { display:block; color:var(--grey2); font-size:0.85rem; margin-bottom:9px; transition:var(--t); }
.fcol a:hover { color:var(--neon-green); }
.footer-bottom {
  max-width:1200px; margin:0 auto; padding:18px 24px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
}
.footer-bottom p { color:var(--grey2); font-size:0.8rem; }
.footer-bottom div { display:flex; gap:18px; }
.footer-bottom a { color:var(--grey2); font-size:0.8rem; transition:var(--t); }
.footer-bottom a:hover { color:var(--neon-green); }

/* ---- TOAST ---- */
.toast {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--black3); border:1px solid var(--border-g);
  color:var(--white); font-size:0.88rem; font-weight:600;
  padding:12px 22px; border-radius:var(--r-md);
  box-shadow:var(--shadow-neon-g); z-index:1000;
  transition:transform 0.35s cubic-bezier(0.4,0,0.2,1);
  white-space:nowrap;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ---- Animations ---- */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }

/* ---- Responsive ---- */
@media(max-width:1024px){
  .hero{flex-direction:column;text-align:center;padding-top:110px;}
  .hero-left{max-width:100%;}
  .hero-btns{justify-content:center;}
  .hero-counts{justify-content:center;}
  .feat-grid{grid-template-columns:repeat(2,1fr);}
  .lib-grid{grid-template-columns:repeat(2,1fr);}
  .theme-grid{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
  .settings-bar{grid-template-columns:repeat(2,1fr);}
  .feat-grid{grid-template-columns:1fr;}
  .lib-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;gap:28px;}
  .footer-cols{flex-wrap:wrap;gap:24px;}
  .gen-card{padding:22px;}
  .theme-grid{grid-template-columns:repeat(3,1fr);}
  .sr-actions{flex-wrap:wrap;}
}
@media(max-width:480px){
  .settings-bar{grid-template-columns:1fr;}
  .theme-grid{grid-template-columns:repeat(2,1fr);}
  .hero-h1{font-size:2rem;}
  .hero-btns{flex-direction:column;}
  .btn-neon,.btn-outline{width:100%;justify-content:center;}
  .gen-tabs{flex-direction:column;}
  .sr-actions{flex-direction:column;}
  .sra-btn{justify-content:center;}
}