:root{--bg1:#081a16;--bg2:#0b4a37;--bg3:#7260ff;--card:rgba(255,255,255,.08);--border:rgba(255,255,255,.14);--text:#f6fbf9;--muted:rgba(246,251,249,.72);--accent:#18d2a3;--accent2:#10b88d;--danger:#ff7b7b;--shadow:0 24px 70px rgba(0,0,0,.22)}
*{box-sizing:border-box}html,body{margin:0;padding:0}body{min-height:100vh;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:radial-gradient(circle at top left,rgba(24,210,163,.18),transparent 28%),linear-gradient(135deg,var(--bg1),var(--bg2) 42%,var(--bg3))}
.shell{max-width:1240px;margin:0 auto;padding:28px 18px 36px}
.header{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.tag{display:inline-block;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid var(--border);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.header h1{margin:12px 0 8px;font-size:38px;line-height:1.02}.header p{margin:0;color:var(--muted);max-width:720px;font-size:16px}
.header-actions{display:flex;gap:10px;flex-wrap:wrap}
.link{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 16px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text);text-decoration:none;font-weight:800}
.link.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border:0}
.grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,.9fr);gap:18px;align-items:start}
.card{background:var(--card);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);backdrop-filter:blur(16px);padding:20px}
.card h2{margin:0 0 12px;font-size:22px}
.form{display:grid;gap:14px}label{display:grid;gap:8px}label span{font-weight:800}label input{min-height:54px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:var(--text);padding:14px 16px;font-size:16px}label input::placeholder{color:rgba(255,255,255,.35)}label small{color:var(--muted)}
.row{display:flex;gap:10px;flex-wrap:wrap}
.btn{border:1px solid var(--border);border-radius:16px;min-height:50px;padding:0 16px;font-size:15px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;color:var(--text);background:rgba(255,255,255,.06)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent2));border:0}
.btn:disabled{opacity:.65;cursor:not-allowed}
.error{margin:12px 0;padding:12px 14px;border-radius:16px;background:rgba(255,96,96,.12);border:1px solid rgba(255,96,96,.22);color:#ffd3d3}
.note{margin:12px 0;padding:14px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.note.ok{background:rgba(24,210,163,.12)}
.code{text-align:center;letter-spacing:10px;font-size:24px;font-weight:900}
.kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.kv:last-of-type{border-bottom:0}
.stack{display:grid;gap:10px;margin-top:12px}
.btn-loader{animation:spin 1s linear infinite}@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media(max-width:980px){.grid{grid-template-columns:1fr}.header{flex-direction:column}.header h1{font-size:30px}}
@media(max-width:620px){.shell{padding:16px 12px 24px}.row{flex-direction:column}.btn,.link{width:100%}}