body[data-theme="cyberpunk"] {
  background: #050010;
  background-image:
    linear-gradient(rgba(255,0,180,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  color: #e0faff;
}
body[data-theme="cyberpunk"] .profile-card {
  background: linear-gradient(135deg, rgba(20,0,40,.8), rgba(0,20,40,.8));
  border: 1px solid #ff00aa;
  box-shadow:
    0 0 calc(40px + 60px * var(--bass, 0)) rgba(255,0,170,calc(.3 + .5 * var(--bass, 0))),
    0 0 calc(80px + 80px * var(--bass, 0)) rgba(0,240,255,calc(.2 + .4 * var(--bass, 0)));
  transform: scale(calc(1 + 0.04 * var(--beat, 0)));
  transition: transform .06s linear, box-shadow .06s linear;
}
body[data-theme="cyberpunk"] .profile-card h1 {
  color: #fff;
  text-shadow:
    calc(-2px * var(--beat, 0)) 0 #ff00aa,
    calc(2px * var(--beat, 0)) 0 #00f0ff,
    0 0 calc(8px + 16px * var(--bass, 0)) #ff00aa;
}
body[data-theme="cyberpunk"] .profile-card .uname { color: #00f0ff; }
body[data-theme="cyberpunk"] .badge {
  background: rgba(255,0,170,.15); color: #ff7fd4;
  border-color: #ff00aa;
}
body[data-theme="cyberpunk"] .theme-fx::before {
  content: "";
  position: fixed; inset: 0;
  background: linear-gradient(transparent 0%, rgba(0,240,255,.06) 50%, transparent 100%);
  background-size: 100% 4px;
  animation: cb-scan 8s linear infinite;
  animation-duration: calc((8s - 6s * var(--bass, 0)));
  pointer-events: none;
}
body[data-theme="cyberpunk"] .theme-fx::after {
  content: "";
  position: fixed; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(255,0,170,calc(.15 * var(--bass, 0))), transparent 70%);
  pointer-events: none;
}
@keyframes cb-scan {
  from { background-position: 0 0; }
  to   { background-position: 0 100vh; }
}