*{box-sizing:border-box}
html,body{height:100%;margin:0}
body.login{
  font-family:Inter,system-ui,sans-serif;color:#E8ECF4;background:#07090D;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background-image:radial-gradient(600px 400px at 20% 10%,rgba(255,79,154,.14),transparent),
                   radial-gradient(600px 400px at 85% 90%,rgba(80,120,255,.12),transparent);
}
.card{width:100%;max-width:400px;background:#0E1219;border:1px solid #1D2430;border-radius:18px;padding:32px 28px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.brand{font-weight:800;font-size:22px;letter-spacing:-.03em;text-align:center;margin-bottom:22px}
.brand span{color:#7C8799;font-weight:600}
h1{font-size:20px;margin:0 0 8px;text-align:center;letter-spacing:-.02em}
.sub{color:#8C97A8;font-size:13.5px;line-height:1.5;text-align:center;margin:0 0 22px}
.steps{color:#A9B3C3;font-size:13px;line-height:1.55;padding-left:18px;margin:14px 0}
.steps li{margin-bottom:6px}
code{font-family:'JetBrains Mono',monospace}
.steps code{background:#171D28;padding:1px 5px;border-radius:5px}
.key{display:flex;align-items:center;gap:8px;background:#0A0D13;border:1px dashed #2B3546;border-radius:10px;padding:10px 12px;margin-bottom:10px}
.key code{flex:1;font-size:14px;font-weight:700;letter-spacing:.08em;word-break:break-all;color:#FF7AB5}
.mini{background:#1B2230;color:#E8ECF4;border:0;border-radius:7px;padding:6px 10px;font-size:12px;font-weight:600;cursor:pointer}
.mini:hover{background:#252E40}
.otp{display:flex;gap:8px;justify-content:center;margin-bottom:14px}
.otp input{width:46px;height:56px;text-align:center;font:700 22px 'JetBrains Mono',monospace;color:#fff;background:#0A0D13;border:1px solid #232C3B;border-radius:11px;outline:none;transition:border-color .15s,box-shadow .15s}
.otp input:focus{border-color:#FF4F9A;box-shadow:0 0 0 3px rgba(255,79,154,.18)}
.otp.shake{animation:shake .35s}
.otp.bad input{border-color:#FF5470}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.msg{min-height:20px;text-align:center;font-size:12.5px;color:#FF5470;margin-bottom:10px}
.msg.ok{color:#3DDC97}
.btn{width:100%;height:46px;border:0;border-radius:11px;font:700 14px Inter,sans-serif;color:#fff;cursor:pointer;background:linear-gradient(135deg,#FF4F9A,#FF7A59);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.99)}
.btn:disabled{opacity:.5;cursor:default}
.link{display:block;margin:14px auto 0;background:none;border:0;color:#7C8799;font:500 12.5px Inter,sans-serif;cursor:pointer;text-align:center;text-decoration:none}
.link:hover{color:#E8ECF4}
[hidden]{display:none!important}
@media(max-width:380px){.otp input{width:40px;height:50px}}