:root {
  --bg: #0b1120;
  --amber: #fbbf24;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Vazirmatn', system-ui, sans-serif;
  background: radial-gradient(circle at 20% 0%, #1e1b4b 0%, #0b1120 45%, #060912 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #e2e8f0;
  -webkit-font-smoothing: antialiased;
}
.latin { font-family: 'Space Grotesk', monospace; }

/* ambient glow */
.bgglow {
  position: fixed;
  top: -20%; left: 50%;
  width: 700px; height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(251,191,36,0.14), transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: pulse-glow 8s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { opacity: 0.5; transform: translateX(-50%) scale(1); }
  50% { opacity: 0.9; transform: translateX(-50%) scale(1.1); }
}

/* wave badge in header */
.wave-badge {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, #fbbf24, #f97316);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(251,191,36,0.25);
}

/* Equalizer */
.eq { display: flex; align-items: flex-end; gap: 2px; height: 16px; }
.eq span {
  width: 3px; height: 4px;
  background: currentColor;
  border-radius: 2px;
  display: block;
}
.wave-badge .eq span { background: #0b1120; }
.eq-big { height: 48px; gap: 4px; color: var(--amber); }
.eq-big span { width: 6px; border-radius: 3px; }
.eq-on span { animation: eqbar 0.9s ease-in-out infinite; }
.eq:not(.eq-on) span { height: 4px; }
@keyframes eqbar {
  0%,100% { height: 20%; }
  50% { height: 100%; }
}

/* live badge */
.live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: #fca5a5;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 3px 12px; border-radius: 999px;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,0.6);
  animation: livepulse 1.4s infinite;
}
@keyframes livepulse {
  0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
  70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

/* spinner */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(11,17,32,0.3);
  border-top-color: #0b1120;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.play-btn:active { transform: scale(0.94); }

/* volume slider */
.vol-slider {
  -webkit-appearance: none; appearance: none;
  height: 5px; border-radius: 999px;
  background: linear-gradient(to left, var(--amber) var(--pct, 80%), #334155 var(--pct, 80%));
  outline: none; cursor: pointer;
}
.vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  cursor: pointer;
}
.vol-slider::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: #fff; border: none; cursor: pointer;
}

/* animations */
.panel-in { animation: slideDown 0.3s ease; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.np-card { animation: fadeUp 0.4s ease; }
.card-in { animation: fadeUp 0.35s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.toast { animation: fadeUp 0.25s ease; }

/* recent row scrollbar */
.recent-row::-webkit-scrollbar { height: 4px; }
.recent-row::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

/* general scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }