<form class="lf-neon">
  <div class="lf-neon-title">LOG <span>IN</span></div>
  <input type="email" placeholder="[email protected]" required class="lf-neon-input" />
  <input type="password" placeholder="••••••••" required class="lf-neon-input" />
  <button type="submit" class="lf-neon-btn">ENTER</button>
</form>

.lf-neon {
  width: 100%;
  max-width: 280px;
  background: #0a0014;
  border: 1px solid rgba(255, 108, 255, 0.35);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow:
    0 0 40px rgba(255, 108, 255, 0.15),
    inset 0 0 30px rgba(124, 108, 255, 0.1);
}
.lf-neon-title {
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: #fff;
  letter-spacing: 0.3em;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #ff6cff,
    0 0 24px #ff6cff;
}
.lf-neon-title span {
  color: #6cffff;
  text-shadow:
    0 0 4px #fff,
    0 0 12px #6cffff,
    0 0 24px #6cffff;
}
.lf-neon-input {
  background: transparent;
  border: 1px solid rgba(255, 108, 255, 0.45);
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  color: #fff;
  font-size: 12px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.lf-neon-input::placeholder {
  color: rgba(255, 108, 255, 0.55);
}
.lf-neon-input:focus {
  border-color: #6cffff;
  box-shadow:
    0 0 0 1px #6cffff,
    0 0 16px rgba(108, 255, 255, 0.4);
}
.lf-neon-btn {
  background: transparent;
  border: 1px solid #6cffff;
  border-radius: 8px;
  padding: 11px 14px;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #6cffff;
  cursor: pointer;
  text-shadow: 0 0 6px #6cffff;
  box-shadow:
    inset 0 0 12px rgba(108, 255, 255, 0.15),
    0 0 14px rgba(108, 255, 255, 0.3);
  animation: lfnPulse 1.6s ease-in-out infinite;
}
.lf-neon-btn:hover {
  color: #fff;
  background: rgba(108, 255, 255, 0.1);
}
@keyframes lfnPulse {
  0%,
  100% {
    box-shadow:
      inset 0 0 12px rgba(108, 255, 255, 0.15),
      0 0 14px rgba(108, 255, 255, 0.3);
  }
  50% {
    box-shadow:
      inset 0 0 18px rgba(108, 255, 255, 0.25),
      0 0 28px rgba(108, 255, 255, 0.55);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lf-neon,
  .lf-neon * {
    animation: none !important;
  }
}