.badge {
  --neon-color: #00f0ff;
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.75rem;
  font-family: var(--font-display, 'Orbitron', sans-serif);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.0625em;
  color: hsl(var(--background, 0 0% 4%));
  background: var(--neon-color);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--neon-color);
}

/* Variants */
.cyan { --neon-color: #00f0ff; }
.pink { --neon-color: #ff00ff; }
.green { --neon-color: #00ff88; }
.purple { --neon-color: #a855f7; }
.red { --neon-color: #ff0040; }
.yellow { --neon-color: #ffff00; }

/* Sizes */
.sm {
  padding: 0.125rem 0.5rem;
  font-size: 0.5625rem;
}

.lg {
  padding: 0.375rem 1rem;
  font-size: 0.8125rem;
}

/* Outline variant */
.outline {
  color: var(--neon-color);
  background: transparent;
  border: 1px solid var(--neon-color);
}

/* Pulse animation */
.pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 5px var(--neon-color); }
  50% { box-shadow: 0 0 20px var(--neon-color), 0 0 30px var(--neon-color); }
}