/* the browser's 8px body margin showed as a frame round the page */
body { margin: 0; background: #151b2b; }
.auth {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 20px;
  background: #151b2b;
  color: #f4f6fb;
  font-family: Inter, -apple-system, system-ui, ui-sans-serif, "Helvetica Neue", sans-serif;
}
.auth-box { width: min(420px, 100%); text-align: center; }
.auth .logo {
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.04em;
  margin-bottom: 28px;
  font-size: calc(1em + 2pt);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.auth .logo span { font-size: 1em; font-weight: inherit; }
.logo span { color: #C9A227; }
.auth h1 { font-size: 44px; letter-spacing: -0.04em; margin: 0 0 10px; font-weight: 700; }
.auth .sub { color: #b7c0d0; margin: 0 0 28px; font-size: 16px; }
.auth a { color: #C9A227; text-decoration: none; }
.social { display: flex; gap: 12px; margin: 8px 0 22px; }
.social a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  color: #111;
  background: #fff;
}
.or { display: flex; align-items: center; gap: 14px; color: #8b95a8; margin: 6px 0 10px; font-size: 14px; }
.or:before, .or:after { content: ""; flex: 1; height: 1px; background: #3a455c; }
.field { text-align: left; margin: 22px 0 8px; }
.field input,
.field select {
  box-sizing: border-box;   /* a text input's padding otherwise pushed it past the select beside it */
  width: 100%;
  background: transparent !important;
  border: 0;
  border-bottom: 1px solid #5b6780;
  color: #f4f6fb;
  padding: 10px 28px 10px 0;
  outline: none;
  font-size: 16px;
  border-radius: 0;
  box-shadow: none;
}
.field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0h10L5 6z' fill='%238b95a8'/%3E%3C/svg%3E") right 4px center no-repeat !important;
}
.field select:invalid { color: #8b95a8; }
.field option { color: #111; }
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f4f6fb;
  transition: background-color 9999s ease-out 0s;
  box-shadow: 0 0 0 1000px #151b2b inset;
}
.field { position: relative; }
.eye {
  position: absolute; right: 0; top: 8px;
  background: none; border: 0; color: #8b95a8; cursor: pointer;
}
/* block, not flex: in a flex box the text and the terms link become separate columns */
.check {
  display: block; position: relative; padding-left: 26px; text-align: left;
  color: #b7c0d0; font-size: 13px; margin: 28px 0 22px;
}
.check input { position: absolute; left: 0; top: 0; margin: 1px 0 0; }
.btn-mint {
  width: 100%;
  height: 48px;
  border: 0;
  border-radius: 8px;
  background: #C9A227;
  color: #102018;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
}
.err { color: #ff8b8b; min-height: 1.3em; margin-top: 12px; }