:root {
  --bg: #05060f;
  --bg2: #0b0d22;
  --panel: rgba(14, 16, 40, 0.82);
  --line: rgba(120, 140, 255, 0.18);
  --text: #e8ecff;
  --muted: #8b93c7;
  --cyan: #22f3ff;
  --pink: #ff3df2;
  --lime: #7dff3a;
  --yellow: #ffe83d;
  --red: #ff3d5a;
  --glow-cyan: 0 0 8px rgba(34, 243, 255, 0.8), 0 0 24px rgba(34, 243, 255, 0.45);
  --glow-pink: 0 0 8px rgba(255, 61, 242, 0.8), 0 0 24px rgba(255, 61, 242, 0.45);
  --radius: 16px;
  --font: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
  --display: 'Orbitron', 'Rajdhani', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; }
a { color: var(--cyan); }
button { font-family: inherit; }

.neon-title {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow: 0 0 6px var(--cyan), 0 0 18px var(--cyan), 0 0 42px var(--pink);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 26px; border-radius: 999px; border: 2px solid var(--cyan);
  background: rgba(34, 243, 255, 0.08); color: #fff; font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.08em; text-decoration: none; cursor: pointer;
  box-shadow: var(--glow-cyan), inset 0 0 12px rgba(34, 243, 255, 0.25);
  transition: transform 0.12s, background 0.2s;
}
.btn:hover { background: rgba(34, 243, 255, 0.2); transform: translateY(-1px); }
.btn:active { transform: scale(0.97); }
.btn.pink { border-color: var(--pink); background: rgba(255, 61, 242, 0.1); box-shadow: var(--glow-pink), inset 0 0 12px rgba(255, 61, 242, 0.25); }
.btn.ghost { border-color: var(--line); box-shadow: none; background: transparent; color: var(--muted); }
.btn.big { padding: 16px 44px; font-size: 1.35rem; font-family: var(--display); }

.lang-switch { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.35); }
.lang-switch button {
  border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 0.85rem;
  padding: 5px 10px; border-radius: 999px; cursor: pointer; letter-spacing: 0.05em;
}
.lang-switch button.on { color: #05060f; background: var(--cyan); box-shadow: var(--glow-cyan); }

.grid-bg {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(255, 61, 242, 0.18), transparent 55%),
    radial-gradient(ellipse at 90% 30%, rgba(34, 243, 255, 0.14), transparent 50%),
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: auto, auto, 48px 48px, 48px 48px;
}

.input {
  width: 100%; padding: 14px 18px; border-radius: 12px; border: 2px solid rgba(255, 61, 242, 0.6);
  background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 1.15rem; font-family: inherit; font-weight: 600;
  outline: none; box-shadow: 0 0 14px rgba(255, 61, 242, 0.25); text-align: center;
}
.input:focus { border-color: var(--pink); box-shadow: var(--glow-pink); }

.xpbar { height: 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; border: 1px solid var(--line); }
.xpbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: var(--glow-cyan); transition: width 0.8s ease; }