:root{color-scheme:dark;font-family:'IBM Plex Sans',sans-serif;background:#080f1e;color:#f4f7fc}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:48px 24px;position:relative;isolation:isolate;overflow-x:hidden}
.backdrop{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 34%,#1834556b 0,transparent 58%)}
.wing{position:absolute;display:block;transform:skewX(-28deg);border:1px solid #87bbfa0d;background:linear-gradient(180deg,#3978c520,#214f8606);width:clamp(150px,19vw,300px);height:130vh;top:-35vh;left:calc(50% - 480px)}
.wing:last-child{top:10vh;left:calc(50% + 220px);background:linear-gradient(0deg,#2b8ca521,#1c3f6905);border-color:#96d6e10a}
main{width:min(100%,404px);position:relative}
.card{border:1px solid #ffffff12;border-radius:20px;background:linear-gradient(160deg,#152135 0%,#101a2b 60%,#111c2d 100%);padding:36px;box-shadow:0 24px 90px #00000038,inset 0 1px 0 #ffffff06;position:relative;overflow:hidden}
.card:before{content:'';position:absolute;top:0;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#b4d7ff70,transparent);z-index:2}
.card:after{content:'';position:absolute;top:0;left:0;right:0;height:235px;background:linear-gradient(115deg,#3548a3c2 0%,#285d968f 52%,#2084958a 100%);mask-image:linear-gradient(to bottom,#000 0%,#000a 30%,#0003 67%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000a 30%,#0003 67%,transparent 100%);pointer-events:none}
.card>*{position:relative;z-index:1}
.brand{display:block;width:110px;height:110px;margin:-15px auto 2px;object-fit:contain;filter:drop-shadow(0 8px 18px #06112655)}
h1{text-align:center;font-weight:500;font-size:29px;letter-spacing:-.055em;line-height:1.15;margin:0 0 30px}
.field{margin-bottom:21px}
label{display:block;font-size:13px;font-weight:500;color:#c6d0df;margin-bottom:9px}
.input-wrap{position:relative}
input{display:block;width:100%;height:49px;border:1px solid #334056;border-radius:8px;background:#0b1424;color:#f4f7fc;font:400 15px 'IBM Plex Sans',sans-serif;padding:0 14px;transition:border-color .16s,box-shadow .16s}
input::placeholder{color:#7d8ba0}
input:focus{outline:none;border-color:#85b8fc;box-shadow:0 0 0 3px #76aef321}
input[name=password]{padding-right:49px}
input:-webkit-autofill{-webkit-text-fill-color:#f4f7fc;box-shadow:0 0 0 1000px #0b1424 inset;caret-color:#f4f7fc}
button{font-family:inherit;cursor:pointer}
.reveal{position:absolute;right:4px;top:3px;bottom:3px;width:42px;padding:0;display:grid;place-items:center;border:0;border-radius:5px;color:#97a8c0;background:transparent}
.reveal[hidden]{display:none}
.reveal:hover{color:#fff;background:#ffffff07}
.reveal svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}
.reveal .slash{display:none}
.reveal[aria-pressed=true] .slash{display:block}
button:focus-visible{outline:2px solid #8bbcff;outline-offset:3px}
.submit{margin-top:5px;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:49px;border:1px solid #ffffffbf;border-radius:8px;background:#edf3fc;color:#12223a;font-size:14px;font-weight:600;box-shadow:0 2px 5px #0002;transition:background .16s,box-shadow .16s}
.submit:hover{background:#fff;box-shadow:0 4px 18px #b0d4ff15}
.submit:disabled{cursor:wait;opacity:.7}
.submit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;transition:transform .16s}
.submit:hover svg{transform:translateX(3px)}
.message{font-size:13px;line-height:1.5;padding:12px 14px;border:1px solid #e9937952;border-radius:7px;background:#64372533;color:#f3b9a7;margin:-9px 0 24px}
.client{font-size:14px;font-weight:600;color:#91a0b6;text-align:center;letter-spacing:-.035em;margin:25px 0 0}
.client span{font-weight:400}
.hint{text-align:center;color:#aab8cb;font-size:13px;line-height:1.6;margin:-15px 0 25px;overflow-wrap:anywhere}
.hint strong{color:#dce5f3;font-weight:500}
.code{font-size:26px;letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums;padding-left:22px;height:58px}
.otp-card h1{font-size:25px;letter-spacing:-.04em;margin-bottom:24px}
.otp-card:after{height:310px;background:linear-gradient(115deg,#354eaec9 0%,#28668f9c 55%,#227a8e91 100%)}
.otp-card .hint{margin:0 0 28px}
.otp-field{position:relative;margin:0 0 24px}
.otp-slots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:6px;pointer-events:none}
.otp-slots[hidden]{display:none}
.otp-slot{height:52px;display:grid;place-items:center;border:1px solid #6683ae58;border-radius:10px;background:linear-gradient(155deg,#557ca42e,#2a48631a);box-shadow:inset 0 1px 0 #ffffff09;color:#f4f7fc;font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;transition:border-color .16s,background .16s,box-shadow .16s}
.otp-slot.filled{background:#48719335;border-color:#95c8e96b}
.otp-field:focus-within .otp-slot.active{border-color:#b4dfff;box-shadow:0 0 0 3px #88bfff20;background:#5486b137}
.otp-field.segmented .code{position:absolute;inset:0;height:100%;opacity:0;z-index:2;cursor:text;font-size:16px;letter-spacing:0;padding:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.minor{display:block;text-align:center;font-size:13px;color:#b5c9e5;margin:23px auto 0;text-underline-offset:4px}
.minor:hover{color:#fff}
.resend{display:block;border:0;background:transparent;color:#bfd2ed;font-size:13px;margin:20px auto 0;padding:5px}
.resend:disabled{color:#8f9fb5;cursor:default}
.note{text-align:center;font-size:12px;line-height:1.5;color:#93a4bc;margin:17px 0 0}
a:focus-visible{outline:2px solid #8bbcff;outline-offset:4px}
@media(max-width:480px){body{padding:30px 20px}.card{padding:31px 25px;border-radius:17px}.wing{left:calc(50% - 260px)}.wing:last-child{left:calc(50% + 125px)}}
@media(prefers-reduced-motion:reduce){input,.submit,.submit svg{transition:none}.submit:hover svg{transform:none}}