main.full{
  min-height:100vh;
  background:#f7f9fc;
}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:42px 24px;
  background:
    radial-gradient(circle at 50% 44%, rgba(227,235,245,.48), transparent 34%),
    #f7f9fc;
}

.login-form{
  width:min(520px,100%);
  background:#fff;
  border:1px solid #e7ebf0;
  border-radius:22px;
  padding:54px 48px 46px;
  box-shadow:0 24px 65px rgba(35,55,78,.09);
}

.login-heading{
  text-align:center;
  margin-bottom:34px;
}

/* Login header must stay stacked; app.css has a generic header flex rule. */
header.login-heading{
  display:block;
  width:100%;
  padding:0;
  text-align:center;
}

header.login-heading h1,
header.login-heading p{
  width:100%;
  text-align:center;
}

header.login-heading h1{
  white-space:nowrap;
}

header.login-heading p{
  white-space:nowrap;
}

.login-heading h1{
  margin:0;
  color:#102b49;
  font-size:36px;
  font-weight:800;
  line-height:1.25;
  letter-spacing:-.5px;
}

.login-heading p{
  margin:9px 0 0;
  color:#8492a3;
  font-size:14px;
  line-height:1.8;
}

.login-field{
  display:grid;
  gap:9px;
  margin:0 0 22px;
}

.login-field>span{
  color:#233a55;
  font-size:13px;
  font-weight:700;
}

.login-input{
  height:56px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 16px;
  background:#fff;
  border:1px solid #dbe2ea;
  border-radius:11px;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.login-input:focus-within{
  border-color:#eb7a5a;
  box-shadow:0 0 0 4px rgba(235,122,90,.10);
}

.login-input input{
  flex:1;
  width:100%;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#1c3149;
  font:inherit;
  font-size:13px;
  text-align:right;
}

.login-input input::placeholder{
  color:#9aa7b6;
}

.login-input>svg,
.toggle-password svg{
  width:21px;
  height:21px;
  flex:0 0 21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.login-input>svg{
  color:#8796a8;
}

.toggle-password{
  display:grid;
  place-items:center;
  padding:3px;
  border:0;
  background:transparent;
  color:#8796a8;
  cursor:pointer;
}

.toggle-password:hover,
.toggle-password.visible{
  color:#e86747;
}

.login-submit{
  width:100%;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:11px;
  margin-top:30px;
  background:linear-gradient(90deg,#f06a45,#eb744f);
  color:#fff;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 26px rgba(226,101,68,.20);
  transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.login-submit:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 15px 30px rgba(226,101,68,.25);
}

.login-submit:disabled{
  cursor:wait;
  opacity:.78;
}

.login-status{
  min-height:58px;
  margin-top:18px;
  display:none;
  align-items:center;
  justify-content:center;
  gap:11px;
  border:1px solid #edf0f4;
  border-radius:11px;
  background:#f8fafc;
  color:#6f7f92;
  font-size:12px;
  font-weight:600;
}

.login-form.is-loading .login-status{
  display:flex;
}

.login-spinner{
  width:22px;
  height:22px;
  border:3px solid #e1e6ec;
  border-top-color:#ee704d;
  border-radius:50%;
  animation:login-spin .75s linear infinite;
}

@keyframes login-spin{
  to{transform:rotate(360deg)}
}

main.full>.flash{
  position:fixed;
  z-index:30;
  top:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(520px,calc(100% - 32px));
  margin:0;
  text-align:center;
  box-shadow:0 12px 35px rgba(7,26,47,.13);
}

@media(max-width:620px){
  .login-page{
    padding:22px 16px;
    background:#f7f9fc;
  }

  .login-form{
    padding:38px 24px 30px;
    border-radius:18px;
  }

  .login-heading{
    margin-bottom:28px;
  }

  .login-heading h1{
    font-size:30px;
  }

  .login-heading p{
    font-size:13px;
  }

  .login-input,
  .login-submit{
    height:54px;
  }
}

@media(max-height:700px) and (min-width:621px){
  .login-page{
    padding:24px;
  }

  .login-form{
    padding:36px 44px 32px;
  }

  .login-heading{
    margin-bottom:24px;
  }

  .login-heading h1{
    font-size:31px;
  }

  .login-field{
    margin-bottom:16px;
  }

  .login-submit{
    margin-top:22px;
  }
}