*{font-family:Inter,sans-serif;box-sizing:border-box;}
:root{
  --navy:#0b2a4a;
  --burgundy:#2d4697;
  --light-bg:#f5f7fb;
}
body{
  background:var(--light-bg);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.login-wrapper{
  max-width:1000px;
  width:100%;
  background:white;
  border-radius:30px;
  overflow:hidden;
  box-shadow:0 30px 60px rgba(0,20,40,0.2);
}
.login-illustration{
  background:linear-gradient(135deg,#0b2a4a,#163f70);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}
.login-form-area{ padding:45px 40px; }

.brand{
  display:flex; align-items:center; gap:10px; margin-bottom:25px;
}
.brand-icon{
  width:52px;height:52px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:white; box-shadow:0 4px 12px rgba(0,0,0,0.08);
}
.brand-icon img{ max-height:38px; }

.role-selector{
  display:flex; gap:10px;background:#edf2f9;
  padding:6px;border-radius:50px;margin:20px 0;
}
.role-btn{
  flex:1;border:none;background:transparent;
  padding:10px;border-radius:40px;font-weight:600;
  cursor:pointer;color:var(--navy);
}
.role-btn.active{
  background:white;color:var(--burgundy);
  box-shadow:0 6px 12px rgba(0,0,0,0.08);
}

.form-control{
  border-radius:20px;border:1.5px solid #dee5ed;
  padding:12px 18px;background:#fafcff;
}
.form-control:focus{
  border-color:var(--burgundy);
  box-shadow:0 0 0 3px rgba(172,46,63,0.15);
}

.btn-login{
  background:var(--burgundy);
  border:none;padding:12px;border-radius:50px;
  font-weight:600;color:white;width:100%;margin-top:15px;
}
.btn-login:hover{ background:#df9d00; transform:translateY(-2px); }

@media(max-width:768px){
  .login-illustration{ display:none; }
}