:root {
  color-scheme: dark;
  --astra-auth-bg: #0e1621;
  --astra-auth-panel: #17212b;
  --astra-auth-border: #33485b;
  --astra-auth-accent: #64a9e3;
  --astra-auth-text: #f1f5f8;
  --astra-auth-muted: #9cadba;
}

html,
body {
  background: var(--astra-auth-bg) !important;
  color: var(--astra-auth-text) !important;
}

body::before {
  background: radial-gradient(circle, rgb(100 169 227 / 18%) 0, transparent 68%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: fixed;
}

main,
main > div,
form { position: relative; }
h1, h2, h3, label, p { color: var(--astra-auth-text) !important; }
p, small { color: var(--astra-auth-muted) !important; }
input,
select,
textarea {
  background: var(--astra-auth-panel) !important;
  border-color: var(--astra-auth-border) !important;
  color: var(--astra-auth-text) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--astra-auth-accent) !important;
  outline-color: var(--astra-auth-accent) !important;
}
button,
input[type="submit"] {
  background: var(--astra-auth-accent) !important;
  border-color: var(--astra-auth-accent) !important;
  color: #08131d !important;
}
a { color: var(--astra-auth-accent) !important; }

@media (max-width: 720px) {
  html,
  body {
    box-sizing: border-box;
    min-height: 100dvh;
  }

  body {
    padding-top: env(safe-area-inset-top);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  button,
  input[type="submit"] {
    min-height: 44px;
  }
}