*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070b14; --card:#0f1524; --card2:#141c2e; --line:#222e45;
  --txt:#e9eefb; --muted:#8b9ab5; --accent:#3b82f6; --accent2:#2563eb;
  --wa:#25d366; --wa2:#128c7e; --danger:#ef4444; --gold:#fbbf24;
}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt); min-height:100%;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; padding-bottom:70px; position:relative; overflow-x:hidden;
}
.bg-orbs{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.bg-orbs:before,.bg-orbs:after{content:"";position:absolute;border-radius:50%;filter:blur(90px);opacity:.35}
.bg-orbs:before{width:420px;height:420px;background:#2563eb;top:-140px;left:-120px}
.bg-orbs:after{width:380px;height:380px;background:#25d366;bottom:-150px;right:-120px;opacity:.22}

.topbar{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);
  background:rgba(9,13,22,.75);backdrop-filter:blur(14px);position:sticky;top:0;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:12px;display:grid;place-items:center;
  background:linear-gradient(135deg,#1e3a8a,#0e7490);font-weight:800;font-size:11px;
  letter-spacing:.5px;overflow:hidden;border:1px solid #2b3f63;
}
.logo img{width:100%;height:100%;object-fit:cover}
.brand-text{min-width:0}
.brand-text h1{font-size:14px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.brand-text p{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}

.wrap{position:relative;z-index:2;max-width:640px;margin:0 auto;padding:22px 16px}
.card{
  background:linear-gradient(180deg,var(--card),var(--card2));
  border:1px solid var(--line);border-radius:20px;padding:24px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.step{display:none;animation:pop .3s ease}
.step.active{display:block}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h2{font-size:21px;font-weight:800;letter-spacing:-.3px;margin-bottom:10px}
.muted{color:var(--muted);font-size:14px;line-height:1.6;margin-bottom:18px}
.fine{color:#5f6f8c;font-size:11.5px;margin-top:14px;line-height:1.5}
.pill{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:#93c5fd;background:rgba(59,130,246,.13);border:1px solid rgba(59,130,246,.3);
  padding:5px 11px;border-radius:999px;margin-bottom:14px;
}
.ticks{list-style:none;margin-bottom:22px}
.ticks li{font-size:14px;color:#c7d3e8;padding:8px 0 8px 28px;position:relative;border-bottom:1px dashed rgba(255,255,255,.06)}
.ticks li:before{content:"\2713";position:absolute;left:0;top:7px;color:var(--wa);font-weight:800}
.ticks li:last-child{border-bottom:none}

button{font-family:inherit;cursor:pointer;border:none;border-radius:13px;font-weight:700;transition:.18s}
button:active{transform:scale(.98)}
.primary{
  width:100%;padding:16px;font-size:15.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 10px 26px rgba(37,99,235,.35);
}
.primary:hover{filter:brightness(1.08)}
.primary:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.ghost{
  padding:11px 16px;font-size:13.5px;color:#cbd5e1;
  background:rgba(255,255,255,.05);border:1px solid var(--line);
}
.ghost:hover{background:rgba(255,255,255,.1)}
.back{background:none;color:var(--muted);font-size:13px;padding:0 0 14px;font-weight:600}

.field{display:flex;align-items:center;background:#0a1020;border:1px solid var(--line);border-radius:13px;margin-bottom:16px;overflow:hidden}
.field:focus-within{border-color:var(--accent)}
.prefix{padding:16px 12px 16px 16px;color:var(--muted);font-weight:700;font-size:15px;border-right:1px solid var(--line)}
.field input{flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:16px;padding:16px;font-family:inherit}
.err{color:#fca5a5;font-size:13px;margin-top:12px;min-height:18px}

.codebox{background:#08101f;border:1px solid #1d3557;border-radius:16px;padding:22px 18px;text-align:center;margin-bottom:20px}
.code{
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;font-size:31px;font-weight:800;
  letter-spacing:3px;color:#fff;text-shadow:0 0 22px rgba(59,130,246,.6);margin-bottom:14px;
}
.bar{height:5px;background:#16233b;border-radius:99px;overflow:hidden;margin-bottom:10px}
.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--wa),var(--accent));transition:width .25s linear}
.cd{font-size:12px;color:var(--muted)}
.cd b{color:var(--wa)}

.steps-list{list-style:none;counter-reset:s;margin-bottom:20px}
.steps-list li{counter-increment:s;position:relative;padding:11px 0 11px 40px;font-size:14px;color:#c7d3e8;line-height:1.5}
.steps-list li:before{
  content:counter(s);position:absolute;left:0;top:10px;width:26px;height:26px;border-radius:50%;
  background:rgba(37,211,102,.15);color:var(--wa);border:1px solid rgba(37,211,102,.4);
  display:grid;place-items:center;font-size:12px;font-weight:800;
}
.statusline{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--muted);background:rgba(255,255,255,.04);padding:13px;border-radius:12px;margin-bottom:14px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:0 0 9px}
.dot.pulse{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
.statusline.ok{color:#a7f3d0;background:rgba(37,211,102,.1)}
.statusline.ok .dot{background:var(--wa)}
.row{display:flex;gap:10px}
.row .ghost{flex:1}

.bigcheck{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:38px;font-weight:800;margin:0 auto 18px;color:#052e16;background:linear-gradient(135deg,#4ade80,#25d366);box-shadow:0 0 44px rgba(37,211,102,.5)}
.bigcheck.alt{background:linear-gradient(135deg,#93c5fd,#3b82f6);color:#062043;box-shadow:0 0 44px rgba(59,130,246,.5)}
#step-verified,#step-done{text-align:center}
#step-verified h2,#step-done h2{margin-bottom:8px}
.kv{display:flex;justify-content:space-between;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}
.kv span{color:var(--muted)}
.green{color:var(--wa)}
#step-verified .primary,#step-done .ghost{margin-top:22px}

.cands{display:flex;flex-direction:column;gap:12px;margin-bottom:18px}
.cand{
  display:flex;align-items:center;gap:14px;padding:14px;border-radius:15px;
  background:#0a1020;border:1.5px solid var(--line);cursor:pointer;transition:.18s;
}
.cand:hover{border-color:#31456b}
.cand.sel{border-color:var(--accent);background:rgba(59,130,246,.1);box-shadow:0 0 0 3px rgba(59,130,246,.15)}
.avatar{width:52px;height:52px;flex:0 0 52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;color:#dbeafe;background:linear-gradient(135deg,#1e3a8a,#0e7490);overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.cand .meta{min-width:0}
.cand .meta b{display:block;font-size:15px}
.cand .meta small{color:var(--muted);font-size:12.5px}
.cand .tick{margin-left:auto;width:24px;height:24px;border-radius:50%;border:2px solid var(--line);flex:0 0 24px}
.cand.sel .tick{background:var(--accent);border-color:var(--accent);position:relative}
.cand.sel .tick:after{content:"\2713";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800}

.notice{background:rgba(251,191,36,.09);border:1px solid rgba(251,191,36,.3);color:#fde68a;padding:14px;border-radius:13px;font-size:13.5px;line-height:1.55}
.hidden{display:none!important}

.rbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rbar .nm{width:110px;font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rbar .track{flex:1;height:26px;background:#0a1020;border-radius:8px;overflow:hidden;border:1px solid var(--line)}
.rbar .fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--wa));width:0;transition:width .7s ease}
.rbar .n{width:30px;text-align:right;font-weight:800;font-size:14px;color:#93c5fd}

.foot{position:relative;z-index:2;text-align:center;color:#4c5b76;font-size:11.5px;padding:26px 16px}
@media(max-width:420px){
  .brand-text h1,.brand-text p{max-width:44vw}
  .code{font-size:26px;letter-spacing:2px}
}