:root{--bg:#06080c;--p:#0c1016;--ln:#19212b;--tx:#e8eef5;--mu:#7b8794;--g:#19e68c;--r:#ff4d5e;--y:#ffc233}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:var(--tx);font:14px system-ui,Segoe UI,sans-serif;background:radial-gradient(ellipse at 50% -10%,#262a31 0%,#0c0e12 55%,#06080c 100%)}
.wrap{width:100%;max-width:420px}
.brand{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:22px}
.brand img{width:56px;height:56px;filter:drop-shadow(0 0 14px rgba(200,210,225,.28)) drop-shadow(0 5px 10px rgba(0,0,0,.7))}
.bn{font-family:Montserrat,'Segoe UI',Arial,sans-serif;font-weight:600;font-size:19px;letter-spacing:.16em;line-height:1;background:linear-gradient(180deg,#f6f7f9 0%,#c9ccd1 38%,#8b8e96 55%,#d8dadf 78%,#a2a5ac 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.rule{height:1px;margin:6px 0 5px;background:linear-gradient(90deg,#c9ccd2,#6c6f76 55%,rgba(108,111,118,0))}
.bs{font-family:Montserrat,'Segoe UI',Arial,sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.34em;color:#8f949c}
.card{background:var(--p);border:1px solid var(--ln);border-radius:12px;padding:26px 24px;box-shadow:0 20px 50px rgba(0,0,0,.45)}
h1{margin:0 0 4px;font-size:20px;letter-spacing:.02em}
.sub{margin:0 0 20px;color:var(--mu);line-height:1.5}
label{display:block;margin:14px 0 6px;color:var(--mu);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
input{width:100%;background:#080b10;color:var(--tx);border:1px solid var(--ln);border-radius:8px;padding:11px 12px;font:inherit;outline:none}
input:focus{border-color:#4a5565}
input.code{font-family:ui-monospace,Consolas,monospace;font-size:19px;letter-spacing:.14em;text-align:center;text-transform:uppercase}
button.go{width:100%;margin-top:20px;padding:12px;border:0;border-radius:8px;background:#fff;color:#000;font:inherit;font-weight:700;letter-spacing:.04em;cursor:pointer}
button.go:disabled{opacity:.5;cursor:default}
.msg{display:none;margin-top:16px;padding:10px 12px;border-radius:8px;font-size:13px;line-height:1.45}
.msg.show{display:block}
.msg.err{background:rgba(255,77,94,.1);border:1px solid rgba(255,77,94,.4);color:var(--r)}
.msg.warn{background:rgba(255,194,51,.1);border:1px solid rgba(255,194,51,.35);color:var(--y)}
.msg.ok{background:rgba(25,230,140,.1);border:1px solid rgba(25,230,140,.4);color:var(--g)}
.alt{margin-top:18px;text-align:center;color:var(--mu)}
.alt a,.link{color:#fff;cursor:pointer;text-decoration:underline;background:none;border:0;font:inherit;padding:0}
.note{margin-top:16px;color:var(--mu);font-size:12px;line-height:1.55;border-top:1px solid var(--ln);padding-top:14px}
.steps{display:flex;gap:6px;margin:0 0 18px}.steps i{flex:1;height:3px;border-radius:2px;background:var(--ln)}.steps i.on{background:#c9ccd2}
/* mobile: 16px inputs stop iOS from zooming on focus; dvh avoids the address-bar jump */
@media (max-width:600px){
 body{padding:16px;align-items:flex-start;min-height:100dvh}
 .wrap{margin:auto}
 input{font-size:16px}
 input.code{font-size:18px;letter-spacing:.1em}
 .card{padding:22px 18px}
 button.go{min-height:46px}
}