:root{--bg:#04060b;--fg:#e8f1ff;--mut:#8a9bb5;--acc:#5ad1ff;--red:#ff5c6c}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{display:grid;place-items:center;padding:20px}
.stars{position:fixed;inset:0;background:
radial-gradient(1px 1px at 10% 20%,#fff8,transparent),radial-gradient(1px 1px at 30% 70%,#fff6,transparent),radial-gradient(1.5px 1.5px at 55% 35%,#fffa,transparent),radial-gradient(1px 1px at 75% 80%,#fff7,transparent),radial-gradient(1px 1px at 88% 15%,#fff9,transparent),radial-gradient(1px 1px at 45% 90%,#fff5,transparent),radial-gradient(1200px 600px at 50% 120%,#0b2a4a55,transparent);pointer-events:none}
.card{position:relative;width:100%;max-width:380px;padding:32px 28px;border:1px solid #1b2a40;border-radius:14px;background:#070b14e6;box-shadow:0 20px 60px #0008}
.arc{width:100%;height:40px;margin-bottom:6px}.arc path{fill:none;stroke:var(--acc);stroke-width:2;opacity:.8}
h1{margin:0;font-size:22px;letter-spacing:.18em}.mark{font-weight:800}.sub{color:var(--acc);font-weight:500;font-size:13px;letter-spacing:.25em}
.by{color:var(--mut);margin:4px 0 22px;font-size:13px}
label{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #24364f;background:#0a1220;color:var(--fg);font-size:16px}
input:focus{outline:2px solid var(--acc);outline-offset:1px}
button{margin-top:16px;width:100%;padding:12px;border:0;border-radius:8px;background:var(--acc);color:#02101a;font-weight:700;font-size:15px;cursor:pointer}
button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.err{color:var(--red);background:#ff5c6c14;border:1px solid #ff5c6c55;padding:8px 12px;border-radius:8px;font-size:14px}