body{--navy:#10316b;--blue:#1677ff;--bg:#e9eef9;--card:#fff;--ink:#141a2b;--mute:#6b7488;--line:#d9e0ef;--soft:#e8eef8;--bad:#dc2626;--ok:#16a34a;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){body:not(.light){--navy:#3b6fd4;--bg:#0d1220;--card:#151c2e;--ink:#eef1f8;--mute:#939db5;--line:#242d44;--soft:#1e2842}}
body.dark{--navy:#3b6fd4;--bg:#0d1220;--card:#151c2e;--ink:#eef1f8;--mute:#939db5;--line:#242d44;--soft:#1e2842}
html,body{height:100%}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 Poppins,"Segoe UI",system-ui,sans-serif}
.shell{display:grid;grid-template-columns:minmax(320px,.9fr) 1.1fr;min-height:100%}
.brand{background:linear-gradient(155deg,#10316b,#1b57c7);color:#fff;padding:40px 48px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.brand::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;right:-150px;bottom:-120px;background:rgba(255,255,255,.08)}
.brand::before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;left:-80px;top:38%;background:rgba(255,255,255,.06)}
.brand>*{position:relative;z-index:1}
.logo{display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.logo span{width:34px;height:34px;border-radius:10px;background:#fff;color:#10316b;display:grid;place-items:center;font-weight:700}
.brand h2{font-size:30px;line-height:1.25;margin:0 0 12px;max-width:380px}
.brand p{margin:0 0 20px;opacity:.85;max-width:380px}
.brand ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.brand li{padding-left:28px;position:relative;opacity:.95}
.brand li::before{content:"✓";position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;place-items:center;font-size:11px}
.brand small{opacity:.6}
.panel{display:grid;place-items:center;padding:32px 24px;position:relative}
.theme{position:absolute;top:18px;right:20px;background:var(--card);border:1px solid var(--line);border-radius:10px;width:38px;height:38px;cursor:pointer;font-size:16px}
.box{width:100%;max-width:400px}
.view{background:var(--card);border-radius:20px;padding:36px 32px;box-shadow:0 10px 40px rgba(16,49,107,.10);border:1px solid var(--line);animation:in .3s ease-out}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
h1{margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:-.01em}
.lead{margin:0 0 24px;color:var(--mute)}
.fld{margin-bottom:16px}
.fld label{display:block;font-size:13px;font-weight:500;margin-bottom:6px}
.in{display:flex;align-items:center;gap:10px;background:var(--bg);border:1.5px solid transparent;border-radius:12px;padding:0 14px;height:50px;transition:.15s}
.in:focus-within{border-color:var(--blue);background:var(--card);box-shadow:0 0 0 4px rgba(22,119,255,.14)}
.in svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--mute);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.in input{flex:1;min-width:0;border:0;background:none;outline:0;font:inherit;color:var(--ink);height:100%}
.in input::placeholder{color:var(--mute);opacity:.7}
.eye{background:none;border:0;padding:4px;cursor:pointer;display:grid;border-radius:6px}
.eye:hover svg,.eye.on svg{stroke:var(--blue)}
.fld.bad .in{border-color:var(--bad)}
.msg{display:none;color:var(--bad);font-size:12px;margin-top:5px}
.fld.bad .msg{display:block}
.caps{color:var(--mute);font-size:12px;display:block;margin-top:5px}
.opts{display:flex;justify-content:space-between;align-items:center;margin:4px 0 22px;font-size:13px;gap:10px;flex-wrap:wrap}
.rem{display:flex;align-items:center;gap:8px;color:var(--mute);cursor:pointer}
.rem input{accent-color:var(--navy);width:16px;height:16px}
a{color:var(--blue);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}
.cta{width:100%;height:50px;border:0;border-radius:12px;background:var(--navy);color:#fff;font:600 15px Poppins,sans-serif;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .1s,box-shadow .15s}
.cta:hover{box-shadow:0 8px 20px rgba(16,49,107,.28)}
.cta:active{transform:scale(.98)}
.cta.load{pointer-events:none;opacity:.85}
.cta.load::before{content:"";width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.alert{background:rgba(220,38,38,.1);color:var(--bad);border-radius:10px;padding:10px 14px;margin-bottom:16px;font-size:13px}
.back{background:none;border:0;color:var(--mute);cursor:pointer;font:500 13px Poppins,sans-serif;padding:0;margin-bottom:18px}
.back:hover{color:var(--blue)}
.ok{width:60px;height:60px;border-radius:50%;background:rgba(22,163,74,.12);display:grid;place-items:center;margin-bottom:16px}
.ok svg{width:30px;height:30px;fill:none;stroke:var(--ok);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.again{text-align:center;color:var(--mute);margin:16px 0 0;font-size:13px}
.shake{animation:sh .35s}
@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.btn:focus-visible,a:focus-visible,.cta:focus-visible,.theme:focus-visible,.eye:focus-visible,.back:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
[hidden]{display:none!important}
@media(max-width:820px){.shell{grid-template-columns:1fr}.brand{padding:22px 24px;gap:0}.brand>div:nth-child(2),.brand small{display:none}.panel{align-items:start;padding:24px 16px 40px}.view{padding:28px 22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}