:root{color-scheme:light;--ink:#211d24;--muted:#8a838d;--pink:#d4427d;--pink-dark:#ad285d;--paper:#fbfaf9;--line:#eee9ed}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper)}
body{min-height:100vh;min-height:100svh}
.login-page{min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(390px,1.03fr) minmax(460px,.97fr);max-width:1600px;margin:auto;background:#fbfaf9;overflow:hidden}
.welcome{position:relative;min-height:100vh;padding:42px clamp(34px,6vw,92px) 32px;color:#fff;background:radial-gradient(ellipse at 82% 78%,rgba(224,63,128,.24),transparent 34%),radial-gradient(ellipse at 2% 5%,rgba(102,70,118,.25),transparent 42%),linear-gradient(145deg,#242027 0%,#17151a 60%,#21191f 100%);display:flex;flex-direction:column;overflow:hidden}
.welcome:before,.welcome:after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(255,255,255,.07);border-radius:50%;width:520px;height:520px;right:-230px;top:38%}
.welcome:after{width:690px;height:690px;right:-315px;top:30%;border-color:rgba(255,255,255,.045)}
.welcome-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand-logo{display:block;width:173px;height:auto;max-height:45px;object-fit:contain;object-position:left center}
.secure-tag{display:inline-flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid rgba(255,255,255,.13);border-radius:999px;color:#d8d2db;font-size:11px;letter-spacing:.04em;background:rgba(255,255,255,.035)}
.secure-dot{width:7px;height:7px;border-radius:50%;background:#9cdcaa;box-shadow:0 0 12px rgba(156,220,170,.75)}
.welcome-copy{position:relative;z-index:2;max-width:530px;margin-top:clamp(80px,13vh,160px)}
.eyebrow{margin:0 0 18px;color:#bd8aa0;font-weight:700;font-size:10px;letter-spacing:.19em}
.welcome h1{margin:0;font-family:Manrope,'DM Sans',sans-serif;font-size:clamp(42px,5.2vw,72px);line-height:1.05;letter-spacing:-.055em;font-weight:700}
.welcome h1 span{color:#e37ca3}
.welcome-text{max-width:395px;margin:24px 0 0;color:#b7b0ba;font-size:15px;line-height:1.75}
.flow-art{position:relative;width:min(440px,100%);height:230px;margin:48px 0 0 10px;z-index:1}
.flow-line{position:absolute;height:1px;background:linear-gradient(90deg,rgba(224,92,143,.08),rgba(224,92,143,.72),rgba(224,92,143,.08));transform-origin:left center}
.line-one{width:220px;left:94px;top:72px;transform:rotate(31deg)}
.line-two{width:218px;left:97px;top:146px;transform:rotate(-31deg)}
.flow-node{position:absolute;display:flex;align-items:center;gap:9px;color:#c9c0cc;font-size:11px;letter-spacing:.02em}
.flow-node i{display:block;width:9px;height:9px;border:2px solid #e16a98;border-radius:50%;background:#211a22;box-shadow:0 0 16px rgba(225,106,152,.45)}
.node-one{left:0;top:58px}.node-two{left:270px;top:27px}.node-three{left:270px;top:158px}
.flow-core{position:absolute;left:84px;top:79px;width:45px;height:45px;border:1px solid rgba(237,142,174,.65);border-radius:15px;display:grid;place-items:center;color:#f5b2ca;font-family:Manrope,sans-serif;font-weight:800;font-size:12px;background:linear-gradient(145deg,rgba(217,70,126,.28),rgba(255,255,255,.04));box-shadow:0 0 34px rgba(202,59,113,.2);transform:rotate(45deg)}
.flow-core span{transform:rotate(-45deg)}
.welcome-foot{position:relative;z-index:2;margin:auto 0 0;color:#827b86;font-size:11px;letter-spacing:.03em}
.login-panel{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:44px clamp(28px,6.5vw,94px) 26px;background:linear-gradient(145deg,#fff 0%,#fbfaf9 55%,#f8f3f5 100%);position:relative}
.login-card{width:min(100%,390px);margin:auto 0}
.mobile-brand{display:none}
.lock-icon{width:52px;height:52px;display:grid;place-items:center;margin-bottom:30px;border:1px solid #f0d7e1;border-radius:16px;background:linear-gradient(145deg,#fff,#fff4f8);box-shadow:0 8px 24px rgba(149,29,77,.07)}
.lock-icon svg{width:23px;height:23px;fill:none;stroke:var(--pink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.login-panel .eyebrow{margin-bottom:10px;color:var(--pink);font-size:10px}
.login-panel h2{margin:0;font-family:Manrope,'DM Sans',sans-serif;font-size:31px;line-height:1.22;letter-spacing:-.045em;font-weight:700}
.login-help{margin:12px 0 34px;color:#77717b;font-size:14px;line-height:1.65}
#loginForm label{display:block;margin-bottom:9px;font-weight:700;font-size:12px;color:#413a44}
.code-field{position:relative}
.code-field input{width:100%;height:58px;padding:0 80px 0 18px;border:1px solid #e4dfe4;border-radius:12px;background:#fff;color:var(--ink);font-family:Manrope,sans-serif;font-size:22px;letter-spacing:.28em;outline:none;transition:border-color .18s,box-shadow .18s,background .18s}
.code-field input::placeholder{color:#c8c1ca;letter-spacing:.23em}
.code-field input:focus{border-color:#d96992;box-shadow:0 0 0 4px rgba(212,66,125,.1)}
.code-field input[aria-invalid="true"]{border-color:#d4483b;background:#fffafa;box-shadow:0 0 0 4px rgba(212,72,59,.08)}
.code-count{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:#a39ba5;font-size:11px;font-variant-numeric:tabular-nums;letter-spacing:0}
.login-message{min-height:20px;margin:9px 1px 10px;color:#b93345;font-size:12px}
.login-submit{width:100%;height:54px;border:0;border-radius:12px;background:linear-gradient(100deg,#d7467f,#bd2f68);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;font:700 13px 'DM Sans',sans-serif;cursor:pointer;box-shadow:0 10px 23px rgba(181,45,99,.21);transition:transform .18s,box-shadow .18s,filter .18s}
.login-submit:hover{transform:translateY(-1px);box-shadow:0 13px 27px rgba(181,45,99,.28);filter:saturate(1.08)}
.login-submit:active{transform:translateY(0)}
.login-submit:disabled{opacity:.62;cursor:wait;transform:none}
.login-submit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.privacy-note{display:flex;align-items:center;justify-content:center;gap:8px;margin:25px 0 0;color:#8e8791;font-size:11px}
.privacy-note svg{width:14px;height:14px;fill:none;stroke:#b14b73;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.panel-foot{width:min(100%,390px);margin:22px 0 0;color:#a29ba4;text-align:center;font-size:10px;letter-spacing:.04em}
.panel-foot span{padding:0 5px;color:#d1c9d0}
@media(max-width:850px){.login-page{grid-template-columns:minmax(300px,.9fr) minmax(380px,1.1fr)}.welcome{padding:34px 34px 26px}.welcome-copy{margin-top:12vh}.welcome h1{font-size:50px}.flow-art{transform:scale(.86);transform-origin:left center;margin-top:35px}.login-panel{padding:36px}}
@media(max-width:650px){.login-page{display:block;min-height:100vh;background:radial-gradient(ellipse at 80% 5%,rgba(212,66,125,.11),transparent 38%),#fbfaf9}.welcome{display:none}.login-panel{min-height:100vh;min-height:100svh;padding:34px 24px 22px;background:transparent}.login-card{width:min(100%,390px)}.mobile-brand{display:block;width:max-content;margin:0 0 70px;padding:8px 12px;border-radius:12px;background:#211d24}.mobile-brand img{width:155px;height:auto;max-height:42px;object-fit:contain;object-position:left}.lock-icon{margin-bottom:26px}.login-panel h2{font-size:29px}.login-help{margin-bottom:30px}.panel-foot{margin-top:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}