body{
  display:grid;
  place-items:center;
  min-height:100vh;
  padding:24px;
  background:linear-gradient(145deg,#edf4fb,#f8fafc);
}
.login-card{
  width:min(430px,calc(100vw - 32px));
  padding:38px;
}
.login-brand{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:28px;
}
.login-logo{
  width:142px;
  height:auto;
  display:block;
  flex:0 0 auto;
}
.login-brand-text{
  min-width:0;
}
.login-brand h1{
  margin:0;
  font-size:22px;
  letter-spacing:-.4px;
  white-space:nowrap;
}
.login-brand p{
  margin:6px 0 0;
  color:#6d7887;
  font-size:12px;
  white-space:nowrap;
}
.field{
  margin-top:17px;
}
.field label{
  display:block;
  margin-bottom:7px;
  font-size:13px;
  font-weight:800;
}
.field input{
  width:100%;
  height:46px;
  padding:0 13px;
  border:1px solid #cfd9e5;
  border-radius:9px;
  background:#fff;
}
.field input:focus{
  outline:2px solid rgba(0,102,204,.14);
  border-color:#0066cc;
}
.login-button{
  width:100%;
  margin-top:22px;
}
.login-links{
  margin-top:17px;
  text-align:center;
}
.login-links a{
  color:#64748b;
  font-size:12px;
  font-weight:700;
  text-decoration:none;
}
.login-links a:hover,
.login-links a:focus-visible{
  color:#0066cc;
  text-decoration:underline;
  text-underline-offset:3px;
}
@media(max-width:520px){
  .login-card{padding:30px 24px}
  .login-brand{flex-direction:column;text-align:center;gap:12px}
  .login-logo{width:155px}
  .login-brand h1,.login-brand p{white-space:normal}
}