:root{--bg:#05031a;--card:rgba(20,15,52,.72);--line:rgba(139,120,255,.30);--ink:#f1f0fb;--ink-2:#b9b7d6;--ink-3:#8784ab;--violet:#8b5cf6;--cyan:#22d3ee;--ok:#34d399;--gold:#fbbf24}
*{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:var(--ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;
  background-image:radial-gradient(600px 400px at 15% 0%,rgba(139,92,246,.22),transparent 70%),radial-gradient(560px 420px at 100% 100%,rgba(34,211,238,.12),transparent 70%)}
.card{max-width:560px;width:100%;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:34px 30px}
.logo{display:block;height:44px;margin:-6px 0 20px -8px}
h1{font:800 28px/1.15 Inter;letter-spacing:-.02em}
.detail{font:400 15px/1.5 Inter;color:var(--ink-2);margin-top:8px}
.price{display:flex;align-items:baseline;gap:10px;margin-top:20px}
.now{font:800 44px/1 Inter;letter-spacing:-.02em}
.was{font:600 20px/1 Inter;color:var(--ink-3)}
.once{font:600 14px/1 Inter;color:var(--ink-3)}
.note{display:none;margin-top:12px;padding:10px 13px;border-radius:11px;font:500 14px/1.5 Inter}
.note.good{display:block;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.08);color:#a7f3d0}
.note.warn{display:block;border:1px solid rgba(251,191,36,.35);background:rgba(251,191,36,.08);color:#fde68a}
.incl{list-style:none;margin-top:18px;display:grid;gap:7px}
.incl li{font:500 15px/1.4 Inter;color:var(--ink-2);padding-left:24px;position:relative}
.incl li::before{content:"";position:absolute;left:3px;top:6px;width:9px;height:5px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
form{margin-top:24px;display:grid;gap:14px}
label{display:grid;gap:7px;font:600 14px/1.2 Inter}
label span{font-weight:400;color:var(--ink-3)}
input{width:100%;padding:12px 13px;border-radius:11px;border:1px solid var(--line);background:rgba(5,3,26,.6);color:var(--ink);font:500 16px/1.2 Inter;outline:none}
input:focus{border-color:var(--violet)}
.coderow{display:flex;gap:8px}
.coderow input{flex:1}
.btn{display:block;width:100%;margin-top:6px;padding:15px 20px;border:0;border-radius:12px;background:linear-gradient(135deg,var(--violet),#6d28d9);color:#fff;font:700 16px/1 Inter;cursor:pointer;text-align:center;text-decoration:none}
.btn.alt{background:rgba(139,92,246,.12);border:1px solid var(--line);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.busy{opacity:.7;cursor:progress}
.ghost{padding:0 16px;border-radius:11px;border:1px solid var(--line);background:transparent;color:var(--ink);font:600 14px/1 Inter;cursor:pointer}
.small{font:400 13.5px/1.55 Inter;color:var(--ink-3)}
.small a{color:var(--cyan)}
.err{display:none;padding:10px 13px;border-radius:11px;border:1px solid rgba(248,113,113,.4);background:rgba(248,113,113,.08);color:#fecaca;font:500 14px/1.5 Inter}
.foot{margin-top:22px}
.keybox{margin-top:16px;display:flex;gap:8px;align-items:stretch}
.keybox code{flex:1;padding:14px;border-radius:11px;border:1px solid rgba(52,211,153,.4);background:rgba(52,211,153,.07);font:600 15px/1.3 ui-monospace,Menlo,monospace;word-break:break-all;color:#d1fae5}
.steps{margin-top:16px;padding-left:20px;display:grid;gap:6px;font:400 15px/1.5 Inter;color:var(--ink-2)}
.spin{display:inline-block;width:14px;height:14px;border:2px solid var(--ink-3);border-top-color:var(--cyan);border-radius:50%;animation:s 1s linear infinite;vertical-align:-2px;margin-right:8px}
@keyframes s{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
[hidden]{display:none!important}
#rails{display:grid;gap:16px;margin-top:6px}
.rail{display:grid;gap:8px}
.rail .btn{margin-top:0}