:root { --navy:#183985; --blue:#2856cf; --heading:#151b2b; --body:#425171; --muted:#8190b0; --field:#f7f8fb; --field-border:#e8ebf2; }
* { box-sizing:border-box; }
html, body { min-height:100%; }
body { margin:0; min-width:320px; color:var(--heading); font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif; -webkit-font-smoothing:antialiased; }
.login-page { display:flex; min-height:100dvh; overflow:hidden; }
.brand-panel { position:relative; display:flex; width:44%; min-height:100dvh; flex-direction:column; overflow:hidden; padding:42px 50px 38px; color:#fff; background:linear-gradient(180deg,var(--navy) 0%,var(--blue) 100%); }
.brand { position:relative; z-index:1; display:inline-flex; width:max-content; line-height:1; }
.brand img { display:block; width:166px; height:auto; object-fit:contain; object-position:left center; }
.brand-copy { z-index:1; margin:auto 0 31.5vh; }
.welcome,.brand-copy h1,.tagline { margin:0; }
.welcome { font-size:clamp(2rem,3vw,2.35rem); font-weight:400; letter-spacing:-1.2px; line-height:1.12; }
.brand-copy h1 { margin-top:2px; font-size:clamp(2rem,3.15vw,2.45rem); font-weight:700; letter-spacing:-1.5px; line-height:1.08; }
.tagline { margin-top:18px; color:#aac2e8; font-size:.94rem; font-weight:500; }
.circle { position:absolute; border:1px solid rgb(184 206 246 / 22%); border-radius:50%; pointer-events:none; }
.circle-one { bottom:-87px; left:-42px; width:364px; height:364px; }
.circle-two { bottom:45px; left:42px; width:240px; height:240px; }
.copyright { z-index:1; margin:0; color:#8eabe2; font-size:.75rem; font-weight:500; }
.form-panel { display:flex; width:56%; min-height:100dvh; align-items:center; justify-content:center; padding:48px; background:#fff; }
.login-form { width:min(100%,420px); margin-top:-2px; }
.login-form header { margin-bottom:31px; }
.login-form h2 { margin:0; color:var(--heading); font-size:1.78rem; font-weight:700; letter-spacing:-1.1px; line-height:1.2; }
.login-form header p { margin:7px 0 0; color:var(--muted); font-size:.94rem; font-weight:500; }
.field-group { margin-top:19px; }
.field-group:first-of-type { margin-top:0; }
.field-group label { display:block; margin-bottom:8px; color:var(--body); font-size:.82rem; font-weight:600; }
.field-group input { display:block; width:100%; height:44px; border:1px solid var(--field-border); border-radius:10px; outline:none; padding:0 16px; color:var(--heading); background:var(--field); font:inherit; font-size:.92rem; transition:border-color 150ms ease,box-shadow 150ms ease; }
.field-group input::placeholder { color:#b9c3d9; font-weight:600; opacity:1; }
.field-group input:focus { border-color:#7294e7; box-shadow:0 0 0 3px rgb(40 86 207 / 12%); }
.remember { display:inline-flex; margin-top:20px; align-items:center; gap:9px; color:var(--body); font-size:.83rem; font-weight:500; cursor:pointer; }
.remember input { width:16px; height:16px; margin:0; accent-color:var(--blue); cursor:pointer; }
button { display:block; width:100%; height:46px; margin-top:24px; border:0; border-radius:10px; color:#fff; background:#2b5bd3; font:inherit; font-size:.92rem; font-weight:700; cursor:pointer; transition:background 150ms ease,transform 150ms ease; }
button:hover { background:#204dc1; }
button:active { transform:translateY(1px); }
button:focus-visible { outline:3px solid rgb(128 163 255 / 90%); outline-offset:3px; }
.validation-summary { margin:0 0 16px; color:#b42318; font-size:.8rem; font-weight:500; }
.validation-summary ul { margin:0; padding-left:17px; }
.validation-summary:empty { display:none; }
.field-validation { display:block; min-height:0; margin-top:5px; color:#b42318; font-size:.75rem; }
@media (max-width:780px) { .login-page { min-height:100dvh; flex-direction:column; overflow:auto; } .brand-panel { width:100%; min-height:235px; padding:29px 29px 26px; } .brand img { width:142px; } .brand-copy { margin:auto 0 0; } .welcome { font-size:1.75rem; } .brand-copy h1 { font-size:1.85rem; } .tagline { margin-top:10px; font-size:.82rem; } .copyright { display:none; } .circle-one { right:-67px; bottom:-163px; left:auto; width:290px; height:290px; } .circle-two { right:32px; bottom:-91px; left:auto; width:190px; height:190px; } .form-panel { width:100%; min-height:auto; flex:1; padding:55px 28px; align-items:flex-start; } }
@media (max-width:390px) { .brand-panel { min-height:220px; } .form-panel { padding:42px 22px; } }