* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  background: #151517;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #f9fafb;
}
.auth {
  width: 336px;
  display: flex;
  flex-direction: column;
}
.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  user-select: none;
}
.logo img { display: block; }

.heading {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 10px;
}
.intro, .desc {
  text-align: center;
  font-size: 12px;
  line-height: 18px;
  color: #adb2b8;
  margin-bottom: 40px;
}
.desc { margin-bottom: 24px; }

.form-error {
  color: #f0a8a8;
  font-size: 13px;
  line-height: 18px;
  text-align: center;
}
.form-error:not(:empty) { margin-bottom: 14px; }

.field {
  display: flex;
  align-items: center;
  height: 48px;
  background: #1b1b1c;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  padding: 0 20px 0 16px;
  transition: border-color 0.2s;
}
.field:focus-within { border-color: #96a9c8; }
.field + .field { margin-top: 26px; }
.field input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #f9fafb;
  font-size: 14px;
  font-family: inherit;
  height: 25px;
}
.field input::placeholder { color: #81858c; }

.eye {
  background: none;
  border: none;
  cursor: pointer;
  color: #81858c;
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 8px;
}
.eye:hover { color: #adb2b8; }

.send-code {
  background: none;
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  color: #a8b8d2;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  padding: 2px 0 2px 14px;
  margin-left: 10px;
  white-space: nowrap;
}
.send-code:hover { opacity: 0.85; }

.consent {
  margin-top: 18px;
  font-size: 12px;
  line-height: 18px;
  color: #adb2b8;
}
.consent.centered { text-align: center; margin-top: 20px; }
.consent a { color: #f9fafb; text-decoration: underline; }

.row {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  line-height: 18px;
}
.row a { color: #a8b8d2; text-decoration: none; }
.row a:hover { text-decoration: underline; }

.btn-primary {
  margin-top: 12px;
  height: 42px;
  width: 100%;
  border: none;
  border-radius: 4096px;
  background: #ece9dd;
  color: #141c30;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
  display: block;
  text-align: center;
  line-height: 42px;
  text-decoration: none;
}
.btn-primary:hover { opacity: 0.9; }
.btn-primary.spaced { margin-top: 24px; }
.btn-primary.spaced-lg { margin-top: 44px; }

.center-link {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
}
.center-link a { color: #a8b8d2; text-decoration: none; }
.center-link a:hover { text-decoration: underline; }

.oauth {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 12px;
  line-height: 18px;
  color: #adb2b8;
}
.oauth a { color: #adb2b8; text-decoration: underline; }
.oauth a:hover { color: #f9fafb; }
.oauth .divider { color: rgba(255, 255, 255, 0.18); }

.footer {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 13px;
  color: #81858c;
}
.footer a { color: #81858c; text-decoration: none; }
.footer a:hover { color: #adb2b8; }