* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--ea-color-canvas, #090a0c);
  color: var(--ea-color-text, #f3f7fa);
  font-family: var(--ea-font-ui, "Segoe UI", system-ui, sans-serif);
}

.auth-shell {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    max(20px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom))
    max(20px, env(safe-area-inset-left));
}

.auth-content {
  width: min(100%, 340px);
  display: grid;
  gap: var(--ea-space-6, 24px);
}

h1 {
  margin: 0;
  color: var(--ea-color-text, #f3f7fa);
  font: var(--ea-font-weight-strong, 720) clamp(2rem, 8vw, 2.5rem)/1.08 var(--ea-font-display, inherit);
  letter-spacing: -.035em;
  text-align: center;
}

.auth-content .ea-button {
  min-height: 52px;
}

.auth-message {
  margin: -8px 0 0;
  color: var(--ea-color-text-muted, #8b97a5);
  font-size: .95rem;
  line-height: 1.55;
  text-align: center;
}