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

:root {
  --bg: #05050a;
  --card: #0c0c14;
  --line: rgba(120, 90, 255, 0.3);
  --accent: #8b5cf6;
  --accent2: #22d3ee;
  --accent3: #a78bfa;
  --text: #e8e6f0;
  --dim: #9b97b0;
  --font-d: 'Orbitron', sans-serif;
  --font-b: 'Rajdhani', sans-serif;
  --font-m: 'Share Tech Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  min-height: 100vh;
  font-family: var(--font-b);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(139, 92, 246, 0.25), transparent 55%),
    var(--bg);
  color: var(--text);
  font-size: 18px;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 32px 18px 60px; }
h1 {
  font-family: var(--font-d);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 4vw, 2rem);
  background: linear-gradient(105deg, #fff, var(--accent3), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 8px;
}
.sub { font-family: var(--font-m); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; margin-bottom: 28px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.15);
}
.card h2 {
  font-family: var(--font-d);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent3);
  margin-bottom: 12px;
}
label { display: block; color: var(--dim); font-size: 0.95rem; margin: 10px 0 4px; }
input, select, textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #12121c;
  color: var(--text);
  font-family: var(--font-b);
  font-size: 1rem;
}
button, .btn {
  display: inline-block;
  margin-top: 14px;
  padding: 14px 22px;
  border: none;
  border-radius: 12px;
  font-family: var(--font-d);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  color: #0a0a12;
  background: linear-gradient(135deg, #c4b5fd, #8b5cf6, #22d3ee);
}
#result { margin-top: 12px; font-family: var(--font-m); font-size: 0.85rem; color: var(--accent2); white-space: pre-wrap; }
a.link { color: var(--accent2); }