:root { --bg:#0a0c0f; --card:#12151a; --fg:#e8eef3; --muted:#8a94a1; --accent:#4f8cff; --err:#ff5c5c; --ok:#5ad07a; }
* { box-sizing: border-box; }
body {
  margin:0; min-height:100vh; display:grid; place-items:center;
  background:var(--bg); color:var(--fg); padding:1rem;
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
main { max-width:560px; width:100%; padding:2.75rem 2rem; background:var(--card);
       border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.03); }
.badge { display:inline-block; padding:.25rem .7rem; margin-bottom:1rem;
         font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
         color:var(--accent); background:rgba(79,140,255,.12); border-radius:999px; }
h1 { margin:0 0 .75rem; font-size:1.55rem; font-weight:600; letter-spacing:-.01em; }
h2 { margin:0 0 .75rem; font-size:1rem; font-weight:600; color:var(--fg); }
p { margin:0 0 1.5rem; color:var(--muted); }
.dl { display:inline-block; padding:.95rem 1.75rem; background:var(--accent); color:#fff;
      text-decoration:none; border-radius:10px; font-weight:600; margin-bottom:2rem;
      transition:transform .08s ease, background .15s ease, box-shadow .15s ease;
      box-shadow:0 8px 20px rgba(79,140,255,.25); }
.dl:hover { background:#3f7ce0; box-shadow:0 10px 26px rgba(79,140,255,.35); }
.dl:active { transform:translateY(1px); }
.fine { margin:1.5rem 0 0; font-size:.78rem; color:#57606f; }
.fine a { color:var(--accent); text-decoration: none; }
.fine a:hover { text-decoration: underline; }
.err { padding:.75rem 1rem; margin-bottom:1rem; border-radius:8px;
       background:rgba(255,92,92,.1); color:var(--err); font-size:.9rem; }
form { display:grid; gap:1rem; margin-bottom:1.75rem; text-align:left; }
label { display:grid; gap:.35rem; font-size:.85rem; color:var(--muted); }
input { padding:.75rem .9rem; background:#0a0c0f; color:var(--fg);
        border:1px solid #232a33; border-radius:8px; font:inherit; outline:none;
        transition:border .15s ease, box-shadow .15s ease; }
input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,140,255,.15); }
button { padding:.9rem 1.5rem; background:var(--accent); color:#fff; border:0;
         border-radius:10px; font-weight:600; font-size:1rem; cursor:pointer;
         transition:background .15s ease, transform .08s ease; }
button:hover { background:#3f7ce0; }
button:active { transform:translateY(1px); }
.steps { padding:1.5rem; margin-bottom:1.5rem; text-align:left;
         background:rgba(255,255,255,.02); border:1px solid #232a33; border-radius:12px; }
.steps ol { margin:0; padding-left:1.25rem; color:var(--muted); font-size:.92rem; }
.steps li { margin-bottom:.6rem; }
.steps strong { color:var(--fg); }