html, body { height: 100%; }
body {
  margin: 0; display: grid; place-items: center; overflow: hidden;
  background: #F4F5F8 url('img/background.png') center / cover no-repeat;
}

.login-card {
  position: relative; width: 360px; max-width: calc(100vw - 40px);
  background: #FFFFFF; border: 1px solid var(--line-soft); border-radius: 18px;
  box-shadow: 0 18px 50px rgba(20, 22, 28, 0.18);
  padding: 38px 34px 30px;
}
.login-logo { display: grid; place-items: center; margin-bottom: 26px; }
.login-logo img { height: 30px; display: block; }
.login-field { margin-bottom: 10px; }
.login-field .input { width: 100%; padding: 12px 14px; font-size: 13.5px; border-radius: 11px; }
.login-btn {
  width: 100%; margin-top: 14px; appearance: none; cursor: pointer; font: inherit;
  font-size: 14px; font-weight: 800; letter-spacing: -0.2px;
  background: var(--mint); border: 0; color: #0B0C10;
  padding: 13px 0; border-radius: 11px; transition: filter 0.12s;
}
.login-btn:hover { filter: brightness(0.95); }
.login-opts { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }
.login-opt { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); cursor: pointer; }
.login-err {
  font-size: 12px; color: var(--red); text-align: center; margin: 12px 0 0; min-height: 15px;
}