@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url("fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url("fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 600; font-display: swap; src: url("fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url("fonts/jetbrains-mono-latin-600-normal.woff2") format("woff2"); }

:root {
  --bg: #04070d; --panel: rgba(10, 17, 31, 0.9); --line: rgba(120, 190, 255, 0.12); --line-strong: rgba(120, 190, 255, 0.22);
  --text: #e6edf8; --muted: #8d9cb4; --faint: #5d6c85; --celeste: #3cd6ff; --violeta: #a874ff;
  --accent: linear-gradient(90deg, #14f195 0%, #3cd6ff 50%, #9945ff 100%);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body {
  margin: 0; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px 16px;
  font: 15px/1.5 "Inter", system-ui, sans-serif; color: var(--text);
  background: radial-gradient(700px 420px at 85% 0%, rgba(153, 69, 255, 0.14), transparent 65%), radial-gradient(600px 420px at 0% 100%, rgba(20, 241, 149, 0.07), transparent 60%), var(--bg);
}
.card { position: relative; width: 100%; max-width: 400px; padding: 28px 26px 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--accent); }
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.brand strong { display: block; font: 700 19px/1.1 "Space Grotesk", sans-serif; }
.brand small { color: var(--faint); font-size: 12px; }
h1 { font: 600 21px/1.2 "Space Grotesk", sans-serif; margin: 0 0 14px; letter-spacing: -0.01em; }
.step { display: grid; gap: 13px; animation: in 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
label { display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
input { width: 100%; padding: 12px 13px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(4, 7, 13, 0.75); color: var(--text); font: inherit; font-size: 15.5px; outline: none; transition: border-color 0.2s, box-shadow 0.2s; }
input:focus { border-color: var(--celeste); box-shadow: 0 0 0 3px rgba(60, 214, 255, 0.14); }
input.code { font: 600 26px/1 "JetBrains Mono", monospace; letter-spacing: 10px; text-align: center; padding: 14px 8px; }
.btn { margin-top: 4px; padding: 13px 16px; border: 0; border-radius: 12px; background: var(--accent); color: #04070d; font: 600 15px "Inter", sans-serif; cursor: pointer; transition: transform 0.15s, opacity 0.2s; }
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.link { justify-self: center; background: none; border: 0; color: var(--muted); font: inherit; font-size: 13.5px; cursor: pointer; padding: 4px; }
.link:hover { color: var(--text); }
.muted { margin: -4px 0 4px; color: var(--muted); font-size: 14px; }
.muted strong { color: var(--text); }
.hint { margin: -6px 0 0; color: var(--faint); font-size: 12.5px; }
.error { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: rgba(168, 116, 255, 0.1); border: 1px solid rgba(168, 116, 255, 0.35); font-size: 13.5px; }
.foot { color: var(--faint); font-size: 12px; text-align: center; margin: 0; max-width: 400px; }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }