:root{--h50:#F4F7FE;--h200:#C8D8FA;--h500:#2563EB;--h600:#1F54C8;--ink:#0A0F1A;--c400:#667080;--cem200:#E4E8ED;--ok:#059669;--err:#B42318;--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:radial-gradient(60rem 40rem at 20% -10%,var(--h200),transparent 60%),radial-gradient(50rem 36rem at 110% 110%,#dbe7ff,transparent 55%),var(--h50);display:grid;place-items:center;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom))}
.card{width:min(24rem,100%);padding:2rem 1.6rem 1.6rem;border-radius:1.6rem;background:rgba(255,255,255,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4);border:1px solid rgba(255,255,255,.9);box-shadow:0 1px 0 #fff inset,0 24px 60px -24px rgba(37,99,235,.35),0 2px 8px rgba(10,15,26,.05);animation:in .6s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
img{display:block;width:44px;height:44px;margin:0 auto 1rem;border-radius:12px}
h1{margin:0 0 .25rem;font-size:1.3rem;text-align:center;letter-spacing:-.01em}
p{margin:0 0 1.2rem;text-align:center;color:var(--c400);font-size:.92rem}
button{width:100%;min-height:3rem;border:0;border-radius:.9rem;font:inherit;font-weight:600;color:#fff;background:linear-gradient(180deg,var(--h500),var(--h600));cursor:pointer;transition:transform .25s var(--ease),opacity .2s;box-shadow:0 8px 20px -8px rgba(37,99,235,.7)}
button:active{transform:scale(.98)}button:disabled{opacity:.55;cursor:default}
input{width:100%;min-height:3.4rem;border:1px solid var(--cem200);border-radius:.9rem;background:#fff;font:600 1.7rem/1 ui-monospace,monospace;letter-spacing:.5em;text-align:center;color:var(--ink);margin-bottom:.8rem;outline:none;transition:box-shadow .2s,border-color .2s}
input:focus{border-color:var(--h500);box-shadow:0 0 0 4px rgba(37,99,235,.15)}
.msg{min-height:1.3rem;margin:.8rem 0 0;font-size:.88rem;color:var(--err)}.msg.ok{color:var(--ok)}
.link{background:none;box-shadow:none;color:var(--h600);min-height:2.4rem;margin-top:.3rem;font-weight:500}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.card{animation:none}}