*{box-sizing:border-box}
html,body{margin:0;min-height:100%;overflow:hidden;background:#020713;color:#edf5ff;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif}
[hidden]{display:none!important}
.viewport{position:fixed;inset:0;isolation:isolate;overflow:auto;background:#020713;color:#f6f8ff;color-scheme:dark}
.background{position:fixed;inset:0;z-index:-2;pointer-events:none}
.background img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.lights{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.content{position:relative;display:flex;flex-direction:column;align-items:center;min-height:100%;min-height:100svh;width:100%;padding:max(24px,env(safe-area-inset-top)) 28px max(40px,calc(env(safe-area-inset-bottom) + 28px))}
.brand{width:min(100%,440px);margin-top:clamp(120px,24svh,240px)}
.logo{display:block;width:100%;height:auto;object-fit:contain}
.srOnly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.panel{width:min(100%,420px);margin-top:clamp(48px,9svh,80px)}
.heading{width:fit-content;max-width:100%;margin:0 auto 26px;padding:7px 18px;border:1px solid rgba(126,185,255,.28);border-radius:999px;background:#020713e6;color:#f6f8ff;text-align:center;font-size:20px;line-height:1.5;font-weight:600;letter-spacing:-.02em;box-shadow:0 6px 24px #00000059}
.form,.fieldGroup{display:flex;flex-direction:column}
.form{gap:16px}
.fieldGroup{gap:9px}
.fieldGroup label{color:#f4f6fe;font-size:15px;line-height:1.5}
.inputWrap{display:flex;align-items:center;min-height:54px;border:1px solid #7183a6;border-radius:14px;padding:0 18px;background:rgba(10,17,31,.94);color:#a3b5db;transition:border-color .16s ease,box-shadow .16s ease}
.inputWrap:focus-within{border-color:#80ceff;box-shadow:0 0 0 3px #4caeff38}
.inputWrap input{display:block;width:100%;min-width:0;min-height:52px;border:0;padding:0;background:transparent;color:#f6f8ff;font:inherit;font-size:16px;line-height:1.5;outline:none;box-shadow:none}
.inputWrap input::placeholder{color:#a0afcd;opacity:1}
.inputWrap input:disabled{opacity:.7}
.codeInput{letter-spacing:.28em;text-align:center;font-variant-numeric:tabular-nums}
.primary,.google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:54px;padding:12px 16px;border:1px solid;border-radius:999px;font:inherit;font-size:15px;line-height:1.5;font-weight:600;text-align:center;cursor:pointer;transition:filter .16s ease,box-shadow .16s ease,background-color .16s ease}
.primary{border-color:#75daff;background:linear-gradient(180deg,#008cff,#0051d3 35%,#004fe1);color:#fff;box-shadow:0 8px 34px #0060ff3d}
.primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:0 8px 36px #0073ff66}
.primary span{font-size:23px;font-weight:400;line-height:1}
.google{border-color:#8eabc7;background:#08101ff5;color:#f6f8ff;box-shadow:0 6px 24px #00000040}
.google:hover:not(:disabled){background:#12233a}
.googleMark{font-size:20px;font-weight:700;line-height:1}
.primary:focus-visible,.google:focus-visible,.textButton:focus-visible{outline:3px solid #a6e3ff;outline-offset:4px}
button:disabled{opacity:.65;cursor:wait}
.divider{display:flex;align-items:center;gap:16px;margin:16px 0;color:#c0cbe1;font-size:13px;line-height:1}
.divider:before,.divider:after{content:"";height:1px;flex:1;background:#7588aa80}
.divider span{padding:2px 8px;border-radius:99px;background:#020713e6}
.codeActions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.textButton{min-height:44px;padding:6px 0;border:0;background:#020713cc;color:#c2e6ff;font:inherit;font-size:13px;border-radius:8px;cursor:pointer}
.textButton:disabled{cursor:default}
.status{margin:0 0 18px;padding:11px 14px;border:1px solid #8db5da;border-radius:12px;background:#071424f5;color:#e4f4ff;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
.status:empty{display:none}
.status[data-state="error"]{border-color:#e89aa6;background:#301322;color:#ffd9df}
.footer{width:fit-content;max-width:100%;margin:24px auto 0;padding:8px 16px;border:1px solid rgba(126,185,255,.24);border-radius:999px;background:rgba(2,7,19,.90);color:#edf5ff;font-size:14px;line-height:1.6;font-weight:500;text-align:center;box-shadow:0 6px 24px rgba(0,0,0,.35)}
@media(min-width:900px){.content{justify-content:center;padding:60px 32px 88px}.brand{width:min(44vw,540px);margin-top:0}.panel{margin-top:48px;width:380px}.heading{font-size:22px}.primary,.google{min-height:56px;font-size:16px}.inputWrap{min-height:58px;background:rgba(5,12,26,.96)}.inputWrap input{min-height:56px}.fieldGroup label{text-shadow:-1px -1px 0 #020713,0 -1px 0 #020713,1px -1px 0 #020713,-1px 0 0 #020713,1px 0 0 #020713,-1px 1px 0 #020713,0 1px 0 #020713,1px 1px 0 #020713,0 0 4px #020713}}
@media(max-height:700px){.content{padding-top:24px}.brand{margin-top:10svh;max-width:340px}.panel{margin-top:32px}}
@media(max-width:359px){.content{padding-left:20px;padding-right:20px}.primary,.google{font-size:14px;gap:8px}.fieldGroup label{font-size:14px}.codeActions{gap:8px}.textButton{font-size:12px}}
@media(prefers-reduced-motion:reduce){.viewport *,.viewport *:before,.viewport *:after{animation:none!important;transition:none!important}}