@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Poppins:wght@400;500;600&display=swap');

/* Cyberpunk Neon Design System */
:root {
  --cyber-void: 220 50% 5%;
  --cyber-space: 220 45% 8%;
  --cyber-dark: 220 40% 12%;

  --neon-cyan: 180 100% 50%;
  --neon-magenta: 300 100% 50%;

  --transition-glow: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Background and font styles */
body, html {
  height: 100%;
  margin: 0;
  background: radial-gradient(ellipse at center, hsl(var(--cyber-space)), hsl(var(--cyber-void)));
  font-family: 'Poppins', sans-serif;
  color: hsl(var(--neon-cyan));
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Form panel */
.hologram-panel {
  background: hsl(var(--cyber-space) / 0.7);
  backdrop-filter: blur(14px);
  border-radius: 0.5rem;
  border: 2px solid transparent;
  position: relative;
  box-shadow:
    0 0 20px hsl(var(--neon-cyan) / 0.5),
    inset 0 0 30px hsl(var(--neon-magenta) / 0.3);
  max-width: 480px;
  width: 100%;
  padding: 2rem;
}

/* Neon text styles */
.neon-text-cyan {
  color: hsl(var(--neon-cyan));
  text-shadow:
    0 0 10px hsl(var(--neon-cyan)),
    0 0 20px hsl(var(--neon-cyan)),
    0 0 40px hsl(var(--neon-cyan));
}

.neon-text-magenta {
  color: hsl(var(--neon-magenta));
  text-shadow:
    0 0 12px hsl(var(--neon-magenta)),
    0 0 24px hsl(var(--neon-magenta)),
    0 0 48px hsl(var(--neon-magenta));
}

/* Inputs and textarea */
.cyber-input {
  background: hsl(var(--cyber-space) / 0.6);
  border: 2px solid hsl(var(--neon-cyan));
  color: hsl(var(--cyber-void));
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  box-shadow: inset 0 0 15px hsl(var(--neon-cyan) / 0.3);
  width: 100%;
  transition: var(--transition-glow);
}

.cyber-input::placeholder {
  color: hsl(var(--neon-cyan) / 0.6);
  font-style: italic;
}

.cyber-input:focus {
  outline: none;
  border-color: hsl(var(--neon-magenta));
  box-shadow:
    0 0 15px hsl(var(--neon-magenta)),
    inset 0 0 20px hsl(var(--neon-magenta));
}

/* Button */
.cyber-button {
  background: hsl(var(--cyber-space) / 0.8);
  border: 2px solid hsl(var(--neon-magenta));
  border-radius: 0.5rem;
  color: hsl(var(--neon-magenta));
  cursor: pointer;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  padding: 1rem;
  text-transform: uppercase;
  text-shadow:
    0 0 10px hsl(var(--neon-magenta)),
    0 0 20px hsl(var(--neon-magenta));
  transition: var(--transition-glow);
  width: 100%;
}

.cyber-button:hover {
  background: hsl(var(--neon-magenta) / 0.2);
  box-shadow:
    0 0 20px hsl(var(--neon-magenta)),
    0 0 40px hsl(var(--neon-magenta));
}

/* Additional styles */
label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}

/* Response message */
#responseMessage {
  font-weight: 600;
  font-size: 1rem;
}