:root{--navy:#172736;--navy-light:#304c64;--teal:#168f90;--ink:#172b3b;--muted:#738698;--line:#dfe6ed;--paper:#ffffff;--bg:#eaf0f5}
*{box-sizing:border-box}
html{min-height:100%;scroll-behavior:smooth}
body{margin:0;min-height:100vh;display:grid;place-items:center;padding:28px;background:radial-gradient(circle at 5% 12%,rgba(71,126,170,.15),transparent 28%),linear-gradient(145deg,#eaf0f6,#f8fafc);font:400 15px/1.5 Inter,'Segoe UI',system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,input{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid rgba(22,143,144,.28);outline-offset:3px}
.login-shell{display:grid;grid-template-columns:1fr 1fr;width:min(1140px,100%);min-height:620px;background:var(--paper);border:1px solid rgba(255,255,255,.65);border-radius:28px;overflow:hidden;box-shadow:0 25px 85px rgba(18,42,64,.14);animation:slideIn .6s ease-out both}
.story{min-height:620px;position:relative;display:flex;align-items:flex-end;overflow:hidden;background:#1c3750;color:#fff;padding:58px}
.story-photo{position:absolute;inset:0;background:url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=1400&q=85') center/cover no-repeat;opacity:.35;filter:saturate(.72)}
.story-gradient{position:absolute;inset:0;background:linear-gradient(145deg,rgba(16,34,50,.36),rgba(18,40,58,.8) 48%,rgba(13,27,40,.98));}
.story::after{content:"";position:absolute;width:350px;height:350px;right:-150px;top:-170px;border:1px solid rgba(255,255,255,.16);border-radius:50%;box-shadow:0 0 0 65px rgba(255,255,255,.025),0 0 0 130px rgba(255,255,255,.022)}
.story-content{position:relative;z-index:1;max-width:460px}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.15em;font-weight:800}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:#b2d8df}
.signal{width:8px;height:8px;border-radius:50%;background:#60d6c7;box-shadow:0 0 0 5px rgba(96,214,199,.13)}
.story h2{font-size:clamp(36px,3.4vw,52px);letter-spacing:-.055em;line-height:1.09;margin:23px 0 20px}
.story h2 span{color:#7ad3d0}
.story p{margin:0;color:#cddce5;font-size:15px;line-height:1.85}
.story-bottom{display:flex;gap:12px;align-items:center;margin-top:46px;color:#9db9c9;font-size:11px;letter-spacing:.03em}
.story-bottom .line{width:30px;height:2px;border-radius:5px;background:#5cc8c5}
.form-side{display:grid;align-items:center;padding:58px clamp(28px,5vw,74px)}
.form-content{width:min(100%,420px);margin:auto}
.logo-wrap{height:64px;margin-bottom:34px;display:flex;align-items:center}
.logo{max-width:160px;max-height:64px;object-fit:contain}
.logo-fallback{color:#172736;font-weight:700;font-size:23px}
.form-header{margin-bottom:32px}
.section-kicker{color:var(--teal);margin-bottom:10px}
h1{margin:0 0 10px;font-size:clamp(26px,2.3vw,33px);letter-spacing:-.045em;line-height:1.2}
.form-header p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
.input-group{margin-bottom:21px}
.input-group label{display:block;font-size:12px;font-weight:750;margin-bottom:9px;color:#40566a}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>svg{position:absolute;left:16px;width:19px;height:19px;color:#8799a9;pointer-events:none}
.input-wrap input{width:100%;height:52px;border:1px solid var(--line);border-radius:13px;background:#f7fafc;padding:0 48px;color:var(--ink);outline:none;transition:border-color .18s,background .18s,box-shadow .18s}
.input-wrap input:hover{background:#fff}
.input-wrap input:focus{background:#fff;border-color:#5498b2;box-shadow:0 0 0 4px rgba(84,152,178,.12)}
.input-wrap input::placeholder{color:#a6b3bf}
.visibility-btn{position:absolute;right:8px;width:36px;height:36px;border:0;border-radius:9px;background:transparent;color:#8798a7;display:grid;place-items:center}
.visibility-btn:hover{color:var(--navy);background:#eaf1f5}
.visibility-btn svg{height:19px;width:19px}
.options-row{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:4px 0 25px}
.remember{display:flex;gap:9px;align-items:center;color:#63778a;font-size:12px;cursor:pointer}
.remember input{accent-color:#168f90;width:16px;height:16px}
.help-link{border:0;background:transparent;color:#347c9c;font-weight:700;font-size:12px;padding:5px 0}
.help-link:hover{text-decoration:underline}
.help-note{font-size:12px;line-height:1.5;color:#5b7890;background:#f1f7fa;border:1px solid #dceaf1;padding:10px 12px;border-radius:10px;margin:-12px 0 16px}
.message{padding:12px 13px;border-radius:10px;font-size:12px;line-height:1.6;margin-bottom:15px;background:#fff2f0;color:#9c3931;border:1px solid #f4d5cf}
.submit-btn{border:0;width:100%;height:53px;border-radius:13px;background:linear-gradient(130deg,#1a3549,#28536b);color:#fff;display:flex;align-items:center;justify-content:center;gap:10px;font-weight:770;box-shadow:0 12px 23px rgba(26,53,73,.17);transition:transform .2s,box-shadow .2s,filter .2s}
.submit-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 26px rgba(26,53,73,.24);filter:brightness(1.06)}
.submit-btn:disabled{opacity:.65;cursor:wait}
.submit-btn svg{width:19px;height:19px}
.form-footer{border-top:1px solid #edf0f4;margin-top:32px;padding-top:25px;color:#7a8b9b;font-size:12px;text-align:center}
.form-footer strong{color:#496478;font-weight:750}
.form-legal{display:flex;justify-content:space-between;gap:10px;margin-top:36px;color:#9aaaae;font-size:10px}
@keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:820px){body{padding:15px}.login-shell{grid-template-columns:1fr;max-width:550px;min-height:0}.story{display:none}.form-side{padding:42px 28px}}
@media(max-width:460px){body{padding:0;background:#fff}.login-shell{min-height:100vh;border-radius:0;box-shadow:none}.form-side{padding:35px 22px}.form-legal{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}