:root {
  --neon-cyan: #00F0FF;
  --neon-blue: #0066FF;
  --neon-glow: rgba(0, 240, 255, 0.35);
  --cyber-dark: #050811;
  --card-surface: #0B1120;
  --border-glow: rgba(0, 240, 255, 0.2);
  --matrix-green: #00FF66;
  --laser-pink: #FF0055;
}

body {
  background-color: var(--cyber-dark);
  color: #E2E8F0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

.cyber-card {
  background: var(--card-surface);
  border: 1px solid var(--border-glow);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(0, 240, 255, 0.03);
  backdrop-filter: blur(12px);
}

.cyber-border-glow {
  box-shadow: 0 0 15px var(--neon-glow);
}

.text-cyan-glow {
  color: var(--neon-cyan);
  text-shadow: 0 0 10px rgba(0, 240, 255, 0.6);
}

.text-matrix-glow {
  color: var(--matrix-green);
  text-shadow: 0 0 10px rgba(0, 255, 102, 0.6);
}

.cyber-btn-cyan {
  background: linear-gradient(135deg, #00F0FF 0%, #0066FF 100%);
  color: #050811;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.cyber-btn-cyan:hover {
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.7);
  transform: translateY(-1px);
}

.cyber-btn-magenta {
  background: linear-gradient(135deg, #FF0055 0%, #990033 100%);
  color: #ffffff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
}

.cyber-btn-magenta:hover {
  box-shadow: 0 0 20px rgba(255, 0, 85, 0.7);
  transform: translateY(-1px);
}

.cyber-grid-bg {
  background-image: 
    linear-gradient(rgba(0, 240, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.04) 1px, transparent 1px);
  background-size: 30px 30px;
}