.auth-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #edf0f3;
}

.auth-card {
  width: min(100%, 420px);
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(21, 34, 46, .1);
}

.auth-brand {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 14px;
  background: var(--red);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
}

.auth-card h1 {
  font-size: 25px;
}

.auth-intro {
  margin-top: 9px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.auth-card form,
.auth-card label {
  display: grid;
}

.auth-card form {
  gap: 13px;
  margin-top: 24px;
}

.auth-card label {
  gap: 7px;
  color: #3c4854;
  font-size: 12px;
  font-weight: 700;
}

.auth-card input[type=password] {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid #cfd7df;
  border-radius: 10px;
  font: inherit;
}

.auth-card .primary {
  margin-top: 0;
}

.auth-error,
.auth-setup {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.auth-error {
  background: #fff2f2;
  color: var(--red-dark);
}

.auth-setup {
  border: 1px solid #edc9a2;
  background: #fff8e8;
  color: #6f4d19;
}

.auth-setup p {
  margin-top: 6px;
}

.logout-form {
  margin-left: 8px;
}

.logout-button {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: #3d4955;
  font-size: 11px;
  font-weight: 700;
}