:root { --blue:#0967b3; --navy:#063d6b; --red:#df3425; --ink:#152737; --muted:#6b7b88; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; font-family:"Manrope",Arial,sans-serif; color:var(--ink); background:#f4f7f9; }
.login-shell { min-height:100vh; display:grid; grid-template-columns:minmax(430px,1.15fr) minmax(420px,.85fr); }
.brand-side { position:relative; overflow:hidden; display:flex; align-items:center; color:white; padding:70px clamp(45px,7vw,110px); background:linear-gradient(135deg,rgba(3,52,91,.99),rgba(6,110,182,.94)); }
.brand-side::before { content:""; position:absolute; width:620px; height:620px; border:1px solid rgba(255,255,255,.1); border-radius:110px; right:-260px; top:-300px; transform:rotate(-18deg); }
.brand-grid { position:absolute; inset:0 0 0 35%; opacity:.08; background-image:linear-gradient(white 1px,transparent 1px),linear-gradient(90deg,white 1px,transparent 1px); background-size:58px 58px; }
.brand-copy { position:relative; z-index:1; max-width:640px; }
.brand-copy img { width:140px; padding:10px 14px; border-radius:12px; background:white; margin-bottom:55px; }
.eyebrow { display:block; color:#acd8f5; font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:16px 0 24px; font-size:clamp(46px,5vw,72px); line-height:1.03; letter-spacing:-.05em; }
h1 em { color:#82c6f4; font-style:normal; }
.brand-copy p { max-width:570px; color:#d8e9f4; font-size:15px; line-height:1.75; }
.form-side { display:flex; align-items:center; justify-content:center; padding:45px; background:white; }
form { width:min(100%,430px); }
.form-head span { color:var(--blue); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
h2 { font-size:37px; margin:8px 0 7px; letter-spacing:-.04em; }
.form-head p { margin:0 0 34px; color:var(--muted); font-size:13px; }
label { display:block; margin:17px 0 8px; font-size:11px; font-weight:800; }
input[type=text],input[type=password] { width:100%; height:54px; border:1px solid #dce4e9; border-radius:11px; padding:0 15px; outline:none; font-size:14px; transition:.15s; }
input:focus { border-color:#69acd9; box-shadow:0 0 0 4px rgba(9,103,179,.1); }
form > button { width:100%; border:0; border-radius:11px; background:var(--red); color:white; cursor:pointer; display:flex; justify-content:space-between; padding:17px 20px; margin-top:25px; font-weight:800; }
form > button:hover { background:#c92d21; }
form small { display:block; text-align:center; color:#87949e; font-size:9px; line-height:1.55; margin:18px 22px 0; }
.alert { background:#fff0ee; border:1px solid #f2c4bf; color:#a13b31; border-radius:10px; padding:12px 14px; font-size:11px; margin-bottom:18px; }
@media(max-width:850px){.login-shell{grid-template-columns:1fr}.brand-side{min-height:300px;padding:44px 28px}.brand-copy img{width:105px;margin-bottom:28px}h1{font-size:42px}.brand-copy p{display:none}.form-side{padding:45px 25px}}
@media(max-width:480px){.brand-side{min-height:245px}h1{font-size:34px}.form-side{align-items:flex-start;padding-top:38px}h2{font-size:31px}}