*{box-sizing:border-box}
body{margin:0;font-family:Arial,"Tahoma",sans-serif;background:#f4f7fb;color:#082b57}
.login-shell{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
.login-brand{background:linear-gradient(145deg,#062957,#003da5);color:#fff;padding:8vw;display:flex;flex-direction:column;justify-content:center}
.logo{width:72px;height:72px;border-radius:22px;background:#ffc400;display:grid;place-items:center;font-size:36px;margin-bottom:26px}
.login-brand small{font-weight:900;letter-spacing:.08em;color:#ffc400}
.login-brand h1{font-size:48px;line-height:1.1;margin:12px 0}
.login-brand p{font-size:18px;color:#d6e4f7;max-width:600px}
.role-list{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.role-list span{padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.12)}
.login-card{padding:8vw;display:flex;flex-direction:column;justify-content:center}
.login-card h2{font-size:32px;margin:0 0 6px}.login-card p{color:#708098}
.login-card form{display:grid;gap:16px;margin-top:22px}
.login-card label{display:grid;gap:7px;font-weight:800}
.login-card input{padding:14px;border:1px solid #d4dfec;border-radius:13px;font-size:16px}
.login-card button{border:0;border-radius:14px;padding:15px;background:#ffc400;color:#062957;font-weight:900;font-size:16px;cursor:pointer}
.login-card>a{margin-top:18px;text-align:center}.alert{background:#fff0f0;color:#b42318;padding:12px;border-radius:11px}
@media(max-width:820px){.login-shell{grid-template-columns:1fr}.login-brand{padding:45px 25px}.login-brand h1{font-size:36px}.login-card{padding:45px 25px}}