:root { --navy:#12213a; --blue:#1f72e5; --border:#dfe4ec; --text:#162033; --muted:#6c7688; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; background:#f4f6fa; color:var(--text); font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.login-shell { display:grid; min-height:100vh; grid-template-columns:minmax(300px, .72fr) minmax(480px, 1.28fr); }
.login-brand-panel { display:grid; padding:44px; place-items:center; background:var(--navy); color:#fff; }
.login-brand { display:flex; align-items:baseline; gap:8px; letter-spacing:.06em; }
.login-brand strong { font-size:56px; line-height:1; }
.login-brand span { color:#aab8cc; font-size:14px; font-weight:800; letter-spacing:.18em; }
.login-form-panel { display:grid; padding:34px; place-items:center; }
.login-box { width:min(100%,400px); padding:32px; border:1px solid var(--border); border-radius:14px; background:#fff; box-shadow:0 12px 35px rgba(18,33,58,.08); }
.login-box h2 { margin:0 0 22px; font-size:29px; letter-spacing:-.025em; }
.login-box label { display:block; margin:16px 0 7px; color:#3d485c; font-size:13px; font-weight:700; }
.login-box input { width:100%; min-height:46px; padding:10px 12px; border:1px solid #cbd3df; border-radius:8px; color:var(--text); font:inherit; }
.login-box input:focus { border-color:var(--blue); outline:0; box-shadow:0 0 0 3px rgba(31,114,229,.18); }
.login-box button { width:100%; min-height:46px; margin-top:24px; border:1px solid var(--blue); border-radius:8px; background:var(--blue); color:#fff; font:inherit; font-weight:700; cursor:pointer; }
.login-box button:hover { background:#1660c7; }
.login-mobile-brand { display:none; margin-bottom:24px; color:var(--navy); font-size:30px; font-weight:800; letter-spacing:.06em; }
.login-mobile-brand span { color:#708098; font-size:10px; letter-spacing:.14em; }
@media(max-width:800px){.login-shell{grid-template-columns:1fr}.login-brand-panel{display:none}.login-form-panel{padding:22px}.login-box{padding:28px}.login-mobile-brand{display:block}}
@media(max-width:420px){.login-form-panel{padding:13px}.login-box{padding:23px;border-radius:11px}}