:root {
  color-scheme: light;
  font-family: Inter, Aptos, "Segoe UI", sans-serif;
}

html,
body {
  min-height: 100%;
  margin: 0;
  background: #f4f7f8;
}

#fieldAuthRoot:empty {
  display: none;
}

.field-auth-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: 24px;
  background:
    radial-gradient(circle at 18% 18%, rgb(78 209 169 / 20%), transparent 34%),
    linear-gradient(145deg, #0b2438, #173e55);
}

.field-auth-card {
  width: min(100%, 430px);
  box-sizing: border-box;
  padding: 30px;
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 70px rgb(0 0 0 / 28%);
  color: #0b2438;
}

.field-auth-loading {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.field-auth-loading::before {
  width: 18px;
  height: 18px;
  border: 3px solid #d7e4e8;
  border-top-color: #1c8f72;
  border-radius: 50%;
  content: "";
  animation: field-spin 0.8s linear infinite;
}

.field-auth-error strong {
  display: block;
  margin-bottom: 8px;
  color: #a32626;
  font-size: 18px;
}

.field-auth-error p {
  margin: 0;
  color: #52636d;
  line-height: 1.5;
}

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